sparkle-design 0.9.0

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

@@ -0,0 +1,57 @@
+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";
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+/**
+ * **概要 / Overview**
+ *
+ * - アイコンはテキスト情報を視覚表現でユーザーに提示するために使用するコンポーネントです。
+ * - en: The Icon component is used to present textual information to users through visual representation.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `material-symbols-rounded` を `span` に直書きせず、`Icon` を使ってください。
+ *   en: Use `Icon` instead of writing `material-symbols-rounded` directly on a span.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Icon icon="content_copy" size={4} />
+ *
+ * // ❌ Wrong - className を直書きしない
+ * <span className="material-symbols-rounded text-sm">content_copy</span>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Icon icon="check" size={6} fill={true} />
+ * ```
+ *
+ * @param {IconProps} props
+ */
+export const Icon = React.forwardRef((_a, ref) => {
+    var { className, icon, size = 3, fill = false } = _a, props = __rest(_a, ["className", "icon", "size", "fill"]);
+    // 既存のclassNameにicon-X-fill-0の形式が含まれているかチェック
+    const hasIconTypographyClass = className === null || className === void 0 ? void 0 : className.match(/icon-\d+-fill-\d+/);
+    // サイズクラスの生成（既存のサイズクラスがない場合のみ）
+    const fillValue = fill ? 1 : 0;
+    const iconTypographyClass = hasIconTypographyClass
+        ? ""
+        : `icon-${size}-fill-${fillValue}`;
+    return (_jsx("span", Object.assign({ ref: ref, className: cn(iconTypographyClass, "select-none", className), "aria-hidden": "true" }, props, { children: icon })));
+});
+Icon.displayName = "Icon";

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const iconButtonVariants: (props?: ({
+    variant?: "solid" | "outline" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    theme?: "primary" | "neutral" | "negative" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * アイコンボタンのバリエーション
+     * en: Variation of the icon button
+     */
+    variant?: IconButtonVariants["variant"];
+    /**
+     * アイコンボタンのサイズ
+     * en: Size of the icon button
+     */
+    size?: IconButtonVariants["size"];
+    /**
+     * アイコンボタンのテーマ
+     * en: Theme of the icon button
+     */
+    theme?: IconButtonVariants["theme"];
+    /**
+     * ボタンを別コンポーネントの子としてレンダリングするか
+     * en: Whether to render the button as a child component
+     */
+    asChild?: boolean;
+    /**
+     * 表示するアイコン名
+     * en: Icon name to display
+     */
+    icon: string;
+    /**
+     * ローディング状態かどうか
+     * en: Whether the button is in a loading state
+     */
+    isLoading?: boolean;
+    /**
+     * ボタンを無効化するかどうか
+     * en: Whether the button is disabled
+     */
+    isDisabled?: boolean;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - アイコンボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。
+ * - en: The IconButton component is used as a trigger for actions and events such as form submission, dialog expansion, action cancellation, and deletion execution.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <IconButton variant="solid" size="md" theme="primary" icon="edit" />
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - アイコンだけのアクションでは `Button` + `prefixIcon` ではなく `IconButton` を使ってください。
+ *   en: Use `IconButton` for icon-only actions instead of `Button` with `prefixIcon`.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <IconButton icon="content_copy" aria-label="コピー" />
+ *
+ * // ❌ Wrong - Icon-only action を Button で表現しない
+ * <Button prefixIcon="content_copy" aria-label="コピー" />
+ * ```
+ *
+
+ * @param {IconButtonProps} props
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton, iconButtonVariants };

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { IconButton } 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(IconButton, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=25%3A906", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        isLoading: figma.enum("state", {
+            loading: true,
+        }),
+        isDisabled: figma.enum("state", {
+            disabled: true,
+        }),
+        disabled: figma.enum("state", {
+            disabled: true,
+        }),
+        variant: figma.enum("variant", {
+            solid: "solid",
+            outline: "outline",
+            ghost: "ghost",
+        }),
+        size: figma.enum("size", {
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        theme: figma.enum("theme", {
+            primary: "primary",
+            negative: "negative",
+            neutral: "neutral",
+        }),
+        // No matching props could be found for these Figma properties:
+        icon: figma.instance("icon").getProps(),
+        // "isFocused": figma.boolean('isFocused')
+    },
+    example: props => (_jsx(IconButton, { icon: props.icon.icon, isLoading: props.isLoading, isDisabled: props.isDisabled, disabled: props.disabled, variant: props.variant, size: props.size, theme: props.theme })),
+});

package/dist/components/ui/icon-button/index.js

@@ -0,0 +1,341 @@
+/**
+ * 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 } 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 iconButtonVariants = cva([
+    "inline-flex items-center justify-center whitespace-nowrap rounded-action",
+    "ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2",
+    "relative cursor-pointer",
+].join(" "), {
+    variants: {
+        variant: {
+            solid: "border",
+            outline: "border",
+            ghost: "",
+        },
+        size: {
+            xs: "w-6 h-6 p-1",
+            sm: "w-8 h-8 p-1.5",
+            md: "w-10 h-10 p-2",
+            lg: "w-12 h-12 p-2",
+        },
+        theme: {
+            primary: "",
+            neutral: "",
+            negative: "",
+        },
+        isLoading: {
+            true: "cursor-not-allowed",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Solid Primary バリアント
+        {
+            variant: "solid",
+            theme: "primary",
+            isLoading: false,
+            isDisabled: 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",
+            ].join(" "),
+        },
+        {
+            variant: "solid",
+            theme: "primary",
+            isLoading: true,
+            isDisabled: false,
+            className: "bg-primary-500 text-white border-primary-600",
+        },
+        // Solid Neutral バリアント
+        {
+            variant: "solid",
+            theme: "neutral",
+            isLoading: false,
+            isDisabled: 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",
+            ].join(" "),
+        },
+        {
+            variant: "solid",
+            theme: "neutral",
+            isLoading: true,
+            isDisabled: false,
+            className: "bg-[var(--color-black-alpha-600)] text-white border-neutral-600",
+        },
+        // Solid Negative バリアント
+        {
+            variant: "solid",
+            theme: "negative",
+            isLoading: false,
+            isDisabled: 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",
+            ].join(" "),
+        },
+        {
+            variant: "solid",
+            theme: "negative",
+            isLoading: true,
+            isDisabled: false,
+            className: "bg-negative-500 text-white 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",
+            ].join(" "),
+        },
+        {
+            variant: "outline",
+            theme: "primary",
+            isLoading: true,
+            isDisabled: false,
+            className: "bg-white text-primary-500 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)]",
+            ].join(" "),
+        },
+        {
+            variant: "outline",
+            theme: "neutral",
+            isLoading: true,
+            isDisabled: false,
+            className: "bg-white text-neutral-700 border-neutral-300",
+        },
+        // Outline Negative バリアント
+        {
+            variant: "outline",
+            theme: "negative",
+            isLoading: false,
+            isDisabled: 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",
+            ].join(" "),
+        },
+        {
+            variant: "outline",
+            theme: "negative",
+            isLoading: true,
+            isDisabled: false,
+            className: "bg-white text-negative-500 border-negative-300",
+        },
+        // Ghost Primary バリアント
+        {
+            variant: "ghost",
+            theme: "primary",
+            isLoading: false,
+            isDisabled: false,
+            className: "text-primary-500 hover:bg-primary-50 active:bg-primary-100 active:text-primary-600",
+        },
+        {
+            variant: "ghost",
+            theme: "primary",
+            isLoading: true,
+            isDisabled: false,
+            className: "text-primary-500",
+        },
+        // Ghost neutral バリアント
+        {
+            variant: "ghost",
+            theme: "neutral",
+            isLoading: false,
+            isDisabled: false,
+            className: "text-neutral-700 hover:bg-[var(--color-black-alpha-50)] active:bg-[var(--color-black-alpha-100)]",
+        },
+        {
+            variant: "ghost",
+            theme: "neutral",
+            isLoading: true,
+            isDisabled: false,
+            className: "text-neutral-700",
+        },
+        // Ghost Negative バリアント
+        {
+            variant: "ghost",
+            theme: "negative",
+            isLoading: false,
+            isDisabled: false,
+            className: "text-negative-500 hover:bg-negative-50 active:bg-negative-100 active:text-negative-600",
+        },
+        {
+            variant: "ghost",
+            theme: "negative",
+            isLoading: true,
+            isDisabled: false,
+            className: "text-negative-500",
+        },
+        // Disabled styles for all variants
+        {
+            variant: "solid",
+            theme: "primary",
+            isDisabled: true,
+            className: "disabled:bg-primary-200 disabled:text-white disabled:border-none",
+        },
+        {
+            variant: "solid",
+            theme: "neutral",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-black-alpha-200)] disabled:text-white disabled:border-none",
+        },
+        {
+            variant: "solid",
+            theme: "negative",
+            isDisabled: true,
+            className: "disabled:bg-negative-200 disabled:text-white disabled:border-none",
+        },
+        {
+            variant: "outline",
+            theme: "primary",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-white-alpha-700)] disabled:text-primary-200 disabled:border-primary-100",
+        },
+        {
+            variant: "outline",
+            theme: "neutral",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-white-alpha-700)] disabled:text-neutral-200 disabled:border-neutral-100",
+        },
+        {
+            variant: "outline",
+            theme: "negative",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-white-alpha-700)] disabled:text-negative-200 disabled:border-negative-100",
+        },
+        {
+            variant: "ghost",
+            theme: "primary",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-white-alpha-700)] disabled:text-primary-200",
+        },
+        {
+            variant: "ghost",
+            theme: "neutral",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-white-alpha-700)] disabled:text-neutral-200",
+        },
+        {
+            variant: "ghost",
+            theme: "negative",
+            isDisabled: true,
+            className: "disabled:bg-[var(--color-white-alpha-700)] disabled:text-negative-200",
+        },
+    ],
+    defaultVariants: {
+        variant: "solid",
+        size: "md",
+        theme: "primary",
+        isLoading: false,
+        isDisabled: false,
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - アイコンボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。
+ * - en: The IconButton component is used as a trigger for actions and events such as form submission, dialog expansion, action cancellation, and deletion execution.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <IconButton variant="solid" size="md" theme="primary" icon="edit" />
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - アイコンだけのアクションでは `Button` + `prefixIcon` ではなく `IconButton` を使ってください。
+ *   en: Use `IconButton` for icon-only actions instead of `Button` with `prefixIcon`.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <IconButton icon="content_copy" aria-label="コピー" />
+ *
+ * // ❌ Wrong - Icon-only action を Button で表現しない
+ * <Button prefixIcon="content_copy" aria-label="コピー" />
+ * ```
+ *
+
+ * @param {IconButtonProps} props
+ */
+const IconButton = React.forwardRef((_a, ref) => {
+    var { className, variant, size, theme, isLoading = false, isDisabled = false, asChild = false, disabled, icon, children } = _a, props = __rest(_a, ["className", "variant", "size", "theme", "isLoading", "isDisabled", "asChild", "disabled", "icon", "children"]);
+    // disabled状態の管理（isDisabled、disabled、またはisLoadingがtrueの場合）
+    const isIconButtonDisabled = isLoading || isDisabled || disabled;
+    // アイコンのみのボタンには aria-label が必要（WCAG 1.1.1）
+    // en: Icon-only buttons require aria-label (WCAG 1.1.1)
+    if (process.env.NODE_ENV !== "production") {
+        if (!asChild && !props["aria-label"] && !props["aria-labelledby"]) {
+            console.warn("[IconButton] アイコンのみのボタンには aria-label を指定してください（WCAG 1.1.1）。" +
+                " / Icon-only buttons require aria-label (WCAG 1.1.1).");
+        }
+    }
+    const Comp = asChild ? SlotPrimitive.Slot : "button";
+    // アイコンのサイズをボタンサイズに合わせて設定
+    const getIconSize = () => {
+        switch (size) {
+            case "xs":
+                return 3;
+            case "sm":
+                return 5;
+            case "lg":
+                return 7;
+            default:
+                return 6;
+        }
+    };
+    return (_jsx(Comp, Object.assign({ type: "button", className: cn(iconButtonVariants({
+            variant,
+            size,
+            theme,
+            isLoading,
+            isDisabled,
+            className,
+        })), ref: ref, disabled: isIconButtonDisabled }, props, { children: isLoading ? (_jsx(_Fragment, { children: _jsx(Spinner, { size: getIconSize(), className: "text-current" }) })) : (_jsx(Icon, { icon: icon, size: getIconSize() })) })));
+});
+IconButton.displayName = "IconButton";
+export { IconButton, iconButtonVariants };

package/dist/components/ui/inline-message/index.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const inlineMessageVariants: (props?: ({
+    status?: "negative" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InlineMessageVariant = VariantProps<typeof inlineMessageVariants>;
+export interface InlineMessageProps extends React.HTMLAttributes<HTMLDivElement>, InlineMessageVariant {
+    /**
+     * メッセージのステータス
+     * en: Status of the message
+     */
+    status: InlineMessageVariant["status"];
+    /**
+     * 閉じる時のハンドラー
+     * en: Handler when the message is dismissed
+     */
+    onClose?: () => void;
+    /**
+     * 閉じるボタンを表示するかどうか（デフォルト: true）
+     * en: Whether to show close button (default: true)
+     */
+    isCloseTrigger?: boolean;
+    /**
+     * 子要素
+     * en: Child nodes
+     */
+    children?: React.ReactNode;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - インラインメッセージはユーザーにシステムやサービスの状態を伝えるために使用するコンポーネントです。
+ * - en: The InlineMessage component is used to convey system or service status to users.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InlineMessage status="info" onClose={() => console.log('closed')}>
+ *   <InlineMessageTitle>情報</InlineMessageTitle>
+ *   <InlineMessageDescription>
+ *     これは情報メッセージです。
+ *   </InlineMessageDescription>
+ * </InlineMessage>
+ * ```
+ *
+ * @param {InlineMessageProps} props
+ */
+declare const InlineMessage: React.ForwardRefExoticComponent<InlineMessageProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * **概要 / Overview**
+ *
+ * - インラインメッセージのタイトルコンポーネントです。
+ * - en: Title component for inline messages.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InlineMessageTitle>タイトル</InlineMessageTitle>
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLSpanElement>} props
+ */
+declare const InlineMessageTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * **概要 / Overview**
+ *
+ * - インラインメッセージの説明文コンポーネントです。
+ * - en: Description component for inline messages.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InlineMessageDescription>詳細な説明文</InlineMessageDescription>
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLParagraphElement>} props
+ */
+declare const InlineMessageDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { InlineMessage, InlineMessageTitle, InlineMessageDescription };

package/dist/components/ui/inline-message/index.figma.d.ts

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

package/dist/components/ui/inline-message/index.figma.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { InlineMessage, InlineMessageDescription, InlineMessageTitle, } 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(InlineMessage, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1266%3A14202", {
+    props: {
+        title: figma.boolean("isTitle", {
+            true: figma.string("title"),
+            false: undefined,
+        }),
+        description: figma.string("description"),
+        isCloseTrigger: figma.boolean("isCloseTrigger"),
+        status: figma.enum("status", {
+            info: "info",
+            warning: "warning",
+            negative: "negative",
+            success: "success",
+        }),
+    },
+    example: props => (_jsxs(InlineMessage, { isCloseTrigger: props.isCloseTrigger, status: props.status, children: [_jsx(InlineMessageTitle, { children: props.title }), _jsx(InlineMessageDescription, { children: props.description })] })),
+});