@aviala-design/spiral 2.5.0 → 2.6.0

package/dist/props.json

@@ -18,7 +18,7 @@
       },
       {
         "name": "mode",
-        "type": "\"default\" | \"primary\" | \"second\" | \"defaultCustom\" | \"noBackground\" | \"noBackgroundCustom\" | \"destructive\"",
+        "type": "\"default\" | \"primary\" | \"second\" | \"defaultCustom\" | \"noBackground\" | \"noBackgroundCustom\" | \"outline\" | \"outlineCustom\" | \"destructive\"",
         "values": [
           "default",
           "primary",
@@ -26,6 +26,8 @@
           "defaultCustom",
           "noBackground",
           "noBackgroundCustom",
+          "outline",
+          "outlineCustom",
           "destructive"
         ],
         "required": false,
@@ -55,12 +57,12 @@
       },
       {
         "name": "variant",
-        "type": "\"default\" | \"destructive\" | \"secondary\" | \"outline\" | \"ghost\" | \"link\"",
+        "type": "\"default\" | \"outline\" | \"destructive\" | \"secondary\" | \"ghost\" | \"link\"",
         "values": [
           "default",
+          "outline",
           "destructive",
           "secondary",
-          "outline",
           "ghost",
           "link"
         ],
@@ -708,6 +710,17 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "direction",
+        "type": "\"horizontal\" | \"vertical\"",
+        "values": [
+          "horizontal",
+          "vertical"
+        ],
+        "defaultValue": "horizontal",
+        "required": false,
+        "description": "Figma `direction` — horizontal (default) or vertical stack."
+      },
       {
         "name": "allRound",
         "type": "boolean",
@@ -720,7 +733,7 @@
         "type": "boolean",
         "defaultValue": "false",
         "required": false,
-        "description": "When true, the group fills its container and items split the width equally."
+        "description": "When true, the group fills its container and items split the main axis equally."
       },
       {
         "name": "disabled",
@@ -814,6 +827,60 @@
       }
     ]
   },
