npm - @fabio.caffarello/react-design-system - Versions diffs - 3.13.0 → 4.0.0 - Mend

@fabio.caffarello/react-design-system 3.13.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/dist/granular/ui/components/Timeline/Timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.js","sources":["../../../../../src/ui/components/Timeline/Timeline.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CheckCircle2 } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type TimelineOrientation = \"horizontal\" \| \"vertical\";\n\nexport interface TimelineItem {\n id: string;\n title: string;\n description?: string;\n content?: ReactNode;\n timestamp?: string;\n icon?: ReactNode;\n status?: \"default\" \| \"active\" \| \"completed\" \| \"error\";\n}\n\nexport interface TimelineProps {\n items: TimelineItem[];\n orientation?: TimelineOrientation;\n className?: string;\n}\n\n/*\n Timeline Component\n \n A timeline component for displaying events in chronological order.\n * Supports horizontal and vertical orientations.\n * Follows Atomic Design principles as an Organism component.\n \n @example\n * ```tsx\n * <Timeline\n * items={[\n * { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },\n * { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },\n * ]}\n * />\n * ```\n /\nexport default function Timeline({\n items,\n orientation = \"vertical\",\n className = \"\",\n}: TimelineProps) {\n if (orientation === \"horizontal\") {\n return (\n <div className={`flex items-start ${className}`}>\n {items.map((item, index) => {\n const status =\n item.status \|\|\n (index === 0\n ? \"active\"\n : index < items.findIndex((i) => i.status === \"active\")\n ? \"completed\"\n : \"default\");\n const isLast = index === items.length - 1;\n\n return (\n <div key={item.id} className=\"flex items-start flex-1\">\n <div className=\"flex flex-col items-center flex-1\">\n {/ Icon/Indicator /}\n <div\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\".\n {...(status === \"default\"\n ? { \"data-marker\": \"pending\" }\n : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${\n status === \"completed\"\n ? \"bg-success border-success text-fg-inverse\"\n : status === \"active\"\n ? \"bg-surface-brand-strong border-line-brand text-fg-inverse\"\n : status === \"error\"\n ? \"bg-error border-error text-fg-inverse\"\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n `}\n >\n {item.icon \|\|\n (status === \"completed\" ? (\n <CheckCircle2 className=\"h-4 w-4\" />\n ) : (\n index + 1\n ))}\n </div>\n\n {/ Connector Line /}\n {!isLast && (\n <div\n className={`\n w-full\n h-0.5\n ${getSpacingClass(\"sm\", \"mt\")}\n ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n `}\n />\n )}\n\n {/ Content /}\n <div\n className={`${getSpacingClass(\"base\", \"mt\")} text-center ${getSpacingClass(\"base\", \"px\")}`}\n >\n {item.timestamp && (\n <p\n className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n {item.timestamp}\n </p>\n )}\n <h3 className=\"text-sm font-semibold text-fg-primary\">\n {item.title}\n </h3>\n {item.description && (\n <p\n className={`text-xs text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {item.description}\n </p>\n )}\n {item.content && (\n <div className={getSpacingClass(\"sm\", \"mt\")}>\n {item.content}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n\n // Vertical orientation\n return (\n <div className={`${getSpacingClass(\"none\", \"space-y\")} ${className}`}>\n {items.map((item, index) => {\n const status =\n item.status \|\|\n (index === 0\n ? \"active\"\n : index < items.findIndex((i) => i.status === \"active\")\n ? \"completed\"\n : \"default\");\n const isLast = index === items.length - 1;\n\n return (\n <div\n key={item.id}\n className={`flex items-start ${getSpacingClass(\"base\", \"gap\")}`}\n >\n {/ Timeline Line & Icon /}\n <div className=\"flex flex-col items-center\">\n <div\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\".\n {...(status === \"default\" ? { \"data-marker\": \"pending\" } : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${\n status === \"completed\"\n ? \"bg-success border-success text-fg-inverse\"\n : status === \"active\"\n ? \"bg-surface-brand-strong border-line-brand text-fg-inverse\"\n : status === \"error\"\n ? \"bg-error border-error text-fg-inverse\"\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n `}\n >\n {item.icon \|\|\n (status === \"completed\" ? (\n <CheckCircle2 className=\"h-4 w-4\" />\n ) : (\n index + 1\n ))}\n </div>\n {!isLast && (\n <div\n className={`\n w-0.5\n flex-1\n min-h-16\n ${getSpacingClass(\"sm\", \"mt\")}\n ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n `}\n />\n )}\n </div>\n\n {/ Content */}\n <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n {item.timestamp && (\n <p\n className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n {item.timestamp}\n </p>\n )}\n <h3\n className={`\n text-base\n font-semibold\n ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-primary\"}\n `}\n >\n {item.title}\n </h3>\n {item.description && (\n <p\n className={`text-sm text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {item.description}\n </p>\n )}\n {item.content && (\n <div className={getSpacingClass(\"md\", \"mt\")}>\n {item.content}\n </div>\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n"],"names":["Timeline","items","orientation","className","jsx","item","index","status","i","isLast","jsxs","__spreadProps","__spreadValues","getRadiusClass","CheckCircle2","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;AA0CA,SAAwBA,EAAS;AAAA,EAC/B,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AACd,GAAkB;AAChB,SAAID,MAAgB,eAEhB,gBAAAE,EAAC,OAAA,EAAI,WAAW,oBAAoBD,CAAS,IAC1C,UAAAF,EAAM,IAAI,CAACI,GAAMC,MAAU;AAC1B,UAAMC,IACJF,EAAK,WACJC,MAAU,IACP,WACAA,IAAQL,EAAM,UAAU,CAACO,MAAMA,EAAE,WAAW,QAAQ,IAClD,cACA,YACFC,IAASH,MAAUL,EAAM,SAAS;AAExC,6BACG,OAAA,EAAkB,WAAU,2BAC3B,UAAA,gBAAAS,EAAC,OAAA,EAAI,WAAU,qCAEb,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAAC;AAAA,QAAAO,EAAAC,EAAA,IAGML,MAAW,YACZ,EAAE,eAAe,UAAA,IACjB,CAAA,IALL;AAAA,UAMC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMTM,EAAe,MAAM,CAAC;AAAA;AAAA,oBAGtBN,MAAW,cACP,8CACAA,MAAW,WACT,8DACAA,MAAW,UACT,0CACA,yDACV;AAAA;AAAA,UAGC,UAAAF,EAAK,SACHE,MAAW,gCACTO,GAAA,EAAa,WAAU,WAAU,IAElCR,IAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAKb,CAACG,KACA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA;AAAA;AAAA,wBAGPW,EAAgB,MAAM,IAAI,CAAC;AAAA,wBAC3BR,MAAW,cAAc,eAAe,kBAAkB;AAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAMlE,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAGK,EAAgB,QAAQ,IAAI,CAAC,gBAAgBA,EAAgB,QAAQ,IAAI,CAAC;AAAA,UAEvF,UAAA;AAAA,YAAAV,EAAK,aACJ,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,4BAA4BW,EAAgB,MAAM,IAAI,CAAC;AAAA,gBAEjE,UAAAV,EAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAGV,gBAAAD,EAAC,MAAA,EAAG,WAAU,yCACX,YAAK,OACR;AAAA,YACCC,EAAK,eACJ,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,6BAA6BW,EAAgB,MAAM,IAAI,CAAC;AAAA,gBAElE,UAAAV,EAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAGTA,EAAK,WACJ,gBAAAD,EAAC,OAAA,EAAI,WAAWW,EAAgB,MAAM,IAAI,GACvC,UAAAV,EAAK,QAAA,CACR;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ,GACF,EAAA,GA3EQA,EAAK,EA4Ef;AAAA,EAEJ,CAAC,EAAA,CACH,IAMF,gBAAAD,EAAC,OAAA,EAAI,WAAW,GAAGW,EAAgB,QAAQ,SAAS,CAAC,IAAIZ,CAAS,IAC/D,UAAAF,EAAM,IAAI,CAACI,GAAMC,MAAU;AAC1B,UAAMC,IACJF,EAAK,WACJC,MAAU,IACP,WACAA,IAAQL,EAAM,UAAU,CAACO,MAAMA,EAAE,WAAW,QAAQ,IAClD,cACA,YACFC,IAASH,MAAUL,EAAM,SAAS;AAExC,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,oBAAoBK,EAAgB,QAAQ,KAAK,CAAC;AAAA,QAG7D,UAAA;AAAA,UAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,gBAAAN;AAAA,cAAC;AAAA,cAAAO,EAAAC,EAAA,IAGML,MAAW,YAAY,EAAE,eAAe,UAAA,IAAc,CAAA,IAH5D;AAAA,gBAIC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMTM,EAAe,MAAM,CAAC;AAAA;AAAA,kBAGtBN,MAAW,cACP,8CACAA,MAAW,WACT,8DACAA,MAAW,UACT,0CACA,yDACV;AAAA;AAAA,gBAGC,UAAAF,EAAK,SACHE,MAAW,gCACTO,GAAA,EAAa,WAAU,WAAU,IAElCR,IAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,YAGb,CAACG,KACA,gBAAAL;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA;AAAA;AAAA;AAAA,sBAIPW,EAAgB,MAAM,IAAI,CAAC;AAAA,sBAC3BR,MAAW,cAAc,eAAe,kBAAkB;AAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAEhE,GAEJ;AAAA,UAGA,gBAAAG,EAAC,SAAI,WAAW,UAAUK,EAAgB,MAAM,IAAI,CAAC,IAClD,UAAA;AAAA,YAAAV,EAAK,aACJ,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,4BAA4BW,EAAgB,MAAM,IAAI,CAAC;AAAA,gBAEjE,UAAAV,EAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAGV,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA;AAAA;AAAA,kBAGTG,MAAW,WAAW,2BAA2B,iBAAiB;AAAA;AAAA,gBAGnE,UAAAF,EAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAEPA,EAAK,eACJ,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,6BAA6BW,EAAgB,MAAM,IAAI,CAAC;AAAA,gBAElE,UAAAV,EAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAGTA,EAAK,WACJ,gBAAAD,EAAC,OAAA,EAAI,WAAWW,EAAgB,MAAM,IAAI,GACvC,UAAAV,EAAK,QAAA,CACR;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,MA9EKA,EAAK;AAAA,IAAA;AAAA,EAiFhB,CAAC,EAAA,CACH;AAEJ;"}
1	+ {"version":3,"file":"Timeline.js","sources":["../../../../../src/ui/components/Timeline/Timeline.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CheckCircle2 } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type TimelineOrientation = \"horizontal\" \| \"vertical\";\n\nexport interface TimelineItem {\n id: string;\n title: string;\n description?: string;\n content?: ReactNode;\n timestamp?: string;\n icon?: ReactNode;\n status?: \"default\" \| \"active\" \| \"completed\" \| \"error\";\n}\n\nexport interface TimelineProps {\n items: TimelineItem[];\n orientation?: TimelineOrientation;\n className?: string;\n}\n\n/*\n Timeline Component\n \n A timeline component for displaying events in chronological order.\n * Supports horizontal and vertical orientations.\n \n @example\n * ```tsx\n * <Timeline\n * items={[\n * { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },\n * { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },\n * ]}\n * />\n * ```\n /\nexport default function Timeline({\n items,\n orientation = \"vertical\",\n className = \"\",\n}: TimelineProps) {\n if (orientation === \"horizontal\") {\n return (\n <div className={`flex items-start ${className}`}>\n {items.map((item, index) => {\n const status =\n item.status \|\|\n (index === 0\n ? \"active\"\n : index < items.findIndex((i) => i.status === \"active\")\n ? \"completed\"\n : \"default\");\n const isLast = index === items.length - 1;\n\n return (\n <div key={item.id} className=\"flex items-start flex-1\">\n <div className=\"flex flex-col items-center flex-1\">\n {/ Icon/Indicator /}\n <div\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\".\n {...(status === \"default\"\n ? { \"data-marker\": \"pending\" }\n : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${\n status === \"completed\"\n ? \"bg-success border-success text-fg-inverse\"\n : status === \"active\"\n ? \"bg-surface-brand-strong border-line-brand text-fg-inverse\"\n : status === \"error\"\n ? \"bg-error border-error text-fg-inverse\"\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n `}\n >\n {item.icon \|\|\n (status === \"completed\" ? (\n <CheckCircle2 className=\"h-4 w-4\" />\n ) : (\n index + 1\n ))}\n </div>\n\n {/ Connector Line /}\n {!isLast && (\n <div\n className={`\n w-full\n h-0.5\n ${getSpacingClass(\"sm\", \"mt\")}\n ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n `}\n />\n )}\n\n {/ Content /}\n <div\n className={`${getSpacingClass(\"base\", \"mt\")} text-center ${getSpacingClass(\"base\", \"px\")}`}\n >\n {item.timestamp && (\n <p\n className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n {item.timestamp}\n </p>\n )}\n <h3 className=\"text-sm font-semibold text-fg-primary\">\n {item.title}\n </h3>\n {item.description && (\n <p\n className={`text-xs text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {item.description}\n </p>\n )}\n {item.content && (\n <div className={getSpacingClass(\"sm\", \"mt\")}>\n {item.content}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n\n // Vertical orientation\n return (\n <div className={`${getSpacingClass(\"none\", \"space-y\")} ${className}`}>\n {items.map((item, index) => {\n const status =\n item.status \|\|\n (index === 0\n ? \"active\"\n : index < items.findIndex((i) => i.status === \"active\")\n ? \"completed\"\n : \"default\");\n const isLast = index === items.length - 1;\n\n return (\n <div\n key={item.id}\n className={`flex items-start ${getSpacingClass(\"base\", \"gap\")}`}\n >\n {/ Timeline Line & Icon /}\n <div className=\"flex flex-col items-center\">\n <div\n // data-marker=\"pending\" — see .claude/rules/colors.md\n // \"fg-quaternary: AA-by-construction exception\".\n {...(status === \"default\" ? { \"data-marker\": \"pending\" } : {})}\n className={`\n flex\n items-center\n justify-center\n w-10\n h-10\n ${getRadiusClass(\"full\")}\n border-2\n ${\n status === \"completed\"\n ? \"bg-success border-success text-fg-inverse\"\n : status === \"active\"\n ? \"bg-surface-brand-strong border-line-brand text-fg-inverse\"\n : status === \"error\"\n ? \"bg-error border-error text-fg-inverse\"\n : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n }\n `}\n >\n {item.icon \|\|\n (status === \"completed\" ? (\n <CheckCircle2 className=\"h-4 w-4\" />\n ) : (\n index + 1\n ))}\n </div>\n {!isLast && (\n <div\n className={`\n w-0.5\n flex-1\n min-h-16\n ${getSpacingClass(\"sm\", \"mt\")}\n ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n `}\n />\n )}\n </div>\n\n {/ Content */}\n <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n {item.timestamp && (\n <p\n className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n {item.timestamp}\n </p>\n )}\n <h3\n className={`\n text-base\n font-semibold\n ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-primary\"}\n `}\n >\n {item.title}\n </h3>\n {item.description && (\n <p\n className={`text-sm text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n >\n {item.description}\n </p>\n )}\n {item.content && (\n <div className={getSpacingClass(\"md\", \"mt\")}>\n {item.content}\n </div>\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n"],"names":["Timeline","items","orientation","className","jsx","item","index","status","i","isLast","jsxs","__spreadProps","__spreadValues","getRadiusClass","CheckCircle2","getSpacingClass"],"mappings":"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"}

