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

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

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

Files changed (150) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\nimport {\n getSpacingClass,\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n items: BreadcrumbItem[];\n separator?: string;\n}\n\n/*\n Breadcrumb Component\n \n A breadcrumb navigation component for hierarchical navigation.\n * Follows Atomic Design principles as a Molecule component.\n \n @example\n * ```tsx\n * <Breadcrumb\n * items={[\n * { label: \"Home\", href: \"/\" },\n * { label: \"Epics\", href: \"/epics\" },\n * { label: \"Epic Details\" }\n * ]}\n * />\n * ```\n */\nexport default function Breadcrumb({\n items,\n separator = \"/\",\n className = \"\",\n ...props\n}: Props) {\n const baseClasses = [\n \"flex\",\n \"items-center\",\n getSpacingClass(\"sm\", \"space-x\"),\n getTypographySize(\"bodySmall\"),\n ];\n\n const classes = cn(...baseClasses, className);\n\n return (\n <nav aria-label=\"Breadcrumb\" className={classes} {...props}>\n <ol\n className={cn(\"flex\", \"items-center\", getSpacingClass(\"sm\", \"space-x\"))}\n >\n {items.map((item, index) => {\n const isLast = index === items.length - 1;\n\n return (\n <li key={index} className=\"flex items-center\">\n {index > 0 && (\n <span\n className={cn(\n getSpacingClass(\"sm\", \"mx\"),\n \"text-fg-tertiary\",\n )}\n aria-hidden=\"true\"\n >\n {separator}\n </span>\n )}\n {isLast ? (\n <span\n className={cn(\n \"text-fg-primary\",\n getTypographyWeight(\"label\"),\n )}\n aria-current=\"page\"\n >\n {item.label}\n </span>\n ) : item.href ? (\n <a\n href={item.href}\n className={cn(\n \"inline-flex\",\n \"items-center\",\n getSpacingClass(\"xs\", \"px\"),\n getSpacingClass(\"xs\", \"pt\"),\n \"border-b-2\",\n \"border-transparent\",\n getTypographySize(\"bodySmall\"),\n getTypographyWeight(\"label\"),\n \"transition-colors\",\n \"text-fg-secondary\",\n \"hover:border-line-emphasis\",\n \"hover:text-fg-primary\",\n )}\n >\n {item.label}\n </a>\n ) : (\n <span className=\"text-fg-secondary\">{item.label}</span>\n )}\n </li>\n );\n })}\n </ol>\n </nav>\n );\n}\n"],"names":["Breadcrumb","_a","_b","items","separator","className","props","__objRest","baseClasses","getSpacingClass","getTypographySize","classes","cn","__spreadProps","__spreadValues","jsx","item","index","isLast","jsxs","getTypographyWeight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqCA~~,SAAwBA,EAAWC,GAKzB;AALyB,MAAAC,IAAAD,GACjC;AAAA,WAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,MAHqBH,GAI9BI,IAAAC,EAJ8BL,GAI9B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACAC,EAAgB,MAAM,SAAS;AAAA,IAC/BC,EAAkB,WAAW;AAAA,EAAA,GAGzBC,IAAUC,EAAG,GAAGJ,GAAaH,CAAS;AAE5C,2BACG,OAAAQ,EAAAC,EAAA,EAAI,cAAW,cAAa,WAAWH,KAAaL,IAApD,EACC,UAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH,EAAG,QAAQ,gBAAgBH,EAAgB,MAAM,SAAS,CAAC;AAAA,MAErE,UAAAN,EAAM,IAAI,CAACa,GAAMC,MAAU;AAC1B,cAAMC,IAASD,MAAUd,EAAM,SAAS;AAExC,eACE,gBAAAgB,EAAC,MAAA,EAAe,WAAU,qBACvB,UAAA;AAAA,UAAAF,IAAQ,KACP,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACTH,EAAgB,MAAM,IAAI;AAAA,gBAC1B;AAAA,cAAA;AAAA,cAEF,eAAY;AAAA,cAEX,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJc,IACC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACT;AAAA,gBACAQ,EAAoB,OAAO;AAAA,cAAA;AAAA,cAE7B,gBAAa;AAAA,cAEZ,UAAAJ,EAAK;AAAA,YAAA;AAAA,UAAA,IAENA,EAAK,OACP,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAMC,EAAK;AAAA,cACX,WAAWJ;AAAA,gBACT;AAAA,gBACA;AAAA,gBACAH,EAAgB,MAAM,IAAI;AAAA,gBAC1BA,EAAgB,MAAM,IAAI;AAAA,gBAC1B;AAAA,gBACA;AAAA,gBACAC,EAAkB,WAAW;AAAA,gBAC7BU,EAAoB,OAAO;AAAA,gBAC3B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAAJ,EAAK;AAAA,YAAA;AAAA,UAAA,IAGR,gBAAAD,EAAC,QAAA,EAAK,WAAU,qBAAqB,YAAK,MAAA,CAAM;AAAA,QAAA,EAAA,GA3C3CE,CA6CT;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA,IAEL;AAEJ;"}
1	+ {"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\nimport {\n getSpacingClass,\n getTypographySize,\n getTypographyWeight,\n} from \"../../tokens\";\n\nexport interface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n items: BreadcrumbItem[];\n separator?: string;\n}\n\n/*\n Breadcrumb Component\n \n A breadcrumb navigation component for hierarchical navigation.\n \n @example\n * ```tsx\n * <Breadcrumb\n * items={[\n * { label: \"Home\", href: \"/\" },\n * { label: \"Epics\", href: \"/epics\" },\n * { label: \"Epic Details\" }\n * ]}\n * />\n * ```\n */\nexport default function Breadcrumb({\n items,\n separator = \"/\",\n className = \"\",\n ...props\n}: Props) {\n const baseClasses = [\n \"flex\",\n \"items-center\",\n getSpacingClass(\"sm\", \"space-x\"),\n getTypographySize(\"bodySmall\"),\n ];\n\n const classes = cn(...baseClasses, className);\n\n return (\n <nav aria-label=\"Breadcrumb\" className={classes} {...props}>\n <ol\n className={cn(\"flex\", \"items-center\", getSpacingClass(\"sm\", \"space-x\"))}\n >\n {items.map((item, index) => {\n const isLast = index === items.length - 1;\n\n return (\n <li key={index} className=\"flex items-center\">\n {index > 0 && (\n <span\n className={cn(\n getSpacingClass(\"sm\", \"mx\"),\n \"text-fg-tertiary\",\n )}\n aria-hidden=\"true\"\n >\n {separator}\n </span>\n )}\n {isLast ? (\n <span\n className={cn(\n \"text-fg-primary\",\n getTypographyWeight(\"label\"),\n )}\n aria-current=\"page\"\n >\n {item.label}\n </span>\n ) : item.href ? (\n <a\n href={item.href}\n className={cn(\n \"inline-flex\",\n \"items-center\",\n getSpacingClass(\"xs\", \"px\"),\n getSpacingClass(\"xs\", \"pt\"),\n \"border-b-2\",\n \"border-transparent\",\n getTypographySize(\"bodySmall\"),\n getTypographyWeight(\"label\"),\n \"transition-colors\",\n \"text-fg-secondary\",\n \"hover:border-line-emphasis\",\n \"hover:text-fg-primary\",\n )}\n >\n {item.label}\n </a>\n ) : (\n <span className=\"text-fg-secondary\">{item.label}</span>\n )}\n </li>\n );\n })}\n </ol>\n </nav>\n );\n}\n"],"names":["Breadcrumb","_a","_b","items","separator","className","props","__objRest","baseClasses","getSpacingClass","getTypographySize","classes","cn","__spreadProps","__spreadValues","jsx","item","index","isLast","jsxs","getTypographyWeight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAwBA,EAAWC,GAKzB;AALyB,MAAAC,IAAAD,GACjC;AAAA,WAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,MAHqBH,GAI9BI,IAAAC,EAJ8BL,GAI9B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACAC,EAAgB,MAAM,SAAS;AAAA,IAC/BC,EAAkB,WAAW;AAAA,EAAA,GAGzBC,IAAUC,EAAG,GAAGJ,GAAaH,CAAS;AAE5C,2BACG,OAAAQ,EAAAC,EAAA,EAAI,cAAW,cAAa,WAAWH,KAAaL,IAApD,EACC,UAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH,EAAG,QAAQ,gBAAgBH,EAAgB,MAAM,SAAS,CAAC;AAAA,MAErE,UAAAN,EAAM,IAAI,CAACa,GAAMC,MAAU;AAC1B,cAAMC,IAASD,MAAUd,EAAM,SAAS;AAExC,eACE,gBAAAgB,EAAC,MAAA,EAAe,WAAU,qBACvB,UAAA;AAAA,UAAAF,IAAQ,KACP,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACTH,EAAgB,MAAM,IAAI;AAAA,gBAC1B;AAAA,cAAA;AAAA,cAEF,eAAY;AAAA,cAEX,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJc,IACC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACT;AAAA,gBACAQ,EAAoB,OAAO;AAAA,cAAA;AAAA,cAE7B,gBAAa;AAAA,cAEZ,UAAAJ,EAAK;AAAA,YAAA;AAAA,UAAA,IAENA,EAAK,OACP,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAMC,EAAK;AAAA,cACX,WAAWJ;AAAA,gBACT;AAAA,gBACA;AAAA,gBACAH,EAAgB,MAAM,IAAI;AAAA,gBAC1BA,EAAgB,MAAM,IAAI;AAAA,gBAC1B;AAAA,gBACA;AAAA,gBACAC,EAAkB,WAAW;AAAA,gBAC7BU,EAAoB,OAAO;AAAA,gBAC3B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAAJ,EAAK;AAAA,YAAA;AAAA,UAAA,IAGR,gBAAAD,EAAC,QAAA,EAAK,WAAU,qBAAqB,YAAK,MAAA,CAAM;AAAA,QAAA,EAAA,GA3C3CE,CA6CT;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA,IAEL;AAEJ;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../../../../../src/ui/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, type ChangeEvent } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport Input from \"../../primitives/Input/Input\";\nimport Popover from \"../Popover/Popover\";\n\nexport type ColorFormat = \"hex\" \| \"rgb\" \| \"hsl\";\n\nexport interface ColorPickerProps {\n value?: string; // Hex color (e.g., \"#ff0000\")\n defaultValue?: string;\n format?: ColorFormat;\n onChange?: (value: string) => void;\n presets?: string[];\n showInput?: boolean;\n disabled?: boolean;\n label?: string;\n className?: string;\n}\n\n/*\n ColorPicker Component\n \n A color picker component for selecting colors.\n * Supports hex, rgb, and hsl formats with presets.\n * Follows Atomic Design principles as a Molecule component.\n \n @example\n * ```tsx\n * <ColorPicker\n * value=\"#ff0000\"\n * onChange={(color) => console.log(color)}\n * />\n * ```\n /\nexport default function ColorPicker({\n value: controlledValue,\n defaultValue = \"#000000\",\n format: _format = \"hex\",\n onChange,\n presets,\n showInput = true,\n disabled = false,\n label,\n className = \"\",\n}: ColorPickerProps) {\n const [internalValue, setInternalValue] = useState(defaultValue);\n const [rgb, setRgb] = useState({ r: 0, g: 0, b: 0 });\n\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n // Convert hex to RGB\n const hexToRgb = (hex: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : { r: 0, g: 0, b: 0 };\n };\n\n // Convert RGB to hex\n const rgbToHex = (r: number, g: number, b: number) => {\n return (\n \"#\" +\n [r, g, b]\n .map((x) => {\n const hex = x.toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n })\n .join(\"\")\n );\n };\n\n // Update RGB when value changes\n useEffect(() => {\n if (currentValue) {\n const rgbValue = hexToRgb(currentValue);\n setRgb(rgbValue);\n }\n }, [currentValue]);\n\n const handleHexChange = (e: ChangeEvent<HTMLInputElement>) => {\n const hex = e.target.value;\n if (/^#[0-9A-F]{6}$/i.test(hex) \|\| hex === \"\") {\n if (!isControlled) {\n setInternalValue(hex);\n }\n onChange?.(hex);\n if (hex) {\n setRgb(hexToRgb(hex));\n }\n }\n };\n\n const handleRgbChange = (component: \"r\" \| \"g\" \| \"b\", val: number) => {\n const newRgb = { ...rgb, [component]: Math.max(0, Math.min(255, val)) };\n setRgb(newRgb);\n const hex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);\n if (!isControlled) {\n setInternalValue(hex);\n }\n onChange?.(hex);\n };\n\n const defaultPresets = [\n \"#000000\",\n \"#ffffff\",\n \"#ff0000\",\n \"#00ff00\",\n \"#0000ff\",\n \"#ffff00\",\n \"#ff00ff\",\n \"#00ffff\",\n \"#808080\",\n \"#ffa500\",\n ];\n\n const colorPresets = presets \|\| defaultPresets;\n\n const colorPickerContent = (\n <div className={`${getSpacingClass(\"base\", \"p\")} min-w-[280px]`}>\n {/ Color Preview /}\n <div\n className={`\n w-full\n h-32\n ${getRadiusClass(\"md\")}\n ${getShadowClass(\"sm\")}\n ${getSpacingClass(\"base\", \"mb\")}\n border\n border-line-default\n `}\n style={{ backgroundColor: currentValue }}\n />\n\n {/ RGB Sliders /}\n <div\n className={`${getSpacingClass(\"md\", \"space-y\")} ${getSpacingClass(\"base\", \"mb\")}`}\n >\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n Red: {rgb.r}\n </label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"255\"\n value={rgb.r}\n onChange={(e) => handleRgbChange(\"r\", parseInt(e.target.value))}\n disabled={disabled}\n className=\"w-full\"\n />\n </div>\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n Green: {rgb.g}\n </label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"255\"\n value={rgb.g}\n onChange={(e) => handleRgbChange(\"g\", parseInt(e.target.value))}\n disabled={disabled}\n className=\"w-full\"\n />\n </div>\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n Blue: {rgb.b}\n </label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"255\"\n value={rgb.b}\n onChange={(e) => handleRgbChange(\"b\", parseInt(e.target.value))}\n disabled={disabled}\n className=\"w-full\"\n />\n </div>\n </div>\n\n {/ Hex Input /}\n {showInput && (\n <div className={getSpacingClass(\"base\", \"mb\")}>\n <Input\n label=\"Hex\"\n value={currentValue}\n onChange={handleHexChange}\n disabled={disabled}\n placeholder=\"#000000\"\n className=\"font-mono\"\n />\n </div>\n )}\n\n {/ Color Presets */}\n {colorPresets.length > 0 && (\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"sm\", \"mb\")}`}\n >\n Presets\n </label>\n <div className={`grid grid-cols-10 ${getSpacingClass(\"xs\", \"gap\")}`}>\n {colorPresets.map((color, index) => (\n <button\n key={index}\n type=\"button\"\n onClick={() => {\n if (!disabled) {\n if (!isControlled) {\n setInternalValue(color);\n }\n onChange?.(color);\n setRgb(hexToRgb(color));\n }\n }}\n disabled={disabled}\n className={`\n w-6\n h-6\n ${getRadiusClass(\"sm\")}\n border\n border-line-emphasis\n hover:scale-110\n ${getShadowClass(\"sm\")}\n ${currentValue.toLowerCase() === color.toLowerCase() ? \"ring-2 ring-offset-1 ring-line-brand\" : \"\"}\n `}\n style={{ backgroundColor: color }}\n aria-label={`Select color ${color}`}\n />\n ))}\n </div>\n </div>\n )}\n </div>\n );\n\n return (\n <div className={className}>\n <Popover\n trigger={\n <div className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}>\n {label && (\n <label className=\"text-sm font-medium text-fg-secondary\">\n {label}\n </label>\n )}\n <div\n className={`\n w-10\n h-10\n ${getRadiusClass(\"md\")}\n border\n border-line-emphasis\n ${getShadowClass(\"sm\")}\n cursor-pointer\n ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}\n `}\n style={{ backgroundColor: currentValue }}\n />\n {showInput && (\n <Input\n value={currentValue}\n onChange={handleHexChange}\n disabled={disabled}\n placeholder=\"#000000\"\n className=\"w-24 font-mono\"\n />\n )}\n </div>\n }\n placement=\"bottom-start\"\n showCloseButton\n title=\"Pick a Color\"\n >\n {colorPickerContent}\n </Popover>\n </div>\n );\n}\n"],"names":["ColorPicker","controlledValue","defaultValue","_format","onChange","presets","showInput","disabled","label","className","internalValue","setInternalValue","useState","rgb","setRgb","isControlled","currentValue","hexToRgb","hex","result","rgbToHex","r","g","b","x","useEffect","rgbValue","handleHexChange","handleRgbChange","component","val","newRgb","__spreadProps","__spreadValues","colorPresets","colorPickerContent","getSpacingClass","jsx","getRadiusClass","getShadowClass","jsxs","Input","color","index","Popover"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../../../../../src/ui/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, type ChangeEvent } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport Input from \"../../primitives/Input/Input\";\nimport Popover from \"../Popover/Popover\";\n\nexport type ColorFormat = \"hex\" \| \"rgb\" \| \"hsl\";\n\nexport interface ColorPickerProps {\n value?: string; // Hex color (e.g., \"#ff0000\")\n defaultValue?: string;\n format?: ColorFormat;\n onChange?: (value: string) => void;\n presets?: string[];\n showInput?: boolean;\n disabled?: boolean;\n label?: string;\n className?: string;\n}\n\n/*\n ColorPicker Component\n \n A color picker component for selecting colors.\n * Supports hex, rgb, and hsl formats with presets.\n \n @example\n * ```tsx\n * <ColorPicker\n * value=\"#ff0000\"\n * onChange={(color) => console.log(color)}\n * />\n * ```\n /\nexport default function ColorPicker({\n value: controlledValue,\n defaultValue = \"#000000\",\n format: _format = \"hex\",\n onChange,\n presets,\n showInput = true,\n disabled = false,\n label,\n className = \"\",\n}: ColorPickerProps) {\n const [internalValue, setInternalValue] = useState(defaultValue);\n const [rgb, setRgb] = useState({ r: 0, g: 0, b: 0 });\n\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n // Convert hex to RGB\n const hexToRgb = (hex: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : { r: 0, g: 0, b: 0 };\n };\n\n // Convert RGB to hex\n const rgbToHex = (r: number, g: number, b: number) => {\n return (\n \"#\" +\n [r, g, b]\n .map((x) => {\n const hex = x.toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n })\n .join(\"\")\n );\n };\n\n // Update RGB when value changes\n useEffect(() => {\n if (currentValue) {\n const rgbValue = hexToRgb(currentValue);\n setRgb(rgbValue);\n }\n }, [currentValue]);\n\n const handleHexChange = (e: ChangeEvent<HTMLInputElement>) => {\n const hex = e.target.value;\n if (/^#[0-9A-F]{6}$/i.test(hex) \|\| hex === \"\") {\n if (!isControlled) {\n setInternalValue(hex);\n }\n onChange?.(hex);\n if (hex) {\n setRgb(hexToRgb(hex));\n }\n }\n };\n\n const handleRgbChange = (component: \"r\" \| \"g\" \| \"b\", val: number) => {\n const newRgb = { ...rgb, [component]: Math.max(0, Math.min(255, val)) };\n setRgb(newRgb);\n const hex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);\n if (!isControlled) {\n setInternalValue(hex);\n }\n onChange?.(hex);\n };\n\n const defaultPresets = [\n \"#000000\",\n \"#ffffff\",\n \"#ff0000\",\n \"#00ff00\",\n \"#0000ff\",\n \"#ffff00\",\n \"#ff00ff\",\n \"#00ffff\",\n \"#808080\",\n \"#ffa500\",\n ];\n\n const colorPresets = presets \|\| defaultPresets;\n\n const colorPickerContent = (\n <div className={`${getSpacingClass(\"base\", \"p\")} min-w-[280px]`}>\n {/ Color Preview /}\n <div\n className={`\n w-full\n h-32\n ${getRadiusClass(\"md\")}\n ${getShadowClass(\"sm\")}\n ${getSpacingClass(\"base\", \"mb\")}\n border\n border-line-default\n `}\n style={{ backgroundColor: currentValue }}\n />\n\n {/ RGB Sliders /}\n <div\n className={`${getSpacingClass(\"md\", \"space-y\")} ${getSpacingClass(\"base\", \"mb\")}`}\n >\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n Red: {rgb.r}\n </label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"255\"\n value={rgb.r}\n onChange={(e) => handleRgbChange(\"r\", parseInt(e.target.value))}\n disabled={disabled}\n className=\"w-full\"\n />\n </div>\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n Green: {rgb.g}\n </label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"255\"\n value={rgb.g}\n onChange={(e) => handleRgbChange(\"g\", parseInt(e.target.value))}\n disabled={disabled}\n className=\"w-full\"\n />\n </div>\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"xs\", \"mb\")}`}\n >\n Blue: {rgb.b}\n </label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"255\"\n value={rgb.b}\n onChange={(e) => handleRgbChange(\"b\", parseInt(e.target.value))}\n disabled={disabled}\n className=\"w-full\"\n />\n </div>\n </div>\n\n {/ Hex Input /}\n {showInput && (\n <div className={getSpacingClass(\"base\", \"mb\")}>\n <Input\n label=\"Hex\"\n value={currentValue}\n onChange={handleHexChange}\n disabled={disabled}\n placeholder=\"#000000\"\n className=\"font-mono\"\n />\n </div>\n )}\n\n {/ Color Presets */}\n {colorPresets.length > 0 && (\n <div>\n <label\n className={`block text-xs font-medium text-fg-secondary ${getSpacingClass(\"sm\", \"mb\")}`}\n >\n Presets\n </label>\n <div className={`grid grid-cols-10 ${getSpacingClass(\"xs\", \"gap\")}`}>\n {colorPresets.map((color, index) => (\n <button\n key={index}\n type=\"button\"\n onClick={() => {\n if (!disabled) {\n if (!isControlled) {\n setInternalValue(color);\n }\n onChange?.(color);\n setRgb(hexToRgb(color));\n }\n }}\n disabled={disabled}\n className={`\n w-6\n h-6\n ${getRadiusClass(\"sm\")}\n border\n border-line-emphasis\n hover:scale-110\n ${getShadowClass(\"sm\")}\n ${currentValue.toLowerCase() === color.toLowerCase() ? \"ring-2 ring-offset-1 ring-line-brand\" : \"\"}\n `}\n style={{ backgroundColor: color }}\n aria-label={`Select color ${color}`}\n />\n ))}\n </div>\n </div>\n )}\n </div>\n );\n\n return (\n <div className={className}>\n <Popover\n trigger={\n <div className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}>\n {label && (\n <label className=\"text-sm font-medium text-fg-secondary\">\n {label}\n </label>\n )}\n <div\n className={`\n w-10\n h-10\n ${getRadiusClass(\"md\")}\n border\n border-line-emphasis\n ${getShadowClass(\"sm\")}\n cursor-pointer\n ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}\n `}\n style={{ backgroundColor: currentValue }}\n />\n {showInput && (\n <Input\n value={currentValue}\n onChange={handleHexChange}\n disabled={disabled}\n placeholder=\"#000000\"\n className=\"w-24 font-mono\"\n />\n )}\n </div>\n }\n placement=\"bottom-start\"\n showCloseButton\n title=\"Pick a Color\"\n >\n {colorPickerContent}\n </Popover>\n </div>\n );\n}\n"],"names":["ColorPicker","controlledValue","defaultValue","_format","onChange","presets","showInput","disabled","label","className","internalValue","setInternalValue","useState","rgb","setRgb","isControlled","currentValue","hexToRgb","hex","result","rgbToHex","r","g","b","x","useEffect","rgbValue","handleHexChange","handleRgbChange","component","val","newRgb","__spreadProps","__spreadValues","colorPresets","colorPickerContent","getSpacingClass","jsx","getRadiusClass","getShadowClass","jsxs","Input","color","index","Popover"],"mappings":"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"}

