@common-origin/design-system 2.18.0 → 2.20.0

package/dist/lib/tokenAliases.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenAliases.mjs","sources":["../../src/lib/tokenAliases.ts"],"sourcesContent":["import tokens from './cssTokens'\nimport type { Tokens } from '../types/tokens'\n\n// Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the\n// semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,\n// so TypeScript fails here if a key is added without a mapping.\nconst { semantic } = tokens\nconst { color, space, radius, surface } = semantic\n\ntype Semantic = Tokens['semantic']\n\n/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */\nexport const spaceByLayoutKey: Record<keyof Semantic['spacing']['layout'], string> = {\n  none: space[0],\n  xs: space[100],\n  sm: space[200],\n  md: space[300],\n  lg: space[400],\n  xl: space[500],\n  '2xl': space[600],\n  '3xl': space[700],\n  '4xl': space[800],\n  '5xl': space[900],\n  '6xl': space[1000],\n  '7xl': space[1200],\n  '8xl': space[1400],\n  '9xl': space[1600],\n  '10xl': space[2000],\n  '11xl': space[2400],\n  // A keyword, not a step: it stays until the keyword question is settled (0031)\n  auto: semantic.spacing.layout.auto,\n}\n\n/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */\nexport const radiusByKey: Record<keyof Semantic['border']['radius'], string> = {\n  none: radius.none,\n  xs: radius.xs,\n  sm: radius.sm,\n  md: radius.md,\n  lg: radius.lg,\n  xl: radius.xl,\n  '2xl': radius['2xl'],\n  '3xl': radius['3xl'],\n  circle: radius.full,\n}\n\n/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */\nexport const backgroundByKey: Record<keyof Semantic['color']['background'], string> = {\n  default: surface.base,\n  page: surface.base,\n  subtle: surface.raised,\n  overlay: surface.scrim,\n  emphasis: color.fill.emphasis,\n  'emphasis-hover': color.fill['emphasis-hover'],\n  'emphasis-active': color.fill['emphasis-pressed'],\n  surface: color.fill.muted,\n  inverse: color.fill.inverse,\n  interactive: color.fill.accent,\n  'interactive-hover': color.fill['accent-hover'],\n  'interactive-active': color.fill['accent-pressed'],\n  'interactive-subtle': color.fill['accent-muted'],\n  'interactive-subtle-hover': color.fill['accent-muted-hover'],\n  'interactive-subtle-active': color.fill['accent-muted-pressed'],\n  error: color.fill.danger,\n  'error-hover': color.fill['danger-hover'],\n  'error-active': color.fill['danger-pressed'],\n  'error-subtle': color.fill['danger-muted'],\n  success: color.fill.success,\n  'success-subtle': color.fill['success-muted'],\n  warning: color.fill.warning,\n  'warning-subtle': color.fill['warning-muted'],\n  disabled: color.fill.disabled,\n  neutral: color.fill.default,\n  'neutral-hover': color.fill['default-hover'],\n  'neutral-active': color.fill['default-pressed'],\n  transparent: color.fill.none,\n  'hover-overlay': color.fill['none-hover'],\n  'active-overlay': color.fill['none-pressed'],\n  'inverse-overlay': color.fill['inverse-none-hover'],\n  // Moved to the component tier (decision 0031 §6)\n  progressTrack: tokens.component.track.background,\n}\n\n/** Box's `color` prop: text colours, old and new keys. */\nexport const textColorByKey: Record<keyof Semantic['color']['text'], string> = {\n  default: color.text.default,\n  emphasis: color.text.emphasis,\n  inverse: color.text.inverse,\n  disabled: color.text.disabled,\n  success: color.text.success,\n  warning: color.text.warning,\n  muted: color.text.muted,\n  accent: color.text.accent,\n  'accent-hover': color.text['accent-hover'],\n  'accent-pressed': color.text['accent-pressed'],\n  danger: color.text.danger,\n  subdued: color.text.muted,\n  interactive: color.text.accent,\n  'interactive-hover': color.text['accent-hover'],\n  'interactive-active': color.text['accent-pressed'],\n  error: color.text.danger,\n}\n\n/** Box's border props: border colours, old and new keys. */\nexport const borderColorByKey: Record<keyof Semantic['color']['border'], string> = {\n  default: color.border.default,\n  success: color.border.success,\n  warning: color.border.warning,\n  none: color.border.none,\n  emphasis: color.border.emphasis,\n  input: color.border.input,\n  'input-hover': color.border['input-hover'],\n  focus: color.border.focus,\n  accent: color.border.accent,\n  danger: color.border.danger,\n  subtle: color.border.emphasis,\n  control: color.border.input,\n  // `strong` split by use (0031); as a generic firm outline it is the hovered-input border\n  strong: color.border['input-hover'],\n  interactive: color.border.accent,\n  error: color.border.danger,\n}\n"],"names":["semantic","tokens","color","space","radius","surface","spaceByLayoutKey","none","xs","sm","md","lg","xl","auto","spacing","layout","radiusByKey","circle","full","backgroundByKey","base","page","subtle","raised","overlay","scrim","emphasis","fill","muted","inverse","interactive","accent","error","danger","success","warning","disabled","neutral","transparent","progressTrack","component","track","background","textColorByKey","text","subdued","borderColorByKey","border","input","focus","control","strong"],"mappings":"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"}

