npm - erp-pro-ui - Versions diffs - 0.1.9 → 0.2.0 - Mend

erp-pro-ui 0.1.9 → 0.2.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 (183) hide show

package/dist/chunks/color-palette-DnX1sODj.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"color-palette-DnX1sODj.mjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ColorSwatch {\n name: string;\n value: string;\n textColor?: \"light\" | \"dark\";\n}\n\nexport interface ColorGroup {\n name: string;\n colors: ColorSwatch[];\n}\n\nexport interface ColorPaletteProps {\n groups?: ColorGroup[];\n theme?: \"light\" | \"dark\" | \"all\";\n showGradients?: boolean;\n showUsageExamples?: boolean;\n className?: string;\n}\n\nconst lightThemeGroups: ColorGroup[] = [\n {\n name: \"Active Accent Scale\",\n colors: [\n { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n {\n name: \"primary-400\",\n value: \"var(--ds-accent-400)\",\n textColor: \"light\",\n },\n {\n name: \"primary-500\",\n value: \"var(--ds-accent-500)\",\n textColor: \"light\",\n },\n {\n name: \"primary-600\",\n value: \"var(--ds-accent-600)\",\n textColor: \"light\",\n },\n {\n name: \"primary-700\",\n value: \"var(--ds-accent-700)\",\n textColor: \"light\",\n },\n {\n name: \"primary-800\",\n value: \"var(--ds-accent-800)\",\n textColor: \"light\",\n },\n {\n name: \"primary-900\",\n value: \"var(--ds-accent-900)\",\n textColor: \"light\",\n },\n ],\n },\n {\n name: \"Semantic Surfaces\",\n colors: [\n {\n name: \"bg-ds-canvas\",\n value: \"var(--ds-color-bg-canvas)\",\n textColor: \"dark\",\n },\n {\n name: \"bg-ds-surface-1\",\n value: \"var(--ds-color-bg-surface)\",\n textColor: \"dark\",\n },\n {\n name: \"bg-ds-surface-2\",\n value: \"var(--ds-color-bg-elevated)\",\n textColor: \"dark\",\n },\n {\n name: \"bg-ds-surface-3\",\n value: \"var(--ds-color-bg-ds-surface-3)\",\n textColor: \"dark\",\n },\n {\n name: \"accent-subtle\",\n value: \"var(--ds-color-accent-subtle)\",\n textColor: \"dark\",\n },\n ],\n },\n {\n name: \"Semantic Foreground\",\n colors: [\n { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"light\" },\n {\n name: \"fg-muted\",\n value: \"var(--ds-color-fg-muted)\",\n textColor: \"light\",\n },\n {\n name: \"fg-subtle\",\n value: \"var(--ds-color-fg-subtle)\",\n textColor: \"light\",\n },\n {\n name: \"on-accent\",\n value: \"var(--ds-color-on-accent)\",\n textColor: \"dark\",\n },\n ],\n },\n {\n name: \"Semantic Borders\",\n colors: [\n { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"dark\" },\n {\n name: \"border-strong\",\n value: \"var(--ds-color-border-strong)\",\n textColor: \"dark\",\n },\n {\n name: \"border-muted\",\n value: \"var(--ds-color-border-muted)\",\n textColor: \"dark\",\n },\n {\n name: \"border-field\",\n value: \"var(--ds-color-border-field)\",\n textColor: \"dark\",\n },\n {\n name: \"focus-ring\",\n value: \"var(--ds-color-focus-ring)\",\n textColor: \"dark\",\n },\n ],\n },\n {\n name: \"Semantic Status\",\n colors: [\n { name: \"success\", value: \"#1eb564\", textColor: \"light\" },\n { name: \"warning\", value: \"#ff9500\", textColor: \"dark\" },\n { name: \"danger\", value: \"#e31d1c\", textColor: \"light\" },\n { name: \"info\", value: \"#0085c4\", textColor: \"light\" },\n { name: \"disabled\", value: \"#d2d2d3\", textColor: \"dark\" },\n ],\n },\n {\n name: \"Foundation Tokens\",\n colors: [\n { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n {\n name: \"--ds-surface-canvas\",\n value: \"var(--ds-surface-canvas)\",\n textColor: \"dark\",\n },\n {\n name: \"--ds-surface-1\",\n value: \"var(--ds-surface-1)\",\n textColor: \"dark\",\n },\n { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"light\" },\n { name: \"--ds-border-1\", value: \"var(--ds-border-1)\", textColor: \"dark\" },\n ],\n },\n];\n\nconst darkThemeGroups: ColorGroup[] = [\n {\n name: \"Active Accent Scale (Dark)\",\n colors: [\n { name: \"primary-50\", value: \"var(--ds-accent-50)\", textColor: \"dark\" },\n { name: \"primary-100\", value: \"var(--ds-accent-100)\", textColor: \"dark\" },\n { name: \"primary-200\", value: \"var(--ds-accent-200)\", textColor: \"dark\" },\n { name: \"primary-300\", value: \"var(--ds-accent-300)\", textColor: \"dark\" },\n {\n name: \"primary-400\",\n value: \"var(--ds-accent-400)\",\n textColor: \"light\",\n },\n {\n name: \"primary-500\",\n value: \"var(--ds-accent-500)\",\n textColor: \"light\",\n },\n {\n name: \"primary-600\",\n value: \"var(--ds-accent-600)\",\n textColor: \"light\",\n },\n {\n name: \"primary-700\",\n value: \"var(--ds-accent-700)\",\n textColor: \"light\",\n },\n {\n name: \"primary-800\",\n value: \"var(--ds-accent-800)\",\n textColor: \"light\",\n },\n {\n name: \"primary-900\",\n value: \"var(--ds-accent-900)\",\n textColor: \"light\",\n },\n ],\n },\n {\n name: \"Semantic Surfaces (Dark)\",\n colors: [\n {\n name: \"bg-ds-canvas\",\n value: \"var(--ds-color-bg-canvas)\",\n textColor: \"light\",\n },\n {\n name: \"bg-ds-surface-1\",\n value: \"var(--ds-color-bg-surface)\",\n textColor: \"light\",\n },\n {\n name: \"bg-ds-surface-2\",\n value: \"var(--ds-color-bg-elevated)\",\n textColor: \"light\",\n },\n {\n name: \"bg-ds-surface-3\",\n value: \"var(--ds-color-bg-ds-surface-3)\",\n textColor: \"light\",\n },\n {\n name: \"accent-subtle\",\n value: \"var(--ds-color-accent-subtle)\",\n textColor: \"light\",\n },\n ],\n },\n {\n name: \"Semantic Foreground (Dark)\",\n colors: [\n { name: \"fg\", value: \"var(--ds-color-fg)\", textColor: \"dark\" },\n {\n name: \"fg-muted\",\n value: \"var(--ds-color-fg-muted)\",\n textColor: \"dark\",\n },\n {\n name: \"fg-subtle\",\n value: \"var(--ds-color-fg-subtle)\",\n textColor: \"dark\",\n },\n {\n name: \"on-accent\",\n value: \"var(--ds-color-on-accent)\",\n textColor: \"dark\",\n },\n ],\n },\n {\n name: \"Semantic Borders (Dark)\",\n colors: [\n { name: \"border\", value: \"var(--ds-color-border)\", textColor: \"light\" },\n {\n name: \"border-strong\",\n value: \"var(--ds-color-border-strong)\",\n textColor: \"light\",\n },\n {\n name: \"border-muted\",\n value: \"var(--ds-color-border-muted)\",\n textColor: \"light\",\n },\n {\n name: \"border-field\",\n value: \"var(--ds-color-border-field)\",\n textColor: \"light\",\n },\n {\n name: \"focus-ring\",\n value: \"var(--ds-color-focus-ring)\",\n textColor: \"dark\",\n },\n ],\n },\n {\n name: \"Semantic Status (Dark)\",\n colors: [\n { name: \"success\", value: \"#22c55e\", textColor: \"light\" },\n { name: \"warning\", value: \"#f59e42\", textColor: \"dark\" },\n { name: \"danger\", value: \"#ef4444\", textColor: \"light\" },\n { name: \"info\", value: \"#38bdf8\", textColor: \"dark\" },\n { name: \"disabled\", value: \"#4b5563\", textColor: \"light\" },\n ],\n },\n {\n name: \"Foundation Tokens (Dark)\",\n colors: [\n { name: \"--ds-primary\", value: \"var(--ds-primary)\", textColor: \"light\" },\n {\n name: \"--ds-surface-canvas\",\n value: \"var(--ds-surface-canvas)\",\n textColor: \"light\",\n },\n {\n name: \"--ds-surface-1\",\n value: \"var(--ds-surface-1)\",\n textColor: \"light\",\n },\n { name: \"--ds-text-1\", value: \"var(--ds-text-1)\", textColor: \"dark\" },\n {\n name: \"--ds-border-1\",\n value: \"var(--ds-border-1)\",\n textColor: \"light\",\n },\n ],\n },\n];\n\nconst gradientGroups: ColorGroup[] = [\n {\n name: \"Semantic Gradients\",\n colors: [\n { name: \"accent-gradient-start\", value: \"#9333ea\", textColor: \"light\" },\n { name: \"accent-gradient-end\", value: \"#7e22ce\", textColor: \"light\" },\n { name: \"accent-secondary\", value: \"#4318ff\", textColor: \"light\" },\n ],\n },\n {\n name: \"Status Gradients\",\n colors: [\n { name: \"success-gradient-start\", value: \"#22c55e\", textColor: \"light\" },\n { name: \"success-gradient-end\", value: \"#16a34a\", textColor: \"light\" },\n { name: \"warning-gradient-start\", value: \"#f59e0b\", textColor: \"dark\" },\n { name: \"warning-gradient-end\", value: \"#d97706\", textColor: \"light\" },\n { name: \"error-gradient-start\", value: \"#ef4444\", textColor: \"light\" },\n { name: \"error-gradient-end\", value: \"#dc2626\", textColor: \"light\" },\n ],\n },\n {\n name: \"Glass / Opacity\",\n colors: [\n {\n name: \"glass-white-90\",\n value: \"rgba(255,255,255,0.9)\",\n textColor: \"dark\",\n },\n {\n name: \"glass-white-70\",\n value: \"rgba(255,255,255,0.7)\",\n textColor: \"dark\",\n },\n {\n name: \"glass-white-50\",\n value: \"rgba(255,255,255,0.5)\",\n textColor: \"dark\",\n },\n {\n name: \"glass-white-20\",\n value: \"rgba(255,255,255,0.2)\",\n textColor: \"dark\",\n },\n {\n name: \"glass-white-10\",\n value: \"rgba(255,255,255,0.1)\",\n textColor: \"dark\",\n },\n { name: \"glass-black-90\", value: \"rgba(0,0,0,0.9)\", textColor: \"light\" },\n { name: \"glass-black-70\", value: \"rgba(0,0,0,0.7)\", textColor: \"light\" },\n { name: \"glass-black-50\", value: \"rgba(0,0,0,0.5)\", textColor: \"light\" },\n { name: \"glass-black-20\", value: \"rgba(0,0,0,0.2)\", textColor: \"light\" },\n { name: \"glass-black-10\", value: \"rgba(0,0,0,0.1)\", textColor: \"light\" },\n ],\n },\n];\n\n// Default groups (backwards compatibility)\nconst defaultGroups: ColorGroup[] = lightThemeGroups;\n\ninterface DisplayColorGroup {\n group: ColorGroup;\n mode?: \"light\" | \"dark\";\n}\n\nfunction ColorSwatchItem({ color }: { color: ColorSwatch }) {\n const swatchRef = React.useRef<HTMLDivElement | null>(null);\n const [resolvedValue, setResolvedValue] = React.useState<string>(color.value);\n\n // Resolve runtime CSS variable values so docs reflect live theme tokens.\n React.useEffect(() => {\n if (!swatchRef.current) {\n return;\n }\n\n if (color.value.startsWith(\"var(\")) {\n const computedBackground = getComputedStyle(\n swatchRef.current,\n ).backgroundColor;\n setResolvedValue(computedBackground || color.value);\n return;\n }\n\n setResolvedValue(color.value);\n }, [color.value]);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(resolvedValue);\n };\n\n const swatchLabel = color.value.startsWith(\"var(\")\n ? \"LIVE\"\n : color.value.length <= 9\n ? color.value.toUpperCase()\n : \"RGBA\";\n\n return (\n <div\n className=\"flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105\"\n onClick={copyToClipboard}\n title=\"Click to copy\"\n >\n <div\n ref={swatchRef}\n className=\"w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono\"\n style={{ backgroundColor: color.value }}\n >\n <span className=\"font-semibold text-ds-1 mix-blend-difference\">\n {swatchLabel}\n </span>\n </div>\n <span className=\"text-xs font-medium text-ds-2 text-center max-w-20\">\n {color.name}\n </span>\n <span className=\"text-[10px] font-mono text-ds-3 text-center max-w-20 break-all\">\n {resolvedValue}\n </span>\n </div>\n );\n}\n\nfunction GradientPreview() {\n // Static examples to illustrate common gradient recipes.\n return (\n <div className=\"mt-8\">\n <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n Semantic Gradient Examples\n </h3>\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div className=\"flex flex-col gap-2\">\n <div\n className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n style={{\n background: \"linear-gradient(135deg, #9333ea, #7e22ce)\",\n }}\n >\n Accent Gradient\n </div>\n <code className=\"text-xs text-ds-3\">\n linear-gradient(135deg, #9333ea, #7e22ce)\n </code>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div\n className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n style={{\n background: \"linear-gradient(135deg, #9333ea, #4318ff)\",\n }}\n >\n Accent to Brand Primary\n </div>\n <code className=\"text-xs text-ds-3\">\n linear-gradient(135deg, #9333ea, #4318ff)\n </code>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div\n className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n style={{\n background: \"linear-gradient(135deg, #22c55e, #16a34a)\",\n }}\n >\n Success Gradient\n </div>\n <code className=\"text-xs text-ds-3\">\n linear-gradient(135deg, #22c55e, #16a34a)\n </code>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div\n className=\"h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium\"\n style={{\n background: \"linear-gradient(135deg, #fbbf24, #f59e0b)\",\n }}\n >\n Warning Gradient\n </div>\n <code className=\"text-xs text-ds-3\">\n linear-gradient(135deg, #fbbf24, #f59e0b)\n </code>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div\n className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium\"\n style={{\n background: \"linear-gradient(135deg, #ef4444, #dc2626)\",\n }}\n >\n Error Gradient\n </div>\n <code className=\"text-xs text-ds-3\">\n linear-gradient(135deg, #ef4444, #dc2626)\n </code>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div\n className=\"h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40\"\n style={{\n background: \"rgba(147, 51, 234, 0.7)\",\n }}\n >\n Glass Effect\n </div>\n <code className=\"text-xs text-ds-3\">\n rgba(147, 51, 234, 0.7) + backdrop-blur\n </code>\n </div>\n </div>\n </div>\n );\n}\n\nfunction UsageExamples() {\n // Token usage references for semantic utilities + raw CSS variables.\n return (\n <div className=\"mt-8 p-6 bg-ds-surface-2 rounded-xl\">\n <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">\n Recommended Usage\n </h3>\n <div className=\"space-y-4\">\n <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n <h4 className=\"font-medium text-ds-1 mb-2\">\n Semantic utilities first\n </h4>\n <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n {`import { Button } from \"erp-pro-ui\";\n\n<section className=\"bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6\">\n <h2 className=\"text-ds-1 text-xl font-semibold\">Semantic theme</h2>\n <p className=\"text-ds-2\">Use utilities generated by colors.css.</p>\n <Button label=\"Save changes\" primary />\n</section>`}\n </pre>\n </div>\n\n <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n <h4 className=\"font-medium text-ds-1 mb-2\">\n Raw design-system variables\n </h4>\n <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n {`.dashboard-shell {\n background: var(--ds-color-bg-surface);\n color: var(--ds-color-fg);\n border: 1px solid var(--ds-color-border);\n}\n\n.dashboard-shell a {\n color: var(--ds-color-accent);\n}\n\nhtml[data-brand=\"teal\"][data-mode=\"dark\"] {\n color-scheme: dark;\n}`}\n </pre>\n </div>\n\n <div className=\"p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2\">\n <h4 className=\"font-medium text-ds-1 mb-2\">\n Compatibility aliases for migration\n </h4>\n <pre className=\"text-xs font-mono text-ds-2 overflow-x-auto\">\n {`:root {\n --color-primary: #4318ff;\n --color-background-primary: #f4f7fe;\n --color-text-primary: #1e293b;\n}\n\n/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`}\n </pre>\n </div>\n </div>\n </div>\n );\n}\n\nexport default function ColorPalette({\n groups,\n theme = \"all\",\n showGradients = true,\n showUsageExamples = true,\n className,\n}: ColorPaletteProps) {\n // Build display groups based on requested mode. Each group can be rendered\n // inside an explicit `data-mode` wrapper so light and dark values are both\n // resolved accurately on the same page.\n let displayGroups: DisplayColorGroup[];\n if (groups) {\n displayGroups = groups.map((group) => ({ group }));\n } else if (theme === \"light\") {\n displayGroups = lightThemeGroups.map((group) => ({ group, mode: \"light\" }));\n } else if (theme === \"dark\") {\n displayGroups = darkThemeGroups.map((group) => ({ group, mode: \"dark\" }));\n } else {\n // Show all\n displayGroups = [\n ...lightThemeGroups.map((group) => ({ group, mode: \"light\" as const })),\n ...darkThemeGroups.map((group) => ({ group, mode: \"dark\" as const })),\n ];\n }\n\n // Append optional gradient/opacity examples when using built-in groups.\n if (showGradients && !groups) {\n displayGroups = [\n ...displayGroups,\n ...gradientGroups.map((group) => ({ group })),\n ];\n }\n\n return (\n <div className={`p-6 bg-ds-surface-1 rounded-xl ${className || \"\"}`}>\n <h2 className=\"text-2xl font-bold text-ds-1 mb-2\">Color Palette</h2>\n <p className=\"text-sm text-ds-2 mb-6\">\n Preferred contract:{\" \"}\n <code className=\"font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1\">\n semantic utilities and --ds-* tokens\n </code>{\" \"}\n • Compatibility aliases remain available for migration. Light and dark\n sections are resolved in their own mode contexts. Click any swatch to\n copy the resolved color value.\n </p>\n\n <div className=\"mb-6 flex flex-wrap gap-2\">\n <span\n className={`px-3 py-1 rounded-full text-xs font-medium ${\n theme === \"light\" || theme === \"all\"\n ? \"bg-ds-accent-subtle text-ds-1\"\n : \"bg-ds-surface-2 text-ds-3\"\n }`}\n >\n Light Theme\n </span>\n <span\n className={`px-3 py-1 rounded-full text-xs font-medium ${\n theme === \"dark\" || theme === \"all\"\n ? \"bg-ds-accent-subtle text-ds-1\"\n : \"bg-ds-surface-2 text-ds-3\"\n }`}\n >\n Dark Theme\n </span>\n {showGradients && (\n <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1\">\n Gradients\n </span>\n )}\n </div>\n\n {displayGroups.map(({ group, mode }) => (\n <div key={group.name} data-mode={mode} className=\"mb-8\">\n <h3 className=\"text-lg font-semibold text-ds-1 mb-4\">{group.name}</h3>\n <div className=\"flex flex-wrap gap-4\">\n {group.colors.map((color) => (\n <ColorSwatchItem key={color.name} color={color} />\n ))}\n </div>\n </div>\n ))}\n\n {showGradients && <GradientPreview />}\n {showUsageExamples && <UsageExamples />}\n </div>\n );\n}\n\n// Export color groups for external use\nexport { lightThemeGroups, darkThemeGroups, gradientGroups, defaultGroups };\n"],"mappings":"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"}

