sparkle-design 0.9.0

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

@@ -0,0 +1,96 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import { Link } from "../../../components/ui/link/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - パンくずはユーザーが現在のページ階層を理解し、親の階層へ戻るためのナビゲーションとして機能するコンポーネントです。
+ * - en: The Breadcrumb component helps users understand the current page hierarchy and navigate back to parent levels.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Link</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @param {BreadcrumbProps} props
+ */
+export function Breadcrumb(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("nav", Object.assign({ "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn("w-full", className) }, props)));
+}
+/**
+ * パンくずリスト（ol）
+ * en: Breadcrumb list (ol)
+ *
+ * @param {React.ComponentProps<"ol">} props
+ */
+export function BreadcrumbList(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("ol", Object.assign({ "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center break-words gap-1", className) }, props)));
+}
+/**
+ * パンくずアイテム（li）
+ * en: Breadcrumb item (li)
+ *
+ * @param {React.ComponentProps<"li">} props
+ */
+export function BreadcrumbItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("li", Object.assign({ "data-slot": "breadcrumb-item", className: cn("inline-flex items-center p-0.5", className) }, props)));
+}
+/**
+ * パンくずリンク
+ * en: Breadcrumb link
+ *
+ * @param {React.ComponentProps<typeof Link>} props
+ */
+export function BreadcrumbLink(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Link, Object.assign({ "data-slot": "breadcrumb-link", className: cn("character-3-regular-pro", className) }, props)));
+}
+/**
+ * パンくずの区切り（/など）
+ * en: Breadcrumb separator (e.g. /)
+ *
+ * @param {React.ComponentProps<"span">} props
+ */
+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 : "/" })));
+}
+/**
+ * 現在ページ表示用
+ * en: Current page label (not a link)
+ *
+ * @param {React.ComponentProps<"span">} props
+ */
+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)));
+}

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

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "solid" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    theme?: "primary" | "neutral" | "negative" | null | undefined;
+    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"> {
+    /**
+     * ボタンのサイズバリエーション
+     * en: Size variation of the button
+     */
+    size?: ButtonVariantProps["size"];
+    /**
+     * ボタンのスタイルバリエーション
+     * en: Style variation of the button
+     */
+    variant?: ButtonVariantProps["variant"];
+    /**
+     * ボタンのテーマバリエーション
+     * en: Theme variation of the button
+     */
+    theme?: ButtonVariantProps["theme"];
+    /**
+     * ボタンを別コンポーネントの子としてレンダリングするか
+     * en: Whether to render the button as a child component
+     */
+    asChild?: boolean;
+    /**
+     * 左側に表示するアイコン名
+     * en: Icon name displayed on the left side
+     */
+    prefixIcon?: string;
+    /**
+     * 右側に表示するアイコン名
+     * en: Icon name displayed on the right side
+     */
+    suffixIcon?: string;
+    /**
+     * ローディング状態かどうか
+     * en: Indicates if the button is in a loading state
+     */
+    isLoading?: boolean;
+    /**
+     * ボタンを無効化するかどうか
+     * en: Disables the button when set to true
+     */
+    isDisabled?: boolean;
+    /**
+     * onClick handler.
+     *
+     * We intentionally type this as HTMLElement because `asChild` can render non-button elements.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * onKeyDown handler.
+     *
+     * We intentionally type this as HTMLElement because `asChild` can render non-button elements.
+     */
+    onKeyDown?: React.KeyboardEventHandler<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.
+     *
+     * Prefer using `onClick` (activation on release) instead of triggering actions on pointer down.
+     * ref: https://www.w3.org/TR/WCAG21/#pointer-cancellation
+     */
+    onMouseDown?: 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.
+     *
+     * Prefer using `onClick` (activation on release) instead of triggering actions on pointer down.
+     * ref: https://www.w3.org/TR/WCAG21/#pointer-cancellation
+     */
+    onPointerDown?: React.PointerEventHandler<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.
+     *
+     * Prefer using `onClick` (activation on release) instead of triggering actions on pointer down.
+     * ref: https://www.w3.org/TR/WCAG21/#pointer-cancellation
+     */
+    onTouchStart?: React.TouchEventHandler<HTMLElement>;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - ボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。
+ * - en: The Button component is used as a trigger for actions and events such as form submission, dialog expansion, action cancellation, and deletion execution.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Button variant="solid" size="md" theme="primary" prefixIcon="check">確定</Button>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `<Icon>` を children として渡さないでください。`prefixIcon` / `suffixIcon` props を使用してください。
+ *   en: Do not pass `<Icon>` as children. Use `prefixIcon` / `suffixIcon` props instead.
+ * - アイコンのみのボタンには `IconButton` を使用してください。
+ *   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.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Button prefixIcon="check">確定</Button>
+ *
+ * // ❌ Wrong - Icon を children に入れない
+ * <Button><Icon icon="check" /> 確定</Button>
+ *
+ * // ❌ Wrong - children なしの Button + prefixIcon は IconButton に置き換える
+ * <Button prefixIcon="close" aria-label="閉じる" />
+ *
+ * // ❌ Wrong - asChild では prefixIcon は反映されない
+ * <Button asChild prefixIcon="add">
+ *   <Link href="/items/new">新規作成</Link>
+ * </Button>
+ *
+ * // ✅ Correct
+ * <IconButton icon="edit" aria-label="編集" />
+ * <Button asChild>
+ *   <Link href="/items/new">新規作成</Link>
+ * </Button>
+ * ```
+
+ * **アクセシビリティ / Accessibility**
+ *
+ * - ボタンにはアクセシブルネームが必要です（通常は `children` のテキスト）。
+ *   アイコンのみの場合は `aria-label` / `aria-labelledby` を付与するか、可能なら `IconButton` を使用してください。
+ * - `isLoading` の場合でもアクセシブルネームは維持されます。
+ * - `asChild` を使う場合、子要素がボタン相当のセマンティクス（role/disabled/キーボード操作）を満たすようにしてください。
+ *
+ * @param {ButtonProps} props
+ */
+declare function Button({ className, variant, size, theme, isLoading, isDisabled, asChild, disabled, prefixIcon, suffixIcon, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+export { Button, buttonVariants };

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

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

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

@@ -0,0 +1,59 @@
+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/button/index.js

@@ -0,0 +1,375 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../components/ui/icon/index.js";
+import { Spinner } from "../../../components/ui/spinner/index.js";
+const buttonVariants = cva([
+    // `relative` is required because we absolutely-position the loading spinner at the center.
+    "relative inline-flex items-center justify-center gap-0.5 whitespace-nowrap rounded-action transition-colors",
+    "cursor-pointer disabled:cursor-not-allowed",
+    "shrink-0 outline-none",
+    "focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2",
+].join(" "), {
+    variants: {
+        variant: {
+            solid: "border shadow-raise",
+            outline: "border shadow-raise",
+            ghost: "",
+        },
+        size: {
+            sm: "h-8 min-w-16 px-3 py-1 character-2-bold-pro",
+            md: "h-10 min-w-20 px-4 py-1.5 character-3-bold-pro",
+            lg: "h-12 min-w-24 px-5 py-2 character-4-bold-pro",
+        },
+        theme: {
+            primary: "",
+            neutral: "",
+            negative: "",
+        },
+        isLoading: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // solid primary
+        {
+            variant: "solid",
+            theme: "primary",
+            isLoading: false,
+            className: [
+                "bg-primary-500",
+                "text-white",
+                "border-primary-600",
+                "hover:bg-primary-600",
+                "hover:border-primary-700",
+                "active:bg-primary-700",
+                "active:border-primary-800",
+                "disabled:bg-primary-200",
+                "disabled:border-none",
+            ].join(" "),
+        },
+        {
+            variant: "solid",
+            theme: "primary",
+            isLoading: true,
+            className: "disabled:bg-primary-500 disabled:text-white disabled:border-primary-600",
+        },
+        // solid neutral
+        {
+            variant: "solid",
+            theme: "neutral",
+            isLoading: false,
+            className: [
+                "bg-[var(--color-black-alpha-600)]",
+                "text-white",
+                "border-neutral-600",
+                "hover:bg-[var(--color-black-alpha-700)]",
+                "hover:border-neutral-700",
+                "active:bg-[var(--color-black-alpha-800)]",
+                "active:border-neutral-800",
+                "disabled:bg-[var(--color-black-alpha-200)]",
+                "disabled:border-none",
+            ].join(" "),
+        },
+        {
+            variant: "solid",
+            theme: "neutral",
+            isLoading: true,
+            className: "disabled:bg-[var(--color-black-alpha-600)] disabled:text-white disabled:border-neutral-600",
+        },
+        // solid negative
+        {
+            variant: "solid",
+            theme: "negative",
+            isLoading: false,
+            className: [
+                "bg-negative-500",
+                "text-white",
+                "border-negative-600",
+                "hover:bg-negative-600",
+                "hover:border-negative-700",
+                "active:bg-negative-700",
+                "active:border-negative-800",
+                "disabled:bg-negative-200",
+                "disabled:border-none",
+            ].join(" "),
+        },
+        {
+            variant: "solid",
+            theme: "negative",
+            isLoading: true,
+            className: "disabled:bg-negative-500 disabled:text-white disabled:border-negative-600",
+        },
+        // outline primary
+        {
+            variant: "outline",
+            theme: "primary",
+            isLoading: false,
+            className: [
+                "bg-white",
+                "text-primary-500",
+                "border-primary-300",
+                "hover:bg-primary-50",
+                "active:bg-primary-100",
+                "active:border-primary-400",
+                "active:text-primary-600",
+                "disabled:bg-[var(--color-white-alpha-700)]",
+                "disabled:border-primary-100",
+                "disabled:text-primary-200",
+            ].join(" "),
+        },
+        {
+            variant: "outline",
+            theme: "primary",
+            isLoading: true,
+            className: "disabled:white disabled:text-primary-500 disabled:border-primary-300",
+        },
+        // outline neutral
+        {
+            variant: "outline",
+            theme: "neutral",
+            isLoading: false,
+            className: [
+                "bg-white",
+                "text-neutral-700",
+                "border-neutral-300",
+                "hover:bg-[var(--color-black-alpha-50)]",
+                "active:bg-[var(--color-black-alpha-100)]",
+                "active:border-neutral-300",
+                "disabled:bg-[var(--color-white-alpha-700)]",
+                "disabled:border-neutral-100",
+                "disabled:text-neutral-200",
+            ].join(" "),
+        },
+        {
+            variant: "outline",
+            theme: "neutral",
+            isLoading: true,
+            className: "disabled:bg-white disabled:text-neutral-700 disabled:border-neutral-300",
+        },
+        // outline negative
+        {
+            variant: "outline",
+            theme: "negative",
+            isLoading: false,
+            className: [
+                "bg-white",
+                "text-negative-500",
+                "border-negative-300",
+                "hover:bg-negative-50",
+                "active:bg-negative-100",
+                "active:border-negative-400",
+                "active:text-negative-600",
+                "disabled:bg-[var(--color-white-alpha-700)]",
+                "disabled:border-negative-100",
+                "disabled:text-negative-200",
+            ].join(" "),
+        },
+        {
+            variant: "outline",
+            theme: "negative",
+            isLoading: true,
+            className: "disabled:bg-white disabled:text-negative-500 disabled:border-negative-300",
+        },
+        // ghost primary
+        {
+            variant: "ghost",
+            theme: "primary",
+            isLoading: false,
+            className: [
+                "text-primary-500",
+                "hover:bg-primary-50",
+                "active:bg-primary-100",
+                "active:text-primary-600",
+                "disabled:bg-[var(--color-white-alpha-700)]",
+                "disabled:text-primary-200",
+            ].join(" "),
+        },
+        {
+            variant: "ghost",
+            theme: "primary",
+            isLoading: true,
+            className: "disabled:text-primary-500",
+        },
+        // ghost neutral
+        {
+            variant: "ghost",
+            theme: "neutral",
+            isLoading: false,
+            className: [
+                "text-neutral-700",
+                "hover:bg-[var(--color-black-alpha-50)]",
+                "active:bg-[var(--color-black-alpha-100)]",
+                "disabled:bg-[var(--color-white-alpha-700)]",
+                "disabled:text-neutral-200",
+            ].join(" "),
+        },
+        {
+            variant: "ghost",
+            theme: "neutral",
+            isLoading: true,
+            className: "disabled:text-neutral-700",
+        },
+        // ghost negative
+        {
+            variant: "ghost",
+            theme: "negative",
+            isLoading: false,
+            className: [
+                "text-negative-500",
+                "hover:bg-negative-50",
+                "active:bg-negative-100",
+                "active:text-negative-600",
+                "disabled:bg-[var(--color-white-alpha-700)]",
+                "disabled:text-negative-200",
+            ].join(" "),
+        },
+        {
+            variant: "ghost",
+            theme: "negative",
+            isLoading: true,
+            className: "disabled:text-negative-500",
+        },
+    ],
+    defaultVariants: {
+        variant: "solid",
+        size: "md",
+        theme: "primary",
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - ボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。
+ * - en: The Button component is used as a trigger for actions and events such as form submission, dialog expansion, action cancellation, and deletion execution.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Button variant="solid" size="md" theme="primary" prefixIcon="check">確定</Button>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `<Icon>` を children として渡さないでください。`prefixIcon` / `suffixIcon` props を使用してください。
+ *   en: Do not pass `<Icon>` as children. Use `prefixIcon` / `suffixIcon` props instead.
+ * - アイコンのみのボタンには `IconButton` を使用してください。
+ *   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.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Button prefixIcon="check">確定</Button>
+ *
+ * // ❌ Wrong - Icon を children に入れない
+ * <Button><Icon icon="check" /> 確定</Button>
+ *
+ * // ❌ Wrong - children なしの Button + prefixIcon は IconButton に置き換える
+ * <Button prefixIcon="close" aria-label="閉じる" />
+ *
+ * // ❌ Wrong - asChild では prefixIcon は反映されない
+ * <Button asChild prefixIcon="add">
+ *   <Link href="/items/new">新規作成</Link>
+ * </Button>
+ *
+ * // ✅ Correct
+ * <IconButton icon="edit" aria-label="編集" />
+ * <Button asChild>
+ *   <Link href="/items/new">新規作成</Link>
+ * </Button>
+ * ```
+
+ * **アクセシビリティ / Accessibility**
+ *
+ * - ボタンにはアクセシブルネームが必要です（通常は `children` のテキスト）。
+ *   アイコンのみの場合は `aria-label` / `aria-labelledby` を付与するか、可能なら `IconButton` を使用してください。
+ * - `isLoading` の場合でもアクセシブルネームは維持されます。
+ * - `asChild` を使う場合、子要素がボタン相当のセマンティクス（role/disabled/キーボード操作）を満たすようにしてください。
+ *
+ * @param {ButtonProps} props
+ */
+function Button(_a) {
+    var { className, variant, size, theme, isLoading = false, isDisabled = false, asChild = false, disabled, prefixIcon, suffixIcon, children } = _a, props = __rest(_a, ["className", "variant", "size", "theme", "isLoading", "isDisabled", "asChild", "disabled", "prefixIcon", "suffixIcon", "children"]);
+    const Comp = asChild ? SlotPrimitive.Slot : "button";
+    // disabled状態の管理（isDisabled、disabled、またはisLoadingがtrueの場合）
+    const isButtonDisabled = isLoading || isDisabled || disabled;
+    // アイコンのサイズをボタンサイズに合わせて設定
+    const getIconSize = () => {
+        switch (size) {
+            case "sm":
+                return 4;
+            case "lg":
+                return 6;
+            default:
+                return 5;
+        }
+    };
+    const hasAccessibleNameProp = ("aria-label" in props && Boolean(props["aria-label"])) ||
+        ("aria-labelledby" in props && Boolean(props["aria-labelledby"]));
+    const hasChildren = React.Children.count(children) > 0;
+    if (process.env.NODE_ENV !== "production") {
+        if (!hasChildren && !hasAccessibleNameProp) {
+            // Icon-only button should use IconButton, or provide aria-label/labelledby.
+            // Keep it as a warning (not an exception) to avoid breaking existing usage.
+            console.warn("[Button] Accessible name is missing. Provide children text, or set aria-label/aria-labelledby. For icon-only actions, consider using IconButton.");
+        }
+        if (asChild && isButtonDisabled) {
+            console.warn("[Button] asChild + disabled/loading: the child element must handle disabled semantics (e.g., aria-disabled + preventing activation). Ensure the slotted element is button-like.");
+        }
+        if (asChild && (prefixIcon || suffixIcon || isLoading)) {
+            console.warn("[Button] asChild mode does not support prefixIcon, suffixIcon, or isLoading. These props will be ignored.");
+        }
+        if (props.onMouseDown || props.onPointerDown || props.onTouchStart) {
+            console.warn("[Button] onMouseDown/onPointerDown/onTouchStart are deprecated for accessibility reasons (WCAG 2.5.2 Pointer Cancellation). Prefer onClick (activation on release).");
+        }
+    }
+    const { onClick, onKeyDown } = props, restProps = __rest(props, ["onClick", "onKeyDown"]);
+    const handleClick = event => {
+        if (isButtonDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handleKeyDown = event => {
+        if (isButtonDisabled) {
+            // Prevent activation keys when used with asChild (e.g., <a>).
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            return;
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    return (_jsx(Comp, Object.assign({ "data-slot": "button", "aria-busy": isLoading || undefined, "aria-disabled": asChild && isButtonDisabled ? true : undefined, "data-disabled": asChild && isButtonDisabled ? "true" : undefined, disabled: asChild ? undefined : isButtonDisabled, className: cn(buttonVariants({
+            variant,
+            size,
+            theme,
+            isLoading,
+            className,
+        })), type: asChild ? undefined : props.type || "button", onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: asChild ? (children) : (_jsxs(_Fragment, { children: [prefixIcon && (_jsx(Icon, { icon: prefixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) })), isLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex", children: _jsx(Spinner, { size: getIconSize(), className: "text-current" }) }), _jsx("span", { className: "opacity-0", children: children })] })) : (_jsx("span", { className: "px-1", children: children })), suffixIcon && (_jsx(Icon, { icon: suffixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) }))] })) })));
+}
+Button.displayName = "Button";
+export { Button, buttonVariants };