package/dist/granular/ui/hooks/useFocusRestore.js CHANGED Viewed

@@ -1,20 +1,19 @@
 "use client";
-import { useRef as o, useEffect as r } from "react";
-function l(t) {
-  const u = o(null);
-  r(() => {
-    var c;
-    if (t)
-      u.current = (c = document.activeElement) != null ? c : null;
-    else {
-      const e = u.current, n = setTimeout(() => {
-        e == null || e.focus();
-      }, 0);
-      return () => clearTimeout(n);
-    }
-  }, [t]);
+import { useRef as c, useEffect as l } from "react";
+function s(r) {
+  const u = c(null), e = c(null);
+  l(() => {
+    var n;
+    if (r)
+      return e.current !== null && (clearTimeout(e.current), e.current = null), u.current = (n = document.activeElement) != null ? n : null, () => {
+        const t = u.current;
+        e.current = setTimeout(() => {
+          t == null || t.focus(), e.current = null;
+        }, 0);
+      };
+  }, [r]);
 }
 export {
-  l as useFocusRestore
+  s as useFocusRestore
 };
 //# sourceMappingURL=useFocusRestore.js.map

package/dist/granular/ui/hooks/useFocusRestore.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFocusRestore.js","sources":["../../../../src/ui/hooks/useFocusRestore.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\n/*\n Snapshot focus when an overlay opens; restore on close.\n \n When `isOpen` flips from false to true, snapshots\n * `document.activeElement` at that moment. When `isOpen` flips back to\n * false, restores focus to the snapshotted element in a `setTimeout(0)`\n * — matching the timing the existing DialogProvider proved out\n * (Dialog.test.tsx:221 depends on this exact shape).\n \n Trigger-ref-free by design: the snapshot mechanism captures whatever\n * had focus at open time, so overlays can be opened by any composition\n * (button click, programmatic call from a notification, etc.) without\n * carrying a ref to a single triggering element.\n \n Scope is restore only. Focus trapping (Tab cycling within an open\n * modal container) is the separate concern of `useFocusTrap`. The two\n * hooks compose: modal surfaces (Dialog, Drawer) use both; non-modal\n * surfaces (Popover) use only restore.\n \n @example\n * ```tsx\n * function MyOverlay({ isOpen }: { isOpen: boolean }) {\n * useFocusRestore(isOpen);\n * // ...\n * }\n * ```\n /\nexport function useFocusRestore(isOpen: boolean): void {\n const previousActiveElement = useRef<HTMLElement \| null>(null);\n\n useEffect(() => {\n if (isOpen) {\n previousActiveElement.current =\n (document.activeElement as HTMLElement \| null) ?? null;\n } ~~else~~ {\n const previous = previousActiveElement.current;\n // setTimeout(0) defers the restore until after React has committed\n // the close ~~transition~~ and removed the overlay's DOM (so the\n // ~~restore~~ ~~target~~ ~~isn't~~ a now-disposed ~~element~~ inside the overlay~~\n // — it's whatever had focus before* the overlay opened)~~.\n ~~const~~ ~~timer~~ = setTimeout(() => {\n previous?.focus();\n }, 0);\n ~~return () => clearTimeout(timer);\n~~ }\n }, [isOpen]);\n}\n"],"names":["useFocusRestore","isOpen","previousActiveElement","useRef","useEffect","_a","previous"~~,"timer"~~],"mappings":";;AA+BO,SAASA,EAAgBC,GAAuB;AACrD,QAAMC,IAAwBC,EAA2B,IAAI;~~AAE7D~~,~~EAAAC~~,EAAU,MAAM;;AACd,~~QAAIH~~;~~AACF~~,~~MAAAC~~,EAAsB,~~WACnBG~~,IAAA,SAAS,kBAAT,OAAAA,IAAiD~~;AAAA~~,~~SAC/C~~;~~AACL~~,~~YAAMC~~,~~IAAWJ~~,EAAsB,~~SAKjCK~~,~~IAAQ~~,WAAW,MAAM;~~AAC7B~~,~~QAAAD~~,KAAA,QAAAA,EAAU;AAAA,~~MACZ~~,GAAG,CAAC;~~AACJ,aAAO,MAAM,aAAaC,CAAK;~~AAAA,~~IACjC~~;AAAA,EACF,GAAG,~~CAACN~~,CAAM,CAAC;AACb;"}
1	+ {"version":3,"file":"useFocusRestore.js","sources":["../../../../src/ui/hooks/useFocusRestore.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\n/*\n Snapshot focus when an overlay opens; restore on close.\n \n When `isOpen` flips from false to true, snapshots\n * `document.activeElement` at that moment. When `isOpen` flips back to\n * false, restores focus to the snapshotted element in a `setTimeout(0)`\n * — matching the timing the existing DialogProvider proved out\n * (Dialog.test.tsx:221 depends on this exact shape).\n \n Trigger-ref-free by design: the snapshot mechanism captures whatever\n * had focus at open time, so overlays can be opened by any composition\n * (button click, programmatic call from a notification, etc.) without\n * carrying a ref to a single triggering element.\n \n Scope is restore only. Focus trapping (Tab cycling within an open\n * modal container) is the separate concern of `useFocusTrap`. The two\n * hooks compose: modal surfaces (Dialog, Drawer) use both; non-modal\n * surfaces (Popover) use only restore.\n \n @example\n * ```tsx\n * function MyOverlay({ isOpen }: { isOpen: boolean }) {\n * useFocusRestore(isOpen);\n * // ...\n * }\n * ```\n */\nexport function useFocusRestore(isOpen: boolean): void {\n const previousActiveElement = useRef<HTMLElement \| null>(null);\n const restoreTimer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n useEffect(() => {\n if (!isOpen) return;\n\n // Rising edge: cancel any pending restore (rapid close→open) and\n // snapshot whatever had focus before the overlay opened. The snapshot\n // is taken before useAutoFocus (called after this hook) moves focus\n // inside the overlay.\n if (restoreTimer.current !== null) {\n clearTimeout(restoreTimer.current);\n restoreTimer.current = null;\n }\n previousActiveElement.current =\n (document.activeElement as HTMLElement \| null) ?? null;\n\n // Restore from the effect CLEANUP — not from an `isOpen === false`\n // branch. The cleanup fires on BOTH the falling edge (isOpen → false\n // while mounted) AND on unmount-while-open. The latter is the common\n // `{isOpen && <Overlay />}` pattern: closing unmounts the subtree, so\n // an isOpen=false render never happens and a falling-edge-only restore\n // would leave focus stranded on <body> (WCAG 2.4.3).\n return () => {\n const previous = previousActiveElement.current;\n // setTimeout(0) defers the restore until after React has committed\n // the close and removed the overlay's DOM, so focus lands on the\n // pre-open element rather than a now-disposed node inside the overlay.\n restoreTimer.current = setTimeout(() => {\n previous?.focus();\n restoreTimer.current = null;\n }, 0);\n };\n }, [isOpen]);\n}\n"],"names":["useFocusRestore","isOpen","previousActiveElement","useRef","restoreTimer","useEffect","_a","previous"],"mappings":";;AA+BO,SAASA,EAAgBC,GAAuB;AACrD,QAAMC,IAAwBC,EAA2B,IAAI,GACvDC,IAAeD,EAA6C,IAAI;AAEtE,EAAAE,EAAU,MAAM;;AACd,QAAKJ;AAML,aAAIG,EAAa,YAAY,SAC3B,aAAaA,EAAa,OAAO,GACjCA,EAAa,UAAU,OAEzBF,EAAsB,WACnBI,IAAA,SAAS,kBAAT,OAAAA,IAAiD,MAQ7C,MAAM;AACX,cAAMC,IAAWL,EAAsB;AAIvC,QAAAE,EAAa,UAAU,WAAW,MAAM;AACtC,UAAAG,KAAA,QAAAA,EAAU,SACVH,EAAa,UAAU;AAAA,QACzB,GAAG,CAAC;AAAA,MACN;AAAA,EACF,GAAG,CAACH,CAAM,CAAC;AACb;"}

package/dist/granular/ui/primitives/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../../../../../src/ui/primitives/Badge/Badge.tsx"],"sourcesContent":["import { memo, forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type BadgeVariant =\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"info\"\n \| \"neutral\"\n \| \"primary\"\n \| \"secondary\";\nexport type BadgeSize = \"sm\" \| \"md\" \| \"lg\";\nexport type BadgeStyle = \"solid\" \| \"outline\";\n\nexport interface BadgeProps extends Omit<\n HTMLAttributes<HTMLSpanElement>,\n \"style\"\n> {\n variant?: BadgeVariant;\n size?: BadgeSize;\n style?: BadgeStyle;\n children: ReactNode;\n \"aria-label\"?: string;\n}\n\n/*\n Badge Component\n \n A versatile badge component for displaying status, priority, and other labels.\n * Follows Atomic Design principles as an Atom component.\n * Uses tokens for consistent theming.\n \n @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\" size=\"lg\">Critical</Badge>\n * <Badge variant=\"info\" style=\"outline\">New</Badge>\n * ```\n */\n// Badge variants using CVA\nconst badgeVariants = cva(\n // Base classes\n cn(\n \"inline-flex\",\n \"items-center\",\n \"justify-center\",\n getTypographyWeight(\"label\"),\n getRadiusClass(\"md\"),\n \"border\",\n ),\n {\n variants: {\n variant: {\n success: \"\",\n warning: \"\",\n error: \"\",\n info: \"\",\n neutral: \"\",\n primary: \"\",\n secondary: \"\",\n },\n size: {\n sm: cn(\n getSpacingClass(\"1.5\", \"px\"),\n getSpacingClass(\"0.5\", \"py\"),\n getTypographySize(\"caption\"),\n ),\n md: cn(\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"caption\"),\n ),\n lg: cn(\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"bodySmall\"),\n ),\n },\n style: {\n solid: \"\",\n outline: \"\",\n },\n },\n compoundVariants: [\n // Solid style variants\n {\n variant: \"success\",\n style: \"solid\",\n class: cn(\"bg-success-bg\", \"text-success-dark\", \"border-success\"),\n },\n {\n variant: \"warning\",\n style: \"solid\",\n class: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n },\n {\n variant: \"error\",\n style: \"solid\",\n class: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n },\n {\n variant: \"info\",\n style: \"solid\",\n class: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n },\n {\n variant: \"neutral\",\n style: \"solid\",\n class: cn(\"bg-surface-muted\", \"text-fg-primary\", \"border-line-default\"),\n },\n {\n variant: \"primary\",\n style: \"solid\",\n class: cn(\n \"bg-surface-brand-subtle\",\n \"text-fg-brand-emphasis\",\n \"border-line-brand\",\n ),\n },\n {\n variant: \"secondary\",\n style: \"solid\",\n // bg-pink-300: secondary solid badge — no semantic equivalent\n // (would shift 2 shades to bg-surface-secondary). Kept literal until\n // secondary brand surface palette expands beyond DEFAULT.\n class: cn(\n \"bg-pink-300\",\n \"text-fg-brand-secondary-emphasis\",\n \"border-line-secondary\",\n ),\n },\n // Outline style variants\n {\n variant: \"success\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-success\", \"text-fg-success\"),\n },\n {\n variant: \"warning\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-warning\", \"text-fg-warning\"),\n },\n {\n variant: \"error\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-error\", \"text-fg-error\"),\n },\n {\n variant: \"info\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-info\", \"text-fg-info\"),\n },\n {\n variant: \"neutral\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-line-default\", \"text-fg-secondary\"),\n },\n {\n variant: \"primary\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-line-brand\", \"text-fg-brand\"),\n },\n {\n variant: \"secondary\",\n style: \"outline\",\n class: cn(\n \"bg-transparent\",\n \"border-line-secondary\",\n \"text-fg-brand-secondary\",\n ),\n },\n ],\n defaultVariants: {\n variant: \"neutral\",\n size: \"md\",\n style: \"solid\",\n },\n },\n);\n\nconst Badge = memo(\n forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n {\n variant = \"neutral\",\n size = \"md\",\n style = \"solid\",\n className = \"\",\n children,\n \"aria-label\": ariaLabel,\n ...props\n },\n ref,\n ) {\n const classes = cn(badgeVariants({ variant, size, style }), className);\n\n // Best-effort accessible name resolution: explicit aria-label wins;\n // string children become the label; single-wrapped string children\n // (e.g. <Badge><span>Active</span></Badge>) are unwrapped one level.\n // Otherwise undefined and the consumer is responsible for naming\n // the badge externally.\n let accessibleLabel: string \| undefined;\n if (ariaLabel) {\n accessibleLabel = ariaLabel;\n } else if (typeof children === \"string\") {\n accessibleLabel = children;\n } else if (\n typeof children === \"object\" &&\n children !== null &&\n \"props\" in children\n ) {\n const childProps = (children as { props?: { children?: unknown } }).props;\n if (childProps?.children && typeof childProps.children === \"string\") {\n accessibleLabel = childProps.children;\n }\n }\n\n return (\n <span\n ref={ref}\n role=\"status\"\n aria-label={accessibleLabel}\n className={classes}\n {...props}\n >\n {children}\n </span>\n );\n }),\n);\n\nBadge.displayName = \"Badge\";\n\nexport default Badge;\n"],"names":["badgeVariants","cva","cn","getTypographyWeight","getRadiusClass","getSpacingClass","getTypographySize","Badge","memo","forwardRef","_a","ref","_b","variant","size","style","className","children","ariaLabel","props","__objRest","classes","accessibleLabel","childProps","jsx","__spreadProps","__spreadValues"],"mappings":"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"}
1	+ {"version":3,"file":"Badge.js","sources":["../../../../../src/ui/primitives/Badge/Badge.tsx"],"sourcesContent":["import { memo, forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type BadgeVariant =\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"info\"\n \| \"neutral\"\n \| \"primary\"\n \| \"secondary\";\nexport type BadgeSize = \"sm\" \| \"md\" \| \"lg\";\nexport type BadgeStyle = \"solid\" \| \"outline\";\n\nexport interface BadgeProps extends Omit<\n HTMLAttributes<HTMLSpanElement>,\n \"style\"\n> {\n variant?: BadgeVariant;\n size?: BadgeSize;\n style?: BadgeStyle;\n children: ReactNode;\n \"aria-label\"?: string;\n}\n\n/*\n Badge Component\n \n A versatile badge component for displaying status, priority, and other labels.\n * Uses tokens for consistent theming.\n \n @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\" size=\"lg\">Critical</Badge>\n * <Badge variant=\"info\" style=\"outline\">New</Badge>\n * ```\n */\n// Badge variants using CVA\nconst badgeVariants = cva(\n // Base classes\n cn(\n \"inline-flex\",\n \"items-center\",\n \"justify-center\",\n getTypographyWeight(\"label\"),\n getRadiusClass(\"md\"),\n \"border\",\n ),\n {\n variants: {\n variant: {\n success: \"\",\n warning: \"\",\n error: \"\",\n info: \"\",\n neutral: \"\",\n primary: \"\",\n secondary: \"\",\n },\n size: {\n sm: cn(\n getSpacingClass(\"1.5\", \"px\"),\n getSpacingClass(\"0.5\", \"py\"),\n getTypographySize(\"caption\"),\n ),\n md: cn(\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"caption\"),\n ),\n lg: cn(\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"bodySmall\"),\n ),\n },\n style: {\n solid: \"\",\n outline: \"\",\n },\n },\n compoundVariants: [\n // Solid style variants\n {\n variant: \"success\",\n style: \"solid\",\n class: cn(\"bg-success-bg\", \"text-success-dark\", \"border-success\"),\n },\n {\n variant: \"warning\",\n style: \"solid\",\n class: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n },\n {\n variant: \"error\",\n style: \"solid\",\n class: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n },\n {\n variant: \"info\",\n style: \"solid\",\n class: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n },\n {\n variant: \"neutral\",\n style: \"solid\",\n class: cn(\"bg-surface-muted\", \"text-fg-primary\", \"border-line-default\"),\n },\n {\n variant: \"primary\",\n style: \"solid\",\n class: cn(\n \"bg-surface-brand-subtle\",\n \"text-fg-brand-emphasis\",\n \"border-line-brand\",\n ),\n },\n {\n variant: \"secondary\",\n style: \"solid\",\n // bg-pink-300: secondary solid badge — no semantic equivalent\n // (would shift 2 shades to bg-surface-secondary). Kept literal until\n // secondary brand surface palette expands beyond DEFAULT.\n class: cn(\n \"bg-pink-300\",\n \"text-fg-brand-secondary-emphasis\",\n \"border-line-secondary\",\n ),\n },\n // Outline style variants\n {\n variant: \"success\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-success\", \"text-fg-success\"),\n },\n {\n variant: \"warning\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-warning\", \"text-fg-warning\"),\n },\n {\n variant: \"error\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-error\", \"text-fg-error\"),\n },\n {\n variant: \"info\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-info\", \"text-fg-info\"),\n },\n {\n variant: \"neutral\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-line-default\", \"text-fg-secondary\"),\n },\n {\n variant: \"primary\",\n style: \"outline\",\n class: cn(\"bg-transparent\", \"border-line-brand\", \"text-fg-brand\"),\n },\n {\n variant: \"secondary\",\n style: \"outline\",\n class: cn(\n \"bg-transparent\",\n \"border-line-secondary\",\n \"text-fg-brand-secondary\",\n ),\n },\n ],\n defaultVariants: {\n variant: \"neutral\",\n size: \"md\",\n style: \"solid\",\n },\n },\n);\n\nconst Badge = memo(\n forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n {\n variant = \"neutral\",\n size = \"md\",\n style = \"solid\",\n className = \"\",\n children,\n \"aria-label\": ariaLabel,\n ...props\n },\n ref,\n ) {\n const classes = cn(badgeVariants({ variant, size, style }), className);\n\n // Best-effort accessible name resolution: explicit aria-label wins;\n // string children become the label; single-wrapped string children\n // (e.g. <Badge><span>Active</span></Badge>) are unwrapped one level.\n // Otherwise undefined and the consumer is responsible for naming\n // the badge externally.\n let accessibleLabel: string \| undefined;\n if (ariaLabel) {\n accessibleLabel = ariaLabel;\n } else if (typeof children === \"string\") {\n accessibleLabel = children;\n } else if (\n typeof children === \"object\" &&\n children !== null &&\n \"props\" in children\n ) {\n const childProps = (children as { props?: { children?: unknown } }).props;\n if (childProps?.children && typeof childProps.children === \"string\") {\n accessibleLabel = childProps.children;\n }\n }\n\n return (\n <span\n ref={ref}\n role=\"status\"\n aria-label={accessibleLabel}\n className={classes}\n {...props}\n >\n {children}\n </span>\n );\n }),\n);\n\nBadge.displayName = \"Badge\";\n\nexport default Badge;\n"],"names":["badgeVariants","cva","cn","getTypographyWeight","getRadiusClass","getSpacingClass","getTypographySize","Badge","memo","forwardRef","_a","ref","_b","variant","size","style","className","children","ariaLabel","props","__objRest","classes","accessibleLabel","childProps","jsx","__spreadProps","__spreadValues"],"mappings":"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"}

package/dist/granular/ui/primitives/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../../../src/ui/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n useRef,\n useEffect,\n forwardRef,\n memo,\n useId,\n useMemo,\n useCallback,\n} from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface CheckboxProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> {\n label?: ReactNode;\n error?: boolean;\n /*\n Validation success state — paints the border and (when\n * `helperText` is also set) the helper-text color green. Matches\n * the Input + Select + Radio + Switch + Textarea convention; the\n * three feedback flags (`error`, `success`, `helperText`) cover\n * every form primitive in the DS. Error takes precedence when\n * both `error` and `success` are set.\n /\n success?: boolean;\n helperText?: string;\n indeterminate?: boolean;\n}\n\n/\n Checkbox Component\n \n A styled checkbox input component.\n * Follows Atomic Design principles as an Atom component.\n * Uses Composite Pattern when combined with Label and ErrorMessage.\n \n @example\n * ```tsx\n * <Checkbox\n * id=\"terms\"\n * label=\"I agree to the terms\"\n * checked={checked}\n * onChange={handleChange}\n * />\n * ```\n */\nconst Checkbox = memo(\n forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n {\n id,\n label,\n error = false,\n success = false,\n helperText,\n className = \"\",\n disabled = false,\n indeterminate = false,\n ...props\n },\n ref,\n ) {\n // Stable fallback id when the consumer doesn't provide one. useId\n // is SSR-safe and stable across renders, replacing the deprecated\n // Math.random().substr() pattern.\n const reactId = useId();\n const checkboxId = id \|\| `checkbox-${reactId}`;\n\n const errorId = useMemo(\n () => (error ? `${checkboxId}-error` : undefined),\n [error, checkboxId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${checkboxId}-helper` : undefined),\n [helperText, checkboxId],\n );\n\n // Memoize focus ring colors\n const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n const focusRingColor = useMemo(\n () =>\n error\n ? errorFocusRing.replace(\"focus:border-\", \"focus:ring-\")\n : primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\"),\n [error, errorFocusRing, primaryFocusRing],\n );\n\n // Memoize classes — error wins over success when both flags are\n // set (a field cannot be valid AND invalid; treat it as invalid).\n const checkboxClasses = useMemo(\n () =>\n cn(\n \"h-4\",\n \"w-4\",\n getRadiusClass(\"sm\"),\n \"border\",\n \"border-line-default\",\n \"text-fg-brand\",\n \"focus:ring-2\",\n focusRingColor,\n \"focus:ring-offset-2\",\n \"disabled:opacity-50\",\n \"disabled:cursor-not-allowed\",\n \"cursor-pointer\",\n error && \"border-error\",\n !error && success && \"border-success\",\n className,\n ),\n [focusRingColor, error, success, className],\n );\n\n const labelClasses = useMemo(\n () =>\n cn(\n getTypographyClasses(\"label\"),\n getSpacingClass(\"sm\", \"ml\"),\n disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n ),\n [disabled],\n );\n\n // Set indeterminate state via ref\n const internalRef = useRef<HTMLInputElement>(null);\n\n // Memoize callback ref\n const setRef = useCallback(\n (element: HTMLInputElement \| null) => {\n internalRef.current = element;\n\n // Handle forwarded ref (can be function or object)\n if (typeof ref === \"function\") {\n ref(element);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLInputElement \| null>).current =\n element;\n }\n\n // Set indeterminate state\n if (element) {\n element.indeterminate = indeterminate;\n }\n },\n [ref, indeterminate],\n );\n\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"my\"))}>\n <div className=\"flex items-center\">\n <input\n type=\"checkbox\"\n id={checkboxId}\n ref={setRef}\n className={checkboxClasses}\n disabled={disabled}\n aria-invalid={error}\n aria-describedby={errorId \|\| helperId \|\| undefined}\n aria-label={!label ? \"Checkbox\" : undefined}\n {...props}\n />\n {label && (\n <label htmlFor={checkboxId} className={labelClasses}>\n {label}\n </label>\n )}\n </div>\n {(error \|\| success \|\| helperText) && (\n <div\n id={errorId \|\| helperId}\n className={cn(\n getSpacingClass(\"xs\", \"mt\"),\n getTypographyClasses(\"caption\"),\n error\n ? \"text-fg-error\"\n : success\n ? \"text-fg-success\"\n : \"text-fg-secondary\",\n )}\n role={error \|\| success ? \"alert\" : undefined}\n >\n {error ? helperText \|\| \"This field has an error\" : helperText}\n </div>\n )}\n </div>\n );\n }),\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","className","disabled","indeterminate","props","__objRest","reactId","useId","checkboxId","errorId","useMemo","helperId","primaryFocusRing","errorFocusRing","focusRingColor","checkboxClasses","cn","getRadiusClass","labelClasses","getTypographyClasses","getSpacingClass","internalRef","useRef","setRef","useCallback","element","useEffect","jsxs","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqDA~~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"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../../src/ui/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n useRef,\n useEffect,\n forwardRef,\n memo,\n useId,\n useMemo,\n useCallback,\n} from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface CheckboxProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> {\n label?: ReactNode;\n error?: boolean;\n /*\n Validation success state — paints the border and (when\n * `helperText` is also set) the helper-text color green. Matches\n * the Input + Select + Radio + Switch + Textarea convention; the\n * three feedback flags (`error`, `success`, `helperText`) cover\n * every form primitive in the DS. Error takes precedence when\n * both `error` and `success` are set.\n /\n success?: boolean;\n helperText?: string;\n indeterminate?: boolean;\n}\n\n/\n Checkbox Component\n \n A styled checkbox input component.\n * Uses Composite Pattern when combined with Label and ErrorMessage.\n \n @example\n * ```tsx\n * <Checkbox\n * id=\"terms\"\n * label=\"I agree to the terms\"\n * checked={checked}\n * onChange={handleChange}\n * />\n * ```\n */\nconst Checkbox = memo(\n forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n {\n id,\n label,\n error = false,\n success = false,\n helperText,\n className = \"\",\n disabled = false,\n indeterminate = false,\n ...props\n },\n ref,\n ) {\n // Stable fallback id when the consumer doesn't provide one. useId\n // is SSR-safe and stable across renders, replacing the deprecated\n // Math.random().substr() pattern.\n const reactId = useId();\n const checkboxId = id \|\| `checkbox-${reactId}`;\n\n const errorId = useMemo(\n () => (error ? `${checkboxId}-error` : undefined),\n [error, checkboxId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${checkboxId}-helper` : undefined),\n [helperText, checkboxId],\n );\n\n // Memoize focus ring colors\n const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n const focusRingColor = useMemo(\n () =>\n error\n ? errorFocusRing.replace(\"focus:border-\", \"focus:ring-\")\n : primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\"),\n [error, errorFocusRing, primaryFocusRing],\n );\n\n // Memoize classes — error wins over success when both flags are\n // set (a field cannot be valid AND invalid; treat it as invalid).\n const checkboxClasses = useMemo(\n () =>\n cn(\n \"h-4\",\n \"w-4\",\n getRadiusClass(\"sm\"),\n \"border\",\n \"border-line-default\",\n \"text-fg-brand\",\n \"focus:ring-2\",\n focusRingColor,\n \"focus:ring-offset-2\",\n \"disabled:opacity-50\",\n \"disabled:cursor-not-allowed\",\n \"cursor-pointer\",\n error && \"border-error\",\n !error && success && \"border-success\",\n className,\n ),\n [focusRingColor, error, success, className],\n );\n\n const labelClasses = useMemo(\n () =>\n cn(\n getTypographyClasses(\"label\"),\n getSpacingClass(\"sm\", \"ml\"),\n disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n ),\n [disabled],\n );\n\n // Set indeterminate state via ref\n const internalRef = useRef<HTMLInputElement>(null);\n\n // Memoize callback ref\n const setRef = useCallback(\n (element: HTMLInputElement \| null) => {\n internalRef.current = element;\n\n // Handle forwarded ref (can be function or object)\n if (typeof ref === \"function\") {\n ref(element);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLInputElement \| null>).current =\n element;\n }\n\n // Set indeterminate state\n if (element) {\n element.indeterminate = indeterminate;\n }\n },\n [ref, indeterminate],\n );\n\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"my\"))}>\n <div className=\"flex items-center\">\n <input\n type=\"checkbox\"\n id={checkboxId}\n ref={setRef}\n className={checkboxClasses}\n disabled={disabled}\n aria-invalid={error}\n aria-describedby={errorId \|\| helperId \|\| undefined}\n aria-label={!label ? \"Checkbox\" : undefined}\n {...props}\n />\n {label && (\n <label htmlFor={checkboxId} className={labelClasses}>\n {label}\n </label>\n )}\n </div>\n {(error \|\| success \|\| helperText) && (\n <div\n id={errorId \|\| helperId}\n className={cn(\n getSpacingClass(\"xs\", \"mt\"),\n getTypographyClasses(\"caption\"),\n error\n ? \"text-fg-error\"\n : success\n ? \"text-fg-success\"\n : \"text-fg-secondary\",\n )}\n role={error \|\| success ? \"alert\" : undefined}\n >\n {error ? helperText \|\| \"This field has an error\" : helperText}\n </div>\n )}\n </div>\n );\n }),\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","className","disabled","indeterminate","props","__objRest","reactId","useId","checkboxId","errorId","useMemo","helperId","primaryFocusRing","errorFocusRing","focusRingColor","checkboxClasses","cn","getRadiusClass","labelClasses","getTypographyClasses","getSpacingClass","internalRef","useRef","setRef","useCallback","element","useEffect","jsxs","jsx","__spreadValues"],"mappings":"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"}

package/dist/granular/ui/primitives/Chip/Chip.js CHANGED Viewed

@@ -1,21 +1,21 @@
 "use client";
-import { jsx as n, jsxs as L } from "react/jsx-runtime";
-import { forwardRef as z } from "react";
-import { X as R } from "lucide-react";
-import { Slot as S } from "@radix-ui/react-slot";
-import { getRadiusClass as u } from "../../tokens/radius.js";
-import { getSpacingClass as r } from "../../tokens/spacing.js";
-import { getTypographySize as c } from "../../tokens/typography.js";
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import { X as D } from "lucide-react";
+import { Slot as I } from "@radix-ui/react-slot";
+import { getRadiusClass as c } from "../../tokens/radius.js";
+import { getSpacingClass as t } from "../../tokens/spacing.js";
+import { getTypographyWeight as V, getTypographySize as f } from "../../tokens/typography.js";
 import { cn as e } from "../../utils/cn.js";
-import { cva as j } from "../../utils/cva.js";
-const h = j(
+import { cva as $ } from "../../utils/cva.js";
+const N = $(
   // Base classes
   e(
     "inline-flex",
     "items-center",
     "font-medium",
-    u("full"),
-    r("xs", "gap")
+    c("full"),
+    t("xs", "gap")
   ),
   {
     variants: {
@@ -41,19 +41,19 @@ const h = j(
       },
       size: {
         sm: e(
-          r("xs", "px"),
-          r("xs", "py"),
-          c("caption")
+          t("xs", "px"),
+          t("xs", "py"),
+          f("caption")
         ),
         md: e(
-          r("sm", "px"),
-          r("xs", "py"),
-          c("bodySmall")
+          t("sm", "px"),
+          t("xs", "py"),
+          f("bodySmall")
         ),
         lg: e(
-          r("md", "px"),
-          r("sm", "py"),
-          c("body")
+          t("md", "px"),
+          t("sm", "py"),
+          f("body")
         )
       },
       selected: {
@@ -97,70 +97,89 @@ const h = j(
       disabled: !1
     }
   }
-), k = z(function(p, b) {
+), A = B(function(v, x) {
   const {
-    children: a,
-    variant: m = "default",
-    size: g = "md",
-    selected: l = !1,
+    children: r,
+    variant: u = "default",
+    size: h = "md",
+    selected: o = !1,
     disabled: s = !1,
-    className: v = "",
-    "aria-label": o,
-    tabIndex: d,
-    asChild: C = !1
-  } = p, x = (() => {
-    if (o) return o;
-    if (typeof a == "string") return a;
-    if (typeof a == "object" && a !== null && "props" in a) {
-      const t = a.props;
-      if (t != null && t.children && typeof t.children == "string")
-        return t.children;
+    className: y = "",
+    "aria-label": l,
+    tabIndex: p,
+    asChild: w = !1
+  } = v, d = (() => {
+    if (l) return l;
+    if (typeof r == "string") return r;
+    if (typeof r == "object" && r !== null && "props" in r) {
+      const a = r.props;
+      if (a != null && a.children && typeof a.children == "string")
+        return a.children;
     }
   })();
-  if (C)
+  if (w)
     return /* @__PURE__ */ n(
-      S,
+      I,
       {
-        ref: b,
+        ref: x,
         className: e(
-          h({ variant: m, size: g, selected: l, disabled: s }),
-          v
+          N({ variant: u, size: h, selected: o, disabled: s }),
+          y
         ),
-        "aria-label": o,
+        "aria-label": l,
         "aria-disabled": s || void 0,
-        tabIndex: d,
-        children: a
+        tabIndex: p,
+        children: r
       }
     );
-  const { onRemove: f, onClick: i } = p, y = i !== void 0, N = y && !s, w = (t) => {
-    s || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i == null || i());
-  };
-  return /* @__PURE__ */ L(
+  const { onRemove: b, onClick: i, count: m } = v, g = i !== void 0, L = g && !s, j = (a) => {
+    s || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), i == null || i());
+  }, C = m !== void 0, z = o || u === "filled", R = C ? /* @__PURE__ */ n(
+    "span",
+    {
+      "aria-hidden": g || void 0,
+      className: e(
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "tabular-nums",
+        "leading-none",
+        c("full"),
+        t("xs", "px"),
+        t("0.5", "py"),
+        f("caption"),
+        V("label"),
+        z ? e("bg-surface-base", "text-fg-brand-emphasis") : e("bg-surface-brand-strong", "text-fg-inverse")
+      ),
+      children: m
+    }
+  ) : null, S = C && d !== void 0 ? `${d}, ${m}` : d;
+  return /* @__PURE__ */ k(
     "div",
     {
-      ref: b,
+      ref: x,
       className: e(
-        h({ variant: m, size: g, selected: l, disabled: s }),
-        f && r("xs", "pr"),
-        v
+        N({ variant: u, size: h, selected: o, disabled: s }),
+        b && t("xs", "pr"),
+        y
       ),
       "aria-disabled": s,
       children: [
-        y ? /* @__PURE__ */ n(
+        g ? /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             onClick: s ? void 0 : i,
-            onKeyDown: w,
+            onKeyDown: j,
             disabled: s,
-            "aria-pressed": l ? !0 : void 0,
-            "aria-label": o || x,
-            tabIndex: d !== void 0 ? d : N ? 0 : void 0,
+            "aria-pressed": o ? !0 : void 0,
+            "aria-label": l || S,
+            tabIndex: p !== void 0 ? p : L ? 0 : void 0,
             className: e(
               "flex-1",
               "bg-transparent",
               "border-0",
-              r("none", "p"),
+              t("none", "p"),
               "text-inherit",
               "text-left",
               "cursor-pointer",
@@ -168,39 +187,40 @@ const h = j(
               "focus:ring-2",
               "focus:ring-line-focus",
               "focus:ring-offset-2",
-              u("full")
+              c("full")
             ),
-            children: a
+            children: r
           }
-        ) : /* @__PURE__ */ n("span", { children: a }),
-        f && !s && /* @__PURE__ */ n(
+        ) : /* @__PURE__ */ n("span", { children: r }),
+        R,
+        b && !s && /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            onClick: (t) => {
-              t.stopPropagation(), f();
+            onClick: (a) => {
+              a.stopPropagation(), b();
             },
             className: e(
-              r("xs", "ml"),
+              t("xs", "ml"),
               "hover:bg-tint-hover",
-              u("full"),
-              r("xs", "p"),
+              c("full"),
+              t("xs", "p"),
               "transition-colors",
               "focus:outline-none",
               "focus:ring-2",
               "focus:ring-line-focus",
               "focus:ring-offset-1"
             ),
-            "aria-label": `Remove ${x || "chip"}`,
-            children: /* @__PURE__ */ n(R, { className: "h-3 w-3", "aria-hidden": "true" })
+            "aria-label": `Remove ${d || "chip"}`,
+            children: /* @__PURE__ */ n(D, { className: "h-3 w-3", "aria-hidden": "true" })
           }
         )
       ]
     }
   );
 });
-k.displayName = "Chip";
+A.displayName = "Chip";
 export {
-  k as default
+  A as default
 };
 //# sourceMappingURL=Chip.js.map

package/dist/granular/ui/primitives/Chip/Chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.js","sources":["../../../../../src/ui/primitives/Chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type ChipVariant = \"default\" \| \"outlined\" \| \"filled\";\nexport type ChipSize = \"sm\" \| \"md\" \| \"lg\";\n\ninterface ChipBaseProps {\n children: ReactNode;\n variant?: ChipVariant;\n size?: ChipSize;\n selected?: boolean;\n disabled?: boolean;\n className?: string;\n \"aria-label\"?: string;\n tabIndex?: number;\n}\n\ninterface ChipStandardProps extends ChipBaseProps {\n asChild?: false;\n onRemove?: () => void;\n onClick?: () => void;\n}\n\n/*\n `asChild` collapses the chip into a single node provided by the\n * consumer (typically `<Link>`). The non-interactive frame + inner\n * label-button + X structure is intentionally NOT rendered — the child\n * IS the chip. As a consequence:\n \n - `onClick` and `onRemove` are forbidden at the type level. The\n * child's own click handler (and `href`) is what fires; consumers\n * who need a removable selected filter use the standard\n * (non-asChild) form.\n * - `selected` still applies the visual classes via `chipVariants`,\n * but NO `aria-pressed` is emitted. Toggle-button semantics on\n * `<a>` would lie — a link isn't a two-state control. Consumers\n * that need the selected route surfaced to AT users should pass\n * `aria-current=\"page\"` (or similar) directly on the child Link.\n \n @see `.claude/rules/components.md` and the inline a11y notes below.\n /\ninterface ChipAsChildProps extends ChipBaseProps {\n asChild: true;\n /\n `onClick` is forbidden when `asChild` is true — the child element\n * owns interaction. Pass the handler (or `href`) on the child.\n /\n onClick?: never;\n /\n `onRemove` is forbidden when `asChild` is true — the collapsed\n * node has no slot for an X button. Use the standard (non-asChild)\n * form when removal is required.\n /\n onRemove?: never;\n}\n\nexport type ChipProps = ChipStandardProps \| ChipAsChildProps;\n\n/\n Chip Component\n \n A chip/tag for labels, filters, or selected items.\n \n Standard form: an outer `<div>` frame (never interactive) with an\n * inner `<button>` label (when `onClick`) and a sibling X `<button>`\n * (when `onRemove`). This shape closes two axe violations the older\n * implementation hit — `aria-required-parent` (role=option without a\n * listbox) and `nested-interactive` (clickable outer + clickable X).\n \n `asChild` form: a single node provided by the consumer (e.g.\n * `<Link>`), with the chip's classes projected via Radix `Slot`. See\n * the `ChipAsChildProps` JSDoc for the a11y responsibility transfer\n * — the consumer's child carries `href`, focus behavior, and any\n * route-state ARIA (`aria-current`). Forbidden in this form:\n * `onClick`, `onRemove` (TS-level).\n \n @example\n * ```tsx\n * <Chip>Tag</Chip>\n * <Chip onRemove={() => console.log('removed')}>Removable</Chip>\n \n // Navigation chip — server-rendered, zero-JS-friendly.\n * <Chip asChild variant=\"filled\">\n * <Link href=\"/filtros/ativo\" prefetch aria-current=\"page\">Active</Link>\n * </Chip>\n * ```\n */\n// Chip variants using CVA\nconst chipVariants = cva(\n // Base classes\n cn(\n \"inline-flex\",\n \"items-center\",\n \"font-medium\",\n getRadiusClass(\"full\"),\n getSpacingClass(\"xs\", \"gap\"),\n ),\n {\n variants: {\n variant: {\n default: cn(\n \"bg-surface-muted\",\n \"text-fg-primary\",\n \"border\",\n \"border-line-default\",\n ),\n outlined: cn(\n \"bg-transparent\",\n \"text-fg-primary\",\n \"border\",\n \"border-line-default\",\n ),\n filled: cn(\n \"bg-surface-brand-strong\",\n \"text-fg-inverse\",\n \"border\",\n \"border-transparent\",\n ),\n },\n size: {\n sm: cn(\n getSpacingClass(\"xs\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"caption\"),\n ),\n md: cn(\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"bodySmall\"),\n ),\n lg: cn(\n getSpacingClass(\"md\", \"px\"),\n getSpacingClass(\"sm\", \"py\"),\n getTypographySize(\"body\"),\n ),\n },\n selected: {\n true: cn(\n \"bg-surface-brand-strong\",\n \"text-fg-inverse\",\n \"border\",\n \"border-line-brand\",\n ),\n false: \"\",\n },\n disabled: {\n true: \"opacity-50 cursor-not-allowed\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n selected: true,\n variant: \"default\",\n class: \"\", // Override variant when selected\n },\n {\n selected: true,\n variant: \"outlined\",\n class: \"\", // Override variant when selected\n },\n {\n selected: true,\n variant: \"filled\",\n class: \"\", // Override variant when selected\n },\n ],\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n selected: false,\n disabled: false,\n },\n },\n);\n\nconst Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(props, ref) {\n const {\n children,\n variant = \"default\",\n size = \"md\",\n selected = false,\n disabled = false,\n className = \"\",\n \"aria-label\": ariaLabel,\n tabIndex,\n asChild = false,\n } = props;\n\n // Generate accessible label\n const getAccessibleLabel = (): string \| undefined => {\n if (ariaLabel) return ariaLabel;\n if (typeof children === \"string\") return children;\n // For non-string children, try to extract text content\n if (\n typeof children === \"object\" &&\n children !== null &&\n \"props\" in children\n ) {\n const childProps = (children as { props?: { children?: unknown } }).props;\n if (childProps?.children && typeof childProps.children === \"string\") {\n return childProps.children;\n }\n }\n return undefined;\n };\n\n const accessibleLabel = getAccessibleLabel();\n\n // asChild path: collapse the entire chip structure (frame + label\n // button + X) into the single consumer-provided node. The frame's\n // visual classes are projected onto the child via Slot.\n //\n // A11Y RESPONSIBILITY TRANSFER. The child element owns:\n // - focus (its native focus ring, or its own focus utilities)\n // - activation (its own click handler / href for navigation)\n // - route-state semantics: `aria-current=\"page\"` on a selected\n // Link is the right tool. `aria-pressed` is intentionally NOT\n // emitted here — a link is not a toggle button.\n // - disabled semantics: `aria-disabled` is set when `disabled` is\n // true, but it does NOT block navigation. Consumers that must\n // truly disable navigation should also gate `href` upstream.\n //\n // TS forbids `onClick` / `onRemove` in this form (see ChipAsChildProps).\n if (asChild) {\n return (\n <Slot\n ref={ref}\n className={cn(\n chipVariants({ variant, size, selected, disabled }),\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={disabled \|\| undefined}\n tabIndex={tabIndex}\n >\n {children}\n </Slot>\n );\n }\n\n // Standard form below. Narrow `props` so the union picks up\n // onClick/onRemove handlers (forbidden when asChild=true at TS level).\n const { onRemove, onClick } = props as ChipStandardProps;\n\n // Architecture:\n // The label is a real `<button>` whenever the chip is meant to be\n // activated (`onClick` provided). The X is a sibling `<button>` when\n // `onRemove` is provided. The outer `<div>` is NEVER interactive —\n // no `role`, no `tabIndex`, no event handlers. This unifies what\n // used to be three structural variants:\n // - `onClick` only → outer `role=\"button\"` [old]\n // - `onClick` + `onRemove` (no selected) → label-button [PR68]\n // - `selected` → outer `role=\"option\"` [old, axe-flagged]\n // into one consistent shape: label is the actor, outer is the chip\n // chrome (visual frame).\n //\n // Why this matters for a11y:\n // - `role=\"option\"` outside `role=\"listbox\"` violates `aria-required-\n // parent`. The old `selected` path failed axe in every standalone\n // chip. Moving the action to a native `<button>` with\n // `aria-pressed={selected}` (toggle button pattern) communicates\n // state correctly without requiring a listbox parent.\n // - The interactive outer + inner X button produced nested-interactive\n // whenever the consumer combined `selected` (or `onClick`) with\n // `onRemove`. Outer non-interactive + sibling buttons fixes both\n // cases at once.\n //\n // `selected` with no `onClick` is decorative only — the chip CANNOT\n // toggle, so it gets no `aria-pressed` (which would lie) and no role.\n // The visual `selected` styling (chipVariants.selected) applies, but\n // AT users read it as static text. Consumers who want the state\n // communicated must also pass `onClick` to make it a real toggle.\n const useLabelButton = onClick !== undefined;\n const interactive = useLabelButton && !disabled;\n\n // Keyboard handler for the label-button. Native `<button>` activates on\n // Enter/Space in real browsers, but JSDOM does NOT simulate Enter → click,\n // so this preserves the previous test-friendly behavior AND adds explicit\n // `preventDefault` (the original outer-as-button needed it; on a native\n // button this is mostly belt-and-suspenders but harmless).\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n onClick?.();\n }\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n chipVariants({ variant, size, selected, disabled }),\n onRemove && getSpacingClass(\"xs\", \"pr\"),\n className,\n )}\n aria-disabled={disabled}\n >\n {useLabelButton ? (\n <button\n type=\"button\"\n onClick={disabled ? undefined : onClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n aria-pressed={selected ? true : undefined}\n aria-label={ariaLabel \|\| accessibleLabel}\n tabIndex={\n tabIndex !== undefined ? tabIndex : interactive ? 0 : undefined\n }\n className={cn(\n \"flex-1\",\n \"bg-transparent\",\n \"border-0\",\n getSpacingClass(\"none\", \"p\"),\n \"text-inherit\",\n \"text-left\",\n \"cursor-pointer\",\n \"focus:outline-none\",\n \"focus:ring-2\",\n \"focus:ring-line-focus\",\n \"focus:ring-offset-2\",\n getRadiusClass(\"full\"),\n )}\n >\n {children}\n </button>\n ) : (\n <span>{children}</span>\n )}\n {onRemove && !disabled && (\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove();\n }}\n className={cn(\n getSpacingClass(\"xs\", \"ml\"),\n \"hover:bg-tint-hover\",\n getRadiusClass(\"full\"),\n getSpacingClass(\"xs\", \"p\"),\n \"transition-colors\",\n \"focus:outline-none\",\n \"focus:ring-2\",\n \"focus:ring-line-focus\",\n \"focus:ring-offset-1\",\n )}\n aria-label={`Remove ${accessibleLabel \|\| \"chip\"}`}\n >\n <X className=\"h-3 w-3\" aria-hidden=\"true\" />\n </button>\n )}\n </div>\n );\n});\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n"],"names":["chipVariants","cva","cn","getRadiusClass","getSpacingClass","getTypographySize","Chip","forwardRef","props","ref","children","variant","size","selected","disabled","className","ariaLabel","tabIndex","asChild","accessibleLabel","childProps","jsx","Slot","onRemove","onClick","useLabelButton","interactive","handleKeyDown","e","jsxs","X"],"mappings":"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"}
1	+ {"version":3,"file":"Chip.js","sources":["../../../../../src/ui/primitives/Chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type ChipVariant = \"default\" \| \"outlined\" \| \"filled\";\nexport type ChipSize = \"sm\" \| \"md\" \| \"lg\";\n\ninterface ChipBaseProps {\n children: ReactNode;\n variant?: ChipVariant;\n size?: ChipSize;\n selected?: boolean;\n disabled?: boolean;\n className?: string;\n \"aria-label\"?: string;\n tabIndex?: number;\n}\n\ninterface ChipStandardProps extends ChipBaseProps {\n asChild?: false;\n onRemove?: () => void;\n onClick?: () => void;\n /*\n Optional count sub-badge rendered at the end of the chip (before the\n * remove ✕, if any) — e.g. `Casa 12`, `Tramitando 340` in a filter bar.\n \n The sub-badge inverts with the chip surface so it always contrasts:\n * a brand pill on neutral chips, a light pill on brand chips\n * (`selected` / `variant=\"filled\"`). The number is folded into the\n * interactive chip's accessible name (`\"Casa, 12\"`) so AT users hear\n * it; pass an explicit `aria-label` to override that phrasing.\n \n Forbidden in the `asChild` form (the consumer composes the node).\n * `0` is a legitimate value and renders `0`; omit the prop for \"no\n * count\".\n /\n count?: number;\n}\n\n/\n `asChild` collapses the chip into a single node provided by the\n * consumer (typically `<Link>`). The non-interactive frame + inner\n * label-button + X structure is intentionally NOT rendered — the child\n * IS the chip. As a consequence:\n \n - `onClick` and `onRemove` are forbidden at the type level. The\n * child's own click handler (and `href`) is what fires; consumers\n * who need a removable selected filter use the standard\n * (non-asChild) form.\n * - `selected` still applies the visual classes via `chipVariants`,\n * but NO `aria-pressed` is emitted. Toggle-button semantics on\n * `<a>` would lie — a link isn't a two-state control. Consumers\n * that need the selected route surfaced to AT users should pass\n * `aria-current=\"page\"` (or similar) directly on the child Link.\n \n @see `.claude/rules/components.md` and the inline a11y notes below.\n /\ninterface ChipAsChildProps extends ChipBaseProps {\n asChild: true;\n /\n `onClick` is forbidden when `asChild` is true — the child element\n * owns interaction. Pass the handler (or `href`) on the child.\n /\n onClick?: never;\n /\n `onRemove` is forbidden when `asChild` is true — the collapsed\n * node has no slot for an X button. Use the standard (non-asChild)\n * form when removal is required.\n /\n onRemove?: never;\n /\n `count` is forbidden when `asChild` is true — the collapsed node is\n * a single consumer element with no slot for the sub-badge. Render the\n * count inside the child yourself, or use the standard form.\n /\n count?: never;\n}\n\nexport type ChipProps = ChipStandardProps \| ChipAsChildProps;\n\n/\n Chip Component\n \n A chip/tag for labels, filters, or selected items.\n \n Standard form: an outer `<div>` frame (never interactive) with an\n * inner `<button>` label (when `onClick`) and a sibling X `<button>`\n * (when `onRemove`). This shape closes two axe violations the older\n * implementation hit — `aria-required-parent` (role=option without a\n * listbox) and `nested-interactive` (clickable outer + clickable X).\n \n `asChild` form: a single node provided by the consumer (e.g.\n * `<Link>`), with the chip's classes projected via Radix `Slot`. See\n * the `ChipAsChildProps` JSDoc for the a11y responsibility transfer\n * — the consumer's child carries `href`, focus behavior, and any\n * route-state ARIA (`aria-current`). Forbidden in this form:\n * `onClick`, `onRemove` (TS-level).\n \n @example\n * ```tsx\n * <Chip>Tag</Chip>\n * <Chip onRemove={() => console.log('removed')}>Removable</Chip>\n \n // Navigation chip — server-rendered, zero-JS-friendly.\n * <Chip asChild variant=\"filled\">\n * <Link href=\"/filtros/ativo\" prefetch aria-current=\"page\">Active</Link>\n * </Chip>\n * ```\n */\n// Chip variants using CVA\nconst chipVariants = cva(\n // Base classes\n cn(\n \"inline-flex\",\n \"items-center\",\n \"font-medium\",\n getRadiusClass(\"full\"),\n getSpacingClass(\"xs\", \"gap\"),\n ),\n {\n variants: {\n variant: {\n default: cn(\n \"bg-surface-muted\",\n \"text-fg-primary\",\n \"border\",\n \"border-line-default\",\n ),\n outlined: cn(\n \"bg-transparent\",\n \"text-fg-primary\",\n \"border\",\n \"border-line-default\",\n ),\n filled: cn(\n \"bg-surface-brand-strong\",\n \"text-fg-inverse\",\n \"border\",\n \"border-transparent\",\n ),\n },\n size: {\n sm: cn(\n getSpacingClass(\"xs\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"caption\"),\n ),\n md: cn(\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"bodySmall\"),\n ),\n lg: cn(\n getSpacingClass(\"md\", \"px\"),\n getSpacingClass(\"sm\", \"py\"),\n getTypographySize(\"body\"),\n ),\n },\n selected: {\n true: cn(\n \"bg-surface-brand-strong\",\n \"text-fg-inverse\",\n \"border\",\n \"border-line-brand\",\n ),\n false: \"\",\n },\n disabled: {\n true: \"opacity-50 cursor-not-allowed\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n selected: true,\n variant: \"default\",\n class: \"\", // Override variant when selected\n },\n {\n selected: true,\n variant: \"outlined\",\n class: \"\", // Override variant when selected\n },\n {\n selected: true,\n variant: \"filled\",\n class: \"\", // Override variant when selected\n },\n ],\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n selected: false,\n disabled: false,\n },\n },\n);\n\nconst Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(props, ref) {\n const {\n children,\n variant = \"default\",\n size = \"md\",\n selected = false,\n disabled = false,\n className = \"\",\n \"aria-label\": ariaLabel,\n tabIndex,\n asChild = false,\n } = props;\n\n // Generate accessible label\n const getAccessibleLabel = (): string \| undefined => {\n if (ariaLabel) return ariaLabel;\n if (typeof children === \"string\") return children;\n // For non-string children, try to extract text content\n if (\n typeof children === \"object\" &&\n children !== null &&\n \"props\" in children\n ) {\n const childProps = (children as { props?: { children?: unknown } }).props;\n if (childProps?.children && typeof childProps.children === \"string\") {\n return childProps.children;\n }\n }\n return undefined;\n };\n\n const accessibleLabel = getAccessibleLabel();\n\n // asChild path: collapse the entire chip structure (frame + label\n // button + X) into the single consumer-provided node. The frame's\n // visual classes are projected onto the child via Slot.\n //\n // A11Y RESPONSIBILITY TRANSFER. The child element owns:\n // - focus (its native focus ring, or its own focus utilities)\n // - activation (its own click handler / href for navigation)\n // - route-state semantics: `aria-current=\"page\"` on a selected\n // Link is the right tool. `aria-pressed` is intentionally NOT\n // emitted here — a link is not a toggle button.\n // - disabled semantics: `aria-disabled` is set when `disabled` is\n // true, but it does NOT block navigation. Consumers that must\n // truly disable navigation should also gate `href` upstream.\n //\n // TS forbids `onClick` / `onRemove` in this form (see ChipAsChildProps).\n if (asChild) {\n return (\n <Slot\n ref={ref}\n className={cn(\n chipVariants({ variant, size, selected, disabled }),\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={disabled \|\| undefined}\n tabIndex={tabIndex}\n >\n {children}\n </Slot>\n );\n }\n\n // Standard form below. Narrow `props` so the union picks up\n // onClick/onRemove/count (forbidden when asChild=true at TS level).\n const { onRemove, onClick, count } = props as ChipStandardProps;\n\n // Architecture:\n // The label is a real `<button>` whenever the chip is meant to be\n // activated (`onClick` provided). The X is a sibling `<button>` when\n // `onRemove` is provided. The outer `<div>` is NEVER interactive —\n // no `role`, no `tabIndex`, no event handlers. This unifies what\n // used to be three structural variants:\n // - `onClick` only → outer `role=\"button\"` [old]\n // - `onClick` + `onRemove` (no selected) → label-button [PR68]\n // - `selected` → outer `role=\"option\"` [old, axe-flagged]\n // into one consistent shape: label is the actor, outer is the chip\n // chrome (visual frame).\n //\n // Why this matters for a11y:\n // - `role=\"option\"` outside `role=\"listbox\"` violates `aria-required-\n // parent`. The old `selected` path failed axe in every standalone\n // chip. Moving the action to a native `<button>` with\n // `aria-pressed={selected}` (toggle button pattern) communicates\n // state correctly without requiring a listbox parent.\n // - The interactive outer + inner X button produced nested-interactive\n // whenever the consumer combined `selected` (or `onClick`) with\n // `onRemove`. Outer non-interactive + sibling buttons fixes both\n // cases at once.\n //\n // `selected` with no `onClick` is decorative only — the chip CANNOT\n // toggle, so it gets no `aria-pressed` (which would lie) and no role.\n // The visual `selected` styling (chipVariants.selected) applies, but\n // AT users read it as static text. Consumers who want the state\n // communicated must also pass `onClick` to make it a real toggle.\n const useLabelButton = onClick !== undefined;\n const interactive = useLabelButton && !disabled;\n\n // Keyboard handler for the label-button. Native `<button>` activates on\n // Enter/Space in real browsers, but JSDOM does NOT simulate Enter → click,\n // so this preserves the previous test-friendly behavior AND adds explicit\n // `preventDefault` (the original outer-as-button needed it; on a native\n // button this is mostly belt-and-suspenders but harmless).\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n onClick?.();\n }\n };\n\n // Count sub-badge (issue #222). Rendered as a sibling of the label so\n // the outer flex's `items-center` + `gap` handle alignment/spacing.\n // The pill inverts with the chip surface so it always contrasts:\n // - brand-backed chip (selected \|\| filled) → light pill\n // (bg-surface-base + text-fg-brand-emphasis)\n // - neutral chip (default/outlined) → brand pill\n // (bg-surface-brand-strong + text-fg-inverse, the filled-chip combo)\n // Both pairs are AA-proven elsewhere in the system.\n const hasCount = count !== undefined;\n const chipIsBrandFilled = selected \|\| variant === \"filled\";\n const countBadge = hasCount ? (\n <span\n // Interactive chips fold the count into the label-button's\n // aria-label below, so the visible badge is hidden from AT to\n // avoid a double announce. Non-interactive chips have no\n // overriding name — the badge stays readable as inline content.\n aria-hidden={useLabelButton \|\| undefined}\n className={cn(\n \"inline-flex\",\n \"items-center\",\n \"justify-center\",\n \"tabular-nums\",\n \"leading-none\",\n getRadiusClass(\"full\"),\n getSpacingClass(\"xs\", \"px\"),\n getSpacingClass(\"0.5\", \"py\"),\n getTypographySize(\"caption\"),\n getTypographyWeight(\"label\"),\n chipIsBrandFilled\n ? cn(\"bg-surface-base\", \"text-fg-brand-emphasis\")\n : cn(\"bg-surface-brand-strong\", \"text-fg-inverse\"),\n )}\n >\n {count}\n </span>\n ) : null;\n\n // When a count is present, fold it into the interactive chip's\n // accessible name (\"Casa, 12\") so AT users hear it. An explicit\n // consumer aria-label always wins (they own the phrasing).\n const labelWithCount =\n hasCount && accessibleLabel !== undefined\n ? `${accessibleLabel}, ${count}`\n : accessibleLabel;\n\n return (\n <div\n ref={ref}\n className={cn(\n chipVariants({ variant, size, selected, disabled }),\n onRemove && getSpacingClass(\"xs\", \"pr\"),\n className,\n )}\n aria-disabled={disabled}\n >\n {useLabelButton ? (\n <button\n type=\"button\"\n onClick={disabled ? undefined : onClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n aria-pressed={selected ? true : undefined}\n aria-label={ariaLabel \|\| labelWithCount}\n tabIndex={\n tabIndex !== undefined ? tabIndex : interactive ? 0 : undefined\n }\n className={cn(\n \"flex-1\",\n \"bg-transparent\",\n \"border-0\",\n getSpacingClass(\"none\", \"p\"),\n \"text-inherit\",\n \"text-left\",\n \"cursor-pointer\",\n \"focus:outline-none\",\n \"focus:ring-2\",\n \"focus:ring-line-focus\",\n \"focus:ring-offset-2\",\n getRadiusClass(\"full\"),\n )}\n >\n {children}\n </button>\n ) : (\n <span>{children}</span>\n )}\n {countBadge}\n {onRemove && !disabled && (\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove();\n }}\n className={cn(\n getSpacingClass(\"xs\", \"ml\"),\n \"hover:bg-tint-hover\",\n getRadiusClass(\"full\"),\n getSpacingClass(\"xs\", \"p\"),\n \"transition-colors\",\n \"focus:outline-none\",\n \"focus:ring-2\",\n \"focus:ring-line-focus\",\n \"focus:ring-offset-1\",\n )}\n aria-label={`Remove ${accessibleLabel \|\| \"chip\"}`}\n >\n <X className=\"h-3 w-3\" aria-hidden=\"true\" />\n </button>\n )}\n </div>\n );\n});\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n"],"names":["chipVariants","cva","cn","getRadiusClass","getSpacingClass","getTypographySize","Chip","forwardRef","props","ref","children","variant","size","selected","disabled","className","ariaLabel","tabIndex","asChild","accessibleLabel","childProps","jsx","Slot","onRemove","onClick","count","useLabelButton","interactive","handleKeyDown","e","hasCount","chipIsBrandFilled","countBadge","getTypographyWeight","labelWithCount","jsxs","X"],"mappings":"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"}

package/dist/granular/ui/primitives/ErrorMessage/ErrorMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorMessage.js","sources":["../../../../../src/ui/primitives/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { AlertCircle } from \"lucide-react\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {\n message: string;\n id?: string;\n}\n\n/*\n ErrorMessage Component\n \n A component for displaying validation error messages.\n * Follows Atomic Design principles as an Atom component.\n \n @example\n * ```tsx\n * <ErrorMessage message=\"This field is required\" id=\"email-error\" />\n * ```\n */\nexport default function ErrorMessage({\n message,\n id,\n className = \"\",\n ...props\n}: ErrorMessageProps) {\n const baseClasses = [\n getSpacingClass(\"xs\", \"mt\"),\n getTypographySize(\"bodySmall\"),\n \"text-fg-error\",\n \"flex\",\n \"items-center\",\n getSpacingClass(\"xs\", \"gap\"),\n ];\n\n const classes = cn(...baseClasses, className);\n\n return (\n <div role=\"alert\" id={id} className={classes} aria-live=\"polite\" {...props}>\n <AlertCircle className=\"h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n <span>{message}</span>\n </div>\n );\n}\n"],"names":["ErrorMessage","_a","_b","message","id","className","props","__objRest","baseClasses","getSpacingClass","getTypographySize","classes","cn","jsxs","__spreadProps","__spreadValues","jsx","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAsBA~~,SAAwBA,EAAaC,GAKf;AALe,MAAAC,IAAAD,GACnC;AAAA,aAAAE;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAHuBH,GAIhCI,IAAAC,EAJgCL,GAIhC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAc;AAAA,IAClBC,EAAgB,MAAM,IAAI;AAAA,IAC1BC,EAAkB,WAAW;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACAD,EAAgB,MAAM,KAAK;AAAA,EAAA,GAGvBE,IAAUC,EAAG,GAAGJ,GAAaH,CAAS;AAE5C,SACE,gBAAAQ,EAAC,OAAAC,EAAAC,EAAA,EAAI,MAAK,SAAQ,IAAAX,GAAQ,WAAWO,GAAS,aAAU,YAAaL,IAApE,EACC,UAAA;AAAA,IAAA,gBAAAU,EAACC,GAAA,EAAY,WAAU,oBAAmB,eAAY,QAAO;AAAA,IAC7D,gBAAAD,EAAC,UAAM,UAAAb,EAAA,CAAQ;AAAA,EAAA,IACjB;AAEJ;"}
1	+ {"version":3,"file":"ErrorMessage.js","sources":["../../../../../src/ui/primitives/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { AlertCircle } from \"lucide-react\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {\n message: string;\n id?: string;\n}\n\n/*\n ErrorMessage Component\n \n A component for displaying validation error messages.\n \n @example\n * ```tsx\n * <ErrorMessage message=\"This field is required\" id=\"email-error\" />\n * ```\n */\nexport default function ErrorMessage({\n message,\n id,\n className = \"\",\n ...props\n}: ErrorMessageProps) {\n const baseClasses = [\n getSpacingClass(\"xs\", \"mt\"),\n getTypographySize(\"bodySmall\"),\n \"text-fg-error\",\n \"flex\",\n \"items-center\",\n getSpacingClass(\"xs\", \"gap\"),\n ];\n\n const classes = cn(...baseClasses, className);\n\n return (\n <div role=\"alert\" id={id} className={classes} aria-live=\"polite\" {...props}>\n <AlertCircle className=\"h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n <span>{message}</span>\n </div>\n );\n}\n"],"names":["ErrorMessage","_a","_b","message","id","className","props","__objRest","baseClasses","getSpacingClass","getTypographySize","classes","cn","jsxs","__spreadProps","__spreadValues","jsx","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAwBA,EAAaC,GAKf;AALe,MAAAC,IAAAD,GACnC;AAAA,aAAAE;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAHuBH,GAIhCI,IAAAC,EAJgCL,GAIhC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAc;AAAA,IAClBC,EAAgB,MAAM,IAAI;AAAA,IAC1BC,EAAkB,WAAW;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACAD,EAAgB,MAAM,KAAK;AAAA,EAAA,GAGvBE,IAAUC,EAAG,GAAGJ,GAAaH,CAAS;AAE5C,SACE,gBAAAQ,EAAC,OAAAC,EAAAC,EAAA,EAAI,MAAK,SAAQ,IAAAX,GAAQ,WAAWO,GAAS,aAAU,YAAaL,IAApE,EACC,UAAA;AAAA,IAAA,gBAAAU,EAACC,GAAA,EAAY,WAAU,oBAAmB,eAAY,QAAO;AAAA,IAC7D,gBAAAD,EAAC,UAAM,UAAAb,EAAA,CAAQ;AAAA,EAAA,IACjB;AAEJ;"}