package/dist/chunks/combobox-0n1_tB8L.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"combobox-0n1_tB8L.mjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n label: string;\n value: string;\n}\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n noOptionsText?: string;\n className?: string;\n bgClassName?: string;\n createOptionLabel?: string;\n onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n options,\n value,\n onChange,\n placeholder = \"Select...\",\n searchPlaceholder = \"Type to search...\",\n noOptionsText = \"No options\",\n className,\n bgClassName = \"bg-ds-surface-1\",\n createOptionLabel,\n onCreateOption,\n}) => {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n // Filter options by search\n const filteredOptions = options.filter((opt) =>\n opt.label.toLowerCase().includes(search.toLowerCase()),\n );\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n return (\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n setSearch(\"\");\n }\n }}\n animationClassName=\"origin-top-left\"\n panelClassName=\" left-0 top-[40px] z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n trigger={\n <motion.div\n style={{\n backgroundImage: useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={handleMouseMove}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n >\n <div\n className={mergeClassNames(\n \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n bgClassName,\n )}\n >\n {value ? (\n <TruncatedText\n as=\"span\"\n showTitleOnHover\n className=\"flex-1 text-ds-1\"\n >\n {options.find((opt) => opt.value === value)?.label}\n </TruncatedText>\n ) : (\n <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n {placeholder}\n </TruncatedText>\n )}\n <span\n className={mergeClassNames(\n \"ml-2 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className=\"h-5 w-5\"\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {/* Sticky search input */}\n <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n <input\n autoFocus\n className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n placeholder={searchPlaceholder}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n {/* Scrollable options */}\n <div className=\"max-h-80 flex-1 overflow-auto\">\n {filteredOptions.length === 0 && !createOptionLabel && (\n <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n )}\n {filteredOptions.map((opt) => (\n <div\n key={opt.value}\n className={mergeClassNames(\n \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n opt.value === value\n ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n : \"\",\n \"hover:bg-ds-accent hover:text-ds-on-accent\",\n )}\n onClick={() => {\n onChange(opt.value);\n setSearch(\"\");\n setOpen(false);\n }}\n >\n <span className=\"flex w-5 items-center justify-center\">\n {opt.value === value && (\n <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n )}\n </span>\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {opt.label}\n </TruncatedText>\n </div>\n ))}\n </div>\n {/* Sticky create option */}\n {createOptionLabel && onCreateOption && (\n <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n <div\n className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n onClick={() => {\n onCreateOption();\n setSearch(\"\");\n setOpen(false);\n }}\n >\n <span className=\"flex w-5 items-center justify-center\">\n {/* Optionally add an icon here */}\n </span>\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {createOptionLabel}\n </TruncatedText>\n </div>\n </div>\n )}\n </DropdownMenu>\n );\n};\n\nexport default Combobox;\n"],"mappings":"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"}

