Split motion packs from accessibility overrides

apps/docs/.storybook/preview.ts

@@ -8,10 +8,15 @@ import {
   skinNames
 } from "@ai-ui/ui";
 import {
-  defaultMotionMode,
+  defaultMotionAccessibility,
+  defaultMotionPack,
   defaultTheme,
-  motionModeNames,
-  setMotionMode,
+  motionAccessibilityDetails,
+  motionAccessibilityNames,
+  motionPackDetails,
+  motionPackNames,
+  setMotionAccessibility,
+  setMotionPack,
   setTheme,
   themeDetails,
   themeNames
@@ -30,14 +35,25 @@ const preview: Preview = {
         }))
       }
     },
-    motion: {
-      description: "Preview motion mode",
+    motionPack: {
+      description: "Preview motion pack",
       toolbar: {
         icon: "transfer",
         dynamicTitle: true,
-        items: motionModeNames.map((modeName) => ({
+        items: motionPackNames.map((packName) => ({
+          value: packName,
+          title: motionPackDetails[packName].label
+        }))
+      }
+    },
+    motionAccessibility: {
+      description: "Preview motion accessibility override",
+      toolbar: {
+        icon: "accessibility",
+        dynamicTitle: true,
+        items: motionAccessibilityNames.map((modeName) => ({
           value: modeName,
-          title: modeName === "system" ? "Motion / System" : "Motion / Reduced"
+          title: motionAccessibilityDetails[modeName].label
         }))
       }
     },
@@ -54,7 +70,8 @@ const preview: Preview = {
     }
   },
   initialGlobals: {
-    motion: defaultMotionMode,
+    motionAccessibility: defaultMotionAccessibility,
+    motionPack: defaultMotionPack,
     skin: defaultSkin,
     theme: defaultTheme
   },
@@ -80,7 +97,10 @@ const preview: Preview = {
     (Story, context) => {
       if (typeof document !== "undefined") {
         setTheme(context.globals.theme ?? defaultTheme);
-        setMotionMode(context.globals.motion ?? defaultMotionMode);
+        setMotionPack(context.globals.motionPack ?? defaultMotionPack);
+        setMotionAccessibility(
+          context.globals.motionAccessibility ?? defaultMotionAccessibility
+        );
         setSkin(context.globals.skin ?? defaultSkin);
 
         document.body.dataset.theme = context.globals.theme ?? defaultTheme;