sparkle-design 2.0.0-beta.0 → 2.0.0-beta.1

package/README.en.md

@@ -24,6 +24,25 @@ It implements [Goodpatch](https://goodpatch.com/)'s "Sparkle Design" system on t
 - 🎨 **Customizability** ... A dedicated CLI tool lets you apply the same customizations found in the Figma files. This makes it easy to spin up code for design systems built on Sparkle Design.
 - 🤖 **AI Friendly** ... Ships with skills and guard configurations for Claude Code, Cursor, and Codex. Maintain design system quality even during AI-assisted coding.
 
+## Versions, React and CLI support
+
+| Version | React | sparkle-design-cli | Status |
+|---|---|---|---|
+| **2.x** | 19+ | Latest (currently beta: `npx --yes sparkle-design-cli@beta`) | Current. New features and components land here only (currently in beta: `npm install sparkle-design@beta`) |
+| **1.x** | 18 (19 also works) | Latest (`npx --yes sparkle-design-cli`) | **Deprecated maintenance line.** Only bug and security fixes, plus token/style updates needed to stay compatible with the latest CLI |
+
+2.x receives `ref` as a regular prop (the React 19 approach) in every component, so on React 18 refs and Radix `asChild` compositions (e.g. Tooltip / Dialog triggers) don't work correctly. Use 1.x for React 18 projects (npm refuses to install 2.x into a React 18 project because of the peer dependency conflict).
+
+```bash
+npm install sparkle-design@1
+```
+
+Both lines use the latest CLI without pinning. When the tokens generated by the CLI change, 1.x follows, so 1.x looks the same as 2.x (only React 19-specific changes and new features stay out of 1.x).
+
+Even if you stay on 1.x, run `migrate` to check your app's legacy token classes when the tokens generated by the CLI change.
+
+To move from 1.x to 2.x, upgrade your project to React 19 first. `npx --yes sparkle-design-cli@beta migrate` reports how to replace legacy tokens (e.g. `text-neutral-900`) with the new ones (dry run by default; `--write` rewrites files).
+
 ## Quick Start
 
 ### 1. Set up

package/README.md

@@ -24,6 +24,25 @@ shadcn/ui をベースに、[グッドパッチ](https://goodpatch.com/)のデ
 - 🎨 **カスタマイズ性** ... 専用CLIツールを利用し、Figmaファイルと同等のカスタマイズを適用することが出来ます。これによりSparkle Designをベースとしたデザインシステムのコードを素早く用意することが出来ます。
 - 🤖 **AI フレンドリー** ... Claude Code / Cursor / Codex 向けのスキルとガード設定を同梱。AI コーディングでもデザインシステムの品質を維持できます。
 
+## バージョンと React・CLI の対応
+
+| バージョン | React | sparkle-design-cli | 状態 |
+|---|---|---|---|
+| **2.x** | 19 以上 | 最新（現在は beta: `npx --yes sparkle-design-cli@beta`） | 現行。新機能・新コンポーネントはこちらにだけ入ります（現在は beta: `npm install sparkle-design@beta`） |
+| **1.x** | 18（19 でも可） | 最新（`npx --yes sparkle-design-cli`） | **非推奨（deprecated）のメンテナンスライン**。不具合・セキュリティの修正と、最新の CLI と噛み合わせるためのトークン・スタイルの追従だけを行います |
+
+2.x は全コンポーネントで `ref` を通常の props として受け取る React 19 の方式に移行しているため、React 18 では `ref` や Radix の `asChild` 経由の組み合わせ（Tooltip / Dialog のトリガーなど）が正しく動きません。React 18 のプロジェクトは 1.x をお使いください（2.x を React 18 のプロジェクトに入れると、npm では peer 依存の衝突で止まります）。
+
+```bash
+npm install sparkle-design@1
+```
+
+CLI はどちらのバージョンでも固定せず最新を使います。CLI が生成するトークンが変わるときは 1.x も追従するので、1.x でも見た目は 2.x と同じデザインになります（1.x に入らないのは React 19 前提の変更と新機能だけです）。
+
+1.x を使い続ける場合も、CLI が生成するトークンが変わったときは、アプリ側で使っている旧トークンのクラスを `migrate` で確認してください。
+
+1.x から 2.x へは、プロジェクトを React 19 に上げてから移行してください。旧トークン（`text-neutral-900` など）から新トークンへの置き換えは `npx --yes sparkle-design-cli@beta migrate` で確認できます（既定は変更内容の表示のみ。`--write` で書き換え）。
+
 ## クイックスタート
 
 ### 1. セットアップ

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

@@ -7,7 +7,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
     variant?: "normal" | "emphasis" | null | undefined;
     isNumberVisible?: boolean | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | null | undefined;
     isGapped?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeVariants = VariantProps<typeof badgeVariants>;

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils.js";
-const badgeVariants = cva("inline-flex items-center text-text-inverse text-center justify-center rounded-full transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-ring focus:ring-offset-2", {
+const badgeVariants = cva("inline-flex overflow-hidden items-center text-text-inverse text-center justify-center rounded-full transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-ring focus:ring-offset-2", {
     variants: {
         variant: {
             normal: "bg-surface-primary-high-enabled",
@@ -23,7 +23,8 @@ const badgeVariants = cva("inline-flex items-center text-text-inverse text-cente
             false: "",
         },
         size: {
-            xs: "w-2 h-2 min-w-2",
+            "2xs": "w-2 h-2 min-w-2",
+            xs: "w-3.5 h-3.5 min-w-3.5",
             sm: "w-4 h-4 min-w-4",
             md: "min-w-6 py-0.5 px-1.5 character-1-bold-mono",
             lg: "min-w-8 py-1 px-1.5 character-3-bold-mono",
@@ -37,9 +38,14 @@ const badgeVariants = cva("inline-flex items-center text-text-inverse text-cente
         // isGappedのボーダー設定
         {
             isGapped: true,
-            size: "xs",
+            size: "2xs",
             class: "outline-border-inverse outline-2",
         },
+        {
+            isGapped: true,
+            size: "xs",
+            class: "outline-border-inverse outline-4",
+        },
         {
             isGapped: true,
             size: "sm",
@@ -108,7 +114,7 @@ function Badge(_a) {
     var { className, isNumberVisible = true, size, variant = "normal", isGapped = false, children, role = "status" } = _a, props = __rest(_a, ["className", "isNumberVisible", "size", "variant", "isGapped", "children", "role"]);
     // sm以下のサイズの場合は、文字を非表示にする
     // en: Hide text for sizes sm and below
-    if (size === "sm" || size === "xs") {
+    if (size === "sm" || size === "xs" || size === "2xs") {
         isNumberVisible = false;
     }
     // childrenがない場合はisNumberVisibleがfalseの扱いにする

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

@@ -37,9 +37,9 @@ const buttonVariants = cva([
             ghost: "",
         },
         size: {
-            sm: "h-8 min-w-16 px-3 py-1 character-2-bold-pro",
-            md: "h-10 min-w-20 px-4 py-1.5 character-3-bold-pro",
-            lg: "h-12 min-w-24 px-5 py-2 character-4-bold-pro",
+            sm: "h-8 min-w-16 px-3 py-1 character-1-bold-pro",
+            md: "h-10 min-w-20 px-4 py-1.5 character-2-bold-pro",
+            lg: "h-12 min-w-24 px-5 py-2 character-3-bold-pro",
         },
         theme: {
             primary: "",
@@ -368,7 +368,7 @@ function Button(_a) {
             case "sm":
                 return 4;
             case "lg":
-                return 6;
+                return 7;
             default:
                 return 5;
         }
@@ -531,7 +531,7 @@ function Button(_a) {
             theme,
             isLoading,
             className,
-        })), onClickCapture: handleClickCapture, onAuxClickCapture: handleAuxClickCapture, onKeyDownCapture: handleKeyDownCapture, onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: asChild ? (slottedChildren) : (_jsxs(_Fragment, { children: [prefixIcon && (_jsx(Icon, { icon: prefixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) })), isLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex", children: _jsx(Spinner, { size: getIconSize(), className: "text-current" }) }), _jsx("span", { className: "opacity-0", children: children })] })) : (_jsx("span", { className: "px-1", children: children })), suffixIcon && (_jsx(Icon, { icon: suffixIcon, size: getIconSize(), className: cn({ "opacity-0": isLoading }) }))] })) })));
+        })), onClickCapture: handleClickCapture, onAuxClickCapture: handleAuxClickCapture, onKeyDownCapture: handleKeyDownCapture, onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: asChild ? (slottedChildren) : (_jsxs(_Fragment, { children: [prefixIcon && (_jsx(Icon, { icon: prefixIcon, size: getIconSize(), className: cn("text-current", { "opacity-0": isLoading }) })), isLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex", children: _jsx(Spinner, { size: getIconSize(), className: "text-current" }) }), _jsx("span", { className: "opacity-0", children: children })] })) : (_jsx("span", { className: "px-1", children: children })), suffixIcon && (_jsx(Icon, { icon: suffixIcon, size: getIconSize(), className: cn("text-current", { "opacity-0": isLoading }) }))] })) })));
 }
 Button.displayName = "Button";
 export { Button, buttonVariants };

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

@@ -20,15 +20,17 @@ import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../components/ui/icon/index.js";
-const checkboxItemVariants = cva([
-    "relative rounded-sm transition-colors flex items-center justify-center cursor-pointer",
+const checkboxItemVariants = cva(
+// 表示寸法を維持しつつ、疑似要素で横24pxの操作領域を確保。en: Keep visuals, expand hit width to 24px.
+[
+    "relative before:absolute before:inset-y-0 before:left-1/2 before:w-6 before:-translate-x-1/2 before:content-[''] rounded-sm transition-colors flex items-center justify-center cursor-pointer",
     "focus:outline-none",
 ].join(" "), {
     variants: {
         size: {
-            sm: "h-8 w-8",
-            md: "h-10 w-10",
-            lg: "h-12 w-12",
+            sm: "h-8 w-4",
+            md: "h-10 w-[18px]",
+            lg: "h-12 w-5",
         },
         isDisabled: {
             true: "cursor-not-allowed",
@@ -47,8 +49,8 @@ const checkboxRootVariants = cva([
     variants: {
         size: {
             sm: "h-4 w-4",
-            md: "h-5 w-5",
-            lg: "h-6 w-6",
+            md: "h-[18px] w-[18px]",
+            lg: "h-5 w-5",
         },
         isInvalid: {
             true: [
@@ -115,12 +117,12 @@ const checkboxLabelVariants = cva("cursor-pointer", {
     variants: {
         size: {
             sm: "character-2-regular-pro",
-            md: "character-3-regular-pro",
-            lg: "character-4-regular-pro",
+            md: "character-2-regular-pro",
+            lg: "character-3-regular-pro",
         },
         isDisabled: {
             true: "text-text-neutral-disabled cursor-not-allowed",
-            false: "text-text-neutral-middle",
+            false: "text-text-neutral-middle group-hover/checkbox:text-text-neutral-high",
         },
     },
     defaultVariants: {
@@ -170,22 +172,22 @@ function Checkbox(_a) {
     }, [isControlled, onCheckedChange]);
     // isDisabledとdisabledの組み合わせで無効状態を管理
     const isCheckboxDisabled = isDisabled || disabled;
-    return (_jsxs("div", { className: "flex items-center", children: [_jsx(CheckboxPrimitive.Root, Object.assign({ "data-slot": "checkbox", id: id, "aria-invalid": isInvalid || undefined, className: cn(checkboxItemVariants({ size, isDisabled: isCheckboxDisabled }), "group", className), disabled: isCheckboxDisabled, checked: checked, onCheckedChange: handleChange }, props, { children: _jsx("div", { className: cn(checkboxRootVariants({
+    return (_jsxs("div", { className: cn("group/checkbox flex items-center", size === "lg" ? "gap-2" : "gap-1.5"), children: [_jsx(CheckboxPrimitive.Root, Object.assign({ "data-slot": "checkbox", id: id, "aria-invalid": isInvalid || undefined, className: cn(checkboxItemVariants({ size, isDisabled: isCheckboxDisabled }), "group", className), disabled: isCheckboxDisabled, checked: checked, onCheckedChange: handleChange }, props, { children: _jsx("div", { className: cn(checkboxRootVariants({
                         size,
                         isInvalid,
                         isDisabled: isCheckboxDisabled,
-                    })), children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-surface-base-0", children: _jsx(Icon, { icon: checked === "indeterminate"
+                    })), children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-surface-base-0", children: _jsx(Icon, { className: "text-current", icon: checked === "indeterminate"
                                 ? "check_indeterminate_small"
                                 : "check", size: (function () {
                                 switch (size) {
                                     case "sm":
                                         return 3;
                                     case "md":
-                                        return 5;
+                                        return 4;
                                     case "lg":
-                                        return 6;
-                                    default:
                                         return 5;
+                                    default:
+                                        return 4;
                                 }
                             })() }) }) }) })), label && (_jsx("label", { htmlFor: id, className: cn(checkboxLabelVariants({ size, isDisabled: isCheckboxDisabled })), children: label }))] }));
 }

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

@@ -18,6 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog as DialogPrimitive } from "radix-ui";
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../../../components/ui/button/index.js";
+import { Overlay } from "../overlay/index.js";
 import { Icon } from "../icon/index.js";
 /**
  * **概要 / Overview**
@@ -90,7 +91,7 @@ function DialogPortal(_a) {
 }
 function DialogOverlay(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Overlay, Object.assign({ "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className) }, props)));
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({}, props, { asChild: true, children: _jsx(Overlay, { "data-slot": "dialog-overlay", className: cn("z-50", className) }) })));
 }
 function DialogContent(_a) {
     var { className, children, showCloseButton = true } = _a, props = __rest(_a, ["className", "children", "showCloseButton"]);
@@ -133,7 +134,7 @@ function DialogDescription(_a) {
  */
 function DialogCancel(_a) {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsx(DialogPrimitive.Cancel, Object.assign({ "data-slot": "dialog-cancel", asChild: true }, props, { children: _jsx(Button, { variant: "ghost", theme: "neutral", size: "sm", className: className, children: children }) })));
+    return (_jsx(DialogPrimitive.Cancel, Object.assign({ "data-slot": "dialog-cancel", asChild: true }, props, { children: _jsx(Button, { variant: "ghost", theme: "neutral", size: "md", className: className, children: children }) })));
 }
 /**
  * **アンチパターン / Anti-patterns**
@@ -152,6 +153,6 @@ function DialogCancel(_a) {
  */
 function DialogAction(_a) {
     var { className, children, theme = "primary", variant = "solid" } = _a, props = __rest(_a, ["className", "children", "theme", "variant"]);
-    return (_jsx(DialogPrimitive.Action, Object.assign({ "data-slot": "dialog-action", asChild: true }, props, { children: _jsx(Button, { variant: variant, theme: theme, size: "sm", className: className, children: children }) })));
+    return (_jsx(DialogPrimitive.Action, Object.assign({ "data-slot": "dialog-action", asChild: true }, props, { children: _jsx(Button, { variant: variant, theme: theme, size: "md", className: className, children: children }) })));
 }
 export { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogIcon, DialogTitle, DialogTrigger, DialogCancel, DialogAction, };

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

@@ -219,6 +219,6 @@ function FormErrorMessage(_a) {
     if (!body) {
         return null;
     }
-    return (_jsxs("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("flex gap-1 items-center text-text-negative-enabled character-1-regular-pro", className) }, props, { children: [_jsx(Icon, { icon: "error", size: 3 }), body] })));
+    return (_jsxs("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("flex gap-1 items-center text-text-negative-enabled character-1-regular-pro", className) }, props, { children: [_jsx(Icon, { icon: "error", size: 3, className: "text-object-negative-enabled" }), body] })));
 }
 export { useFormField, Form, FormItem, FormHeader, FormControl, FormHelperMessage, FormErrorMessage, FormField, };

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

@@ -4,8 +4,8 @@
  */
 import * as React from "react";
 /**
- * アイコンサイズのスケール値（1-12）
- * en: Icon size scale values (1-12)
+ * アイコンサイズのスケール値（1-13）
+ * en: Icon size scale values (1-13)
  *
  * | scale | px  |
  * |-------|-----|
@@ -14,15 +14,16 @@ import * as React from "react";
  * | 3     | 16  |
  * | 4     | 18  |
  * | 5     | 20  |
- * | 6     | 24  |
- * | 7     | 28  |
- * | 8     | 32  |
- * | 9     | 36  |
- * | 10    | 42  |
- * | 11    | 48  |
- * | 12    | 54  |
+ * | 6     | 22  |
+ * | 7     | 24  |
+ * | 8     | 28  |
+ * | 9     | 32  |
+ * | 10    | 36  |
+ * | 11    | 42  |
+ * | 12    | 48  |
+ * | 13    | 54  |
  */
-export type IconSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type IconSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
 export interface IconProps extends React.ComponentProps<"span"> {
     /**
      * 表示するアイコン名
@@ -30,8 +31,8 @@ export interface IconProps extends React.ComponentProps<"span"> {
      */
     icon: string;
     /**
-     * アイコンサイズ（スケール値 1-12）
-     * en: Size of the icon (scale value 1-12)
+     * アイコンサイズ（スケール値 1-13）
+     * en: Size of the icon (scale value 1-13)
      * @see IconSize
      */
     size?: IconSize;
@@ -63,7 +64,7 @@ export interface IconProps extends React.ComponentProps<"span"> {
  * **使用例 / Usage Example**
  *
  * ```tsx
- * <Icon icon="check" size={6} fill={true} />
+ * <Icon icon="check" size={7} fill={true} />
  * ```
  *
  * @param {IconProps} props

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

@@ -33,7 +33,7 @@ import { cn } from "../../../lib/utils.js";
  * **使用例 / Usage Example**
  *
  * ```tsx
- * <Icon icon="check" size={6} fill={true} />
+ * <Icon icon="check" size={7} fill={true} />
  * ```
  *
  * @param {IconProps} props
@@ -52,6 +52,6 @@ export function Icon(_a) {
         // font-weight が継承されると疑似ボールド（faux bold）で太く描画されるため明示する。
         // en: Icons are unified at weight 500. Set font-weight explicitly so an inherited
         // font-weight (e.g. bold Button labels) does not trigger faux-bold rendering.
-        className: cn(iconTypographyClass, "select-none font-medium", className), "aria-hidden": "true" }, props, { children: icon })));
+        className: cn(iconTypographyClass, "select-none font-medium text-object-neutral-high", className), "aria-hidden": "true" }, props, { children: icon })));
 }
 Icon.displayName = "Icon";

package/dist/components/ui/icon-button/index.js

@@ -443,9 +443,9 @@ function IconButton(_a) {
             case "sm":
                 return 5;
             case "lg":
-                return 7;
+                return 8;
             default:
-                return 6;
+                return 7;
         }
     };
     const { onClick, onKeyDown, onClickCapture, onKeyDownCapture, onAuxClickCapture, type, form, formAction, formEncType, formMethod, formNoValidate, formTarget, value, popoverTarget, popoverTargetAction, "aria-disabled": ariaDisabled } = props, restProps = __rest(props, ["onClick", "onKeyDown", "onClickCapture", "onKeyDownCapture", "onAuxClickCapture", "type", "form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "value", "popoverTarget", "popoverTargetAction", "aria-disabled"]);
@@ -553,7 +553,7 @@ function IconButton(_a) {
             // aria-disabled as well.
             isDisabled: Boolean(isDisabled || disabled) || isSoftDisabled,
             className,
-        })), disabled: canUseButtonProps ? isIconButtonDisabled : undefined, onClickCapture: handleClickCapture, onAuxClickCapture: handleAuxClickCapture, onKeyDownCapture: handleKeyDownCapture, onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: [asChild && (_jsx(SlotPrimitive.Slottable, { children: slottedChildren })), isLoading ? (_jsx(Spinner, { size: getIconSize(), className: "text-current" })) : (_jsx(Icon, { icon: icon, size: getIconSize() }))] })));
+        })), disabled: canUseButtonProps ? isIconButtonDisabled : undefined, onClickCapture: handleClickCapture, onAuxClickCapture: handleAuxClickCapture, onKeyDownCapture: handleKeyDownCapture, onClick: handleClick, onKeyDown: handleKeyDown }, restProps, { children: [asChild && (_jsx(SlotPrimitive.Slottable, { children: slottedChildren })), isLoading ? (_jsx(Spinner, { size: getIconSize(), className: "text-current" })) : (_jsx(Icon, { icon: icon, size: getIconSize(), className: "text-current" }))] })));
 }
 IconButton.displayName = "IconButton";
 export { IconButton, iconButtonVariants };

package/dist/components/ui/inline-message/index.js

@@ -94,7 +94,7 @@ function InlineMessage(_a) {
     const colorClass = status
         ? statusColorClasses[status]
         : statusColorClasses.info;
-    return (_jsx(InlineMessageContext.Provider, { value: contextValue, children: _jsxs("div", Object.assign({ ref: ref, role: "alert", "aria-labelledby": hasTitle ? titleId : undefined, "aria-describedby": hasDesc ? descId : undefined, className: cn(inlineMessageVariants({ status }), className) }, props, { children: [_jsx("span", { className: "inline-flex p-1 items-center justify-center", "aria-hidden": "true", children: _jsx(Icon, { icon: statusIcon, size: 6, fill: false, className: cn(colorClass) }) }), _jsx("div", { className: "flex flex-col flex-1 min-h-8", children: children }), isCloseTrigger && onClose && (_jsx(IconButton, { icon: "close", size: "sm", variant: "ghost", theme: "neutral", onClick: onClose, "aria-label": "\u9589\u3058\u308B", className: "shrink-0" }))] })) }));
+    return (_jsx(InlineMessageContext.Provider, { value: contextValue, children: _jsxs("div", Object.assign({ ref: ref, role: "alert", "aria-labelledby": hasTitle ? titleId : undefined, "aria-describedby": hasDesc ? descId : undefined, className: cn(inlineMessageVariants({ status }), className) }, props, { children: [_jsx("span", { className: "inline-flex p-1 items-center justify-center", "aria-hidden": "true", children: _jsx(Icon, { icon: statusIcon, size: 7, fill: false, className: cn(colorClass) }) }), _jsx("div", { className: "flex flex-col flex-1 min-h-8", children: children }), isCloseTrigger && onClose && (_jsx(IconButton, { icon: "close", size: "sm", variant: "ghost", theme: "neutral", onClick: onClose, "aria-label": "\u9589\u3058\u308B", className: "shrink-0" }))] })) }));
 }
 InlineMessage.displayName = "InlineMessage";
 /**

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

@@ -25,8 +25,8 @@ const inputVariants = cva("flex gap-0 items-center w-full rounded-action border
     variants: {
         size: {
             sm: "h-8 character-2-regular-pro",
-            md: "h-10 character-3-regular-pro",
-            lg: "h-12 character-4-regular-pro",
+            md: "h-10 character-2-regular-pro",
+            lg: "h-12 character-3-regular-pro",
         },
         isInvalid: {
             true: "border-border-negative-extra-high-enabled",
@@ -236,12 +236,16 @@ function Input(_a) {
             isDisabled: isInputDisabled,
             isFocused: isInputFocused && !isIconButtonFocused,
             className,
-        }), !isInputDisabled && "cursor-text" // 入力可能な場合はテキストカーソルを表示
+        }), isInputDisabled &&
+            !isInvalid &&
+            !isTrigger &&
+            "border-border-neutral-middle", !isInputDisabled && "cursor-text" // 入力可能な場合はテキストカーソルを表示
         ), 
         // NOTE: not supportエラーがLintで出るためコメントアウト
         // aria-disabled={isInputDisabled}
         // aria-invalid={isInvalid === null ? undefined : isInvalid}
-        onClick: handleContainerClick, role: "presentation", tabIndex: -1, children: [_jsx("input", Object.assign({ ref: mergedInputRef, disabled: isInputDisabled, "aria-invalid": isInvalid || undefined, className: cn("w-full h-full bg-transparent border-none outline-hidden focus:outline-hidden", "text-text-neutral-high placeholder:text-text-neutral-low px-2", isInputDisabled &&
+        onClick: handleContainerClick, role: "presentation", tabIndex: -1, children: [_jsx("input", Object.assign({ ref: mergedInputRef, disabled: isInputDisabled, "aria-invalid": isInvalid || undefined, className: cn("w-full h-full bg-transparent border-none outline-hidden focus:outline-hidden", "text-text-neutral-high placeholder:text-text-neutral-low pr-2", size === "lg" ? "pl-3" : size === "sm" ? "pl-1.5" : "pl-2", !isTrigger &&
+                    (size === "lg" ? "pr-3" : size === "sm" ? "pr-1.5" : "pr-2"), isInputDisabled &&
                     "cursor-not-allowed text-text-neutral-disabled placeholder:text-text-neutral-disabled"), onChange: handleChange, onFocus: handleInputFocus, onBlur: handleInputBlur, defaultValue: defaultValue, value: value, "aria-disabled": isInputDisabled }, props)), isTrigger && (_jsx(IconButton
             // triggerProps を先に展開し、専用 props (triggerAriaLabel / onIconButtonClick)
             // と内部制御プロパティで上書きする

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

@@ -68,13 +68,13 @@ export function Link(_a) {
     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);
+    const parsed = characterSizeMatch ? parseInt(characterSizeMatch[1], 10) : 2;
+    const characterSize = (parsed >= 1 && parsed <= 12 ? parsed : 2);
     // character クラスの生成
     const characterSizeClass = hasCharacterClass
         ? "" // 外部で指定されている場合は付与しない
         : `character-${characterSize}-regular-pro`;
-    const linkClassName = cn("inline group", characterSizeClass, className);
+    const linkClassName = cn("inline group rounded-lg focus-visible:outline-2 focus-visible:outline-border-ring focus-visible:outline-offset-2", characterSizeClass, className);
     if (asChild &&
         typeof process !== "undefined" &&
         process.env.NODE_ENV !== "production" &&
@@ -84,10 +84,12 @@ export function Link(_a) {
             console.warn("[Link] asChild の子要素にはリンク要素（<a> や next/link 等）を渡してください。<span> や <div> を渡すとアクセシビリティが損なわれます。");
         }
     }
-    const linkContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "transition-colors text-text-primary-enabled group-hover:text-text-primary-hover 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-object-primary-enabled group-hover:text-object-primary-hover" }))] }));
+    const linkContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "transition-colors text-text-primary-enabled group-hover:text-text-primary-hover underline decoration-current underline-offset-2", children: children }), isExternalLink && (_jsx(Icon, { icon: "open_in_new", size: (characterSize >= 6 ? characterSize + 1 : characterSize), className: "ml-1 align-middle inline-block text-object-primary-enabled group-hover:text-object-primary-hover" }))] }));
     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-text-primary-enabled group-hover:text-text-primary-hover 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-object-primary-enabled group-hover:text-object-primary-hover" }))] }))
+                ? React.cloneElement(children, {}, _jsxs(_Fragment, { children: [_jsx("span", { className: "transition-colors text-text-primary-enabled group-hover:text-text-primary-hover underline decoration-current underline-offset-2", children: children.props.children }), isExternalLink && (_jsx(Icon, { icon: "open_in_new", size: (characterSize >= 6
+                                ? characterSize + 1
+                                : characterSize), className: "ml-1 align-middle inline-block text-object-primary-enabled group-hover:text-object-primary-hover" }))] }))
                 : linkContent })));
     }
     return (_jsx("a", Object.assign({ ref: ref, className: linkClassName }, props, { children: linkContent })));

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

@@ -18,6 +18,7 @@ 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 { Overlay } from "../overlay/index.js";
 import { IconButton } from "../icon-button/index.js";
 /**
  * **概要 / Overview**
@@ -95,12 +96,12 @@ function ModalTitle(_a) {
 /// モーダルのクローズボタン
 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)) }));
+    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(IconButton, Object.assign({ icon: "close", "data-slot": "modal-close", size: "sm", 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)));
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({}, props, { asChild: true, children: _jsx(Overlay, { "data-slot": "modal-overlay", className: cn("z-50", className) }) })));
 }
 /// モーダルの本体
 function ModalContent(_a) {

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

@@ -28,8 +28,8 @@ const labelVariants = cva("cursor-pointer", {
     variants: {
         size: {
             sm: "character-2-regular-pro",
-            md: "character-3-regular-pro",
-            lg: "character-4-regular-pro",
+            md: "character-2-regular-pro",
+            lg: "character-3-regular-pro",
         },
         isDisabled: {
             true: "text-text-neutral-disabled cursor-not-allowed",
@@ -41,15 +41,17 @@ const labelVariants = cva("cursor-pointer", {
         isDisabled: false,
     },
 });
-const radioItemVariants = cva([
-    "relative rounded-full transition-colors flex items-center justify-center cursor-pointer",
+const radioItemVariants = cva(
+// 表示寸法を維持しつつ、疑似要素で横24pxの操作領域を確保。en: Keep visuals, expand hit width to 24px.
+[
+    "relative before:absolute before:inset-y-0 before:left-1/2 before:w-6 before:-translate-x-1/2 before:content-[''] 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",
+            sm: "h-8 w-4",
+            md: "h-10 w-[18px]",
+            lg: "h-12 w-5",
         },
         isDisabled: {
             true: "cursor-not-allowed",
@@ -68,8 +70,8 @@ const radioIndicatorVariants = cva([
     variants: {
         size: {
             sm: "h-4 w-4",
-            md: "h-5 w-5",
-            lg: "h-6 w-6",
+            md: "h-[18px] w-[18px]",
+            lg: "h-5 w-5",
         },
         isInvalid: {
             true: "border-object-negative-enabled [.group[data-state=checked]_&]:border-object-negative-enabled",
@@ -110,8 +112,8 @@ const radioIndicatorDotVariants = cva("rounded-full transition-colors flex items
     variants: {
         size: {
             sm: "h-4 w-4",
-            md: "h-5 w-5",
-            lg: "h-6 w-6",
+            md: "h-[18px] w-[18px]",
+            lg: "h-5 w-5",
         },
         isInvalid: {
             true: "[.group[data-state=checked]_&]:bg-object-negative-enabled",
@@ -154,8 +156,8 @@ const radioIndicatorDotInnerVariants = cva("rounded-full bg-surface-base-0", {
     variants: {
         size: {
             sm: "h-2 w-2",
-            md: "h-2.5 w-2.5",
-            lg: "h-3 w-3",
+            md: "h-[9px] w-[9px]",
+            lg: "h-2.5 w-2.5",
         },
     },
     defaultVariants: {
@@ -264,7 +266,7 @@ Radio.displayName = RadioPrimitive.Root.displayName;
 function RadioItem(_a) {
     var { className, size = "md", isInvalid: isInvalidProp = false, disabled = false, label, id } = _a, props = __rest(_a, ["className", "size", "isInvalid", "disabled", "label", "id"]);
     const isInvalid = React.useContext(RadioInvalidContext) || !!isInvalidProp;
-    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({
+    return (_jsxs("div", { className: cn("flex items-center", size === "lg" ? "gap-2" : "gap-1.5"), 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,

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

@@ -26,9 +26,11 @@ const selectTriggerVariants = cva([
 ].join(" "), {
     variants: {
         size: {
-            sm: "h-8 py-1 pl-2 pr-1 gap-2 character-2-regular-pro",
-            md: "h-10 py-1 pl-3 pr-1.5 gap-2 character-3-regular-pro",
-            lg: "h-12 py-1 pl-4 pr-2 gap-2 character-4-regular-pro",
+            // Figma の内側6px + 外側4pxを合成した10px。en: Combine inner 6px and outer 4px.
+            // sparkle-disable-next-line use-figma-spacing-scale
+            sm: "h-8 py-1 pl-2.5 pr-1.5 gap-2 character-2-regular-pro",
+            md: "h-10 py-1 pl-3 pr-2 gap-2 character-2-regular-pro",
+            lg: "h-12 py-1 pl-4 pr-2 gap-2 character-3-regular-pro",
         },
         isInvalid: {
             true: "bg-surface-base-0 border-border-negative-extra-high-enabled hover:border-border-negative-extra-high-hover data-[state=open]:border-border-negative-extra-high-hover",
@@ -56,8 +58,8 @@ const selectIconVariants = cva("", {
     variants: {
         size: {
             sm: "icon-5-fill-0",
-            md: "icon-6-fill-0",
-            lg: "icon-7-fill-0",
+            md: "icon-7-fill-0",
+            lg: "icon-8-fill-0",
         },
         isDisabled: {
             true: "text-object-neutral-disabled",
@@ -228,7 +230,7 @@ function SelectItem(_a) {
             "py-1.5 pl-8 pr-2 text-sm",
             "character-1-regular-pro text-text-neutral-middle",
             "outline-none focus:bg-neutral-100 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
-        ].join(" "), className) }, props, { children: [_jsx(SelectPrimitive.ItemIndicator, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Icon, { icon: "check", size: 4 }) }), _jsx(SelectPrimitive.ItemText, { className: cn("flex-1", textClassName), children: children })] })));
+        ].join(" "), className) }, props, { children: [_jsx(SelectPrimitive.ItemIndicator, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Icon, { icon: "check", size: 4, className: "text-current" }) }), _jsx(SelectPrimitive.ItemText, { className: cn("flex-1", textClassName), children: children })] })));
 }
 /**
  * **概要 / Overview**
@@ -260,7 +262,7 @@ function SelectSeparator(_a) {
  */
 function SelectScrollUpButton(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SelectPrimitive.ScrollUpButton, Object.assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(Icon, { icon: "expand_less", size: 4 }) })));
+    return (_jsx(SelectPrimitive.ScrollUpButton, Object.assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(Icon, { icon: "expand_less", size: 4, className: "text-object-neutral-middle" }) })));
 }
 /**
  * **概要 / Overview**
@@ -276,6 +278,6 @@ function SelectScrollUpButton(_a) {
  */
 function SelectScrollDownButton(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SelectPrimitive.ScrollDownButton, Object.assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(Icon, { icon: "expand_more", size: 4 }) })));
+    return (_jsx(SelectPrimitive.ScrollDownButton, Object.assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(Icon, { icon: "expand_more", size: 4, className: "text-object-neutral-middle" }) })));
 }
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

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

@@ -41,7 +41,7 @@ const sliderRangeVariants = cva("absolute h-full bg-object-info", {
     },
 });
 const sliderThumbVariants = cva([
-    "relative block rounded-full border border-object-neutral-low bg-surface-base-0 shadow-raise cursor-pointer",
+    "relative block rounded-full border border-object-neutral-low bg-surface-base-0 shadow-base cursor-pointer",
     // 半透明の状態色は白地に重ねる（つまみの下のトラックを透かさない）
     // en: Layer translucent state colors over the white fill so the track does not show through
     "ring-offset-background transition-colors hover:border-object-neutral-middle hover:bg-linear-to-r hover:from-surface-neutral-low-hover hover:to-surface-neutral-low-hover",
@@ -54,7 +54,7 @@ const sliderThumbVariants = cva([
 ].join(" "), {
     variants: {
         isDisabled: {
-            true: "pointer-events-none bg-surface-neutral-middle-disabled bg-none border-none shadow-base cursor-not-allowed",
+            true: "pointer-events-none bg-surface-neutral-middle-disabled bg-none border-object-neutral-low shadow-base cursor-not-allowed",
         },
     },
     defaultVariants: {

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

@@ -6,8 +6,8 @@ import React from "react";
 import { type IconSize } from "@/components/ui/icon";
 export interface SpinnerProps extends React.ComponentProps<"span"> {
     /**
-     * スピナーのサイズ（スケール値 1-12）
-     * en: Size of the spinner (scale value 1-12)
+     * スピナーのサイズ（スケール値 1-13）
+     * en: Size of the spinner (scale value 1-13)
      * @see IconSize
      */
     size?: IconSize;
@@ -20,12 +20,12 @@ export interface SpinnerProps extends React.ComponentProps<"span"> {
  *
  * **アンチパターン / Anti-patterns**
  *
- * - `size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-12）を使用してください。
- *   en: Do not pass pixel values to `size`. Use scale values (1-12) instead.
+ * - `size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-13）を使用してください。
+ *   en: Do not pass pixel values to `size`. Use scale values (1-13) instead.
  *
  * ```tsx
  * // ✅ Correct - スケール値
- * <Spinner size={6} />
+ * <Spinner size={7} />
  *
  * // ❌ Wrong - ピクセル値
  * <Spinner size={24} />
@@ -34,7 +34,7 @@ export interface SpinnerProps extends React.ComponentProps<"span"> {
  * **使用例 / Usage Example**
  *
  * ```tsx
- * <Spinner size={6} />
+ * <Spinner size={7} />
  * ```
  *
  * @param {SpinnerProps} props

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

@@ -20,12 +20,12 @@ import { Icon } from "../../../components/ui/icon/index.js";
  *
  * **アンチパターン / Anti-patterns**
  *
- * - `size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-12）を使用してください。
- *   en: Do not pass pixel values to `size`. Use scale values (1-12) instead.
+ * - `size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-13）を使用してください。
+ *   en: Do not pass pixel values to `size`. Use scale values (1-13) instead.
  *
  * ```tsx
  * // ✅ Correct - スケール値
- * <Spinner size={6} />
+ * <Spinner size={7} />
  *
  * // ❌ Wrong - ピクセル値
  * <Spinner size={24} />
@@ -34,7 +34,7 @@ import { Icon } from "../../../components/ui/icon/index.js";
  * **使用例 / Usage Example**
  *
  * ```tsx
- * <Spinner size={6} />
+ * <Spinner size={7} />
  * ```
  *
  * @param {SpinnerProps} props

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

@@ -26,8 +26,8 @@ const TabsListVariantContext = createContext(undefined);
  */
 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",
+    "px-3 py-2 character-2-regular-pro data-[state=active]:[font-weight:var(--font-weight-char-bold)]!",
+    "relative focus-visible:outline-none focus-visible:z-20 before:pointer-events-none before:absolute before:inset-[-4px] before:rounded-lg before:border-2 before:border-border-ring before:opacity-0 focus-visible:before:opacity-100",
 ], {
     variants: {
         variant: {
@@ -102,7 +102,7 @@ const tabsListVariants = cva(["relative inline-flex items-center"], {
         },
         scrollable: {
             true: [
-                "w-full max-w-full justify-start gap-2 overflow-x-auto overflow-y-visible",
+                "w-full max-w-full justify-start gap-2 overflow-x-auto overflow-y-visible p-1",
                 "whitespace-nowrap overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
             ].join(" "),
             false: "w-fit justify-center gap-2 overflow-visible",

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

@@ -10,6 +10,8 @@ declare const tagVariants: (props?: ({
     status?: "neutral" | "negative" | "info" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends React.ComponentProps<"div">, VariantProps<typeof tagVariants> {
+    /** ステータスドットの表示 / en: Whether to show a status dot */
+    body?: "none" | "status";
     /**
      * タグのラベルテキスト
      * en: Label text displayed inside the tag
@@ -46,7 +48,7 @@ export interface TagProps extends React.ComponentProps<"div">, VariantProps<type
  *
  * @param {TagProps} props
  */
-declare function Tag({ className, variant, size, status, children, ref, ...props }: TagProps): React.JSX.Element;
+declare function Tag({ className, variant, size, status, body, children, ref, ...props }: TagProps): React.JSX.Element;
 declare namespace Tag {
     var displayName: string;
 }

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

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils.js";
 // タグのスタイル定義
-const tagVariants = cva("inline-flex items-center justify-center rounded-notice h-fit min-w-0", {
+const tagVariants = cva("inline-flex items-center justify-center rounded-full h-fit min-w-0", {
     variants: {
         variant: {
             solid: "",
@@ -21,9 +21,9 @@ const tagVariants = cva("inline-flex items-center justify-center rounded-notice
             subtle: "",
         },
         size: {
-            sm: "py-0 px-2 min-w-10 character-1-bold-pro",
-            md: "py-0.5 px-2 min-w-12 character-1-bold-pro",
-            lg: "py-1 px-2 min-w-14 character-2-bold-pro",
+            sm: "min-h-5 py-1 px-1.5 min-w-10 character-1-bold-pro",
+            md: "min-h-6 py-1.5 px-2 min-w-12 character-1-bold-pro",
+            lg: "min-h-7 py-1.5 px-2 min-w-14 character-2-bold-pro",
         },
         status: {
             neutral: "",
@@ -70,31 +70,31 @@ const tagVariants = cva("inline-flex items-center justify-center rounded-notice
         {
             variant: "outline",
             status: "neutral",
-            className: "border-object-neutral-middle text-text-neutral-middle bg-surface-base-0",
+            className: "border-border-neutral-middle text-text-neutral-middle bg-surface-base-0",
         },
         // info + outline
         {
             variant: "outline",
             status: "info",
-            className: "border-object-info text-text-info bg-surface-base-0",
+            className: "border-border-info text-text-info bg-surface-base-0",
         },
         // success + outline
         {
             variant: "outline",
             status: "success",
-            className: "border-object-success text-text-success bg-surface-base-0",
+            className: "border-border-success text-text-success bg-surface-base-0",
         },
         // warning + outline
         {
             variant: "outline",
             status: "warning",
-            className: "border-object-warning text-text-warning bg-surface-base-0",
+            className: "border-border-warning text-text-warning bg-surface-base-0",
         },
         // negative + outline
         {
             variant: "outline",
             status: "negative",
-            className: "border-object-negative-enabled text-text-negative-enabled bg-surface-base-0",
+            className: "border-border-negative-high text-text-negative-enabled bg-surface-base-0",
         },
         // === SUBTLE バリアント ===
         // neutral + subtle
@@ -165,8 +165,16 @@ const tagVariants = cva("inline-flex items-center justify-center rounded-notice
  * @param {TagProps} props
  */
 function Tag(_a) {
-    var { className, variant, size, status, children, ref } = _a, props = __rest(_a, ["className", "variant", "size", "status", "children", "ref"]);
-    return (_jsx("div", Object.assign({ ref: ref, className: cn(tagVariants({ variant, size, status, className })) }, props, { children: _jsx("span", { className: "min-w-0 truncate", children: children }) })));
+    var { className, variant = "solid", size = "md", status = "neutral", body = "none", children, ref } = _a, props = __rest(_a, ["className", "variant", "size", "status", "body", "children", "ref"]);
+    return (_jsxs("div", Object.assign({ ref: ref, className: cn(tagVariants({ variant, size, status, className })) }, props, { children: [body === "status" && (_jsx("span", { "aria-hidden": "true", className: cn("flex size-2.5 shrink-0 items-center justify-center", size === "sm" ? "mr-0.5" : "mr-1"), children: _jsx("span", { className: cn("size-1.5 rounded-full", variant === "solid"
+                        ? "bg-object-inverse"
+                        : {
+                            neutral: "bg-object-neutral-middle",
+                            info: "bg-object-info",
+                            success: "bg-object-success",
+                            warning: "bg-object-warning",
+                            negative: "bg-object-negative-enabled",
+                        }[status !== null && status !== void 0 ? status : "neutral"]) }) })), _jsx("span", { className: "min-w-0 truncate [text-box-trim:trim-both] [text-box-edge:cap_alphabetic]", children: children })] })));
 }
 Tag.displayName = "Tag";
 export { Tag, tagVariants };

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

@@ -11,7 +11,7 @@ import { type VariantProps } from "class-variance-authority";
  * - en: The Textarea component is used to capture user input in the form of multi-line text fields.
  */
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "lg" | null | undefined;
     isInvalid?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -20,13 +20,12 @@ import { cn } from "../../../lib/utils.js";
  */
 const textareaVariants = cva(
 // ベーススタイル
-"flex w-full rounded-action border bg-surface-base-0 px-3 py-1 ring-offset-background placeholder:text-text-neutral-low focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-ring focus-visible:ring-offset-2 resize", {
+"flex w-full rounded-action border bg-surface-base-0 pt-2 pb-1 ring-offset-background placeholder:text-text-neutral-low focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-ring focus-visible:ring-offset-2 resize", {
     variants: {
-        // サイズバリアント（sm, md, lg）
+        // サイズバリアント（md, lg）
         size: {
-            sm: "min-h-[56px] character-2-regular-pro",
-            md: "min-h-[56px] character-3-regular-pro",
-            lg: "min-h-[64px] character-4-regular-pro",
+            md: "min-h-32 px-3 character-2-regular-pro",
+            lg: "min-h-32 px-4 character-3-regular-pro",
         },
         // エラー状態のバリアント
         isInvalid: {

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

@@ -42,7 +42,7 @@ import { IconButton } from "../../../components/ui/icon-button/index.js";
  * @param {ToastProps} props
  */
 export function Toast({ className, title, description, isCloseTrigger = true, id, }) {
-    return (_jsxs("div", { role: "status", className: cn("shadow-float px-3 py-2 text-text-neutral-high flex w-[320px] rounded-notice gap-2 bg-surface-neutral-middle-enabled border border-border-neutral-middle", className), children: [_jsxs("div", { className: "h-full flex flex-col justify-center gap-0 px-1 grow", children: [title && (_jsx("p", { className: "character-3-bold-pro min-h-8 flex items-center", children: title })), _jsx("p", { className: "character-3-regular-pro min-h-8 flex items-center", children: description })] }), isCloseTrigger && (_jsx(IconButton, { icon: "close", size: "sm", variant: "ghost", theme: "neutral", "aria-label": "\u9589\u3058\u308B", onClick: () => {
+    return (_jsxs("div", { role: "status", className: cn("shadow-float px-3 py-3 text-text-neutral-high flex w-[320px] rounded-notice gap-2 bg-surface-neutral-middle-enabled border border-border-neutral-middle", className), children: [_jsxs("div", { className: "h-full flex flex-col justify-center gap-0 px-1 grow", children: [title && (_jsx("p", { className: "character-3-bold-pro min-h-8 flex items-center", children: title })), _jsx("p", { className: "character-2-regular-pro min-h-8 flex items-center", children: description })] }), isCloseTrigger && (_jsx(IconButton, { icon: "close", size: "sm", variant: "ghost", theme: "neutral", "aria-label": "\u9589\u3058\u308B", onClick: () => {
                     sonnerToast.dismiss(id);
                 } }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"