sparkle-design 0.9.0

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

@@ -0,0 +1,192 @@
+/**
+ * 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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../components/ui/icon/index.js";
+const checkboxItemVariants = cva([
+    "relative rounded-sm transition-colors flex items-center justify-center cursor-pointer",
+    "focus:outline-none",
+].join(" "), {
+    variants: {
+        size: {
+            sm: "h-8 w-8",
+            md: "h-10 w-10",
+            lg: "h-12 w-12",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        isDisabled: false,
+    },
+});
+const checkboxRootVariants = cva([
+    "rounded-xs border-2 transition-colors",
+    "[.group:focus_&]:outline-hidden [.group:focus-visible_&]:ring-2 [.group:focus-visible_&]:ring-[var(--color-ring-normal)] [.group:focus-visible_&]:ring-offset-2",
+].join(" "), {
+    variants: {
+        size: {
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6",
+        },
+        isInvalid: {
+            true: [
+                "border-negative-500",
+                "[.group[data-state=checked]_&]:bg-negative-500 [.group[data-state=checked]_&]:border-none",
+                "[.group[data-state=indeterminate]_&]:bg-negative-500 [.group[data-state=indeterminate]_&]:border-none",
+            ].join(" "),
+            false: [
+                "border-neutral-500",
+                "[.group[data-state=checked]_&]:bg-primary-500 [.group[data-state=checked]_&]:border-none",
+                "[.group[data-state=indeterminate]_&]:bg-primary-500 [.group[data-state=indeterminate]_&]:border-none",
+            ].join(" "),
+        },
+        isDisabled: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            isDisabled: false,
+            isInvalid: false,
+            className: [
+                "hover:border-neutral-600",
+                "[.group[data-state=checked]_&]:hover:bg-primary-600",
+                "[.group[data-state=indeterminate]_&]:hover:bg-primary-600",
+            ].join(" "),
+        },
+        {
+            isDisabled: false,
+            isInvalid: true,
+            className: [
+                "hover:border-negative-600",
+                "[.group[data-state=checked]_&]:hover:bg-negative-600",
+                "[.group[data-state=indeterminate]_&]:hover:bg-negative-600",
+            ].join(" "),
+        },
+        {
+            isDisabled: true,
+            isInvalid: false,
+            className: [
+                "border-neutral-200",
+                "[.group[data-state=checked]_&]:bg-primary-200 [.group[data-state=checked]_&]:border-primary-200",
+                "[.group[data-state=indeterminate]_&]:bg-primary-200 [.group[data-state=indeterminate]_&]:border-primary-200",
+            ].join(" "),
+        },
+        {
+            isDisabled: true,
+            isInvalid: true,
+            className: [
+                "border-negative-200",
+                "[.group[data-state=checked]_&]:bg-negative-200 [.group[data-state=checked]_&]:border-negative-200",
+                "[.group[data-state=indeterminate]_&]:bg-negative-200 [.group[data-state=indeterminate]_&]:border-negative-200",
+            ].join(" "),
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        isInvalid: false,
+        isDisabled: false,
+    },
+});
+const checkboxLabelVariants = cva("cursor-pointer", {
+    variants: {
+        size: {
+            sm: "character-2-regular-pro",
+            md: "character-3-regular-pro",
+            lg: "character-4-regular-pro",
+        },
+        isDisabled: {
+            true: "text-text-disabled cursor-not-allowed",
+            false: "text-text-middle",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        isDisabled: false,
+    },
+});
+/**
+ * **概要 / 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
+ */
+function Checkbox(_a) {
+    var { className, size = "md", isInvalid = false, isDisabled = false, disabled, label, id, checked: controlledChecked, defaultChecked, indeterminate = false, onCheckedChange } = _a, props = __rest(_a, ["className", "size", "isInvalid", "isDisabled", "disabled", "label", "id", "checked", "defaultChecked", "indeterminate", "onCheckedChange"]);
+    // 内部状態の初期値を決定
+    const initialChecked = React.useMemo(() => {
+        if (controlledChecked !== undefined)
+            return controlledChecked;
+        if (indeterminate)
+            return "indeterminate";
+        return defaultChecked || false;
+    }, [controlledChecked, indeterminate, defaultChecked]);
+    const [internalChecked, setInternalChecked] = React.useState(initialChecked);
+    // 制御されているかどうかを判定
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : internalChecked;
+    // indeterminateプロパティが変更された場合の処理
+    React.useEffect(() => {
+        if (!isControlled && indeterminate) {
+            setInternalChecked("indeterminate");
+        }
+    }, [indeterminate, isControlled]);
+    const handleChange = React.useCallback((newChecked) => {
+        if (!isControlled) {
+            setInternalChecked(newChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newChecked);
+    }, [isControlled, onCheckedChange]);
+    // isDisabledとdisabledの組み合わせで無効状態を管理
+    const isCheckboxDisabled = isDisabled || disabled;
+    return (_jsxs("div", { className: "flex items-center", children: [_jsx(CheckboxPrimitive.Root, Object.assign({ "data-slot": "checkbox", id: id, "aria-invalid": isInvalid || undefined, className: cn(checkboxItemVariants({ size, isDisabled: isCheckboxDisabled }), "group", className), disabled: isCheckboxDisabled, checked: checked, onCheckedChange: handleChange }, props, { children: _jsx("div", { className: cn(checkboxRootVariants({
+                        size,
+                        isInvalid,
+                        isDisabled: isCheckboxDisabled,
+                    })), children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-white", children: _jsx(Icon, { icon: checked === "indeterminate"
+                                ? "check_indeterminate_small"
+                                : "check", size: (function () {
+                                switch (size) {
+                                    case "sm":
+                                        return 3;
+                                    case "md":
+                                        return 5;
+                                    case "lg":
+                                        return 6;
+                                    default:
+                                        return 5;
+                                }
+                            })() }) }) }) })), label && (_jsx("label", { htmlFor: id, className: cn(checkboxLabelVariants({ size, isDisabled: isCheckboxDisabled })), children: label }))] }));
+}
+export { Checkbox };

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

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { AlertDialog as DialogPrimitive } from "radix-ui";
+import { ButtonProps } from "@/components/ui/button";
+import { IconProps } from "../icon";
+/**
+ * **概要 / Overview**
+ *
+ * - ダイアログはユーザーにアクションの実行や中断を確認するために使用するコンポーネントです。
+ * - en: The Dialog component is used to confirm the execution or interruption of actions with users.
+ * - フォーム入力や詳細表示には使わず、削除確認や再試行確認などのアクション確認に使います。
+ * - en: Do not use Dialog for forms or detail views. Use it for action confirmations such as delete and retry flows.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger>ダイアログを開く</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>確認</DialogTitle>
+ *       <DialogDescription>本当に削除しますか？</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogCancel>キャンセル</DialogCancel>
+ *       <DialogAction>削除</DialogAction>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - フォーム入力や詳細表示には使わず、削除確認や再試行確認などのアクション確認に使ってください。
+ *   en: Do not use Dialog for forms or detail views. Use it for action confirmations such as delete and retry flows.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Dialog>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>削除確認</DialogTitle>
+ *       <DialogDescription>本当に削除しますか？</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogCancel>キャンセル</DialogCancel>
+ *       <DialogAction>削除</DialogAction>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ * // ❌ Wrong - フォーム入力に Dialog を使わない
+ * <Dialog>
+ *   <DialogContent>
+ *     <Input />
+ *     <Select />
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+
+ * @param {React.ComponentProps<typeof DialogPrimitive.Root>} props
+ */
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogIcon({ className, icon, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `DialogCancel` の children に `<Button>` を渡さないでください。内部で Button を描画します。
+ *   en: Do not pass `<Button>` as children. DialogCancel renders a Button internally.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <DialogCancel>キャンセル</DialogCancel>
+ *
+ * // ❌ Wrong - 二重ラップ
+ * <DialogCancel><Button>キャンセル</Button></DialogCancel>
+ * ```
+
+ */
+declare function DialogCancel({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `DialogAction` の children に `<Button>` を渡さないでください。内部で Button を描画します。
+ *   en: Do not pass `<Button>` as children. DialogAction renders a Button internally.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <DialogAction>確定</DialogAction>
+ *
+ * // ❌ Wrong - 二重ラップ
+ * <DialogAction><Button>確定</Button></DialogAction>
+ * ```
+
+ */
+declare function DialogAction({ className, children, theme, variant, ...props }: React.ComponentProps<typeof DialogPrimitive.Action> & ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogIcon, DialogTitle, DialogTrigger, DialogCancel, DialogAction, };

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogCancel, DialogAction, } 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(Dialog, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=14857-825", {
+    props: {
+        variant: figma.enum("status", {
+            neutral: "neutral",
+            warning: "warning",
+            negative: "negative",
+        }),
+        title: figma.string("title"),
+        description: figma.string("description"),
+    },
+    example: props => (_jsx(Dialog, { children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: props.title }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogFooter, { children: [_jsx(DialogCancel, { children: "\u30AD\u30E3\u30F3\u30BB\u30EB" }), _jsx(DialogAction, { children: "\u4FDD\u5B58" })] })] }) })),
+});

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

