@bug-on/md3-tokens 3.0.0 → 3.0.3

package/dist/index.js

@@ -1,8 +1,25 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,14 +37,142 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DEFAULT_EFFECTS_SPRING: () => DEFAULT_EFFECTS_SPRING,
+  DEFAULT_SPATIAL_SPRING: () => DEFAULT_SPATIAL_SPRING,
+  FAST_EFFECTS_SPRING: () => FAST_EFFECTS_SPRING,
+  FAST_SPATIAL_SPRING: () => FAST_SPATIAL_SPRING,
+  SLOW_EFFECTS_SPRING: () => SLOW_EFFECTS_SPRING,
+  SLOW_SPATIAL_SPRING: () => SLOW_SPATIAL_SPRING,
+  asymmetricCorners: () => asymmetricCorners,
+  asymmetricCornersToCSS: () => asymmetricCornersToCSS,
+  cornerCssVar: () => cornerCssVar,
+  cornerRadius: () => cornerRadius,
   duration: () => duration,
   easing: () => easing,
+  framerSprings: () => framerSprings,
+  getCSSTransition: () => getCSSTransition,
+  getSpring: () => getSpring,
+  md3SpringTokens: () => md3SpringTokens,
   motionTokens: () => motionTokens,
-  spring: () => spring
+  opticalRadius: () => opticalRadius,
+  shapeTokens: () => shapeTokens,
+  spring: () => spring,
+  webCurves: () => webCurves
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/motion.ts
+var md3SpringTokens = {
+  fast: {
+    spatial: { dampingRatio: 0.6, stiffness: 800 },
+    effects: { dampingRatio: 1, stiffness: 3800 }
+  },
+  default: {
+    spatial: { dampingRatio: 0.8, stiffness: 380 },
+    effects: { dampingRatio: 1, stiffness: 1600 }
+  },
+  slow: {
+    spatial: { dampingRatio: 0.8, stiffness: 200 },
+    effects: { dampingRatio: 1, stiffness: 800 }
+  }
+};
+function toFramerSpring(token) {
+  const damping = 2 * token.dampingRatio * Math.sqrt(token.stiffness);
+  return { type: "spring", stiffness: token.stiffness, damping };
+}
+var framerSprings = {
+  fast: {
+    spatial: toFramerSpring(md3SpringTokens.fast.spatial),
+    effects: toFramerSpring(md3SpringTokens.fast.effects)
+  },
+  default: {
+    spatial: toFramerSpring(md3SpringTokens.default.spatial),
+    effects: toFramerSpring(md3SpringTokens.default.effects)
+  },
+  slow: {
+    spatial: toFramerSpring(md3SpringTokens.slow.spatial),
+    effects: toFramerSpring(md3SpringTokens.slow.effects)
+  }
+};
+var FAST_SPATIAL_SPRING = framerSprings.fast.spatial;
+var FAST_EFFECTS_SPRING = framerSprings.fast.effects;
+var DEFAULT_SPATIAL_SPRING = framerSprings.default.spatial;
+var DEFAULT_EFFECTS_SPRING = framerSprings.default.effects;
+var SLOW_SPATIAL_SPRING = framerSprings.slow.spatial;
+var SLOW_EFFECTS_SPRING = framerSprings.slow.effects;
+var webCurves = {
+  expressive: {
+    fast: {
+      spatial: {
+        curve: "cubic-bezier(0.42, 1.67, 0.21, 0.90)",
+        durationMs: 350
+      },
+      effects: {
+        curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+        durationMs: 150
+      }
+    },
+    default: {
+      spatial: {
+        curve: "cubic-bezier(0.38, 1.21, 0.22, 1.00)",
+        durationMs: 500
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+        durationMs: 200
+      }
+    },
+    slow: {
+      spatial: {
+        curve: "cubic-bezier(0.39, 1.29, 0.35, 0.98)",
+        durationMs: 650
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+        durationMs: 300
+      }
+    }
+  },
+  standard: {
+    fast: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 350
+      },
+      effects: {
+        curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+        durationMs: 150
+      }
+    },
+    default: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 500
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+        durationMs: 200
+      }
+    },
+    slow: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 750
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+        durationMs: 300
+      }
+    }
+  }
+};
+function getSpring(_scheme, speed, type) {
+  return framerSprings[speed][type];
+}
+function getCSSTransition(scheme, speed, type) {
+  const { curve, durationMs } = webCurves[scheme][speed][type];
+  return `${durationMs}ms ${curve}`;
+}
 var duration = {
   short1: 50,
   short2: 100,
@@ -47,25 +192,128 @@ var duration = {
   extraLong4: 1e3
 };
 var easing = {
+  // Emphasized set — most common for M3 Expressive transitions
+  emphasized: [0.2, 0, 0, 1],
+  emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
+  emphasizedDecelerate: [0.05, 0.7, 0.1, 1],
+  // Standard set — for simple/utility transitions and CSS fallback
   standard: [0.2, 0, 0, 1],
   standardAccelerate: [0.3, 0, 1, 1],
   standardDecelerate: [0, 0, 0, 1],
-  emphasized: [0.2, 0, 0, 1],
-  emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
-  emphasizedDecelerate: [0.05, 0.7, 0.1, 1]
+  // Legacy set (M2 compat)
+  legacy: [0.4, 0, 0.2, 1],
+  legacyAccelerate: [0.4, 0, 1, 1],
+  legacyDecelerate: [0, 0, 0.2, 1],
+  // Linear
+  linear: [0, 0, 1, 1]
 };
 var spring = {
-  default: { type: "spring", stiffness: 500, damping: 30, mass: 0.8 },
-  snappy: { type: "spring", stiffness: 600, damping: 25 },
-  gentle: { type: "spring", stiffness: 300, damping: 20 },
-  bouncy: { type: "spring", stiffness: 400, damping: 15 }
+  default: framerSprings.default.spatial,
+  snappy: framerSprings.fast.spatial,
+  gentle: framerSprings.slow.spatial,
+  bouncy: __spreadProps(__spreadValues({}, framerSprings.fast.spatial), {
+    damping: framerSprings.fast.spatial.damping * 0.5
+  })
+};
+var motionTokens = {
+  duration,
+  easing,
+  spring: md3SpringTokens,
+  framerSprings,
+  webCurves
+};
+
+// src/shape.ts
+var cornerRadius = {
+  none: 0,
+  extraSmall: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+  /** New in M3 Expressive (May 2025) */
+  largeIncreased: 20,
+  extraLarge: 28,
+  /** New in M3 Expressive (May 2025) */
+  extraLargeIncreased: 32,
+  /** New in M3 Expressive (May 2025) */
+  extraExtraLarge: 48,
+  full: 9999
+};
+var cornerCssVar = {
+  none: "--md-sys-shape-corner-none",
+  extraSmall: "--md-sys-shape-corner-extra-small",
+  small: "--md-sys-shape-corner-small",
+  medium: "--md-sys-shape-corner-medium",
+  large: "--md-sys-shape-corner-large",
+  largeIncreased: "--md-sys-shape-corner-large-increased",
+  extraLarge: "--md-sys-shape-corner-extra-large",
+  extraLargeIncreased: "--md-sys-shape-corner-extra-large-increased",
+  extraExtraLarge: "--md-sys-shape-corner-extra-extra-large",
+  full: "--md-sys-shape-corner-full"
+};
+var asymmetricCorners = {
+  /** Fully rounded top, square bottom — e.g. menu at top of screen. */
+  topFull: (r = cornerRadius.extraLarge) => ({
+    topLeft: r,
+    topRight: r,
+    bottomRight: 0,
+    bottomLeft: 0
+  }),
+  /** Square top, fully rounded bottom — e.g. menu at bottom of screen. */
+  bottomFull: (r = cornerRadius.extraLarge) => ({
+    topLeft: 0,
+    topRight: 0,
+    bottomRight: r,
+    bottomLeft: r
+  }),
+  /** Rounded start edge only — e.g. left item in a grouped set. */
+  startFull: (r = cornerRadius.full) => ({
+    topLeft: r,
+    topRight: 0,
+    bottomRight: 0,
+    bottomLeft: r
+  }),
+  /** Rounded end edge only — e.g. right item in a grouped set. */
+  endFull: (r = cornerRadius.full) => ({
+    topLeft: 0,
+    topRight: r,
+    bottomRight: r,
+    bottomLeft: 0
+  })
+};
+function asymmetricCornersToCSS(corners) {
+  return `${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px`;
+}
+function opticalRadius(outerRadius, padding) {
+  return Math.max(0, outerRadius - padding);
+}
+var shapeTokens = {
+  cornerRadius,
+  cornerCssVar,
+  asymmetricCorners
 };
-var motionTokens = { duration, easing, spring };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEFAULT_EFFECTS_SPRING,
+  DEFAULT_SPATIAL_SPRING,
+  FAST_EFFECTS_SPRING,
+  FAST_SPATIAL_SPRING,
+  SLOW_EFFECTS_SPRING,
+  SLOW_SPATIAL_SPRING,
+  asymmetricCorners,
+  asymmetricCornersToCSS,
+  cornerCssVar,
+  cornerRadius,
   duration,
   easing,
+  framerSprings,
+  getCSSTransition,
+  getSpring,
+  md3SpringTokens,
   motionTokens,
-  spring
+  opticalRadius,
+  shapeTokens,
+  spring,
+  webCurves
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/motion.ts"],"sourcesContent":["export { duration, easing, motionTokens, spring } from \"./motion\";\n","/**\n * MD3 Expressive Motion Tokens\n * Framework-agnostic JS objects.\n */\n\nexport const duration = {\n\tshort1: 50,\n\tshort2: 100,\n\tshort3: 150,\n\tshort4: 200,\n\tmedium1: 250,\n\tmedium2: 300,\n\tmedium3: 350,\n\tmedium4: 400,\n\tlong1: 450,\n\tlong2: 500,\n\tlong3: 550,\n\tlong4: 600,\n\textraLong1: 700,\n\textraLong2: 800,\n\textraLong3: 900,\n\textraLong4: 1000,\n} as const;\n\nexport const easing = {\n\tstandard: [0.2, 0, 0, 1] as [number, number, number, number],\n\tstandardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],\n\tstandardDecelerate: [0, 0, 0, 1] as [number, number, number, number],\n\temphasized: [0.2, 0, 0, 1] as [number, number, number, number],\n\temphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],\n\temphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t],\n} as const;\n\nexport const spring = {\n\tdefault: { type: \"spring\" as const, stiffness: 500, damping: 30, mass: 0.8 },\n\tsnappy: { type: \"spring\" as const, stiffness: 600, damping: 25 },\n\tgentle: { type: \"spring\" as const, stiffness: 300, damping: 20 },\n\tbouncy: { type: \"spring\" as const, stiffness: 400, damping: 15 },\n} as const;\n\nexport const motionTokens = { duration, easing, spring };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,IAAM,WAAW;AAAA,EACvB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACb;AAEO,IAAM,SAAS;AAAA,EACrB,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACvB,oBAAoB,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACjC,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/B,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACzB,sBAAsB,CAAC,KAAK,GAAG,KAAK,IAAI;AAAA,EACxC,sBAAsB,CAAC,MAAM,KAAK,KAAK,CAAG;AAM3C;AAEO,IAAM,SAAS;AAAA,EACrB,SAAS,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,IAAI,MAAM,IAAI;AAAA,EAC3E,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAChE;AAEO,IAAM,eAAe,EAAE,UAAU,QAAQ,OAAO;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/motion.ts","../src/shape.ts"],"sourcesContent":["// Motion tokens — MD3 Expressive physics-based system + legacy easing/duration\nexport {\n\tDEFAULT_EFFECTS_SPRING,\n\tDEFAULT_SPATIAL_SPRING,\n\t// Legacy duration + easing (still valid, kept as fallback)\n\tduration,\n\teasing,\n\tFAST_EFFECTS_SPRING,\n\tFAST_SPATIAL_SPRING,\n\ttype FramerSpring,\n\t// Framer Motion ready presets\n\tframerSprings,\n\tgetCSSTransition,\n\t// Helpers\n\tgetSpring,\n\ttype MD3SpringToken,\n\t// Types\n\ttype MotionScheme,\n\t// Raw MD3 spring tokens (dampingRatio + stiffness)\n\tmd3SpringTokens,\n\t// Aggregate\n\tmotionTokens,\n\tSLOW_EFFECTS_SPRING,\n\tSLOW_SPATIAL_SPRING,\n\ttype SpringSpeed,\n\ttype SpringType,\n\t// @deprecated legacy spring presets\n\tspring,\n\ttype WebCurveToken,\n\t// Web CSS curve equivalents\n\twebCurves,\n} from \"./motion\";\n\n// Shape tokens — MD3 Expressive 10-level corner radius scale + helpers\nexport {\n\ttype AsymmetricCorners,\n\tasymmetricCorners,\n\tasymmetricCornersToCSS,\n\t// Types\n\ttype CornerRadiusKey,\n\tcornerCssVar,\n\t// Corner radius values\n\tcornerRadius,\n\topticalRadius,\n\t// Aggregate\n\tshapeTokens,\n} from \"./shape\";\n","/**\n * MD3 Expressive Motion Tokens\n *\n * Source of truth for all motion in the design system. Two layers:\n *\n * 1. **Physics-based system** (May 2025, primary) — Spring tokens per the MD3\n *    motion physics system. Use these for Framer Motion / JS animations.\n * 2. **Legacy easing + duration** (still valid for CSS transitions) — Original\n *    MD3 cubic-bezier tokens kept as a fallback.\n *\n * @see https://m3.material.io/styles/motion/overview/how-it-works\n * @see https://m3.material.io/styles/motion/overview/specs\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** Motion scheme — controls whether springs bounce (expressive) or not (standard). */\nexport type MotionScheme = \"expressive\" | \"standard\";\n\n/** Spring speed tier. */\nexport type SpringSpeed = \"fast\" | \"default\" | \"slow\";\n\n/** Spring type — spatial (position/size/shape) or effects (color/opacity). */\nexport type SpringType = \"spatial\" | \"effects\";\n\n/** Raw MD3 spring token — damping ratio + stiffness as specified in the design token. */\nexport interface MD3SpringToken {\n\t/** Damping ratio: 0 = no damping, 1 = critically damped (no bounce). */\n\tdampingRatio: number;\n\t/** Spring stiffness. Higher = faster animation. */\n\tstiffness: number;\n}\n\n/** A pre-converted spring ready for Framer Motion `Transition`. */\nexport interface FramerSpring {\n\ttype: \"spring\";\n\t/** Absolute damping coefficient (converted from dampingRatio). */\n\tdamping: number;\n\tstiffness: number;\n}\n\n/** Web CSS curve equivalent for a spring token (for CSS transitions). */\nexport interface WebCurveToken {\n\t/** CSS cubic-bezier(...) string. */\n\tcurve: string;\n\t/** Duration in milliseconds. */\n\tdurationMs: number;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// MD3 Expressive Spring Tokens (raw: dampingRatio + stiffness)\n// Source: md.sys.motion.spring.{speed}.{type}\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Raw MD3 spring tokens per the official specification.\n * Values are identical for both \"expressive\" and \"standard\" schemes —\n * the scheme is applied at the product level, not the token level.\n *\n * @see https://m3.material.io/styles/motion/easing-and-duration/tokens-specs\n */\nexport const md3SpringTokens = {\n\tfast: {\n\t\tspatial: { dampingRatio: 0.6, stiffness: 800 } satisfies MD3SpringToken,\n\t\teffects: { dampingRatio: 1.0, stiffness: 3800 } satisfies MD3SpringToken,\n\t},\n\tdefault: {\n\t\tspatial: { dampingRatio: 0.8, stiffness: 380 } satisfies MD3SpringToken,\n\t\teffects: { dampingRatio: 1.0, stiffness: 1600 } satisfies MD3SpringToken,\n\t},\n\tslow: {\n\t\tspatial: { dampingRatio: 0.8, stiffness: 200 } satisfies MD3SpringToken,\n\t\teffects: { dampingRatio: 1.0, stiffness: 800 } satisfies MD3SpringToken,\n\t},\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Framer Motion Spring Presets\n// damping = 2 * dampingRatio * sqrt(stiffness * mass),  mass = 1 (default)\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction toFramerSpring(token: MD3SpringToken): FramerSpring {\n\tconst damping = 2 * token.dampingRatio * Math.sqrt(token.stiffness);\n\treturn { type: \"spring\", stiffness: token.stiffness, damping };\n}\n\n/**\n * Ready-to-use Framer Motion spring configs, derived from MD3 spring tokens.\n *\n * Use **spatial** springs for: position, size, border-radius, rotation, scale.\n * Use **effects** springs for: color, opacity (no overshoot).\n *\n * @example\n * ```tsx\n * import { framerSprings } from \"@md3-expressive/tokens\";\n * <m.div transition={framerSprings.fast.spatial} />\n * ```\n */\nexport const framerSprings = {\n\tfast: {\n\t\tspatial: toFramerSpring(md3SpringTokens.fast.spatial),\n\t\teffects: toFramerSpring(md3SpringTokens.fast.effects),\n\t},\n\tdefault: {\n\t\tspatial: toFramerSpring(md3SpringTokens.default.spatial),\n\t\teffects: toFramerSpring(md3SpringTokens.default.effects),\n\t},\n\tslow: {\n\t\tspatial: toFramerSpring(md3SpringTokens.slow.spatial),\n\t\teffects: toFramerSpring(md3SpringTokens.slow.effects),\n\t},\n} as const;\n\n// Convenient named aliases (mirror menu-animations.ts naming convention)\nexport const FAST_SPATIAL_SPRING = framerSprings.fast.spatial;\nexport const FAST_EFFECTS_SPRING = framerSprings.fast.effects;\nexport const DEFAULT_SPATIAL_SPRING = framerSprings.default.spatial;\nexport const DEFAULT_EFFECTS_SPRING = framerSprings.default.effects;\nexport const SLOW_SPATIAL_SPRING = framerSprings.slow.spatial;\nexport const SLOW_EFFECTS_SPRING = framerSprings.slow.effects;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Web CSS Curve Conversions\n// Use these when Framer Motion is not available (pure CSS transitions).\n// Source: https://m3.material.io/styles/motion/overview/specs#web-convert\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * CSS cubic-bezier + duration equivalents of MD3 spring tokens.\n * For non-interruptible CSS transitions when JS springs are unavailable.\n *\n * @see https://m3.material.io/styles/motion/overview/specs\n */\nexport const webCurves = {\n\texpressive: {\n\t\tfast: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.42, 1.67, 0.21, 0.90)\",\n\t\t\t\tdurationMs: 350,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.31, 0.94, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 150,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tdefault: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.38, 1.21, 0.22, 1.00)\",\n\t\t\t\tdurationMs: 500,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.80, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 200,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tslow: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.39, 1.29, 0.35, 0.98)\",\n\t\t\t\tdurationMs: 650,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.88, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 300,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t},\n\tstandard: {\n\t\tfast: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.27, 1.06, 0.18, 1.00)\",\n\t\t\t\tdurationMs: 350,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.31, 0.94, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 150,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tdefault: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.27, 1.06, 0.18, 1.00)\",\n\t\t\t\tdurationMs: 500,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.80, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 200,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t\tslow: {\n\t\t\tspatial: {\n\t\t\t\tcurve: \"cubic-bezier(0.27, 1.06, 0.18, 1.00)\",\n\t\t\t\tdurationMs: 750,\n\t\t\t} satisfies WebCurveToken,\n\t\t\teffects: {\n\t\t\t\tcurve: \"cubic-bezier(0.34, 0.88, 0.34, 1.00)\",\n\t\t\t\tdurationMs: 300,\n\t\t\t} satisfies WebCurveToken,\n\t\t},\n\t},\n} as const;\n\n/**\n * Get a Framer Motion spring config for the given scheme, speed, and type.\n *\n * @example\n * ```tsx\n * transition={getSpring(\"expressive\", \"fast\", \"spatial\")}\n * ```\n */\nexport function getSpring(\n\t_scheme: MotionScheme,\n\tspeed: SpringSpeed,\n\ttype: SpringType,\n): FramerSpring {\n\t// Spring token values are scheme-agnostic; scheme is applied at product level.\n\treturn framerSprings[speed][type];\n}\n\n/**\n * Get a CSS transition string for the given scheme, speed, and type.\n *\n * @example\n * ```ts\n * element.style.transition = `transform ${getCSSTransition(\"expressive\", \"fast\", \"spatial\")}`;\n * ```\n */\nexport function getCSSTransition(\n\tscheme: MotionScheme,\n\tspeed: SpringSpeed,\n\ttype: SpringType,\n): string {\n\tconst { curve, durationMs } = webCurves[scheme][speed][type];\n\treturn `${durationMs}ms ${curve}`;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Legacy: Duration tokens (ms) — md.sys.motion.duration.*\n// Still valid; used as CSS fallback and for easing-based animations.\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const duration = {\n\tshort1: 50,\n\tshort2: 100,\n\tshort3: 150,\n\tshort4: 200,\n\tmedium1: 250,\n\tmedium2: 300,\n\tmedium3: 350,\n\tmedium4: 400,\n\tlong1: 450,\n\tlong2: 500,\n\tlong3: 550,\n\tlong4: 600,\n\textraLong1: 700,\n\textraLong2: 800,\n\textraLong3: 900,\n\textraLong4: 1000,\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Legacy: Easing tokens — md.sys.motion.easing.*\n// Cubic-bezier control points [x1, y1, x2, y2].\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const easing = {\n\t// Emphasized set — most common for M3 Expressive transitions\n\temphasized: [0.2, 0, 0, 1] as [number, number, number, number],\n\temphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],\n\temphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t],\n\n\t// Standard set — for simple/utility transitions and CSS fallback\n\tstandard: [0.2, 0, 0, 1] as [number, number, number, number],\n\tstandardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],\n\tstandardDecelerate: [0, 0, 0, 1] as [number, number, number, number],\n\n\t// Legacy set (M2 compat)\n\tlegacy: [0.4, 0, 0.2, 1] as [number, number, number, number],\n\tlegacyAccelerate: [0.4, 0, 1, 1] as [number, number, number, number],\n\tlegacyDecelerate: [0, 0, 0.2, 1] as [number, number, number, number],\n\n\t// Linear\n\tlinear: [0, 0, 1, 1] as [number, number, number, number],\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// @deprecated Legacy spring presets — kept for backward compat only.\n// Migrate to framerSprings.* or the named FAST_SPATIAL_SPRING etc. exports.\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** @deprecated Use `framerSprings.default.spatial` or `DEFAULT_SPATIAL_SPRING` instead. */\nexport const spring = {\n\tdefault: framerSprings.default.spatial,\n\tsnappy: framerSprings.fast.spatial,\n\tgentle: framerSprings.slow.spatial,\n\tbouncy: {\n\t\t...framerSprings.fast.spatial,\n\t\tdamping: framerSprings.fast.spatial.damping * 0.5,\n\t},\n} as const;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Aggregate export\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const motionTokens = {\n\tduration,\n\teasing,\n\tspring: md3SpringTokens,\n\tframerSprings,\n\twebCurves,\n} as const;\n","/**\n * MD3 Expressive Shape Tokens\n *\n * TypeScript counterpart to `shape.css`. Provides numeric corner radius values,\n * CSS custom property names, and asymmetric corner helpers.\n *\n * Updated for M3 Expressive (May 2025): 10-level corner radius scale.\n *\n * @see https://m3.material.io/styles/shape/corner-radius-scale\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Corner radius scale — numeric values in pixels\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Numeric corner radius values (px) for all 10 shape scale levels.\n * Map directly to `--md-sys-shape-corner-*` CSS custom properties.\n *\n * @example\n * ```ts\n * element.style.borderRadius = `${cornerRadius.medium}px`; // 12px\n * ```\n */\nexport const cornerRadius = {\n\tnone: 0,\n\textraSmall: 4,\n\tsmall: 8,\n\tmedium: 12,\n\tlarge: 16,\n\t/** New in M3 Expressive (May 2025) */\n\tlargeIncreased: 20,\n\textraLarge: 28,\n\t/** New in M3 Expressive (May 2025) */\n\textraLargeIncreased: 32,\n\t/** New in M3 Expressive (May 2025) */\n\textraExtraLarge: 48,\n\tfull: 9999,\n} as const;\n\nexport type CornerRadiusKey = keyof typeof cornerRadius;\n\n// ─────────────────────────────────────────────────────────────────────────────\n// CSS custom property names\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Maps each corner radius key to its CSS custom property name.\n *\n * @example\n * ```ts\n * const cssVar = cornerCssVar.medium; // \"--md-sys-shape-corner-medium\"\n * element.style.borderRadius = `var(${cssVar})`;\n * ```\n */\nexport const cornerCssVar: Record<CornerRadiusKey, string> = {\n\tnone: \"--md-sys-shape-corner-none\",\n\textraSmall: \"--md-sys-shape-corner-extra-small\",\n\tsmall: \"--md-sys-shape-corner-small\",\n\tmedium: \"--md-sys-shape-corner-medium\",\n\tlarge: \"--md-sys-shape-corner-large\",\n\tlargeIncreased: \"--md-sys-shape-corner-large-increased\",\n\textraLarge: \"--md-sys-shape-corner-extra-large\",\n\textraLargeIncreased: \"--md-sys-shape-corner-extra-large-increased\",\n\textraExtraLarge: \"--md-sys-shape-corner-extra-extra-large\",\n\tfull: \"--md-sys-shape-corner-full\",\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Asymmetric corner helpers\n// Used for inner-corner components (menus, split buttons, grouped items).\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Describes per-corner rounding for asymmetric shapes.\n * Follows CSS `border-radius` shorthand order:\n * top-left, top-right, bottom-right, bottom-left.\n */\nexport interface AsymmetricCorners {\n\ttopLeft: number;\n\ttopRight: number;\n\tbottomRight: number;\n\tbottomLeft: number;\n}\n\n/** Shorthand presets for common asymmetric corner patterns. */\nexport const asymmetricCorners = {\n\t/** Fully rounded top, square bottom — e.g. menu at top of screen. */\n\ttopFull: (r = cornerRadius.extraLarge): AsymmetricCorners => ({\n\t\ttopLeft: r,\n\t\ttopRight: r,\n\t\tbottomRight: 0,\n\t\tbottomLeft: 0,\n\t}),\n\t/** Square top, fully rounded bottom — e.g. menu at bottom of screen. */\n\tbottomFull: (r = cornerRadius.extraLarge): AsymmetricCorners => ({\n\t\ttopLeft: 0,\n\t\ttopRight: 0,\n\t\tbottomRight: r,\n\t\tbottomLeft: r,\n\t}),\n\t/** Rounded start edge only — e.g. left item in a grouped set. */\n\tstartFull: (r = cornerRadius.full): AsymmetricCorners => ({\n\t\ttopLeft: r,\n\t\ttopRight: 0,\n\t\tbottomRight: 0,\n\t\tbottomLeft: r,\n\t}),\n\t/** Rounded end edge only — e.g. right item in a grouped set. */\n\tendFull: (r = cornerRadius.full): AsymmetricCorners => ({\n\t\ttopLeft: 0,\n\t\ttopRight: r,\n\t\tbottomRight: r,\n\t\tbottomLeft: 0,\n\t}),\n} as const;\n\n/**\n * Converts an `AsymmetricCorners` object to a CSS `border-radius` string.\n *\n * @example\n * ```ts\n * element.style.borderRadius = toCSS(asymmetricCorners.topFull());\n * // \"28px 28px 0px 0px\"\n * ```\n */\nexport function asymmetricCornersToCSS(corners: AsymmetricCorners): string {\n\treturn `${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px`;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Optical roundness helper\n// When nesting rounded objects: inner radius = outer radius - padding\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Calculates the inner border-radius that maintains optical roundness\n * when nesting one rounded container inside another.\n *\n * Formula: `inner = outer - padding`\n *\n * @see https://m3.material.io/styles/shape/corner-radius-scale#adjust-for-optical-roundness\n *\n * @example\n * ```ts\n * // Container has extraExtraLarge (48px), padding is 14px\n * const inner = opticalRadius(cornerRadius.extraExtraLarge, 14); // 34\n * ```\n */\nexport function opticalRadius(outerRadius: number, padding: number): number {\n\treturn Math.max(0, outerRadius - padding);\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Aggregate export\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport const shapeTokens = {\n\tcornerRadius,\n\tcornerCssVar,\n\tasymmetricCorners,\n} as const;\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -1,4 +1,135 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
 // src/motion.ts
+var md3SpringTokens = {
+  fast: {
+    spatial: { dampingRatio: 0.6, stiffness: 800 },
+    effects: { dampingRatio: 1, stiffness: 3800 }
+  },
+  default: {
+    spatial: { dampingRatio: 0.8, stiffness: 380 },
+    effects: { dampingRatio: 1, stiffness: 1600 }
+  },
+  slow: {
+    spatial: { dampingRatio: 0.8, stiffness: 200 },
+    effects: { dampingRatio: 1, stiffness: 800 }
+  }
+};
+function toFramerSpring(token) {
+  const damping = 2 * token.dampingRatio * Math.sqrt(token.stiffness);
+  return { type: "spring", stiffness: token.stiffness, damping };
+}
+var framerSprings = {
+  fast: {
+    spatial: toFramerSpring(md3SpringTokens.fast.spatial),
+    effects: toFramerSpring(md3SpringTokens.fast.effects)
+  },
+  default: {
+    spatial: toFramerSpring(md3SpringTokens.default.spatial),
+    effects: toFramerSpring(md3SpringTokens.default.effects)
+  },
+  slow: {
+    spatial: toFramerSpring(md3SpringTokens.slow.spatial),
+    effects: toFramerSpring(md3SpringTokens.slow.effects)
+  }
+};
+var FAST_SPATIAL_SPRING = framerSprings.fast.spatial;
+var FAST_EFFECTS_SPRING = framerSprings.fast.effects;
+var DEFAULT_SPATIAL_SPRING = framerSprings.default.spatial;
+var DEFAULT_EFFECTS_SPRING = framerSprings.default.effects;
+var SLOW_SPATIAL_SPRING = framerSprings.slow.spatial;
+var SLOW_EFFECTS_SPRING = framerSprings.slow.effects;
+var webCurves = {
+  expressive: {
+    fast: {
+      spatial: {
+        curve: "cubic-bezier(0.42, 1.67, 0.21, 0.90)",
+        durationMs: 350
+      },
+      effects: {
+        curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+        durationMs: 150
+      }
+    },
+    default: {
+      spatial: {
+        curve: "cubic-bezier(0.38, 1.21, 0.22, 1.00)",
+        durationMs: 500
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+        durationMs: 200
+      }
+    },
+    slow: {
+      spatial: {
+        curve: "cubic-bezier(0.39, 1.29, 0.35, 0.98)",
+        durationMs: 650
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+        durationMs: 300
+      }
+    }
+  },
+  standard: {
+    fast: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 350
+      },
+      effects: {
+        curve: "cubic-bezier(0.31, 0.94, 0.34, 1.00)",
+        durationMs: 150
+      }
+    },
+    default: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 500
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.80, 0.34, 1.00)",
+        durationMs: 200
+      }
+    },
+    slow: {
+      spatial: {
+        curve: "cubic-bezier(0.27, 1.06, 0.18, 1.00)",
+        durationMs: 750
+      },
+      effects: {
+        curve: "cubic-bezier(0.34, 0.88, 0.34, 1.00)",
+        durationMs: 300
+      }
+    }
+  }
+};
+function getSpring(_scheme, speed, type) {
+  return framerSprings[speed][type];
+}
+function getCSSTransition(scheme, speed, type) {
+  const { curve, durationMs } = webCurves[scheme][speed][type];
+  return `${durationMs}ms ${curve}`;
+}
 var duration = {
   short1: 50,
   short2: 100,
@@ -18,24 +149,127 @@ var duration = {
   extraLong4: 1e3
 };
 var easing = {
+  // Emphasized set — most common for M3 Expressive transitions
+  emphasized: [0.2, 0, 0, 1],
+  emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
+  emphasizedDecelerate: [0.05, 0.7, 0.1, 1],
+  // Standard set — for simple/utility transitions and CSS fallback
   standard: [0.2, 0, 0, 1],
   standardAccelerate: [0.3, 0, 1, 1],
   standardDecelerate: [0, 0, 0, 1],
-  emphasized: [0.2, 0, 0, 1],
-  emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
-  emphasizedDecelerate: [0.05, 0.7, 0.1, 1]
+  // Legacy set (M2 compat)
+  legacy: [0.4, 0, 0.2, 1],
+  legacyAccelerate: [0.4, 0, 1, 1],
+  legacyDecelerate: [0, 0, 0.2, 1],
+  // Linear
+  linear: [0, 0, 1, 1]
 };
 var spring = {
-  default: { type: "spring", stiffness: 500, damping: 30, mass: 0.8 },
-  snappy: { type: "spring", stiffness: 600, damping: 25 },
-  gentle: { type: "spring", stiffness: 300, damping: 20 },
-  bouncy: { type: "spring", stiffness: 400, damping: 15 }
+  default: framerSprings.default.spatial,
+  snappy: framerSprings.fast.spatial,
+  gentle: framerSprings.slow.spatial,
+  bouncy: __spreadProps(__spreadValues({}, framerSprings.fast.spatial), {
+    damping: framerSprings.fast.spatial.damping * 0.5
+  })
+};
+var motionTokens = {
+  duration,
+  easing,
+  spring: md3SpringTokens,
+  framerSprings,
+  webCurves
+};
+
+// src/shape.ts
+var cornerRadius = {
+  none: 0,
+  extraSmall: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+  /** New in M3 Expressive (May 2025) */
+  largeIncreased: 20,
+  extraLarge: 28,
+  /** New in M3 Expressive (May 2025) */
+  extraLargeIncreased: 32,
+  /** New in M3 Expressive (May 2025) */
+  extraExtraLarge: 48,
+  full: 9999
+};
+var cornerCssVar = {
+  none: "--md-sys-shape-corner-none",
+  extraSmall: "--md-sys-shape-corner-extra-small",
+  small: "--md-sys-shape-corner-small",
+  medium: "--md-sys-shape-corner-medium",
+  large: "--md-sys-shape-corner-large",
+  largeIncreased: "--md-sys-shape-corner-large-increased",
+  extraLarge: "--md-sys-shape-corner-extra-large",
+  extraLargeIncreased: "--md-sys-shape-corner-extra-large-increased",
+  extraExtraLarge: "--md-sys-shape-corner-extra-extra-large",
+  full: "--md-sys-shape-corner-full"
+};
+var asymmetricCorners = {
+  /** Fully rounded top, square bottom — e.g. menu at top of screen. */
+  topFull: (r = cornerRadius.extraLarge) => ({
+    topLeft: r,
+    topRight: r,
+    bottomRight: 0,
+    bottomLeft: 0
+  }),
+  /** Square top, fully rounded bottom — e.g. menu at bottom of screen. */
+  bottomFull: (r = cornerRadius.extraLarge) => ({
+    topLeft: 0,
+    topRight: 0,
+    bottomRight: r,
+    bottomLeft: r
+  }),
+  /** Rounded start edge only — e.g. left item in a grouped set. */
+  startFull: (r = cornerRadius.full) => ({
+    topLeft: r,
+    topRight: 0,
+    bottomRight: 0,
+    bottomLeft: r
+  }),
+  /** Rounded end edge only — e.g. right item in a grouped set. */
+  endFull: (r = cornerRadius.full) => ({
+    topLeft: 0,
+    topRight: r,
+    bottomRight: r,
+    bottomLeft: 0
+  })
+};
+function asymmetricCornersToCSS(corners) {
+  return `${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px`;
+}
+function opticalRadius(outerRadius, padding) {
+  return Math.max(0, outerRadius - padding);
+}
+var shapeTokens = {
+  cornerRadius,
+  cornerCssVar,
+  asymmetricCorners
 };
-var motionTokens = { duration, easing, spring };
 export {
+  DEFAULT_EFFECTS_SPRING,
+  DEFAULT_SPATIAL_SPRING,
+  FAST_EFFECTS_SPRING,
+  FAST_SPATIAL_SPRING,
+  SLOW_EFFECTS_SPRING,
+  SLOW_SPATIAL_SPRING,
+  asymmetricCorners,
+  asymmetricCornersToCSS,
+  cornerCssVar,
+  cornerRadius,
   duration,
   easing,
+  framerSprings,
+  getCSSTransition,
+  getSpring,
+  md3SpringTokens,
   motionTokens,
-  spring
+  opticalRadius,
+  shapeTokens,
+  spring,
+  webCurves
 };
 //# sourceMappingURL=index.mjs.map