sparkle-design 1.0.0 → 1.0.2

package/README.en.md

@@ -38,7 +38,7 @@ This automatically:
 
 1. Detects your package manager (pnpm / npm / yarn / bun)
 2. Adds `sparkle-design` to dependencies and `tailwindcss` + `@tailwindcss/postcss` to devDependencies
-3. Generates `sparkle.config.json` / `postcss.config.mjs` / `globals.css` if missing
+3. Generates `sparkle.config.json` / `postcss.config.mjs` / Tailwind entry CSS (Next.js: `globals.css`, Vite: `index.css`) if missing
 4. Adds a Sparkle Design guard block and `lint:sparkle` script to `CLAUDE.md`
 5. Generates `sparkle-design.css` and `SparkleHead.tsx`
 
@@ -65,6 +65,16 @@ export default function RootLayout({ children }) {
 
 Customize primary color, fonts, border radius, and more via `sparkle.config.json`. To tweak settings inside Figma, the [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) plugin is available. See `sparkle-design-cli generate --help` for details.
 
+> **⚠️ Note for TailwindCSS v4 when using sparkle-design as an npm package:** TailwindCSS v4 does not automatically scan utility classes inside `node_modules`. When consuming `sparkle-design` as an npm package, your entry CSS needs an `@source` directive like the one below:
+>
+> ```css
+> @import "tailwindcss";
+> @source "../../node_modules/sparkle-design/dist";
+> @import "./sparkle-design.css";
+> ```
+>
+> From `sparkle-design-cli` v2.0.6 onward, `generate` / `setup` **auto-scans your `package.json`** (dependencies / devDependencies) and automatically inserts the matching `@source` directive when it detects `sparkle-design`. No manual config is required. If you want to include additional design system packages, add them to `extend.source-packages` in `sparkle.config.json`; the detected packages and your explicit list will be merged.
+
 #### Installing as an AI Agent Skill (optional)
 
 If you use an AI agent such as Claude Code, Codex, or Cursor, you can also install the Sparkle Design skills with [Vercel's skills CLI](https://github.com/vercel-labs/skills) to have the agent walk you through setup.

package/README.md

@@ -38,7 +38,7 @@ npx --yes sparkle-design-cli setup --assistant claude
 
 1. パッケージマネージャー（pnpm / npm / yarn / bun）を自動検出
 2. `sparkle-design` を dependencies、`tailwindcss` + `@tailwindcss/postcss` を devDependencies に追加
-3. `sparkle.config.json` / `postcss.config.mjs` / `globals.css` を必要に応じて生成
+3. `sparkle.config.json` / `postcss.config.mjs` / Tailwind エントリ CSS（Next.js: `globals.css`、Vite: `index.css`）を必要に応じて生成
 4. `CLAUDE.md` に Sparkle Design ガードブロックと `lint:sparkle` スクリプトを追加
 5. `sparkle-design.css` と `SparkleHead.tsx` を生成
 
@@ -65,6 +65,16 @@ export default function RootLayout({ children }) {
 
 `sparkle.config.json` でプライマリカラー・フォント・角丸などをカスタマイズできます。Figma 上で設定を調整したい場合は [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) プラグインを利用できます。詳細は `sparkle-design-cli generate --help` を参照してください。
 
+> **⚠️ TailwindCSS v4 で npm package として使う場合の注意:** TailwindCSS v4 は `node_modules` 内のユーティリティクラスを自動スキャンしないため、`sparkle-design` を npm package として使うときはエントリ CSS に以下のような `@source` ディレクティブが必要です。
+>
+> ```css
+> @import "tailwindcss";
+> @source "../../node_modules/sparkle-design/dist";
+> @import "./sparkle-design.css";
+> ```
+>
+> `sparkle-design-cli` v2.0.6 以降は、`generate` / `setup` 実行時に **`package.json` の dependencies / devDependencies を自動スキャン** し、`sparkle-design` が含まれていれば該当する `@source` を自動挿入します。`sparkle.config.json` 側で何も設定しなくても動きます。独自のデザインシステムパッケージを併用したい場合のみ `extend.source-packages` に追記すると、自動検出分と合算されます。
+
 #### AI エージェントに Skill として導入する場合（任意）
 
 Claude Code / Codex / Cursor などの AI エージェントを使っている場合は、[Vercel の skills CLI](https://github.com/vercel-labs/skills) 経由で Sparkle Design のスキルセットを導入しておくと、会話から誘導してもらうこともできます。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -53,7 +53,6 @@
     "update:public-domain": "node scripts/update-public-domain.mjs"
   },
   "dependencies": {
-    "@figma/code-connect": "^1.3.4",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -71,6 +70,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.1",
+    "@figma/code-connect": "^1.3.4",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-onboarding": "^10.3.5",
@@ -124,7 +124,11 @@
       "glob@>=11.0.0 <11.1.0": "^11.1.0",
       "js-yaml@>=4.0.0 <4.1.1": "^4.1.1",
       "playwright": "^1.59.1",
-      "form-data": "^4.0.4"
+      "form-data": "^4.0.4",
+      "hono": "^4.12.14",
+      "yaml@>=2.0.0 <2.8.3": "^2.8.3",
+      "@eslint/plugin-kit": "^0.3.4",
+      "brace-expansion@<1.1.13": "^1.1.13"
     }
   },
   "main": "./dist/index.js",

package/dist/components/ui/badge/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/badge/index.figma.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Badge } from "./index.js";
-/**
- * -- 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(Badge, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1274%3A1622", {
-    props: {
-        // These props were automatically mapped based on your linked code:
-        size: figma.enum("size", {
-            xs: "xs",
-            sm: "sm",
-            md: "md",
-            lg: "lg",
-        }),
-        variant: figma.enum("variant", {
-            normal: "normal",
-            emphasis: "emphasis",
-        }),
-        isGapped: figma.boolean("isGapped"),
-        // No matching props could be found for these Figma properties:
-        number: figma.string("number"),
-    },
-    example: props => (_jsx(Badge, { size: props.size, variant: props.variant, isGapped: props.isGapped, children: props.number })),
-});

package/dist/components/ui/breadcrumb/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/breadcrumb/index.figma.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./index.js";
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-figma.connect(Breadcrumb, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2755%3A25149", {
-    props: {},
-    example: props => (_jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, { children: "/" }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Current Page" }) })] }) })),
-});
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-figma.connect(BreadcrumbItem, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=252%3A8944", {
-    props: {
-    // No matching props could be found for these Figma properties:
-    // "isCurrent": figma.boolean('isCurrent')
-    },
-    example: props => (_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Current Page" }) })),
-});

package/dist/components/ui/button/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/button/index.figma.js

@@ -1,59 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Button } from "./index.js";
-/**
- * -- 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(Button, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=11672%3A4288", {
-    props: {
-        // These props were automatically mapped based on your linked code:
-        size: figma.enum("size", {
-            sm: "sm",
-            md: "md",
-            lg: "lg",
-        }),
-        variant: figma.enum("variant", {
-            solid: "solid",
-            outline: "outline",
-            ghost: "ghost",
-        }),
-        theme: figma.enum("theme", {
-            primary: "primary",
-            neutral: "neutral",
-            negative: "negative",
-        }),
-        isLoading: figma.enum("state", {
-            loading: true,
-        }),
-        isDisabled: figma.enum("state", {
-            disabled: true,
-        }),
-        disabled: figma.enum("state", {
-            disabled: true,
-        }),
-        label: figma.string("label"),
-        // No matching props could be found for these Figma properties:
-        // "isFocused": figma.boolean('isFocused'),
-        suffixIcon: figma.boolean("isSuffixIcon", {
-            // FIXME: 複数箇所でアイコンのインスタンスを参照しようとするとCode Connectがエラーになるためコメントアウト中
-            // true: figma.instance("suffixIcon").getProps<{
-            //   icon: string;
-            //   size: number;
-            //   fill: boolean;
-            // }>(),
-            true: "expand_more",
-            false: undefined,
-        }),
-        prefixIcon: figma.boolean("isPrefixIcon", {
-            true: figma.instance("prefixIcon").getProps(),
-            false: undefined,
-        }),
-    },
-    example: props => {
-        var _a;
-        return (_jsx(Button, { size: props.size, variant: props.variant, theme: props.theme, isLoading: props.isLoading, isDisabled: props.isDisabled, disabled: props.disabled, prefixIcon: (_a = props.prefixIcon) === null || _a === void 0 ? void 0 : _a.icon, suffixIcon: props.suffixIcon, children: props.label }));
-    },
-});

package/dist/components/ui/card/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/card/index.figma.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Card, ClickableCard, CardHeader, CardTitle, CardControl, CardDescription, CardContent, CardFooter, } from "./index.js";
-/**
- * Card - 基本的なカードコンポーネント
- * en: Card - Basic card component
- */
-figma.connect(Card, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1274-60861&t=A1ymB6VaQrqwNcKU-4", {
-    props: {},
-    example: props => (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["\u30BF\u30A4\u30C8\u30EB", _jsx(CardDescription, { className: "character-3-regular-pro text-text-low", children: "Description" })] }), _jsx(CardControl, { children: "Control" })] }), _jsx(CardContent, { children: "Content" }), _jsx(CardFooter, { children: "Footer" })] })),
-});
-/**
- * ClickableCard - クリック可能なカードコンポーネント
- * en: ClickableCard - Clickable card component
- */
-figma.connect(ClickableCard, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=8271-617&t=A1ymB6VaQrqwNcKU-4", {
-    props: {
-        /**
-         * 無効化状態
-         * en: Disabled state
-         */
-        isDisabled: figma.enum("state", {
-            disabled: true,
-            default: false,
-        }),
-    },
-    example: props => (_jsxs(ClickableCard, { isDisabled: props.isDisabled, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["\u30BF\u30A4\u30C8\u30EB", _jsx(CardDescription, { className: "character-3-regular-pro text-text-low", children: "Description" })] }), _jsx(CardControl, { children: "Control" })] }), _jsx(CardContent, { children: "Content" })] })),
-});