+  "LocaleProvider": {
+    "displayName": "LocaleProvider",
+    "description": "",
+    "props": [
+      {
+        "name": "locale",
+        "type": "Locale",
+        "required": false,
+        "description": "Locale pack. Defaults to `zhCN`."
+      }
+    ]
+  },
+  "ConfigProvider": {
+    "displayName": "ConfigProvider",
+    "description": "",
+    "props": [
+      {
+        "name": "direction",
+        "type": "\"ltr\" | \"rtl\"",
+        "values": [
+          "ltr",
+          "rtl"
+        ],
+        "defaultValue": "ltr",
+        "required": false,
+        "description": "Writing direction. Defaults to `ltr`."
+      },
+      {
+        "name": "syncDocumentDir",
+        "type": "boolean",
+        "defaultValue": "true",
+        "required": false,
+        "description": "When true (default), the outermost ConfigProvider that opts in writes\n`document.documentElement.dir` so portalled overlays inherit direction.\nNested providers only set `dir` on their local wrapper."
+      },
+      {
+        "name": "locale",
+        "type": "Locale",
+        "required": false,
+        "description": "Optional locale pack — nests `LocaleProvider` when provided."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "style",
+        "type": "CSSProperties",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
   "Alert": {
     "displayName": "Alert",
     "description": "",
@@ -889,7 +956,6 @@
       {
         "name": "closeLabel",
         "type": "string",
-        "defaultValue": "Dismiss alert",
         "required": false,
         "description": ""
       },
@@ -1006,7 +1072,6 @@
       {
         "name": "closeLabel",
         "type": "string",
-        "defaultValue": "Dismiss",
         "required": false,
         "description": ""
       },
@@ -1061,7 +1126,6 @@
       {
         "name": "rangePlaceholder",
         "type": "string",
-        "defaultValue": "Start date - End date",
         "required": false,
         "description": ""
       },
@@ -1324,7 +1388,6 @@
           {
             "name": "rangePlaceholder",
             "type": "string",
-            "defaultValue": "Start date - End date",
             "required": false,
             "description": ""
           },
@@ -1427,7 +1490,6 @@
       {
         "name": "placeholder",
         "type": "string",
-        "defaultValue": "HH:mm",
         "required": false,
         "description": ""
       },
@@ -1586,7 +1648,6 @@
           {
             "name": "placeholder",
             "type": "string",
-            "defaultValue": "HH:mm",
             "required": false,
             "description": ""
           },
@@ -2066,7 +2127,6 @@
       {
         "name": "placeholder",
         "type": "string",
-        "defaultValue": "Text",
         "required": false,
         "description": ""
       },
@@ -2220,7 +2280,6 @@
           {
             "name": "placeholder",
             "type": "string",
-            "defaultValue": "Text",
             "required": false,
             "description": ""
           },
@@ -2597,7 +2656,6 @@
           {
             "name": "placeholder",
             "type": "string",
-            "defaultValue": "Select color",
             "required": false,
             "description": ""
           }
@@ -3104,7 +3162,7 @@
       },
       {
         "displayName": "NavigationItemMenuContent",
-        "description": "Flyout surface — right of the item in vertical, below it in horizontal.",
+        "description": "Flyout surface — forward of the item in vertical (LTR right / RTL left), below it in horizontal.",
         "props": [
           {
             "name": "asChild",
@@ -3541,7 +3599,7 @@
   },
   "FormField": {
     "displayName": "FormField",
-    "description": "",
+    "description": "FormField — layout wrapper around a form control, or a react-hook-form\nbound field when given `name` + `render` (shadcn-style).",
     "props": [
       {
         "name": "label",
@@ -3565,7 +3623,7 @@
         "name": "error",
         "type": "ReactNode",
         "required": false,
-        "description": ""
+        "description": "Overrides the validation error message shown under the control"
       },
       {
         "name": "info",
@@ -3587,14 +3645,56 @@
       },
       {
         "name": "direction",
-        "type": "\"vertical\" | \"horizontal\"",
+        "type": "\"horizontal\" | \"vertical\"",
         "values": [
-          "vertical",
-          "horizontal"
+          "horizontal",
+          "vertical"
         ],
         "defaultValue": "vertical",
         "required": false,
         "description": "Figma `Direction` — vertical stacks label above control; horizontal places label beside"
+      },
+      {
+        "name": "ref",
+        "type": "Ref<HTMLDivElement>",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "rules",
+        "type": "Omit<RegisterOptions<TFieldValues, TName>, \"disabled\" | \"valueAsNumber\" | \"valueAsDate\" | \"setValueAs\">",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "shouldUnregister",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "control",
+        "type": "Control<TFieldValues>",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "render",
+        "type": "(props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode",
+        "required": true,
+        "description": ""
       }
     ]
   },
@@ -3829,7 +3929,6 @@
           {
             "name": "closeLabel",
             "type": "string",
-            "defaultValue": "Close dialog",
             "required": false,
             "description": ""
           }
@@ -3862,7 +3961,6 @@
           {
             "name": "closeLabel",
             "type": "string",
-            "defaultValue": "Close dialog",
             "required": false,
             "description": ""
           },
@@ -4012,13 +4110,13 @@
   },
   "ResponsiveTooltip": {
     "displayName": "ResponsiveTooltip",
-    "description": "Tooltip with a mobile-friendly trigger.\n\nRadix Tooltip is hover/focus only and deliberately ignores touch, so it has\nno trigger on phones. `ResponsiveTooltip` renders the SAME content through the\nright primitive for the device:\n- Desktop (`pointer: fine`): Radix Tooltip — opens on hover and keyboard focus.\n- Touch (`pointer: coarse`): Radix Popover with `appearance=\"tooltip\"` — opens on\n  tap, dismisses on outside tap / Escape, but keeps the tooltip visual skin\n  (dark surface, caption text, solid caret) so it looks identical to desktop.\n\nThe consumer API and the look are unchanged between devices; only the trigger\ngesture differs. Animations are handled by the respective effect CSS\n(tooltip-effects / popover-effects), so direction-aware scale-in/out works on\nboth branches.",
+    "description": "Tooltip with a mobile-friendly trigger.\n\nRadix Tooltip is hover/focus only and deliberately ignores touch, so it has\nno trigger on phones. `ResponsiveTooltip` renders the SAME content through the\nright primitive for the device:\n- Desktop (`pointer: fine`): Radix Tooltip — opens on hover and keyboard focus.\n- Touch (`pointer: coarse`): Radix Popover with `appearance=\"tooltip\"` — opens on\n  **long-press** (short tap still reaches the trigger’s own `onClick`), dismisses\n  on outside tap / Escape, and keeps the tooltip visual skin (dark surface,\n  caption text, solid caret) so it looks identical to desktop.\n\nThe consumer API and the look are unchanged between devices; only the trigger\ngesture differs. Animations are handled by the respective effect CSS\n(tooltip-effects / popover-effects), so direction-aware scale-in/out works on\nboth branches.",
     "props": [
       {
         "name": "content",
         "type": "ReactNode",
         "required": true,
-        "description": "Tooltip body — the same content is shown on desktop (hover) and touch (tap)."
+        "description": "Tooltip body — the same content is shown on desktop (hover) and touch\n(long-press)."
       },
       {
         "name": "children",
@@ -4090,6 +4188,13 @@
         "required": false,
         "description": "Hover open delay on desktop, in ms (ignored on touch).\nDefaults to 300 (`TOOLTIP_DELAY_DURATION`). Pass `0` for instant open on hover.\nRequires a TooltipProvider ancestor for shared delay context."
       },
+      {
+        "name": "longPressMs",
+        "type": "number",
+        "defaultValue": "500",
+        "required": false,
+        "description": "Hold duration on touch before the tip opens, in ms.\nDefaults to 500 (`RESPONSIVE_TOOLTIP_LONG_PRESS_MS`)."
+      },
       {
         "name": "open",
         "type": "boolean",
@@ -4099,6 +4204,7 @@
       {
         "name": "defaultOpen",
         "type": "boolean",
+        "defaultValue": "false",
         "required": false,
         "description": "Uncontrolled initial open state."
       },
@@ -4160,7 +4266,6 @@
       {
         "name": "label",
         "type": "string",
-        "defaultValue": "Loading",
         "required": false,
         "description": "Accessible name; omit when decorative (`aria-hidden`)."
       }
@@ -4344,7 +4449,6 @@
       {
         "name": "closeLabel",
         "type": "string",
-        "defaultValue": "Remove",
         "required": false,
         "description": ""
       },
@@ -4509,14 +4613,12 @@
       {
         "name": "description",
         "type": "ReactNode",
-        "defaultValue": "Or click here to upload",
         "required": false,
         "description": "Secondary line — Large style"
       },
       {
         "name": "label",
         "type": "ReactNode",
-        "defaultValue": "Upload",
         "required": false,
         "description": "Default style button label"
       },
@@ -4920,21 +5022,18 @@
       {
         "name": "jumpLabel",
         "type": "ReactNode",
-        "defaultValue": "跳转至",
         "required": false,
         "description": ""
       },
       {
         "name": "sizeLabel",
         "type": "ReactNode",
-        "defaultValue": "每页",
         "required": false,
         "description": ""
       },
       {
         "name": "sizeOptionLabel",
         "type": "(size: number) => ReactNode",
-        "defaultValue": "(size) => `${size} 项`",
         "required": false,
         "description": ""
       }

package/dist/styles.css

@@ -227,6 +227,13 @@
   /* noBackgroundCustom — neutral-4 hover, neutral-5 press */
   --button-no-bg-custom-hover: var(--aviala-neutral-neutral-4, #faf8f8);
   --button-no-bg-custom-active: var(--aviala-neutral-neutral-5, #f5f3f3);
+  /* outline / outlineCustom — Figma Mode=Outline(-Custom); 1px outside stroke */
+  --button-outline-border: var(--border-border-normal-primary, #e2e0e0);
+  --button-outline-fg: var(
+    --text-text-theme-primary-black,
+    var(--aviala-primary-primary-10, #bf2300)
+  );
+  --button-outline-custom-fg: var(--text-text-normal-text-black, #343333);
   --button-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
   --button-icon-slot-height: var(--line-height-regular, 1.125rem);
 
@@ -539,8 +546,7 @@
   --color-picker-swatch-input: 18px;
   --color-picker-swatch-button: 26px;
   --color-picker-swatch-button-size: 32px;
-  --color-picker-slider-height: 8px;
-  --color-picker-slider-thumb: 10px;
+  --color-picker-slider-height: 16px;
   --color-picker-panel-bg: var(--select-menu-bg);
   --color-picker-panel-border: var(--select-menu-border);
   --color-picker-panel-radius: var(--select-menu-radius);
@@ -685,6 +691,32 @@
   --list-item-disabled-opacity: var(--input-disabled-opacity, 0.55);
   --list-separator-my: var(--list-gap);
 
+  /* Tab — Figma Structure Navigation → Tab / TabItem */
+  --tab-gap: var(--gap-inside, 4px);
+  --tab-px: var(--padding-default, 8px);
+  --tab-list-gap: var(--gap-inside-space, 6px);
+  --tab-list-gap-card: 0px;
+  --tab-slot-gap: var(--gap-component-space, 8px);
+  --tab-item-indicator-space: var(--padding-small, 6px);
+  --tab-item-control-gap: var(--gap-inside, 4px);
+  --tab-item-control-radius: var(--border-radius-small, 8px);
+  --tab-icon-box: 18px;
+  --tab-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --tab-fg: var(--text-text-normal-text-black, #343333);
+  --tab-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
+  --tab-bg-card: var(--control-control-normal-lightbackground-light, #f5f3f3);
+  --tab-card-active-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
+  --tab-card-ear-size: 8px;
+  --tab-indicator-height: 4px;
+  --tab-indicator-inset-inline: 12px;
+  --tab-indicator-radius: var(--border-radius-extra-small-2, 6px);
+  --tab-indicator-color: var(--border-border-theme-primary, #ff856b);
+  --tab-transition-duration: var(--navigation-transition-duration, 0.3s);
+  --tab-transition-easing: var(
+    --navigation-transition-easing,
+    cubic-bezier(0.16, 1, 0.3, 1)
+  );
+
   --navigation-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
   --navigation-gap: var(--gap-content-space, 10px);
   --navigation-py: var(--padding-big, 14px);
@@ -710,7 +742,7 @@
   /* Vertical active rail: grow on hover / shrink on press (inset from item edges). */
   --navigation-rail-inset-hover: 3px;
   --navigation-rail-inset-press: 9px;
-  --navigation-rail-left: 1px;
+  --navigation-rail-inline-start: 1px;
   --navigation-rail-width: 3px;
   --navigation-indicator-width-horizontal: 50px;
   --navigation-transition-duration: var(--switch-transition-duration, 0.3s);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Spiral 2 ? Aviala Design React component library",
   "license": "MIT",
   "repository": {
@@ -45,19 +45,23 @@
     "colord": "^2.9.3",
     "tailwind-merge": "^3.3.1",
     "@aviala-design/icons": "2.2.0",
-    "@aviala-design/tokens": "2.3.0"
+    "@aviala-design/tokens": "2.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-hook-form": ">=7.50"
   },
   "devDependencies": {
+    "@hookform/resolvers": "^5.2.1",
     "@types/react": "^19.1.8",
+    "react-hook-form": "^7.62.0",
     "@types/react-dom": "^19.1.6",
     "react-docgen-typescript": "^2.2.20",
     "rimraf": "^6.0.1",
     "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "zod": "^4.0.17"
   },
   "scripts": {
     "build": "tsup && node scripts/copy-css.mjs && node scripts/generate-props.mjs && node scripts/aggregate-changelogs.mjs",