package/dist/chunks/combobox-Ca7-BcLO.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"combobox-Ca7-BcLO.cjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n label: string;\n value: string;\n}\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n noOptionsText?: string;\n className?: string;\n bgClassName?: string;\n createOptionLabel?: string;\n onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n options,\n value,\n onChange,\n placeholder = \"Select...\",\n searchPlaceholder = \"Type to search...\",\n noOptionsText = \"No options\",\n className,\n bgClassName = \"bg-ds-surface-1\",\n createOptionLabel,\n onCreateOption,\n}) => {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n // Filter options by search\n const filteredOptions = options.filter((opt) =>\n opt.label.toLowerCase().includes(search.toLowerCase()),\n );\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n return (\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n setSearch(\"\");\n }\n }}\n animationClassName=\"origin-top-left\"\n panelClassName=\" left-0 top-[40px] z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n trigger={\n <motion.div\n style={{\n backgroundImage: useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={handleMouseMove}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n >\n <div\n className={mergeClassNames(\n \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n bgClassName,\n )}\n >\n {value ? (\n <TruncatedText\n as=\"span\"\n showTitleOnHover\n className=\"flex-1 text-ds-1\"\n >\n {options.find((opt) => opt.value === value)?.label}\n </TruncatedText>\n ) : (\n <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n {placeholder}\n </TruncatedText>\n )}\n <span\n className={mergeClassNames(\n \"ml-2 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className=\"h-5 w-5\"\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {/* Sticky search input */}\n <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n <input\n autoFocus\n className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n placeholder={searchPlaceholder}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n {/* Scrollable options */}\n <div className=\"max-h-80 flex-1 overflow-auto\">\n {filteredOptions.length === 0 && !createOptionLabel && (\n <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n )}\n {filteredOptions.map((opt) => (\n <div\n key={opt.value}\n className={mergeClassNames(\n \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n opt.value === value\n ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n : \"\",\n \"hover:bg-ds-accent hover:text-ds-on-accent\",\n )}\n onClick={() => {\n onChange(opt.value);\n setSearch(\"\");\n setOpen(false);\n }}\n >\n <span className=\"flex w-5 items-center justify-center\">\n {opt.value === value && (\n <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n )}\n </span>\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {opt.label}\n </TruncatedText>\n </div>\n ))}\n </div>\n {/* Sticky create option */}\n {createOptionLabel && onCreateOption && (\n <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n <div\n className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n onClick={() => {\n onCreateOption();\n setSearch(\"\");\n setOpen(false);\n }}\n >\n <span className=\"flex w-5 items-center justify-center\">\n {/* Optionally add an icon here */}\n </span>\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {createOptionLabel}\n </TruncatedText>\n </div>\n </div>\n )}\n </DropdownMenu>\n );\n};\n\nexport default Combobox;\n"],"mappings":";;;;;;;;;;AA0BA,IAAM,YAAqC,EACzC,SACA,OACA,UACA,cAAc,aACd,oBAAoB,qBACpB,gBAAgB,cAChB,WACA,cAAc,mBACd,mBACA,qBACI;CACJ,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB,MAAM;CACvC,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,GAAG;CACxC,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,SAAS;CAGf,MAAM,kBAAkB,QAAQ,QAAQ,QACtC,IAAI,MAAM,aAAa,CAAC,SAAS,OAAO,aAAa,CAAC,CACvD;CAED,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,qBAAA,cAAD;EACE,WAAW,cAAA,gBAAgB,UAAU,UAAU;EACzC;EACN,eAAe,aAAa;AAC1B,WAAQ,SAAS;AACjB,OAAI,CAAC,SACH,WAAU,GAAG;;EAGjB,oBAAmB;EACnB,gBAAe;EACf,SACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;GACE,OAAO,EACL,iBAAiB,cAAA,iBAAiB;;kBAE5B,UAAU,GAAG,OAAO,MAAM,MAAM,aAAa,OAAO,KAAK,OAAO;;;;eAKvE;GACD,aAAa;GACb,oBAAoB,WAAW,KAAK;GACpC,oBAAoB,WAAW,MAAM;GACrC,WAAU;aAEV,iBAAA,GAAA,kBAAA,MAAC,OAAD;IACE,WAAW,cAAA,gBACT,qPACA,YACD;cAJH,CAMG,QACC,iBAAA,GAAA,kBAAA,KAAC,uBAAA,eAAD;KACE,IAAG;KACH,kBAAA;KACA,WAAU;eAET,QAAQ,MAAM,QAAQ,IAAI,UAAU,MAAM,EAAE;KAC/B,CAAA,GAEhB,iBAAA,GAAA,kBAAA,KAAC,uBAAA,eAAD;KAAe,IAAG;KAAO,WAAU;eAChC;KACa,CAAA,EAElB,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,WAAW,cAAA,gBACT,oDACA,OAAO,eAAe,WACvB;eAED,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;MACE,OAAO;MACP,QAAQ;MACR,OAAM;MACN,WAAU;MACV,CAAA;KACG,CAAA,CACH;;GACK,CAAA;YA5DjB;GAgEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACE,WAAA;KACA,WAAU;KACV,aAAa;KACb,OAAO;KACP,WAAW,MAAM,UAAU,EAAE,OAAO,MAAM;KAC1C,UAAU,MAAM,EAAE,iBAAiB;KACnC,CAAA;IACE,CAAA;GAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACG,gBAAgB,WAAW,KAAK,CAAC,qBAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;eAAuB;KAAoB,CAAA,EAE3D,gBAAgB,KAAK,QACpB,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAEE,WAAW,cAAA,gBACT,sGACA,IAAI,UAAU,QACV,gDACA,IACJ,6CACD;KACD,eAAe;AACb,eAAS,IAAI,MAAM;AACnB,gBAAU,GAAG;AACb,cAAQ,MAAM;;eAZlB,CAeE,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBACb,IAAI,UAAU,SACb,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;OAAW,WAAU;OAAY,OAAO;OAAI,QAAQ;OAAM,CAAA;MAEvD,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,uBAAA,eAAD;MAAe,IAAG;MAAO,kBAAA;MAAiB,WAAU;gBACjD,IAAI;MACS,CAAA,CACZ;OAtBC,IAAI,MAsBL,CACN,CACE;;GAEL,qBAAqB,kBACpB,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;KACE,WAAU;KACV,eAAe;AACb,sBAAgB;AAChB,gBAAU,GAAG;AACb,cAAQ,MAAM;;eALlB,CAQE,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wCAET,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,uBAAA,eAAD;MAAe,IAAG;MAAO,kBAAA;MAAiB,WAAU;gBACjD;MACa,CAAA,CACZ;;IACF,CAAA;GAEK"}

