sparkle-design 1.0.7 → 2.0.0-beta.0

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

@@ -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,11 +12,11 @@ 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 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: "",
@@ -38,22 +38,22 @@ const badgeVariants = cva("inline-flex items-center text-white text-center justi
         {
             isGapped: true,
             size: "xs",
-            class: "outline-white outline-2",
+            class: "outline-border-inverse outline-2",
         },
         {
             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 +95,7 @@ const badgeVariants = cva("inline-flex items-center text-white text-center justi
  * // ❌ Wrong - ステータスラベルに Badge を使わない
  * <Badge>未紐付け</Badge>
  * ```
-
+ *
  * **使用例 / Usage Example**
  *
  * ```tsx

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 };