@@ -0,0 +1,157 @@
+/**
+ * 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../../components/ui/button/index.js";
+import { Icon } from "../icon/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - ダイアログはユーザーにアクションの実行や中断を確認するために使用するコンポーネントです。
+ * - en: The Dialog component is used to confirm the execution or interruption of actions with users.
+ * - フォーム入力や詳細表示には使わず、削除確認や再試行確認などのアクション確認に使います。
+ * - en: Do not use Dialog for forms or detail views. Use it for action confirmations such as delete and retry flows.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger>ダイアログを開く</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>確認</DialogTitle>
+ *       <DialogDescription>本当に削除しますか？</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogCancel>キャンセル</DialogCancel>
+ *       <DialogAction>削除</DialogAction>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - フォーム入力や詳細表示には使わず、削除確認や再試行確認などのアクション確認に使ってください。
+ *   en: Do not use Dialog for forms or detail views. Use it for action confirmations such as delete and retry flows.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Dialog>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>削除確認</DialogTitle>
+ *       <DialogDescription>本当に削除しますか？</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogCancel>キャンセル</DialogCancel>
+ *       <DialogAction>削除</DialogAction>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ * // ❌ Wrong - フォーム入力に Dialog を使わない
+ * <Dialog>
+ *   <DialogContent>
+ *     <Input />
+ *     <Select />
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+
+ * @param {React.ComponentProps<typeof DialogPrimitive.Root>} props
+ */
+function Dialog(_a) {
+    var props = __rest(_a, []);
+    return _jsx(DialogPrimitive.Root, Object.assign({ "data-slot": "dialog" }, props));
+}
+function DialogTrigger(_a) {
+    var props = __rest(_a, []);
+    return _jsx(DialogPrimitive.Trigger, Object.assign({ "data-slot": "dialog-trigger" }, props));
+}
+function DialogPortal(_a) {
+    var props = __rest(_a, []);
+    return _jsx(DialogPrimitive.Portal, Object.assign({ "data-slot": "dialog-portal" }, props));
+}
+function DialogOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({ "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className) }, props)));
+}
+function DialogContent(_a) {
+    var { className, children, showCloseButton = true } = _a, props = __rest(_a, ["className", "children", "showCloseButton"]);
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Content, Object.assign({ "data-slot": "dialog-content", className: cn("bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-popout duration-200 sm:max-w-lg", className) }, props, { children: children }))] }));
+}
+function DialogHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "dialog-header", className: cn("flex flex-col gap-3 text-center sm:text-left", className) }, props)));
+}
+function DialogFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
+}
+function DialogIcon(_a) {
+    var { className, icon } = _a, props = __rest(_a, ["className", "icon"]);
+    return _jsx(Icon, Object.assign({ icon: icon, className: className, size: 7 }, props));
+}
+function DialogTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Title, Object.assign({ "data-slot": "dialog-title", className: cn("text-text-high leading-none character-4-bold-pro flex gap-2 items-center justify-start", className) }, props)));
+}
+function DialogDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Description, Object.assign({ "data-slot": "dialog-description", className: cn("text-text-high character-2-regular-pro", className) }, props)));
+}
+/**
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `DialogCancel` の children に `<Button>` を渡さないでください。内部で Button を描画します。
+ *   en: Do not pass `<Button>` as children. DialogCancel renders a Button internally.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <DialogCancel>キャンセル</DialogCancel>
+ *
+ * // ❌ Wrong - 二重ラップ
+ * <DialogCancel><Button>キャンセル</Button></DialogCancel>
+ * ```
+
+ */
+function DialogCancel(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsx(DialogPrimitive.Cancel, Object.assign({ "data-slot": "dialog-cancel", asChild: true }, props, { children: _jsx(Button, { variant: "ghost", theme: "neutral", size: "sm", className: className, children: children }) })));
+}
+/**
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `DialogAction` の children に `<Button>` を渡さないでください。内部で Button を描画します。
+ *   en: Do not pass `<Button>` as children. DialogAction renders a Button internally.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <DialogAction>確定</DialogAction>
+ *
+ * // ❌ Wrong - 二重ラップ
+ * <DialogAction><Button>確定</Button></DialogAction>
+ * ```
+
+ */
+function DialogAction(_a) {
+    var { className, children, theme = "primary", variant = "solid" } = _a, props = __rest(_a, ["className", "children", "theme", "variant"]);
+    return (_jsx(DialogPrimitive.Action, Object.assign({ "data-slot": "dialog-action", asChild: true }, props, { children: _jsx(Button, { variant: variant, theme: theme, size: "sm", className: className, children: children }) })));
+}
+export { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogIcon, DialogTitle, DialogTrigger, DialogCancel, DialogAction, };

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const dividerVariants: (props?: ({
+    emphasis?: "low" | "middle" | "high" | null | undefined;
+    lineStyle?: "solid" | "dashed" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dividerVariants> {
+    /**
+     * ディバイダーの強調度（low、middle、high）
+     * en: Emphasis level of the divider (low, middle, high)
+     */
+    emphasis?: "low" | "middle" | "high";
+    /**
+     * 線のスタイル（solid、dashed）
+     * en: Line style (solid, dashed)
+     */
+    lineStyle?: "solid" | "dashed";
+    /**
+     * ディバイダーの方向（horizontal、vertical）
+     * en: Direction of the divider (horizontal, vertical)
+     */
+    direction?: "horizontal" | "vertical";
+}
+/**
+ * **概要 / Overview**
+ *
+ * - ディバイダーコンポーネントはグループ内のコンテンツを視覚的に区切ってユーザーに提示する際に使用します。
+ * - en: The Divider component is used to visually separate content within groups for users.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Divider emphasis="middle" lineStyle="solid" direction="horizontal" />
+ * ```
+ *
+ * @param {DividerProps} props
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+export { Divider, dividerVariants };

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

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

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Divider } 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(Divider, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=817-5328&t=lCPcHH1Zd0uroqLb-4", {
+    props: {
+        /**
+         * ディバイダーの強調度
+         * en: Emphasis level of the divider
+         */
+        emphasis: figma.enum("emphasis", {
+            low: "low",
+            middle: "middle",
+            high: "high",
+        }),
+        /**
+         * 線のスタイル
+         * en: Line style
+         */
+        lineStyle: figma.enum("style", {
+            solid: "solid",
+            dashed: "dashed",
+        }),
+        /**
+         * ディバイダーの方向
+         * en: Direction of the divider
+         */
+        direction: figma.enum("direction", {
+            horizontal: "horizontal",
+            vertical: "vertical",
+        }),
+    },
+    example: props => (_jsx(Divider, { emphasis: props.emphasis, lineStyle: props.lineStyle, direction: props.direction })),
+});

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