package/dist/chunks/input-BvTrWtRn.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"input-BvTrWtRn.mjs","names":[],"sources":["../../src/components/forms/input/types.ts","../../src/components/forms/input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from \"react\";\n\nexport enum InputState {\n DEFAULT = \"default\",\n DISABLED = \"disabled\",\n ERROR = \"error\",\n SUCCESS = \"success\",\n}\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n label?: string;\n labelHint?: ReactNode;\n error?: string;\n helperText?: string;\n id?: string;\n extra?: string;\n state?: InputState;\n message?: string;\n leftIcon?: ReactNode;\n leftIconClassName?: string;\n rightIcon?: ReactNode;\n rightIconClassName?: string;\n icon?: ReactNode;\n iconClassName?: string;\n /** Custom background classes (e.g. \"ui:bg-ds-surface-1\"). */\n bgClassName?: string;\n}\n","import { forwardRef, useState } from \"react\";\nimport { type InputProps, InputState } from \"./types\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n label,\n labelHint,\n error,\n helperText,\n id,\n extra,\n placeholder,\n state = InputState.DEFAULT,\n disabled,\n message,\n leftIcon,\n leftIconClassName,\n rightIcon,\n rightIconClassName,\n icon,\n iconClassName,\n bgClassName = \"bg-ds-surface-1\",\n ...props\n },\n ref,\n ) => {\n const radius = 100;\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const resolvedState = disabled\n ? InputState.DISABLED\n : error\n ? InputState.ERROR\n : state;\n const isDisabled = resolvedState === InputState.DISABLED;\n const trailingIcon = rightIcon ?? icon;\n const trailingIconClassName = rightIcon\n ? rightIconClassName\n : (rightIconClassName ?? iconClassName);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const wrapperStateStyles: Record<InputState, string> = {\n [InputState.DISABLED]: \"border border-ds-border-field bg-ds-surface-1\",\n [InputState.ERROR]: \"border-destructive \",\n [InputState.SUCCESS]: \"border-success-border \",\n [InputState.DEFAULT]: \"border-ds-border-2 \",\n };\n\n const inputStateStyles: Record<InputState, string> = {\n [InputState.DISABLED]:\n \"border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60\",\n [InputState.ERROR]: \"text-destructive placeholder:text-destructive\",\n [InputState.SUCCESS]: \"text-success placeholder:text-success\",\n [InputState.DEFAULT]: \"text-ds-1\",\n };\n\n return (\n <div className=\"w-full\">\n {label || labelHint ? (\n <div\n className={mergeClassNames(\n \"mb-2 flex items-center gap-3\",\n label ? \"justify-between\" : \"justify-end\",\n )}\n >\n {label ? (\n <label\n htmlFor={id}\n className=\"block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n {label}\n </label>\n ) : null}\n {labelHint ? (\n <div className=\"shrink-0 text-xs text-ds-2\">{labelHint}</div>\n ) : null}\n </div>\n ) : null}\n\n <motion.div\n style={{\n backgroundImage: isDisabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!isDisabled ? handleMouseMove : undefined}\n onMouseEnter={!isDisabled ? () => setVisible(true) : undefined}\n onMouseLeave={!isDisabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/input rounded-lg transition duration-300\",\n isDisabled ? \"p-px\" : \"p-[2px] hover:border-ds-border-accent\",\n wrapperStateStyles[resolvedState],\n extra,\n )}\n >\n <div className=\"relative flex items-center\">\n {leftIcon ? (\n <div\n className={mergeClassNames(\n \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n leftIconClassName,\n )}\n style={{ insetInlineStart: 0, paddingInlineStart: \"0.75rem\" }}\n >\n {leftIcon}\n </div>\n ) : null}\n {trailingIcon ? (\n <div\n className={mergeClassNames(\n \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n trailingIconClassName,\n )}\n style={{ insetInlineEnd: 0, paddingInlineEnd: \"0.75rem\" }}\n >\n {trailingIcon}\n </div>\n ) : null}\n <input\n ref={ref}\n id={id}\n placeholder={placeholder}\n disabled={isDisabled}\n className={mergeClassNames(\n \"flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n bgClassName,\n inputStateStyles[resolvedState],\n className,\n )}\n style={{\n paddingInlineStart: leftIcon ? \"2.5rem\" : \"0.75rem\",\n paddingInlineEnd: trailingIcon ? \"2.5rem\" : \"0.75rem\",\n }}\n {...props}\n autoComplete=\"off\"\n />\n </div>\n </motion.div>\n\n {(error || message) && (\n <p\n className={mergeClassNames(\n \"text-sm font-medium mt-1\",\n error ? \"text-destructive\" : \"text-ds-2\",\n )}\n >\n {error || message}\n </p>\n )}\n {helperText && !error && !message && (\n <p className=\"text-sm text-ds-2 mt-1\">{helperText}</p>\n )}\n </div>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;AAEA,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,aAAU;AACV,YAAA,cAAW;AACX,YAAA,WAAQ;AACR,YAAA,aAAU;;KACX;;;ACFD,IAAa,QAAQ,YAEjB,EACE,YAAY,IACZ,OACA,WACA,OACA,YACA,IACA,OACA,aACA,QAAQ,WAAW,SACnB,UACA,SACA,UACA,mBACA,WACA,oBACA,MACA,eACA,cAAc,mBACd,GAAG,SAEL,QACG;CACH,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,gBAAgB,WAClB,WAAW,WACX,QACE,WAAW,QACX;CACN,MAAM,aAAa,kBAAkB,WAAW;CAChD,MAAM,eAAe,aAAa;CAClC,MAAM,wBAAwB,YAC1B,qBACC,sBAAsB;CAE3B,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;CAGjC,MAAM,qBAAiD;GACpD,WAAW,WAAW;GACtB,WAAW,QAAQ;GACnB,WAAW,UAAU;GACrB,WAAW,UAAU;EACvB;CAED,MAAM,mBAA+C;GAClD,WAAW,WACV;GACD,WAAW,QAAQ;GACnB,WAAW,UAAU;GACrB,WAAW,UAAU;EACvB;AAED,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SAAS,YACR,qBAAC,OAAD;IACE,WAAW,gBACT,gCACA,QAAQ,oBAAoB,cAC7B;cAJH,CAMG,QACC,oBAAC,SAAD;KACE,SAAS;KACT,WAAU;eAET;KACK,CAAA,GACN,MACH,YACC,oBAAC,OAAD;KAAK,WAAU;eAA8B;KAAgB,CAAA,GAC3D,KACA;QACJ;GAEJ,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,aACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,aAAa,kBAAkB,KAAA;IAC7C,cAAc,CAAC,mBAAmB,WAAW,KAAK,GAAG,KAAA;IACrD,cAAc,CAAC,mBAAmB,WAAW,MAAM,GAAG,KAAA;IACtD,WAAW,gBACT,kDACA,aAAa,SAAS,yCACtB,mBAAmB,gBACnB,MACD;cAED,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,WACC,oBAAC,OAAD;OACE,WAAW,gBACT,sEACA,kBACD;OACD,OAAO;QAAE,kBAAkB;QAAG,oBAAoB;QAAW;iBAE5D;OACG,CAAA,GACJ;MACH,eACC,oBAAC,OAAD;OACE,WAAW,gBACT,sEACA,sBACD;OACD,OAAO;QAAE,gBAAgB;QAAG,kBAAkB;QAAW;iBAExD;OACG,CAAA,GACJ;MACJ,oBAAC,SAAD;OACO;OACD;OACS;OACb,UAAU;OACV,WAAW,gBACT,6UACA,aACA,iBAAiB,gBACjB,UACD;OACD,OAAO;QACL,oBAAoB,WAAW,WAAW;QAC1C,kBAAkB,eAAe,WAAW;QAC7C;OACD,GAAI;OACJ,cAAa;OACb,CAAA;MACE;;IACK,CAAA;IAEX,SAAS,YACT,oBAAC,KAAD;IACE,WAAW,gBACT,4BACA,QAAQ,qBAAqB,YAC9B;cAEA,SAAS;IACR,CAAA;GAEL,cAAc,CAAC,SAAS,CAAC,WACxB,oBAAC,KAAD;IAAG,WAAU;cAA0B;IAAe,CAAA;GAEpD;;EAGX;AAED,MAAM,cAAc"}

package/dist/chunks/input-wAznik-_.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"input-wAznik-_.cjs","names":[],"sources":["../../src/components/forms/input/types.ts","../../src/components/forms/input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from \"react\";\n\nexport enum InputState {\n DEFAULT = \"default\",\n DISABLED = \"disabled\",\n ERROR = \"error\",\n SUCCESS = \"success\",\n}\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n label?: string;\n labelHint?: ReactNode;\n error?: string;\n helperText?: string;\n id?: string;\n extra?: string;\n state?: InputState;\n message?: string;\n leftIcon?: ReactNode;\n leftIconClassName?: string;\n rightIcon?: ReactNode;\n rightIconClassName?: string;\n icon?: ReactNode;\n iconClassName?: string;\n /** Custom background classes (e.g. \"ui:bg-ds-surface-1\"). */\n bgClassName?: string;\n}\n","import { forwardRef, useState } from \"react\";\nimport { type InputProps, InputState } from \"./types\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n label,\n labelHint,\n error,\n helperText,\n id,\n extra,\n placeholder,\n state = InputState.DEFAULT,\n disabled,\n message,\n leftIcon,\n leftIconClassName,\n rightIcon,\n rightIconClassName,\n icon,\n iconClassName,\n bgClassName = \"bg-ds-surface-1\",\n ...props\n },\n ref,\n ) => {\n const radius = 100;\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const resolvedState = disabled\n ? InputState.DISABLED\n : error\n ? InputState.ERROR\n : state;\n const isDisabled = resolvedState === InputState.DISABLED;\n const trailingIcon = rightIcon ?? icon;\n const trailingIconClassName = rightIcon\n ? rightIconClassName\n : (rightIconClassName ?? iconClassName);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const wrapperStateStyles: Record<InputState, string> = {\n [InputState.DISABLED]: \"border border-ds-border-field bg-ds-surface-1\",\n [InputState.ERROR]: \"border-destructive \",\n [InputState.SUCCESS]: \"border-success-border \",\n [InputState.DEFAULT]: \"border-ds-border-2 \",\n };\n\n const inputStateStyles: Record<InputState, string> = {\n [InputState.DISABLED]:\n \"border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60\",\n [InputState.ERROR]: \"text-destructive placeholder:text-destructive\",\n [InputState.SUCCESS]: \"text-success placeholder:text-success\",\n [InputState.DEFAULT]: \"text-ds-1\",\n };\n\n return (\n <div className=\"w-full\">\n {label || labelHint ? (\n <div\n className={mergeClassNames(\n \"mb-2 flex items-center gap-3\",\n label ? \"justify-between\" : \"justify-end\",\n )}\n >\n {label ? (\n <label\n htmlFor={id}\n className=\"block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n {label}\n </label>\n ) : null}\n {labelHint ? (\n <div className=\"shrink-0 text-xs text-ds-2\">{labelHint}</div>\n ) : null}\n </div>\n ) : null}\n\n <motion.div\n style={{\n backgroundImage: isDisabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!isDisabled ? handleMouseMove : undefined}\n onMouseEnter={!isDisabled ? () => setVisible(true) : undefined}\n onMouseLeave={!isDisabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/input rounded-lg transition duration-300\",\n isDisabled ? \"p-px\" : \"p-[2px] hover:border-ds-border-accent\",\n wrapperStateStyles[resolvedState],\n extra,\n )}\n >\n <div className=\"relative flex items-center\">\n {leftIcon ? (\n <div\n className={mergeClassNames(\n \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n leftIconClassName,\n )}\n style={{ insetInlineStart: 0, paddingInlineStart: \"0.75rem\" }}\n >\n {leftIcon}\n </div>\n ) : null}\n {trailingIcon ? (\n <div\n className={mergeClassNames(\n \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n trailingIconClassName,\n )}\n style={{ insetInlineEnd: 0, paddingInlineEnd: \"0.75rem\" }}\n >\n {trailingIcon}\n </div>\n ) : null}\n <input\n ref={ref}\n id={id}\n placeholder={placeholder}\n disabled={isDisabled}\n className={mergeClassNames(\n \"flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n bgClassName,\n inputStateStyles[resolvedState],\n className,\n )}\n style={{\n paddingInlineStart: leftIcon ? \"2.5rem\" : \"0.75rem\",\n paddingInlineEnd: trailingIcon ? \"2.5rem\" : \"0.75rem\",\n }}\n {...props}\n autoComplete=\"off\"\n />\n </div>\n </motion.div>\n\n {(error || message) && (\n <p\n className={mergeClassNames(\n \"text-sm font-medium mt-1\",\n error ? \"text-destructive\" : \"text-ds-2\",\n )}\n >\n {error || message}\n </p>\n )}\n {helperText && !error && !message && (\n <p className=\"text-sm text-ds-2 mt-1\">{helperText}</p>\n )}\n </div>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":"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"}

