sparkle-design 0.9.0

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

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from "react";
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * 新しいウィンドウやタブで開くかどうか
+     * en: Whether to open the link in a new window or tab
+     */
+    isOpenInNew?: boolean;
+    /**
+     * 子要素をルート要素として使う（next/link 等との統合用）
+     * en: Render the child element as the root element (for integration with next/link, etc.)
+     */
+    asChild?: boolean;
+    /**
+     * 表示するテキスト
+     * en: Text to display inside the link
+     */
+    children: React.ReactNode;
+    /**
+     * 追加のクラス名
+     * en: Additional CSS classes for the link
+     */
+    className?: string;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - リンクはコンテンツがナビゲーションできることをユーザーに提示するために使用するコンポーネントです。
+ * - en: The Link component is used to indicate to users that content is navigable.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - 外部リンクアイコンを手動で追加しないでください。`isOpenInNew` prop が自動で `open_in_new` アイコンを表示します。
+ *   en: Do not manually add external link icons. The `isOpenInNew` prop automatically displays the `open_in_new` icon.
+ * - `asChild` 使用時は `isOpenInNew` のアイコンが自動付与されます。手動で追加しないでください。
+ *   en: When using `asChild`, the `isOpenInNew` icon is still automatically added. Do not add it manually.
+ * - `asChild` の子要素は `<a>` または `next/link` 等のリンク要素を渡してください。`<span>` や `<div>` を渡すとアクセシビリティが損なわれます。
+ *   en: When using `asChild`, pass a link element (`<a>` or `next/link`, etc.) as the child. Passing `<span>` or `<div>` breaks accessibility.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * // 基本的な使い方
+ * <Link href="https://example.com" isOpenInNew>
+ *   外部サイトへのリンク
+ * </Link>
+ *
+ * // next/link との統合
+ * import NextLink from "next/link";
+ *
+ * <Link asChild>
+ *   <NextLink href="/about">About ページ</NextLink>
+ * </Link>
+ *
+ * // next/link + 外部リンク
+ * <Link asChild isOpenInNew>
+ *   <NextLink href="https://example.com" target="_blank" rel="noopener noreferrer">
+ *     外部サイト
+ *   </NextLink>
+ * </Link>
+ * ```
+ *
+ * @param {LinkProps} props
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Link } 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(Link, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=825%3A16911", {
+    props: {
+        // No matching props could be found for these Figma properties:
+        // "isFocused": figma.boolean('isFocused'),
+        label: figma.string("label"),
+        isOpenInNew: figma.boolean("isOpenInNew"),
+        // "state": figma.enum('state', {
+        //   "enable": "enable",
+        //   "hover": "hover"
+        // })
+    },
+    example: props => (_jsx(Link, { href: "https://example.com", isOpenInNew: props.isOpenInNew, children: props.label })),
+});

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

@@ -0,0 +1,92 @@
+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";
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../components/ui/icon/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - リンクはコンテンツがナビゲーションできることをユーザーに提示するために使用するコンポーネントです。
+ * - en: The Link component is used to indicate to users that content is navigable.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - 外部リンクアイコンを手動で追加しないでください。`isOpenInNew` prop が自動で `open_in_new` アイコンを表示します。
+ *   en: Do not manually add external link icons. The `isOpenInNew` prop automatically displays the `open_in_new` icon.
+ * - `asChild` 使用時は `isOpenInNew` のアイコンが自動付与されます。手動で追加しないでください。
+ *   en: When using `asChild`, the `isOpenInNew` icon is still automatically added. Do not add it manually.
+ * - `asChild` の子要素は `<a>` または `next/link` 等のリンク要素を渡してください。`<span>` や `<div>` を渡すとアクセシビリティが損なわれます。
+ *   en: When using `asChild`, pass a link element (`<a>` or `next/link`, etc.) as the child. Passing `<span>` or `<div>` breaks accessibility.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * // 基本的な使い方
+ * <Link href="https://example.com" isOpenInNew>
+ *   外部サイトへのリンク
+ * </Link>
+ *
+ * // next/link との統合
+ * import NextLink from "next/link";
+ *
+ * <Link asChild>
+ *   <NextLink href="/about">About ページ</NextLink>
+ * </Link>
+ *
+ * // next/link + 外部リンク
+ * <Link asChild isOpenInNew>
+ *   <NextLink href="https://example.com" target="_blank" rel="noopener noreferrer">
+ *     外部サイト
+ *   </NextLink>
+ * </Link>
+ * ```
+ *
+ * @param {LinkProps} props
+ */
+export const Link = React.forwardRef((_a, ref) => {
+    var { isOpenInNew: isExternalLink = false, asChild = false, children, className = "" } = _a, props = __rest(_a, ["isOpenInNew", "asChild", "children", "className"]);
+    // character-*-*-* クラスがあるかチェック
+    const hasCharacterClass = className === null || className === void 0 ? void 0 : className.includes("character-");
+    // character-X-*-* のXの部分（サイズ）を取得
+    const characterSizeMatch = className === null || className === void 0 ? void 0 : className.match(/character-(\d+)-/);
+    const parsed = characterSizeMatch
+        ? parseInt(characterSizeMatch[1], 10)
+        : 3;
+    const characterSize = (parsed >= 1 && parsed <= 12 ? parsed : 3);
+    // character クラスの生成
+    const characterSizeClass = hasCharacterClass
+        ? "" // 外部で指定されている場合は付与しない
+        : `character-${characterSize}-regular-pro`;
+    const linkClassName = cn("inline group", characterSizeClass, className);
+    if (asChild &&
+        typeof process !== "undefined" &&
+        process.env.NODE_ENV !== "production" &&
+        React.isValidElement(children)) {
+        const childType = children.type;
+        if (childType === "span" || childType === "div") {
+            console.warn("[Link] asChild の子要素にはリンク要素（<a> や next/link 等）を渡してください。<span> や <div> を渡すとアクセシビリティが損なわれます。");
+        }
+    }
+    const linkContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "transition-colors text-info-500 group-hover:text-info-600 underline decoration-current underline-offset-2", children: children }), isExternalLink && (_jsx(Icon, { icon: "open_in_new", size: characterSize, className: "ml-1 align-middle inline-block text-info-500 group-hover:text-info-600" }))] }));
+    if (asChild) {
+        return (_jsx(SlotPrimitive.Slot, Object.assign({ ref: ref, className: linkClassName }, props, { children: React.isValidElement(children) ? (React.cloneElement(children, {}, _jsxs(_Fragment, { children: [_jsx("span", { className: "transition-colors text-info-500 group-hover:text-info-600 underline decoration-current underline-offset-2", children: children
+                            .props.children }), isExternalLink && (_jsx(Icon, { icon: "open_in_new", size: characterSize, className: "ml-1 align-middle inline-block text-info-500 group-hover:text-info-600" }))] }))) : (linkContent) })));
+    }
+    return (_jsx("a", Object.assign({ ref: ref, className: linkClassName }, props, { children: linkContent })));
+});
+Link.displayName = "Link";

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

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { IconButton } from "../icon-button";
+/**
+ * **概要 / Overview**
+ *
+ * - モーダルはコンテンツに重ねられたウィンドウを介して、ユーザーの注意を特定の情報に集中させるために使用するコンポーネントです。
+ * - en: The Modal component is used to focus user attention on specific information through a window overlaid on content.
+ * - 作成/編集フォームや詳細表示など、確認だけではない情報入力・閲覧に使います。
+ * - en: Use Modal for forms and detail views such as create/edit flows, not for simple action confirmation.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Modal>
+ *   <ModalTrigger>モーダルを開く</ModalTrigger>
+ *   <ModalContent size="md">
+ *     <ModalHeader>
+ *       <ModalTitle>タイトル</ModalTitle>
+ *       <ModalClose />
+ *     </ModalHeader>
+ *     <ModalBody>
+ *       <p>モーダルの内容</p>
+ *     </ModalBody>
+ *     <ModalFooter>
+ *       <button>OK</button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - 作成/編集フォームや詳細表示など、確認だけではない情報入力・閲覧に使ってください。
+ *   en: Use Modal for forms and detail views such as create and edit flows, not for simple action confirmation.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Modal>
+ *   <ModalContent size="md">
+ *     <ModalHeader>
+ *       <ModalTitle>ユーザー作成</ModalTitle>
+ *       <ModalClose />
+ *     </ModalHeader>
+ *     <ModalBody isSpace>
+ *       <Input />
+ *       <Select />
+ *     </ModalBody>
+ *     <ModalFooter>
+ *       <Button>作成</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+
+ * @param {React.ComponentProps<typeof DialogPrimitive.Root>} props
+ */
+declare function Modal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ModalTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function ModalPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function ModalTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function ModalClose({ "aria-label": ariaLabel, ...props }: Omit<React.ComponentProps<typeof IconButton>, "icon">): import("react/jsx-runtime").JSX.Element;
+declare function ModalOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ModalContentProps extends React.ComponentProps<typeof DialogPrimitive.Content> {
+    /**
+     * モーダルのサイズ（sm、md、lg、xl、full）
+     * en: Modal size (sm, md, lg, xl, full)
+     */
+    size?: ModalSize;
+    /**
+     * オーバーレイクリック時にモーダルを閉じるかどうか
+     * en: Determines whether clicking the overlay closes the modal
+     */
+    closeOnOverlayClick?: boolean;
+}
+declare function ModalContent({ className, children, size, closeOnOverlayClick, onInteractOutside, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ModalBody({ className, isSpace, ...props }: React.ComponentProps<"div"> & {
+    isSpace?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ModalFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Modal, ModalClose, ModalContent, ModalBody, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, };

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

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

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Button } from "../button/index.js";
+import { Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTitle, ModalTrigger, } from "./index.js";
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+figma.connect(Modal, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1306%3A20954", {
+    props: {
+        // No matching props could be found for these Figma properties:
+        // isHeader: figma.boolean("isHeader"),
+        // isFooter: figma.boolean("isFooter"),
+        // isCloseTrigger: figma.boolean("isCloseTrigger"),
+        title: figma.string("title"),
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+            full: "full",
+        }),
+    },
+    example: props => (_jsxs(Modal, { children: [_jsx(ModalTrigger, { children: "\u30E2\u30FC\u30C0\u30EB\u3092\u958B\u304F" }), _jsxs(ModalContent, { size: props.size, children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: props.title }), _jsx(ModalClose, {})] }), _jsx(ModalBody, { children: _jsx("p", { children: "\u30B9\u30ED\u30C3\u30C8" }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { size: "sm", theme: "neutral", variant: "ghost", children: "\u30AD\u30E3\u30F3\u30BB\u30EB" }), _jsx(Button, { size: "sm", children: "\u4FDD\u5B58" })] })] })] })),
+});
+/**
+ * -- 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(ModalBody, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2893%3A25363", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        isSpace: figma.boolean("isSpaced"),
+        // No matching props could be found for these Figma properties:
+        // "slot": figma.instance('slot')
+    },
+    example: props => _jsx(ModalBody, { isSpace: props.isSpace }),
+});
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+figma.connect(ModalFooter, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2893%3A25357", {
+    props: {
+    // No matching props could be found for these Figma properties:
+    // "slot": figma.instance('slot'),
+    // "type": figma.enum('type', {
+    //   "default": "default",
+    //   "slot": "slot"
+    // })
+    },
+    example: props => _jsx(ModalFooter, {}),
+});

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

@@ -0,0 +1,143 @@
+/**
+ * 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 { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../../../lib/utils.js";
+import { IconButton } from "../icon-button/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - モーダルはコンテンツに重ねられたウィンドウを介して、ユーザーの注意を特定の情報に集中させるために使用するコンポーネントです。
+ * - en: The Modal component is used to focus user attention on specific information through a window overlaid on content.
+ * - 作成/編集フォームや詳細表示など、確認だけではない情報入力・閲覧に使います。
+ * - en: Use Modal for forms and detail views such as create/edit flows, not for simple action confirmation.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Modal>
+ *   <ModalTrigger>モーダルを開く</ModalTrigger>
+ *   <ModalContent size="md">
+ *     <ModalHeader>
+ *       <ModalTitle>タイトル</ModalTitle>
+ *       <ModalClose />
+ *     </ModalHeader>
+ *     <ModalBody>
+ *       <p>モーダルの内容</p>
+ *     </ModalBody>
+ *     <ModalFooter>
+ *       <button>OK</button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - 作成/編集フォームや詳細表示など、確認だけではない情報入力・閲覧に使ってください。
+ *   en: Use Modal for forms and detail views such as create and edit flows, not for simple action confirmation.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Modal>
+ *   <ModalContent size="md">
+ *     <ModalHeader>
+ *       <ModalTitle>ユーザー作成</ModalTitle>
+ *       <ModalClose />
+ *     </ModalHeader>
+ *     <ModalBody isSpace>
+ *       <Input />
+ *       <Select />
+ *     </ModalBody>
+ *     <ModalFooter>
+ *       <Button>作成</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+
+ * @param {React.ComponentProps<typeof DialogPrimitive.Root>} props
+ */
+function Modal(_a) {
+    var props = __rest(_a, []);
+    return _jsx(DialogPrimitive.Root, Object.assign({ "data-slot": "modal" }, props));
+}
+/// モーダルのトリガー要素
+function ModalTrigger(_a) {
+    var props = __rest(_a, []);
+    return _jsx(DialogPrimitive.Trigger, Object.assign({ "data-slot": "modal-trigger" }, props));
+}
+/// モーダルのポータル要素
+function ModalPortal(_a) {
+    var props = __rest(_a, []);
+    return _jsx(DialogPrimitive.Portal, Object.assign({ "data-slot": "modal-portal" }, props));
+}
+/// モーダルのタイトル要素
+function ModalTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Title, Object.assign({ "data-slot": "modal-title", className: cn("character-4-bold-pro flex-1", className) }, props)));
+}
+/// モーダルのクローズボタン
+function ModalClose(_a) {
+    var { "aria-label": ariaLabel = "閉じる" } = _a, props = __rest(_a, ["aria-label"]);
+    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(IconButton, Object.assign({ icon: "close", "data-slot": "modal-close", size: "xs", variant: "ghost", theme: "neutral", "aria-label": ariaLabel }, props)) }));
+}
+/// モーダルのオーバーレイ要素
+function ModalOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({ "data-slot": "modal-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 ModalContent(_a) {
+    var { className, children, size = "md", closeOnOverlayClick = false, onInteractOutside } = _a, props = __rest(_a, ["className", "children", "size", "closeOnOverlayClick", "onInteractOutside"]);
+    const handleInteractOutside = React.useCallback(event => {
+        onInteractOutside === null || onInteractOutside === void 0 ? void 0 : onInteractOutside(event);
+        if (!closeOnOverlayClick && !event.defaultPrevented) {
+            event.preventDefault();
+        }
+    }, [closeOnOverlayClick, onInteractOutside]);
+    // Figmaのsizeバリアントに合わせたサイズごとのスタイル定義
+    const sizeClass = size === "sm"
+        ? "max-w-xs"
+        : size === "md"
+            ? "max-w-[480px]"
+            : size === "lg"
+                ? "max-w-[640px]"
+                : size === "xl"
+                    ? "max-w-[960px]"
+                    : size === "full"
+                        ? "max-w-[calc(100vw-80px)] h-[calc(100vh-80px)] overflow-hidden"
+                        : "";
+    return (_jsxs(ModalPortal, { "data-slot": "modal-portal", children: [_jsx(ModalOverlay, {}), _jsx(DialogPrimitive.Content, Object.assign({ "data-slot": "modal-content", className: cn(sizeClass, "z-50 flex flex-col gap-0 w-full max-h-[calc(100vh-80px)] bg-white border-divider-low py-4 rounded-modal 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%] translate-x-[-50%] translate-y-[-50%] shadow-lg duration-200", className), onInteractOutside: handleInteractOutside }, props, { children: children }))] }));
+}
+/// モーダルのヘッダー
+function ModalHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "modal-header", className: cn("flex gap-2 px-6 py-2 items-center w-full shrink-0 grow-0", className) }, props)));
+}
+/// モーダルのボディ
+function ModalBody(_a) {
+    var { className, isSpace = true } = _a, props = __rest(_a, ["className", "isSpace"]);
+    return (_jsx("div", Object.assign({ "data-slot": "modal-body", className: cn("grow overflow-auto min-h-0", isSpace ? "px-6 py-2" : "", className) }, props)));
+}
+/// モーダルのフッター
+function ModalFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ "data-slot": "modal-footer", className: cn("flex flex-row justify-end gap-2 px-6 py-2 shrink-0 grow-0", className) }, props)));
+}
+export { Modal, ModalClose, ModalContent, ModalBody, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * **概要 / Overview**
+ *
+ * - オーバーレイはシステムのモードが切り替わったことを伝えるために使用するコンポーネントです。
+ * - en: The Overlay component is used to indicate that the system mode has changed.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Overlay />
+ * ```
+ *
+ * @param {OverlayProps} props
+ */
+declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLDivElement>>;
+export { Overlay };

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Overlay } from "./index.js";
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+figma.connect(Overlay, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2873%3A274", {
+    props: {},
+    example: props => _jsx(Overlay, {}),
+});

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

@@ -0,0 +1,39 @@
+/**
+ * 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 } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+/**
+ * **概要 / Overview**
+ *
+ * - オーバーレイはシステムのモードが切り替わったことを伝えるために使用するコンポーネントです。
+ * - en: The Overlay component is used to indicate that the system mode has changed.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Overlay />
+ * ```
+ *
+ * @param {OverlayProps} props
+ */
+const Overlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ ref: ref, "data-slot": "overlay", className: cn("fixed inset-0 bg-[var(--color-black-alpha-300)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", className) }, props)));
+});
+Overlay.displayName = "Overlay";
+export { Overlay };

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { RadioGroup as RadioPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+declare const radioItemVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const radioIndicatorDotVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type RadioPrimitiveProps = React.ComponentProps<typeof RadioPrimitive.Root>;
+export interface RadioProps extends RadioPrimitiveProps {
+    /**
+     * ラジオのデフォルト値
+     * en: Default value of the radio group
+     */
+    defaultValue?: RadioPrimitiveProps["defaultValue"];
+    /**
+     * ラジオの値が変更されたときのコールバック
+     * en: Callback when the radio value changes
+     */
+    onValueChange?: RadioPrimitiveProps["onValueChange"];
+}
+/**
+ * **概要 / Overview**
+ *
+ * - ラジオボタンは単一選択の形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Radio component is used to select one option from multiple choices.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Radio value="option1" onValueChange={setValue}>
+ *   <RadioItem value="option1" label="オプション1" />
+ *   <RadioItem value="option2" label="オプション2" />
+ * </Radio>
+ * ```
+ *
+ * @param {RadioProps} props
+ */
+declare function Radio({ className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var displayName: string | undefined;
+}
+type RadioItemVariantProps = VariantProps<typeof radioItemVariants>;
+type RadioIndicatorDotVariantProps = VariantProps<typeof radioIndicatorDotVariants>;
+type RadioPrimitiveItemProps = React.ComponentPropsWithoutRef<typeof RadioPrimitive.Item>;
+interface RadioItemProps extends RadioPrimitiveItemProps {
+    /**
+     * ラジオボタンのサイズ
+     * en: Radio button size
+     * @default "md"
+     */
+    size?: RadioItemVariantProps["size"];
+    /**
+     * エラー状態かどうか
+     * en: Whether the radio button is in an error state
+     * @default false
+     */
+    isInvalid?: RadioIndicatorDotVariantProps["isInvalid"];
+    /**
+     * ラジオボタンが無効かどうか
+     * en: Whether the radio button is disabled
+     * @default false
+     */
+    disabled?: RadioPrimitiveItemProps["disabled"];
+    /**
+     * ラベルのテキスト
+     * en: Label text for the radio button
+     */
+    label?: string;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - ラジオボタンのアイテムコンポーネントです。
+ * - en: Individual radio button item component.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <RadioItem value="option1" label="オプション1" size="md" />
+ * ```
+ *
+ * @param {RadioItemProps} props
+ */
+declare function RadioItem({ className, size, isInvalid, disabled, label, id, ...props }: RadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioItem {
+    var displayName: string | undefined;
+}
+export { Radio, RadioItem };
+export type { RadioItemProps };

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

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