package/dist/components/ui/checkbox/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/checkbox/index.figma.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Checkbox } from "./index.js";
-/**
- * -- 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(Checkbox, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=176%3A7554", {
-    props: {
-        // These props were automatically mapped based on your linked code:
-        size: figma.enum("size", {
-            sm: "sm",
-            md: "md",
-            lg: "lg",
-        }),
-        isInvalid: figma.boolean("isInvalid"),
-        label: figma.string("label"),
-        indeterminate: figma.enum("body", {
-            indeterminate: true,
-        }),
-        defaultChecked: figma.enum("body", {
-            checked: true,
-        }),
-        isDisabled: figma.enum("state", {
-            disabled: true,
-        }),
-        // No matching props could be found for these Figma properties:
-        // "isLabel": figma.boolean('isLabel'),
-        // "isFocused": figma.boolean('isFocused'),
-    },
-    example: props => (_jsx(Checkbox, { size: props.size, isInvalid: props.isInvalid, label: props.label, indeterminate: props.indeterminate, isDisabled: props.isDisabled, defaultChecked: props.defaultChecked })),
-});

package/dist/components/ui/dialog/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/dialog/index.figma.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogCancel, DialogAction, } from "./index.js";
-/**
- * -- 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(Dialog, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=14857-825", {
-    props: {
-        variant: figma.enum("status", {
-            neutral: "neutral",
-            warning: "warning",
-            negative: "negative",
-        }),
-        title: figma.string("title"),
-        description: figma.string("description"),
-    },
-    example: props => (_jsx(Dialog, { children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: props.title }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogFooter, { children: [_jsx(DialogCancel, { children: "\u30AD\u30E3\u30F3\u30BB\u30EB" }), _jsx(DialogAction, { children: "\u4FDD\u5B58" })] })] }) })),
-});

package/dist/components/ui/divider/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/divider/index.figma.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Divider } from "./index.js";
-/**
- * -- 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(Divider, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=817-5328&t=lCPcHH1Zd0uroqLb-4", {
-    props: {
-        /**
-         * ディバイダーの強調度
-         * en: Emphasis level of the divider
-         */
-        emphasis: figma.enum("emphasis", {
-            low: "low",
-            middle: "middle",
-            high: "high",
-        }),
-        /**
-         * 線のスタイル
-         * en: Line style
-         */
-        lineStyle: figma.enum("style", {
-            solid: "solid",
-            dashed: "dashed",
-        }),
-        /**
-         * ディバイダーの方向
-         * en: Direction of the divider
-         */
-        direction: figma.enum("direction", {
-            horizontal: "horizontal",
-            vertical: "vertical",
-        }),
-    },
-    example: props => (_jsx(Divider, { emphasis: props.emphasis, lineStyle: props.lineStyle, direction: props.direction })),
-});