package/dist/chunks/multi-select-combobox-CdPcvP_S.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"multi-select-combobox-CdPcvP_S.cjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n label: string;\n value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n options: MultiSelectOption[];\n value: string[];\n onChange: (values: string[]) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n noOptionsText?: string;\n className?: string;\n bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n options,\n value = [],\n onChange,\n placeholder = \"Select...\",\n searchPlaceholder = \"Type to search...\",\n noOptionsText = \"No options found\",\n className,\n bgClassName = \"bg-ds-surface-1\",\n}) => {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n // Filter options by search\n const filteredOptions = options.filter((opt) =>\n opt.label.toLowerCase().includes(search.toLowerCase()),\n );\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleOptionClick = (optionValue: string) => {\n if (value.includes(optionValue)) {\n onChange(value.filter((v) => v !== optionValue));\n } else {\n onChange([...value, optionValue]);\n }\n };\n\n const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n e.stopPropagation();\n onChange(value.filter((v) => v !== optionValue));\n };\n\n const selectedLabels = value\n .map((v) => options.find((opt) => opt.value === v)?.label)\n .filter(Boolean);\n\n return (\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n setSearch(\"\");\n }\n }}\n animationClassName=\"origin-top-left\"\n panelClassName=\"top-[40px] left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n trigger={\n <motion.div\n style={{\n backgroundImage: useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={handleMouseMove}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n >\n <div\n className={mergeClassNames(\n \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n bgClassName,\n )}\n >\n <div className=\"flex flex-1 flex-wrap gap-1\">\n {selectedLabels.length > 0 ? (\n selectedLabels.map((label, index) => (\n <span\n key={value[index]}\n className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n >\n {label}\n <button\n type=\"button\"\n onMouseDown={(e) => e.stopPropagation()}\n onClick={(e) => handleRemoveTag(value[index], e)}\n className=\"ml-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n >\n <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n </button>\n </span>\n ))\n ) : (\n <span className=\"text-ds-2\">{placeholder}</span>\n )}\n </div>\n <span\n className={mergeClassNames(\n \"ml-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className=\"h-5 w-5\"\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {/* Sticky search input */}\n <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n <input\n autoFocus\n className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n placeholder={searchPlaceholder}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n {/* Scrollable options */}\n <div className=\"max-h-80 flex-1 overflow-auto\">\n {filteredOptions.length === 0 && (\n <div className=\"p-3 text-center text-sm text-ds-2\">\n {noOptionsText}\n </div>\n )}\n {filteredOptions.map((option) => {\n const isSelected = value.includes(option.value);\n return (\n <div\n key={option.value}\n className={mergeClassNames(\n \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n isSelected\n ? \"bg-ds-surface-2 text-ds-1\"\n : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n )}\n onClick={() => handleOptionClick(option.value)}\n >\n <span\n className={mergeClassNames(\n \"flex h-4 w-4 items-center justify-center rounded border transition\",\n isSelected\n ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n : \"border-ds-border-2\",\n )}\n >\n {isSelected && <CheckIcon width={12} height={12} />}\n </span>\n <span className=\"flex-1\">{option.label}</span>\n </div>\n );\n })}\n </div>\n </DropdownMenu>\n );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/multi-select-combobox-_nuc3cZ3.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"multi-select-combobox-_nuc3cZ3.mjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n label: string;\n value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n options: MultiSelectOption[];\n value: string[];\n onChange: (values: string[]) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n noOptionsText?: string;\n className?: string;\n bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n options,\n value = [],\n onChange,\n placeholder = \"Select...\",\n searchPlaceholder = \"Type to search...\",\n noOptionsText = \"No options found\",\n className,\n bgClassName = \"bg-ds-surface-1\",\n}) => {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n // Filter options by search\n const filteredOptions = options.filter((opt) =>\n opt.label.toLowerCase().includes(search.toLowerCase()),\n );\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleOptionClick = (optionValue: string) => {\n if (value.includes(optionValue)) {\n onChange(value.filter((v) => v !== optionValue));\n } else {\n onChange([...value, optionValue]);\n }\n };\n\n const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n e.stopPropagation();\n onChange(value.filter((v) => v !== optionValue));\n };\n\n const selectedLabels = value\n .map((v) => options.find((opt) => opt.value === v)?.label)\n .filter(Boolean);\n\n return (\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n setSearch(\"\");\n }\n }}\n animationClassName=\"origin-top-left\"\n panelClassName=\"top-[40px] left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n trigger={\n <motion.div\n style={{\n backgroundImage: useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={handleMouseMove}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n >\n <div\n className={mergeClassNames(\n \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n bgClassName,\n )}\n >\n <div className=\"flex flex-1 flex-wrap gap-1\">\n {selectedLabels.length > 0 ? (\n selectedLabels.map((label, index) => (\n <span\n key={value[index]}\n className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n >\n {label}\n <button\n type=\"button\"\n onMouseDown={(e) => e.stopPropagation()}\n onClick={(e) => handleRemoveTag(value[index], e)}\n className=\"ml-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n >\n <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n </button>\n </span>\n ))\n ) : (\n <span className=\"text-ds-2\">{placeholder}</span>\n )}\n </div>\n <span\n className={mergeClassNames(\n \"ml-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className=\"h-5 w-5\"\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {/* Sticky search input */}\n <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n <input\n autoFocus\n className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n placeholder={searchPlaceholder}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n {/* Scrollable options */}\n <div className=\"max-h-80 flex-1 overflow-auto\">\n {filteredOptions.length === 0 && (\n <div className=\"p-3 text-center text-sm text-ds-2\">\n {noOptionsText}\n </div>\n )}\n {filteredOptions.map((option) => {\n const isSelected = value.includes(option.value);\n return (\n <div\n key={option.value}\n className={mergeClassNames(\n \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n isSelected\n ? \"bg-ds-surface-2 text-ds-1\"\n : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n )}\n onClick={() => handleOptionClick(option.value)}\n >\n <span\n className={mergeClassNames(\n \"flex h-4 w-4 items-center justify-center rounded border transition\",\n isSelected\n ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n : \"border-ds-border-2\",\n )}\n >\n {isSelected && <CheckIcon width={12} height={12} />}\n </span>\n <span className=\"flex-1\">{option.label}</span>\n </div>\n );\n })}\n </div>\n </DropdownMenu>\n );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/radio-DOkKyKKL.mjs DELETED Viewed

@@ -1,44 +0,0 @@
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
-import { forwardRef, useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/forms/radio/Radio.tsx
-var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
-var colorValues = {
-	red: "var(--ds-color-danger)",
-	blue: "var(--ds-color-info)",
-	green: "var(--ds-color-success)",
-	yellow: "var(--ds-color-warning)",
-	teal: "var(--ds-brand-teal)",
-	primary: "var(--ds-color-accent)"
-};
-var Radio = forwardRef(({ className = "", label, error, id, color = "primary", bgClassName = "", ...props }, ref) => {
-	const generatedId = useId();
-	const radioId = id || `radio-${sanitizeId(generatedId)}`;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				ref,
-				type: "radio",
-				id: radioId,
-				style: { accentColor: colorValues[color] },
-				className: mergeClassNames("h-5 w-5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", bgClassName, className),
-				...props
-			}),
-			label && /* @__PURE__ */ jsx("label", {
-				htmlFor: radioId,
-				className: "text-sm font-medium leading-none cursor-pointer text-ds-1",
-				children: label
-			}),
-			error && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm font-medium text-destructive",
-				children: error
-			})
-		]
-	});
-});
-Radio.displayName = "Radio";
-//#endregion
-export { Radio as t };
-//# sourceMappingURL=radio-DOkKyKKL.mjs.map

package/dist/chunks/radio-DOkKyKKL.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"radio-DOkKyKKL.mjs","names":[],"sources":["../../src/components/forms/radio/Radio.tsx"],"sourcesContent":["import type { RadioProps, RadioColor } from \"./types\";\nimport { forwardRef, useId } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nconst colorValues: Record<RadioColor, string> = {\n red: \"var(--ds-color-danger)\",\n blue: \"var(--ds-color-info)\",\n green: \"var(--ds-color-success)\",\n yellow: \"var(--ds-color-warning)\",\n teal: \"var(--ds-brand-teal)\",\n primary: \"var(--ds-color-accent)\",\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n className = \"\",\n label,\n error,\n id,\n color = \"primary\",\n bgClassName = \"\",\n ...props\n },\n ref,\n ) => {\n const generatedId = useId();\n const radioId = id || `radio-${sanitizeId(generatedId)}`;\n\n return (\n <div className=\"flex items-center gap-2\">\n <input\n ref={ref}\n type=\"radio\"\n id={radioId}\n style={{ accentColor: colorValues[color] }}\n className={mergeClassNames(\n \"h-5 w-5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\",\n bgClassName,\n className,\n )}\n {...props}\n />\n {label && (\n <label\n htmlFor={radioId}\n className=\"text-sm font-medium leading-none cursor-pointer text-ds-1\"\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"mt-1 text-sm font-medium text-destructive\">{error}</p>\n )}\n </div>\n );\n },\n);\n\nRadio.displayName = \"Radio\";\n"],"mappings":";;;;AAKA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAM,cAA0C;CAC9C,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAED,IAAa,QAAQ,YAEjB,EACE,YAAY,IACZ,OACA,OACA,IACA,QAAQ,WACR,cAAc,IACd,GAAG,SAEL,QACG;CACH,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,SAAS,WAAW,YAAY;AAEtD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,SAAD;IACO;IACL,MAAK;IACL,IAAI;IACJ,OAAO,EAAE,aAAa,YAAY,QAAQ;IAC1C,WAAW,gBACT,0EACA,aACA,UACD;IACD,GAAI;IACJ,CAAA;GACD,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,MAAM,cAAc"}

package/dist/chunks/radio-DyQ3jF-M.cjs DELETED Viewed

@@ -1,50 +0,0 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/forms/radio/Radio.tsx
-var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
-var colorValues = {
-	red: "var(--ds-color-danger)",
-	blue: "var(--ds-color-info)",
-	green: "var(--ds-color-success)",
-	yellow: "var(--ds-color-warning)",
-	teal: "var(--ds-brand-teal)",
-	primary: "var(--ds-color-accent)"
-};
-var Radio = (0, react.forwardRef)(({ className = "", label, error, id, color = "primary", bgClassName = "", ...props }, ref) => {
-	const generatedId = (0, react.useId)();
-	const radioId = id || `radio-${sanitizeId(generatedId)}`;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				ref,
-				type: "radio",
-				id: radioId,
-				style: { accentColor: colorValues[color] },
-				className: require_utils.mergeClassNames("h-5 w-5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", bgClassName, className),
-				...props
-			}),
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				htmlFor: radioId,
-				className: "text-sm font-medium leading-none cursor-pointer text-ds-1",
-				children: label
-			}),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "mt-1 text-sm font-medium text-destructive",
-				children: error
-			})
-		]
-	});
-});
-Radio.displayName = "Radio";
-//#endregion
-Object.defineProperty(exports, "Radio", {
-	enumerable: true,
-	get: function() {
-		return Radio;
-	}
-});
-//# sourceMappingURL=radio-DyQ3jF-M.cjs.map