@@ -0,0 +1,81 @@
+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 { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+// Dividerのスタイル定義
+const dividerVariants = cva("shrink-0", {
+    variants: {
+        emphasis: {
+            low: "border-base-100 bg-base-100",
+            middle: "border-base-200 bg-base-200",
+            high: "border-base-300 bg-base-300",
+        },
+        lineStyle: {
+            solid: "",
+            dashed: "border-dashed",
+        },
+        direction: {
+            horizontal: "w-full h-px",
+            vertical: "h-full w-px",
+        },
+    },
+    compoundVariants: [
+        // 水平方向の破線
+        {
+            direction: "horizontal",
+            lineStyle: "dashed",
+            className: "bg-transparent border-t",
+        },
+        // 垂直方向の破線
+        {
+            direction: "vertical",
+            lineStyle: "dashed",
+            className: "bg-transparent border-l",
+        },
+    ],
+    defaultVariants: {
+        emphasis: "middle",
+        lineStyle: "solid",
+        direction: "horizontal",
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - ディバイダーコンポーネントはグループ内のコンテンツを視覚的に区切ってユーザーに提示する際に使用します。
+ * - en: The Divider component is used to visually separate content within groups for users.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Divider emphasis="middle" lineStyle="solid" direction="horizontal" />
+ * ```
+ *
+ * @param {DividerProps} props
+ */
+const Divider = React.forwardRef((_a, ref) => {
+    var { className, emphasis, lineStyle, direction } = _a, props = __rest(_a, ["className", "emphasis", "lineStyle", "direction"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn(dividerVariants({
+            emphasis,
+            lineStyle,
+            direction,
+            className,
+        })) }, props)));
+});
+Divider.displayName = "Divider";
+export { Divider, dividerVariants };