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

@fabio.caffarello/react-design-system 3.13.0 → 4.1.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 (154) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../../../src/ui/primitives/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface RadioProps 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 + Checkbox + Switch + Textarea convention;\n * the three feedback flags (`error`, `success`, `helperText`)\n * cover every form primitive in the DS. Error takes precedence\n * when both `error` and `success` are set.\n /\n success?: boolean;\n helperText?: string;\n}\n\n/\n Radio Component\n \n A styled radio 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 * <Radio\n * id=\"option1\"\n * name=\"options\"\n * label=\"Option 1\"\n * value=\"1\"\n * checked={selected === \"1\"}\n * onChange={handleChange}\n * />\n * ```\n */\nconst Radio = memo(\n forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n id,\n label,\n error = false,\n success = false,\n helperText,\n className = \"\",\n disabled = 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 radioId = id \|\| `radio-${reactId}`;\n\n const errorId = useMemo(\n () => (error ? `${radioId}-error` : undefined),\n [error, radioId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${radioId}-helper` : undefined),\n [helperText, radioId],\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 radioClasses = useMemo(\n () =>\n cn(\n \"h-4\",\n \"w-4\",\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 return (\n <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"my\"))}>\n <div className=\"flex items-center\">\n <input\n type=\"radio\"\n id={radioId}\n ref={ref}\n className={radioClasses}\n disabled={disabled}\n aria-invalid={error}\n aria-describedby={errorId \|\| helperId \|\| undefined}\n aria-label={!label ? \"Radio button\" : undefined}\n {...props}\n />\n {label && (\n <label htmlFor={radioId} 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\nRadio.displayName = \"Radio\";\n\nexport default Radio;\n"],"names":["Radio","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","className","disabled","props","__objRest","reactId","useId","radioId","errorId","useMemo","helperId","primaryFocusRing","errorFocusRing","focusRingColor","radioClasses","cn","labelClasses","getTypographyClasses","getSpacingClass","jsxs","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;~~AA6CA~~,MAAMA,IAAQC;AAAA,EACZC,EAAyC,SACvCC,GAUAC,GACA;AAXA,QAAAC,IAAAF,GACE;AAAA,UAAAG;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,SAAAC,IAAU;AAAA,MACV,YAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAW;AAAA,QAPbP,GAQKQ,IAAAC,EARLT,GAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAQF,UAAMU,IAAUC,EAAA,GACVC,IAAUX,KAAM,SAASS,CAAO,IAEhCG,IAAUC;AAAA,MACd,MAAOX,IAAQ,GAAGS,CAAO,WAAW;AAAA,MACpC,CAACT,GAAOS,CAAO;AAAA,IAAA,GAGXG,IAAWD;AAAA,MACf,MAAOT,IAAa,GAAGO,CAAO,YAAY;AAAA,MAC1C,CAACP,GAAYO,CAAO;AAAA,IAAA,GAIhBI,IAAmBF,EAAQ,MAAM,2BAA2B,CAAA,CAAE,GAE9DG,IAAiBH,EAAQ,MAAM,sBAAsB,CAAA,CAAE,GAEvDI,IAAiBJ;AAAA,MACrB,MACEX,IACIc,EAAe,QAAQ,iBAAiB,aAAa,IACrDD,EAAiB,QAAQ,iBAAiB,aAAa;AAAA,MAC7D,CAACb,GAAOc,GAAgBD,CAAgB;AAAA,IAAA,GAKpCG,IAAeL;AAAA,MACnB,MACEM;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAf,KAAS;AAAA,QACT,CAACA,KAASC,KAAW;AAAA,QACrBE;AAAA,MAAA;AAAA,MAEJ,CAACY,GAAgBf,GAAOC,GAASE,CAAS;AAAA,IAAA,GAGtCe,IAAeP;AAAA,MACnB,MACEM;AAAA,QACEE,EAAqB,OAAO;AAAA,QAC5BC,EAAgB,MAAM,IAAI;AAAA,QAC1BhB,IAAW,kCAAkC;AAAA,MAAA;AAAA,MAEjD,CAACA,CAAQ;AAAA,IAAA;AAGX,WACE,gBAAAiB,EAAC,OAAA,EAAI,WAAWJ,EAAG,QAAQ,YAAYG,EAAgB,MAAM,IAAI,CAAC,GAChE,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAAC,EAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAId;AAAA,YACJ,KAAAb;AAAA,YACA,WAAWoB;AAAA,YACX,UAAAZ;AAAA,YACA,gBAAcJ;AAAA,YACd,oBAAkBU,KAAWE,KAAY;AAAA,YACzC,cAAab,IAAyB,SAAjB;AAAA,aACjBM;AAAA,QAAA;AAAA,QAELN,KACC,gBAAAuB,EAAC,SAAA,EAAM,SAASb,GAAS,WAAWS,GACjC,UAAAnB,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,OACEC,KAASC,KAAWC,MACpB,gBAAAoB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIZ,KAAWE;AAAA,UACf,WAAWK;AAAA,YACTG,EAAgB,MAAM,IAAI;AAAA,YAC1BD,EAAqB,SAAS;AAAA,YAC9BnB,IACI,kBACAC,IACE,oBACA;AAAA,UAAA;AAAA,UAER,MAAMD,KAASC,IAAU,UAAU;AAAA,UAElC,UAAAD,IAAQE,KAAc,4BAA4BA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrD,GAEJ;AAAA,EAEJ,CAAC;AACH;AAEAV,EAAM,cAAc;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../../../src/ui/primitives/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface RadioProps 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 + Checkbox + Switch + Textarea convention;\n * the three feedback flags (`error`, `success`, `helperText`)\n * cover every form primitive in the DS. Error takes precedence\n * when both `error` and `success` are set.\n /\n success?: boolean;\n helperText?: string;\n}\n\n/\n Radio Component\n \n A styled radio input component.\n * Uses Composite Pattern when combined with Label and ErrorMessage.\n \n @example\n * ```tsx\n * <Radio\n * id=\"option1\"\n * name=\"options\"\n * label=\"Option 1\"\n * value=\"1\"\n * checked={selected === \"1\"}\n * onChange={handleChange}\n * />\n * ```\n */\nconst Radio = memo(\n forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n id,\n label,\n error = false,\n success = false,\n helperText,\n className = \"\",\n disabled = 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 radioId = id \|\| `radio-${reactId}`;\n\n const errorId = useMemo(\n () => (error ? `${radioId}-error` : undefined),\n [error, radioId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${radioId}-helper` : undefined),\n [helperText, radioId],\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 radioClasses = useMemo(\n () =>\n cn(\n \"h-4\",\n \"w-4\",\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 return (\n <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"my\"))}>\n <div className=\"flex items-center\">\n <input\n type=\"radio\"\n id={radioId}\n ref={ref}\n className={radioClasses}\n disabled={disabled}\n aria-invalid={error}\n aria-describedby={errorId \|\| helperId \|\| undefined}\n aria-label={!label ? \"Radio button\" : undefined}\n {...props}\n />\n {label && (\n <label htmlFor={radioId} 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\nRadio.displayName = \"Radio\";\n\nexport default Radio;\n"],"names":["Radio","memo","forwardRef","_a","ref","_b","id","label","error","success","helperText","className","disabled","props","__objRest","reactId","useId","radioId","errorId","useMemo","helperId","primaryFocusRing","errorFocusRing","focusRingColor","radioClasses","cn","labelClasses","getTypographyClasses","getSpacingClass","jsxs","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,IAAQC;AAAA,EACZC,EAAyC,SACvCC,GAUAC,GACA;AAXA,QAAAC,IAAAF,GACE;AAAA,UAAAG;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,SAAAC,IAAU;AAAA,MACV,YAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAW;AAAA,QAPbP,GAQKQ,IAAAC,EARLT,GAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAQF,UAAMU,IAAUC,EAAA,GACVC,IAAUX,KAAM,SAASS,CAAO,IAEhCG,IAAUC;AAAA,MACd,MAAOX,IAAQ,GAAGS,CAAO,WAAW;AAAA,MACpC,CAACT,GAAOS,CAAO;AAAA,IAAA,GAGXG,IAAWD;AAAA,MACf,MAAOT,IAAa,GAAGO,CAAO,YAAY;AAAA,MAC1C,CAACP,GAAYO,CAAO;AAAA,IAAA,GAIhBI,IAAmBF,EAAQ,MAAM,2BAA2B,CAAA,CAAE,GAE9DG,IAAiBH,EAAQ,MAAM,sBAAsB,CAAA,CAAE,GAEvDI,IAAiBJ;AAAA,MACrB,MACEX,IACIc,EAAe,QAAQ,iBAAiB,aAAa,IACrDD,EAAiB,QAAQ,iBAAiB,aAAa;AAAA,MAC7D,CAACb,GAAOc,GAAgBD,CAAgB;AAAA,IAAA,GAKpCG,IAAeL;AAAA,MACnB,MACEM;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAf,KAAS;AAAA,QACT,CAACA,KAASC,KAAW;AAAA,QACrBE;AAAA,MAAA;AAAA,MAEJ,CAACY,GAAgBf,GAAOC,GAASE,CAAS;AAAA,IAAA,GAGtCe,IAAeP;AAAA,MACnB,MACEM;AAAA,QACEE,EAAqB,OAAO;AAAA,QAC5BC,EAAgB,MAAM,IAAI;AAAA,QAC1BhB,IAAW,kCAAkC;AAAA,MAAA;AAAA,MAEjD,CAACA,CAAQ;AAAA,IAAA;AAGX,WACE,gBAAAiB,EAAC,OAAA,EAAI,WAAWJ,EAAG,QAAQ,YAAYG,EAAgB,MAAM,IAAI,CAAC,GAChE,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAAC,EAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAId;AAAA,YACJ,KAAAb;AAAA,YACA,WAAWoB;AAAA,YACX,UAAAZ;AAAA,YACA,gBAAcJ;AAAA,YACd,oBAAkBU,KAAWE,KAAY;AAAA,YACzC,cAAab,IAAyB,SAAjB;AAAA,aACjBM;AAAA,QAAA;AAAA,QAELN,KACC,gBAAAuB,EAAC,SAAA,EAAM,SAASb,GAAS,WAAWS,GACjC,UAAAnB,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,OACEC,KAASC,KAAWC,MACpB,gBAAAoB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIZ,KAAWE;AAAA,UACf,WAAWK;AAAA,YACTG,EAAgB,MAAM,IAAI;AAAA,YAC1BD,EAAqB,SAAS;AAAA,YAC9BnB,IACI,kBACAC,IACE,oBACA;AAAA,UAAA;AAAA,UAER,MAAMD,KAASC,IAAU,UAAU;AAAA,UAElC,UAAAD,IAAQE,KAAc,4BAA4BA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrD,GAEJ;AAAA,EAEJ,CAAC;AACH;AAEAV,EAAM,cAAc;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../../../src/ui/primitives/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo, useCallback } from \"react\";\nimport type { SelectHTMLAttributes, ReactNode } from \"react\";\nimport {\n getTypographyClasses,\n getTypographySize,\n} from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn, cva } from \"../../utils\";\n\n/*\n Helper Text Component\n * Memoized component for helper/error text\n /\nconst HelperText = memo(function HelperText({\n error,\n success,\n helperText,\n errorId,\n helperId,\n}: {\n error: boolean;\n success: boolean;\n helperText?: string;\n errorId?: string;\n helperId?: string;\n}) {\n const helperClasses = useMemo(\n () =>\n cn(\n getSpacingClass(\"xs\", \"mt\"),\n getTypographyClasses(\"caption\"),\n error && \"text-fg-error\",\n success && \"text-fg-success\",\n !error && !success && \"text-fg-secondary\",\n ),\n [error, success],\n );\n\n const text = useMemo(\n () => helperText \|\| (error ? \"Error\" : success ? \"Success\" : \"\"),\n [helperText, error, success],\n );\n\n return (\n <div\n id={errorId \|\| helperId}\n className={helperClasses}\n role={error \|\| success ? \"alert\" : undefined}\n >\n {text}\n </div>\n );\n});\n\nexport type SelectSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface SelectOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n label: string;\n options: SelectOption[];\n}\n\nexport interface SelectProps extends Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n \"children\" \| \"size\"\n> {\n options: SelectOption[];\n optionGroups?: SelectOptionGroup[];\n placeholder?: string;\n label?: ReactNode;\n error?: boolean;\n success?: boolean;\n helperText?: string;\n size?: SelectSize;\n}\n\n/\n Select Component\n \n A styled select dropdown component for forms.\n * Follows Atomic Design principles as an Atom component.\n * Supports both flat options and option groups.\n \n @example\n * ```tsx\n * <Select\n * label=\"Choose option\"\n * options={[\n * { value: \"1\", label: \"Option 1\" },\n * { value: \"2\", label: \"Option 2\" }\n * ]}\n * placeholder=\"Select an option\"\n * />\n * ```\n */\nconst Select = memo(\n forwardRef<HTMLSelectElement, SelectProps>(function Select(\n {\n options = [],\n optionGroups,\n placeholder,\n label,\n error = false,\n success = false,\n helperText,\n size = \"md\",\n className = \"\",\n disabled = false,\n id,\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 selectId = id \|\| `select-${reactId}`;\n\n const errorId = useMemo(\n () => (error ? `${selectId}-error` : undefined),\n [error, selectId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${selectId}-helper` : undefined),\n [helperText, selectId],\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 successFocusRing = useMemo(() => \"focus:border-success\", []);\n\n // Memoize focus ring color function\n const getFocusRingColor = useCallback(\n (stateType?: \"error\" \| \"success\"): string => {\n if (stateType === \"error\") {\n return errorFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n }\n if (stateType === \"success\") {\n return successFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n }\n return primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n },\n [errorFocusRing, successFocusRing, primaryFocusRing],\n );\n\n // Select variants using CVA — memoize so the function reference is\n // stable across renders. selectClasses below depends on this; without\n // memoization a fresh cva() each render would invalidate that memo\n // on every render (defeating its purpose).\n const selectVariants = useMemo(\n () =>\n cva(\n // Base classes\n cn(\n \"block\",\n \"w-full\",\n getRadiusClass(\"md\"),\n \"border\",\n \"bg-surface-base\",\n \"transition-colors\",\n \"focus:outline-none\",\n \"focus:ring-2\",\n \"focus:ring-offset-2\",\n \"disabled:opacity-50\",\n \"disabled:cursor-not-allowed\",\n ),\n {\n variants: {\n size: {\n sm: cn(\n \"h-8\",\n getTypographySize(\"bodySmall\"),\n getSpacingClass(\"md\", \"px\"),\n ),\n md: cn(\n \"h-10\",\n getTypographySize(\"body\"),\n getSpacingClass(\"base\", \"px\"),\n ),\n lg: cn(\n \"h-12\",\n getTypographySize(\"bodyLarge\"),\n getSpacingClass(\"lg\", \"px\"),\n ),\n },\n state: {\n default: cn(\"border-line-default\", getFocusRingColor()),\n error: cn(\"border-error\", getFocusRingColor(\"error\")),\n success: cn(\"border-success\", getFocusRingColor(\"success\")),\n },\n },\n defaultVariants: {\n size: \"md\",\n state: \"default\",\n },\n },\n ),\n [getFocusRingColor],\n );\n\n // Memoize state\n const selectState = useMemo(\n () => (error ? \"error\" : success ? \"success\" : \"default\"),\n [error, success],\n );\n\n // Memoize classes\n const selectClasses = useMemo(\n () => cn(selectVariants({ size, state: selectState }), className),\n [selectVariants, size, selectState, className],\n );\n\n const labelClasses = useMemo(\n () =>\n cn(\n \"block\",\n getTypographyClasses(\"label\"),\n getSpacingClass(\"xs\", \"mb\"),\n disabled && \"opacity-50\",\n ),\n [disabled],\n );\n\n return (\n <div className=\"w-full\">\n {label && (\n <label htmlFor={selectId} className={labelClasses}>\n {label}\n </label>\n )}\n <select\n id={selectId}\n ref={ref}\n className={selectClasses}\n disabled={disabled}\n aria-invalid={error}\n aria-required={props.required}\n aria-describedby={errorId \|\| helperId}\n {...props}\n >\n {placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {optionGroups && optionGroups.length > 0\n ? optionGroups.map((group, groupIndex) => (\n <optgroup key={groupIndex} label={group.label}>\n {(group.options \|\| []).map((option) => (\n <option\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))}\n </optgroup>\n ))\n : (options \|\| []).map((option) => (\n <option\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))}\n </select>\n {(error \|\| success \|\| helperText) && (\n <HelperText\n error={error}\n success={success}\n helperText={helperText}\n errorId={errorId}\n helperId={helperId}\n />\n )}\n </div>\n );\n }),\n);\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n"],"names":["HelperText","memo","error","success","helperText","errorId","helperId","helperClasses","useMemo","cn","getSpacingClass","getTypographyClasses","text","jsx","Select","forwardRef","_a","ref","_b","options","optionGroups","placeholder","label","size","className","disabled","id","props","__objRest","reactId","useId","selectId","primaryFocusRing","errorFocusRing","successFocusRing","getFocusRingColor","useCallback","stateType","selectVariants","cva","getRadiusClass","getTypographySize","selectState","selectClasses","labelClasses","jsxs","__spreadProps","__spreadValues","group","groupIndex","option"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,IAAaC,EAAK,SAAoB;AAAA,EAC1C,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,GAMG;AACD,QAAMC,IAAgBC;AAAA,IACpB,MACEC;AAAA,MACEC,EAAgB,MAAM,IAAI;AAAA,MAC1BC,EAAqB,SAAS;AAAA,MAC9BT,KAAS;AAAA,MACTC,KAAW;AAAA,MACX,CAACD,KAAS,CAACC,KAAW;AAAA,IAAA;AAAA,IAE1B,CAACD,GAAOC,CAAO;AAAA,EAAA,GAGXS,IAAOJ;AAAA,IACX,MAAMJ,MAAeF,IAAQ,UAAUC,IAAU,YAAY;AAAA,IAC7D,CAACC,GAAYF,GAAOC,CAAO;AAAA,EAAA;AAG7B,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAIR,KAAWC;AAAA,MACf,WAAWC;AAAA,MACX,MAAML,KAASC,IAAU,UAAU;AAAA,MAElC,UAAAS;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAgDKE,KAASb;AAAA,EACbc,EAA2C,SACzCC,IAcAC,GACA;AAfA,QAAAC,IAAAF,IACE;AAAA,eAAAG,IAAU,CAAA;AAAA,MACV,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAApB,IAAQ;AAAA,MACR,SAAAC,IAAU;AAAA,MACV,YAAAC;AAAA,MACA,MAAAmB,IAAO;AAAA,MACP,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAW;AAAA,MACX,IAAAC;AAAA,QAXFR,GAYKS,IAAAC,EAZLV,GAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAQF,UAAMW,IAAUC,EAAA,GACVC,IAAWL,KAAM,UAAUG,CAAO,IAElCxB,IAAUG;AAAA,MACd,MAAON,IAAQ,GAAG6B,CAAQ,WAAW;AAAA,MACrC,CAAC7B,GAAO6B,CAAQ;AAAA,IAAA,GAGZzB,IAAWE;AAAA,MACf,MAAOJ,IAAa,GAAG2B,CAAQ,YAAY;AAAA,MAC3C,CAAC3B,GAAY2B,CAAQ;AAAA,IAAA,GAIjBC,IAAmBxB,EAAQ,MAAM,2BAA2B,CAAA,CAAE,GAE9DyB,IAAiBzB,EAAQ,MAAM,sBAAsB,CAAA,CAAE,GAEvD0B,IAAmB1B,EAAQ,MAAM,wBAAwB,CAAA,CAAE,GAG3D2B,IAAoBC;AAAA,MACxB,CAACC,MACKA,MAAc,UACTJ,EAAe,QAAQ,iBAAiB,aAAa,IAE1DI,MAAc,YACTH,EAAiB,QAAQ,iBAAiB,aAAa,IAEzDF,EAAiB,QAAQ,iBAAiB,aAAa;AAAA,MAEhE,CAACC,GAAgBC,GAAkBF,CAAgB;AAAA,IAAA,GAO/CM,IAAiB9B;AAAA,MACrB,MACE+B;AAAA;AAAA,QAEE9B;AAAA,UACE;AAAA,UACA;AAAA,UACA+B,EAAe,IAAI;AAAA,UACnB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF;AAAA,UACE,UAAU;AAAA,YACR,MAAM;AAAA,cACJ,IAAI/B;AAAA,gBACF;AAAA,gBACAgC,EAAkB,WAAW;AAAA,gBAC7B/B,EAAgB,MAAM,IAAI;AAAA,cAAA;AAAA,cAE5B,IAAID;AAAA,gBACF;AAAA,gBACAgC,EAAkB,MAAM;AAAA,gBACxB/B,EAAgB,QAAQ,IAAI;AAAA,cAAA;AAAA,cAE9B,IAAID;AAAA,gBACF;AAAA,gBACAgC,EAAkB,WAAW;AAAA,gBAC7B/B,EAAgB,MAAM,IAAI;AAAA,cAAA;AAAA,YAC5B;AAAA,YAEF,OAAO;AAAA,cACL,SAASD,EAAG,uBAAuB0B,GAAmB;AAAA,cACtD,OAAO1B,EAAG,gBAAgB0B,EAAkB,OAAO,CAAC;AAAA,cACpD,SAAS1B,EAAG,kBAAkB0B,EAAkB,SAAS,CAAC;AAAA,YAAA;AAAA,UAC5D;AAAA,UAEF,iBAAiB;AAAA,YACf,MAAM;AAAA,YACN,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,MAEJ,CAACA,CAAiB;AAAA,IAAA,GAIdO,IAAclC;AAAA,MAClB,MAAON,IAAQ,UAAUC,IAAU,YAAY;AAAA,MAC/C,CAACD,GAAOC,CAAO;AAAA,IAAA,GAIXwC,IAAgBnC;AAAA,MACpB,MAAMC,EAAG6B,EAAe,EAAE,MAAAf,GAAM,OAAOmB,EAAA,CAAa,GAAGlB,CAAS;AAAA,MAChE,CAACc,GAAgBf,GAAMmB,GAAalB,CAAS;AAAA,IAAA,GAGzCoB,IAAepC;AAAA,MACnB,MACEC;AAAA,QACE;AAAA,QACAE,EAAqB,OAAO;AAAA,QAC5BD,EAAgB,MAAM,IAAI;AAAA,QAC1Be,KAAY;AAAA,MAAA;AAAA,MAEhB,CAACA,CAAQ;AAAA,IAAA;AAGX,WACE,gBAAAoB,EAAC,OAAA,EAAI,WAAU,UACZ,UAAA;AAAA,MAAAvB,uBACE,SAAA,EAAM,SAASS,GAAU,WAAWa,GAClC,UAAAtB,GACH;AAAA,MAEF,gBAAAuB;AAAA,QAAC;AAAA,QAAAC,EAAAC,EAAA;AAAA,UACC,IAAIhB;AAAA,UACJ,KAAAd;AAAA,UACA,WAAW0B;AAAA,UACX,UAAAlB;AAAA,UACA,gBAAcvB;AAAA,UACd,iBAAeyB,EAAM;AAAA,UACrB,oBAAkBtB,KAAWC;AAAA,WACzBqB,IARL;AAAA,UAUE,UAAA;AAAA,YAAAN,uBACE,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UAAAA,GACH;AAAA,YAEDD,KAAgBA,EAAa,SAAS,IACnCA,EAAa,IAAI,CAAC4B,GAAOC,MACvB,gBAAApC,EAAC,cAA0B,OAAOmC,EAAM,OACpC,WAAAA,EAAM,WAAW,IAAI,IAAI,CAACE,MAC1B,gBAAArC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAOqC,EAAO;AAAA,gBACd,UAAUA,EAAO;AAAA,gBAEhB,UAAAA,EAAO;AAAA,cAAA;AAAA,cAJHA,EAAO;AAAA,YAAA,CAMf,EAAA,GATYD,CAUf,CACD,KACA9B,KAAW,IAAI,IAAI,CAAC+B,MACnB,gBAAArC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAOqC,EAAO;AAAA,gBACd,UAAUA,EAAO;AAAA,gBAEhB,UAAAA,EAAO;AAAA,cAAA;AAAA,cAJHA,EAAO;AAAA,YAAA,CAMf;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,OAELhD,KAASC,KAAWC,MACpB,gBAAAS;AAAA,QAACb;AAAA,QAAA;AAAA,UACC,OAAAE;AAAA,UACA,SAAAC;AAAA,UACA,YAAAC;AAAA,UACA,SAAAC;AAAA,UACA,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GAEJ;AAAA,EAEJ,CAAC;AACH;AAEAQ,GAAO,cAAc;"}
1	+ {"version":3,"file":"Select.js","sources":["../../../../../src/ui/primitives/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo, useCallback } from \"react\";\nimport type { SelectHTMLAttributes, ReactNode } from \"react\";\nimport {\n getTypographyClasses,\n getTypographySize,\n} from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn, cva } from \"../../utils\";\n\n/*\n Helper Text Component\n * Memoized component for helper/error text\n /\nconst HelperText = memo(function HelperText({\n error,\n success,\n helperText,\n errorId,\n helperId,\n}: {\n error: boolean;\n success: boolean;\n helperText?: string;\n errorId?: string;\n helperId?: string;\n}) {\n const helperClasses = useMemo(\n () =>\n cn(\n getSpacingClass(\"xs\", \"mt\"),\n getTypographyClasses(\"caption\"),\n error && \"text-fg-error\",\n success && \"text-fg-success\",\n !error && !success && \"text-fg-secondary\",\n ),\n [error, success],\n );\n\n const text = useMemo(\n () => helperText \|\| (error ? \"Error\" : success ? \"Success\" : \"\"),\n [helperText, error, success],\n );\n\n return (\n <div\n id={errorId \|\| helperId}\n className={helperClasses}\n role={error \|\| success ? \"alert\" : undefined}\n >\n {text}\n </div>\n );\n});\n\nexport type SelectSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface SelectOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n label: string;\n options: SelectOption[];\n}\n\nexport interface SelectProps extends Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n \"children\" \| \"size\"\n> {\n options: SelectOption[];\n optionGroups?: SelectOptionGroup[];\n placeholder?: string;\n label?: ReactNode;\n error?: boolean;\n success?: boolean;\n helperText?: string;\n size?: SelectSize;\n}\n\n/\n Select Component\n \n A styled select dropdown component for forms.\n * Supports both flat options and option groups.\n \n @example\n * ```tsx\n * <Select\n * label=\"Choose option\"\n * options={[\n * { value: \"1\", label: \"Option 1\" },\n * { value: \"2\", label: \"Option 2\" }\n * ]}\n * placeholder=\"Select an option\"\n * />\n * ```\n */\nconst Select = memo(\n forwardRef<HTMLSelectElement, SelectProps>(function Select(\n {\n options = [],\n optionGroups,\n placeholder,\n label,\n error = false,\n success = false,\n helperText,\n size = \"md\",\n className = \"\",\n disabled = false,\n id,\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 selectId = id \|\| `select-${reactId}`;\n\n const errorId = useMemo(\n () => (error ? `${selectId}-error` : undefined),\n [error, selectId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${selectId}-helper` : undefined),\n [helperText, selectId],\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 successFocusRing = useMemo(() => \"focus:border-success\", []);\n\n // Memoize focus ring color function\n const getFocusRingColor = useCallback(\n (stateType?: \"error\" \| \"success\"): string => {\n if (stateType === \"error\") {\n return errorFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n }\n if (stateType === \"success\") {\n return successFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n }\n return primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n },\n [errorFocusRing, successFocusRing, primaryFocusRing],\n );\n\n // Select variants using CVA — memoize so the function reference is\n // stable across renders. selectClasses below depends on this; without\n // memoization a fresh cva() each render would invalidate that memo\n // on every render (defeating its purpose).\n const selectVariants = useMemo(\n () =>\n cva(\n // Base classes\n cn(\n \"block\",\n \"w-full\",\n getRadiusClass(\"md\"),\n \"border\",\n \"bg-surface-base\",\n \"transition-colors\",\n \"focus:outline-none\",\n \"focus:ring-2\",\n \"focus:ring-offset-2\",\n \"disabled:opacity-50\",\n \"disabled:cursor-not-allowed\",\n ),\n {\n variants: {\n size: {\n sm: cn(\n \"h-8\",\n getTypographySize(\"bodySmall\"),\n getSpacingClass(\"md\", \"px\"),\n ),\n md: cn(\n \"h-10\",\n getTypographySize(\"body\"),\n getSpacingClass(\"base\", \"px\"),\n ),\n lg: cn(\n \"h-12\",\n getTypographySize(\"bodyLarge\"),\n getSpacingClass(\"lg\", \"px\"),\n ),\n },\n state: {\n default: cn(\"border-line-default\", getFocusRingColor()),\n error: cn(\"border-error\", getFocusRingColor(\"error\")),\n success: cn(\"border-success\", getFocusRingColor(\"success\")),\n },\n },\n defaultVariants: {\n size: \"md\",\n state: \"default\",\n },\n },\n ),\n [getFocusRingColor],\n );\n\n // Memoize state\n const selectState = useMemo(\n () => (error ? \"error\" : success ? \"success\" : \"default\"),\n [error, success],\n );\n\n // Memoize classes\n const selectClasses = useMemo(\n () => cn(selectVariants({ size, state: selectState }), className),\n [selectVariants, size, selectState, className],\n );\n\n const labelClasses = useMemo(\n () =>\n cn(\n \"block\",\n getTypographyClasses(\"label\"),\n getSpacingClass(\"xs\", \"mb\"),\n disabled && \"opacity-50\",\n ),\n [disabled],\n );\n\n return (\n <div className=\"w-full\">\n {label && (\n <label htmlFor={selectId} className={labelClasses}>\n {label}\n </label>\n )}\n <select\n id={selectId}\n ref={ref}\n className={selectClasses}\n disabled={disabled}\n aria-invalid={error}\n aria-required={props.required}\n aria-describedby={errorId \|\| helperId}\n {...props}\n >\n {placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {optionGroups && optionGroups.length > 0\n ? optionGroups.map((group, groupIndex) => (\n <optgroup key={groupIndex} label={group.label}>\n {(group.options \|\| []).map((option) => (\n <option\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))}\n </optgroup>\n ))\n : (options \|\| []).map((option) => (\n <option\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))}\n </select>\n {(error \|\| success \|\| helperText) && (\n <HelperText\n error={error}\n success={success}\n helperText={helperText}\n errorId={errorId}\n helperId={helperId}\n />\n )}\n </div>\n );\n }),\n);\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n"],"names":["HelperText","memo","error","success","helperText","errorId","helperId","helperClasses","useMemo","cn","getSpacingClass","getTypographyClasses","text","jsx","Select","forwardRef","_a","ref","_b","options","optionGroups","placeholder","label","size","className","disabled","id","props","__objRest","reactId","useId","selectId","primaryFocusRing","errorFocusRing","successFocusRing","getFocusRingColor","useCallback","stateType","selectVariants","cva","getRadiusClass","getTypographySize","selectState","selectClasses","labelClasses","jsxs","__spreadProps","__spreadValues","group","groupIndex","option"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Separator.js","sources":["../../../../../src/ui/primitives/Separator/Separator.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\n\nexport type SeparatorOrientation = \"horizontal\" \| \"vertical\";\nexport type SeparatorVariant = \"solid\" \| \"dashed\" \| \"dotted\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n orientation?: SeparatorOrientation;\n variant?: SeparatorVariant;\n}\n\n/*\n Separator Component\n \n A visual separator component for dividing content.\n * Follows Atomic Design principles as an Atom component.\n * Optimized with React.memo to prevent unnecessary re-renders.\n \n @example\n * ```tsx\n * <Separator />\n \n <Separator orientation=\"vertical\" variant=\"dashed\" />\n * ```\n */\nconst separatorOrientationClasses = {\n horizontal: \"w-full border-t\",\n vertical: \"h-full border-l self-stretch\",\n} as const;\n\nconst separatorVariantClasses = {\n solid: \"border-solid\",\n dashed: \"border-dashed\",\n dotted: \"border-dotted\",\n} as const;\n\nconst Separator = memo(function Separator({\n orientation = \"horizontal\",\n variant = \"solid\",\n className = \"\",\n ...props\n}: SeparatorProps) {\n const classes = cn(\n \"border-0\",\n \"border-line-default\",\n separatorOrientationClasses[orientation],\n separatorVariantClasses[variant],\n className,\n );\n\n if (orientation === \"vertical\") {\n return (\n <div\n className={classes}\n role=\"separator\"\n aria-orientation=\"vertical\"\n {...(props as HTMLAttributes<HTMLDivElement>)}\n />\n );\n }\n\n return (\n <hr\n className={classes}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n {...props}\n />\n );\n});\n\nSeparator.displayName = \"Separator\";\n\nexport default Separator;\n"],"names":["separatorOrientationClasses","separatorVariantClasses","Separator","memo","_a","_b","orientation","variant","className","props","__objRest","classes","cn","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;~~AA0BA~~,MAAMA,IAA8B;AAAA,EAClC,YAAY;AAAA,EACZ,UAAU;AACZ,GAEMC,IAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV,GAEMC,IAAYC,EAAK,SAAmBC,GAKvB;AALuB,MAAAC,IAAAD,GACxC;AAAA,iBAAAE,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MAH4BH,GAIrCI,IAAAC,EAJqCL,GAIrC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAUC;AAAA,IACd;AAAA,IACA;AAAA,IACAZ,EAA4BM,CAAW;AAAA,IACvCL,EAAwBM,CAAO;AAAA,IAC/BC;AAAA,EAAA;AAGF,SAAIF,MAAgB,aAEhB,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWH;AAAA,MACX,MAAK;AAAA,MACL,oBAAiB;AAAA,OACZF;AAAA,EAAA,IAMT,gBAAAI;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWH;AAAA,MACX,MAAK;AAAA,MACL,oBAAiB;AAAA,OACbF;AAAA,EAAA;AAGV,CAAC;AAEDP,EAAU,cAAc;"}
1	+ {"version":3,"file":"Separator.js","sources":["../../../../../src/ui/primitives/Separator/Separator.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\n\nexport type SeparatorOrientation = \"horizontal\" \| \"vertical\";\nexport type SeparatorVariant = \"solid\" \| \"dashed\" \| \"dotted\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n orientation?: SeparatorOrientation;\n variant?: SeparatorVariant;\n}\n\n/*\n Separator Component\n \n A visual separator component for dividing content.\n * Optimized with React.memo to prevent unnecessary re-renders.\n \n @example\n * ```tsx\n * <Separator />\n \n <Separator orientation=\"vertical\" variant=\"dashed\" />\n * ```\n */\nconst separatorOrientationClasses = {\n horizontal: \"w-full border-t\",\n vertical: \"h-full border-l self-stretch\",\n} as const;\n\nconst separatorVariantClasses = {\n solid: \"border-solid\",\n dashed: \"border-dashed\",\n dotted: \"border-dotted\",\n} as const;\n\nconst Separator = memo(function Separator({\n orientation = \"horizontal\",\n variant = \"solid\",\n className = \"\",\n ...props\n}: SeparatorProps) {\n const classes = cn(\n \"border-0\",\n \"border-line-default\",\n separatorOrientationClasses[orientation],\n separatorVariantClasses[variant],\n className,\n );\n\n if (orientation === \"vertical\") {\n return (\n <div\n className={classes}\n role=\"separator\"\n aria-orientation=\"vertical\"\n {...(props as HTMLAttributes<HTMLDivElement>)}\n />\n );\n }\n\n return (\n <hr\n className={classes}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n {...props}\n />\n );\n});\n\nSeparator.displayName = \"Separator\";\n\nexport default Separator;\n"],"names":["separatorOrientationClasses","separatorVariantClasses","Separator","memo","_a","_b","orientation","variant","className","props","__objRest","classes","cn","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAMA,IAA8B;AAAA,EAClC,YAAY;AAAA,EACZ,UAAU;AACZ,GAEMC,IAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV,GAEMC,IAAYC,EAAK,SAAmBC,GAKvB;AALuB,MAAAC,IAAAD,GACxC;AAAA,iBAAAE,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MAH4BH,GAIrCI,IAAAC,EAJqCL,GAIrC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAUC;AAAA,IACd;AAAA,IACA;AAAA,IACAZ,EAA4BM,CAAW;AAAA,IACvCL,EAAwBM,CAAO;AAAA,IAC/BC;AAAA,EAAA;AAGF,SAAIF,MAAgB,aAEhB,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWH;AAAA,MACX,MAAK;AAAA,MACL,oBAAiB;AAAA,OACZF;AAAA,EAAA,IAMT,gBAAAI;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWH;AAAA,MACX,MAAK;AAAA,MACL,oBAAiB;AAAA,OACbF;AAAA,EAAA;AAGV,CAAC;AAEDP,EAAU,cAAc;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.js","sources":["../../../../../src/ui/primitives/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n variant?: \"text\" \| \"card\" \| \"list\" \| \"circle\";\n width?: string;\n height?: string;\n lines?: number;\n}\n\n/*\n Skeleton Component\n \n A skeleton loader component for displaying loading states.\n * Follows Atomic Design principles as an Atom component.\n \n @example\n * ```tsx\n * <Skeleton variant=\"card\" />\n * <Skeleton variant=\"text\" lines={3} />\n * ```\n */\nexport default function Skeleton({\n variant = \"text\",\n width,\n height,\n lines = 1,\n className = \"\",\n \"aria-label\": ariaLabel,\n ...props\n}: SkeletonProps) {\n const baseClasses = [\n \"motion-safe:animate-pulse\",\n \"bg-surface-muted\",\n getRadiusClass(\"sm\"),\n ];\n\n const variantClasses: Record<\n NonNullable<SkeletonProps[\"variant\"]>,\n string\n > = {\n text: \"h-4\",\n card: \"h-32\",\n list: \"h-12\",\n circle: getRadiusClass(\"full\"),\n };\n\n const classes = cn(...baseClasses, variantClasses[variant], className);\n\n const style: React.CSSProperties = {};\n if (width) style.width = width;\n if (height) style.height = height;\n\n const defaultAriaLabel = ariaLabel \|\| `Loading ${variant} content`;\n\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n className={getSpacingClass(\"sm\", \"space-y\")}\n role=\"status\"\n aria-busy=\"true\"\n aria-label={defaultAriaLabel}\n {...props}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={classes}\n style={index === lines - 1 ? { width: \"75%\" } : style}\n aria-hidden=\"true\"\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n className={classes}\n style={style}\n role=\"status\"\n aria-busy=\"true\"\n aria-label={defaultAriaLabel}\n {...props}\n />\n );\n}\n"],"names":["Skeleton","_a","_b","variant","width","height","lines","className","ariaLabel","props","__objRest","baseClasses","getRadiusClass","variantClasses","classes","cn","style","defaultAriaLabel","jsx","__spreadProps","__spreadValues","getSpacingClass","_","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBA~~,SAAwBA,EAASC,GAQf;AARe,MAAAC,IAAAD,GAC/B;AAAA,aAAAE,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,cAAcC;AAAA,MANiBN,GAO5BO,IAAAC,EAP4BR,GAO5B;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMS,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACAC,EAAe,IAAI;AAAA,EAAA,GAGfC,IAGF;AAAA,IACF,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQD,EAAe,MAAM;AAAA,EAAA,GAGzBE,IAAUC,EAAG,GAAGJ,GAAaE,EAAeV,CAAO,GAAGI,CAAS,GAE/DS,IAA6B,CAAA;AACnC,EAAIZ,QAAa,QAAQA,IACrBC,QAAc,SAASA;AAE3B,QAAMY,IAAmBT,KAAa,WAAWL,CAAO;AAExD,SAAIA,MAAY,UAAUG,IAAQ,IAE9B,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAgB,MAAM,SAAS;AAAA,MAC1C,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYJ;AAAA,OACRR,IALL;AAAA,MAOE,UAAA,MAAM,KAAK,EAAE,QAAQH,GAAO,EAAE,IAAI,CAACgB,GAAGC,MACrC,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAWJ;AAAA,UACX,OAAOS,MAAUjB,IAAQ,IAAI,EAAE,OAAO,UAAUU;AAAA,UAChD,eAAY;AAAA,QAAA;AAAA,QAHPO;AAAA,MAAA,CAKR;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAL;AAAA,IAAC;AAAA,IAAAE,EAAA;AAAA,MACC,WAAWN;AAAA,MACX,OAAAE;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYC;AAAA,OACRR;AAAA,EAAA;AAGV;"}
1	+ {"version":3,"file":"Skeleton.js","sources":["../../../../../src/ui/primitives/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n variant?: \"text\" \| \"card\" \| \"list\" \| \"circle\";\n width?: string;\n height?: string;\n lines?: number;\n}\n\n/*\n Skeleton Component\n \n A skeleton loader component for displaying loading states.\n \n @example\n * ```tsx\n * <Skeleton variant=\"card\" />\n * <Skeleton variant=\"text\" lines={3} />\n * ```\n */\nexport default function Skeleton({\n variant = \"text\",\n width,\n height,\n lines = 1,\n className = \"\",\n \"aria-label\": ariaLabel,\n ...props\n}: SkeletonProps) {\n const baseClasses = [\n \"motion-safe:animate-pulse\",\n \"bg-surface-muted\",\n getRadiusClass(\"sm\"),\n ];\n\n const variantClasses: Record<\n NonNullable<SkeletonProps[\"variant\"]>,\n string\n > = {\n text: \"h-4\",\n card: \"h-32\",\n list: \"h-12\",\n circle: getRadiusClass(\"full\"),\n };\n\n const classes = cn(...baseClasses, variantClasses[variant], className);\n\n const style: React.CSSProperties = {};\n if (width) style.width = width;\n if (height) style.height = height;\n\n const defaultAriaLabel = ariaLabel \|\| `Loading ${variant} content`;\n\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n className={getSpacingClass(\"sm\", \"space-y\")}\n role=\"status\"\n aria-busy=\"true\"\n aria-label={defaultAriaLabel}\n {...props}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={classes}\n style={index === lines - 1 ? { width: \"75%\" } : style}\n aria-hidden=\"true\"\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n className={classes}\n style={style}\n role=\"status\"\n aria-busy=\"true\"\n aria-label={defaultAriaLabel}\n {...props}\n />\n );\n}\n"],"names":["Skeleton","_a","_b","variant","width","height","lines","className","ariaLabel","props","__objRest","baseClasses","getRadiusClass","variantClasses","classes","cn","style","defaultAriaLabel","jsx","__spreadProps","__spreadValues","getSpacingClass","_","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAwBA,EAASC,GAQf;AARe,MAAAC,IAAAD,GAC/B;AAAA,aAAAE,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,cAAcC;AAAA,MANiBN,GAO5BO,IAAAC,EAP4BR,GAO5B;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMS,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACAC,EAAe,IAAI;AAAA,EAAA,GAGfC,IAGF;AAAA,IACF,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQD,EAAe,MAAM;AAAA,EAAA,GAGzBE,IAAUC,EAAG,GAAGJ,GAAaE,EAAeV,CAAO,GAAGI,CAAS,GAE/DS,IAA6B,CAAA;AACnC,EAAIZ,QAAa,QAAQA,IACrBC,QAAc,SAASA;AAE3B,QAAMY,IAAmBT,KAAa,WAAWL,CAAO;AAExD,SAAIA,MAAY,UAAUG,IAAQ,IAE9B,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAgB,MAAM,SAAS;AAAA,MAC1C,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYJ;AAAA,OACRR,IALL;AAAA,MAOE,UAAA,MAAM,KAAK,EAAE,QAAQH,GAAO,EAAE,IAAI,CAACgB,GAAGC,MACrC,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAWJ;AAAA,UACX,OAAOS,MAAUjB,IAAQ,IAAI,EAAE,OAAO,UAAUU;AAAA,UAChD,eAAY;AAAA,QAAA;AAAA,QAHPO;AAAA,MAAA,CAKR;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAL;AAAA,IAAC;AAAA,IAAAE,EAAA;AAAA,MACC,WAAWN;AAAA,MACX,OAAAE;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYC;AAAA,OACRR;AAAA,EAAA;AAGV;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sources":["../../../../../src/ui/primitives/Slider/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState, useId, forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type SliderVariant = \"single\" \| \"range\";\nexport type SliderSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface SliderProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onChange\" \| \"defaultValue\"\n> {\n value?: number \| [number, number];\n defaultValue?: number \| [number, number];\n min?: number;\n max?: number;\n step?: number;\n variant?: SliderVariant;\n size?: SliderSize;\n disabled?: boolean;\n showValue?: boolean;\n marks?: number[];\n onChange?: (value: number \| [number, number]) => void;\n onValueChange?: (value: number \| [number, number]) => void;\n /*\n Required label for the slider. Becomes the accessible name via\n * aria-labelledby — single variant references the rendered <label>\n * element directly; range variant references the same label plus a\n * sr-only qualifier (\"minimum\" / \"maximum\") so AT users can tell\n * which handle has focus. Make this a real domain term (\"Volume\",\n * \"Price range\"), not the element type (\"slider\").\n /\n label: string;\n}\n\n/\n Slider Component\n \n A range input component for selecting numeric values.\n * Supports single and dual thumb (range) modes.\n * Follows Atomic Design principles as an Atom component.\n \n @example\n * ```tsx\n * <Slider\n * value={50}\n * min={0}\n * max={100}\n * onChange={(value) => console.log(value)}\n * />\n \n <Slider\n * variant=\"range\"\n * value={[20, 80]}\n * min={0}\n * max={100}\n * onChange={(value) => console.log(value)}\n * />\n * ```\n /\nconst Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n value: controlledValue,\n defaultValue,\n min = 0,\n max = 100,\n step = 1,\n variant = \"single\",\n size = \"md\",\n disabled = false,\n showValue = false,\n marks = [],\n onChange,\n onValueChange,\n label,\n className = \"\",\n ...props\n },\n ref,\n) {\n const sliderRef = useRef<HTMLDivElement>(null);\n // Stable IDs for the visible <label> and (for range) the sr-only\n // qualifier spans that distinguish min vs max handles. Range\n // accessible name = label + qualifier via aria-labelledby with two\n // ids (\"Price range minimum\" / \"Price range maximum\"), so the\n // visible label remains the single source of truth — changing\n // `label` propagates to both handles automatically.\n const labelId = useId();\n const minQualifierId = useId();\n const maxQualifierId = useId();\n const [internalValue, setInternalValue] = useState<number \| [number, number]>(\n defaultValue \|\| (variant === \"range\" ? [min, max] : min),\n );\n const [isDragging, setIsDragging] = useState(false);\n const [activeThumb, setActiveThumb] = useState<\"min\" \| \"max\" \| null>(null);\n\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n const getPercentage = (val: number) => ((val - min) / (max - min)) 100;\n\n const getValueFromPosition = (clientX: number): number => {\n if (!sliderRef.current) return min;\n const rect = sliderRef.current.getBoundingClientRect();\n const percentage = Math.max(\n 0,\n Math.min(1, (clientX - rect.left) / rect.width),\n );\n const rawValue = min + percentage * (max - min);\n return Math.round(rawValue / step) * step;\n };\n\n const handleMouseDown = (\n e: React.MouseEvent,\n thumb: \"min\" \| \"max\" = \"min\",\n ) => {\n if (disabled) return;\n e.preventDefault();\n setIsDragging(true);\n setActiveThumb(thumb);\n\n const handleMouseMove = (moveEvent: MouseEvent) => {\n if (!sliderRef.current) return;\n const newValue = getValueFromPosition(moveEvent.clientX);\n updateValue(newValue, thumb);\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n setActiveThumb(null);\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n };\n\n const updateValue = (newValue: number, thumb: \"min\" \| \"max\" = \"min\") => {\n const clampedValue = Math.max(min, Math.min(max, newValue));\n\n if (variant === \"range\") {\n const [minVal, maxVal] = Array.isArray(currentValue)\n ? currentValue\n : [min, max];\n let updatedValue: [number, number];\n\n if (thumb === \"min\") {\n updatedValue = [Math.min(clampedValue, maxVal), maxVal];\n } else {\n updatedValue = [minVal, Math.max(clampedValue, minVal)];\n }\n\n if (!isControlled) {\n setInternalValue(updatedValue);\n }\n onChange?.(updatedValue);\n onValueChange?.(updatedValue);\n } else {\n if (!isControlled) {\n setInternalValue(clampedValue);\n }\n onChange?.(clampedValue);\n onValueChange?.(clampedValue);\n }\n };\n\n const handleTrackClick = (e: React.MouseEvent) => {\n if (disabled \|\| isDragging) return;\n const newValue = getValueFromPosition(e.clientX);\n updateValue(newValue);\n };\n\n // Get focus ring color using design system helper\n const getFocusRingColor = (): string => {\n return \"focus:ring-line-brand\" + \" ring-offset-2\";\n };\n\n // Slider variants using CVA\n const sliderTrackVariants = cva(cn(\"relative\", \"cursor-pointer\"), {\n variants: {\n size: {\n sm: \"h-1\",\n md: \"h-2\",\n lg: \"h-3\",\n },\n disabled: {\n true: \"opacity-50 cursor-not-allowed\",\n false: \"\",\n },\n },\n defaultVariants: {\n size: \"md\",\n disabled: false,\n },\n });\n\n const sliderThumbVariants = cva(\n cn(\n \"absolute\",\n \"bg-surface-brand\",\n getRadiusClass(\"full\"),\n \"border-2\",\n \"border-white\",\n getShadowClass(\"md\"),\n \"cursor-grab\",\n \"active:cursor-grabbing\",\n getAnimationClass(\"base\"),\n \"-translate-x-1/2\",\n \"-translate-y-1/2\",\n \"top-1/2\",\n ),\n {\n variants: {\n size: {\n sm: \"w-3 h-3\",\n md: \"w-4 h-4\",\n lg: \"w-5 h-5\",\n },\n active: {\n true: getFocusRingColor(),\n false: \"\",\n },\n },\n defaultVariants: {\n size: \"md\",\n active: false,\n },\n },\n );\n\n // Configuration for styling variants\n // const _config = {\n // track: sliderTrackVariants({ size, disabled }),\n // thumb: sliderThumbVariants({ size }),\n // };\n const singleValue =\n typeof currentValue === \"number\" ? currentValue : currentValue[0];\n const minValue = Array.isArray(currentValue) ? currentValue[0] : min;\n const maxValue = Array.isArray(currentValue) ? currentValue[1] : singleValue;\n\n const minPercentage = getPercentage(minValue);\n const maxPercentage = getPercentage(maxValue);\n\n return (\n <div ref={ref} className={cn(\"w-full\", className)} {...props}>\n <label\n id={labelId}\n className={cn(\n \"block\",\n getTypographySize(\"bodySmall\"),\n getTypographyWeight(\"label\"),\n \"text-fg-primary\",\n getSpacingClass(\"sm\", \"mb\"),\n )}\n >\n {label}\n {showValue && (\n <span\n className={cn(getSpacingClass(\"sm\", \"ml\"), \"text-fg-secondary\")}\n >\n {variant === \"range\" ? `${minValue} - ${maxValue}` : singleValue}\n </span>\n )}\n </label>\n {variant === \"range\" && (\n <>\n <span id={minQualifierId} className=\"sr-only\">\n minimum\n </span>\n <span id={maxQualifierId} className=\"sr-only\">\n maximum\n </span>\n </>\n )}\n <div\n ref={sliderRef}\n className={cn(\n sliderTrackVariants({ size, disabled }),\n \"bg-surface-muted\",\n getRadiusClass(\"full\"),\n )}\n onClick={handleTrackClick}\n role={variant === \"range\" ? undefined : \"slider\"}\n aria-valuemin={variant === \"range\" ? undefined : min}\n aria-valuemax={variant === \"range\" ? undefined : max}\n aria-valuenow={variant === \"range\" ? undefined : singleValue}\n aria-disabled={variant === \"range\" ? undefined : disabled}\n aria-labelledby={variant === \"range\" ? undefined : labelId}\n >\n {/* Active track /}\n <div\n className={cn(\n \"absolute\",\n sliderTrackVariants({ size }),\n \"bg-surface-brand\",\n getRadiusClass(\"full\"),\n getAnimationClass(\"base\"),\n )}\n style={{\n left: `${minPercentage}%`,\n width: `${maxPercentage - minPercentage}%`,\n }}\n />\n\n {/ Marks /}\n {marks.map((mark) => {\n const markPercentage = getPercentage(mark);\n return (\n <div\n key={mark}\n className={cn(\n \"absolute\",\n \"w-1\",\n \"h-1\",\n \"bg-line-strong\",\n getRadiusClass(\"full\"),\n \"-translate-x-1/2\",\n )}\n style={{\n left: `${markPercentage}%`,\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n />\n );\n })}\n\n {/ Thumbs */}\n {variant === \"range\" ? (\n <>\n <div\n className={cn(\n sliderThumbVariants({ size, active: activeThumb === \"min\" }),\n )}\n style={{ left: `${minPercentage}%` }}\n onMouseDown={(e) => handleMouseDown(e, \"min\")}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={maxValue}\n aria-valuenow={minValue}\n aria-labelledby={`${labelId} ${minQualifierId}`}\n />\n <div\n className={cn(\n sliderThumbVariants({ size, active: activeThumb === \"max\" }),\n )}\n style={{ left: `${maxPercentage}%` }}\n onMouseDown={(e) => handleMouseDown(e, \"max\")}\n role=\"slider\"\n aria-valuemin={minValue}\n aria-valuemax={max}\n aria-valuenow={maxValue}\n aria-labelledby={`${labelId} ${maxQualifierId}`}\n />\n </>\n ) : (\n <div\n className={cn(sliderThumbVariants({ size, active: isDragging }))}\n style={{ left: `${maxPercentage}%` }}\n onMouseDown={(e) => handleMouseDown(e)}\n />\n )}\n\n {showValue && !label && (\n <div className=\"absolute -top-6 left-0 right-0 flex justify-center\">\n <span\n className={cn(\n getTypographySize(\"caption\"),\n \"text-fg-secondary\",\n \"bg-surface-overlay\",\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getRadiusClass(\"md\"),\n \"shadow\",\n )}\n >\n {variant === \"range\" ? `${minValue} - ${maxValue}` : singleValue}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n});\n\nSlider.displayName = \"Slider\";\n\nexport default Slider;\n"],"names":["Slider","forwardRef","_a","ref","_b","controlledValue","defaultValue","min","max","step","variant","size","disabled","showValue","marks","onChange","onValueChange","label","className","props","__objRest","sliderRef","useRef","labelId","useId","minQualifierId","maxQualifierId","internalValue","setInternalValue","useState","isDragging","setIsDragging","activeThumb","setActiveThumb","isControlled","currentValue","getPercentage","val","getValueFromPosition","clientX","rect","percentage","rawValue","handleMouseDown","e","thumb","handleMouseMove","moveEvent","newValue","updateValue","handleMouseUp","clampedValue","minVal","maxVal","updatedValue","handleTrackClick","getFocusRingColor","sliderTrackVariants","cva","cn","sliderThumbVariants","getRadiusClass","getShadowClass","getAnimationClass","singleValue","minValue","maxValue","minPercentage","maxPercentage","jsxs","getTypographySize","getTypographyWeight","getSpacingClass","jsx","Fragment","mark","markPercentage"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.js","sources":["../../../../../src/ui/primitives/Slider/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState, useId, forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type SliderVariant = \"single\" \| \"range\";\nexport type SliderSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface SliderProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onChange\" \| \"defaultValue\"\n> {\n value?: number \| [number, number];\n defaultValue?: number \| [number, number];\n min?: number;\n max?: number;\n step?: number;\n variant?: SliderVariant;\n size?: SliderSize;\n disabled?: boolean;\n showValue?: boolean;\n marks?: number[];\n onChange?: (value: number \| [number, number]) => void;\n onValueChange?: (value: number \| [number, number]) => void;\n /*\n Required label for the slider. Becomes the accessible name via\n * aria-labelledby — single variant references the rendered <label>\n * element directly; range variant references the same label plus a\n * sr-only qualifier (\"minimum\" / \"maximum\") so AT users can tell\n * which handle has focus. Make this a real domain term (\"Volume\",\n * \"Price range\"), not the element type (\"slider\").\n /\n label: string;\n}\n\n/\n Slider Component\n \n A range input component for selecting numeric values.\n * Supports single and dual thumb (range) modes.\n \n @example\n * ```tsx\n * <Slider\n * value={50}\n * min={0}\n * max={100}\n * onChange={(value) => console.log(value)}\n * />\n \n <Slider\n * variant=\"range\"\n * value={[20, 80]}\n * min={0}\n * max={100}\n * onChange={(value) => console.log(value)}\n * />\n * ```\n /\nconst Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n value: controlledValue,\n defaultValue,\n min = 0,\n max = 100,\n step = 1,\n variant = \"single\",\n size = \"md\",\n disabled = false,\n showValue = false,\n marks = [],\n onChange,\n onValueChange,\n label,\n className = \"\",\n ...props\n },\n ref,\n) {\n const sliderRef = useRef<HTMLDivElement>(null);\n // Stable IDs for the visible <label> and (for range) the sr-only\n // qualifier spans that distinguish min vs max handles. Range\n // accessible name = label + qualifier via aria-labelledby with two\n // ids (\"Price range minimum\" / \"Price range maximum\"), so the\n // visible label remains the single source of truth — changing\n // `label` propagates to both handles automatically.\n const labelId = useId();\n const minQualifierId = useId();\n const maxQualifierId = useId();\n const [internalValue, setInternalValue] = useState<number \| [number, number]>(\n defaultValue \|\| (variant === \"range\" ? [min, max] : min),\n );\n const [isDragging, setIsDragging] = useState(false);\n const [activeThumb, setActiveThumb] = useState<\"min\" \| \"max\" \| null>(null);\n\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n const getPercentage = (val: number) => ((val - min) / (max - min)) 100;\n\n const getValueFromPosition = (clientX: number): number => {\n if (!sliderRef.current) return min;\n const rect = sliderRef.current.getBoundingClientRect();\n const percentage = Math.max(\n 0,\n Math.min(1, (clientX - rect.left) / rect.width),\n );\n const rawValue = min + percentage * (max - min);\n return Math.round(rawValue / step) * step;\n };\n\n const handleMouseDown = (\n e: React.MouseEvent,\n thumb: \"min\" \| \"max\" = \"min\",\n ) => {\n if (disabled) return;\n e.preventDefault();\n setIsDragging(true);\n setActiveThumb(thumb);\n\n const handleMouseMove = (moveEvent: MouseEvent) => {\n if (!sliderRef.current) return;\n const newValue = getValueFromPosition(moveEvent.clientX);\n updateValue(newValue, thumb);\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n setActiveThumb(null);\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n };\n\n const updateValue = (newValue: number, thumb: \"min\" \| \"max\" = \"min\") => {\n const clampedValue = Math.max(min, Math.min(max, newValue));\n\n if (variant === \"range\") {\n const [minVal, maxVal] = Array.isArray(currentValue)\n ? currentValue\n : [min, max];\n let updatedValue: [number, number];\n\n if (thumb === \"min\") {\n updatedValue = [Math.min(clampedValue, maxVal), maxVal];\n } else {\n updatedValue = [minVal, Math.max(clampedValue, minVal)];\n }\n\n if (!isControlled) {\n setInternalValue(updatedValue);\n }\n onChange?.(updatedValue);\n onValueChange?.(updatedValue);\n } else {\n if (!isControlled) {\n setInternalValue(clampedValue);\n }\n onChange?.(clampedValue);\n onValueChange?.(clampedValue);\n }\n };\n\n const handleTrackClick = (e: React.MouseEvent) => {\n if (disabled \|\| isDragging) return;\n const newValue = getValueFromPosition(e.clientX);\n updateValue(newValue);\n };\n\n // Get focus ring color using design system helper\n const getFocusRingColor = (): string => {\n return \"focus:ring-line-brand\" + \" ring-offset-2\";\n };\n\n // Slider variants using CVA\n const sliderTrackVariants = cva(cn(\"relative\", \"cursor-pointer\"), {\n variants: {\n size: {\n sm: \"h-1\",\n md: \"h-2\",\n lg: \"h-3\",\n },\n disabled: {\n true: \"opacity-50 cursor-not-allowed\",\n false: \"\",\n },\n },\n defaultVariants: {\n size: \"md\",\n disabled: false,\n },\n });\n\n const sliderThumbVariants = cva(\n cn(\n \"absolute\",\n \"bg-surface-brand\",\n getRadiusClass(\"full\"),\n \"border-2\",\n \"border-white\",\n getShadowClass(\"md\"),\n \"cursor-grab\",\n \"active:cursor-grabbing\",\n getAnimationClass(\"base\"),\n \"-translate-x-1/2\",\n \"-translate-y-1/2\",\n \"top-1/2\",\n ),\n {\n variants: {\n size: {\n sm: \"w-3 h-3\",\n md: \"w-4 h-4\",\n lg: \"w-5 h-5\",\n },\n active: {\n true: getFocusRingColor(),\n false: \"\",\n },\n },\n defaultVariants: {\n size: \"md\",\n active: false,\n },\n },\n );\n\n // Configuration for styling variants\n // const _config = {\n // track: sliderTrackVariants({ size, disabled }),\n // thumb: sliderThumbVariants({ size }),\n // };\n const singleValue =\n typeof currentValue === \"number\" ? currentValue : currentValue[0];\n const minValue = Array.isArray(currentValue) ? currentValue[0] : min;\n const maxValue = Array.isArray(currentValue) ? currentValue[1] : singleValue;\n\n const minPercentage = getPercentage(minValue);\n const maxPercentage = getPercentage(maxValue);\n\n return (\n <div ref={ref} className={cn(\"w-full\", className)} {...props}>\n <label\n id={labelId}\n className={cn(\n \"block\",\n getTypographySize(\"bodySmall\"),\n getTypographyWeight(\"label\"),\n \"text-fg-primary\",\n getSpacingClass(\"sm\", \"mb\"),\n )}\n >\n {label}\n {showValue && (\n <span\n className={cn(getSpacingClass(\"sm\", \"ml\"), \"text-fg-secondary\")}\n >\n {variant === \"range\" ? `${minValue} - ${maxValue}` : singleValue}\n </span>\n )}\n </label>\n {variant === \"range\" && (\n <>\n <span id={minQualifierId} className=\"sr-only\">\n minimum\n </span>\n <span id={maxQualifierId} className=\"sr-only\">\n maximum\n </span>\n </>\n )}\n <div\n ref={sliderRef}\n className={cn(\n sliderTrackVariants({ size, disabled }),\n \"bg-surface-muted\",\n getRadiusClass(\"full\"),\n )}\n onClick={handleTrackClick}\n role={variant === \"range\" ? undefined : \"slider\"}\n aria-valuemin={variant === \"range\" ? undefined : min}\n aria-valuemax={variant === \"range\" ? undefined : max}\n aria-valuenow={variant === \"range\" ? undefined : singleValue}\n aria-disabled={variant === \"range\" ? undefined : disabled}\n aria-labelledby={variant === \"range\" ? undefined : labelId}\n >\n {/* Active track /}\n <div\n className={cn(\n \"absolute\",\n sliderTrackVariants({ size }),\n \"bg-surface-brand\",\n getRadiusClass(\"full\"),\n getAnimationClass(\"base\"),\n )}\n style={{\n left: `${minPercentage}%`,\n width: `${maxPercentage - minPercentage}%`,\n }}\n />\n\n {/ Marks /}\n {marks.map((mark) => {\n const markPercentage = getPercentage(mark);\n return (\n <div\n key={mark}\n className={cn(\n \"absolute\",\n \"w-1\",\n \"h-1\",\n \"bg-line-strong\",\n getRadiusClass(\"full\"),\n \"-translate-x-1/2\",\n )}\n style={{\n left: `${markPercentage}%`,\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n />\n );\n })}\n\n {/ Thumbs */}\n {variant === \"range\" ? (\n <>\n <div\n className={cn(\n sliderThumbVariants({ size, active: activeThumb === \"min\" }),\n )}\n style={{ left: `${minPercentage}%` }}\n onMouseDown={(e) => handleMouseDown(e, \"min\")}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={maxValue}\n aria-valuenow={minValue}\n aria-labelledby={`${labelId} ${minQualifierId}`}\n />\n <div\n className={cn(\n sliderThumbVariants({ size, active: activeThumb === \"max\" }),\n )}\n style={{ left: `${maxPercentage}%` }}\n onMouseDown={(e) => handleMouseDown(e, \"max\")}\n role=\"slider\"\n aria-valuemin={minValue}\n aria-valuemax={max}\n aria-valuenow={maxValue}\n aria-labelledby={`${labelId} ${maxQualifierId}`}\n />\n </>\n ) : (\n <div\n className={cn(sliderThumbVariants({ size, active: isDragging }))}\n style={{ left: `${maxPercentage}%` }}\n onMouseDown={(e) => handleMouseDown(e)}\n />\n )}\n\n {showValue && !label && (\n <div className=\"absolute -top-6 left-0 right-0 flex justify-center\">\n <span\n className={cn(\n getTypographySize(\"caption\"),\n \"text-fg-secondary\",\n \"bg-surface-overlay\",\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getRadiusClass(\"md\"),\n \"shadow\",\n )}\n >\n {variant === \"range\" ? `${minValue} - ${maxValue}` : singleValue}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n});\n\nSlider.displayName = \"Slider\";\n\nexport default Slider;\n"],"names":["Slider","forwardRef","_a","ref","_b","controlledValue","defaultValue","min","max","step","variant","size","disabled","showValue","marks","onChange","onValueChange","label","className","props","__objRest","sliderRef","useRef","labelId","useId","minQualifierId","maxQualifierId","internalValue","setInternalValue","useState","isDragging","setIsDragging","activeThumb","setActiveThumb","isControlled","currentValue","getPercentage","val","getValueFromPosition","clientX","rect","percentage","rawValue","handleMouseDown","e","thumb","handleMouseMove","moveEvent","newValue","updateValue","handleMouseUp","clampedValue","minVal","maxVal","updatedValue","handleTrackClick","getFocusRingColor","sliderTrackVariants","cva","cn","sliderThumbVariants","getRadiusClass","getShadowClass","getAnimationClass","singleValue","minValue","maxValue","minPercentage","maxPercentage","jsxs","getTypographySize","getTypographyWeight","getSpacingClass","jsx","Fragment","mark","markPercentage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,MAAMA,KAASC,GAAwC,SACrDC,IAiBAC,IACA;AAlBA,MAAAC,IAAAF,IACE;AAAA,WAAOG;AAAA,IACP,cAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,OAAAC,KAAQ,CAAA;AAAA,IACR,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,KAAY;AAAA,MAddd,GAeKe,KAAAC,GAfLhB,GAeK;AAAA,IAdH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAMiB,IAAYC,GAAuB,IAAI,GAOvCC,IAAUC,EAAA,GACVC,IAAiBD,EAAA,GACjBE,IAAiBF,EAAA,GACjB,CAACG,IAAeC,CAAgB,IAAIC;AAAA,IACxCvB,MAAiBI,MAAY,UAAU,CAACH,GAAKC,CAAG,IAAID;AAAA,EAAA,GAEhD,CAACuB,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAaC,CAAc,IAAIJ,EAA+B,IAAI,GAEnEK,IAAe7B,MAAoB,QACnC8B,IAAeD,IAAe7B,IAAkBsB,IAEhDS,IAAgB,CAACC,OAAkBA,IAAM9B,MAAQC,IAAMD,KAAQ,KAE/D+B,IAAuB,CAACC,MAA4B;AACxD,QAAI,CAAClB,EAAU,QAAS,QAAOd;AAC/B,UAAMiC,IAAOnB,EAAU,QAAQ,sBAAA,GACzBoB,IAAa,KAAK;AAAA,MACtB;AAAA,MACA,KAAK,IAAI,IAAIF,IAAUC,EAAK,QAAQA,EAAK,KAAK;AAAA,IAAA,GAE1CE,IAAWnC,IAAMkC,KAAcjC,IAAMD;AAC3C,WAAO,KAAK,MAAMmC,IAAWjC,CAAI,IAAIA;AAAA,EACvC,GAEMkC,IAAkB,CACtBC,GACAC,IAAuB,UACpB;AACH,QAAIjC,EAAU;AACd,IAAAgC,EAAE,eAAA,GACFb,EAAc,EAAI,GAClBE,EAAeY,CAAK;AAEpB,UAAMC,IAAkB,CAACC,MAA0B;AACjD,UAAI,CAAC1B,EAAU,QAAS;AACxB,YAAM2B,IAAWV,EAAqBS,EAAU,OAAO;AACvD,MAAAE,EAAYD,GAAUH,CAAK;AAAA,IAC7B,GAEMK,IAAgB,MAAM;AAC1B,MAAAnB,EAAc,EAAK,GACnBE,EAAe,IAAI,GACnB,SAAS,oBAAoB,aAAaa,CAAe,GACzD,SAAS,oBAAoB,WAAWI,CAAa;AAAA,IACvD;AAEA,aAAS,iBAAiB,aAAaJ,CAAe,GACtD,SAAS,iBAAiB,WAAWI,CAAa;AAAA,EACpD,GAEMD,IAAc,CAACD,GAAkBH,IAAuB,UAAU;AACtE,UAAMM,IAAe,KAAK,IAAI5C,GAAK,KAAK,IAAIC,GAAKwC,CAAQ,CAAC;AAE1D,QAAItC,MAAY,SAAS;AACvB,YAAM,CAAC0C,GAAQC,CAAM,IAAI,MAAM,QAAQlB,CAAY,IAC/CA,IACA,CAAC5B,GAAKC,CAAG;AACb,UAAI8C;AAEJ,MAAIT,MAAU,QACZS,IAAe,CAAC,KAAK,IAAIH,GAAcE,CAAM,GAAGA,CAAM,IAEtDC,IAAe,CAACF,GAAQ,KAAK,IAAID,GAAcC,CAAM,CAAC,GAGnDlB,KACHN,EAAiB0B,CAAY,GAE/BvC,KAAA,QAAAA,EAAWuC,IACXtC,KAAA,QAAAA,EAAgBsC;AAAA,IAClB;AACE,MAAKpB,KACHN,EAAiBuB,CAAY,GAE/BpC,KAAA,QAAAA,EAAWoC,IACXnC,KAAA,QAAAA,EAAgBmC;AAAA,EAEpB,GAEMI,KAAmB,CAACX,MAAwB;AAChD,QAAIhC,KAAYkB,EAAY;AAC5B,UAAMkB,IAAWV,EAAqBM,EAAE,OAAO;AAC/C,IAAAK,EAAYD,CAAQ;AAAA,EACtB,GAGMQ,KAAoB,MACjB,uCAIHC,IAAsBC,GAAIC,EAAG,YAAY,gBAAgB,GAAG;AAAA,IAChE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,GAEKC,IAAsBF;AAAA,IAC1BC;AAAA,MACE;AAAA,MACA;AAAA,MACAE,EAAe,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACAC,GAAe,IAAI;AAAA,MACnB;AAAA,MACA;AAAA,MACAC,GAAkB,MAAM;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE,UAAU;AAAA,QACR,MAAM;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QAAA;AAAA,QAEN,QAAQ;AAAA,UACN,MAAMP,GAAA;AAAA,UACN,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,GAQIQ,IACJ,OAAO7B,KAAiB,WAAWA,IAAeA,EAAa,CAAC,GAC5D8B,IAAW,MAAM,QAAQ9B,CAAY,IAAIA,EAAa,CAAC,IAAI5B,GAC3D2D,IAAW,MAAM,QAAQ/B,CAAY,IAAIA,EAAa,CAAC,IAAI6B,GAE3DG,IAAgB/B,EAAc6B,CAAQ,GACtCG,IAAgBhC,EAAc8B,CAAQ;AAE5C,SACE,gBAAAG,EAAC,cAAI,KAAAlE,IAAU,WAAWwD,EAAG,UAAUzC,EAAS,KAAOC,OACrD,UAAA;AAAA,IAAA,gBAAAkD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI9C;AAAA,QACJ,WAAWoC;AAAA,UACT;AAAA,UACAW,GAAkB,WAAW;AAAA,UAC7BC,GAAoB,OAAO;AAAA,UAC3B;AAAA,UACAC,EAAgB,MAAM,IAAI;AAAA,QAAA;AAAA,QAG3B,UAAA;AAAA,UAAAvD;AAAA,UACAJ,KACC,gBAAA4D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWd,EAAGa,EAAgB,MAAM,IAAI,GAAG,mBAAmB;AAAA,cAE7D,gBAAY,UAAU,GAAGP,CAAQ,MAAMC,CAAQ,KAAKF;AAAA,YAAA;AAAA,UAAA;AAAA,QACvD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHtD,MAAY,WACX,gBAAA2D,EAAAK,IAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,IAAIhD,GAAgB,WAAU,WAAU,UAAA,WAE9C;AAAA,wBACC,QAAA,EAAK,IAAIC,GAAgB,WAAU,WAAU,UAAA,UAAA,CAE9C;AAAA,IAAA,GACF;AAAA,IAEF,gBAAA2C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKhD;AAAA,QACL,WAAWsC;AAAA,UACTF,EAAoB,EAAE,MAAA9C,GAAM,UAAAC,GAAU;AAAA,UACtC;AAAA,UACAiD,EAAe,MAAM;AAAA,QAAA;AAAA,QAEvB,SAASN;AAAA,QACT,MAAM7C,MAAY,UAAU,SAAY;AAAA,QACxC,iBAAeA,MAAY,UAAU,SAAYH;AAAA,QACjD,iBAAeG,MAAY,UAAU,SAAYF;AAAA,QACjD,iBAAeE,MAAY,UAAU,SAAYsD;AAAA,QACjD,iBAAetD,MAAY,UAAU,SAAYE;AAAA,QACjD,mBAAiBF,MAAY,UAAU,SAAYa;AAAA,QAGnD,UAAA;AAAA,UAAA,gBAAAkD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWd;AAAA,gBACT;AAAA,gBACAF,EAAoB,EAAE,MAAA9C,GAAM;AAAA,gBAC5B;AAAA,gBACAkD,EAAe,MAAM;AAAA,gBACrBE,GAAkB,MAAM;AAAA,cAAA;AAAA,cAE1B,OAAO;AAAA,gBACL,MAAM,GAAGI,CAAa;AAAA,gBACtB,OAAO,GAAGC,IAAgBD,CAAa;AAAA,cAAA;AAAA,YACzC;AAAA,UAAA;AAAA,UAIDrD,GAAM,IAAI,CAAC6D,MAAS;AACnB,kBAAMC,IAAiBxC,EAAcuC,CAAI;AACzC,mBACE,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWd;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACAE,EAAe,MAAM;AAAA,kBACrB;AAAA,gBAAA;AAAA,gBAEF,OAAO;AAAA,kBACL,MAAM,GAAGe,CAAc;AAAA,kBACvB,KAAK;AAAA,kBACL,WAAW;AAAA,gBAAA;AAAA,cACb;AAAA,cAbKD;AAAA,YAAA;AAAA,UAgBX,CAAC;AAAA,UAGAjE,MAAY,UACX,gBAAA2D,EAAAK,IAAA,EACE,UAAA;AAAA,YAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWd;AAAA,kBACTC,EAAoB,EAAE,MAAAjD,GAAM,QAAQqB,MAAgB,OAAO;AAAA,gBAAA;AAAA,gBAE7D,OAAO,EAAE,MAAM,GAAGmC,CAAa,IAAA;AAAA,gBAC/B,aAAa,CAACvB,MAAMD,EAAgBC,GAAG,KAAK;AAAA,gBAC5C,MAAK;AAAA,gBACL,iBAAerC;AAAA,gBACf,iBAAe2D;AAAA,gBACf,iBAAeD;AAAA,gBACf,mBAAiB,GAAG1C,CAAO,IAAIE,CAAc;AAAA,cAAA;AAAA,YAAA;AAAA,YAE/C,gBAAAgD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWd;AAAA,kBACTC,EAAoB,EAAE,MAAAjD,GAAM,QAAQqB,MAAgB,OAAO;AAAA,gBAAA;AAAA,gBAE7D,OAAO,EAAE,MAAM,GAAGoC,CAAa,IAAA;AAAA,gBAC/B,aAAa,CAACxB,MAAMD,EAAgBC,GAAG,KAAK;AAAA,gBAC5C,MAAK;AAAA,gBACL,iBAAeqB;AAAA,gBACf,iBAAezD;AAAA,gBACf,iBAAe0D;AAAA,gBACf,mBAAiB,GAAG3C,CAAO,IAAIG,CAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C,EAAA,CACF,IAEA,gBAAA+C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWd,EAAGC,EAAoB,EAAE,MAAAjD,GAAM,QAAQmB,EAAA,CAAY,CAAC;AAAA,cAC/D,OAAO,EAAE,MAAM,GAAGsC,CAAa,IAAA;AAAA,cAC/B,aAAa,CAACxB,MAAMD,EAAgBC,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAIxC/B,KAAa,CAACI,KACb,gBAAAwD,EAAC,OAAA,EAAI,WAAU,sDACb,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWd;AAAA,gBACTW,GAAkB,SAAS;AAAA,gBAC3B;AAAA,gBACA;AAAA,gBACAE,EAAgB,MAAM,IAAI;AAAA,gBAC1BA,EAAgB,MAAM,IAAI;AAAA,gBAC1BX,EAAe,IAAI;AAAA,gBACnB;AAAA,cAAA;AAAA,cAGD,gBAAY,UAAU,GAAGI,CAAQ,MAAMC,CAAQ,KAAKF;AAAA,YAAA;AAAA,UAAA,EACvD,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,IACF;AAEJ,CAAC;AAEDhE,GAAO,cAAc;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","sources":["../../../../../src/ui/primitives/Spinner/Spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport { memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type SpinnerSize = \"sm\" \| \"md\" \| \"lg\";\nexport type SpinnerVariant = \"primary\" \| \"secondary\" \| \"neutral\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n size?: SpinnerSize;\n variant?: SpinnerVariant;\n label?: string;\n}\n\n/*\n Spinner Component\n \n A loading spinner component for indicating loading states.\n * Follows Atomic Design principles as an Atom component.\n * Uses Strategy Pattern for different size/variant combinations.\n \n @example\n * ```tsx\n * <Spinner size=\"md\" variant=\"primary\" label=\"Loading...\" />\n * ```\n */\n// Spinner variants using CVA\nconst spinnerVariants = cva(\"motion-safe:animate-spin\", {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-8 w-8\",\n },\n variant: {\n primary: \"text-fg-brand\",\n secondary: \"text-fg-brand-secondary\",\n neutral: \"text-fg-secondary\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"primary\",\n },\n});\n\nconst Spinner = memo(function Spinner({\n size = \"md\",\n variant = \"primary\",\n label,\n className = \"\",\n ...props\n}: SpinnerProps) {\n return (\n <div\n className={cn(\"inline-flex\", \"items-center\", className)}\n role=\"status\"\n aria-label={label \|\| \"Loading\"}\n aria-live=\"polite\"\n {...props}\n >\n <Loader2\n className={cn(spinnerVariants({ size, variant }))}\n aria-hidden=\"true\"\n />\n {label && (\n <span\n className={cn(\n getSpacingClass(\"sm\", \"ml\"),\n getTypographySize(\"bodySmall\"),\n \"text-fg-secondary\",\n \"sr-only\",\n )}\n >\n {label}\n </span>\n )}\n </div>\n );\n});\n\nSpinner.displayName = \"Spinner\";\n\nexport default Spinner;\n"],"names":["spinnerVariants","cva","Spinner","memo","_a","_b","size","variant","label","className","props","__objRest","jsxs","__spreadProps","__spreadValues","cn","jsx","Loader2","getSpacingClass","getTypographySize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA+BA~~,MAAMA,IAAkBC,EAAI,4BAA4B;AAAA,EACtD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC,GAEKC,IAAUC,EAAK,SAAiBC,GAMrB;AANqB,MAAAC,IAAAD,GACpC;AAAA,UAAAE,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAJwBJ,GAKjCK,IAAAC,EALiCN,GAKjC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAG,eAAe,gBAAgBN,CAAS;AAAA,MACtD,MAAK;AAAA,MACL,cAAYD,KAAS;AAAA,MACrB,aAAU;AAAA,OACNE,IALL;AAAA,MAOC,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAGf,EAAgB,EAAE,MAAAM,GAAM,SAAAC,EAAA,CAAS,CAAC;AAAA,YAChD,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEbC,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACTG,EAAgB,MAAM,IAAI;AAAA,cAC1BC,EAAkB,WAAW;AAAA,cAC7B;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAAX;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAQ,cAAc;"}
1	+ {"version":3,"file":"Spinner.js","sources":["../../../../../src/ui/primitives/Spinner/Spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport { memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type SpinnerSize = \"sm\" \| \"md\" \| \"lg\";\nexport type SpinnerVariant = \"primary\" \| \"secondary\" \| \"neutral\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n size?: SpinnerSize;\n variant?: SpinnerVariant;\n label?: string;\n}\n\n/*\n Spinner Component\n \n A loading spinner component for indicating loading states.\n * Uses Strategy Pattern for different size/variant combinations.\n \n @example\n * ```tsx\n * <Spinner size=\"md\" variant=\"primary\" label=\"Loading...\" />\n * ```\n */\n// Spinner variants using CVA\nconst spinnerVariants = cva(\"motion-safe:animate-spin\", {\n variants: {\n size: {\n sm: \"h-4 w-4\",\n md: \"h-5 w-5\",\n lg: \"h-8 w-8\",\n },\n variant: {\n primary: \"text-fg-brand\",\n secondary: \"text-fg-brand-secondary\",\n neutral: \"text-fg-secondary\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"primary\",\n },\n});\n\nconst Spinner = memo(function Spinner({\n size = \"md\",\n variant = \"primary\",\n label,\n className = \"\",\n ...props\n}: SpinnerProps) {\n return (\n <div\n className={cn(\"inline-flex\", \"items-center\", className)}\n role=\"status\"\n aria-label={label \|\| \"Loading\"}\n aria-live=\"polite\"\n {...props}\n >\n <Loader2\n className={cn(spinnerVariants({ size, variant }))}\n aria-hidden=\"true\"\n />\n {label && (\n <span\n className={cn(\n getSpacingClass(\"sm\", \"ml\"),\n getTypographySize(\"bodySmall\"),\n \"text-fg-secondary\",\n \"sr-only\",\n )}\n >\n {label}\n </span>\n )}\n </div>\n );\n});\n\nSpinner.displayName = \"Spinner\";\n\nexport default Spinner;\n"],"names":["spinnerVariants","cva","Spinner","memo","_a","_b","size","variant","label","className","props","__objRest","jsxs","__spreadProps","__spreadValues","cn","jsx","Loader2","getSpacingClass","getTypographySize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,IAAkBC,EAAI,4BAA4B;AAAA,EACtD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC,GAEKC,IAAUC,EAAK,SAAiBC,GAMrB;AANqB,MAAAC,IAAAD,GACpC;AAAA,UAAAE,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAJwBJ,GAKjCK,IAAAC,EALiCN,GAKjC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAG,eAAe,gBAAgBN,CAAS;AAAA,MACtD,MAAK;AAAA,MACL,cAAYD,KAAS;AAAA,MACrB,aAAU;AAAA,OACNE,IALL;AAAA,MAOC,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAGf,EAAgB,EAAE,MAAAM,GAAM,SAAAC,EAAA,CAAS,CAAC;AAAA,YAChD,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEbC,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACTG,EAAgB,MAAM,IAAI;AAAA,cAC1BC,EAAkB,WAAW;AAAA,cAC7B;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAAX;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAQ,cAAc;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../../../../../src/ui/primitives/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo, useCallback, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getSwitchClasses } from \"../../tokens/switch\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn } from \"../../utils\";\n\nexport type SwitchSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface SwitchProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" \| \"type\"\n> {\n size?: SwitchSize;\n label?: string;\n /*\n Secondary text rendered beneath the label, wired through\n * `aria-describedby`. Named `helperText` to match Input, Select,\n * Checkbox, and Radio — every form primitive in the DS uses the\n * same prop name for this role.\n /\n helperText?: string;\n error?: boolean;\n /\n Validation success state — paints the (off-state) track border\n * and (when `helperText` is also set) the helper-text color green.\n * Matches the Input + Select + Checkbox + Radio + Textarea\n * convention. Error takes precedence when both `error` and\n * `success` are set.\n /\n success?: boolean;\n}\n\n/\n Switch Component\n \n A toggle switch component for on/off states.\n * Follows Atomic Design principles as an Atom component.\n \n @example\n * ```tsx\n * <Switch checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />\n \n <Switch\n * label=\"Enable notifications\"\n * helperText=\"Receive email notifications\"\n * checked={notifications}\n * onChange={(e) => setNotifications(e.target.checked)}\n * />\n * ```\n /\nconst Switch = memo(\n forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n {\n size = \"md\",\n label,\n helperText,\n error = false,\n success = false,\n className = \"\",\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n id,\n ...props\n },\n ref,\n ) {\n // Controlled / uncontrolled pattern.\n //\n // Previously this primitive accepted `defaultChecked` via\n // `...props` and forwarded it to the hidden `<input type=\"checkbox\">`\n // (form-integration shim), but the visible `<button role=\"switch\">`\n // bound `aria-checked={checked}` directly. With `checked` undefined\n // in uncontrolled mode, `aria-checked` was missing — axe\n // `aria-required-attr` (critical) flagged every uncontrolled Switch\n // because `role=\"switch\"` REQUIRES `aria-checked`. The visual track\n // and thumb also stuck at the off state because their classes\n // derived from the same `checked` prop.\n //\n // The fix is the standard React pattern: when `checked` is provided\n // the consumer controls state; otherwise `defaultChecked` seeds\n // internal state and the click/keydown handlers update it locally\n // AND notify `onChange`. The visible button, the hidden input, and\n // every classes() consumer all read from a single resolved\n // `currentChecked`.\n const isControlled = checked !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n defaultChecked ?? false,\n );\n const currentChecked = isControlled ? !!checked : internalChecked;\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 switchId = id \|\| `switch-${reactId}`;\n\n const labelId = useMemo(\n () => (label ? `${switchId}-label` : undefined),\n [label, switchId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${switchId}-helper` : undefined),\n [helperText, switchId],\n );\n\n // Component-scoped tokens (SWITCH_TOKENS) drive track/thumb/translate.\n const config = useMemo(() => getSwitchClasses(size), [size]);\n\n // Memoize focus ring color\n const focusRingColor = useMemo(\n () => \"focus:border-line-focus\".replace(\"focus:border-\", \"focus:ring-\"),\n [],\n );\n\n // Memoize classes — all consume `currentChecked` (the resolved\n // controlled-or-uncontrolled state), not the raw `checked` prop.\n const trackClasses = useMemo(\n () =>\n cn(\n \"relative\",\n \"inline-flex\",\n \"shrink-0\",\n \"cursor-pointer\",\n getRadiusClass(\"full\"),\n \"border-2\",\n \"border-transparent\",\n getAnimationClass(\"base\"),\n \"focus:outline-none\",\n \"focus:ring-2\",\n focusRingColor,\n \"focus:ring-offset-2\",\n config.track,\n currentChecked ? \"bg-surface-brand\" : \"bg-surface-muted\",\n // Border feedback only shows in the off state — the on-state\n // brand background already saturates the track and overrides\n // any colored outline visually. Error wins over success.\n error && !currentChecked && \"border-error\",\n !error && success && !currentChecked && \"border-success\",\n disabled && \"opacity-50 cursor-not-allowed\",\n className,\n ),\n [\n focusRingColor,\n config.track,\n currentChecked,\n error,\n success,\n disabled,\n className,\n ],\n );\n\n const thumbClasses = useMemo(\n () =>\n cn(\n \"pointer-events-none\",\n \"inline-block\",\n getRadiusClass(\"full\"),\n \"bg-surface-base\",\n \"shadow\",\n \"transform\",\n getAnimationClass(\"base\"),\n config.thumb,\n currentChecked ? config.translate : \"translate-x-0\",\n ),\n [config.thumb, config.translate, currentChecked],\n );\n\n return (\n <div className={cn(\"flex\", \"items-start\", getSpacingClass(\"md\", \"gap\"))}>\n <div className=\"flex items-center\">\n <button\n type=\"button\"\n className={trackClasses}\n role=\"switch\"\n aria-checked={currentChecked}\n aria-labelledby={labelId}\n aria-describedby={helperId}\n disabled={disabled}\n onClick={useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) return;\n const next = !currentChecked;\n if (!isControlled) setInternalChecked(next);\n if (onChange) {\n const syntheticEvent = {\n ...e,\n target: { ...e.target, checked: next },\n currentTarget: { ...e.currentTarget, checked: next },\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n },\n [disabled, onChange, currentChecked, isControlled],\n )}\n onKeyDown={useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (e.key !== \"Enter\" && e.key !== \" \") return;\n e.preventDefault();\n const next = !currentChecked;\n if (!isControlled) setInternalChecked(next);\n if (onChange) {\n const syntheticEvent = {\n ...e,\n target: { ...e.target, checked: next },\n currentTarget: { ...e.currentTarget, checked: next },\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n },\n [disabled, onChange, currentChecked, isControlled],\n )}\n >\n <span className={thumbClasses} />\n </button>\n {/ Hidden checkbox for form-data integration. Follows the\n resolved `currentChecked` so submission picks up the\n correct value in both controlled and uncontrolled modes.\n `aria-hidden` + tabIndex=-1 keep it out of AT and Tab\n order — interaction happens on the visible button above.\n The onChange is a no-op fallback (real state changes\n flow through the button's handler); React requires it\n alongside `checked` to suppress the controlled-input\n warning when the consumer doesn't supply onChange. */}\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n checked={currentChecked}\n onChange={onChange ?? (() => {})}\n disabled={disabled}\n className=\"sr-only\"\n aria-hidden=\"true\"\n tabIndex={-1}\n {...props}\n />\n </div>\n {(label \|\| helperText) && (\n <div className=\"flex-1\">\n {label && (\n <label\n id={labelId}\n htmlFor={switchId}\n className={cn(\n \"block\",\n getTypographySize(\"bodySmall\"),\n getTypographyWeight(\"label\"),\n error ? \"text-fg-error\" : \"text-fg-primary\",\n disabled ? \"opacity-50\" : \"cursor-pointer\",\n )}\n >\n {label}\n </label>\n )}\n {helperText && (\n <p\n id={helperId}\n className={cn(\n getSpacingClass(\"xs\", \"mt\"),\n getTypographySize(\"bodySmall\"),\n error\n ? \"text-fg-error\"\n : success\n ? \"text-fg-success\"\n : \"text-fg-secondary\",\n )}\n >\n {helperText}\n </p>\n )}\n </div>\n )}\n </div>\n );\n }),\n);\n\nSwitch.displayName = \"Switch\";\n\nexport default Switch;\n"],"names":["Switch","memo","forwardRef","_a","ref","_b","size","label","helperText","error","success","className","disabled","checked","defaultChecked","onChange","id","props","__objRest","isControlled","internalChecked","setInternalChecked","useState","currentChecked","reactId","useId","switchId","labelId","useMemo","helperId","config","getSwitchClasses","focusRingColor","trackClasses","cn","getRadiusClass","getAnimationClass","thumbClasses","jsxs","getSpacingClass","jsx","useCallback","e","next","syntheticEvent","__spreadProps","__spreadValues","getTypographySize","getTypographyWeight"],"mappings":"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"}
1	+ {"version":3,"file":"Switch.js","sources":["../../../../../src/ui/primitives/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo, useCallback, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getSwitchClasses } from \"../../tokens/switch\";\nimport {\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn } from \"../../utils\";\n\nexport type SwitchSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface SwitchProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" \| \"type\"\n> {\n size?: SwitchSize;\n label?: string;\n /*\n Secondary text rendered beneath the label, wired through\n * `aria-describedby`. Named `helperText` to match Input, Select,\n * Checkbox, and Radio — every form primitive in the DS uses the\n * same prop name for this role.\n /\n helperText?: string;\n error?: boolean;\n /\n Validation success state — paints the (off-state) track border\n * and (when `helperText` is also set) the helper-text color green.\n * Matches the Input + Select + Checkbox + Radio + Textarea\n * convention. Error takes precedence when both `error` and\n * `success` are set.\n /\n success?: boolean;\n}\n\n/\n Switch Component\n \n A toggle switch component for on/off states.\n \n @example\n * ```tsx\n * <Switch checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />\n \n <Switch\n * label=\"Enable notifications\"\n * helperText=\"Receive email notifications\"\n * checked={notifications}\n * onChange={(e) => setNotifications(e.target.checked)}\n * />\n * ```\n /\nconst Switch = memo(\n forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n {\n size = \"md\",\n label,\n helperText,\n error = false,\n success = false,\n className = \"\",\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n id,\n ...props\n },\n ref,\n ) {\n // Controlled / uncontrolled pattern.\n //\n // Previously this primitive accepted `defaultChecked` via\n // `...props` and forwarded it to the hidden `<input type=\"checkbox\">`\n // (form-integration shim), but the visible `<button role=\"switch\">`\n // bound `aria-checked={checked}` directly. With `checked` undefined\n // in uncontrolled mode, `aria-checked` was missing — axe\n // `aria-required-attr` (critical) flagged every uncontrolled Switch\n // because `role=\"switch\"` REQUIRES `aria-checked`. The visual track\n // and thumb also stuck at the off state because their classes\n // derived from the same `checked` prop.\n //\n // The fix is the standard React pattern: when `checked` is provided\n // the consumer controls state; otherwise `defaultChecked` seeds\n // internal state and the click/keydown handlers update it locally\n // AND notify `onChange`. The visible button, the hidden input, and\n // every classes() consumer all read from a single resolved\n // `currentChecked`.\n const isControlled = checked !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n defaultChecked ?? false,\n );\n const currentChecked = isControlled ? !!checked : internalChecked;\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 switchId = id \|\| `switch-${reactId}`;\n\n const labelId = useMemo(\n () => (label ? `${switchId}-label` : undefined),\n [label, switchId],\n );\n\n const helperId = useMemo(\n () => (helperText ? `${switchId}-helper` : undefined),\n [helperText, switchId],\n );\n\n // Component-scoped tokens (SWITCH_TOKENS) drive track/thumb/translate.\n const config = useMemo(() => getSwitchClasses(size), [size]);\n\n // Memoize focus ring color\n const focusRingColor = useMemo(\n () => \"focus:border-line-focus\".replace(\"focus:border-\", \"focus:ring-\"),\n [],\n );\n\n // Memoize classes — all consume `currentChecked` (the resolved\n // controlled-or-uncontrolled state), not the raw `checked` prop.\n const trackClasses = useMemo(\n () =>\n cn(\n \"relative\",\n \"inline-flex\",\n \"shrink-0\",\n \"cursor-pointer\",\n getRadiusClass(\"full\"),\n \"border-2\",\n \"border-transparent\",\n getAnimationClass(\"base\"),\n \"focus:outline-none\",\n \"focus:ring-2\",\n focusRingColor,\n \"focus:ring-offset-2\",\n config.track,\n currentChecked ? \"bg-surface-brand\" : \"bg-surface-muted\",\n // Border feedback only shows in the off state — the on-state\n // brand background already saturates the track and overrides\n // any colored outline visually. Error wins over success.\n error && !currentChecked && \"border-error\",\n !error && success && !currentChecked && \"border-success\",\n disabled && \"opacity-50 cursor-not-allowed\",\n className,\n ),\n [\n focusRingColor,\n config.track,\n currentChecked,\n error,\n success,\n disabled,\n className,\n ],\n );\n\n const thumbClasses = useMemo(\n () =>\n cn(\n \"pointer-events-none\",\n \"inline-block\",\n getRadiusClass(\"full\"),\n \"bg-surface-base\",\n \"shadow\",\n \"transform\",\n getAnimationClass(\"base\"),\n config.thumb,\n currentChecked ? config.translate : \"translate-x-0\",\n ),\n [config.thumb, config.translate, currentChecked],\n );\n\n return (\n <div className={cn(\"flex\", \"items-start\", getSpacingClass(\"md\", \"gap\"))}>\n <div className=\"flex items-center\">\n <button\n type=\"button\"\n className={trackClasses}\n role=\"switch\"\n aria-checked={currentChecked}\n aria-labelledby={labelId}\n aria-describedby={helperId}\n disabled={disabled}\n onClick={useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) return;\n const next = !currentChecked;\n if (!isControlled) setInternalChecked(next);\n if (onChange) {\n const syntheticEvent = {\n ...e,\n target: { ...e.target, checked: next },\n currentTarget: { ...e.currentTarget, checked: next },\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n },\n [disabled, onChange, currentChecked, isControlled],\n )}\n onKeyDown={useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n if (e.key !== \"Enter\" && e.key !== \" \") return;\n e.preventDefault();\n const next = !currentChecked;\n if (!isControlled) setInternalChecked(next);\n if (onChange) {\n const syntheticEvent = {\n ...e,\n target: { ...e.target, checked: next },\n currentTarget: { ...e.currentTarget, checked: next },\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n },\n [disabled, onChange, currentChecked, isControlled],\n )}\n >\n <span className={thumbClasses} />\n </button>\n {/ Hidden checkbox for form-data integration. Follows the\n resolved `currentChecked` so submission picks up the\n correct value in both controlled and uncontrolled modes.\n `aria-hidden` + tabIndex=-1 keep it out of AT and Tab\n order — interaction happens on the visible button above.\n The onChange is a no-op fallback (real state changes\n flow through the button's handler); React requires it\n alongside `checked` to suppress the controlled-input\n warning when the consumer doesn't supply onChange. */}\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n checked={currentChecked}\n onChange={onChange ?? (() => {})}\n disabled={disabled}\n className=\"sr-only\"\n aria-hidden=\"true\"\n tabIndex={-1}\n {...props}\n />\n </div>\n {(label \|\| helperText) && (\n <div className=\"flex-1\">\n {label && (\n <label\n id={labelId}\n htmlFor={switchId}\n className={cn(\n \"block\",\n getTypographySize(\"bodySmall\"),\n getTypographyWeight(\"label\"),\n error ? \"text-fg-error\" : \"text-fg-primary\",\n disabled ? \"opacity-50\" : \"cursor-pointer\",\n )}\n >\n {label}\n </label>\n )}\n {helperText && (\n <p\n id={helperId}\n className={cn(\n getSpacingClass(\"xs\", \"mt\"),\n getTypographySize(\"bodySmall\"),\n error\n ? \"text-fg-error\"\n : success\n ? \"text-fg-success\"\n : \"text-fg-secondary\",\n )}\n >\n {helperText}\n </p>\n )}\n </div>\n )}\n </div>\n );\n }),\n);\n\nSwitch.displayName = \"Switch\";\n\nexport default Switch;\n"],"names":["Switch","memo","forwardRef","_a","ref","_b","size","label","helperText","error","success","className","disabled","checked","defaultChecked","onChange","id","props","__objRest","isControlled","internalChecked","setInternalChecked","useState","currentChecked","reactId","useId","switchId","labelId","useMemo","helperId","config","getSwitchClasses","focusRingColor","trackClasses","cn","getRadiusClass","getAnimationClass","thumbClasses","jsxs","getSpacingClass","jsx","useCallback","e","next","syntheticEvent","__spreadProps","__spreadValues","getTypographySize","getTypographyWeight"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../../../src/ui/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n HTMLAttributes,\n ReactNode,\n KeyboardEvent,\n FocusEvent,\n ReactElement,\n} from \"react\";\nimport {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useId,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { getBorderWidthClass } from \"../../tokens/borders\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { cn, cva, mergeRefs } from \"../../utils\";\n\nexport interface TooltipProps extends HTMLAttributes<HTMLDivElement> {\n content: string;\n children: ReactNode;\n position?: \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n delay?: number;\n \"aria-label\"?: string;\n /*\n When true, the tooltip wrapper won't interfere with absolute positioning of children.\n * The wrapper will use `position: static` instead of `position: relative`.\n /\n preservePositioning?: boolean;\n}\n\n/\n Tooltip Component\n \n A tooltip component for displaying additional information on hover.\n * Follows Atomic Design principles as an Atom component.\n \n @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n * <Button>Hover me</Button>\n * </Tooltip>\n * ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n {\n content,\n children,\n position = \"top\",\n delay = 200,\n className = \"\",\n \"aria-label\": _ariaLabel,\n preservePositioning = false,\n ...props\n },\n ref,\n) {\n const [isVisible, setIsVisible] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLElement \| null>(null);\n\n // Stable per-instance ID for the tooltip popup. useId is SSR-safe and\n // stable across renders — the previous Math.random() approach generated\n // a fresh ID on every render, which silently breaks the\n // aria-describedby <-> tooltip id pairing observed by assistive tech\n // across re-renders.\n const tooltipId = `tooltip-${useId()}`;\n\n const handleMouseEnter = () => {\n const id = setTimeout(() => {\n setIsVisible(true);\n }, delay);\n timeoutIdRef.current = id;\n };\n\n const handleMouseLeave = () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n setIsVisible(false);\n };\n\n const handleFocus = () => {\n // Show tooltip immediately on focus (no delay for keyboard users)\n setIsVisible(true);\n };\n\n const handleBlur = () => {\n setIsVisible(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n setIsVisible(false);\n triggerRef.current?.blur();\n }\n };\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n };\n }, []);\n\n // Close tooltip when clicking outside\n useEffect(() => {\n if (!isVisible) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n tooltipRef.current &&\n !tooltipRef.current.contains(event.target as Node) &&\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n setIsVisible(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isVisible]);\n\n // Helper to get arrow border color\n // Uses complete classes that Tailwind can detect\n const getArrowBorderColor = (\n position: \"top\" \| \"bottom\" \| \"left\" \| \"right\",\n ): string => {\n // Arrow follows the tooltip body's surface-inverse color so the\n // triangle's point visually merges into the body.\n const borderMap: Record<\"top\" \| \"bottom\" \| \"left\" \| \"right\", string> = {\n top: \"border-t-surface-inverse\",\n bottom: \"border-b-surface-inverse\",\n left: \"border-l-surface-inverse\",\n right: \"border-r-surface-inverse\",\n };\n return borderMap[position];\n };\n\n // Tooltip variants using CVA\n const tooltipVariants = cva(\n cn(\n \"absolute\",\n getZIndexClass(\"tooltip\"),\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"caption\"),\n \"text-fg-inverse\",\n \"bg-surface-inverse\",\n getRadiusClass(\"md\"),\n getShadowClass(\"lg\"),\n \"whitespace-nowrap\",\n ),\n {\n variants: {\n position: {\n top: cn(\n \"bottom-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getSpacingClass(\"sm\", \"mb\"),\n ),\n bottom: cn(\n \"top-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getSpacingClass(\"sm\", \"mt\"),\n ),\n left: cn(\n \"right-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getSpacingClass(\"sm\", \"mr\"),\n ),\n right: cn(\n \"left-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getSpacingClass(\"sm\", \"ml\"),\n ),\n },\n },\n defaultVariants: {\n position: \"top\",\n },\n },\n );\n\n const arrowVariants = cva(\n cn(\n \"absolute\",\n \"w-0\",\n \"h-0\",\n getBorderWidthClass(\"thick\"),\n \"border-transparent\",\n ),\n {\n variants: {\n position: {\n top: cn(\n \"top-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getArrowBorderColor(\"top\"),\n ),\n bottom: cn(\n \"bottom-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getArrowBorderColor(\"bottom\"),\n ),\n left: cn(\n \"left-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getArrowBorderColor(\"left\"),\n ),\n right: cn(\n \"right-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getArrowBorderColor(\"right\"),\n ),\n },\n },\n defaultVariants: {\n position: \"top\",\n },\n },\n );\n\n // Clone children to add accessibility props\n const childrenWithProps = isValidElement(children)\n ? (() => {\n const childElement = children as ReactElement<\n HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }\n >;\n const existingProps = childElement.props;\n const existingRef = existingProps.ref;\n\n return cloneElement(childElement, {\n ref: mergeRefs<HTMLElement>(triggerRef, existingRef),\n \"aria-describedby\": isVisible\n ? tooltipId\n : existingProps[\"aria-describedby\"],\n onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n handleMouseEnter();\n existingProps.onMouseEnter?.(e);\n },\n onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n handleMouseLeave();\n existingProps.onMouseLeave?.(e);\n },\n onFocus: (e: FocusEvent<HTMLElement>) => {\n handleFocus();\n existingProps.onFocus?.(e);\n },\n onBlur: (e: FocusEvent<HTMLElement>) => {\n handleBlur();\n existingProps.onBlur?.(e);\n },\n onKeyDown: (e: KeyboardEvent<HTMLElement>) => {\n handleKeyDown(e);\n existingProps.onKeyDown?.(e);\n },\n } as Partial<typeof existingProps>);\n })()\n : children;\n\n // When preservePositioning is true, use static positioning to avoid interfering\n // with absolute positioned children. The tooltip will still be positioned correctly\n // using absolute positioning relative to the viewport/nearest positioned ancestor.\n const wrapperClassName = preservePositioning\n ? cn(\"static\", \"inline-block\", className)\n : cn(\"relative\", \"inline-block\", className);\n\n return (\n <div ref={ref} className={wrapperClassName} {...props}>\n {childrenWithProps}\n {isVisible && (\n <div\n ref={tooltipRef}\n id={tooltipId}\n className={cn(tooltipVariants({ position }))}\n role=\"tooltip\"\n aria-live=\"polite\"\n >\n {content}\n <div className={cn(arrowVariants({ position }))} aria-hidden=\"true\" />\n </div>\n )}\n </div>\n );\n});\n\nTooltip.displayName = \"Tooltip\";\n\nexport default Tooltip;\n"],"names":["Tooltip","forwardRef","_a","ref","_b","content","children","position","delay","className","_ariaLabel","preservePositioning","props","__objRest","isVisible","setIsVisible","useState","timeoutIdRef","useRef","tooltipRef","triggerRef","tooltipId","useId","handleMouseEnter","id","handleMouseLeave","handleFocus","handleBlur","handleKeyDown","e","useEffect","handleClickOutside","event","getArrowBorderColor","tooltipVariants","cva","cn","getZIndexClass","getSpacingClass","getTypographySize","getRadiusClass","getShadowClass","arrowVariants","getBorderWidthClass","childrenWithProps","isValidElement","childElement","existingProps","existingRef","cloneElement","mergeRefs","wrapperClassName","__spreadProps","__spreadValues","jsxs","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../../../src/ui/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n HTMLAttributes,\n ReactNode,\n KeyboardEvent,\n FocusEvent,\n ReactElement,\n} from \"react\";\nimport {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useId,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { getBorderWidthClass } from \"../../tokens/borders\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { cn, cva, mergeRefs } from \"../../utils\";\n\nexport interface TooltipProps extends HTMLAttributes<HTMLDivElement> {\n content: string;\n children: ReactNode;\n position?: \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n delay?: number;\n \"aria-label\"?: string;\n /*\n When true, the tooltip wrapper won't interfere with absolute positioning of children.\n * The wrapper will use `position: static` instead of `position: relative`.\n /\n preservePositioning?: boolean;\n}\n\n/\n Tooltip Component\n \n A tooltip component for displaying additional information on hover.\n \n @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n * <Button>Hover me</Button>\n * </Tooltip>\n * ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n {\n content,\n children,\n position = \"top\",\n delay = 200,\n className = \"\",\n \"aria-label\": _ariaLabel,\n preservePositioning = false,\n ...props\n },\n ref,\n) {\n const [isVisible, setIsVisible] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLElement \| null>(null);\n\n // Stable per-instance ID for the tooltip popup. useId is SSR-safe and\n // stable across renders — the previous Math.random() approach generated\n // a fresh ID on every render, which silently breaks the\n // aria-describedby <-> tooltip id pairing observed by assistive tech\n // across re-renders.\n const tooltipId = `tooltip-${useId()}`;\n\n const handleMouseEnter = () => {\n const id = setTimeout(() => {\n setIsVisible(true);\n }, delay);\n timeoutIdRef.current = id;\n };\n\n const handleMouseLeave = () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n setIsVisible(false);\n };\n\n const handleFocus = () => {\n // Show tooltip immediately on focus (no delay for keyboard users)\n setIsVisible(true);\n };\n\n const handleBlur = () => {\n setIsVisible(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n setIsVisible(false);\n triggerRef.current?.blur();\n }\n };\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n };\n }, []);\n\n // Close tooltip when clicking outside\n useEffect(() => {\n if (!isVisible) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n tooltipRef.current &&\n !tooltipRef.current.contains(event.target as Node) &&\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n setIsVisible(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isVisible]);\n\n // Helper to get arrow border color\n // Uses complete classes that Tailwind can detect\n const getArrowBorderColor = (\n position: \"top\" \| \"bottom\" \| \"left\" \| \"right\",\n ): string => {\n // Arrow follows the tooltip body's surface-inverse color so the\n // triangle's point visually merges into the body.\n const borderMap: Record<\"top\" \| \"bottom\" \| \"left\" \| \"right\", string> = {\n top: \"border-t-surface-inverse\",\n bottom: \"border-b-surface-inverse\",\n left: \"border-l-surface-inverse\",\n right: \"border-r-surface-inverse\",\n };\n return borderMap[position];\n };\n\n // Tooltip variants using CVA\n const tooltipVariants = cva(\n cn(\n \"absolute\",\n getZIndexClass(\"tooltip\"),\n getSpacingClass(\"sm\", \"px\"),\n getSpacingClass(\"xs\", \"py\"),\n getTypographySize(\"caption\"),\n \"text-fg-inverse\",\n \"bg-surface-inverse\",\n getRadiusClass(\"md\"),\n getShadowClass(\"lg\"),\n \"whitespace-nowrap\",\n ),\n {\n variants: {\n position: {\n top: cn(\n \"bottom-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getSpacingClass(\"sm\", \"mb\"),\n ),\n bottom: cn(\n \"top-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getSpacingClass(\"sm\", \"mt\"),\n ),\n left: cn(\n \"right-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getSpacingClass(\"sm\", \"mr\"),\n ),\n right: cn(\n \"left-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getSpacingClass(\"sm\", \"ml\"),\n ),\n },\n },\n defaultVariants: {\n position: \"top\",\n },\n },\n );\n\n const arrowVariants = cva(\n cn(\n \"absolute\",\n \"w-0\",\n \"h-0\",\n getBorderWidthClass(\"thick\"),\n \"border-transparent\",\n ),\n {\n variants: {\n position: {\n top: cn(\n \"top-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getArrowBorderColor(\"top\"),\n ),\n bottom: cn(\n \"bottom-full\",\n \"left-1/2\",\n \"transform\",\n \"-translate-x-1/2\",\n getArrowBorderColor(\"bottom\"),\n ),\n left: cn(\n \"left-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getArrowBorderColor(\"left\"),\n ),\n right: cn(\n \"right-full\",\n \"top-1/2\",\n \"transform\",\n \"-translate-y-1/2\",\n getArrowBorderColor(\"right\"),\n ),\n },\n },\n defaultVariants: {\n position: \"top\",\n },\n },\n );\n\n // Clone children to add accessibility props\n const childrenWithProps = isValidElement(children)\n ? (() => {\n const childElement = children as ReactElement<\n HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }\n >;\n const existingProps = childElement.props;\n const existingRef = existingProps.ref;\n\n return cloneElement(childElement, {\n ref: mergeRefs<HTMLElement>(triggerRef, existingRef),\n \"aria-describedby\": isVisible\n ? tooltipId\n : existingProps[\"aria-describedby\"],\n onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n handleMouseEnter();\n existingProps.onMouseEnter?.(e);\n },\n onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n handleMouseLeave();\n existingProps.onMouseLeave?.(e);\n },\n onFocus: (e: FocusEvent<HTMLElement>) => {\n handleFocus();\n existingProps.onFocus?.(e);\n },\n onBlur: (e: FocusEvent<HTMLElement>) => {\n handleBlur();\n existingProps.onBlur?.(e);\n },\n onKeyDown: (e: KeyboardEvent<HTMLElement>) => {\n handleKeyDown(e);\n existingProps.onKeyDown?.(e);\n },\n } as Partial<typeof existingProps>);\n })()\n : children;\n\n // When preservePositioning is true, use static positioning to avoid interfering\n // with absolute positioned children. The tooltip will still be positioned correctly\n // using absolute positioning relative to the viewport/nearest positioned ancestor.\n const wrapperClassName = preservePositioning\n ? cn(\"static\", \"inline-block\", className)\n : cn(\"relative\", \"inline-block\", className);\n\n return (\n <div ref={ref} className={wrapperClassName} {...props}>\n {childrenWithProps}\n {isVisible && (\n <div\n ref={tooltipRef}\n id={tooltipId}\n className={cn(tooltipVariants({ position }))}\n role=\"tooltip\"\n aria-live=\"polite\"\n >\n {content}\n <div className={cn(arrowVariants({ position }))} aria-hidden=\"true\" />\n </div>\n )}\n </div>\n );\n});\n\nTooltip.displayName = \"Tooltip\";\n\nexport default Tooltip;\n"],"names":["Tooltip","forwardRef","_a","ref","_b","content","children","position","delay","className","_ariaLabel","preservePositioning","props","__objRest","isVisible","setIsVisible","useState","timeoutIdRef","useRef","tooltipRef","triggerRef","tooltipId","useId","handleMouseEnter","id","handleMouseLeave","handleFocus","handleBlur","handleKeyDown","e","useEffect","handleClickOutside","event","getArrowBorderColor","tooltipVariants","cva","cn","getZIndexClass","getSpacingClass","getTypographySize","getRadiusClass","getShadowClass","arrowVariants","getBorderWidthClass","childrenWithProps","isValidElement","childElement","existingProps","existingRef","cloneElement","mergeRefs","wrapperClassName","__spreadProps","__spreadValues","jsxs","jsx"],"mappings":"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"}

package/dist/granular/ui/providers/DialogContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogContext.js","sources":["../../../../src/ui/providers/DialogContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport interface DialogContextValue {\n isOpen: boolean;\n onOpenChange: (open: boolean) => void;\n onClose: () => void;\n titleId?: string;\n descriptionId?: string;\n}\n\nexport const DialogContext = createContext<DialogContextValue \| undefined>(\n undefined,\n);\n\nexport function useDialogContext(): DialogContextValue {\n const context = useContext(DialogContext);\n if (!context) {\n throw new Error(\"Dialog components must be used within a Dialog component\");\n }\n return context;\n}\n\nexport function useDialogContextOptional(): DialogContextValue \| undefined {\n return useContext(DialogContext);\n}\n"],"names":["DialogContext","createContext","useDialogContext","context","useContext","useDialogContextOptional"],"mappings":";;~~AAYO~~,MAAMA,IAAgBC;AAAA,EAC3B;AACF;AAEO,SAASC,IAAuC;AACrD,QAAMC,IAAUC,EAAWJ,CAAa;AACxC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,0DAA0D;AAE5E,SAAOA;AACT;AAEO,SAASE,IAA2D;AACzE,SAAOD,EAAWJ,CAAa;AACjC;"}
1	+ {"version":3,"file":"DialogContext.js","sources":["../../../../src/ui/providers/DialogContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport interface DialogContextValue {\n isOpen: boolean;\n onOpenChange: (open: boolean) => void;\n onClose: () => void;\n titleId?: string;\n descriptionId?: string;\n /** True while at least one Dialog.Title is mounted. /\n hasTitle: boolean;\n /* True while at least one Dialog.Description is mounted. /\n hasDescription: boolean;\n /* Register a mounted Title; returns an unregister cleanup. /\n registerTitle: () => () => void;\n /* Register a mounted Description; returns an unregister cleanup. */\n registerDescription: () => () => void;\n}\n\nexport const DialogContext = createContext<DialogContextValue \| undefined>(\n undefined,\n);\n\nexport function useDialogContext(): DialogContextValue {\n const context = useContext(DialogContext);\n if (!context) {\n throw new Error(\"Dialog components must be used within a Dialog component\");\n }\n return context;\n}\n\nexport function useDialogContextOptional(): DialogContextValue \| undefined {\n return useContext(DialogContext);\n}\n"],"names":["DialogContext","createContext","useDialogContext","context","useContext","useDialogContextOptional"],"mappings":";;AAoBO,MAAMA,IAAgBC;AAAA,EAC3B;AACF;AAEO,SAASC,IAAuC;AACrD,QAAMC,IAAUC,EAAWJ,CAAa;AACxC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,0DAA0D;AAE5E,SAAOA;AACT;AAEO,SAASE,IAA2D;AACzE,SAAOD,EAAWJ,CAAa;AACjC;"}

package/dist/granular/ui/providers/DialogProvider.js CHANGED Viewed

@@ -1,32 +1,36 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
-import { useState as v, useEffect as y } from "react";
-import { DialogContext as a } from "./DialogContext.js";
-import { useFocusRestore as p } from "../hooks/useFocusRestore.js";
-function P({
-  children: i,
+import { jsx as C } from "react/jsx-runtime";
+import { useState as r, useCallback as l, useEffect as T } from "react";
+import { DialogContext as w } from "./DialogContext.js";
+import { useFocusRestore as P } from "../hooks/useFocusRestore.js";
+function F({
+  children: u,
   open: e,
-  defaultOpen: l = !1,
-  onOpenChange: t,
-  titleId: f,
-  descriptionId: u
+  defaultOpen: f = !1,
+  onOpenChange: s,
+  titleId: d,
+  descriptionId: m
 }) {
-  const [c, d] = v(l), o = e !== void 0 ? e : c, s = (r) => {
-    e === void 0 && d(r), t == null || t(r);
+  const [a, p] = r(f), [v, i] = r(0), [y, n] = r(0), D = l(() => (i((t) => t + 1), () => i((t) => t - 1)), []), b = l(() => (n((t) => t + 1), () => n((t) => t - 1)), []), o = e !== void 0 ? e : a, c = (t) => {
+    e === void 0 && p(t), s == null || s(t);
   };
-  p(o), y(() => (o ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  P(o), T(() => (o ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
   }), [o]);
-  const m = {
+  const x = {
     isOpen: o,
-    onOpenChange: s,
-    onClose: () => s(!1),
-    titleId: f,
-    descriptionId: u
+    onOpenChange: c,
+    onClose: () => c(!1),
+    titleId: d,
+    descriptionId: m,
+    hasTitle: v > 0,
+    hasDescription: y > 0,
+    registerTitle: D,
+    registerDescription: b
   };
-  return /* @__PURE__ */ n(a.Provider, { value: m, children: i });
+  return /* @__PURE__ */ C(w.Provider, { value: x, children: u });
 }
 export {
-  P as DialogProvider
+  F as DialogProvider
 };
 //# sourceMappingURL=DialogProvider.js.map

package/dist/granular/ui/providers/DialogProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogProvider.js","sources":["../../../../src/ui/providers/DialogProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, type ReactNode } from \"react\";\nimport { DialogContext, type DialogContextValue } from \"./DialogContext\";\nimport { useFocusRestore } from \"../hooks/useFocusRestore\";\n\nexport interface DialogProviderProps {\n children: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n titleId?: string;\n descriptionId?: string;\n}\n\nexport function DialogProvider({\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n titleId,\n descriptionId,\n}: DialogProviderProps) {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n // Use controlled or uncontrolled state\n const isOpen =\n controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;\n const setIsOpen = (newOpen: boolean) => {\n if (controlledOpen === undefined) {\n setUncontrolledOpen(newOpen);\n }\n onOpenChange?.(newOpen);\n };\n\n // Modal focus restore — consumed from the shared hook introduced in\n // Phase 3 PR 1. Replaces an inline `previousActiveElement` ref +\n // `setTimeout(0)` block that this hook now owns. Timing identity is\n // preserved (the hook uses setTimeout(0)), so Dialog.test.tsx's\n // restore tests do not need to change.\n useFocusRestore(isOpen);\n\n // Prevent body scroll when dialog is open\n useEffect(() => {\n if (isOpen) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n return () => {\n document.body.style.overflow = \"\";\n };\n }, [isOpen]);\n\n const contextValue: DialogContextValue = {\n isOpen,\n onOpenChange: setIsOpen,\n onClose: () => setIsOpen(false),\n titleId,\n descriptionId,\n };\n\n return (\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n );\n}\n"],"names":["DialogProvider","children","controlledOpen","defaultOpen","onOpenChange","titleId","descriptionId","uncontrolledOpen","setUncontrolledOpen","useState","isOpen","setIsOpen","newOpen","useFocusRestore","useEffect","contextValue","DialogContext"],"mappings":";;;;;AAeO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AACF,GAAwB;AACtB,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAASN,CAAW,~~GAG9DO~~,~~IACJR~~,MAAmB,SAAYA,IAAiBK,~~GAC5CI~~,IAAY,CAACC,MAAqB;AACtC,~~IAAIV~~,MAAmB,UACrBM,~~EAAoBI~~,CAAO,~~GAE7BR~~,KAAA,QAAAA,~~EAAeQ~~;AAAA,EACjB;AAOA,EAAAC,EAAgBH,CAAM,GAGtBI,EAAU,OACJJ,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW,IAE1B,MAAM;AACX,aAAS,KAAK,MAAM,WAAW;AAAA,EACjC,IACC,CAACA,CAAM,CAAC;AAEX,QAAMK,IAAmC;AAAA,IACvC,QAAAL;AAAA,IACA,cAAcC;AAAA,IACd,SAAS,MAAMA,EAAU,EAAK;AAAA,IAC9B,~~SAAAN~~;AAAA,IACA,eAAAC;AAAA,EAAA;AAGF,~~2BACGU~~,EAAc,UAAd,EAAuB,OAAOD,GAC5B,~~UAAAd~~,GACH;AAEJ;"}
1	+ {"version":3,"file":"DialogProvider.js","sources":["../../../../src/ui/providers/DialogProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useCallback, type ReactNode } from \"react\";\nimport { DialogContext, type DialogContextValue } from \"./DialogContext\";\nimport { useFocusRestore } from \"../hooks/useFocusRestore\";\n\nexport interface DialogProviderProps {\n children: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n titleId?: string;\n descriptionId?: string;\n}\n\nexport function DialogProvider({\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n titleId,\n descriptionId,\n}: DialogProviderProps) {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n // Presence tracking so DialogContent only emits aria-labelledby /\n // aria-describedby when a Title / Description is actually mounted.\n // Without this the dialog always pointed those IDREFs at ids that\n // only exist when the corresponding subcomponent is rendered — a\n // dangling reference for every title-only (or bare) dialog.\n const [titleCount, setTitleCount] = useState(0);\n const [descriptionCount, setDescriptionCount] = useState(0);\n\n const registerTitle = useCallback(() => {\n setTitleCount((c) => c + 1);\n return () => setTitleCount((c) => c - 1);\n }, []);\n const registerDescription = useCallback(() => {\n setDescriptionCount((c) => c + 1);\n return () => setDescriptionCount((c) => c - 1);\n }, []);\n\n // Use controlled or uncontrolled state\n const isOpen =\n controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;\n const setIsOpen = (newOpen: boolean) => {\n if (controlledOpen === undefined) {\n setUncontrolledOpen(newOpen);\n }\n onOpenChange?.(newOpen);\n };\n\n // Modal focus restore — consumed from the shared hook introduced in\n // Phase 3 PR 1. Replaces an inline `previousActiveElement` ref +\n // `setTimeout(0)` block that this hook now owns. Timing identity is\n // preserved (the hook uses setTimeout(0)), so Dialog.test.tsx's\n // restore tests do not need to change.\n useFocusRestore(isOpen);\n\n // Prevent body scroll when dialog is open\n useEffect(() => {\n if (isOpen) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n return () => {\n document.body.style.overflow = \"\";\n };\n }, [isOpen]);\n\n const contextValue: DialogContextValue = {\n isOpen,\n onOpenChange: setIsOpen,\n onClose: () => setIsOpen(false),\n titleId,\n descriptionId,\n hasTitle: titleCount > 0,\n hasDescription: descriptionCount > 0,\n registerTitle,\n registerDescription,\n };\n\n return (\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n );\n}\n"],"names":["DialogProvider","children","controlledOpen","defaultOpen","onOpenChange","titleId","descriptionId","uncontrolledOpen","setUncontrolledOpen","useState","titleCount","setTitleCount","descriptionCount","setDescriptionCount","registerTitle","useCallback","c","registerDescription","isOpen","setIsOpen","newOpen","useFocusRestore","useEffect","contextValue","DialogContext"],"mappings":";;;;;AAeO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AACF,GAAwB;AACtB,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAASN,CAAW,GAO9D,CAACO,GAAYC,CAAa,IAAIF,EAAS,CAAC,GACxC,CAACG,GAAkBC,CAAmB,IAAIJ,EAAS,CAAC,GAEpDK,IAAgBC,EAAY,OAChCJ,EAAc,CAACK,MAAMA,IAAI,CAAC,GACnB,MAAML,EAAc,CAACK,MAAMA,IAAI,CAAC,IACtC,CAAA,CAAE,GACCC,IAAsBF,EAAY,OACtCF,EAAoB,CAACG,MAAMA,IAAI,CAAC,GACzB,MAAMH,EAAoB,CAACG,MAAMA,IAAI,CAAC,IAC5C,CAAA,CAAE,GAGCE,IACJhB,MAAmB,SAAYA,IAAiBK,GAC5CY,IAAY,CAACC,MAAqB;AACtC,IAAIlB,MAAmB,UACrBM,EAAoBY,CAAO,GAE7BhB,KAAA,QAAAA,EAAegB;AAAA,EACjB;AAOA,EAAAC,EAAgBH,CAAM,GAGtBI,EAAU,OACJJ,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW,IAE1B,MAAM;AACX,aAAS,KAAK,MAAM,WAAW;AAAA,EACjC,IACC,CAACA,CAAM,CAAC;AAEX,QAAMK,IAAmC;AAAA,IACvC,QAAAL;AAAA,IACA,cAAcC;AAAA,IACd,SAAS,MAAMA,EAAU,EAAK;AAAA,IAC9B,SAAAd;AAAA,IACA,eAAAC;AAAA,IACA,UAAUI,IAAa;AAAA,IACvB,gBAAgBE,IAAmB;AAAA,IACnC,eAAAE;AAAA,IACA,qBAAAG;AAAA,EAAA;AAGF,2BACGO,EAAc,UAAd,EAAuB,OAAOD,GAC5B,UAAAtB,GACH;AAEJ;"}