@aviala-design/spiral 2.7.2 → 2.9.0

package/dist/props.json

@@ -4024,6 +4024,205 @@
       }
     ]
   },
+  "Drawer": {
+    "displayName": "Drawer",
+    "description": "",
+    "props": [],
+    "parts": [
+      {
+        "displayName": "DrawerTrigger",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerOverlay",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerContent",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "position",
+            "type": "\"left\" | \"right\" | \"top\" | \"bottom\"",
+            "values": [
+              "left",
+              "right",
+              "top",
+              "bottom"
+            ],
+            "defaultValue": "right",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "portalled",
+            "type": "boolean",
+            "defaultValue": "true",
+            "required": false,
+            "description": "Render without Portal — use inside nested overlays."
+          },
+          {
+            "name": "showOverlay",
+            "type": "boolean",
+            "defaultValue": "true",
+            "required": false,
+            "description": "Show the default overlay scrim."
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerHeader",
+        "description": "",
+        "props": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Optional leading status icon"
+          },
+          {
+            "name": "showIcon",
+            "type": "boolean",
+            "defaultValue": "false",
+            "required": false,
+            "description": "Show the leading icon slot"
+          },
+          {
+            "name": "showClose",
+            "type": "boolean",
+            "defaultValue": "true",
+            "required": false,
+            "description": "Show the header close control"
+          },
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerHeaderText",
+        "description": "",
+        "props": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Optional leading status icon"
+          },
+          {
+            "name": "showIcon",
+            "type": "boolean",
+            "defaultValue": "false",
+            "required": false,
+            "description": "Show the leading icon slot"
+          },
+          {
+            "name": "showClose",
+            "type": "boolean",
+            "defaultValue": "true",
+            "required": false,
+            "description": "Show the header close control"
+          },
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerTitle",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerDescription",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerBody",
+        "description": "",
+        "props": [
+          {
+            "name": "layout",
+            "type": "\"text\" | \"default\"",
+            "values": [
+              "text",
+              "default"
+            ],
+            "defaultValue": "default",
+            "required": false,
+            "description": "Figma `Content=Text` — title + body copy preset"
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "required": false,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "displayName": "DrawerClose",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "required": false,
+            "description": ""
+          }
+        ]
+      }
+    ]
+  },
   "Tooltip": {
     "displayName": "Tooltip",
     "description": "",
@@ -4651,6 +4850,168 @@
       }
     ]
   },