package/dist/granular/ui/components/CommandPalette/CommandPalette.js CHANGED Viewed

@@ -1,80 +1,90 @@
 "use client";
-import { jsx as n, jsxs as o, Fragment as V } from "react/jsx-runtime";
-import { useState as y, useRef as S, useCallback as O, useEffect as b } from "react";
-import { createPortal as U } from "react-dom";
-import { Search as Z, Command as _ } from "lucide-react";
-import { getSpacingClass as r } from "../../tokens/spacing.js";
-import { getRadiusClass as K } from "../../tokens/radius.js";
-import { getShadowClass as z } from "../../tokens/shadows.js";
-import { getZIndexClass as L } from "../../tokens/z-index.js";
-import { getAnimationClass as g } from "../../tokens/animations.js";
-import B from "../../primitives/Input/Input.js";
-function ne({
-  items: E,
-  open: v,
-  defaultOpen: j = !1,
-  onOpenChange: d,
-  trigger: $,
-  placeholder: P = "Type a command or search...",
-  emptyMessage: R = "No commands found",
+import { jsx as a, jsxs as i, Fragment as Z } from "react/jsx-runtime";
+import { useState as $, useRef as g, useId as _, useCallback as z, useEffect as h } from "react";
+import { createPortal as B } from "react-dom";
+import { Search as G, Command as H } from "lucide-react";
+import { getSpacingClass as s } from "../../tokens/spacing.js";
+import { getRadiusClass as E } from "../../tokens/radius.js";
+import { getShadowClass as J } from "../../tokens/shadows.js";
+import { getZIndexClass as R } from "../../tokens/z-index.js";
+import { getAnimationClass as w } from "../../tokens/animations.js";
+import W from "../../primitives/Input/Input.js";
+import { useFocusTrap as X } from "../../hooks/useFocusTrap.js";
+import { useFocusRestore as Y } from "../../hooks/useFocusRestore.js";
+function ue({
+  items: O,
+  open: k,
+  defaultOpen: P = !1,
+  onOpenChange: f,
+  trigger: C,
+  placeholder: I = "Type a command or search...",
+  emptyMessage: T = "No commands found",
   className: A = ""
 }) {
-  const [q, F] = y(j), [m, w] = y(""), [l, f] = y(0), k = S(null), p = S(null), x = v !== void 0, h = x ? v : q, i = E.filter((e) => {
-    var a, D;
-    if (!m) return !0;
-    const t = m.toLowerCase(), s = e.label.toLowerCase().includes(t), I = (a = e.description) == null ? void 0 : a.toLowerCase().includes(t), u = (D = e.keywords) == null ? void 0 : D.some(
-      (T) => T.toLowerCase().includes(t)
+  const [F, q] = $(P), [u, N] = $(""), [n, p] = $(0), D = g(null), b = g(null), S = g(null), x = _(), y = k !== void 0, o = y ? k : F;
+  Y(o), X(S, o);
+  const v = O.filter((e) => {
+    var l, j;
+    if (!u) return !0;
+    const t = u.toLowerCase(), r = e.label.toLowerCase().includes(t), L = (l = e.description) == null ? void 0 : l.toLowerCase().includes(t), m = (j = e.keywords) == null ? void 0 : j.some(
+      (U) => U.toLowerCase().includes(t)
     );
-    return s || I || u;
-  }), N = i.reduce(
+    return r || L || m;
+  }).reduce(
     (e, t) => {
-      const s = t.group || "Other";
-      return e[s] || (e[s] = []), e[s].push(t), e;
+      const r = t.group || "Other";
+      return e[r] || (e[r] = []), e[r].push(t), e;
     },
     {}
-  ), c = O(
+  ), d = Object.values(v).flat(), M = o && d[n] ? `${x}-option-${n}` : void 0, c = z(
     (e) => {
-      x || F(e), d == null || d(e), e && (w(""), f(0), setTimeout(() => {
-        var t;
-        return (t = k.current) == null ? void 0 : t.focus();
-      }, 0));
+      y || q(e), f == null || f(e), e && (N(""), p(0));
     },
-    [x, d]
-  ), C = (e) => {
+    [y, f]
+  );
+  h(() => {
+    if (!o) return;
+    const e = setTimeout(() => {
+      var t;
+      return (t = D.current) == null ? void 0 : t.focus();
+    }, 0);
+    return () => clearTimeout(e);
+  }, [o]);
+  const K = (e) => {
     e.action(), c(!1);
-  }, M = (e) => {
+  }, Q = (e) => {
     if (e.key === "Escape") {
       c(!1);
       return;
     }
     if (e.key === "ArrowDown") {
-      e.preventDefault(), f((t) => Math.min(t + 1, i.length - 1));
+      e.preventDefault(), p((t) => Math.min(t + 1, d.length - 1));
       return;
     }
     if (e.key === "ArrowUp") {
-      e.preventDefault(), f((t) => Math.max(t - 1, 0));
+      e.preventDefault(), p((t) => Math.max(t - 1, 0));
       return;
     }
     if (e.key === "Enter") {
-      e.preventDefault(), i[l] && C(i[l]);
+      e.preventDefault(), d[n] && K(d[n]);
       return;
     }
   };
-  b(() => {
-    if (p.current && l >= 0) {
-      const e = p.current.querySelector(
-        `[data-index="${l}"]`
+  h(() => {
+    if (b.current && n >= 0) {
+      const e = b.current.querySelector(
+        `[data-index="${n}"]`
       );
       e && typeof e.scrollIntoView == "function" && e.scrollIntoView({
         block: "nearest",
         behavior: "smooth"
       });
     }
-  }, [l]), b(() => {
-    f(0);
-  }, [m]), b(() => {
+  }, [n]), h(() => {
+    p(0);
+  }, [u]), h(() => {
     const e = (t) => {
-      (t.metaKey || t.ctrlKey) && t.key === "k" && (t.preventDefault(), c(!h));
+      (t.metaKey || t.ctrlKey) && t.key === "k" && (t.preventDefault(), c(!o));
     };
     return document.addEventListener(
       "keydown",
@@ -83,179 +93,207 @@ function ne({
       "keydown",
       e
     );
-  }, [h, c]);
-  const Q = h ? /* @__PURE__ */ n(
+  }, [o, c]);
+  const V = o ? /* @__PURE__ */ a(
     "div",
     {
       className: `
         fixed
         inset-0
-        ${L("modal-backdrop")}
+        ${R("modal-backdrop")}
         bg-scrim
         flex
         items-start
         justify-center
         pt-[20vh]
-        ${g("base")}
+        ${w("base")}
       `,
       onClick: () => c(!1),
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ i(
         "div",
         {
+          ref: S,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
           className: `
           w-full
           max-w-2xl
-          ${r("base", "mx")}
+          ${s("base", "mx")}
           bg-surface-overlay
-          ${K("lg")}
-          ${z("xl")}
-          ${L("modal")}
-          ${g("base")}
+          ${E("lg")}
+          ${J("xl")}
+          ${R("modal")}
+          ${w("base")}
           ${A}
         `,
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ i(
               "div",
               {
                 className: `
           flex
           items-center
-          ${r("md", "gap")}
-          ${r("base", "p")}
+          ${s("md", "gap")}
+          ${s("base", "p")}
           border-b
           border-line-default
         `,
                 children: [
-                  /* @__PURE__ */ n(Z, { className: "h-5 w-5 text-fg-secondary" }),
-                  /* @__PURE__ */ n(
-                    B,
+                  /* @__PURE__ */ a(G, { className: "h-5 w-5 text-fg-secondary" }),
+                  /* @__PURE__ */ a(
+                    W,
                     {
-                      ref: k,
-                      value: m,
-                      onChange: (e) => w(e.target.value),
-                      onKeyDown: M,
-                      placeholder: P,
+                      ref: D,
+                      value: u,
+                      onChange: (e) => N(e.target.value),
+                      onKeyDown: Q,
+                      placeholder: I,
                       className: "flex-1 border-0 focus:ring-0",
-                      autoFocus: !0
+                      role: "combobox",
+                      "aria-expanded": o,
+                      "aria-controls": x,
+                      "aria-activedescendant": M,
+                      "aria-autocomplete": "list",
+                      "aria-label": I
                     }
                   ),
-                  /* @__PURE__ */ o(
+                  /* @__PURE__ */ i(
                     "div",
                     {
                       className: `
             flex
             items-center
-            ${r("xs", "gap")}
-            ${r("sm", "px")}
-            ${r("xs", "py")}
-            ${K("sm")}
+            ${s("xs", "gap")}
+            ${s("sm", "px")}
+            ${s("xs", "py")}
+            ${E("sm")}
             bg-surface-muted
             text-xs
             text-fg-tertiary
           `,
                       children: [
-                        /* @__PURE__ */ n(_, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ n("span", { children: "K" })
+                        /* @__PURE__ */ a(H, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ a("span", { children: "K" })
                       ]
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(
               "div",
               {
-                ref: p,
+                ref: b,
+                id: x,
+                role: "listbox",
+                "aria-label": "Commands",
                 className: `
             max-h-96
             overflow-y-auto
-            ${r("sm", "py")}
+            ${s("sm", "py")}
           `,
-                children: Object.keys(N).length === 0 ? /* @__PURE__ */ n(
+                children: Object.entries(v).map(([e, t]) => /* @__PURE__ */ i(
                   "div",
                   {
-                    className: `
-              ${r("lg", "p")}
-              text-center
-              text-sm
-              text-fg-secondary
-            `,
-                    children: R
-                  }
-                ) : Object.entries(N).map(([e, t]) => /* @__PURE__ */ o("div", { children: [
-                  e !== "Other" && /* @__PURE__ */ n(
-                    "div",
-                    {
-                      className: `
-                    ${r("sm", "px")}
-                    ${r("xs", "py")}
+                    role: "group",
+                    "aria-label": e !== "Other" ? e : void 0,
+                    children: [
+                      e !== "Other" && /* @__PURE__ */ a(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: `
+                    ${s("sm", "px")}
+                    ${s("xs", "py")}
                     text-xs
                     font-semibold
                     text-fg-tertiary
                     uppercase
                     tracking-wider
                   `,
-                      children: e
-                    }
-                  ),
-                  t.map((s, I) => {
-                    const u = i.indexOf(s), a = u === l;
-                    return /* @__PURE__ */ o(
-                      "button",
-                      {
-                        type: "button",
-                        "data-index": u,
-                        onClick: () => C(s),
-                        className: `
+                          children: e
+                        }
+                      ),
+                      t.map((r, L) => {
+                        const m = d.indexOf(r), l = m === n;
+                        return /* @__PURE__ */ i(
+                          "button",
+                          {
+                            type: "button",
+                            id: `${x}-option-${m}`,
+                            role: "option",
+                            "aria-selected": l,
+                            tabIndex: -1,
+                            "data-index": m,
+                            onClick: () => K(r),
+                            className: `
                         w-full
                         flex
                         items-center
-                        ${r("md", "gap")}
-                        ${r("base", "px")}
-                        ${r("md", "py")}
+                        ${s("md", "gap")}
+                        ${s("base", "px")}
+                        ${s("md", "py")}
                         text-left
-                        ${g("base")}
-                        ${a ? "bg-surface-brand-muted" : "hover:bg-surface-hover"}
+                        ${w("base")}
+                        ${l ? "bg-surface-brand-muted" : "hover:bg-surface-hover"}
                       `,
-                        children: [
-                          s.icon && /* @__PURE__ */ n(
-                            "div",
-                            {
-                              className: `
-                          ${a ? "text-fg-brand-emphasis" : "text-fg-secondary"}
+                            children: [
+                              r.icon && /* @__PURE__ */ a(
+                                "div",
+                                {
+                                  className: `
+                          ${l ? "text-fg-brand-emphasis" : "text-fg-secondary"}
                         `,
-                              children: s.icon
-                            }
-                          ),
-                          /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
-                            /* @__PURE__ */ n(
-                              "div",
-                              {
-                                className: `
+                                  children: r.icon
+                                }
+                              ),
+                              /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                                /* @__PURE__ */ a(
+                                  "div",
+                                  {
+                                    className: `
                           text-sm
                           font-medium
-                          ${a ? "text-fg-brand-emphasis" : "text-fg-primary"}
+                          ${l ? "text-fg-brand-emphasis" : "text-fg-primary"}
                         `,
-                                children: s.label
-                              }
-                            ),
-                            s.description && // fg-secondary on selected: brand-muted bg drops fg-tertiary below AA;
-                            // caption role preserved, intensity raised for contrast.
-                            /* @__PURE__ */ n(
-                              "div",
-                              {
-                                className: `text-xs ${a ? "text-fg-secondary" : "text-fg-tertiary"} ${r("0.5", "mt")}`,
-                                children: s.description
-                              }
-                            )
-                          ] })
-                        ]
-                      },
-                      s.id
-                    );
-                  })
-                ] }, e))
+                                    children: r.label
+                                  }
+                                ),
+                                r.description && // fg-secondary on selected: brand-muted bg drops fg-tertiary below AA;
+                                // caption role preserved, intensity raised for contrast.
+                                /* @__PURE__ */ a(
+                                  "div",
+                                  {
+                                    className: `text-xs ${l ? "text-fg-secondary" : "text-fg-tertiary"} ${s("0.5", "mt")}`,
+                                    children: r.description
+                                  }
+                                )
+                              ] })
+                            ]
+                          },
+                          r.id
+                        );
+                      })
+                    ]
+                  },
+                  e
+                ))
+              }
+            ),
+            Object.keys(v).length === 0 && /* @__PURE__ */ a(
+              "div",
+              {
+                role: "status",
+                "aria-live": "polite",
+                className: `
+              ${s("lg", "p")}
+              text-center
+              text-sm
+              text-fg-secondary
+            `,
+                children: T
               }
             )
           ]
@@ -263,12 +301,12 @@ function ne({
       )
     }
   ) : null;
-  return /* @__PURE__ */ o(V, { children: [
-    $ ? /* @__PURE__ */ n("div", { onClick: () => c(!0), children: $ }) : null,
-    typeof window != "undefined" && U(Q, document.body)
+  return /* @__PURE__ */ i(Z, { children: [
+    C ? /* @__PURE__ */ a("div", { onClick: () => c(!0), children: C }) : null,
+    typeof window != "undefined" && B(V, document.body)
   ] });
 }
 export {
-  ne as default
+  ue as default
 };
 //# sourceMappingURL=CommandPalette.js.map