Split motion packs from accessibility overrides

apps/docs/src/tokens.stories.tsx

@@ -1,18 +1,24 @@
 import {
   colorTokens,
+  defaultMotionAccessibility,
+  defaultMotionPack,
   motionTokens,
+  motionAccessibilityDetails,
+  motionPackDetails,
   radiusTokens,
   shadowTokens,
   themeDetails,
   themeNames,
   typographyTokens,
-  type MotionModeName,
+  type MotionAccessibilityName,
+  type MotionPackName,
   type ThemeName
 } from "@ai-ui/tokens";
 import type { Meta, StoryObj } from "@storybook/react";
 
 type TokensOverviewProps = {
-  motionMode: MotionModeName;
+  motionAccessibility: MotionAccessibilityName;
+  motionPack: MotionPackName;
   theme: ThemeName;
 };
 
@@ -119,7 +125,11 @@ function ThemeCard({ themeName }: { themeName: ThemeName }) {
   );
 }
 
-function TokensOverview({ motionMode, theme }: TokensOverviewProps) {
+function TokensOverview({
+  motionAccessibility,
+  motionPack,
+  theme
+}: TokensOverviewProps) {
   return (
     <div className="min-h-screen bg-[var(--color-background)] px-6 py-10 text-[var(--color-foreground)] sm:px-10">
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
@@ -157,10 +167,18 @@ function TokensOverview({ motionMode, theme }: TokensOverviewProps) {
             </div>
             <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] px-4 py-3 shadow-[var(--shadow-xs)]">
               <p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
-                Motion Mode
+                Motion Pack
               </p>
               <p className="mt-2 text-sm font-medium text-[var(--color-foreground)]">
-                {motionMode === "system" ? "System preference" : "Reduced motion"}
+                {motionPackDetails[motionPack].label}
+              </p>
+            </div>
+            <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] px-4 py-3 shadow-[var(--shadow-xs)]">
+              <p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
+                Accessibility Override
+              </p>
+              <p className="mt-2 text-sm font-medium text-[var(--color-foreground)]">
+                {motionAccessibilityDetails[motionAccessibility].label}
               </p>
             </div>
           </div>
@@ -282,7 +300,8 @@ function TokensOverview({ motionMode, theme }: TokensOverviewProps) {
             <h2 className="text-2xl font-semibold">Motion tokens</h2>
             <p className="mt-1 text-sm text-[var(--color-muted-foreground)]">
               Timing and motion scale now live in variables that components can consume
-              directly. The toolbar can force reduced motion for preview validation.
+              directly. The toolbar now separates the active motion pack from the
+              accessibility override.
             </p>
             <div className="mt-6 grid gap-4 md:grid-cols-2">
               <div className="space-y-3">
@@ -370,12 +389,19 @@ type Story = StoryObj<typeof meta>;
 
 export const Overview: Story = {
   args: {
-    motionMode: "system",
+    motionAccessibility: defaultMotionAccessibility,
+    motionPack: defaultMotionPack,
     theme: "light"
   },
   render: (_args, context) => (
     <TokensOverview
-      motionMode={context.globals.motion as MotionModeName}
+      motionAccessibility={
+        (context.globals.motionAccessibility as MotionAccessibilityName | undefined) ??
+        defaultMotionAccessibility
+      }
+      motionPack={
+        (context.globals.motionPack as MotionPackName | undefined) ?? defaultMotionPack
+      }
       theme={context.globals.theme as ThemeName}
     />
   )