sparkle-design 0.9.0

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Radio, RadioItem } 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(Radio, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2752%3A17458", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        dir: figma.enum("direction", {
+            vertical: "rtl",
+        }),
+        orientation: figma.enum("direction", {
+            horizontal: "horizontal",
+            vertical: "vertical",
+        }),
+        // No matching props could be found for these Figma properties:
+        // "units": figma.enum('units', {
+        //   "2": "2",
+        //   "3": "3",
+        //   "4": "4",
+        //   "5": "5",
+        //   "6": "6",
+        //   "7": "7",
+        //   "8": "8",
+        //   "9": "9"
+        // })
+    },
+    example: props => _jsx(Radio, { dir: props.dir, orientation: props.orientation }),
+});
+/**
+ * -- 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(RadioItem, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=176%3A7906", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        isInvalid: figma.enum("isInvalid", {
+            false: false,
+            true: true,
+        }),
+        label: figma.string("label"),
+        disabled: figma.enum("state", {
+            disabled: true,
+        }),
+        checked: figma.boolean("isChecked"),
+        value: figma.string("label"),
+        // No matching props could be found for these Figma properties:
+        // "isLabel": figma.boolean('isLabel'),
+        // "isFocused": figma.boolean('isFocused')
+    },
+    example: props => (_jsx(RadioItem, { size: props.size, isInvalid: props.isInvalid, label: props.label, disabled: props.disabled, value: props.value, checked: props.checked })),
+});

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

@@ -0,0 +1,204 @@
+/**
+ * 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 { RadioGroup as RadioPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+const labelVariants = 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-medium",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        isDisabled: false,
+    },
+});
+const radioItemVariants = cva([
+    "relative rounded-full 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 radioIndicatorVariants = cva([
+    "flex items-center justify-center rounded-full border 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]_&]:border-negative-500",
+            false: "border-neutral-500",
+        },
+        isDisabled: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            isDisabled: false,
+            isInvalid: false,
+            className: "hover:border-neutral-600",
+        },
+        {
+            isDisabled: false,
+            isInvalid: true,
+            className: "hover:border-negative-600",
+        },
+        {
+            isDisabled: true,
+            isInvalid: false,
+            className: "border-neutral-200 [.group[data-state=checked]_&]:border-primary-100",
+        },
+        {
+            isDisabled: true,
+            isInvalid: true,
+            className: "border-negative-200 [.group[data-state=checked]_&]:border-negative-200",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+    },
+});
+const radioIndicatorDotVariants = cva("rounded-full transition-colors flex items-center justify-center shrink-0", {
+    variants: {
+        size: {
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6",
+        },
+        isInvalid: {
+            true: "[.group[data-state=checked]_&]:bg-negative-500",
+            false: "[.group[data-state=checked]_&]:bg-primary-500",
+        },
+        isDisabled: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            isDisabled: false,
+            isInvalid: false,
+            className: "[.group[data-state=checked]_&]:hover:bg-primary-600",
+        },
+        {
+            isDisabled: false,
+            isInvalid: true,
+            className: "[.group[data-state=checked]_&]:hover:bg-negative-600",
+        },
+        {
+            isDisabled: true,
+            isInvalid: false,
+            className: "[.group[data-state=checked]_&]:bg-primary-100",
+        },
+        {
+            isDisabled: true,
+            isInvalid: true,
+            className: "[.group[data-state=checked]_&]:bg-negative-200",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        isInvalid: false,
+        isDisabled: false,
+    },
+});
+const radioIndicatorDotInnerVariants = cva("rounded-full bg-white", {
+    variants: {
+        size: {
+            sm: "h-2 w-2",
+            md: "h-2.5 w-2.5",
+            lg: "h-3 w-3",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+/**
+ * **概要 / 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
+ */
+function Radio(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(RadioPrimitive.Root, Object.assign({ "data-slot": "radio-group", className: cn("grid gap-y-2 gap-x-4", className) }, props)));
+}
+Radio.displayName = RadioPrimitive.Root.displayName;
+/**
+ * **概要 / Overview**
+ *
+ * - ラジオボタンのアイテムコンポーネントです。
+ * - en: Individual radio button item component.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <RadioItem value="option1" label="オプション1" size="md" />
+ * ```
+ *
+ * @param {RadioItemProps} props
+ */
+function RadioItem(_a) {
+    var { className, size = "md", isInvalid = false, disabled = false, label, id } = _a, props = __rest(_a, ["className", "size", "isInvalid", "disabled", "label", "id"]);
+    return (_jsxs("div", { className: "flex items-center", children: [_jsx(RadioPrimitive.Item, Object.assign({ "data-slot": "radio-group-item", id: id, className: cn(radioItemVariants({ size, isDisabled: disabled }), "group", className), disabled: disabled }, props, { children: _jsx("div", { className: cn(radioIndicatorVariants({ size, isInvalid, isDisabled: disabled })), children: _jsx(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: cn(radioIndicatorDotVariants({
+                            size,
+                            isInvalid,
+                            isDisabled: disabled,
+                        })), children: _jsx("div", { className: cn(radioIndicatorDotInnerVariants({ size })) }) }) }) })), label && (_jsx("label", { htmlFor: id, className: cn(labelVariants({ size, isDisabled: disabled })), children: label }))] }));
+}
+RadioItem.displayName = RadioPrimitive.Item.displayName;
+export { Radio, RadioItem };

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

