@aviala-design/spiral 2.4.1 → 2.6.0

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);
 
@@ -410,12 +417,23 @@
   --input-border: var(--input-border-activated);
   --input-bg: var(--input-bg-activated);
 
+  /* Figma Size=Default → size-big; Size=Huge → size-large */
   --checkbox-size: var(--size-big, 1.25rem);
-  --checkbox-radius: var(--border-radius-small, 8px);
+  --checkbox-size-huge: var(--size-large, 1.625rem);
+  --checkbox-radius: var(--border-radius-extra-small-2, 6px);
+  --checkbox-radius-huge: var(--border-radius-small, 8px);
   --checkbox-radius-round: var(--border-radius-allround, 99px);
   --checkbox-icon-size: 0.75rem;
+  --checkbox-icon-size-huge: 0.875rem;
   --checkbox-indeterminate-mark-size: 0.75rem;
+  --checkbox-indeterminate-mark-size-huge: 0.875rem;
   --checkbox-indeterminate-mark-radius: var(--border-radius-extra-small-2, 6px);
+  /* Check / uncheck motion (CSS transitions — interruptible) */
+  --checkbox-check-stroke: 1.4px;
+  --checkbox-check-stroke-huge: 2px;
+  --checkbox-check-duration: 300ms;
+  --checkbox-check-easing: cubic-bezier(0.873, 0, 0, 1);
+  --checkbox-surface-easing: ease;
   --checkbox-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
   --checkbox-border-unchecked: var(--border-border-normal-primary, #e2e0e0);
   --checkbox-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
@@ -528,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);
@@ -674,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);
@@ -699,11 +742,12 @@
   /* 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);
-  --navigation-transition-easing: cubic-bezier(0.33, 1, 0.68, 1);
+  /* Snappy ease-out: most travel happens early, then settles hard. */
+  --navigation-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
   --navigation-icon-box: var(--line-height-regular, 1.125rem);
   --navigation-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
   --navigation-item-hover-bg: var(--button-no-bg-custom-hover);
@@ -804,22 +848,38 @@
   --focus-transition-duration: 250ms;
   --focus-transition-easing: ease;
 
-  /* Slider — Figma Information Collect → Slider (384:21584) */
-  --slider-width: 70px;
-  --slider-track-height: 4px;
-  --slider-track-height-big: 8px;
-  --slider-thumb-size: 8px;
-  --slider-thumb-size-big: 10px;
+  /* Slider — Figma Information Collect → Slider (384:21585) */
+  --slider-width: 96px;
+  --slider-track-height: 6px;
+  --slider-track-height-big: 10px;
+  --slider-thumb-size: 14px;
+  --slider-thumb-size-big: 16px;
+  --slider-thumb-core-size: 8px;
+  --slider-thumb-core-size-big: 10px;
+  --slider-thumb-hover-scale: 1.18;
+  --slider-thumb-press-scale: 0.92;
+  --slider-thumb-scale-transition-duration: 0.15s;
+  /* Click / keyboard value jumps — off while data-dragging */
+  --slider-value-transition-duration: 0.22s;
+  --slider-value-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --slider-pad-y: var(--padding-tinyer, 3px);
-  --slider-track-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --slider-track-border: var(--border-border-normal-primary, #e2e0e0);
+  /* Default & Big tracks share fill tokens; Big only differs by height/thumb.
+   * Track fill ON: border-normal-primary; OFF: border-normal-light. No stroke. */
+  --slider-track-bg: var(--border-border-normal-primary, #e2e0e0);
   --slider-range-bg: var(--box-box-theme-primarybackground, #ff5532);
   --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --slider-thumb-border: var(--border-border-theme-primary, #ff5532);
-  /* Availability Status=OFF — secondary fill, not whole-control opacity */
-  --slider-track-bg-disabled: var(--control-control-normal-lightbackground-deep, #fdfbfb);
+  --slider-thumb-core: var(--box-box-theme-primarybackground, #ff5532);
+  /* BasicShadow / BasicShadow-Level4WithLIne */
+  --slider-thumb-shadow:
+    0 6px 18px rgba(0, 0, 0, 0.08),
+    0 0 1px rgba(0, 0, 0, 0.2);
+  /* Availability Status=OFF */
+  --slider-track-bg-disabled: var(--border-border-normal-light, #f5f3f3);
   --slider-range-bg-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
-  --slider-thumb-border-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
+  --slider-thumb-core-disabled: var(
+    --box-box-theme-secondarybackground,
+    #ffdad2
+  );
 
   /* Upload — Figma Information Collect → Upload (527:56238 / 527:56237) */
   --upload-radius: var(--border-radius-small, 8px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "2.4.1",
+  "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.2.1"
+    "@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",