package/dist/chunks/radio-DyQ3jF-M.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"radio-DyQ3jF-M.cjs","names":[],"sources":["../../src/components/forms/radio/Radio.tsx"],"sourcesContent":["import type { RadioProps, RadioColor } from \"./types\";\nimport { forwardRef, useId } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nconst colorValues: Record<RadioColor, string> = {\n red: \"var(--ds-color-danger)\",\n blue: \"var(--ds-color-info)\",\n green: \"var(--ds-color-success)\",\n yellow: \"var(--ds-color-warning)\",\n teal: \"var(--ds-brand-teal)\",\n primary: \"var(--ds-color-accent)\",\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n className = \"\",\n label,\n error,\n id,\n color = \"primary\",\n bgClassName = \"\",\n ...props\n },\n ref,\n ) => {\n const generatedId = useId();\n const radioId = id || `radio-${sanitizeId(generatedId)}`;\n\n return (\n <div className=\"flex items-center gap-2\">\n <input\n ref={ref}\n type=\"radio\"\n id={radioId}\n style={{ accentColor: colorValues[color] }}\n className={mergeClassNames(\n \"h-5 w-5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\",\n bgClassName,\n className,\n )}\n {...props}\n />\n {label && (\n <label\n htmlFor={radioId}\n className=\"text-sm font-medium leading-none cursor-pointer text-ds-1\"\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"mt-1 text-sm font-medium text-destructive\">{error}</p>\n )}\n </div>\n );\n },\n);\n\nRadio.displayName = \"Radio\";\n"],"mappings":";;;;;AAKA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAM,cAA0C;CAC9C,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAED,IAAa,SAAA,GAAA,MAAA,aAET,EACE,YAAY,IACZ,OACA,OACA,IACA,QAAQ,WACR,cAAc,IACd,GAAG,SAEL,QACG;CACH,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,UAAU,MAAM,SAAS,WAAW,YAAY;AAEtD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACO;IACL,MAAK;IACL,IAAI;IACJ,OAAO,EAAE,aAAa,YAAY,QAAQ;IAC1C,WAAW,cAAA,gBACT,0EACA,aACA,UACD;IACD,GAAI;IACJ,CAAA;GACD,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,MAAM,cAAc"}

package/dist/chunks/select-B3tfHqQo.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"select-B3tfHqQo.mjs","names":[],"sources":["../../src/components/forms/select/Select.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SelectProps } from \"./types\";\n\nexport const Select = forwardRef(function SelectComponent(\n {\n className = \"\",\n containerClassName = \"\",\n triggerClassName = \"\",\n dropdownClassName = \"\",\n optionClassName = \"\",\n label,\n error,\n helperText,\n options,\n value,\n onChange,\n placeholder = \"Select...\",\n noOptionsText = \"No options\",\n disabled,\n bgClassName = \"bg-ds-surface-1\",\n size = \"default\",\n selectionIndicator = \"check\",\n ...props\n }: SelectProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [open, setOpen] = useState(false);\n const [visible, setVisible] = useState(false);\n const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n const selectedOptionRef = useRef<HTMLDivElement>(null);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n const isCompact = size === \"compact\";\n const selectedOption = options.find((option) => option.value === value);\n\n useEffect(() => {\n if (typeof ref === \"function\") {\n ref(hiddenSelectRef.current);\n return;\n }\n\n if (ref) {\n ref.current = hiddenSelectRef.current;\n }\n }, [ref]);\n\n useEffect(() => {\n if (!open || !selectedOptionRef.current) {\n return;\n }\n\n const frameId = window.requestAnimationFrame(() => {\n selectedOptionRef.current?.scrollIntoView({ block: \"nearest\" });\n });\n\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, [open, value]);\n\n const handleMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleSelect = (optionValue: string) => {\n if (onChange && hiddenSelectRef.current) {\n const syntheticEvent = {\n target: { value: optionValue, name: props.name },\n currentTarget: { value: optionValue, name: props.name },\n } as ChangeEvent<HTMLSelectElement>;\n\n onChange(syntheticEvent);\n }\n\n setOpen(false);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n setOpen((current) => !current);\n }\n\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n return (\n <div\n className={mergeClassNames(\n \"w-full\",\n isCompact ? \"min-w-0\" : \"min-w-48\",\n containerClassName,\n )}\n >\n {label ? (\n <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n ) : null}\n\n <select\n ref={hiddenSelectRef}\n className=\"sr-only\"\n value={value}\n onChange={onChange}\n disabled={disabled}\n {...props}\n >\n <option value=\"\">{placeholder}</option>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n if (disabled) {\n setOpen(false);\n return;\n }\n\n setOpen(nextOpen);\n }}\n panelClassName={mergeClassNames(\n \" left-0 top-[40px] z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\",\n isCompact ? \"max-h-56\" : \"max-h-60\",\n dropdownClassName,\n )}\n animationClassName=\"origin-top-left\"\n trigger={\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/select w-full rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n disabled\n ? \"border-none bg-ds-surface-1\"\n : error\n ? \"border-ds-state-error-border\"\n : \"border-ds-border-2\",\n )}\n >\n <div\n className={mergeClassNames(\n \"flex w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field transition duration-400 ease-in-out\",\n isCompact\n ? \"h-9 px-2.5 py-2 text-sm\"\n : \"h-10 px-3 py-2 text-sm\",\n bgClassName,\n disabled ? \"cursor-not-allowed opacity-50\" : \"text-ds-1\",\n error\n ? \"border-ds-state-error-border text-ds-state-error-text focus-visible:ring-ds-state-error-border\"\n : \"\",\n triggerClassName,\n )}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n >\n {selectedOption ? (\n <TruncatedText\n as=\"span\"\n showTitleOnHover\n className=\"flex-1 text-ds-1\"\n >\n {selectedOption.label}\n </TruncatedText>\n ) : (\n <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n {placeholder}\n </TruncatedText>\n )}\n\n <span\n className={mergeClassNames(\n \"ml-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className={isCompact ? \"h-4 w-4\" : \"h-5 w-5\"}\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {!disabled ? (\n <>\n {options.length === 0 ? (\n <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n ) : null}\n\n {options.map((option) => (\n <div\n key={option.value}\n ref={option.value === value ? selectedOptionRef : null}\n className={mergeClassNames(\n \"mx-1 my-1 flex cursor-pointer items-center rounded-md text-ds-1 transition\",\n isCompact\n ? \"gap-1.5 px-2.5 py-2 text-sm\"\n : \"gap-2 px-3 py-2 text-sm\",\n option.value === value\n ? \"bg-ds-accent-subtle font-semibold text-ds-1\"\n : \"\",\n \"hover:bg-ds-accent hover:text-ds-on-accent\",\n optionClassName,\n )}\n onClick={() => handleSelect(option.value)}\n >\n {selectionIndicator === \"check\" ? (\n <span\n className={mergeClassNames(\n \"flex items-center justify-center\",\n isCompact ? \"w-4\" : \"w-5\",\n )}\n >\n {option.value === value ? (\n <CheckIcon\n className=\"text-ds-1\"\n width={isCompact ? 16 : 18}\n height={isCompact ? 16 : 18}\n />\n ) : null}\n </span>\n ) : null}\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {option.label}\n </TruncatedText>\n </div>\n ))}\n </>\n ) : null}\n </DropdownMenu>\n\n {error ? (\n <p className=\"mt-1 text-sm font-medium text-ds-state-error-text\">\n {error}\n </p>\n ) : null}\n {helperText && !error ? (\n <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n ) : null}\n </div>\n );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":"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"}

package/dist/chunks/select-BwB9MsSv.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"select-BwB9MsSv.cjs","names":[],"sources":["../../src/components/forms/select/Select.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SelectProps } from \"./types\";\n\nexport const Select = forwardRef(function SelectComponent(\n {\n className = \"\",\n containerClassName = \"\",\n triggerClassName = \"\",\n dropdownClassName = \"\",\n optionClassName = \"\",\n label,\n error,\n helperText,\n options,\n value,\n onChange,\n placeholder = \"Select...\",\n noOptionsText = \"No options\",\n disabled,\n bgClassName = \"bg-ds-surface-1\",\n size = \"default\",\n selectionIndicator = \"check\",\n ...props\n }: SelectProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [open, setOpen] = useState(false);\n const [visible, setVisible] = useState(false);\n const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n const selectedOptionRef = useRef<HTMLDivElement>(null);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n const isCompact = size === \"compact\";\n const selectedOption = options.find((option) => option.value === value);\n\n useEffect(() => {\n if (typeof ref === \"function\") {\n ref(hiddenSelectRef.current);\n return;\n }\n\n if (ref) {\n ref.current = hiddenSelectRef.current;\n }\n }, [ref]);\n\n useEffect(() => {\n if (!open || !selectedOptionRef.current) {\n return;\n }\n\n const frameId = window.requestAnimationFrame(() => {\n selectedOptionRef.current?.scrollIntoView({ block: \"nearest\" });\n });\n\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, [open, value]);\n\n const handleMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleSelect = (optionValue: string) => {\n if (onChange && hiddenSelectRef.current) {\n const syntheticEvent = {\n target: { value: optionValue, name: props.name },\n currentTarget: { value: optionValue, name: props.name },\n } as ChangeEvent<HTMLSelectElement>;\n\n onChange(syntheticEvent);\n }\n\n setOpen(false);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n setOpen((current) => !current);\n }\n\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n return (\n <div\n className={mergeClassNames(\n \"w-full\",\n isCompact ? \"min-w-0\" : \"min-w-48\",\n containerClassName,\n )}\n >\n {label ? (\n <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n ) : null}\n\n <select\n ref={hiddenSelectRef}\n className=\"sr-only\"\n value={value}\n onChange={onChange}\n disabled={disabled}\n {...props}\n >\n <option value=\"\">{placeholder}</option>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n if (disabled) {\n setOpen(false);\n return;\n }\n\n setOpen(nextOpen);\n }}\n panelClassName={mergeClassNames(\n \" left-0 top-[40px] z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\",\n isCompact ? \"max-h-56\" : \"max-h-60\",\n dropdownClassName,\n )}\n animationClassName=\"origin-top-left\"\n trigger={\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/select w-full rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n disabled\n ? \"border-none bg-ds-surface-1\"\n : error\n ? \"border-ds-state-error-border\"\n : \"border-ds-border-2\",\n )}\n >\n <div\n className={mergeClassNames(\n \"flex w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field transition duration-400 ease-in-out\",\n isCompact\n ? \"h-9 px-2.5 py-2 text-sm\"\n : \"h-10 px-3 py-2 text-sm\",\n bgClassName,\n disabled ? \"cursor-not-allowed opacity-50\" : \"text-ds-1\",\n error\n ? \"border-ds-state-error-border text-ds-state-error-text focus-visible:ring-ds-state-error-border\"\n : \"\",\n triggerClassName,\n )}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n >\n {selectedOption ? (\n <TruncatedText\n as=\"span\"\n showTitleOnHover\n className=\"flex-1 text-ds-1\"\n >\n {selectedOption.label}\n </TruncatedText>\n ) : (\n <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n {placeholder}\n </TruncatedText>\n )}\n\n <span\n className={mergeClassNames(\n \"ml-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className={isCompact ? \"h-4 w-4\" : \"h-5 w-5\"}\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {!disabled ? (\n <>\n {options.length === 0 ? (\n <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n ) : null}\n\n {options.map((option) => (\n <div\n key={option.value}\n ref={option.value === value ? selectedOptionRef : null}\n className={mergeClassNames(\n \"mx-1 my-1 flex cursor-pointer items-center rounded-md text-ds-1 transition\",\n isCompact\n ? \"gap-1.5 px-2.5 py-2 text-sm\"\n : \"gap-2 px-3 py-2 text-sm\",\n option.value === value\n ? \"bg-ds-accent-subtle font-semibold text-ds-1\"\n : \"\",\n \"hover:bg-ds-accent hover:text-ds-on-accent\",\n optionClassName,\n )}\n onClick={() => handleSelect(option.value)}\n >\n {selectionIndicator === \"check\" ? (\n <span\n className={mergeClassNames(\n \"flex items-center justify-center\",\n isCompact ? \"w-4\" : \"w-5\",\n )}\n >\n {option.value === value ? (\n <CheckIcon\n className=\"text-ds-1\"\n width={isCompact ? 16 : 18}\n height={isCompact ? 16 : 18}\n />\n ) : null}\n </span>\n ) : null}\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {option.label}\n </TruncatedText>\n </div>\n ))}\n </>\n ) : null}\n </DropdownMenu>\n\n {error ? (\n <p className=\"mt-1 text-sm font-medium text-ds-state-error-text\">\n {error}\n </p>\n ) : null}\n {helperText && !error ? (\n <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n ) : null}\n </div>\n );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":"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"}

