sparkle-design 0.9.0

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

@@ -0,0 +1,193 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+export interface ClickableCardProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * クリック時の処理
+     * en: Click handler function
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * ボタンを無効化するかどうか
+     * en: Whether the button is disabled
+     */
+    isDisabled?: boolean;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - カードはコンテンツをグルーピングして表示するために使用するコンポーネントです。
+ * - en: The Card component is used to group and display content.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <ClickableCard onClick={() => console.log('Clicked')}>
+ *   クリック可能なカードです
+ * </ClickableCard>
+ * ```
+ *
+ * @param {ClickableCardProps} props
+ */
+declare const ClickableCard: React.ForwardRefExoticComponent<ClickableCardProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * **概要 / Overview**
+ *
+ * - カードはコンテンツをグルーピングして表示するために使用するコンポーネントです。
+ * - en: The Card component is used to group and display content.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>
+ *       タイトル
+ *       <CardDescription className="character-3-regular-pro text-text-low">
+ *         全 12 件
+ *       </CardDescription>
+ *     </CardTitle>
+ *   </CardHeader>
+ *   <CardContent>
+ *     コンテンツの内容
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * **アンチパターン / Anti-patterns**
+ *
+ * - CardHeader 内で手動の flex レイアウト（`<div className="flex justify-between">`）を使わないでください。CardHeader は内部で flex レイアウトを適用済みです。アクションボタンは `CardControl` で囲んでください。
+ *   en: Do not use manual flex layout inside CardHeader. CardHeader already applies flex layout internally. Wrap action buttons with `CardControl`.
+ * - CardTitle の補足情報や件数は、`span` などを直書きせず `CardDescription` を使ってください。
+ *   en: For supporting text or counts inside CardTitle, do not inline a `span`; use `CardDescription`.
+ * - `CardDescription` はタイトルの補足テキスト用です。長い説明文は `CardContent` に配置してください。
+ *   en: Use `CardDescription` for short supporting text in CardTitle. Put long descriptive copy inside `CardContent`.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <CardHeader>
+ *   <CardTitle>
+ *     タイトル
+ *     <CardDescription className="character-3-regular-pro text-text-low">
+ *       全 12 件
+ *     </CardDescription>
+ *   </CardTitle>
+ *   <CardControl>
+ *     <Button theme="neutral" variant="outline">キャンセル</Button>
+ *     <Button>保存</Button>
+ *   </CardControl>
+ * </CardHeader>
+ *
+ * // ❌ Wrong - 手動 flex を使わない
+ * <CardHeader>
+ *   <div className="flex justify-between">
+ *     <CardTitle>タイトル</CardTitle>
+ *     <Button theme="neutral" variant="outline">キャンセル</Button>
+ *     <Button>保存</Button>
+ *   </div>
+ * </CardHeader>
+ *
+ * // ❌ Wrong - CardTitle 内に補足を入れない
+ * <CardHeader>
+ *   <CardTitle>
+ *     タイトル
+ *     <span className="text-sm text-neutral-500">全 12 件</span>
+ *   </CardTitle>
+ * </CardHeader>
+ * ```
+
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * **概要 / Overview**
+ *
+ * - カードタイトル内の補足情報や件数表示に使用するコンポーネントです。
+ * - en: The CardDescription component is used for supporting text or counts inside CardTitle.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <CardTitle>
+ *   タイトル
+ *   <CardDescription className="character-3-regular-pro text-text-low">
+ *     全 12 件
+ *   </CardDescription>
+ * </CardTitle>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `CardDescription` は CardTitle 内の短い補足テキスト用です。長い説明文は `CardContent` に配置してください。
+ *   en: `CardDescription` is for short supporting text inside CardTitle. Put long descriptive copy inside `CardContent`.
+ * - Typography や text color は用途に応じて className で明示してください。
+ *   en: Specify typography and text color explicitly with className based on the use case.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <CardTitle>
+ *   プロジェクト一覧
+ *   <CardDescription className="character-3-regular-pro text-text-low">
+ *     全 12 件
+ *   </CardDescription>
+ * </CardTitle>
+ *
+ * // ❌ Wrong - 長い説明文を CardTitle 内に入れない
+ * <CardTitle>
+ *   プロジェクト一覧
+ *   <CardDescription>
+ *     このカードはダッシュボードで重要な進捗と担当者の状態を表示します。
+ *   </CardDescription>
+ * </CardTitle>
+ * ```
+
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * **概要 / Overview**
+ *
+ * - CardHeader 右側のアクションをまとめるコンポーネントです。
+ * - en: CardControl groups right-side actions inside CardHeader.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <CardControl>
+ *   <Button theme="neutral" variant="outline">キャンセル</Button>
+ *   <Button>保存</Button>
+ * </CardControl>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - CardHeader の右側アクションは `CardControl` に集約してください。複数ボタンでも追加の layout class は不要です。
+ *   en: Place right-side actions in `CardControl`. No extra layout classes are needed even with multiple buttons.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <CardControl>
+ *   <Button theme="neutral" variant="outline">キャンセル</Button>
+ *   <Button>保存</Button>
+ * </CardControl>
+ * ```
+
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+declare const CardControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * スペースを入れるかどうか
+     * en: Whether to add spacing
+     */
+    isSpace?: boolean;
+}
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { ClickableCard, Card, CardHeader, CardFooter, CardTitle, CardControl, CardDescription, CardContent, };

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

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

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

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

