@aviala-design/spiral 2.7.2 → 2.8.1

package/dist/props.json

@@ -4651,6 +4651,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;
@@ -502,10 +506,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));
@@ -797,7 +805,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 +1048,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.8.1",
   "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.4"
   },
   "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"
   }