package/dist/chunks/sun-to-moon-button-A__wuc_4.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sun-to-moon-button-A__wuc_4.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n ThemeColorType,\n ThemeModeType,\n ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherButtonsProps {\n className?: string;\n}\n\nconst BRAND_OPTIONS: Array<{\n value: ThemeColorType;\n label: string;\n swatch: string;\n}> = [\n { value: \"purple\", label: \"Purple\", swatch: \"var(--ds-brand-purple)\" },\n { value: \"teal\", label: \"Teal\", swatch: \"var(--ds-brand-teal)\" },\n { value: \"yellow\", label: \"Yellow\", swatch: \"var(--ds-brand-yellow)\" },\n { value: \"green\", label: \"Green\", swatch: \"var(--ds-brand-green)\" },\n];\n\nconst VARIANT_OPTIONS: Array<{\n value: ThemeVariantType;\n label: string;\n}> = [\n { value: \"default\", label: \"Default\" },\n { value: \"alt\", label: \"Alt\" },\n];\n\nfunction ToggleButton({\n label,\n active,\n onClick,\n swatch,\n showBrandState = false,\n mode,\n}: {\n label: string;\n active: boolean;\n onClick: () => void;\n swatch?: string;\n showBrandState?: boolean;\n mode?: ThemeModeType;\n}) {\n const isLightMode = mode === \"light\";\n const toneStyle: CSSProperties | undefined = (() => {\n if (!showBrandState || !swatch) {\n return undefined;\n }\n\n if (isLightMode) {\n return {\n borderColor: active ? swatch : \"var(--ds-border-2)\",\n backgroundColor: active\n ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n : \"#ffffff\",\n color: active\n ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n : \"var(--ds-text-2)\",\n boxShadow: active\n ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n : \"none\",\n };\n }\n\n return {\n borderColor: active\n ? swatch\n : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n backgroundColor: active\n ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n };\n })();\n\n return (\n <Button\n variant=\"secondary\"\n size=\"small\"\n onClick={onClick}\n className={mergeClassNames(\n \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n active\n ? \"border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm\"\n : \"border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1\",\n showBrandState && isLightMode\n ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n : null,\n showBrandState && active ? \"text-ds-1\" : null,\n )}\n style={toneStyle}\n aria-pressed={active}\n >\n {swatch ? (\n <span\n className={mergeClassNames(\n \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n active\n ? isLightMode\n ? \"scale-110 ring-2 ring-black/15\"\n : \"scale-110 ring-2 ring-white/35\"\n : \"scale-100 opacity-90\",\n )}\n style={{ backgroundColor: swatch }}\n aria-hidden=\"true\"\n />\n ) : null}\n <span>{label}</span>\n </Button>\n );\n}\n\nexport default function ThemeSwitcherButtons({\n className,\n}: ThemeSwitcherButtonsProps) {\n const { mode, theme, variant, setMode, setTheme, setVariant } =\n useThemeContext();\n\n return (\n <div\n className={mergeClassNames(\n \"w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"space-y-3\">\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n Mode\n </p>\n <div className=\"flex flex-wrap gap-2\">\n <ToggleButton\n label=\"Light\"\n active={mode === \"light\"}\n onClick={() => setMode(\"light\")}\n />\n <ToggleButton\n label=\"Dark\"\n active={mode === \"dark\"}\n onClick={() => setMode(\"dark\")}\n />\n </div>\n </div>\n\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n Brand\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {BRAND_OPTIONS.map((option) => (\n <ToggleButton\n key={option.value}\n label={option.label}\n active={theme === option.value}\n onClick={() => setTheme(option.value)}\n swatch={option.swatch}\n showBrandState\n mode={mode}\n />\n ))}\n </div>\n </div>\n\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n Variant\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {VARIANT_OPTIONS.map((option) => (\n <ToggleButton\n key={option.value}\n label={option.label}\n active={variant === option.value}\n onClick={() => setVariant(option.value)}\n />\n ))}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/chunks/sun-to-moon-button-azXKWDYT.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"sun-to-moon-button-azXKWDYT.mjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/ThemeSwitcherButtons.tsx"],"sourcesContent":["import type {\n ThemeColorType,\n ThemeModeType,\n ThemeVariantType,\n} from \"../../../foundations/theme\";\nimport { useThemeContext } from \"../../../foundations/theme\";\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CSSProperties } from \"react\";\n\nexport interface ThemeSwitcherButtonsProps {\n className?: string;\n}\n\nconst BRAND_OPTIONS: Array<{\n value: ThemeColorType;\n label: string;\n swatch: string;\n}> = [\n { value: \"purple\", label: \"Purple\", swatch: \"var(--ds-brand-purple)\" },\n { value: \"teal\", label: \"Teal\", swatch: \"var(--ds-brand-teal)\" },\n { value: \"yellow\", label: \"Yellow\", swatch: \"var(--ds-brand-yellow)\" },\n { value: \"green\", label: \"Green\", swatch: \"var(--ds-brand-green)\" },\n];\n\nconst VARIANT_OPTIONS: Array<{\n value: ThemeVariantType;\n label: string;\n}> = [\n { value: \"default\", label: \"Default\" },\n { value: \"alt\", label: \"Alt\" },\n];\n\nfunction ToggleButton({\n label,\n active,\n onClick,\n swatch,\n showBrandState = false,\n mode,\n}: {\n label: string;\n active: boolean;\n onClick: () => void;\n swatch?: string;\n showBrandState?: boolean;\n mode?: ThemeModeType;\n}) {\n const isLightMode = mode === \"light\";\n const toneStyle: CSSProperties | undefined = (() => {\n if (!showBrandState || !swatch) {\n return undefined;\n }\n\n if (isLightMode) {\n return {\n borderColor: active ? swatch : \"var(--ds-border-2)\",\n backgroundColor: active\n ? `color-mix(in srgb, ${swatch} 12%, #ffffff)`\n : \"#ffffff\",\n color: active\n ? `color-mix(in srgb, ${swatch} 76%, var(--ds-text-1))`\n : \"var(--ds-text-2)\",\n boxShadow: active\n ? `0 0 0 1px color-mix(in srgb, ${swatch} 24%, transparent)`\n : \"none\",\n };\n }\n\n return {\n borderColor: active\n ? swatch\n : `color-mix(in srgb, ${swatch} 42%, var(--ds-border-3))`,\n backgroundColor: active\n ? `color-mix(in srgb, ${swatch} 16%, var(--ds-surface-1))`\n : `color-mix(in srgb, ${swatch} 6%, var(--ds-surface-1))`,\n };\n })();\n\n return (\n <Button\n variant=\"secondary\"\n size=\"small\"\n onClick={onClick}\n className={mergeClassNames(\n \"group rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200\",\n active\n ? \"border-ds-border-1 bg-ds-surface-2 text-ds-1 shadow-sm\"\n : \"border-ds-border-3 bg-ds-surface-1 text-ds-2 hover:border-ds-border-2 hover:text-ds-1\",\n showBrandState && isLightMode\n ? \"bg-ds-surface-1! hover:bg-ds-surface-1!\"\n : null,\n showBrandState && active ? \"text-ds-1\" : null,\n )}\n style={toneStyle}\n aria-pressed={active}\n >\n {swatch ? (\n <span\n className={mergeClassNames(\n \"h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition-transform duration-200 group-hover:scale-110\",\n active\n ? isLightMode\n ? \"scale-110 ring-2 ring-black/15\"\n : \"scale-110 ring-2 ring-white/35\"\n : \"scale-100 opacity-90\",\n )}\n style={{ backgroundColor: swatch }}\n aria-hidden=\"true\"\n />\n ) : null}\n <span>{label}</span>\n </Button>\n );\n}\n\nexport default function ThemeSwitcherButtons({\n className,\n}: ThemeSwitcherButtonsProps) {\n const { mode, theme, variant, setMode, setTheme, setVariant } =\n useThemeContext();\n\n return (\n <div\n className={mergeClassNames(\n \"w-full rounded-2xl border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"space-y-3\">\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n Mode\n </p>\n <div className=\"flex flex-wrap gap-2\">\n <ToggleButton\n label=\"Light\"\n active={mode === \"light\"}\n onClick={() => setMode(\"light\")}\n />\n <ToggleButton\n label=\"Dark\"\n active={mode === \"dark\"}\n onClick={() => setMode(\"dark\")}\n />\n </div>\n </div>\n\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n Brand\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {BRAND_OPTIONS.map((option) => (\n <ToggleButton\n key={option.value}\n label={option.label}\n active={theme === option.value}\n onClick={() => setTheme(option.value)}\n swatch={option.swatch}\n showBrandState\n mode={mode}\n />\n ))}\n </div>\n </div>\n\n <div>\n <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-ds-3\">\n Variant\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {VARIANT_OPTIONS.map((option) => (\n <ToggleButton\n key={option.value}\n label={option.label}\n active={variant === option.value}\n onClick={() => setVariant(option.value)}\n />\n ))}\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;AAcA,IAAM,gBAID;CACH;EAAE,OAAO;EAAU,OAAO;EAAU,QAAQ;EAA0B;CACtE;EAAE,OAAO;EAAQ,OAAO;EAAQ,QAAQ;EAAwB;CAChE;EAAE,OAAO;EAAU,OAAO;EAAU,QAAQ;EAA0B;CACtE;EAAE,OAAO;EAAS,OAAO;EAAS,QAAQ;EAAyB;CACpE;AAED,IAAM,kBAGD,CACH;CAAE,OAAO;CAAW,OAAO;CAAW,EACtC;CAAE,OAAO;CAAO,OAAO;CAAO,CAC/B;AAED,SAAS,aAAa,EACpB,OACA,QACA,SACA,QACA,iBAAiB,OACjB,QAQC;CACD,MAAM,cAAc,SAAS;CAC7B,MAAM,mBAA8C;AAClD,MAAI,CAAC,kBAAkB,CAAC,OACtB;AAGF,MAAI,YACF,QAAO;GACL,aAAa,SAAS,SAAS;GAC/B,iBAAiB,SACb,sBAAsB,OAAO,kBAC7B;GACJ,OAAO,SACH,sBAAsB,OAAO,2BAC7B;GACJ,WAAW,SACP,gCAAgC,OAAO,sBACvC;GACL;AAGH,SAAO;GACL,aAAa,SACT,SACA,sBAAsB,OAAO;GACjC,iBAAiB,SACb,sBAAsB,OAAO,8BAC7B,sBAAsB,OAAO;GAClC;KACC;AAEJ,QACE,qBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACI;EACT,WAAW,gBACT,2FACA,SACI,2DACA,yFACJ,kBAAkB,cACd,4CACA,MACJ,kBAAkB,SAAS,cAAc,KAC1C;EACD,OAAO;EACP,gBAAc;YAfhB,CAiBG,SACC,oBAAC,QAAD;GACE,WAAW,gBACT,yGACA,SACI,cACE,mCACA,mCACF,uBACL;GACD,OAAO,EAAE,iBAAiB,QAAQ;GAClC,eAAY;GACZ,CAAA,GACA,MACJ,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACb;;;AAIb,SAAwB,qBAAqB,EAC3C,aAC4B;CAC5B,MAAM,EAAE,MAAM,OAAO,SAAS,SAAS,UAAU,eAC/C,iBAAiB;AAEnB,QACE,oBAAC,OAAD;EACE,WAAW,gBACT,8EACA,UACD;YAED,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAU;eAAuE;KAEhF,CAAA,EACJ,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,cAAD;MACE,OAAM;MACN,QAAQ,SAAS;MACjB,eAAe,QAAQ,QAAQ;MAC/B,CAAA,EACF,oBAAC,cAAD;MACE,OAAM;MACN,QAAQ,SAAS;MACjB,eAAe,QAAQ,OAAO;MAC9B,CAAA,CACE;OACF,EAAA,CAAA;IAEN,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAU;eAAuE;KAEhF,CAAA,EACJ,oBAAC,OAAD;KAAK,WAAU;eACZ,cAAc,KAAK,WAClB,oBAAC,cAAD;MAEE,OAAO,OAAO;MACd,QAAQ,UAAU,OAAO;MACzB,eAAe,SAAS,OAAO,MAAM;MACrC,QAAQ,OAAO;MACf,gBAAA;MACM;MACN,EAPK,OAAO,MAOZ,CACF;KACE,CAAA,CACF,EAAA,CAAA;IAEN,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAU;eAAuE;KAEhF,CAAA,EACJ,oBAAC,OAAD;KAAK,WAAU;eACZ,gBAAgB,KAAK,WACpB,oBAAC,cAAD;MAEE,OAAO,OAAO;MACd,QAAQ,YAAY,OAAO;MAC3B,eAAe,WAAW,OAAO,MAAM;MACvC,EAJK,OAAO,MAIZ,CACF;KACE,CAAA,CACF,EAAA,CAAA;IACF;;EACF,CAAA"}

package/dist/chunks/switch-C1gKE0m0.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"switch-C1gKE0m0.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n direction: string | undefined,\n): \"ltr\" | \"rtl\" {\n if (direction === \"rtl\" || direction === \"ltr\") {\n return direction;\n }\n\n if (typeof document !== \"undefined\") {\n const explicitDirection =\n document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n return explicitDirection;\n }\n }\n\n if (\n typeof navigator !== \"undefined\" &&\n rtlLanguages.test(navigator.language)\n ) {\n return \"rtl\";\n }\n\n return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n const generatedId = useId();\n const switchId = id || `switch-${sanitizeId(generatedId)}`;\n const isRtl = resolveDirection(dir) === \"rtl\";\n const containerClasses = `flex items-center gap-2 ${className}`\n .trim()\n .replace(/\\s+/g, \" \");\n\n return (\n <div className={containerClasses} dir={dir}>\n <label\n htmlFor={switchId}\n style={{\n borderRadius: \"var(--border-radius-full, 9999px)\",\n ...(checked ? {} : { background: \"#E0E5F2\" }),\n }}\n className={`\n relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n disabled:cursor-not-allowed disabled:opacity-50\n ${checked ? \"bg-ds-accent\" : \"\"}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n >\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n className=\"sr-only\"\n checked={checked}\n {...props}\n />\n <span\n className={`\n pointer-events-none\n inline-block\n h-4\n w-4\n transform\n rounded-full\n bg-ds-surface-1\n shadow-lg\n ring-0\n transition-transform\n duration-300\n ease-in-out\n ${checked\n ? isRtl\n ? \"translate-x-1\"\n : \"translate-x-6\"\n : isRtl\n ? \"translate-x-6\"\n : \"translate-x-1\"}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n />\n </label>\n {label && (\n <label\n htmlFor={switchId}\n className={`cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${\n isRtl ? \"text-right\" : \"text-left\"\n }`}\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n </div>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAC3E,IAAM,eAAe;AAErB,SAAS,iBACP,WACe;AACf,KAAI,cAAc,SAAS,cAAc,MACvC,QAAO;AAGT,KAAI,OAAO,aAAa,aAAa;EACnC,MAAM,oBACJ,SAAS,gBAAgB,aAAa,MAAM,IAAI,KAAA;AAElD,MAAI,sBAAsB,SAAS,sBAAsB,MACvD,QAAO;;AAIX,KACE,OAAO,cAAc,eACrB,aAAa,KAAK,UAAU,SAAS,CAErC,QAAO;AAGT,QAAO;;AAGT,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,iBAAiB,IAAI,KAAK;AAKxC,QACE,qBAAC,OAAD;EAAK,WALkB,2BAA2B,YACjD,MAAM,CACN,QAAQ,QAAQ,IAGD;EAAuB;YAAvC;GACE,qBAAC,SAAD;IACE,SAAS;IACT,OAAO;KACL,cAAc;KACd,GAAI,UAAU,EAAE,GAAG,EAAE,YAAY,WAAW;KAC7C;IACD,WAAW;;;;cAIP,UAAU,iBAAiB,GAAG;YAE/B,MAAM,CACN,QAAQ,QAAQ,IAAI;cAbzB,CAeE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,oBAAC,QAAD,EACE,WAAW;;;;;;;;;;;;;gBAaP,UACR,QACE,kBACA,kBACF,QACE,kBACA,gBAAgB;cAEX,MAAM,CACN,QAAQ,QAAQ,IAAI,EACvB,CAAA,CACI;;GACP,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAW,uHACT,QAAQ,eAAe;cAGxB;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/chunks/switch-DPyzVrNh.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"switch-DPyzVrNh.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\nconst rtlLanguages = /^(ar|fa|ur|he)(-|$)/i;\n\nfunction resolveDirection(\n direction: string | undefined,\n): \"ltr\" | \"rtl\" {\n if (direction === \"rtl\" || direction === \"ltr\") {\n return direction;\n }\n\n if (typeof document !== \"undefined\") {\n const explicitDirection =\n document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n if (explicitDirection === \"rtl\" || explicitDirection === \"ltr\") {\n return explicitDirection;\n }\n }\n\n if (\n typeof navigator !== \"undefined\" &&\n rtlLanguages.test(navigator.language)\n ) {\n return \"rtl\";\n }\n\n return \"ltr\";\n}\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n ({ className = \"\", label, error, id, checked, dir, ...props }, ref) => {\n const generatedId = useId();\n const switchId = id || `switch-${sanitizeId(generatedId)}`;\n const isRtl = resolveDirection(dir) === \"rtl\";\n const containerClasses = `flex items-center gap-2 ${className}`\n .trim()\n .replace(/\\s+/g, \" \");\n\n return (\n <div className={containerClasses} dir={dir}>\n <label\n htmlFor={switchId}\n style={{\n borderRadius: \"var(--border-radius-full, 9999px)\",\n ...(checked ? {} : { background: \"#E0E5F2\" }),\n }}\n className={`\n relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:ring-offset-2 focus-visible:ring-offset-ds-surface-1\n disabled:cursor-not-allowed disabled:opacity-50\n ${checked ? \"bg-ds-accent\" : \"\"}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n >\n <input\n ref={ref}\n type=\"checkbox\"\n id={switchId}\n className=\"sr-only\"\n checked={checked}\n {...props}\n />\n <span\n className={`\n pointer-events-none\n inline-block\n h-4\n w-4\n transform\n rounded-full\n bg-ds-surface-1\n shadow-lg\n ring-0\n transition-transform\n duration-300\n ease-in-out\n ${checked\n ? isRtl\n ? \"translate-x-1\"\n : \"translate-x-6\"\n : isRtl\n ? \"translate-x-6\"\n : \"translate-x-1\"}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n />\n </label>\n {label && (\n <label\n htmlFor={switchId}\n className={`cursor-pointer text-sm font-medium leading-none text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${\n isRtl ? \"text-right\" : \"text-left\"\n }`}\n >\n {label}\n </label>\n )}\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n </div>\n );\n },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAC3E,IAAM,eAAe;AAErB,SAAS,iBACP,WACe;AACf,KAAI,cAAc,SAAS,cAAc,MACvC,QAAO;AAGT,KAAI,OAAO,aAAa,aAAa;EACnC,MAAM,oBACJ,SAAS,gBAAgB,aAAa,MAAM,IAAI,KAAA;AAElD,MAAI,sBAAsB,SAAS,sBAAsB,MACvD,QAAO;;AAIX,KACE,OAAO,cAAc,eACrB,aAAa,KAAK,UAAU,SAAS,CAErC,QAAO;AAGT,QAAO;;AAGT,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,KAAK,GAAG,SAAS,QAAQ;CACrE,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;CACxD,MAAM,QAAQ,iBAAiB,IAAI,KAAK;AAKxC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WALkB,2BAA2B,YACjD,MAAM,CACN,QAAQ,QAAQ,IAGD;EAAuB;YAAvC;GACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,OAAO;KACL,cAAc;KACd,GAAI,UAAU,EAAE,GAAG,EAAE,YAAY,WAAW;KAC7C;IACD,WAAW;;;;cAIP,UAAU,iBAAiB,GAAG;YAE/B,MAAM,CACN,QAAQ,QAAQ,IAAI;cAbzB,CAeE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW;;;;;;;;;;;;;gBAaP,UACR,QACE,kBACA,kBACF,QACE,kBACA,gBAAgB;cAEX,MAAM,CACN,QAAQ,QAAQ,IAAI,EACvB,CAAA,CACI;;GACP,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAW,uHACT,QAAQ,eAAe;cAGxB;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}