sparkle-design 0.9.0

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from "react";
+import { type IconSize } from "@/components/ui/icon";
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * スピナーのサイズ（スケール値 1-12）
+     * en: Size of the spinner (scale value 1-12)
+     * @see IconSize
+     */
+    size?: IconSize;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - スピナーはダウンロード、アップロードなどのシステムによる処理の進行状況を視覚的に提示するために使用するコンポーネントです。
+ * - en: The Spinner component is used to visually present the progress of system processing such as downloads and uploads.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-12）を使用してください。
+ *   en: Do not pass pixel values to `size`. Use scale values (1-12) instead.
+ *
+ * ```tsx
+ * // ✅ Correct - スケール値
+ * <Spinner size={6} />
+ *
+ * // ❌ Wrong - ピクセル値
+ * <Spinner size={24} />
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Spinner size={6} />
+ * ```
+ *
+ * @param {SpinnerProps} props
+ */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Spinner } 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(Spinner, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1057%3A9546", {
+    props: {
+        size: 6,
+    },
+    example: props => _jsx(Spinner, { size: props.size }),
+});

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

@@ -0,0 +1,51 @@
+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 React from "react";
+import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../components/ui/icon/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - スピナーはダウンロード、アップロードなどのシステムによる処理の進行状況を視覚的に提示するために使用するコンポーネントです。
+ * - en: The Spinner component is used to visually present the progress of system processing such as downloads and uploads.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-12）を使用してください。
+ *   en: Do not pass pixel values to `size`. Use scale values (1-12) instead.
+ *
+ * ```tsx
+ * // ✅ Correct - スケール値
+ * <Spinner size={6} />
+ *
+ * // ❌ Wrong - ピクセル値
+ * <Spinner size={24} />
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Spinner size={6} />
+ * ```
+ *
+ * @param {SpinnerProps} props
+ */
+export const Spinner = React.forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx("span", Object.assign({ ref: ref, className: cn("inline-flex items-center justify-center"), role: "status", "aria-label": "\u8AAD\u307F\u8FBC\u307F\u4E2D", "data-testid": "loading-spinner" }, props, { children: _jsx(Icon, { icon: "progress_activity", size: size, className: cn("animate-spin text-text-low", className) }) })));
+});
+Spinner.displayName = "Spinner";

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SwitchVariants = VariantProps<typeof switchVariants>;
+type ReactSwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root>;
+export interface SwitchProps extends ReactSwitchProps {
+    /**
+     * スイッチのサイズ（sm、md、lg）
+     * en: Switch size (sm, md, lg)
+     */
+    size?: SwitchVariants["size"];
+    /**
+     * スイッチを無効状態にするかどうか
+     * en: Whether to disable the switch
+     */
+    disabled?: ReactSwitchProps["disabled"];
+    /**
+     * スイッチをオン状態（チェック状態）にするかどうか
+     * en: Whether to make the switch checked (on)
+     */
+    checked?: ReactSwitchProps["checked"];
+    /**
+     * スイッチの状態が変更されたときに呼び出されるコールバック関数
+     * en: Callback function called when the switch state changes
+     */
+    onCheckedChange?: ReactSwitchProps["onCheckedChange"];
+}
+/**
+ * **概要 / Overview**
+ *
+ * - スイッチは設定のオンとオフを切り替えるために使用するコンポーネントです。
+ * - en: The Switch component is used to toggle settings on and off.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Switch size="md" checked={isEnabled} onCheckedChange={setIsEnabled} />
+ * ```
+ *
+ * @param {SwitchProps} props
+ */
+declare function Switch({ className, size, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch };

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

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

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Switch } 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(Switch, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1075%3A22224", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        disabled: figma.enum("state", {
+            disabled: true,
+        }),
+        checked: figma.boolean("isChecked"),
+        defaultChecked: figma.boolean("isChecked"),
+        // No matching props could be found for these Figma properties:
+        // "isFocused": figma.boolean('isFocused')
+    },
+    example: props => (_jsx(Switch, { size: props.size, disabled: props.disabled, checked: props.checked, defaultChecked: props.defaultChecked })),
+});

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

