sparkle-design 1.0.7 → 2.0.0-beta.1

package/README.en.md

@@ -24,6 +24,25 @@ It implements [Goodpatch](https://goodpatch.com/)'s "Sparkle Design" system on t
 - 🎨 **Customizability** ... A dedicated CLI tool lets you apply the same customizations found in the Figma files. This makes it easy to spin up code for design systems built on Sparkle Design.
 - 🤖 **AI Friendly** ... Ships with skills and guard configurations for Claude Code, Cursor, and Codex. Maintain design system quality even during AI-assisted coding.
 
+## Versions, React and CLI support
+
+| Version | React | sparkle-design-cli | Status |
+|---|---|---|---|
+| **2.x** | 19+ | Latest (currently beta: `npx --yes sparkle-design-cli@beta`) | Current. New features and components land here only (currently in beta: `npm install sparkle-design@beta`) |
+| **1.x** | 18 (19 also works) | Latest (`npx --yes sparkle-design-cli`) | **Deprecated maintenance line.** Only bug and security fixes, plus token/style updates needed to stay compatible with the latest CLI |
+
+2.x receives `ref` as a regular prop (the React 19 approach) in every component, so on React 18 refs and Radix `asChild` compositions (e.g. Tooltip / Dialog triggers) don't work correctly. Use 1.x for React 18 projects (npm refuses to install 2.x into a React 18 project because of the peer dependency conflict).
+
+```bash
+npm install sparkle-design@1
+```
+
+Both lines use the latest CLI without pinning. When the tokens generated by the CLI change, 1.x follows, so 1.x looks the same as 2.x (only React 19-specific changes and new features stay out of 1.x).
+
+Even if you stay on 1.x, run `migrate` to check your app's legacy token classes when the tokens generated by the CLI change.
+
+To move from 1.x to 2.x, upgrade your project to React 19 first. `npx --yes sparkle-design-cli@beta migrate` reports how to replace legacy tokens (e.g. `text-neutral-900`) with the new ones (dry run by default; `--write` rewrites files).
+
 ## Quick Start
 
 ### 1. Set up

package/README.md

@@ -24,6 +24,25 @@ shadcn/ui をベースに、[グッドパッチ](https://goodpatch.com/)のデ
 - 🎨 **カスタマイズ性** ... 専用CLIツールを利用し、Figmaファイルと同等のカスタマイズを適用することが出来ます。これによりSparkle Designをベースとしたデザインシステムのコードを素早く用意することが出来ます。
 - 🤖 **AI フレンドリー** ... Claude Code / Cursor / Codex 向けのスキルとガード設定を同梱。AI コーディングでもデザインシステムの品質を維持できます。
 
+## バージョンと React・CLI の対応
+
+| バージョン | React | sparkle-design-cli | 状態 |
+|---|---|---|---|
+| **2.x** | 19 以上 | 最新（現在は beta: `npx --yes sparkle-design-cli@beta`） | 現行。新機能・新コンポーネントはこちらにだけ入ります（現在は beta: `npm install sparkle-design@beta`） |
+| **1.x** | 18（19 でも可） | 最新（`npx --yes sparkle-design-cli`） | **非推奨（deprecated）のメンテナンスライン**。不具合・セキュリティの修正と、最新の CLI と噛み合わせるためのトークン・スタイルの追従だけを行います |
+
+2.x は全コンポーネントで `ref` を通常の props として受け取る React 19 の方式に移行しているため、React 18 では `ref` や Radix の `asChild` 経由の組み合わせ（Tooltip / Dialog のトリガーなど）が正しく動きません。React 18 のプロジェクトは 1.x をお使いください（2.x を React 18 のプロジェクトに入れると、npm では peer 依存の衝突で止まります）。
+
+```bash
+npm install sparkle-design@1
+```
+
+CLI はどちらのバージョンでも固定せず最新を使います。CLI が生成するトークンが変わるときは 1.x も追従するので、1.x でも見た目は 2.x と同じデザインになります（1.x に入らないのは React 19 前提の変更と新機能だけです）。
+
+1.x を使い続ける場合も、CLI が生成するトークンが変わったときは、アプリ側で使っている旧トークンのクラスを `migrate` で確認してください。
+
+1.x から 2.x へは、プロジェクトを React 19 に上げてから移行してください。旧トークン（`text-neutral-900` など）から新トークンへの置き換えは `npx --yes sparkle-design-cli@beta migrate` で確認できます（既定は変更内容の表示のみ。`--write` で書き換え）。
+
 ## クイックスタート
 
 ### 1. セットアップ

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

@@ -7,7 +7,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
     variant?: "normal" | "emphasis" | null | undefined;
     isNumberVisible?: boolean | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | null | undefined;
     isGapped?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeVariants = VariantProps<typeof badgeVariants>;
@@ -54,7 +54,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  * // ❌ Wrong - ステータスラベルに Badge を使わない
  * <Badge>未紐付け</Badge>
  * ```
-
+ *
  * **使用例 / Usage Example**
  *
  * ```tsx
@@ -63,5 +63,5 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @param {BadgeProps} props
  */
-declare function Badge({ className, isNumberVisible, size, variant, isGapped, children, role, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, isNumberVisible, size, variant, isGapped, children, role, ...props }: BadgeProps): React.JSX.Element;
 export { Badge, badgeVariants };

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

@@ -12,18 +12,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils.js";
-const badgeVariants = cva("inline-flex items-center text-white text-center justify-center rounded-full transition-colors focus:outline-hidden focus:ring-2 focus:ring-[var(--color-ring-normal)] focus:ring-offset-2", {
+const badgeVariants = cva("inline-flex overflow-hidden items-center text-text-inverse text-center justify-center rounded-full transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-ring focus:ring-offset-2", {
     variants: {
         variant: {
-            normal: "bg-info-500",
-            emphasis: "bg-negative-500",
+            normal: "bg-surface-primary-high-enabled",
+            emphasis: "bg-surface-negative-high-enabled",
         },
         isNumberVisible: {
             true: "",
             false: "",
         },
         size: {
-            xs: "w-2 h-2 min-w-2",
+            "2xs": "w-2 h-2 min-w-2",
+            xs: "w-3.5 h-3.5 min-w-3.5",
             sm: "w-4 h-4 min-w-4",
             md: "min-w-6 py-0.5 px-1.5 character-1-bold-mono",
             lg: "min-w-8 py-1 px-1.5 character-3-bold-mono",
@@ -35,25 +36,30 @@ const badgeVariants = cva("inline-flex items-center text-white text-center justi
     },
     compoundVariants: [
         // isGappedのボーダー設定
+        {
+            isGapped: true,
+            size: "2xs",
+            class: "outline-border-inverse outline-2",
+        },
         {
             isGapped: true,
             size: "xs",
-            class: "outline-white outline-2",
+            class: "outline-border-inverse outline-4",
         },
         {
             isGapped: true,
             size: "sm",
-            class: "outline-white outline-4",
+            class: "outline-border-inverse outline-4",
         },
         {
             isGapped: true,
             size: "md",
-            class: "outline-white outline-4",
+            class: "outline-border-inverse outline-4",
         },
         {
             isGapped: true,
             size: "lg",
-            class: "outline-white outline-4",
+            class: "outline-border-inverse outline-4",
         },
         // 数字がない場合はheightを指定
         {
@@ -95,7 +101,7 @@ const badgeVariants = cva("inline-flex items-center text-white text-center justi
  * // ❌ Wrong - ステータスラベルに Badge を使わない
  * <Badge>未紐付け</Badge>
  * ```
-
+ *
  * **使用例 / Usage Example**
  *
  * ```tsx
@@ -108,7 +114,7 @@ function Badge(_a) {
     var { className, isNumberVisible = true, size, variant = "normal", isGapped = false, children, role = "status" } = _a, props = __rest(_a, ["className", "isNumberVisible", "size", "variant", "isGapped", "children", "role"]);
     // sm以下のサイズの場合は、文字を非表示にする
     // en: Hide text for sizes sm and below
-    if (size === "sm" || size === "xs") {
+    if (size === "sm" || size === "xs" || size === "2xs") {
         isNumberVisible = false;
     }
     // childrenがない場合はisNumberVisibleがfalseの扱いにする

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

@@ -32,39 +32,39 @@ import { Link } from "@/components/ui/link";
  *
  * @param {BreadcrumbProps} props
  */
-export declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 /**
  * パンくずリスト（ol）
  * en: Breadcrumb list (ol)
  *
  * @param {React.ComponentProps<"ol">} props
  */
-export declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
 /**
  * パンくずアイテム（li）
  * en: Breadcrumb item (li)
  *
  * @param {React.ComponentProps<"li">} props
  */
-export declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
 /**
  * パンくずリンク
  * en: Breadcrumb link
  *
  * @param {React.ComponentProps<typeof Link>} props
  */
-export declare function BreadcrumbLink({ className, ...props }: React.ComponentProps<typeof Link>): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbLink({ className, ...props }: React.ComponentProps<typeof Link>): React.JSX.Element;
 /**
  * パンくずの区切り（/など）
  * en: Breadcrumb separator (e.g. /)
  *
  * @param {React.ComponentProps<"span">} props
  */
-export declare function BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 /**
  * 現在ページ表示用
  * en: Current page label (not a link)
  *
  * @param {React.ComponentProps<"span">} props
  */
-export declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

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

@@ -82,7 +82,7 @@ export function BreadcrumbLink(_a) {
  */
 export function BreadcrumbSeparator(_a) {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsx("span", Object.assign({ "aria-hidden": "true", "data-slot": "breadcrumb-separator", className: cn("mx-1 text-neutral-500 select-none", className) }, props, { children: children !== null && children !== void 0 ? children : "/" })));
+    return (_jsx("span", Object.assign({ "aria-hidden": "true", "data-slot": "breadcrumb-separator", className: cn("mx-1 text-text-neutral-low select-none", className) }, props, { children: children !== null && children !== void 0 ? children : "/" })));
 }
 /**
  * 現在ページ表示用
@@ -92,5 +92,5 @@ export function BreadcrumbSeparator(_a) {
  */
 export function BreadcrumbPage(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("span", Object.assign({ "data-slot": "breadcrumb-page", "aria-disabled": "true", "aria-current": "page", className: cn("character-3-regular-pro text-text-high cursor-default", className) }, props)));
+    return (_jsx("span", Object.assign({ "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("character-3-regular-pro text-text-neutral-high cursor-default", className) }, props)));
 }

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

@@ -7,8 +7,15 @@ declare const buttonVariants: (props?: ({
     isLoading?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-type NativeButtonProps = React.ComponentPropsWithoutRef<"button">;
-export interface ButtonProps extends Omit<NativeButtonProps, "onClick" | "onKeyDown"> {
+type NativeButtonProps = React.ComponentProps<"button">;
+export interface ButtonProps extends Omit<NativeButtonProps, "onClick" | "onKeyDown" | "onClickCapture" | "onKeyDownCapture" | "onAuxClickCapture" | "ref"> {
+    /**
+     * ルート要素への ref。`asChild` で `<a>` 等を差し込むケースを受け入れるため
+     * `HTMLButtonElement` ではなく `HTMLElement` で広く受ける
+     * en: Ref to the root element. Typed as `HTMLElement` (not `HTMLButtonElement`)
+     * so `asChild` targets such as `<a>` are accepted.
+     */
+    ref?: React.Ref<HTMLElement>;
     /**
      * ボタンのサイズバリエーション
      * en: Size variation of the button
@@ -61,6 +68,21 @@ export interface ButtonProps extends Omit<NativeButtonProps, "onClick" | "onKeyD
      * We intentionally type this as HTMLElement because `asChild` can render non-button elements.
      */
     onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * capture フェーズのクリックハンドラ。無効時はコンポーネント側のガードが優先される
+     * en: Capture-phase click handler. The component's disabled guard takes precedence.
+     */
+    onClickCapture?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * capture フェーズのキー押下ハンドラ。無効時はコンポーネント側のガードが優先される
+     * en: Capture-phase keydown handler. The component's disabled guard takes precedence.
+     */
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * capture フェーズの中クリックハンドラ。無効時はコンポーネント側のガードが優先される
+     * en: Capture-phase auxclick handler. The component's disabled guard takes precedence.
+     */
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
     /**
      * @deprecated アクセシビリティ観点（WCAG 2.5.2 Pointer Cancellation）により、基本的に使用を避けてください。
      * en: Deprecated for accessibility reasons (WCAG 2.5.2 Pointer Cancellation). Avoid using this in most cases.
@@ -106,6 +128,10 @@ export interface ButtonProps extends Omit<NativeButtonProps, "onClick" | "onKeyD
  *   en: Use `IconButton` for icon-only buttons.
  * - `asChild` 使用時は `prefixIcon` / `suffixIcon` / `isLoading` が反映されません。必要ならスロット先でアイコンやローディング表現を構成してください。
  *   en: In `asChild` mode, `prefixIcon`, `suffixIcon`, and `isLoading` are ignored. Render icons and loading states inside the slotted child when needed.
+ * - `asChild` で差し込んだ要素が指定した props（`type` や `disabled` など）は、Slot のマージで
+ *   コンポーネント側の値より優先されます。
+ *   en: Props set on the slotted element itself (such as `type` or `disabled`) win over the
+ *   component's own values through Slot's prop merging.
  *
  * ```tsx
  * // ✅ Correct
@@ -128,15 +154,54 @@ export interface ButtonProps extends Omit<NativeButtonProps, "onClick" | "onKeyD
  *   <Link href="/items/new">新規作成</Link>
  * </Button>
  * ```
-
+ *
  * **アクセシビリティ / Accessibility**
  *
  * - ボタンにはアクセシブルネームが必要です（通常は `children` のテキスト）。
  *   アイコンのみの場合は `aria-label` / `aria-labelledby` を付与するか、可能なら `IconButton` を使用してください。
  * - `isLoading` の場合でもアクセシブルネームは維持されます。
- * - `asChild` を使う場合、子要素がボタン相当のセマンティクス（role/disabled/キーボード操作）を満たすようにしてください。
+ * - `asChild` を使う場合、子要素がボタン相当のセマンティクス（role/キーボード操作）を満たすようにしてください。
+ * - `asChild` で `<a>` など button 以外の要素を差し込んで無効化した場合、`aria-disabled` の付与、
+ *   click / auxclick / Enter・Space の抑止、`aria-disabled:` プレフィックスによる無効時の配色まで
+ *   このコンポーネントが行います（`data-disabled="true"` も利用側のスタイルフックとして出力）。
+ *   差し込み先が native の `<button>` の場合は `disabled` 属性がそのまま渡ります。
+ * - `type` / `form` / `value` など button 専用の props は、差し込み先が native の `<button>` の
+ *   ときだけ転送されます。それ以外の要素では不正な属性になるため落とし、dev ビルドで警告します。
+ *   差し込み先が内部で `<button>` を描画するコンポーネントの場合のみ、その要素側に直接指定してください
+ *   （Slot のマージで子の指定が優先されます）。`<a>` 等では属性自体が機能しないため指定不要です。
+ *   en: Button-only props such as `type`, `form`, and `value` are forwarded only when the slot is a
+ *   native `<button>`; on other elements they would be invalid attributes, so they are dropped with
+ *   a dev warning. Set them on the slotted element only when that component renders a `<button>`
+ *   internally (child props win in Slot's merge) — on `<a>` and friends the attributes do nothing.
+ * - `aria-disabled` を直接渡した場合も、無効時の配色が当たり操作が抑止されます（native の
+ *   `disabled` 属性は付けないため、フォーカスは残ります）。無効化には基本的に `isDisabled` を
+ *   使ってください。
+ *   en: Passing `aria-disabled` directly also applies the disabled colors and blocks activation
+ *   (the native `disabled` attribute is not set, so the element stays focusable). Prefer
+ *   `isDisabled` for disabling.
+ *   なお `aria-disabled` の要素は既定でフォーカス可能なままです。無効な項目の存在と理由を
+ *   支援技術の利用者に伝えられるため通常はそのままで構いません。タブ順から外す必要がある場合のみ
+ *   差し込む要素側で `tabIndex={-1}` を指定してください。
+ *   en: When disabled with `asChild` and a non-button element such as `<a>`, this component sets
+ *   `aria-disabled`, blocks click / auxclick / Enter / Space, and applies the disabled colors via
+ *   `aria-disabled:`-prefixed utilities (`data-disabled="true"` is also emitted as a styling hook).
+ *   A slotted native `<button>` receives the real `disabled` attribute instead.
+ * - native の `<button>` かどうかは差し込んだ要素そのもので判定するため、内部で `<button>` を
+ *   描画するカスタムコンポーネントを渡した場合は非 button として扱われます。
+ *   また無効時に抑止できるのは click / auxclick / Enter・Space までで、コンテキストメニューの
+ *   「新しいタブで開く」は止められません。確実に遷移させたくない場合は差し込む要素側で
+ *   `href` を外してください。
+ *   en: Whether the slot is a native `<button>` is decided from the slotted element itself, so a
+ *   custom component that renders a `<button>` internally is treated as a non-button. Also, only
+ *   click / auxclick / Enter / Space can be blocked while disabled — "open in new tab" from the
+ *   context menu cannot. Drop `href` on the slotted element when navigation must not happen.
+ *   An `aria-disabled` element stays focusable by design, which is usually what you want; set
+ *   `tabIndex={-1}` on the slotted element only when it must leave the tab order.
  *
  * @param {ButtonProps} props
  */
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+declare function Button({ className, variant, size, theme, isLoading, isDisabled, asChild, disabled, prefixIcon, suffixIcon, ref, children, ...props }: ButtonProps): React.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
 export { Button, buttonVariants };