@aviala-design/spiral 1.0.0 → 2.1.0

package/dist/props.json

@@ -10,6 +10,12 @@
         "required": false,
         "description": "Figma `All-Round`"
       },
+      {
+        "name": "compact",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "mode",
         "type": "enum",
@@ -1245,7 +1251,7 @@
   },
   "Popover": {
     "displayName": "Popover",
-    "description": "Radix Popover closes on `window` blur (e.g. focusing DevTools). Suppress only\nblur-initiated closes; pointer-down (outside click, trigger toggle) and Escape\nmust still dismiss on the first interaction.",
+    "description": "Thin controlled/uncontrolled wrapper around Radix `Popover.Root`. We don't add\nany custom close-suppression: a non-modal Popover already prevents focus-outside\nfrom dismissing (`onFocusOutside` is default-prevented by Radix), so a window\nblur never closes it — no extra bookkeeping needed, and it keeps Escape a\nsingle, predictable dismiss.",
     "props": []
   },
   "Modal": {

package/dist/styles.css

@@ -333,6 +333,8 @@
   --radio-label-fg: var(--text-text-normal-text-black, #343333);
   --radio-caption-fg: var(--text-text-normal-text-caption-black, #858484);
   --radio-card-border-selected: var(--border-border-theme-primary, #ff5532);
+  --radio-card-hover-bg: var(--aviala-neutral-neutral-4, #faf8f8);
+  --radio-card-press-bg: var(--aviala-neutral-neutral-6, #edebeb);
   --radio-disabled-opacity: var(--input-disabled-opacity, 0.55);
 
   --select-menu-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
@@ -429,6 +431,8 @@
   --switch-height-regular: 22px;
   --switch-height-small: 20px;
   --switch-track-bg: var(--control-control-normal-background-deep, #e2e0e0);
+  --switch-hover-bg: var(--aviala-neutral-neutral-8, #d2d0d0);
+  --switch-press-bg: var(--aviala-neutral-neutral-9, #bebcbc);
   --switch-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
   --switch-thumb-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
   --switch-thumb-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
@@ -565,20 +569,21 @@
     var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 1.125rem)
   );
   --datepicker-header-height: calc(
-    var(--padding-tiny, 4px) * 4 + var(--icon-size-text-bigger, var(--size-middle, 1rem))
+    var(--padding-tiny, 4px) * 3 +
+      var(--typography-subtitle-line-height, var(--line-height-middle, 1.375rem))
   );
   --datepicker-grid-height: calc(
     var(--datepicker-grid-rows) * var(--datepicker-day-height) +
       (var(--datepicker-grid-rows) - 1) * var(--datepicker-row-gap)
   );
-  /* Date grid content (weekdays + grid) — keep month wheels the same height */
+  /* Date grid content (weekdays + grid) — bottom padding applied on view-viewport */
   --datepicker-view-height: calc(
     var(--datepicker-weekday-height) + var(--datepicker-panel-gap) +
       var(--datepicker-grid-height)
   );
   --datepicker-panel-body-height: calc(
     var(--datepicker-header-height) + var(--datepicker-panel-gap) +
-      var(--datepicker-view-height)
+      var(--datepicker-view-height) + var(--padding-tiny, 4px)
   );
   --datepicker-time-wheel-item-height: 36px;
   --datepicker-time-wheel-visible-count: 5;
@@ -595,7 +600,7 @@
   --popover-content-px: var(--padding-default, 8px);
   --popover-content-py: var(--padding-default, 8px);
   --popover-content-max-width: 320px;
-  --popover-content-arrow-stroke: var(--border-border-normal-primary, #e2e0e0);
+  --popover-content-arrow-stroke: var(--border-border-normal-light, #f5f3f3);
 
   /* Modal — Figma Information Display → Modal (553:58593) */
   --modal-overlay-bg: rgba(0, 0, 0, 0.45);
@@ -691,6 +696,9 @@
   --navigation-item-active-shadow: var(--button-shadow-light);
   --navigation-item-rail: var(--border-border-theme-primary, #ff5532);
   --navigation-rail-inset: 6px;
+  /* 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-width: 3px;
   --navigation-indicator-width-horizontal: 50px;
@@ -1026,7 +1034,7 @@
   --typography-caption-fg: var(--text-text-normal-text-caption-black, #858484);
   --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #fefcfc);
 
-  --typeface-gap: var(--gap-inside, 4px);
+  --typeface-gap: var(--gap-none, 0);
 }
 
 /* Keyboard focus ring - opt-in via `.aviala-focus-ring`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "Spiral 2 ? Aviala Design React component library",
   "license": "MIT",
   "repository": {
@@ -43,8 +43,8 @@
     "clsx": "^2.1.1",
     "colord": "^2.9.3",
     "tailwind-merge": "^3.3.1",
-    "@aviala-design/icons": "2.0.1",
-    "@aviala-design/tokens": "1.0.0"
+    "@aviala-design/icons": "2.0.2",
+    "@aviala-design/tokens": "2.1.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -60,6 +60,7 @@
   },
   "scripts": {
     "build": "tsup && node scripts/copy-css.mjs && node scripts/generate-props.mjs",
+    "build:styles": "node scripts/copy-css.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist"