@portnet/ui 5.0.27 → 6.0.0

package/dist/v2/tokens/index.js

@@ -0,0 +1,313 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BREAKPOINT_KEYS", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoints.BREAKPOINT_KEYS;
+  }
+});
+Object.defineProperty(exports, "STATUS_KEYS", {
+  enumerable: true,
+  get: function get() {
+    return _statusPalette.STATUS_KEYS;
+  }
+});
+Object.defineProperty(exports, "STATUS_LABELS_FR", {
+  enumerable: true,
+  get: function get() {
+    return _statusPalette.STATUS_LABELS_FR;
+  }
+});
+Object.defineProperty(exports, "border", {
+  enumerable: true,
+  get: function get() {
+    return _colors.border;
+  }
+});
+Object.defineProperty(exports, "bpValue", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoints.bpValue;
+  }
+});
+Object.defineProperty(exports, "brand", {
+  enumerable: true,
+  get: function get() {
+    return _colors.brand;
+  }
+});
+Object.defineProperty(exports, "brandSecondary", {
+  enumerable: true,
+  get: function get() {
+    return _colors.brandSecondary;
+  }
+});
+Object.defineProperty(exports, "breakpoints", {
+  enumerable: true,
+  get: function get() {
+    return _density.breakpoints;
+  }
+});
+Object.defineProperty(exports, "colors", {
+  enumerable: true,
+  get: function get() {
+    return _colors["default"];
+  }
+});
+Object.defineProperty(exports, "dark", {
+  enumerable: true,
+  get: function get() {
+    return _colors.dark;
+  }
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "density", {
+  enumerable: true,
+  get: function get() {
+    return _density.density;
+  }
+});
+Object.defineProperty(exports, "densityLayout", {
+  enumerable: true,
+  get: function get() {
+    return _density["default"];
+  }
+});
+Object.defineProperty(exports, "duration", {
+  enumerable: true,
+  get: function get() {
+    return _motion.duration;
+  }
+});
+Object.defineProperty(exports, "durationCss", {
+  enumerable: true,
+  get: function get() {
+    return _motion.durationCss;
+  }
+});
+Object.defineProperty(exports, "easing", {
+  enumerable: true,
+  get: function get() {
+    return _motion.easing;
+  }
+});
+Object.defineProperty(exports, "focus", {
+  enumerable: true,
+  get: function get() {
+    return _colors.focus;
+  }
+});
+Object.defineProperty(exports, "fontFamily", {
+  enumerable: true,
+  get: function get() {
+    return _typography.fontFamily;
+  }
+});
+Object.defineProperty(exports, "fontSize", {
+  enumerable: true,
+  get: function get() {
+    return _typography.fontSize;
+  }
+});
+Object.defineProperty(exports, "fontWeight", {
+  enumerable: true,
+  get: function get() {
+    return _typography.fontWeight;
+  }
+});
+Object.defineProperty(exports, "ink", {
+  enumerable: true,
+  get: function get() {
+    return _colors.ink;
+  }
+});
+Object.defineProperty(exports, "layout", {
+  enumerable: true,
+  get: function get() {
+    return _density.layout;
+  }
+});
+Object.defineProperty(exports, "letterSpacing", {
+  enumerable: true,
+  get: function get() {
+    return _typography.letterSpacing;
+  }
+});
+Object.defineProperty(exports, "lineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _typography.lineHeight;
+  }
+});
+Object.defineProperty(exports, "motion", {
+  enumerable: true,
+  get: function get() {
+    return _motion["default"];
+  }
+});
+Object.defineProperty(exports, "mq", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoints.mq;
+  }
+});
+Object.defineProperty(exports, "ms", {
+  enumerable: true,
+  get: function get() {
+    return _motion.ms;
+  }
+});
+Object.defineProperty(exports, "muiShadows", {
+  enumerable: true,
+  get: function get() {
+    return _shadows.muiShadows;
+  }
+});
+Object.defineProperty(exports, "radius", {
+  enumerable: true,
+  get: function get() {
+    return _radius["default"];
+  }
+});
+Object.defineProperty(exports, "semantic", {
+  enumerable: true,
+  get: function get() {
+    return _colors.semantic;
+  }
+});
+Object.defineProperty(exports, "shadows", {
+  enumerable: true,
+  get: function get() {
+    return _shadows["default"];
+  }
+});
+Object.defineProperty(exports, "spacing", {
+  enumerable: true,
+  get: function get() {
+    return _spacing["default"];
+  }
+});
+Object.defineProperty(exports, "spacingBase", {
+  enumerable: true,
+  get: function get() {
+    return _spacing.spacingBase;
+  }
+});
+Object.defineProperty(exports, "state", {
+  enumerable: true,
+  get: function get() {
+    return _state["default"];
+  }
+});
+Object.defineProperty(exports, "status", {
+  enumerable: true,
+  get: function get() {
+    return _colors.status;
+  }
+});
+Object.defineProperty(exports, "statusPalette", {
+  enumerable: true,
+  get: function get() {
+    return _statusPalette["default"];
+  }
+});
+Object.defineProperty(exports, "statusToken", {
+  enumerable: true,
+  get: function get() {
+    return _statusPalette.statusToken;
+  }
+});
+Object.defineProperty(exports, "surface", {
+  enumerable: true,
+  get: function get() {
+    return _colors.surface;
+  }
+});
+Object.defineProperty(exports, "transition", {
+  enumerable: true,
+  get: function get() {
+    return _motion.transition;
+  }
+});
+Object.defineProperty(exports, "typography", {
+  enumerable: true,
+  get: function get() {
+    return _typography["default"];
+  }
+});
+Object.defineProperty(exports, "variants", {
+  enumerable: true,
+  get: function get() {
+    return _typography.variants;
+  }
+});
+Object.defineProperty(exports, "zIndex", {
+  enumerable: true,
+  get: function get() {
+    return _zIndex["default"];
+  }
+});
+var _colors = _interopRequireWildcard(require("./colors"));
+var _typography = _interopRequireWildcard(require("./typography"));
+var _spacing = _interopRequireWildcard(require("./spacing"));
+var _radius = _interopRequireDefault(require("./radius"));
+var _shadows = _interopRequireWildcard(require("./shadows"));
+var _motion = _interopRequireWildcard(require("./motion"));
+var _zIndex = _interopRequireDefault(require("./zIndex"));
+var _density = _interopRequireWildcard(require("./density"));
+var _breakpoints = require("./breakpoints");
+var _statusPalette = _interopRequireWildcard(require("./statusPalette"));
+var _state = _interopRequireDefault(require("./state"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Tokens barrel — single import surface for the whole library.
+ *
+ *   import tokens from "@portnet/ui/v2/tokens";
+ *   import { brand, brandSecondary, status, spacing, transition, state } from "@portnet/ui/v2/tokens";
+ */
+
+// `dl` deprecated alias removed in 0.3.0 — see CHANGELOG. Use `densityLayout`.
+
+var tokens = Object.freeze({
+  colors: _colors["default"],
+  brand: _colors.brand,
+  brandSecondary: _colors.brandSecondary,
+  ink: _colors.ink,
+  surface: _colors.surface,
+  border: _colors.border,
+  semantic: _colors.semantic,
+  status: _colors.status,
+  focus: _colors.focus,
+  dark: _colors.dark,
+  typography: _typography["default"],
+  fontFamily: _typography.fontFamily,
+  fontSize: _typography.fontSize,
+  fontWeight: _typography.fontWeight,
+  lineHeight: _typography.lineHeight,
+  letterSpacing: _typography.letterSpacing,
+  variants: _typography.variants,
+  spacing: _spacing["default"],
+  spacingBase: _spacing.spacingBase,
+  radius: _radius["default"],
+  shadows: _shadows["default"],
+  muiShadows: _shadows.muiShadows,
+  motion: _motion["default"],
+  duration: _motion.duration,
+  durationCss: _motion.durationCss,
+  easing: _motion.easing,
+  zIndex: _zIndex["default"],
+  density: _density.density,
+  layout: _density.layout,
+  breakpoints: _density.breakpoints,
+  mq: _breakpoints.mq,
+  statusPalette: _statusPalette["default"],
+  state: _state["default"]
+});
+var _default = exports["default"] = tokens;
+//# sourceMappingURL=index.js.map

package/dist/v2/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_colors","_interopRequireWildcard","require","_typography","_spacing","_radius","_interopRequireDefault","_shadows","_motion","_zIndex","_density","_breakpoints","_statusPalette","_state","obj","__esModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","tokens","freeze","colors","brand","brandSecondary","ink","surface","border","semantic","status","focus","dark","typography","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","variants","spacing","spacingBase","radius","shadows","muiShadows","motion","duration","durationCss","easing","zIndex","density","layout","breakpoints","mq","statusPalette","state","_default","exports"],"sources":["../../../src/lib/v2/tokens/index.ts"],"sourcesContent":["/**\r\n * Tokens barrel — single import surface for the whole library.\r\n *\r\n *   import tokens from \"@portnet/ui/v2/tokens\";\r\n *   import { brand, brandSecondary, status, spacing, transition, state } from \"@portnet/ui/v2/tokens\";\r\n */\r\nimport colors, {\r\n  brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,\r\n} from \"./colors\";\r\nimport typography, {\r\n  fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,\r\n} from \"./typography\";\r\nimport spacing, { spacingBase } from \"./spacing\";\r\nimport radius from \"./radius\";\r\nimport shadows, { muiShadows } from \"./shadows\";\r\nimport motion, {\r\n  duration, durationCss, easing, ms, transition,\r\n} from \"./motion\";\r\nimport zIndex from \"./zIndex\";\r\nimport densityLayout, { density, layout, breakpoints } from \"./density\";\r\nimport { mq, bpValue, BREAKPOINT_KEYS } from \"./breakpoints\";\r\nimport statusPalette, {\r\n  STATUS_KEYS, statusToken, STATUS_LABELS_FR,\r\n} from \"./statusPalette\";\r\nimport state from \"./state\";\r\n\r\nexport {\r\n  // colors\r\n  colors, brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,\r\n  // typography\r\n  typography, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,\r\n  // spacing\r\n  spacing, spacingBase,\r\n  // radius\r\n  radius,\r\n  // shadows\r\n  shadows, muiShadows,\r\n  // motion\r\n  motion, duration, durationCss, easing, ms, transition,\r\n  // z-index\r\n  zIndex,\r\n  // density / layout\r\n  densityLayout, density, layout, breakpoints,\r\n  // responsive — breakpoint scale + media-query helpers (Batch 1)\r\n  mq, bpValue, BREAKPOINT_KEYS,\r\n  // status helpers\r\n  statusPalette, STATUS_KEYS, statusToken, STATUS_LABELS_FR,\r\n  // state overlays\r\n  state,\r\n};\r\n\r\n// `dl` deprecated alias removed in 0.3.0 — see CHANGELOG. Use `densityLayout`.\r\n\r\nconst tokens = Object.freeze({\r\n  colors, brand, brandSecondary, ink, surface, border, semantic, status, focus, dark,\r\n  typography, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, variants,\r\n  spacing, spacingBase,\r\n  radius,\r\n  shadows, muiShadows,\r\n  motion, duration, durationCss, easing,\r\n  zIndex,\r\n  density, layout, breakpoints, mq,\r\n  statusPalette,\r\n  state,\r\n});\r\n\r\nexport default tokens;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/v2/tokens/motion.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Motion tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.7 + §08.
+ *
+ * R-Mi.1 — Any duration > 200 ms must be justified.
+ * R-Mi.2 — No decorative looping animations (RGESN R-9.2).
+ * R-Mi.3 — Animate transform + opacity only (GPU).
+ * R-7.5  — `prefers-reduced-motion` respected (≤ 0.01 ms).
+ *
+ * Durations ship in two forms:
+ *   - `duration.<key>`    integer milliseconds (for JS / MUI theme).
+ *   - `durationCss.<key>` CSS string with `ms` unit (for sx / raw CSS).
+ * Use `transition(prop, durKey, easeKey)` for the safest path.
+ *
+ * Each duration has TWO names:
+ *   1. Temporal (fast / base / slow) — original Batch 1 vocabulary,
+ *      kept for back-compat with all existing consumers.
+ *   2. Semantic (microinteraction / stateChange / pageTransition) —
+ *      added in Batch 11 (B6) to make component sx more intent-readable.
+ *      Maps onto the SAME numeric values; pick whichever reads better
+ *      at the call site.
+ */
+export declare const duration: {
+    fast: number;
+    base: number;
+    slow: number;
+    microinteraction: number;
+    stateChange: number;
+    pageTransition: number;
+};
+export declare const durationCss: {
+    fast: string;
+    base: string;
+    slow: string;
+    microinteraction: string;
+    stateChange: string;
+    pageTransition: string;
+};
+export declare const easing: {
+    out: string;
+    in: string;
+    soft: string;
+};
+/**
+ * `ms(80)` → `"80ms"`. Use when composing custom transitions.
+ */
+export declare const ms: (n: number | string) => string;
+/**
+ * Compose a CSS `transition` shorthand safely.
+ *
+ *   transition("opacity")                              → "opacity 180ms cubic-bezier(...)"
+ *   transition("transform", "fast", "in")              → "transform 80ms cubic-bezier(...)"
+ *   transition("opacity",   "stateChange")             → "opacity 180ms cubic-bezier(...)"
+ *
+ *   Both temporal ("fast") and semantic ("microinteraction") keys
+ *   resolve through the same durationCss object.
+ */
+export declare const transition: (prop?: string, durationKey?: keyof typeof durationCss, easingKey?: keyof typeof easing) => string;
+declare const motion: {
+    duration: {
+        fast: number;
+        base: number;
+        slow: number;
+        microinteraction: number;
+        stateChange: number;
+        pageTransition: number;
+    };
+    durationCss: {
+        fast: string;
+        base: string;
+        slow: string;
+        microinteraction: string;
+        stateChange: string;
+        pageTransition: string;
+    };
+    easing: {
+        out: string;
+        in: string;
+        soft: string;
+    };
+    ms: (n: number | string) => string;
+    transition: (prop?: string, durationKey?: keyof typeof durationCss, easingKey?: keyof typeof easing) => string;
+};
+export default motion;
+//# sourceMappingURL=motion.d.ts.map

package/dist/v2/tokens/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/tokens/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,QAAQ;;;;;;;CAUpB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;CAUvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,EAAE,GAAI,GAAG,MAAM,GAAG,MAAM,KAAG,MAA+B,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GACrB,OAAM,MAAc,EACpB,cAAa,MAAM,OAAO,WAAoB,EAC9C,YAAW,MAAM,OAAO,MAAc,KACrC,MAC2F,CAAC;AAE/F,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;YAnBU,MAAM,GAAG,MAAM,KAAG,MAAM;wBAatC,MAAM,gBACC,MAAM,OAAO,WAAW,cAC1B,MAAM,OAAO,MAAM,KAC7B,MAAM;CAGuD,CAAC;AACjE,eAAe,MAAM,CAAC"}

package/dist/v2/tokens/motion.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transition = exports.ms = exports.easing = exports.durationCss = exports.duration = exports["default"] = void 0;
+/**
+ * Motion tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.7 + §08.
+ *
+ * R-Mi.1 — Any duration > 200 ms must be justified.
+ * R-Mi.2 — No decorative looping animations (RGESN R-9.2).
+ * R-Mi.3 — Animate transform + opacity only (GPU).
+ * R-7.5  — `prefers-reduced-motion` respected (≤ 0.01 ms).
+ *
+ * Durations ship in two forms:
+ *   - `duration.<key>`    integer milliseconds (for JS / MUI theme).
+ *   - `durationCss.<key>` CSS string with `ms` unit (for sx / raw CSS).
+ * Use `transition(prop, durKey, easeKey)` for the safest path.
+ *
+ * Each duration has TWO names:
+ *   1. Temporal (fast / base / slow) — original Batch 1 vocabulary,
+ *      kept for back-compat with all existing consumers.
+ *   2. Semantic (microinteraction / stateChange / pageTransition) —
+ *      added in Batch 11 (B6) to make component sx more intent-readable.
+ *      Maps onto the SAME numeric values; pick whichever reads better
+ *      at the call site.
+ */
+
+var duration = exports.duration = {
+  // Temporal vocabulary
+  fast: 80,
+  // hover, focus
+  base: 180,
+  // modal open, drawer slide, toast spawn
+  slow: 280,
+  // optional — justify any usage
+
+  // Semantic aliases (B6) — same values, intent-readable names
+  microinteraction: 80,
+  // hover, focus, button press
+  stateChange: 180,
+  // modal/drawer/toast in/out
+  pageTransition: 280 // route change, view enter
+};
+var durationCss = exports.durationCss = {
+  // Temporal
+  fast: "80ms",
+  base: "180ms",
+  slow: "280ms",
+  // Semantic aliases
+  microinteraction: "80ms",
+  stateChange: "180ms",
+  pageTransition: "280ms"
+};
+var easing = exports.easing = {
+  out: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "in": "cubic-bezier(0.4, 0, 1, 1)",
+  soft: "cubic-bezier(0.16, 1, 0.3, 1)"
+};
+
+/**
+ * `ms(80)` → `"80ms"`. Use when composing custom transitions.
+ */
+var ms = exports.ms = function ms(n) {
+  return "".concat(Number(n) || 0, "ms");
+};
+
+/**
+ * Compose a CSS `transition` shorthand safely.
+ *
+ *   transition("opacity")                              → "opacity 180ms cubic-bezier(...)"
+ *   transition("transform", "fast", "in")              → "transform 80ms cubic-bezier(...)"
+ *   transition("opacity",   "stateChange")             → "opacity 180ms cubic-bezier(...)"
+ *
+ *   Both temporal ("fast") and semantic ("microinteraction") keys
+ *   resolve through the same durationCss object.
+ */
+var transition = exports.transition = function transition() {
+  var _durationCss$duration, _easing$easingKey;
+  var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "all";
+  var durationKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "base";
+  var easingKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "out";
+  return "".concat(prop, " ").concat((_durationCss$duration = durationCss[durationKey]) !== null && _durationCss$duration !== void 0 ? _durationCss$duration : durationCss.base, " ").concat((_easing$easingKey = easing[easingKey]) !== null && _easing$easingKey !== void 0 ? _easing$easingKey : easing.out);
+};
+var motion = {
+  duration: duration,
+  durationCss: durationCss,
+  easing: easing,
+  ms: ms,
+  transition: transition
+};
+var _default = exports["default"] = motion;
+//# sourceMappingURL=motion.js.map

package/dist/v2/tokens/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":["duration","exports","fast","base","slow","microinteraction","stateChange","pageTransition","durationCss","easing","out","soft","ms","n","concat","Number","transition","_durationCss$duration","_easing$easingKey","prop","arguments","length","undefined","durationKey","easingKey","motion","_default"],"sources":["../../../src/lib/v2/tokens/motion.ts"],"sourcesContent":["/**\r\n * Motion tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.7 + §08.\r\n *\r\n * R-Mi.1 — Any duration > 200 ms must be justified.\r\n * R-Mi.2 — No decorative looping animations (RGESN R-9.2).\r\n * R-Mi.3 — Animate transform + opacity only (GPU).\r\n * R-7.5  — `prefers-reduced-motion` respected (≤ 0.01 ms).\r\n *\r\n * Durations ship in two forms:\r\n *   - `duration.<key>`    integer milliseconds (for JS / MUI theme).\r\n *   - `durationCss.<key>` CSS string with `ms` unit (for sx / raw CSS).\r\n * Use `transition(prop, durKey, easeKey)` for the safest path.\r\n *\r\n * Each duration has TWO names:\r\n *   1. Temporal (fast / base / slow) — original Batch 1 vocabulary,\r\n *      kept for back-compat with all existing consumers.\r\n *   2. Semantic (microinteraction / stateChange / pageTransition) —\r\n *      added in Batch 11 (B6) to make component sx more intent-readable.\r\n *      Maps onto the SAME numeric values; pick whichever reads better\r\n *      at the call site.\r\n */\r\n\r\nexport const duration = {\r\n  // Temporal vocabulary\r\n  fast: 80,   // hover, focus\r\n  base: 180,  // modal open, drawer slide, toast spawn\r\n  slow: 280,  // optional — justify any usage\r\n\r\n  // Semantic aliases (B6) — same values, intent-readable names\r\n  microinteraction: 80,   // hover, focus, button press\r\n  stateChange:      180,  // modal/drawer/toast in/out\r\n  pageTransition:   280,  // route change, view enter\r\n};\r\n\r\nexport const durationCss = {\r\n  // Temporal\r\n  fast: \"80ms\",\r\n  base: \"180ms\",\r\n  slow: \"280ms\",\r\n\r\n  // Semantic aliases\r\n  microinteraction: \"80ms\",\r\n  stateChange:      \"180ms\",\r\n  pageTransition:   \"280ms\",\r\n};\r\n\r\nexport const easing = {\r\n  out:  \"cubic-bezier(0.2, 0.8, 0.2, 1)\",\r\n  in:   \"cubic-bezier(0.4, 0, 1, 1)\",\r\n  soft: \"cubic-bezier(0.16, 1, 0.3, 1)\",\r\n};\r\n\r\n/**\r\n * `ms(80)` → `\"80ms\"`. Use when composing custom transitions.\r\n */\r\nexport const ms = (n: number | string): string => `${Number(n) || 0}ms`;\r\n\r\n/**\r\n * Compose a CSS `transition` shorthand safely.\r\n *\r\n *   transition(\"opacity\")                              → \"opacity 180ms cubic-bezier(...)\"\r\n *   transition(\"transform\", \"fast\", \"in\")              → \"transform 80ms cubic-bezier(...)\"\r\n *   transition(\"opacity\",   \"stateChange\")             → \"opacity 180ms cubic-bezier(...)\"\r\n *\r\n *   Both temporal (\"fast\") and semantic (\"microinteraction\") keys\r\n *   resolve through the same durationCss object.\r\n */\r\nexport const transition = (\r\n  prop: string = \"all\",\r\n  durationKey: keyof typeof durationCss = \"base\",\r\n  easingKey: keyof typeof easing = \"out\"\r\n): string =>\r\n  `${prop} ${durationCss[durationKey] ?? durationCss.base} ${easing[easingKey] ?? easing.out}`;\r\n\r\nconst motion = { duration, durationCss, easing, ms, transition };\r\nexport default motion;\r\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMA,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG;EACtB;EACAE,IAAI,EAAE,EAAE;EAAI;EACZC,IAAI,EAAE,GAAG;EAAG;EACZC,IAAI,EAAE,GAAG;EAAG;;EAEZ;EACAC,gBAAgB,EAAE,EAAE;EAAI;EACxBC,WAAW,EAAO,GAAG;EAAG;EACxBC,cAAc,EAAI,GAAG,CAAG;AAC1B,CAAC;AAEM,IAAMC,WAAW,GAAAP,OAAA,CAAAO,WAAA,GAAG;EACzB;EACAN,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE,OAAO;EACbC,IAAI,EAAE,OAAO;EAEb;EACAC,gBAAgB,EAAE,MAAM;EACxBC,WAAW,EAAO,OAAO;EACzBC,cAAc,EAAI;AACpB,CAAC;AAEM,IAAME,MAAM,GAAAR,OAAA,CAAAQ,MAAA,GAAG;EACpBC,GAAG,EAAG,gCAAgC;EACtC,MAAM,4BAA4B;EAClCC,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACO,IAAMC,EAAE,GAAAX,OAAA,CAAAW,EAAA,GAAG,SAALA,EAAEA,CAAIC,CAAkB;EAAA,UAAAC,MAAA,CAAgBC,MAAM,CAACF,CAAC,CAAC,IAAI,CAAC;AAAA,CAAI;;AAEvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,UAAU,GAAAf,OAAA,CAAAe,UAAA,GAAG,SAAbA,UAAUA,CAAA;EAAA,IAAAC,qBAAA,EAAAC,iBAAA;EAAA,IACrBC,IAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,IACpBG,WAAqC,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,MAAM;EAAA,IAC9CI,SAA8B,GAAAJ,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,UAAAN,MAAA,CAEnCK,IAAI,OAAAL,MAAA,EAAAG,qBAAA,GAAIT,WAAW,CAACe,WAAW,CAAC,cAAAN,qBAAA,cAAAA,qBAAA,GAAIT,WAAW,CAACL,IAAI,OAAAW,MAAA,EAAAI,iBAAA,GAAIT,MAAM,CAACe,SAAS,CAAC,cAAAN,iBAAA,cAAAA,iBAAA,GAAIT,MAAM,CAACC,GAAG;AAAA,CAAE;AAE9F,IAAMe,MAAM,GAAG;EAAEzB,QAAQ,EAARA,QAAQ;EAAEQ,WAAW,EAAXA,WAAW;EAAEC,MAAM,EAANA,MAAM;EAAEG,EAAE,EAAFA,EAAE;EAAEI,UAAU,EAAVA;AAAW,CAAC;AAAC,IAAAU,QAAA,GAAAzB,OAAA,cAClDwB,MAAM","ignoreList":[]}

package/dist/v2/tokens/radius.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Border-radius tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.4.
+ *
+ * Values are integers (pixels). For perfect circles / pills on
+ * square containers, use `full` (9999) which collapses correctly
+ * regardless of container size.
+ */
+export declare const radius: {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+};
+export default radius;
+//# sourceMappingURL=radius.d.ts.map

package/dist/v2/tokens/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/tokens/radius.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/v2/tokens/radius.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.radius = exports["default"] = void 0;
+/**
+ * Border-radius tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.4.
+ *
+ * Values are integers (pixels). For perfect circles / pills on
+ * square containers, use `full` (9999) which collapses correctly
+ * regardless of container size.
+ */
+var radius = exports.radius = {
+  none: 0,
+  sm: 6,
+  // chips, badges, sort indicators
+  md: 8,
+  // buttons, inputs (default)
+  lg: 12,
+  // cards, datagrid
+  xl: 16,
+  // large modals
+  full: 9999 // pills, status chips, avatars
+};
+var _default = exports["default"] = radius;
+//# sourceMappingURL=radius.js.map

package/dist/v2/tokens/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.js","names":["radius","exports","none","sm","md","lg","xl","full","_default"],"sources":["../../../src/lib/v2/tokens/radius.ts"],"sourcesContent":["/**\r\n * Border-radius tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.4.\r\n *\r\n * Values are integers (pixels). For perfect circles / pills on\r\n * square containers, use `full` (9999) which collapses correctly\r\n * regardless of container size.\r\n */\r\nexport const radius = {\r\n  none: 0,\r\n  sm:   6,    // chips, badges, sort indicators\r\n  md:   8,    // buttons, inputs (default)\r\n  lg:   12,   // cards, datagrid\r\n  xl:   16,   // large modals\r\n  full: 9999, // pills, status chips, avatars\r\n};\r\n\r\nexport default radius;\r\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG;EACpBE,IAAI,EAAE,CAAC;EACPC,EAAE,EAAI,CAAC;EAAK;EACZC,EAAE,EAAI,CAAC;EAAK;EACZC,EAAE,EAAI,EAAE;EAAI;EACZC,EAAE,EAAI,EAAE;EAAI;EACZC,IAAI,EAAE,IAAI,CAAE;AACd,CAAC;AAAC,IAAAC,QAAA,GAAAP,OAAA,cAEaD,MAAM","ignoreList":[]}

package/dist/v2/tokens/shadows.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shadow / elevation tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.5.
+ *
+ * All shadows are CSS strings — directly assignable to `boxShadow`
+ * in `sx`, `style`, or CSS custom properties.
+ *
+ * `focus` ships TWO variants:
+ *  - `focus`         uses `var(--accent)`, the runtime-themable
+ *                    custom property set by `<PortnetThemeProvider>`.
+ *  - `focusFallback` is a static rgba string for contexts where
+ *                    CSS custom properties aren't resolvable
+ *                    (server-rendered emails, raw inline style, etc.).
+ */
+export declare const shadows: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    focus: string;
+    focusFallback: string;
+};
+export declare const muiShadows: string[];
+export default shadows;
+//# sourceMappingURL=shadows.d.ts.map

package/dist/v2/tokens/shadows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/tokens/shadows.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAiBF,eAAO,MAAM,UAAU,UAMtB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/v2/tokens/shadows.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shadows = exports.muiShadows = exports["default"] = void 0;
+/**
+ * Shadow / elevation tokens — Portnet UI v2
+ * Aligned with Design System v1.0 §02.5.
+ *
+ * All shadows are CSS strings — directly assignable to `boxShadow`
+ * in `sx`, `style`, or CSS custom properties.
+ *
+ * `focus` ships TWO variants:
+ *  - `focus`         uses `var(--accent)`, the runtime-themable
+ *                    custom property set by `<PortnetThemeProvider>`.
+ *  - `focusFallback` is a static rgba string for contexts where
+ *                    CSS custom properties aren't resolvable
+ *                    (server-rendered emails, raw inline style, etc.).
+ */
+var shadows = exports.shadows = {
+  xs: "0 1px 2px rgba(15,21,37,.04)",
+  sm: "0 1px 2px rgba(15,21,37,.04), 0 1px 3px rgba(15,21,37,.06)",
+  md: "0 2px 4px rgba(15,21,37,.04), 0 4px 12px rgba(15,21,37,.08)",
+  lg: "0 4px 8px rgba(15,21,37,.06), 0 12px 32px rgba(15,21,37,.12)",
+  focus: "0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)",
+  focusFallback: "0 0 0 3px rgba(35, 47, 102, 0.22)"
+};
+
+/**
+ * 25-slot MUI shadows array. Index 0 must be "none".
+ *  1–4   → xs   (subtle elevation: AppBar, switches)
+ *  5–8   → sm   (cards, paper)
+ *  9–16  → md   (menus, popovers, dropdowns)
+ * 17–24  → lg   (modals, drawers)
+ *
+ * Padding is intentional — MUI components reference indices
+ * semantically; we provide one canonical level per band.
+ */
+var _xs = shadows.xs;
+var _sm = shadows.sm;
+var _md = shadows.md;
+var _lg = shadows.lg;
+var muiShadows = exports.muiShadows = ["none", _xs, _xs, _xs, _xs, _sm, _sm, _sm, _sm, _md, _md, _md, _md, _md, _md, _md, _md, _lg, _lg, _lg, _lg, _lg, _lg, _lg, _lg];
+var _default = exports["default"] = shadows;
+//# sourceMappingURL=shadows.js.map

package/dist/v2/tokens/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.js","names":["shadows","exports","xs","sm","md","lg","focus","focusFallback","_xs","_sm","_md","_lg","muiShadows","_default"],"sources":["../../../src/lib/v2/tokens/shadows.ts"],"sourcesContent":["/**\r\n * Shadow / elevation tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §02.5.\r\n *\r\n * All shadows are CSS strings — directly assignable to `boxShadow`\r\n * in `sx`, `style`, or CSS custom properties.\r\n *\r\n * `focus` ships TWO variants:\r\n *  - `focus`         uses `var(--accent)`, the runtime-themable\r\n *                    custom property set by `<PortnetThemeProvider>`.\r\n *  - `focusFallback` is a static rgba string for contexts where\r\n *                    CSS custom properties aren't resolvable\r\n *                    (server-rendered emails, raw inline style, etc.).\r\n */\r\nexport const shadows = {\r\n  xs:            \"0 1px 2px rgba(15,21,37,.04)\",\r\n  sm:            \"0 1px 2px rgba(15,21,37,.04), 0 1px 3px rgba(15,21,37,.06)\",\r\n  md:            \"0 2px 4px rgba(15,21,37,.04), 0 4px 12px rgba(15,21,37,.08)\",\r\n  lg:            \"0 4px 8px rgba(15,21,37,.06), 0 12px 32px rgba(15,21,37,.12)\",\r\n  focus:         \"0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)\",\r\n  focusFallback: \"0 0 0 3px rgba(35, 47, 102, 0.22)\",\r\n};\r\n\r\n/**\r\n * 25-slot MUI shadows array. Index 0 must be \"none\".\r\n *  1–4   → xs   (subtle elevation: AppBar, switches)\r\n *  5–8   → sm   (cards, paper)\r\n *  9–16  → md   (menus, popovers, dropdowns)\r\n * 17–24  → lg   (modals, drawers)\r\n *\r\n * Padding is intentional — MUI components reference indices\r\n * semantically; we provide one canonical level per band.\r\n */\r\nconst _xs = shadows.xs;\r\nconst _sm = shadows.sm;\r\nconst _md = shadows.md;\r\nconst _lg = shadows.lg;\r\n\r\nexport const muiShadows = [\r\n  \"none\",\r\n  _xs, _xs, _xs, _xs,\r\n  _sm, _sm, _sm, _sm,\r\n  _md, _md, _md, _md, _md, _md, _md, _md,\r\n  _lg, _lg, _lg, _lg, _lg, _lg, _lg, _lg,\r\n];\r\n\r\nexport default shadows;\r\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG;EACrBE,EAAE,EAAa,8BAA8B;EAC7CC,EAAE,EAAa,4DAA4D;EAC3EC,EAAE,EAAa,6DAA6D;EAC5EC,EAAE,EAAa,8DAA8D;EAC7EC,KAAK,EAAU,8DAA8D;EAC7EC,aAAa,EAAE;AACjB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,GAAG,GAAGR,OAAO,CAACE,EAAE;AACtB,IAAMO,GAAG,GAAGT,OAAO,CAACG,EAAE;AACtB,IAAMO,GAAG,GAAGV,OAAO,CAACI,EAAE;AACtB,IAAMO,GAAG,GAAGX,OAAO,CAACK,EAAE;AAEf,IAAMO,UAAU,GAAAX,OAAA,CAAAW,UAAA,GAAG,CACxB,MAAM,EACNJ,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAClBC,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAClBC,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EACtCC,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,EAAEA,GAAG,CACvC;AAAC,IAAAE,QAAA,GAAAZ,OAAA,cAEaD,OAAO","ignoreList":[]}