Switchの修正

README.md

@@ -241,7 +241,7 @@ Sparkle Design のバッジは、コンポーネントが Sparkle Design を使
 | Spinner           | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Stack             | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Stepper           | ❌   | ❌        | ❌         | ❌                 | ❌            |
-| Switch            | ✅   | ✅        | ✅         | ❌                 | ❌            |
+| Switch            | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Table             | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Tabs              | ✅   | ✅        | ✅         | ❌                 | ❌            |
 | Tag               | ✅   | ✅        | ✅         | ❌                 | ❌            |

public/r/tooltip.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:component",
+  "title": "Tooltip",
+  "description": "ツールチップは情報を一時的に補足するために使用するコンポーネントです。",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://sparkle-design.vercel.app/r/sparkle-font.json",
+    "https://sparkle-design.vercel.app/r/sparkle-color.json",
+    "https://sparkle-design.vercel.app/r/sparkle-style.json"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/tooltip/index.tsx",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TooltipContentコンポーネントのプロパティ型\n * en: Props type for TooltipContent component\n */\ninterface TooltipContentProps\n  extends React.ComponentProps<typeof TooltipPrimitive.Content> {\n  /**\n   * ツールチップの表示位置を指定します。\n   * en: Specifies the position of the tooltip (top, right, bottom, left).\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /**\n   * トリガー要素とツールチップの間の距離を指定します。\n   * en: Specifies the distance between the trigger element and the tooltip.\n   */\n  sideOffset?: number;\n}\n\n/**\n * TooltipProvider コンポーネント\n * en: TooltipProvider component\n */\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tooltip コンポーネント\n * en: Tooltip component\n */\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\n/**\n * TooltipTrigger コンポーネント\n * en: TooltipTrigger component\n */\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/**\n * **概要 / Overview**\n *\n * - ツールチップは情報を一時的に補足するために使用するコンポーネントです。\n * - en: The Tooltip component is used to provide additional information temporarily.\n *\n * **使用例 / Usage Example**\n *\n * ```tsx\n * <Tooltip>\n *   <TooltipTrigger>Tooltip Trigger</TooltipTrigger>\n *   <TooltipContent>Tooltip Content</TooltipContent>\n * </Tooltip>\n * ```\n *\n * @param {ButtonProps} props\n */\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 0,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-95\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n          \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          \"z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice\",\n          \"px-2 py-1 character-2-regular-pro text-white\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-neutral-900 fill-neutral-900 shadow-float z-50 size-3 translate-y-[calc(-50%_-_1px)] rotate-45 rounded-xs\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n",
+      "type": "registry:component"
+    }
+  ]
+}

src/components/ui/switch/index.figma.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import figma from "@figma/code-connect";
+import { Switch } from "./index";
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Switch,
+  "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1075%3A22224",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("size", {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      }),
+      disabled: figma.enum("state", {
+        disabled: true,
+      }),
+      checked: figma.boolean("isChecked"),
+      defaultChecked: figma.boolean("isChecked"),
+      // No matching props could be found for these Figma properties:
+      // "isFocused": figma.boolean('isFocused')
+    },
+    example: props => (
+      <Switch
+        size={props.size}
+        disabled={props.disabled}
+        checked={props.checked}
+        defaultChecked={props.defaultChecked}
+      />
+    ),
+  }
+);

src/components/ui/switch/index.stories.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Switch } from "./index";
 
-/**
- * スイッチコンポーネントのStorybook設定
- */
 const meta: Meta<typeof Switch> = {
   title: "Components/Switch",
   component: Switch,
@@ -15,7 +12,6 @@ const meta: Meta<typeof Switch> = {
     size: {
       control: { type: "radio" },
       options: ["sm", "md", "lg"],
-      description: "スイッチのサイズ (sm: 小, md: 中, lg: 大)",
       defaultValue: "md",
       table: {
         type: { summary: "sm | md | lg" },
@@ -24,7 +20,6 @@ const meta: Meta<typeof Switch> = {
     },
     disabled: {
       control: "boolean",
-      description: "スイッチを無効状態にするかどうか",
       defaultValue: false,
       table: {
         type: { summary: "boolean" },
@@ -33,7 +28,6 @@ const meta: Meta<typeof Switch> = {
     },
     checked: {
       control: "boolean",
-      description: "スイッチをオン状態（チェック状態）にするかどうか",
       defaultValue: false,
       table: {
         type: { summary: "boolean" },
@@ -42,8 +36,6 @@ const meta: Meta<typeof Switch> = {
     },
     onCheckedChange: {
       action: "changed",
-      description:
-        "スイッチの状態が変更されたときに呼び出されるコールバック関数",
       table: {
         type: { summary: "function" },
       },
@@ -98,19 +90,19 @@ export const CheckedAndDisabled: Story = {
  * サイズバリエーション
  */
 export const SizeVariations: Story = {
-  render: () => (
+  render: args => (
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-4">
         <span className="w-10 text-right font-bold">小:</span>
-        <Switch size="sm" />
+        <Switch {...args} size="sm" />
       </div>
       <div className="flex items-center gap-4">
         <span className="w-10 text-right font-bold">中:</span>
-        <Switch size="md" />
+        <Switch {...args} size="md" />
       </div>
       <div className="flex items-center gap-4">
         <span className="w-10 text-right font-bold">大:</span>
-        <Switch size="lg" />
+        <Switch {...args} size="lg" />
       </div>
     </div>
   ),