package/dist/lib/usePresence.d.mts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+export declare const EXIT_DURATION_MS: number;
+/**
+ * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
+ * animation can run before it unmounts (decision 0005).
+ */
+export declare function usePresence(isOpen: boolean, exitMs?: number): {
+    isPresent: boolean;
+    isExiting: boolean;
+};
+/**
+ * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
+ * the tab order and can't be activated. Set through the DOM because React 18 has no
+ * `inert` prop.
+ */
+export declare function useInert(ref: RefObject<HTMLElement | null>, isInert: boolean): void;

package/dist/lib/usePresence.mjs

@@ -0,0 +1,50 @@
+'use client';
+import { useState, useEffect } from 'react';
+import tokensJson from '../styles/tokens.json.mjs';
+
+// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils. A timer
+// needs the resolved value, not the CSS variable (decision 0041).
+var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
+/**
+ * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
+ * animation can run before it unmounts (decision 0005).
+ */
+function usePresence(isOpen, exitMs) {
+  if (exitMs === void 0) {
+    exitMs = EXIT_DURATION_MS;
+  }
+  var _a = useState(isOpen),
+    isMounted = _a[0],
+    setIsMounted = _a[1];
+  useEffect(function () {
+    if (isOpen) {
+      setIsMounted(true);
+      return;
+    }
+    var timer = setTimeout(function () {
+      return setIsMounted(false);
+    }, exitMs);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [isOpen, exitMs]);
+  return {
+    isPresent: isOpen || isMounted,
+    isExiting: !isOpen && isMounted
+  };
+}
+/**
+ * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
+ * the tab order and can't be activated. Set through the DOM because React 18 has no
+ * `inert` prop.
+ */
+function useInert(ref, isInert) {
+  useEffect(function () {
+    var node = ref.current;
+    if (!node) return;
+    if (isInert) node.setAttribute('inert', '');else node.removeAttribute('inert');
+  }, [ref, isInert]);
+}
+
+export { EXIT_DURATION_MS, useInert, usePresence };
+//# sourceMappingURL=usePresence.mjs.map

package/dist/lib/usePresence.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresence.mjs","sources":["../../src/lib/usePresence.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react'\n// The exit timer needs the resolved duration, not its CSS variable (decision 0041)\n// eslint-disable-next-line no-restricted-imports\nimport tokenValues from '../styles/tokens.json'\n\n// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils. A timer\n// needs the resolved value, not the CSS variable (decision 0041).\nexport const EXIT_DURATION_MS = parseInt(tokenValues.semantic.motion.duration.fast, 10)\n\n/**\n * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit\n * animation can run before it unmounts (decision 0005).\n */\nexport function usePresence(isOpen: boolean, exitMs: number = EXIT_DURATION_MS) {\n  const [isMounted, setIsMounted] = useState(isOpen)\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsMounted(true)\n      return\n    }\n    const timer = setTimeout(() => setIsMounted(false), exitMs)\n    return () => clearTimeout(timer)\n  }, [isOpen, exitMs])\n\n  return {\n    isPresent: isOpen || isMounted,\n    isExiting: !isOpen && isMounted,\n  }\n}\n\n/**\n * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave\n * the tab order and can't be activated. Set through the DOM because React 18 has no\n * `inert` prop.\n */\nexport function useInert(ref: RefObject<HTMLElement | null>, isInert: boolean) {\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return\n    if (isInert) node.setAttribute('inert', '')\n    else node.removeAttribute('inert')\n  }, [ref, isInert])\n}\n"],"names":["EXIT_DURATION_MS","parseInt","tokenValues","semantic","motion","duration","fast","usePresence","isOpen","exitMs","_a","useState","isMounted","setIsMounted","useEffect","timer","setTimeout","clearTimeout","isPresent","isExiting","useInert","ref","isInert","node","current","setAttribute","removeAttribute"],"mappings":";;;;AAKA;AACA;IACaA,gBAAgB,GAAGC,QAAQ,CAACC,UAAW,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,IAAI,EAAE,EAAE,EAAC;AAEvF;;;AAGG;AACa,SAAAC,WAAWA,CAACC,MAAe,EAAEC,MAAiC,EAAA;AAAjC,EAAA,IAAAA,MAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,MAAiC,GAAAT,gBAAA,CAAA;AAAA,GAAA;AACtE,EAAA,IAAAU,EAAA,GAA4BC,QAAQ,CAACH,MAAM,CAAC;AAA3CI,IAAAA,SAAS,GAAAF,EAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,EAAA,CAAA,CAAA,CAAoB,CAAA;AAElDI,EAAAA,SAAS,CAAC,YAAA;AACR,IAAA,IAAIN,MAAM,EAAE;MACVK,YAAY,CAAC,IAAI,CAAC,CAAA;AAClB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAME,KAAK,GAAGC,UAAU,CAAC;MAAM,OAAAH,YAAY,CAAC,KAAK,CAAC,CAAA;KAAA,EAAEJ,MAAM,CAAC,CAAA;AAC3D,IAAA,OAAO,YAAA;MAAM,OAAAQ,YAAY,CAACF,KAAK,CAAC,CAAA;KAAA,CAAA;AAClC,GAAC,EAAE,CAACP,MAAM,EAAEC,MAAM,CAAC,CAAC,CAAA;EAEpB,OAAO;IACLS,SAAS,EAAEV,MAAM,IAAII,SAAS;IAC9BO,SAAS,EAAE,CAACX,MAAM,IAAII,SAAAA;GACvB,CAAA;AACH,CAAA;AAEA;;;;AAIG;AACa,SAAAQ,QAAQA,CAACC,GAAkC,EAAEC,OAAgB,EAAA;AAC3ER,EAAAA,SAAS,CAAC,YAAA;AACR,IAAA,IAAMS,IAAI,GAAGF,GAAG,CAACG,OAAO,CAAA;IACxB,IAAI,CAACD,IAAI,EAAE,OAAA;AACX,IAAA,IAAID,OAAO,EAAEC,IAAI,CAACE,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA,KACtCF,IAAI,CAACG,eAAe,CAAC,OAAO,CAAC,CAAA;AACpC,GAAC,EAAE,CAACL,GAAG,EAAEC,OAAO,CAAC,CAAC,CAAA;AACpB;;;;"}