package/dist/components/ui/form/index.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ui/form/index.figma.js

@@ -1,129 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from "@figma/code-connect";
-import { Input } from "../input/index.js";
-import { FormErrorMessage, FormHeader, FormHelperMessage, FormControl, } from "./index.js";
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-// figma.connect(
-//   Form,
-//   "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1274%3A66278",
-//   {
-//     props: {
-//       // No matching props could be found for these Figma properties:
-//       // "isErrorMessage": figma.boolean('isErrorMessage'),
-//       // "isHelpMessage": figma.boolean('isHelpMessage')
-//     },
-//     example: props => {
-//       return (
-//         <Form {...UseFormReturnType}>
-//           <FormField
-//             name="example"
-//             render={({ field, fieldState }) => (
-//               <FormItem>
-//                 <FormHeader label="ラベル" />
-//                 <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
-//                 <FormControl>
-//                   <Input
-//                     placeholder="サンプルテキスト"
-//                     {...field}
-//                     {...fieldState}
-//                     isInvalid={fieldState.invalid}
-//                   />
-//                 </FormControl>
-//                 <FormErrorMessage />
-//               </FormItem>
-//             )}
-//           />
-//         </Form>
-//       );
-//     },
-//   }
-// );
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-figma.connect(FormErrorMessage, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=573%3A6321", {
-    props: {
-    // No matching props could be found for these Figma properties:
-    // "label": figma.string('label')
-    },
-    example: props => _jsx(FormErrorMessage, {}),
-});
-/**
- * -- 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(FormHeader, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=573%3A4867", {
-    props: {
-        // These props were automatically mapped based on your linked code:
-        label: figma.string("label"),
-        isRequired: figma.boolean("isRequired"),
-        // No matching props could be found for these Figma properties:
-        helpText: figma.boolean("isHintTrigger", {
-            true: "有効",
-            false: undefined,
-        }),
-    },
-    example: props => (_jsx(FormHeader, { label: props.label, isRequired: props.isRequired, helpText: props.helpText })),
-});
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-figma.connect(FormHelperMessage, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=574%3A10563", {
-    props: {
-        // No matching props could be found for these Figma properties:
-        label: figma.string("label"),
-    },
-    example: props => _jsx(FormHelperMessage, { children: props.label }),
-});
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-figma.connect(FormControl, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2831%3A2244", {
-    props: {
-    // No matching props could be found for these Figma properties:
-    // "unitLabel1": figma.string('unitLabel 1'),
-    // "unitLabel2": figma.string('unitLabel 2'),
-    // "unitLabel3": figma.string('unitLabel 3'),
-    // "isShowUnitLabel": figma.boolean('isShowUnitLabel'),
-    // "type": figma.enum('type', {
-    //   "input": "input",
-    //   "input unit 2": "input-unit-2",
-    //   "input range": "input-range",
-    //   "number": "number",
-    //   "number range": "number-range",
-    //   "select": "select",
-    //   "select range": "select-range",
-    //   "date": "date",
-    //   "date range": "date-range",
-    //   "time": "time",
-    //   "time range": "time-range",
-    //   "password": "password",
-    //   "file": "file",
-    //   "textarea": "textarea",
-    //   "radio": "radio",
-    //   "checkbox": "checkbox",
-    //   "input unit 3": "input-unit-3"
-    // })
-    },
-    example: props => (_jsx(FormControl, { children: _jsx(Input, { placeholder: "\u30B5\u30F3\u30D7\u30EB\u30C6\u30AD\u30B9\u30C8" }) })),
-});

package/dist/components/ui/icon/index.figma.d.ts

@@ -1 +0,0 @@
-export {};