@@ -0,0 +1,75 @@
+/**
+ * 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 { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "../../../lib/utils.js";
+import { cva } from "class-variance-authority";
+const switchVariants = cva([
+    "relative peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors",
+    "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[state=unchecked]:bg-neutral-500 data-[state=unchecked]:border-neutral-600 data-[state=unchecked]:hover:bg-neutral-600 data-[state=unchecked]:hover:border-neutral-700",
+    "data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-600 data-[state=checked]:hover:bg-primary-600 data-[state=checked]:hover:border-primary-700",
+    "disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-neutral-100 disabled:data-[state=unchecked]:border-transparent disabled:data-[state=checked]:bg-primary-200 disabled:data-[state=checked]:border-transparent",
+].join(" "), {
+    variants: {
+        size: {
+            // smサイズのタッチターゲットを24px以上に拡張（WCAG 2.5.8）
+            // en: Expand sm size touch target to 24px minimum (WCAG 2.5.8)
+            sm: "h-4 w-7 p-px before:absolute before:content-[''] before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-full before:min-h-6",
+            md: "h-6 w-11 p-px",
+            lg: "h-8 w-[60px] p-px",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+const thumbVariants = cva("pointer-events-none block rounded-full bg-white shadow-raise ring-0 transition-transform bg-white", {
+    variants: {
+        size: {
+            sm: "h-3 w-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0",
+            md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+            lg: "h-7 w-7 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+        },
+        disabled: {
+            true: "data-[state=unchecked]:bg-neutral-50 data-[state=checked]:bg-primary-50",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - スイッチは設定のオンとオフを切り替えるために使用するコンポーネントです。
+ * - en: The Switch component is used to toggle settings on and off.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Switch size="md" checked={isEnabled} onCheckedChange={setIsEnabled} />
+ * ```
+ *
+ * @param {SwitchProps} props
+ */
+function Switch(_a) {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx(SwitchPrimitive.Root, Object.assign({ "data-slot": "switch", className: cn(switchVariants({ size }), className) }, props, { children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn(thumbVariants({ size, disabled: props.disabled })) }) })));
+}
+export { Switch };

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * TabsTriggerのバリアント定義
+ * en: Variant definitions for TabsTrigger
+ */
+declare const tabsTriggerVariants: (props?: ({
+    variant?: "line" | "solid" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "solid" | "ghost" | null | undefined;
+    scrollable?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsListVariants = VariantProps<typeof tabsListVariants>;
+/**
+ * **概要 / Overview**
+ *
+ * - タブはユーザーが扱う情報をシンプルに保つためのディスクロージャーとして使用するコンポーネントです。
+ * - en: Tabs component is used as a disclosure to keep user-handled information simple.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList variant="solid">
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="password">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">Account Content</TabsContent>
+ *   <TabsContent value="password">Password Content</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @param {React.ComponentProps<typeof TabsPrimitive.Root>} props
+ */
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, variant, scrollable, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & TabsListVariants): import("react/jsx-runtime").JSX.Element;
+/**
+ * タブトリガー（タブボタン）
+ * en: Tab trigger (tab button)
+ *
+ * @param {TabsTriggerProps} props
+ */
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & TabsTriggerVariants & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * タブの内容表示エリア
+ * en: Tab content display area
+ */
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+export type { TabsListVariants };

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

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

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { TabsList, TabsTrigger } 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(TabsList, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=234%3A3639", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        variant: figma.enum("variant", {
+            solid: "solid",
+            line: "line",
+            ghost: "ghost",
+        }),
+        // 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(TabsList, { variant: props.variant }),
+});
+/**
+ * -- 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(TabsTrigger, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=234%3A3608", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        disabled: figma.enum("state", {
+            disabled: true,
+        }),
+        label: figma.string("label"),
+        variant: figma.enum("variant", {
+            line: "line",
+            solid: "solid",
+            ghost: "ghost",
+        }),
+        // No matching props could be found for these Figma properties:
+        // "label": figma.string('label'),
+        // "isSelected": figma.boolean('isSelected')
+    },
+    example: props => (_jsx(TabsTrigger, { disabled: props.disabled, value: props.label, variant: props.variant, children: props.label })),
+});

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

@@ -0,0 +1,164 @@
+/**
+ * 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 { Tabs as TabsPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+import { createContext, useContext } from "react";
+const TabsListVariantContext = createContext(undefined);
+/**
+ * TabsTriggerのバリアント定義
+ * en: Variant definitions for TabsTrigger
+ */
+const tabsTriggerVariants = cva([
+    "inline-flex items-center justify-center gap-1.5 whitespace-nowrap transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed",
+    "px-3 py-2 character-3-regular-pro",
+    "focus-visible:outline-none",
+], {
+    variants: {
+        variant: {
+            solid: [
+                "rounded-t-md",
+                // active
+                "data-[state=active]:bg-primary-500",
+                "data-[state=active]:text-white",
+                "hover:data-[state=active]:bg-primary-600",
+                "focus-visible:outline-none focus-visible:data-[state=active]:bg-primary-700",
+                // inactive
+                "data-[state=inactive]:bg-transparent",
+                "data-[state=inactive]:text-neutral-700",
+                "enabled:hover:data-[state=inactive]:bg-neutral-50",
+                "focus-visible:outline-none focus-visible:data-[state=inactive]:bg-neutral-100",
+                "focus-visible:data-[state=inactive]:text-primary-700",
+                // disabled
+                "disabled:data-[state=inactive]:text-neutral-200",
+            ].join(" "),
+            line: [
+                "relative rounded-none border-none z-10 focus-visible:outline-none",
+                "after:content-[''] after:absolute after:left-0 after:right-0 after:bottom-[-2px] after:h-0.5 after:rounded after:pointer-events-none after:z-10",
+                // active
+                "data-[state=active]:text-primary-500",
+                "data-[state=active]:after:bg-primary-500",
+                "data-[state=active]:after:h-0.5",
+                // inactive
+                "data-[state=inactive]:text-neutral-500",
+                "data-[state=inactive]:after:bg-transparent",
+                // hover (inactive, not disabled)
+                "enabled:hover:data-[state=inactive]:bg-neutral-50",
+                "focus-visible:outline-none focus-visible:data-[state=active]:bg-neutral-100",
+                "focus-visible:data-[state=active]:text-primary-700",
+                "focus-visible:data-[state=inactive]:text-primary-700",
+                // disabled
+                "disabled:data-[state=active]:text-neutral-200",
+                "disabled:data-[state=inactive]:text-neutral-200",
+            ].join(" "),
+            ghost: [
+                "rounded-t-md border-x border-t border-b-0 border-transparent text-text-middle",
+                // active
+                "data-[state=active]:text-text-high",
+                "data-[state=active]:border-divider-middle",
+                "hover:data-[state=active]:bg-neutral-50",
+                "data-[state=active]:rounded-t-md",
+                "focus-visible:outline-none focus-visible:data-[state=active]:bg-neutral-200",
+                // inactive
+                "data-[state=inactive]:text-neutral-500",
+                "enabled:hover:data-[state=inactive]:bg-neutral-50",
+                "focus-visible:outline-none focus-visible:data-[state=inactive]:bg-neutral-100",
+                "focus-visible:data-[state=inactive]:text-primary-700",
+                // disabled
+                "disabled:data-[state=active]:text-neutral-200",
+                "disabled:data-[state=inactive]:text-neutral-200",
+            ].join(" "),
+        },
+    },
+    defaultVariants: {
+        variant: "solid",
+    },
+});
+const tabsListVariants = cva(["relative inline-flex items-center"], {
+    variants: {
+        variant: {
+            solid: "border-b-2 border-b-primary-500 rounded-none",
+            line: "border-b-2 border-b-neutral-200 rounded-none overflow-visible",
+            ghost: "",
+        },
+        scrollable: {
+            true: [
+                "w-full max-w-full justify-start gap-2 overflow-x-auto overflow-y-visible",
+                "whitespace-nowrap overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            ].join(" "),
+            false: "w-fit justify-center gap-2 overflow-visible",
+        },
+    },
+    defaultVariants: {
+        variant: "solid",
+        scrollable: false,
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - タブはユーザーが扱う情報をシンプルに保つためのディスクロージャーとして使用するコンポーネントです。
+ * - en: Tabs component is used as a disclosure to keep user-handled information simple.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList variant="solid">
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="password">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">Account Content</TabsContent>
+ *   <TabsContent value="password">Password Content</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @param {React.ComponentProps<typeof TabsPrimitive.Root>} props
+ */
+function Tabs(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(TabsPrimitive.Root, Object.assign({ "data-slot": "tabs", className: cn("flex flex-col gap-2", className) }, props)));
+}
+function TabsList(_a) {
+    var { className, variant, scrollable } = _a, props = __rest(_a, ["className", "variant", "scrollable"]);
+    return (_jsx(TabsListVariantContext.Provider, { value: variant !== null && variant !== void 0 ? variant : "solid", children: _jsx(TabsPrimitive.List, Object.assign({ "data-slot": "tabs-list", className: cn(tabsListVariants({ variant, scrollable }), className) }, props)) }));
+}
+/**
+ * タブトリガー（タブボタン）
+ * en: Tab trigger (tab button)
+ *
+ * @param {TabsTriggerProps} props
+ */
+const TabsTrigger = React.forwardRef((_a, ref) => {
+    var _b;
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    const contextVariant = useContext(TabsListVariantContext);
+    const effectiveVariant = ((_b = variant !== null && variant !== void 0 ? variant : contextVariant) !== null && _b !== void 0 ? _b : "solid");
+    return (_jsx(TabsPrimitive.Trigger, Object.assign({ ref: ref, "data-slot": "tabs-trigger", className: cn(tabsTriggerVariants({ variant: effectiveVariant }), className) }, props)));
+});
+TabsTrigger.displayName = "TabsTrigger";
+/**
+ * タブの内容表示エリア
+ * en: Tab content display area
+ */
+function TabsContent(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(TabsPrimitive.Content, Object.assign({ "data-slot": "tabs-content", className: cn("flex-1 outline-none", className) }, props)));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const tagVariants: (props?: ({
+    variant?: "solid" | "outline" | "subtle" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    status?: "neutral" | "negative" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
+    /**
+     * タグのラベルテキスト
+     * en: Label text displayed inside the tag
+     */
+    children: React.ReactNode;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - タグは特定の要素にラベリングをすることで情報を分類・整理したり、情報にステータスを付与するために使用するコンポーネントです。
+ * - en: The Tag component is used to categorize and organize information by labeling specific elements, or to assign status to information.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - 通知数や件数などの数値情報には `Tag` を使わず、`Badge` を使ってください。
+ *   en: Do not use `Tag` for numeric information such as notification counts. Use `Badge` instead.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <>
+ *   <Tag status="success">完了</Tag>
+ *   <Badge>3</Badge>
+ * </>
+ *
+ * // ❌ Wrong - 件数表示に Tag を使わない
+ * <Tag status="info">3件</Tag>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Tag variant="solid" size="md" status="info">情報</Tag>
+ * ```
+ *
+ * @param {TagProps} props
+ */
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;
+export { Tag, tagVariants };

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Tag } 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(Tag, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=558-29098", {
+    props: {
+        variant: figma.enum("variant", {
+            solid: "solid",
+            outline: "outline",
+            subtle: "subtle",
+        }),
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        status: figma.enum("status", {
+            neutral: "neutral",
+            info: "info",
+            success: "success",
+            warning: "warning",
+            negative: "negative",
+        }),
+        label: figma.string("label"),
+    },
+    example: props => (_jsx(Tag, { variant: props.variant, size: props.size, status: props.status, children: props.label })),
+});