@aviala-design/spiral 2.4.0 → 2.5.0

package/dist/props.json

@@ -1802,6 +1802,17 @@
         "defaultValue": "false",
         "required": false,
         "description": "Figma Checkbox `Round`"
+      },
+      {
+        "name": "size",
+        "type": "\"default\" | \"huge\"",
+        "values": [
+          "default",
+          "huge"
+        ],
+        "defaultValue": "default",
+        "required": false,
+        "description": "Figma Checkbox `Size`"
       }
     ],
     "parts": [
@@ -1839,6 +1850,17 @@
             "required": false,
             "description": "Figma Checkbox `Round`"
           },
+          {
+            "name": "size",
+            "type": "\"default\" | \"huge\"",
+            "values": [
+              "default",
+              "huge"
+            ],
+            "defaultValue": "default",
+            "required": false,
+            "description": "Figma Checkbox `Size`"
+          },
           {
             "name": "description",
             "type": "ReactNode",
@@ -3686,7 +3708,17 @@
             ],
             "defaultValue": "default",
             "required": false,
-            "description": "Visual skin of the surface:\n- `default` — light bordered panel (select-menu aligned), text typography, stroked caret.\n- `tooltip` — shared inverted tooltip skin (dark, caption text, borderless, solid caret).\n- `primary` — brand primary surface with white text, borderless, solid caret."
+            "description": "Visual skin of the surface:\n- `default` — light bordered panel (select-menu aligned), text typography, stroked caret.\n- `tooltip` — shared inverted tooltip skin (dark, caption text by default, borderless, solid caret).\n- `primary` — brand primary surface with white text, borderless, solid caret."
+          },
+          {
+            "name": "level",
+            "type": "\"caption\" | \"text\"",
+            "values": [
+              "caption",
+              "text"
+            ],
+            "required": false,
+            "description": "Typography level for the surface copy.\nDefaults to `caption` for `appearance=\"tooltip\"`, otherwise `text`."
           }
         ]
       },
@@ -3908,6 +3940,32 @@
     "description": "",
     "props": [],
     "parts": [
+      {
+        "displayName": "TooltipProvider",
+        "description": "Provides shared hover-delay state for nested Tooltips.\nPass `delayDuration={0}` for instant open on hover.",
+        "props": [
+          {
+            "name": "delayDuration",
+            "type": "number",
+            "defaultValue": "300",
+            "required": false,
+            "description": "Delay before the tooltip opens on hover, in ms.\nDefaults to `TOOLTIP_DELAY_DURATION` (300). Pass `0` for instant open on hover."
+          },
+          {
+            "name": "skipDelayDuration",
+            "type": "number",
+            "defaultValue": "0",
+            "required": false,
+            "description": "When moving between tooltips, skip the open delay within this window (ms)."
+          },
+          {
+            "name": "disableHoverableContent",
+            "type": "boolean",
+            "required": false,
+            "description": "When true, hovering the tooltip content itself does not keep it open."
+          }
+        ]
+      },
       {
         "displayName": "TooltipTrigger",
         "description": "",
@@ -3936,11 +3994,128 @@
             "defaultValue": "true",
             "required": false,
             "description": "Show a caret arrow pointing at the trigger (default true)."
+          },
+          {
+            "name": "level",
+            "type": "\"caption\" | \"text\"",
+            "values": [
+              "caption",
+              "text"
+            ],
+            "defaultValue": "caption",
+            "required": false,
+            "description": "Typography level for the surface copy.\nFigma default is `caption`; pass `text` for body-sized tooltip copy."
           }
         ]
       }
     ]
   },
+  "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.",
+    "props": [
+      {
+        "name": "content",
+        "type": "ReactNode",
+        "required": true,
+        "description": "Tooltip body — the same content is shown on desktop (hover) and touch (tap)."
+      },
+      {
+        "name": "children",
+        "type": "ReactNode",
+        "required": true,
+        "description": "The trigger element. Rendered with `asChild`, so pass a single element."
+      },
+      {
+        "name": "side",
+        "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+        "values": [
+          "top",
+          "right",
+          "bottom",
+          "left"
+        ],
+        "defaultValue": "top",
+        "required": false,
+        "description": "Preferred placement of the floating content."
+      },
+      {
+        "name": "align",
+        "type": "\"start\" | \"center\" | \"end\"",
+        "values": [
+          "start",
+          "center",
+          "end"
+        ],
+        "defaultValue": "center",
+        "required": false,
+        "description": "Cross-axis alignment relative to the trigger."
+      },
+      {
+        "name": "sideOffset",
+        "type": "number",
+        "defaultValue": "4",
+        "required": false,
+        "description": "Gap between trigger and content, in px."
+      },
+      {
+        "name": "collisionPadding",
+        "type": "number",
+        "defaultValue": "8",
+        "required": false,
+        "description": "Distance from viewport edges before collision flipping, in px."
+      },
+      {
+        "name": "showArrow",
+        "type": "boolean",
+        "defaultValue": "true",
+        "required": false,
+        "description": "Show the caret arrow pointing at the trigger."
+      },
+      {
+        "name": "level",
+        "type": "\"caption\" | \"text\"",
+        "values": [
+          "caption",
+          "text"
+        ],
+        "defaultValue": "caption",
+        "required": false,
+        "description": "Typography level for the content surface (default `caption`)."
+      },
+      {
+        "name": "delayDuration",
+        "type": "number",
+        "defaultValue": "300",
+        "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": "open",
+        "type": "boolean",
+        "required": false,
+        "description": "Controlled open state."
+      },
+      {
+        "name": "defaultOpen",
+        "type": "boolean",
+        "required": false,
+        "description": "Uncontrolled initial open state."
+      },
+      {
+        "name": "onOpenChange",
+        "type": "(open: boolean) => void",
+        "required": false,
+        "description": "Open-state change callback."
+      },
+      {
+        "name": "contentClassName",
+        "type": "string",
+        "required": false,
+        "description": "Extra class on the inner content surface."
+      }
+    ]
+  },
   "Loading": {
     "displayName": "Loading",
     "description": "",
@@ -4300,6 +4475,19 @@
         "defaultValue": "default",
         "required": false,
         "description": "Figma `Type` — single thumb vs range (two thumbs)"
+      },
+      {
+        "name": "showValueTooltip",
+        "type": "boolean",
+        "defaultValue": "false",
+        "required": false,
+        "description": "When true, hovering a thumb (and while dragging it) shows a value\ntooltip bound to that thumb."
+      },
+      {
+        "name": "formatValueTooltip",
+        "type": "(value: number, index: number) => ReactNode",
+        "required": false,
+        "description": "Format the value tooltip label. Defaults to `String(value)`."
       }
     ]
   },
@@ -4947,7 +5135,7 @@
           },
           {
             "name": "checkboxProps",
-            "type": "Omit<Omit<CheckboxProps & RefAttributes<HTMLButtonElement>, \"ref\"> & { round?: boolean; } & RefAttributes<HTMLButtonElement>, \"ref\">",
+            "type": "Omit<Omit<CheckboxProps & RefAttributes<HTMLButtonElement>, \"ref\"> & { round?: boolean; size?: CheckboxSize; } & RefAttributes<...>, \"ref\">",
             "required": false,
             "description": ""
           }

package/dist/styles.css

@@ -410,12 +410,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));
@@ -703,7 +714,8 @@
   --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 +816,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.0",
+  "version": "2.5.0",
   "description": "Spiral 2 ? Aviala Design React component library",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "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.3.0"
   },
   "peerDependencies": {
     "react": ">=18",