@revikornmann/muka-ui 0.6.0 → 0.7.0

package/dist/types/components/NavigationTransition/NavigationTransition.d.ts

@@ -7,8 +7,10 @@ export interface NavigationTransitionProps {
     activeKey: string;
     /** Direction of the navigation transition */
     direction: 'forward' | 'back';
-    /** Animation duration in ms (default: 300) */
+    /** Animation duration in ms. Defaults to the --motion-duration-view token value. */
     duration?: number;
+    /** CSS easing string. Defaults to the spring easing (--motion-easing-enter token value). */
+    easing?: string;
     /** Additional CSS classes */
     className?: string;
 }

package/dist/types/components/NavigationTransition/NavigationTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTransition.d.ts","sourceRoot":"","sources":["../../../../components/NavigationTransition/NavigationTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,4BAA4B,CAAC;AAIpC,MAAM,WAAW,yBAAyB;IACxC,2CAA2C;IAC3C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAC;IAElB,6CAA6C;IAC7C,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC;IAE9B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwGpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"NavigationTransition.d.ts","sourceRoot":"","sources":["../../../../components/NavigationTransition/NavigationTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,4BAA4B,CAAC;AAKpC,MAAM,WAAW,yBAAyB;IACxC,2CAA2C;IAC3C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAC;IAElB,6CAA6C;IAC7C,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC;IAE9B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8GpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/types/components/SpecList/SpecList.d.ts

@@ -20,11 +20,18 @@ export interface SpecListProps {
     /** SpecRow children */
     children: React.ReactNode;
     /**
-     * Visual density.
-     * - `default` — comfortable spacing for scanning specs at a glance
-     * - `compact` — denser for long lists
+     * Row layout.
+     * - `horizontal` — label and value side by side
+     * - `vertical` — label stacked above the value
      */
-    density?: 'default' | 'compact';
+    stacking?: 'horizontal' | 'vertical';
+    /**
+     * Fixed label column width (horizontal stacking only).
+     * - `small` — 80px
+     * - `medium` — 120px
+     * - `large` — 160px
+     */
+    labelWidth?: 'small' | 'medium' | 'large';
     /** Additional CSS classes */
     className?: string;
 }
@@ -33,7 +40,8 @@ export interface SpecListProps {
  *
  * Mobile-friendly alternative to `Table` when displaying flat key/value data
  * (e.g. motorcycle specs, vehicle details). Each row is a `<dt>/<dd>` pair
- * inside a `<dl>` for semantic accessibility.
+ * inside a `<dl>` for semantic accessibility. Renders flat — no background,
+ * radius, or dividers — so it sits directly on the page surface.
  */
 export declare const SpecList: React.FC<SpecListProps>;
 export default SpecList;

package/dist/types/components/SpecList/SpecList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpecList.d.ts","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAIxB,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAW1C,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAS5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"SpecList.d.ts","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAIxB,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAW1C,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAErC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE1C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAe5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Muka Design System - Multi-brand design tokens and React components",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",

package/scripts/build-tokens.js

@@ -239,7 +239,10 @@ class TokenBuilder {
 
     // Layout mode forcing (for Storybook / design tools)
     css += this.generateLayoutModeCSS(tokens);
-    
+
+    // Accessibility: zero out motion durations when user prefers reduced motion
+    css += this.generateReducedMotionCSS(selector);
+
     // Add root fallback for default theme
     if (brand === 'muka' && theme === 'light') {
       css += '\n/* Default theme fallback */\n:root {\n';
@@ -255,6 +258,9 @@ class TokenBuilder {
 
       // Layout mode forcing for :root fallback
       css += this.generateLayoutModeCSS(tokens);
+
+      // Accessibility: reduced motion for :root fallback
+      css += this.generateReducedMotionCSS(':root');
     }
     
     return css;
@@ -386,6 +392,11 @@ class TokenBuilder {
     return css;
   }
 
+  // Generate @media (prefers-reduced-motion: reduce) block that zeros out motion durations
+  generateReducedMotionCSS(selector) {
+    return `\n/* Accessibility: disable motion for users who prefer reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  ${selector} {\n    --motion-duration-micro: 0ms;\n    --motion-duration-component: 0ms;\n    --motion-duration-view: 0ms;\n  }\n}\n`;
+  }
+
   // Build tokens for Storybook
   async build() {
     console.log('🚀 Building design tokens for Storybook...\n');

package/tokens/t1-primitives/motion.json

@@ -0,0 +1,21 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "duration": {
+    "none":    { "$type": "duration", "$value": "0ms" },
+    "instant": { "$type": "duration", "$value": "100ms" },
+    "fast":    { "$type": "duration", "$value": "150ms" },
+    "normal":  { "$type": "duration", "$value": "200ms" },
+    "slow":    { "$type": "duration", "$value": "300ms" },
+    "slower":  { "$type": "duration", "$value": "500ms" }
+  },
+  "easing": {
+    "standard": { "$type": "other", "$value": "cubic-bezier(0.4, 0, 0.2, 1)" },
+    "enter":    { "$type": "other", "$value": "cubic-bezier(0, 0, 0.2, 1)" },
+    "exit":     { "$type": "other", "$value": "cubic-bezier(0.4, 0, 1, 1)" },
+    "spring":   { "$type": "other", "$value": "cubic-bezier(0.16, 1, 0.3, 1)" },
+    "linear":   { "$type": "other", "$value": "linear" }
+  }
+}

package/tokens/t2-alias/base.json

@@ -439,6 +439,23 @@
         "$type": "borderRadius",
         "$value": "{radius.full}"
       }
+    },
+    "motion": {
+      "duration": {
+        "none":    { "$type": "duration", "$value": "{duration.none}" },
+        "instant": { "$type": "duration", "$value": "{duration.instant}" },
+        "fast":    { "$type": "duration", "$value": "{duration.fast}" },
+        "normal":  { "$type": "duration", "$value": "{duration.normal}" },
+        "slow":    { "$type": "duration", "$value": "{duration.slow}" },
+        "slower":  { "$type": "duration", "$value": "{duration.slower}" }
+      },
+      "easing": {
+        "standard": { "$type": "other", "$value": "{easing.standard}" },
+        "enter":    { "$type": "other", "$value": "{easing.enter}" },
+        "exit":     { "$type": "other", "$value": "{easing.exit}" },
+        "spring":   { "$type": "other", "$value": "{easing.spring}" },
+        "linear":   { "$type": "other", "$value": "{easing.linear}" }
+      }
     }
   }
 }

package/tokens/t3-semantics/ui.json

@@ -1358,5 +1358,17 @@
         }
       ]
     }
+  },
+  "motion": {
+    "duration": {
+      "micro":     { "$type": "duration", "$value": "{alias.motion.duration.fast}" },
+      "component": { "$type": "duration", "$value": "{alias.motion.duration.normal}" },
+      "view":      { "$type": "duration", "$value": "{alias.motion.duration.slow}" }
+    },
+    "easing": {
+      "default": { "$type": "other", "$value": "{alias.motion.easing.standard}" },
+      "enter":   { "$type": "other", "$value": "{alias.motion.easing.spring}" },
+      "exit":    { "$type": "other", "$value": "{alias.motion.easing.exit}" }
+    }
   }
 }