sparkle-design 0.9.0

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

@@ -0,0 +1,171 @@
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { FormProvider, type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+/**
+ * **概要 / Overview**
+ *
+ * - フォームはフォームの入力要素・ラベル・ヘルパーテキストを包括して提供するために使用するコンポーネントです。
+ * - en: The Form component is used to encapsulate form input elements, labels, and helper text.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Form {...form}>
+ *   <FormField
+ *     control={form.control}
+ *     name="example"
+ *     render={({ field, fieldState }) => (
+ *       <FormItem>
+ *         <FormHeader label="ラベル" />
+ *         <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ *         <FormControl>
+ *           <Input
+ *             placeholder="プレースホルダー"
+ *             {...field}
+ *             {...fieldState}
+ *             isInvalid={fieldState.invalid}
+ *           />
+ *         </FormControl>
+ *         <FormErrorMessage />
+ *       </FormItem>
+ *     )}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function Form(props: React.ComponentProps<typeof FormProvider>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - フォームフィールドはフォームの各入力要素を管理するために使用するコンポーネントです。
+ * - en: The FormField component is used to manage each input element of the form.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormField
+ *   control={form.control}
+ *   name="example"
+ *   render={({ field, fieldState }) => (
+ *    <FormItem>
+ *       <FormHeader label="ラベル" />
+ *       <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ *       <FormControl>
+ *         <Input
+ *           placeholder="プレースホルダー"
+ *           {...field}
+ *           {...fieldState}
+ *           isInvalid={fieldState.invalid}
+ *         />
+ *       </FormControl>
+ *       <FormErrorMessage />
+ *     </FormItem>
+ *   )}
+ * />
+ * ```
+ */
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+/**
+ * **概要 / Overview**
+ *
+ * - フォームアイテムはフォームフィールドのラベル、入力要素、ヘルパーテキストをグループ化するために使用するコンポーネントです。
+ * - en: The FormItem component is used to group the label, input elements, and helper text of a form field.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormItem>
+ *   <FormHeader label="ラベル" />
+ *   <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ *   <FormControl>
+ *     <Input placeholder="プレースホルダー" {...field} {...fieldState} isInvalid={fieldState.invalid} />
+ *   </FormControl>
+ *   <FormErrorMessage />
+ * </FormItem>
+ * ```
+ */
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export interface FormHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * ラベルのテキスト
+     * en: Text of the label
+     */
+    label: string;
+    /**
+     * 必須フィールドかどうか
+     * en: Whether it is a required field
+     */
+    isRequired?: boolean;
+    /**
+     * ヘルプテキスト
+     * en: Help text
+     */
+    helpText?: string;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - フォームヘッダーはフォームフィールドのラベル、必須マーク、ヘルプテキストを表示するために使用するコンポーネントです。
+ * - en: The FormHeader component is used to display the label, required mark, and help text of a form field.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormHeader label="ラベル" isRequired helpText="ヘルプテキスト" />
+ * ```
+ */
+declare function FormHeader({ className, label, isRequired, helpText, ...props }: FormHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - フォームコントロールはフォームフィールドの入力要素をラップするために使用するコンポーネントです。
+ * - en: The FormControl component is used to wrap the input elements of a form field.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormControl>
+ *   <Input placeholder="プレースホルダー" {...field} {...fieldState} isInvalid={fieldState.invalid} />
+ * </FormControl>
+ * ```
+ */
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - フォームヘルパーメッセージはフォームフィールドの補足説明やヒントを表示するために使用するコンポーネントです。
+ * - en: The FormHelperMessage component is used to display supplementary explanations or hints for form fields.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ * ```
+ */
+declare function FormHelperMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - フォームエラーメッセージはフォームフィールドのバリデーションエラーを表示するために使用するコンポーネントです。
+ * - en: The FormErrorMessage component is used to display validation errors for form fields.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormErrorMessage />
+ * ```
+ */
+declare function FormErrorMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
+export { useFormField, Form, FormItem, FormHeader, FormControl, FormHelperMessage, FormErrorMessage, FormField, };

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

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

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

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Input } from "../input/index.js";
+import { FormErrorMessage, FormHeader, FormHelperMessage, FormControl, } 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(
+//   Form,
+//   "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1274%3A66278",
+//   {
+//     props: {
+//       // No matching props could be found for these Figma properties:
+//       // "isErrorMessage": figma.boolean('isErrorMessage'),
+//       // "isHelpMessage": figma.boolean('isHelpMessage')
+//     },
+//     example: props => {
+//       return (
+//         <Form {...UseFormReturnType}>
+//           <FormField
+//             name="example"
+//             render={({ field, fieldState }) => (
+//               <FormItem>
+//                 <FormHeader label="ラベル" />
+//                 <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+//                 <FormControl>
+//                   <Input
+//                     placeholder="サンプルテキスト"
+//                     {...field}
+//                     {...fieldState}
+//                     isInvalid={fieldState.invalid}
+//                   />
+//                 </FormControl>
+//                 <FormErrorMessage />
+//               </FormItem>
+//             )}
+//           />
+//         </Form>
+//       );
+//     },
+//   }
+// );
+/**
+ * -- 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(FormErrorMessage, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=573%3A6321", {
+    props: {
+    // No matching props could be found for these Figma properties:
+    // "label": figma.string('label')
+    },
+    example: props => _jsx(FormErrorMessage, {}),
+});
+/**
+ * -- 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(FormHeader, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=573%3A4867", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        label: figma.string("label"),
+        isRequired: figma.boolean("isRequired"),
+        // No matching props could be found for these Figma properties:
+        helpText: figma.boolean("isHintTrigger", {
+            true: "有効",
+            false: undefined,
+        }),
+    },
+    example: props => (_jsx(FormHeader, { label: props.label, isRequired: props.isRequired, helpText: props.helpText })),
+});
+/**
+ * -- 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(FormHelperMessage, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=574%3A10563", {
+    props: {
+        // No matching props could be found for these Figma properties:
+        label: figma.string("label"),
+    },
+    example: props => _jsx(FormHelperMessage, { children: props.label }),
+});
+/**
+ * -- 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(FormControl, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2831%3A2244", {
+    props: {
+    // No matching props could be found for these Figma properties:
+    // "unitLabel1": figma.string('unitLabel 1'),
+    // "unitLabel2": figma.string('unitLabel 2'),
+    // "unitLabel3": figma.string('unitLabel 3'),
+    // "isShowUnitLabel": figma.boolean('isShowUnitLabel'),
+    // "type": figma.enum('type', {
+    //   "input": "input",
+    //   "input unit 2": "input-unit-2",
+    //   "input range": "input-range",
+    //   "number": "number",
+    //   "number range": "number-range",
+    //   "select": "select",
+    //   "select range": "select-range",
+    //   "date": "date",
+    //   "date range": "date-range",
+    //   "time": "time",
+    //   "time range": "time-range",
+    //   "password": "password",
+    //   "file": "file",
+    //   "textarea": "textarea",
+    //   "radio": "radio",
+    //   "checkbox": "checkbox",
+    //   "input unit 3": "input-unit-3"
+    // })
+    },
+    example: props => (_jsx(FormControl, { children: _jsx(Input, { placeholder: "\u30B5\u30F3\u30D7\u30EB\u30C6\u30AD\u30B9\u30C8" }) })),
+});

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

@@ -0,0 +1,214 @@
+/**
+ * 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 { Slot } from "radix-ui";
+import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
+import { cn } from "../../../lib/utils.js";
+import { Label } from "../../../components/ui/form/label.js";
+import { Tag } from "../../../components/ui/tag/index.js";
+import { Icon } from "../../../components/ui/icon/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../../components/ui/tooltip/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - フォームはフォームの入力要素・ラベル・ヘルパーテキストを包括して提供するために使用するコンポーネントです。
+ * - en: The Form component is used to encapsulate form input elements, labels, and helper text.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Form {...form}>
+ *   <FormField
+ *     control={form.control}
+ *     name="example"
+ *     render={({ field, fieldState }) => (
+ *       <FormItem>
+ *         <FormHeader label="ラベル" />
+ *         <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ *         <FormControl>
+ *           <Input
+ *             placeholder="プレースホルダー"
+ *             {...field}
+ *             {...fieldState}
+ *             isInvalid={fieldState.invalid}
+ *           />
+ *         </FormControl>
+ *         <FormErrorMessage />
+ *       </FormItem>
+ *     )}
+ *   />
+ * </Form>
+ * ```
+ */
+function Form(props) {
+    return _jsx(FormProvider, Object.assign({}, props));
+}
+const FormFieldContext = React.createContext({});
+/**
+ * **概要 / Overview**
+ *
+ * - フォームフィールドはフォームの各入力要素を管理するために使用するコンポーネントです。
+ * - en: The FormField component is used to manage each input element of the form.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormField
+ *   control={form.control}
+ *   name="example"
+ *   render={({ field, fieldState }) => (
+ *    <FormItem>
+ *       <FormHeader label="ラベル" />
+ *       <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ *       <FormControl>
+ *         <Input
+ *           placeholder="プレースホルダー"
+ *           {...field}
+ *           {...fieldState}
+ *           isInvalid={fieldState.invalid}
+ *         />
+ *       </FormControl>
+ *       <FormErrorMessage />
+ *     </FormItem>
+ *   )}
+ * />
+ * ```
+ */
+const FormField = (_a) => {
+    var props = __rest(_a, []);
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, Object.assign({}, props)) }));
+};
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return Object.assign({ id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message` }, fieldState);
+};
+const FormItemContext = React.createContext({});
+/**
+ * **概要 / Overview**
+ *
+ * - フォームアイテムはフォームフィールドのラベル、入力要素、ヘルパーテキストをグループ化するために使用するコンポーネントです。
+ * - en: The FormItem component is used to group the label, input elements, and helper text of a form field.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormItem>
+ *   <FormHeader label="ラベル" />
+ *   <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ *   <FormControl>
+ *     <Input placeholder="プレースホルダー" {...field} {...fieldState} isInvalid={fieldState.invalid} />
+ *   </FormControl>
+ *   <FormErrorMessage />
+ * </FormItem>
+ * ```
+ */
+function FormItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const id = React.useId();
+    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", Object.assign({ "data-slot": "form-item", className: cn("grid content-start", className) }, props)) }));
+}
+function FormLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: className, htmlFor: formItemId }, props)));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - フォームヘッダーはフォームフィールドのラベル、必須マーク、ヘルプテキストを表示するために使用するコンポーネントです。
+ * - en: The FormHeader component is used to display the label, required mark, and help text of a form field.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormHeader label="ラベル" isRequired helpText="ヘルプテキスト" />
+ * ```
+ */
+function FormHeader(_a) {
+    var { className, label, isRequired, helpText } = _a, props = __rest(_a, ["className", "label", "isRequired", "helpText"]);
+    return (_jsxs("div", Object.assign({ className: cn("flex gap-2 h-fit items-center", className) }, props, { children: [_jsx(FormLabel, { children: label }), isRequired && (_jsx(Tag, { status: "negative", size: "sm", variant: "subtle", children: "\u5FC5\u9808" })), helpText && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: "flex items-center", children: _jsx(Icon, { icon: "help", size: 5, className: "cursor-help text-text-low" }) }), _jsx(TooltipContent, { children: helpText })] }))] })));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - フォームコントロールはフォームフィールドの入力要素をラップするために使用するコンポーネントです。
+ * - en: The FormControl component is used to wrap the input elements of a form field.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormControl>
+ *   <Input placeholder="プレースホルダー" {...field} {...fieldState} isInvalid={fieldState.invalid} />
+ * </FormControl>
+ * ```
+ */
+function FormControl(_a) {
+    var props = __rest(_a, []);
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx("div", { className: "py-1", children: _jsx(Slot.Root, Object.assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+                ? `${formDescriptionId}`
+                : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error }, props)) }));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - フォームヘルパーメッセージはフォームフィールドの補足説明やヒントを表示するために使用するコンポーネントです。
+ * - en: The FormHelperMessage component is used to display supplementary explanations or hints for form fields.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormHelperMessage>ヘルプメッセージ</FormHelperMessage>
+ * ```
+ */
+function FormHelperMessage(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", Object.assign({ "data-slot": "form-description", id: formDescriptionId, className: cn("text-text-low character-2-regular-pro", className) }, props)));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - フォームエラーメッセージはフォームフィールドのバリデーションエラーを表示するために使用するコンポーネントです。
+ * - en: The FormErrorMessage component is used to display validation errors for form fields.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <FormErrorMessage />
+ * ```
+ */
+function FormErrorMessage(_a) {
+    var _b;
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { error, formMessageId } = useFormField();
+    const body = error ? String((_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsxs("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("flex gap-1 items-center text-negative-500 character-1-regular-pro", className) }, props, { children: [_jsx(Icon, { icon: "error", size: 3 }), body] })));
+}
+export { useFormField, Form, FormItem, FormHeader, FormControl, FormHelperMessage, FormErrorMessage, FormField, };

package/dist/components/ui/form/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Label };

package/dist/components/ui/form/label.js

@@ -0,0 +1,20 @@
+"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 { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "../../../lib/utils.js";
+function Label(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(LabelPrimitive.Root, Object.assign({ "data-slot": "label", className: cn("flex items-center gap-2 character-2-regular-pro leading-none select-none text-text-high", "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className) }, props)));
+}
+export { Label };

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

@@ -0,0 +1,71 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+/**
+ * アイコンサイズのスケール値（1-12）
+ * en: Icon size scale values (1-12)
+ *
+ * | scale | px  |
+ * |-------|-----|
+ * | 1     | 12  |
+ * | 2     | 14  |
+ * | 3     | 16  |
+ * | 4     | 18  |
+ * | 5     | 20  |
+ * | 6     | 24  |
+ * | 7     | 28  |
+ * | 8     | 32  |
+ * | 9     | 36  |
+ * | 10    | 42  |
+ * | 11    | 48  |
+ * | 12    | 54  |
+ */
+export type IconSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * 表示するアイコン名
+     * en: Name of the icon to display
+     */
+    icon: string;
+    /**
+     * アイコンサイズ（スケール値 1-12）
+     * en: Size of the icon (scale value 1-12)
+     * @see IconSize
+     */
+    size?: IconSize;
+    /**
+     * 塗りつぶしアイコンかどうか
+     * en: Whether the icon is filled
+     */
+    fill?: boolean;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - アイコンはテキスト情報を視覚表現でユーザーに提示するために使用するコンポーネントです。
+ * - en: The Icon component is used to present textual information to users through visual representation.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `material-symbols-rounded` を `span` に直書きせず、`Icon` を使ってください。
+ *   en: Use `Icon` instead of writing `material-symbols-rounded` directly on a span.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <Icon icon="content_copy" size={4} />
+ *
+ * // ❌ Wrong - className を直書きしない
+ * <span className="material-symbols-rounded text-sm">content_copy</span>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Icon icon="check" size={6} fill={true} />
+ * ```
+ *
+ * @param {IconProps} props
+ */
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;

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

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