@@ -0,0 +1,175 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトはオプショングループの中から値を選択する形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Select component is used to capture user input by selecting a value from a group of options.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `SelectTrigger` と横並びの Button は原則同じサイズにしてください。デフォルトの `SelectTrigger` に対しては `Button size="md"` を使ってください。
+ *   en: Keep Button size aligned when placing it next to `SelectTrigger`. Use `Button size="md"` with the default `SelectTrigger` size.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <div className="flex gap-2">
+ *   <Select>
+ *     <SelectTrigger size="md" className="w-60">
+ *       <SelectValue placeholder="選択してください" />
+ *     </SelectTrigger>
+ *   </Select>
+ *   <Button size="md">追加</Button>
+ * </div>
+ *
+ * // ❌ Wrong - 高さが揃わないサイズ不一致
+ * <div className="flex gap-2">
+ *   <Select>
+ *     <SelectTrigger size="md" className="w-60">
+ *       <SelectValue placeholder="選択してください" />
+ *     </SelectTrigger>
+ *   </Select>
+ *   <Button size="sm">追加</Button>
+ * </div>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Select>
+ *   <SelectTrigger size="md">
+ *     <SelectValue placeholder="選択してください" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">オプション1</SelectItem>
+ *     <SelectItem value="option2">オプション2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @param {React.ComponentProps<typeof SelectPrimitive.Root>} props
+ */
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+type SelectTriggerVariantProps = VariantProps<typeof selectTriggerVariants>;
+export interface SelectTriggerProps extends React.ComponentProps<typeof SelectPrimitive.Trigger> {
+    /**
+     * セレクトトリガーのサイズバリエーション
+     * en: Size variation of the select trigger
+     */
+    size?: SelectTriggerVariantProps["size"];
+    /**
+     * セレクトトリガーのエラー状態
+     * en: Error state of the select trigger
+     */
+    isInvalid?: SelectTriggerVariantProps["isInvalid"];
+    /**
+     * セレクトトリガーの無効化状態
+     * en: Disabled state of the select trigger
+     */
+    disabled?: boolean;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトのトリガー部分で、クリックで選択肢リストを開閉するボタンとして機能します。
+ * - en: The trigger part of the select that functions as a button to open/close the option list when clicked.
+ *
+ * @param {SelectTriggerProps} props
+ */
+declare function SelectTrigger({ className, size, children, isInvalid, disabled, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトのドロップダウンリスト本体で、選択肢リストの表示・スクロール制御を行います。
+ * - en: The main dropdown list body of the select that handles display and scroll control of option lists.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectContent>
+ *   <SelectItem value="option1">オプション1</SelectItem>
+ * </SelectContent>
+ * ```
+ */
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトのラベル部分で、グループ化された選択肢のラベル表示に使います。
+ * - en: The label part of the select used to display labels for grouped options.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectLabel>カテゴリー</SelectLabel>
+ * ```
+ */
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+export interface SelectItemProps extends React.ComponentProps<typeof SelectPrimitive.Item> {
+    /**
+     * 選択肢テキスト部分に適用するクラス名
+     * en: Class name applied to the selectable item text area
+     */
+    textClassName?: string;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの各選択肢アイテムで、選択可能なリスト項目として機能します。
+ * - en: Each selectable item in the select that functions as a selectable list item.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectItem value="option1">オプション1</SelectItem>
+ * ```
+ */
+declare function SelectItem({ className, children, textClassName, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの区切り線で、選択肢リスト内の区切り表示に使います。
+ * - en: The separator line in the select used to display divisions within the option list.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectSeparator />
+ * ```
+ */
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの上スクロールボタンで、選択肢が多い場合にリストを上方向にスクロールします。
+ * - en: The up scroll button of the select that scrolls the list upward when there are many options.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectScrollUpButton />
+ * ```
+ */
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの下スクロールボタンで、選択肢が多い場合にリストを下方向にスクロールします。
+ * - en: The down scroll button of the select that scrolls the list downward when there are many options.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectScrollDownButton />
+ * ```
+ */
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

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

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

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } 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(SelectTrigger, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=139%3A22300", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        isInvalid: figma.enum("isInvalid", {
+            false: false,
+            true: true,
+        }),
+        disabled: figma.enum("state", {
+            disabled: true,
+        }),
+        // No matching props could be found for these Figma properties:
+        // "isFocused": figma.boolean('isFocused'),
+        value: figma.string("value"),
+    },
+    example: props => (_jsxs(Select, { children: [_jsx(SelectTrigger, { size: props.size, isInvalid: props.isInvalid, disabled: props.disabled, children: _jsx(SelectValue, { placeholder: props.value }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] })),
+});