+  "Video": {
+    "displayName": "Video",
+    "description": "",
+    "props": [
+      {
+        "name": "appearance",
+        "type": "\"default\" | \"light\"",
+        "values": [
+          "default",
+          "light"
+        ],
+        "defaultValue": "default",
+        "required": false,
+        "description": "Figma `Style` — Default stacks the bar; Light floats a pill bar over the stage."
+      },
+      {
+        "name": "skipSeconds",
+        "type": "number",
+        "defaultValue": "10",
+        "required": false,
+        "description": "Seconds to skip when Previous / Next have no playlist handlers."
+      },
+      {
+        "name": "playbackRates",
+        "type": "number[]",
+        "defaultValue": "[...DEFAULT_PLAYBACK_RATES]",
+        "required": false,
+        "description": "Available playback rates in the speed popover."
+      },
+      {
+        "name": "muted",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "defaultMuted",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "onMutedChange",
+        "type": "(muted: boolean) => void",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "playbackRate",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "defaultPlaybackRate",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "onPlaybackRateChange",
+        "type": "(rate: number) => void",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "objectFit",
+        "type": "\"fill\" | \"original\" | \"stretch\"",
+        "values": [
+          "fill",
+          "original",
+          "stretch"
+        ],
+        "required": false,
+        "description": "Figma 画面比例 — original→contain, stretch→fill, fill→cover."
+      },
+      {
+        "name": "defaultObjectFit",
+        "type": "\"fill\" | \"original\" | \"stretch\"",
+        "values": [
+          "fill",
+          "original",
+          "stretch"
+        ],
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "onObjectFitChange",
+        "type": "(fit: VideoObjectFit) => void",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "volumeBalance",
+        "type": "boolean",
+        "required": false,
+        "description": "Lightweight loudness balance via Web Audio DynamicsCompressor."
+      },
+      {
+        "name": "defaultVolumeBalance",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "onVolumeBalanceChange",
+        "type": "(enabled: boolean) => void",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "volume",
+        "type": "number",
+        "required": false,
+        "description": "Linear gain 0–1 (`HTMLMediaElement.volume`)."
+      },
+      {
+        "name": "defaultVolume",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "onVolumeChange",
+        "type": "(volume: number) => void",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "onPrevious",
+        "type": "() => void",
+        "required": false,
+        "description": "Override Previous (default: seek back `skipSeconds`)."
+      },
+      {
+        "name": "onNext",
+        "type": "() => void",
+        "required": false,
+        "description": "Override Next (default: seek forward `skipSeconds`)."
+      },
+      {
+        "name": "stageBackground",
+        "type": "string",
+        "required": false,
+        "description": "Letterbox / pillarbox fill behind the media.\nCSS color value — prefer a token, e.g. `var(--box-box-normal-background-blackonly)`.\nDefaults to Black (`--box-box-normal-background-blackonly`)."
+      },
+      {
+        "name": "autoHideControls",
+        "type": "boolean",
+        "defaultValue": "false",
+        "required": false,
+        "description": "Auto-hide the control bar after idle (slide down + fade).\nPointer move / press on the player reveals it again."
+      },
+      {
+        "name": "autoHideDelay",
+        "type": "number",
+        "required": false,
+        "description": "Idle time in ms before hiding when `autoHideControls` is on. Default 2500."
+      }
+    ]
+  },
   "ScrollPicker": {
     "displayName": "ScrollPicker",
     "description": "",

package/dist/styles.css

@@ -131,6 +131,10 @@
   --control-control-normal-lightbackground-2: #e5e4e3;
   --control-control-normal-background-3: #d6d5d4;
   --control-control-normal-background-whiteonly: #ffffff;
+  --box-box-normal-background-whiteonly: #ffffff;
+  --box-box-normal-background-blackonly: #000000;
+  --box-box-normal-lightbackground-white: #f9f8f8;
+  --box-box-normal-lightbackground-black: #262525;
 
   /* Neutral text series (body copy, labels, icons) */
   --text-text-normal-text-black: #262525;
@@ -143,6 +147,9 @@
     0 0 1px 0 rgb(0 0 0 / 18%),
     0 6px 18px 0 rgba(0, 0, 0, 0.08);
 
+  /* Shared elevation — BasicShadow-Level5 */
+  --aviala-shadow-level5: 0 8px 24px 2px rgba(0, 0, 0, 0.06);
+
   /* Shared interaction surfaces — Figma Components 1909:28593 matrix */
   --aviala-interaction-ghost-hover: var(
     --aviala-neutral-neutral-3,
@@ -502,10 +509,14 @@
   --switch-thumb-travel-small: calc(
     var(--switch-width) - 2 * var(--switch-padding) - var(--switch-thumb-size-small)
   );
-  --switch-transition-duration: 0.3s;
-  --switch-transition-easing: ease-in-out;
-  --switch-press-transition-duration: 0.2s;
-  --switch-thumb-press-scale: 1.28;
+  --switch-transition-duration: 0.26s;
+  --switch-thumb-lead-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --switch-thumb-trail-ease: cubic-bezier(0.35, 0, 0.15, 1);
+  --switch-transition-easing: var(--switch-thumb-lead-ease, cubic-bezier(0.16, 1, 0.3, 1));
+  --switch-press-transition-duration: 0.12s;
+  --switch-press-transition-easing: cubic-bezier(0.2, 0, 0.2, 1);
+  --switch-track-transition-duration: 0.22s;
+  --switch-thumb-press-scale: 1.2;
   --switch-disabled-opacity: 0.55;
 
   --link-fg-theme: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
@@ -697,6 +708,36 @@
   --modal-close-fg: var(--text-text-normal-text-caption-black, #616060);
   --modal-description-fg: var(--text-text-normal-text-caption-black, #616060);
 
+  /* Drawer — Figma Components → Drawer (2051:26823) */
+  --drawer-overlay-bg: rgba(0, 0, 0, 0.4);
+  --drawer-inset: var(--padding-large, 18px);
+  --drawer-content-width: 310px;
+  --drawer-content-max-width: calc(100vw - 36px);
+  --drawer-content-max-height-edge: 400px;
+  --drawer-content-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --drawer-content-fg: var(--text-text-normal-text-black, #262525);
+  --drawer-content-border: var(--border-border-normal-1, #f0efef);
+  --drawer-content-radius: var(--border-radius-big, 12px);
+  --drawer-content-shadow: var(--aviala-shadow-level5);
+  --drawer-header-bg: var(--drawer-content-bg);
+  --drawer-header-pl: var(--padding-big, 14px);
+  --drawer-header-pr: var(--padding-small, 6px);
+  --drawer-header-py: var(--gap-none, 0);
+  --drawer-header-main-py: var(--padding-middle, 10px);
+  --drawer-header-gap: var(--gap-content-space, 10px);
+  --drawer-section-padding: var(--padding-big, 14px);
+  --drawer-section-border: var(--border-border-normal-1, #f0efef);
+  --drawer-body-bg: var(--drawer-content-bg);
+  --drawer-footer-bg: var(--drawer-content-bg);
+  --drawer-footer-actions-gap: var(--gap-component-space, 8px);
+  --drawer-icon-size: var(--size-semilarge, 1.375rem);
+  --drawer-icon-slot-size: var(--size-semilarge, 1.375rem);
+  --drawer-icon-py: var(--padding-min, 2px);
+  --drawer-icon-fg: var(--text-text-normal-text-black, #262525);
+  --drawer-close-icon-size: var(--size-middle, 1rem);
+  --drawer-close-fg: var(--text-text-normal-text-caption-black, #616060);
+  --drawer-description-fg: var(--text-text-normal-text-caption-black, #616060);
+
   --tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #262525));
   --tooltip-content-fg: var(
     --control-control-normal-background-whiteonly,
@@ -797,7 +838,8 @@
   --navigation-rail-inline-start: 1px;
   --navigation-rail-width: 3px;
   --navigation-indicator-width-horizontal: 50px;
-  --navigation-transition-duration: var(--switch-transition-duration, 0.3s);
+  /* Keep Navigation timing independent of Switch micro-interaction tokens. */
+  --navigation-transition-duration: 0.3s;
   /* 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);
@@ -1039,6 +1081,40 @@
   --card-fg: var(--text-text-normal-text-black, #262525);
   --card-divider-height: 14px;
   --card-trailing-gap: 10px;
+
+  /* Video — Figma Information Display → Video (1958:1400) */
+  --video-width: 800px;
+  --video-height: 450px;
+  --video-radius: var(--border-radius-big, 12px);
+  --video-bg: var(--normal-background-theme, var(--box-box-normal-lightbackground-white, #f9f8f8));
+  --video-border: var(--border-border-normal-1, #f9f8f8);
+  --video-bar-height: 46px;
+  --video-bar-padding: var(--padding-default, 8px);
+  --video-bar-gap: var(--gap-component-space, 8px);
+  --video-bar-group-gap: var(--gap-inside, 4px);
+  --video-bar-progress-gap: 10px;
+  --video-bar-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --video-bar-light-inset: var(--padding-big, 14px);
+  --video-bar-light-radius: var(--border-radius-allround, 99px);
+  --video-bar-light-shadow: var(--aviala-shadow-level4-with-line);
+  /* Light floating bar — frosted material over <video> (Figma fill luminosity ≈ glass) */
+  --video-bar-light-blur: 24px;
+  --video-bar-light-bg: color-mix(
+    in srgb,
+    var(--video-bar-bg, var(--control-control-normal-lightbackground-1, #f0efef)) 72%,
+    transparent
+  );
+  --video-settings-width: 200px;
+  --video-settings-gap: var(--gap-component-space, 8px);
+  --video-settings-row-gap: var(--gap-inside-space, 6px);
+  --video-settings-padding: var(--padding-middle, 10px);
+  --video-speed-min-width: 48px;
+  --video-speed-item-width: 160px;
+  --video-volume-slider-size: 96px;
+  /* Letterbox / pillarbox behind media — ALD box-normal-Background-blackOnly */
+  --video-stage-bg: var(--box-box-normal-background-blackonly, #000000);
+  --video-controls-hide-duration: 0.28s;
+  --video-controls-hide-easing: cubic-bezier(0.33, 1, 0.68, 1);
 }
 
 @theme inline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aviala-design/spiral",
-  "version": "2.7.2",
+  "version": "2.9.0",
   "description": "Spiral 2 ? Aviala Design React component library",
   "license": "MIT",
   "repository": {
@@ -44,8 +44,8 @@
     "clsx": "^2.1.1",
     "colord": "^2.9.3",
     "tailwind-merge": "^3.3.1",
-    "@aviala-design/icons": "2.3.0",
-    "@aviala-design/tokens": "2.5.2"
+    "@aviala-design/icons": "2.4.0",
+    "@aviala-design/tokens": "2.5.5"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -55,12 +55,13 @@
   "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",
+    "react-hook-form": "^7.62.0",
     "rimraf": "^6.0.1",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
+    "vitest": "^4.1.11",
     "zod": "^4.0.17"
   },
   "scripts": {
@@ -69,6 +70,7 @@
     "changelog:aggregate": "node scripts/aggregate-changelogs.mjs",
     "changelog:stamp": "node scripts/stamp-unreleased.mjs",
     "dev": "tsup --watch",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist"
   }