@@ -0,0 +1,219 @@
+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 Card component is used to group and display content.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <ClickableCard onClick={() => console.log('Clicked')}>
+ *   クリック可能なカードです
+ * </ClickableCard>
+ * ```
+ *
+ * @param {ClickableCardProps} props
+ */
+const ClickableCard = React.forwardRef((_a, ref) => {
+    var { className, isDisabled, onClick } = _a, props = __rest(_a, ["className", "isDisabled", "onClick"]);
+    return (_jsx("button", Object.assign({ ref: ref, className: cn("rounded-action border border-divider-middle bg-white shadow-raise text-text-middle py-4 cursor-pointer hover:bg-neutral-50", "transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2", "active:bg-neutral-50 active:shadow-float active:border-primary-400", "disabled:cursor-not-allowed disabled:bg-white disabled:border-secondary-100 disabled:text-secondary-200 disabled:shadow-flat", className), onClick: onClick, disabled: isDisabled, type: "button" }, props)));
+});
+ClickableCard.displayName = "ClickableCard";
+/**
+ * **概要 / Overview**
+ *
+ * - カードはコンテンツをグルーピングして表示するために使用するコンポーネントです。
+ * - en: The Card component is used to group and display content.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>
+ *       タイトル
+ *       <CardDescription className="character-3-regular-pro text-text-low">
+ *         全 12 件
+ *       </CardDescription>
+ *     </CardTitle>
+ *   </CardHeader>
+ *   <CardContent>
+ *     コンテンツの内容
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+const Card = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("rounded-minimum border border-divider-middle bg-white text-text-middle py-4", className) }, props)));
+});
+Card.displayName = "Card";
+/**
+ * **アンチパターン / Anti-patterns**
+ *
+ * - CardHeader 内で手動の flex レイアウト（`<div className="flex justify-between">`）を使わないでください。CardHeader は内部で flex レイアウトを適用済みです。アクションボタンは `CardControl` で囲んでください。
+ *   en: Do not use manual flex layout inside CardHeader. CardHeader already applies flex layout internally. Wrap action buttons with `CardControl`.
+ * - CardTitle の補足情報や件数は、`span` などを直書きせず `CardDescription` を使ってください。
+ *   en: For supporting text or counts inside CardTitle, do not inline a `span`; use `CardDescription`.
+ * - `CardDescription` はタイトルの補足テキスト用です。長い説明文は `CardContent` に配置してください。
+ *   en: Use `CardDescription` for short supporting text in CardTitle. Put long descriptive copy inside `CardContent`.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <CardHeader>
+ *   <CardTitle>
+ *     タイトル
+ *     <CardDescription className="character-3-regular-pro text-text-low">
+ *       全 12 件
+ *     </CardDescription>
+ *   </CardTitle>
+ *   <CardControl>
+ *     <Button theme="neutral" variant="outline">キャンセル</Button>
+ *     <Button>保存</Button>
+ *   </CardControl>
+ * </CardHeader>
+ *
+ * // ❌ Wrong - 手動 flex を使わない
+ * <CardHeader>
+ *   <div className="flex justify-between">
+ *     <CardTitle>タイトル</CardTitle>
+ *     <Button theme="neutral" variant="outline">キャンセル</Button>
+ *     <Button>保存</Button>
+ *   </div>
+ * </CardHeader>
+ *
+ * // ❌ Wrong - CardTitle 内に補足を入れない
+ * <CardHeader>
+ *   <CardTitle>
+ *     タイトル
+ *     <span className="text-sm text-neutral-500">全 12 件</span>
+ *   </CardTitle>
+ * </CardHeader>
+ * ```
+
+ */
+const CardHeader = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("flex flex-row gap-2 justify-between px-6 py-2 items-center", className) }, props)));
+});
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("character-4-bold-pro flex items-center gap-2", className) }, props)));
+});
+CardTitle.displayName = "CardTitle";
+/**
+ * **概要 / Overview**
+ *
+ * - カードタイトル内の補足情報や件数表示に使用するコンポーネントです。
+ * - en: The CardDescription component is used for supporting text or counts inside CardTitle.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <CardTitle>
+ *   タイトル
+ *   <CardDescription className="character-3-regular-pro text-text-low">
+ *     全 12 件
+ *   </CardDescription>
+ * </CardTitle>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `CardDescription` は CardTitle 内の短い補足テキスト用です。長い説明文は `CardContent` に配置してください。
+ *   en: `CardDescription` is for short supporting text inside CardTitle. Put long descriptive copy inside `CardContent`.
+ * - Typography や text color は用途に応じて className で明示してください。
+ *   en: Specify typography and text color explicitly with className based on the use case.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <CardTitle>
+ *   プロジェクト一覧
+ *   <CardDescription className="character-3-regular-pro text-text-low">
+ *     全 12 件
+ *   </CardDescription>
+ * </CardTitle>
+ *
+ * // ❌ Wrong - 長い説明文を CardTitle 内に入れない
+ * <CardTitle>
+ *   プロジェクト一覧
+ *   <CardDescription>
+ *     このカードはダッシュボードで重要な進捗と担当者の状態を表示します。
+ *   </CardDescription>
+ * </CardTitle>
+ * ```
+
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+const CardDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("", className) }, props)));
+});
+CardDescription.displayName = "CardDescription";
+/**
+ * **概要 / Overview**
+ *
+ * - CardHeader 右側のアクションをまとめるコンポーネントです。
+ * - en: CardControl groups right-side actions inside CardHeader.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <CardControl>
+ *   <Button theme="neutral" variant="outline">キャンセル</Button>
+ *   <Button>保存</Button>
+ * </CardControl>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - CardHeader の右側アクションは `CardControl` に集約してください。複数ボタンでも追加の layout class は不要です。
+ *   en: Place right-side actions in `CardControl`. No extra layout classes are needed even with multiple buttons.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <CardControl>
+ *   <Button theme="neutral" variant="outline">キャンセル</Button>
+ *   <Button>保存</Button>
+ * </CardControl>
+ * ```
+
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+const CardControl = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("flex items-center gap-2", className) }, props)));
+});
+CardControl.displayName = "CardControl";
+const CardContent = React.forwardRef((_a, ref) => {
+    var { className, isSpace = true } = _a, props = __rest(_a, ["className", "isSpace"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn(isSpace ? "px-6 py-2" : "", className) }, props)));
+});
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn("flex items-center justify-end px-6 py-2", className) }, props)));
+});
+CardFooter.displayName = "CardFooter";
+export { ClickableCard, Card, CardHeader, CardFooter, CardTitle, CardControl, CardDescription, CardContent, };

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+declare const checkboxRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CheckboxPrimitiveProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
+type CheckboxVariants = VariantProps<typeof checkboxRootVariants>;
+interface CheckboxItemProps extends CheckboxPrimitiveProps {
+    /**
+     * チェックボックスのサイズ
+     * en: Size of the checkbox
+     * @default "md"
+     */
+    size?: CheckboxVariants["size"];
+    /**
+     * エラー状態かどうか
+     * en: Whether the checkbox is in an error state
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * 無効状態かどうか
+     * en: Whether the checkbox is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * ラベルのテキスト
+     * en: Label text for the checkbox
+     */
+    label?: string;
+    /**
+     * 不確定状態かどうか
+     * en: Whether the checkbox is in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * チェック状態
+     * en: Checked state of the checkbox
+     */
+    checked?: CheckboxPrimitiveProps["checked"];
+}
+/**
+ * **概要 / Overview**
+ *
+ * - チェックボックスは複数のオプショングループから複数の項目を選択する形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Checkbox component is used to capture user input by selecting multiple items from multiple option groups.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Checkbox size="md" label="利用規約に同意する" />
+ * ```
+ *
+ * @param {CheckboxItemProps} props
+ */
+declare function Checkbox({ className, size, isInvalid, isDisabled, disabled, label, id, checked: controlledChecked, defaultChecked, indeterminate, onCheckedChange, ...props }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+export type { CheckboxItemProps };

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

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

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

@@ -0,0 +1,34 @@
+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 })),
+});