@common-origin/design-system 2.19.0 → 2.21.0

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;;;;"}

package/dist/styles/icons.json

@@ -1,4 +1,20 @@
 {
+	"ai": {
+		"path": "M10 6C10.6 11 13 13.4 18 14C13 14.6 10.6 17 10 22C9.4 17 7 14.6 2 14C7 13.4 9.4 11 10 6Z M18 2C18.3 4.5 19.5 5.7 22 6C19.5 6.3 18.3 7.5 18 10C17.7 7.5 16.5 6.3 14 6C16.5 5.7 17.7 4.5 18 2Z",
+		"name": "ai",
+		"description": "Two solid four-point sparkles, one large and one small",
+		"category": "content",
+		"aliases": [
+			"sparkle",
+			"sparkles",
+			"generated",
+			"agent",
+			"magic"
+		],
+		"intent": "Use to mark AI-generated content and agent actions, always with a text label (decisions 0043 and 0046)",
+		"decorativeDefault": false,
+		"ariaLabelDefault": "AI"
+	},
 	"add": {
 		"path": "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
 		"name": "add",
@@ -387,7 +403,6 @@
 		"description": "Two vertical bars",
 		"category": "media",
 		"aliases": [
-			"stop",
 			"halt",
 			"break"
 		],
@@ -395,6 +410,20 @@
 		"decorativeDefault": false,
 		"ariaLabelDefault": "Pause"
 	},
+	"stop": {
+		"path": "M8 6H16C17.1046 6 18 6.89543 18 8V16C18 17.1046 17.1046 18 16 18H8C6.89543 18 6 17.1046 6 16V8C6 6.89543 6.89543 6 8 6Z",
+		"name": "stop",
+		"description": "Filled square with rounded corners",
+		"category": "media",
+		"aliases": [
+			"halt",
+			"end",
+			"cancel-generation"
+		],
+		"intent": "Use to stop something in progress, such as an agent generating a response or media playback",
+		"decorativeDefault": false,
+		"ariaLabelDefault": "Stop"
+	},
 	"play": {
 		"path": "M16.138 10.569 9.605 7.303A1.8 1.8 0 0 0 7 8.913v6.175a1.8 1.8 0 0 0 2.605 1.61l6.533-3.267c1.18-.59 1.18-2.272 0-2.862Z",
 		"name": "play",