@fab1o978/react-ui 0.1.0

package/dist/components/Button/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/styles/tokens.scss","../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"sass:color\";\n\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\");\n\n// Accent di default — cambia qui per aggiornare tutta la libreria\n$accent: #3b82f6;\n\n:root {\n  // Accent scale — derivata da $accent a compile time\n  --accent:        #{$accent};\n  --accent-dot:    #{color.scale($accent, $lightness: 12%)};\n  --accent-track:  #{$accent};\n  --accent-ring:   #{$accent};\n  --accent-glow:   #{color.change($accent, $alpha: 0.3)};\n  --accent-light:  #{color.scale($accent, $lightness: 45%, $saturation: -20%)};\n\n  // Primary scale (mantenuta per retrocompatibilità con Button, Badge, Input)\n  --color-primary-50:  #{color.scale($accent, $lightness: 49%, $saturation: -30%)};\n  --color-primary-100: #{color.scale($accent, $lightness: 42%, $saturation: -15%)};\n  --color-primary-400: #{color.scale($accent, $lightness: 12%)};\n  --color-primary-500: #{$accent};\n  --color-primary-600: #{color.scale($accent, $lightness: -10%)};\n  --color-primary-700: #{color.scale($accent, $lightness: -20%)};\n\n  // Neutral\n  --color-neutral-0:   #ffffff;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-600: #4b5563;\n  --color-neutral-900: #111827;\n\n  // Semantic\n  --color-success-500: #22c55e;\n  --color-success-600: #16a34a;\n  --color-danger-500:  #ef4444;\n  --color-danger-600:  #dc2626;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n\n  // Typography\n  --font-family-base: \"Inter\", system-ui, -apple-system, sans-serif;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n\n  // Spacing\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n\n  // Radius\n  --radius-sm:   0.25rem;\n  --radius-md:   0.375rem;\n  --radius-lg:   0.5rem;\n  --radius-full: 9999px;\n\n  // Shadows\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n\n  // Transitions\n  --transition-fast: 150ms ease;\n\n  // Surface (background di card/panel)\n  --color-surface:          #ffffff;\n  --color-surface-elevated: #ffffff;\n}\n\n// ─── Dark theme ────────────────────────────────────────────────────────────────\n// Applicato via data-theme=\"dark\" sull'elemento root (gestito da Storybook decorator\n// e dall'app consumer). I componenti non devono fare nulla di speciale: basta che\n// usino i token var() e riceveranno automaticamente i valori dark.\n\n[data-theme=\"dark\"] {\n  // Neutral (scala invertita)\n  --color-neutral-0:   #0f172a;\n  --color-neutral-100: #1e293b;\n  --color-neutral-200: #334155;\n  --color-neutral-400: #94a3b8;\n  --color-neutral-600: #cbd5e1;\n  --color-neutral-900: #f8fafc;\n\n  // Surface\n  --color-surface:          #1e293b;\n  --color-surface-elevated: #273549;\n\n  // Primary scale dark (per il default accent blu — le sfumature chiare diventano scure)\n  --color-primary-50:  #172554;\n  --color-primary-100: #1e3a8a;\n  // 400 / 500 / 600 / 700 rimangono invariati (abbastanza saturi su bg scuro)\n\n  // Accent light: variante scura\n  --accent-light: #172554;\n\n  // Shadows (più forti su bg scuro)\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);\n}\n","@import \"../../styles/tokens.scss\";\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-2);\n  font-family: var(--font-family-base);\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  transition: background-color var(--transition-fast),\n    border-color var(--transition-fast), color var(--transition-fast),\n    box-shadow var(--transition-fast);\n  white-space: nowrap;\n  text-decoration: none;\n  outline-offset: 2px;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--color-primary-500);\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Variants */\n.primary {\n  background-color: var(--color-primary-600);\n  color: var(--color-neutral-0);\n}\n.primary:hover:not(:disabled) {\n  background-color: var(--color-primary-700);\n}\n\n.secondary {\n  background-color: var(--color-neutral-0);\n  color: var(--color-neutral-900);\n  border-color: var(--color-neutral-200);\n  box-shadow: var(--shadow-sm);\n}\n.secondary:hover:not(:disabled) {\n  background-color: var(--color-neutral-100);\n}\n\n.danger {\n  background-color: var(--color-danger-500);\n  color: var(--color-neutral-0);\n}\n.danger:hover:not(:disabled) {\n  background-color: var(--color-danger-600);\n}\n\n.ghost {\n  background-color: transparent;\n  color: var(--color-neutral-600);\n}\n.ghost:hover:not(:disabled) {\n  background-color: var(--color-neutral-100);\n  color: var(--color-neutral-900);\n}\n\n/* Sizes */\n.sm {\n  font-size: var(--font-size-xs);\n  padding: var(--spacing-1) var(--spacing-3);\n  height: 2rem;\n}\n\n.md {\n  font-size: var(--font-size-sm);\n  padding: var(--spacing-2) var(--spacing-4);\n  height: 2.5rem;\n}\n\n.lg {\n  font-size: var(--font-size-md);\n  padding: var(--spacing-3) var(--spacing-4);\n  height: 3rem;\n}\n\n.fullWidth {\n  width: 100%;\n}\n\n/* Loading */\n.loading {\n  position: relative;\n}\n\n.spinner {\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-full);\n  animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n"],"mappings":"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","names":["button","primary","secondary","danger","ghost","sm","md","lg","fullWidth","loading","spinner","spin"]}

package/dist/components/Button/index.d.cts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/Button/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/Button/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Button/Button.tsx
+
+// src/components/Button/Button.module.scss
+var Button_module_default = {
+  button: "Button_module_button2",
+  primary: "Button_module_primary2",
+  secondary: "Button_module_secondary2",
+  danger: "Button_module_danger2",
+  ghost: "Button_module_ghost2",
+  sm: "Button_module_sm2",
+  md: "Button_module_md2",
+  lg: "Button_module_lg2",
+  fullWidth: "Button_module_fullWidth2",
+  loading: "Button_module_loading2",
+  spinner: "Button_module_spinner2",
+  spin: "Button_module_spin2"
+};
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    fullWidth = false,
+    disabled,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: disabled || loading,
+        className: [
+          Button_module_default.button,
+          Button_module_default[variant],
+          Button_module_default[size],
+          fullWidth ? Button_module_default.fullWidth : "",
+          loading ? Button_module_default.loading : "",
+          className ?? ""
+        ].filter(Boolean).join(" "),
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx("span", { className: Button_module_default.spinner, "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button/Button.module.scss","../../../src/components/Button/Button.tsx"],"names":["button","primary","secondary","danger","ghost","sm","md","lg","fullWidth","loading","spinner","spin"],"mappings":";;;;;;AAAA,IAAA,qBAAA,GAAA;AAAA,EA8DC,MAAA,EAAAA,uBAAAA;AAAA,EA2BA,OAAA,EAAAC,wBAAAA;AAAA,EASA,SAAA,EAAAC,0BAAAA;AAAA,EAWA,MAAA,EAAAC,uBAAAA;AAAA,EASA,KAAA,EAAAC,sBAAAA;AAAA,EAWA,EAAA,EAAAC,mBAAAA;AAAA,EAMA,EAAA,EAAAC,mBAAAA;AAAA,EAMA,EAAA,EAAAC,mBAAAA;AAAA,EAMA,SAAA,EAAAC,0BAAAA;AAAA,EAKA,OAAA,EAAAC,wBAAAA;AAAA,EAIA,OAAA,EAAAC,wBAAAA;AAAA,EAMY,IAAA,EAAAC;AAAA,CAAA;ACpJN,IAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,OAAA,GAAU,SAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,KAAA;AAAA,IACV,SAAA,GAAY,KAAA;AAAA,IACZ,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,UAAU,QAAA,IAAY,OAAA;AAAA,QACtB,SAAA,EAAW;AAAA,UACT,qBAAA,CAAO,MAAA;AAAA,UACP,sBAAO,OAAO,CAAA;AAAA,UACd,sBAAO,IAAI,CAAA;AAAA,UACX,SAAA,GAAY,sBAAO,SAAA,GAAY,EAAA;AAAA,UAC/B,OAAA,GAAU,sBAAO,OAAA,GAAU,EAAA;AAAA,UAC3B,SAAA,IAAa;AAAA,SACf,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA,wBAAY,MAAA,EAAA,EAAK,SAAA,EAAW,qBAAA,CAAO,OAAA,EAAS,eAAY,MAAA,EAAO,CAAA;AAAA,UAC/D;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\");\n:root {\n  --accent: #3b82f6;\n  --accent-dot: rgb(82.52, 145, 247.08);\n  --accent-track: #3b82f6;\n  --accent-ring: #3b82f6;\n  --accent-glow: rgba(59, 130, 246, 0.3);\n  --accent-light: rgb(157.485, 188.725, 239.765);\n  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);\n  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);\n  --color-primary-400: rgb(82.52, 145, 247.08);\n  --color-primary-500: #3b82f6;\n  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);\n  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);\n  --color-neutral-0: #ffffff;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-600: #4b5563;\n  --color-neutral-900: #111827;\n  --color-success-500: #22c55e;\n  --color-success-600: #16a34a;\n  --color-danger-500: #ef4444;\n  --color-danger-600: #dc2626;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n  --font-family-base: \"Inter\", system-ui, -apple-system, sans-serif;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --transition-fast: 150ms ease;\n  --color-surface: #ffffff;\n  --color-surface-elevated: #ffffff;\n}\n\n[data-theme=dark] {\n  --color-neutral-0: #0f172a;\n  --color-neutral-100: #1e293b;\n  --color-neutral-200: #334155;\n  --color-neutral-400: #94a3b8;\n  --color-neutral-600: #cbd5e1;\n  --color-neutral-900: #f8fafc;\n  --color-surface: #1e293b;\n  --color-surface-elevated: #273549;\n  --color-primary-50: #172554;\n  --color-primary-100: #1e3a8a;\n  --accent-light: #172554;\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-2);\n  font-family: var(--font-family-base);\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);\n  white-space: nowrap;\n  text-decoration: none;\n  outline-offset: 2px;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--color-primary-500);\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Variants */\n.primary {\n  background-color: var(--color-primary-600);\n  color: var(--color-neutral-0);\n}\n\n.primary:hover:not(:disabled) {\n  background-color: var(--color-primary-700);\n}\n\n.secondary {\n  background-color: var(--color-neutral-0);\n  color: var(--color-neutral-900);\n  border-color: var(--color-neutral-200);\n  box-shadow: var(--shadow-sm);\n}\n\n.secondary:hover:not(:disabled) {\n  background-color: var(--color-neutral-100);\n}\n\n.danger {\n  background-color: var(--color-danger-500);\n  color: var(--color-neutral-0);\n}\n\n.danger:hover:not(:disabled) {\n  background-color: var(--color-danger-600);\n}\n\n.ghost {\n  background-color: transparent;\n  color: var(--color-neutral-600);\n}\n\n.ghost:hover:not(:disabled) {\n  background-color: var(--color-neutral-100);\n  color: var(--color-neutral-900);\n}\n\n/* Sizes */\n.sm {\n  font-size: var(--font-size-xs);\n  padding: var(--spacing-1) var(--spacing-3);\n  height: 2rem;\n}\n\n.md {\n  font-size: var(--font-size-sm);\n  padding: var(--spacing-2) var(--spacing-4);\n  height: 2.5rem;\n}\n\n.lg {\n  font-size: var(--font-size-md);\n  padding: var(--spacing-3) var(--spacing-4);\n  height: 3rem;\n}\n\n.fullWidth {\n  width: 100%;\n}\n\n/* Loading */\n.loading {\n  position: relative;\n}\n\n.spinner {\n  width: 1em;\n  height: 1em;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-full);\n  animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3N0eWxlcy90b2tlbnMuc2NzcyIsIkJ1dHRvbi5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFUTtBQUtSO0VBRUU7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUdBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBR0E7RUFHQTtFQUNBOzs7QUFRRjtFQUVFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUdBO0VBQ0E7RUFHQTtFQUNBO0VBSUE7RUFHQTtFQUNBOzs7QUNqR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBOzs7QUFHRjtFQUNFOzs7QUFHRjtFQUNFO0VBQ0E7OztBQUdGO0FBQ0E7RUFDRTtFQUNBOzs7QUFFRjtFQUNFOzs7QUFHRjtFQUNFO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFOzs7QUFHRjtFQUNFO0VBQ0E7OztBQUVGO0VBQ0U7OztBQUdGO0VBQ0U7RUFDQTs7O0FBRUY7RUFDRTtFQUNBOzs7QUFHRjtBQUNBO0VBQ0U7RUFDQTtFQUNBOzs7QUFHRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdGO0VBQ0U7OztBQUdGO0FBQ0E7RUFDRTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUdGO0VBQ0U7SUFDRSIsInNvdXJjZXNDb250ZW50IjpbIkB1c2UgXCJzYXNzOmNvbG9yXCI7XG5cbkBpbXBvcnQgdXJsKFwiaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1JbnRlcjp3Z2h0QDQwMDs1MDA7NjAwJmRpc3BsYXk9c3dhcFwiKTtcblxuLy8gQWNjZW50IGRpIGRlZmF1bHQg4oCUIGNhbWJpYSBxdWkgcGVyIGFnZ2lvcm5hcmUgdHV0dGEgbGEgbGlicmVyaWFcbiRhY2NlbnQ6ICMzYjgyZjY7XG5cbjpyb290IHtcbiAgLy8gQWNjZW50IHNjYWxlIOKAlCBkZXJpdmF0YSBkYSAkYWNjZW50IGEgY29tcGlsZSB0aW1lXG4gIC0tYWNjZW50OiAgICAgICAgI3skYWNjZW50fTtcbiAgLS1hY2NlbnQtZG90OiAgICAje2NvbG9yLnNjYWxlKCRhY2NlbnQsICRsaWdodG5lc3M6IDEyJSl9O1xuICAtLWFjY2VudC10cmFjazogICN7JGFjY2VudH07XG4gIC0tYWNjZW50LXJpbmc6ICAgI3skYWNjZW50fTtcbiAgLS1hY2NlbnQtZ2xvdzogICAje2NvbG9yLmNoYW5nZSgkYWNjZW50LCAkYWxwaGE6IDAuMyl9O1xuICAtLWFjY2VudC1saWdodDogICN7Y29sb3Iuc2NhbGUoJGFjY2VudCwgJGxpZ2h0bmVzczogNDUlLCAkc2F0dXJhdGlvbjogLTIwJSl9O1xuXG4gIC8vIFByaW1hcnkgc2NhbGUgKG1hbnRlbnV0YSBwZXIgcmV0cm9jb21wYXRpYmlsaXTDoCBjb24gQnV0dG9uLCBCYWRnZSwgSW5wdXQpXG4gIC0tY29sb3ItcHJpbWFyeS01MDogICN7Y29sb3Iuc2NhbGUoJGFjY2VudCwgJGxpZ2h0bmVzczogNDklLCAkc2F0dXJhdGlvbjogLTMwJSl9O1xuICAtLWNvbG9yLXByaW1hcnktMTAwOiAje2NvbG9yLnNjYWxlKCRhY2NlbnQsICRsaWdodG5lc3M6IDQyJSwgJHNhdHVyYXRpb246IC0xNSUpfTtcbiAgLS1jb2xvci1wcmltYXJ5LTQwMDogI3tjb2xvci5zY2FsZSgkYWNjZW50LCAkbGlnaHRuZXNzOiAxMiUpfTtcbiAgLS1jb2xvci1wcmltYXJ5LTUwMDogI3skYWNjZW50fTtcbiAgLS1jb2xvci1wcmltYXJ5LTYwMDogI3tjb2xvci5zY2FsZSgkYWNjZW50LCAkbGlnaHRuZXNzOiAtMTAlKX07XG4gIC0tY29sb3ItcHJpbWFyeS03MDA6ICN7Y29sb3Iuc2NhbGUoJGFjY2VudCwgJGxpZ2h0bmVzczogLTIwJSl9O1xuXG4gIC8vIE5ldXRyYWxcbiAgLS1jb2xvci1uZXV0cmFsLTA6ICAgI2ZmZmZmZjtcbiAgLS1jb2xvci1uZXV0cmFsLTEwMDogI2YzZjRmNjtcbiAgLS1jb2xvci1uZXV0cmFsLTIwMDogI2U1ZTdlYjtcbiAgLS1jb2xvci1uZXV0cmFsLTQwMDogIzljYTNhZjtcbiAgLS1jb2xvci1uZXV0cmFsLTYwMDogIzRiNTU2MztcbiAgLS1jb2xvci1uZXV0cmFsLTkwMDogIzExMTgyNztcblxuICAvLyBTZW1hbnRpY1xuICAtLWNvbG9yLXN1Y2Nlc3MtNTAwOiAjMjJjNTVlO1xuICAtLWNvbG9yLXN1Y2Nlc3MtNjAwOiAjMTZhMzRhO1xuICAtLWNvbG9yLWRhbmdlci01MDA6ICAjZWY0NDQ0O1xuICAtLWNvbG9yLWRhbmdlci02MDA6ICAjZGMyNjI2O1xuICAtLWNvbG9yLXdhcm5pbmctNTAwOiAjZjU5ZTBiO1xuICAtLWNvbG9yLXdhcm5pbmctNjAwOiAjZDk3NzA2O1xuXG4gIC8vIFR5cG9ncmFwaHlcbiAgLS1mb250LWZhbWlseS1iYXNlOiBcIkludGVyXCIsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZjtcbiAgLS1mb250LXNpemUteHM6IDAuNzVyZW07XG4gIC0tZm9udC1zaXplLXNtOiAwLjg3NXJlbTtcbiAgLS1mb250LXNpemUtbWQ6IDFyZW07XG4gIC0tZm9udC1zaXplLWxnOiAxLjEyNXJlbTtcblxuICAvLyBTcGFjaW5nXG4gIC0tc3BhY2luZy0xOiAwLjI1cmVtO1xuICAtLXNwYWNpbmctMjogMC41cmVtO1xuICAtLXNwYWNpbmctMzogMC43NXJlbTtcbiAgLS1zcGFjaW5nLTQ6IDFyZW07XG5cbiAgLy8gUmFkaXVzXG4gIC0tcmFkaXVzLXNtOiAgIDAuMjVyZW07XG4gIC0tcmFkaXVzLW1kOiAgIDAuMzc1cmVtO1xuICAtLXJhZGl1cy1sZzogICAwLjVyZW07XG4gIC0tcmFkaXVzLWZ1bGw6IDk5OTlweDtcblxuICAvLyBTaGFkb3dzXG4gIC0tc2hhZG93LXNtOiAwIDFweCAycHggMCByZ2IoMCAwIDAgLyAwLjA1KTtcbiAgLS1zaGFkb3ctbWQ6IDAgNHB4IDZweCAtMXB4IHJnYigwIDAgMCAvIDAuMSksIDAgMnB4IDRweCAtMnB4IHJnYigwIDAgMCAvIDAuMSk7XG5cbiAgLy8gVHJhbnNpdGlvbnNcbiAgLS10cmFuc2l0aW9uLWZhc3Q6IDE1MG1zIGVhc2U7XG5cbiAgLy8gU3VyZmFjZSAoYmFja2dyb3VuZCBkaSBjYXJkL3BhbmVsKVxuICAtLWNvbG9yLXN1cmZhY2U6ICAgICAgICAgICNmZmZmZmY7XG4gIC0tY29sb3Itc3VyZmFjZS1lbGV2YXRlZDogI2ZmZmZmZjtcbn1cblxuLy8g4pSA4pSA4pSAIERhcmsgdGhlbWUg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAXG4vLyBBcHBsaWNhdG8gdmlhIGRhdGEtdGhlbWU9XCJkYXJrXCIgc3VsbCdlbGVtZW50byByb290IChnZXN0aXRvIGRhIFN0b3J5Ym9vayBkZWNvcmF0b3Jcbi8vIGUgZGFsbCdhcHAgY29uc3VtZXIpLiBJIGNvbXBvbmVudGkgbm9uIGRldm9ubyBmYXJlIG51bGxhIGRpIHNwZWNpYWxlOiBiYXN0YSBjaGVcbi8vIHVzaW5vIGkgdG9rZW4gdmFyKCkgZSByaWNldmVyYW5ubyBhdXRvbWF0aWNhbWVudGUgaSB2YWxvcmkgZGFyay5cblxuW2RhdGEtdGhlbWU9XCJkYXJrXCJdIHtcbiAgLy8gTmV1dHJhbCAoc2NhbGEgaW52ZXJ0aXRhKVxuICAtLWNvbG9yLW5ldXRyYWwtMDogICAjMGYxNzJhO1xuICAtLWNvbG9yLW5ldXRyYWwtMTAwOiAjMWUyOTNiO1xuICAtLWNvbG9yLW5ldXRyYWwtMjAwOiAjMzM0MTU1O1xuICAtLWNvbG9yLW5ldXRyYWwtNDAwOiAjOTRhM2I4O1xuICAtLWNvbG9yLW5ldXRyYWwtNjAwOiAjY2JkNWUxO1xuICAtLWNvbG9yLW5ldXRyYWwtOTAwOiAjZjhmYWZjO1xuXG4gIC8vIFN1cmZhY2VcbiAgLS1jb2xvci1zdXJmYWNlOiAgICAgICAgICAjMWUyOTNiO1xuICAtLWNvbG9yLXN1cmZhY2UtZWxldmF0ZWQ6ICMyNzM1NDk7XG5cbiAgLy8gUHJpbWFyeSBzY2FsZSBkYXJrIChwZXIgaWwgZGVmYXVsdCBhY2NlbnQgYmx1IOKAlCBsZSBzZnVtYXR1cmUgY2hpYXJlIGRpdmVudGFubyBzY3VyZSlcbiAgLS1jb2xvci1wcmltYXJ5LTUwOiAgIzE3MjU1NDtcbiAgLS1jb2xvci1wcmltYXJ5LTEwMDogIzFlM2E4YTtcbiAgLy8gNDAwIC8gNTAwIC8gNjAwIC8gNzAwIHJpbWFuZ29ubyBpbnZhcmlhdGkgKGFiYmFzdGFuemEgc2F0dXJpIHN1IGJnIHNjdXJvKVxuXG4gIC8vIEFjY2VudCBsaWdodDogdmFyaWFudGUgc2N1cmFcbiAgLS1hY2NlbnQtbGlnaHQ6ICMxNzI1NTQ7XG5cbiAgLy8gU2hhZG93cyAocGnDuSBmb3J0aSBzdSBiZyBzY3VybylcbiAgLS1zaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYigwIDAgMCAvIDAuNCk7XG4gIC0tc2hhZG93LW1kOiAwIDRweCA2cHggLTFweCByZ2IoMCAwIDAgLyAwLjUpLCAwIDJweCA0cHggLTJweCByZ2IoMCAwIDAgLyAwLjQpO1xufVxuIiwiQGltcG9ydCBcIi4uLy4uL3N0eWxlcy90b2tlbnMuc2Nzc1wiO1xuXG4uYnV0dG9uIHtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBnYXA6IHZhcigtLXNwYWNpbmctMik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseS1iYXNlKTtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbiAgbGV0dGVyLXNwYWNpbmc6IC0wLjAxZW07XG4gIGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMtbWQpO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgdmFyKC0tdHJhbnNpdGlvbi1mYXN0KSxcbiAgICBib3JkZXItY29sb3IgdmFyKC0tdHJhbnNpdGlvbi1mYXN0KSwgY29sb3IgdmFyKC0tdHJhbnNpdGlvbi1mYXN0KSxcbiAgICBib3gtc2hhZG93IHZhcigtLXRyYW5zaXRpb24tZmFzdCk7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgb3V0bGluZS1vZmZzZXQ6IDJweDtcbn1cblxuLmJ1dHRvbjpmb2N1cy12aXNpYmxlIHtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHZhcigtLWNvbG9yLXByaW1hcnktNTAwKTtcbn1cblxuLmJ1dHRvbjpkaXNhYmxlZCB7XG4gIG9wYWNpdHk6IDAuNTtcbiAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbn1cblxuLyogVmFyaWFudHMgKi9cbi5wcmltYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeS02MDApO1xuICBjb2xvcjogdmFyKC0tY29sb3ItbmV1dHJhbC0wKTtcbn1cbi5wcmltYXJ5OmhvdmVyOm5vdCg6ZGlzYWJsZWQpIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItcHJpbWFyeS03MDApO1xufVxuXG4uc2Vjb25kYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItbmV1dHJhbC0wKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLW5ldXRyYWwtOTAwKTtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvci1uZXV0cmFsLTIwMCk7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1zbSk7XG59XG4uc2Vjb25kYXJ5OmhvdmVyOm5vdCg6ZGlzYWJsZWQpIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItbmV1dHJhbC0xMDApO1xufVxuXG4uZGFuZ2VyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZGFuZ2VyLTUwMCk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1uZXV0cmFsLTApO1xufVxuLmRhbmdlcjpob3Zlcjpub3QoOmRpc2FibGVkKSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLWRhbmdlci02MDApO1xufVxuXG4uZ2hvc3Qge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgY29sb3I6IHZhcigtLWNvbG9yLW5ldXRyYWwtNjAwKTtcbn1cbi5naG9zdDpob3Zlcjpub3QoOmRpc2FibGVkKSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLW5ldXRyYWwtMTAwKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLW5ldXRyYWwtOTAwKTtcbn1cblxuLyogU2l6ZXMgKi9cbi5zbSB7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXhzKTtcbiAgcGFkZGluZzogdmFyKC0tc3BhY2luZy0xKSB2YXIoLS1zcGFjaW5nLTMpO1xuICBoZWlnaHQ6IDJyZW07XG59XG5cbi5tZCB7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXNtKTtcbiAgcGFkZGluZzogdmFyKC0tc3BhY2luZy0yKSB2YXIoLS1zcGFjaW5nLTQpO1xuICBoZWlnaHQ6IDIuNXJlbTtcbn1cblxuLmxnIHtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtbWQpO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTMpIHZhcigtLXNwYWNpbmctNCk7XG4gIGhlaWdodDogM3JlbTtcbn1cblxuLmZ1bGxXaWR0aCB7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4vKiBMb2FkaW5nICovXG4ubG9hZGluZyB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLnNwaW5uZXIge1xuICB3aWR0aDogMWVtO1xuICBoZWlnaHQ6IDFlbTtcbiAgYm9yZGVyOiAycHggc29saWQgY3VycmVudENvbG9yO1xuICBib3JkZXItdG9wLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tcmFkaXVzLWZ1bGwpO1xuICBhbmltYXRpb246IHNwaW4gMC42cyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbkBrZXlmcmFtZXMgc3BpbiB7XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG59XG4iXX0= */","import React from \"react\";\nimport styles from \"./Button.module.scss\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  fullWidth?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"md\",\n      loading = false,\n      fullWidth = false,\n      disabled,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        ref={ref}\n        disabled={disabled || loading}\n        className={[\n          styles.button,\n          styles[variant],\n          styles[size],\n          fullWidth ? styles.fullWidth : \"\",\n          loading ? styles.loading : \"\",\n          className ?? \"\",\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        {...props}\n      >\n        {loading && <span className={styles.spinner} aria-hidden=\"true\" />}\n        {children}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"]}

package/dist/components/ColorPicker/index.cjs

@@ -0,0 +1,523 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ColorPicker/ColorPicker.tsx
+
+// src/components/ColorPicker/ColorPicker.module.scss
+var ColorPicker_module_default = {
+  colorPicker: "ColorPicker_module_colorPicker2",
+  topRow: "ColorPicker_module_topRow2",
+  discWrapper: "ColorPicker_module_discWrapper2",
+  disc: "ColorPicker_module_disc2",
+  dot: "ColorPicker_module_dot2",
+  lSlider: "ColorPicker_module_lSlider2",
+  lThumb: "ColorPicker_module_lThumb2",
+  alphaSlider: "ColorPicker_module_alphaSlider2",
+  alphaThumb: "ColorPicker_module_alphaThumb2",
+  previewSwatch: "ColorPicker_module_previewSwatch2",
+  eyedropperBtn: "ColorPicker_module_eyedropperBtn2",
+  inputSection: "ColorPicker_module_inputSection2",
+  tabs: "ColorPicker_module_tabs2",
+  tab: "ColorPicker_module_tab2",
+  tabActive: "ColorPicker_module_tabActive2",
+  inputWrapper: "ColorPicker_module_inputWrapper2",
+  inputAddon: "ColorPicker_module_inputAddon2",
+  input: "ColorPicker_module_input2",
+  inputCopyBtn: "ColorPicker_module_inputCopyBtn2",
+  recents: "ColorPicker_module_recents2",
+  recentsLabel: "ColorPicker_module_recentsLabel2",
+  swatches: "ColorPicker_module_swatches2",
+  recentSwatch: "ColorPicker_module_recentSwatch2"
+};
+
+// src/utils/color.ts
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function hslToRgb(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    return Math.round(255 * (ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function rgbToHsl(r, g, b) {
+  const rr = r / 255, gg = g / 255, bb = b / 255;
+  const max = Math.max(rr, gg, bb);
+  const min = Math.min(rr, gg, bb);
+  const l = (max + min) / 2;
+  let h = 0, s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case rr:
+        h = ((gg - bb) / d + (gg < bb ? 6 : 0)) / 6;
+        break;
+      case gg:
+        h = ((bb - rr) / d + 2) / 6;
+        break;
+      case bb:
+        h = ((rr - gg) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToRgba(h, s, l, alpha) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function buildColorValue(h, s, l, a) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  const hex = hslToHex(h, s, l);
+  const alphaHex = Math.round(a * 255).toString(16).padStart(2, "0");
+  const hR = Math.round(h), sR = Math.round(s), lR = Math.round(l);
+  const aR = Math.round(a * 100) / 100;
+  return {
+    hex,
+    hexa: `${hex}${alphaHex}`,
+    hsl: `hsl(${hR}, ${sR}%, ${lR}%)`,
+    hsla: `hsla(${hR}, ${sR}%, ${lR}%, ${aR})`,
+    rgb: `rgb(${r}, ${g}, ${b})`,
+    rgba: `rgba(${r}, ${g}, ${b}, ${aR})`,
+    h,
+    s,
+    l,
+    a
+  };
+}
+function deriveAccent(hex) {
+  const [h, s, l] = hexToHsl(hex);
+  return {
+    base: hex,
+    dot: hslToHex(h, s, Math.min(l + 12, 95)),
+    track: hex,
+    ring: hex,
+    glow: hslToRgba(h, s, l, 0.3),
+    light: hslToHex(h, Math.max(s - 20, 0), Math.min(l + 45, 96))
+  };
+}
+function accentToCssVars(tokens, prefix) {
+  return {
+    [`--${prefix}-accent`]: tokens.base,
+    [`--${prefix}-accent-dot`]: tokens.dot,
+    [`--${prefix}-accent-track`]: tokens.track,
+    [`--${prefix}-accent-ring`]: tokens.ring,
+    [`--${prefix}-accent-glow`]: tokens.glow,
+    [`--${prefix}-accent-light`]: tokens.light
+  };
+}
+var DISC = 200;
+var CopyIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "5", width: "7", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 9V2.5A.5.5 0 0 1 2.5 2H9", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
+] });
+var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 7L5.5 10L11.5 4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var EyedropperIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 2.5L11.5 4.5L6 10L3 11L4 8L9.5 2.5Z", stroke: "currentColor", strokeWidth: "1.4", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4L10 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "2.5", cy: "11.5", r: "1", fill: "currentColor" })
+] });
+function formatValue(mode, h, s, l, r, g, b, hex) {
+  if (mode === "hex") return hex.replace("#", "");
+  if (mode === "hsl") return `${Math.round(h)} ${Math.round(s)} ${Math.round(l)}`;
+  return `${r} ${g} ${b}`;
+}
+function parseValue(mode, raw) {
+  if (mode === "hex") {
+    const clean = raw.replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null;
+    const [h, s, l] = hexToHsl(`#${clean}`);
+    return [h, s, l];
+  }
+  const parts = raw.trim().split(/[\s,]+/).map(Number);
+  if (parts.length !== 3 || parts.some(isNaN)) return null;
+  if (mode === "hsl") {
+    const [h, s, l] = parts;
+    if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) return null;
+    return [h, s, l];
+  }
+  const [r, g, b] = parts;
+  if ([r, g, b].some((v) => v < 0 || v > 255)) return null;
+  return rgbToHsl(r, g, b);
+}
+var ColorInput = ({ mode, h, s, l, r, g, b, hex, onChange, onCopy, copied }) => {
+  const [draft, setDraft] = react.useState(() => formatValue(mode, h, s, l, r, g, b, hex));
+  const [focused, setFocused] = react.useState(false);
+  react.useEffect(() => {
+    if (!focused) setDraft(formatValue(mode, h, s, l, r, g, b, hex));
+  }, [focused, mode, h, s, l, r, g, b, hex]);
+  const placeholder = mode === "hex" ? "3b82f6" : mode === "hsl" ? "217 91 60" : "59 130 246";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorPicker_module_default.inputWrapper, children: [
+    mode === "hex" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ColorPicker_module_default.inputAddon, children: "#" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: ColorPicker_module_default.input,
+        value: draft,
+        placeholder,
+        spellCheck: false,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        onChange: (e) => {
+          const raw = e.target.value;
+          setDraft(raw);
+          const result = parseValue(mode, raw);
+          if (result) onChange(...result);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { className: ColorPicker_module_default.inputCopyBtn, onClick: onCopy, tabIndex: -1, title: "Copia", children: copied ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {}) })
+  ] });
+};
+function parseInitial(value) {
+  if (value?.startsWith("#")) {
+    const [h, s, l] = hexToHsl(value);
+    return [h, s, l, 1];
+  }
+  return [217, 91, 60, 1];
+}
+var ColorPicker = ({
+  value,
+  onChange,
+  showAlpha = true,
+  recentColors = [],
+  accent,
+  className
+}) => {
+  const init = parseInitial(value);
+  const [h, setH] = react.useState(init[0]);
+  const [s, setS] = react.useState(init[1]);
+  const [l, setL] = react.useState(init[2]);
+  const [a, setA] = react.useState(init[3]);
+  const [mode, setMode] = react.useState("hex");
+  const [copied, setCopied] = react.useState(false);
+  const [hasEyeDropper, setHasEyeDropper] = react.useState(false);
+  const canvasRef = react.useRef(null);
+  react.useEffect(() => {
+    setHasEyeDropper(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+  react.useEffect(() => {
+    if (value?.startsWith("#")) {
+      const [nh, ns, nl] = hexToHsl(value);
+      setH(nh);
+      setS(ns);
+      setL(nl);
+    }
+  }, [value]);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const img = ctx.createImageData(DISC, DISC);
+    const data = img.data;
+    const cx = DISC / 2;
+    const cy = DISC / 2;
+    const radius = DISC / 2;
+    for (let py = 0; py < DISC; py++) {
+      for (let px = 0; px < DISC; px++) {
+        const dx = px - cx;
+        const dy = py - cy;
+        const r = Math.sqrt(dx * dx + dy * dy);
+        const idx = (py * DISC + px) * 4;
+        if (r > radius) {
+          data[idx + 3] = 0;
+          continue;
+        }
+        const theta = Math.atan2(dy, dx) * 180 / Math.PI;
+        const hue = (theta + 360) % 360;
+        const sat = r / radius * 100;
+        const { r: rr2, g: gg2, b: bb2 } = hslToRgb(hue, sat, l);
+        data[idx] = rr2;
+        data[idx + 1] = gg2;
+        data[idx + 2] = bb2;
+        data[idx + 3] = r > radius - 1 ? Math.round(255 * (radius - r)) : 255;
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  }, [l]);
+  const notify = react.useCallback(
+    (nh, ns, nl, na) => {
+      onChange?.(buildColorValue(nh, ns, nl, na));
+    },
+    [onChange]
+  );
+  const updateDisc = react.useCallback(
+    (clientX, clientY, rect) => {
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = clientX - cx;
+      const dy = clientY - cy;
+      const r = Math.sqrt(dx * dx + dy * dy);
+      const radius = rect.width / 2;
+      const clampedR = Math.min(r, radius);
+      const theta = Math.atan2(dy, dx) * 180 / Math.PI;
+      const nh = (theta + 360) % 360;
+      const ns = clampedR / radius * 100;
+      setH(nh);
+      setS(ns);
+      notify(nh, ns, l, a);
+    },
+    [l, a, notify]
+  );
+  const handleDiscPointerDown = react.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateDisc(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+    },
+    [updateDisc]
+  );
+  const handleDiscPointerMove = react.useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateDisc(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+    },
+    [updateDisc]
+  );
+  const updateL = react.useCallback(
+    (clientX, rect) => {
+      const nl = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
+      setL(nl);
+      notify(h, s, nl, a);
+    },
+    [h, s, a, notify]
+  );
+  const handleLPointerDown = react.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateL]
+  );
+  const handleLPointerMove = react.useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateL]
+  );
+  const updateA = react.useCallback(
+    (clientX, rect) => {
+      const na = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      setA(na);
+      notify(h, s, l, na);
+    },
+    [h, s, l, notify]
+  );
+  const handleAPointerDown = react.useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateA]
+  );
+  const handleAPointerMove = react.useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateA]
+  );
+  const { r: rr, g: gg, b: bb } = hslToRgb(h, s, l);
+  const hexStr = hslToHex(h, s, l);
+  const rgbStr = `rgb(${rr}, ${gg}, ${bb})`;
+  const colorValue = buildColorValue(h, s, l, a);
+  const dotX = DISC / 2 + s / 100 * (DISC / 2) * Math.cos(h * Math.PI / 180);
+  const dotY = DISC / 2 + s / 100 * (DISC / 2) * Math.sin(h * Math.PI / 180);
+  const lGradient = `linear-gradient(to right,
+    hsl(${h}, ${s}%, 5%),
+    hsl(${h}, ${s}%, 50%),
+    hsl(${h}, ${s}%, 95%))`;
+  const alphaGradient = `linear-gradient(to right, transparent, ${rgbStr})`;
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) return;
+    try {
+      const result = await new window.EyeDropper().open();
+      const [nh, ns, nl] = hexToHsl(result.sRGBHex);
+      setH(nh);
+      setS(ns);
+      setL(nl);
+      notify(nh, ns, nl, a);
+    } catch {
+    }
+  };
+  const handleCopy = () => {
+    const text = mode === "hex" ? colorValue.hexa : mode === "hsl" ? colorValue.hsla : colorValue.rgba;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  const handleSwatch = (color) => {
+    const [nh, ns, nl] = hexToHsl(color);
+    setH(nh);
+    setS(ns);
+    setL(nl);
+    notify(nh, ns, nl, a);
+  };
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "colorpicker") : {};
+  mode === "hex" ? colorValue.hexa : mode === "hsl" ? colorValue.hsla : colorValue.rgba;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [ColorPicker_module_default.colorPicker, className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorPicker_module_default.topRow, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorPicker_module_default.discWrapper, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              width: DISC,
+              height: DISC,
+              className: ColorPicker_module_default.disc,
+              onPointerDown: handleDiscPointerDown,
+              onPointerMove: handleDiscPointerMove
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: ColorPicker_module_default.dot,
+              style: {
+                left: dotX,
+                top: dotY,
+                borderColor: l > 55 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.85)"
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.lSlider,
+            style: { backgroundImage: lGradient },
+            onPointerDown: handleLPointerDown,
+            onPointerMove: handleLPointerMove,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: ColorPicker_module_default.lThumb,
+                style: { left: `${l}%` }
+              }
+            )
+          }
+        ),
+        showAlpha && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.alphaSlider,
+            style: { backgroundImage: alphaGradient },
+            onPointerDown: handleAPointerDown,
+            onPointerMove: handleAPointerMove,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: ColorPicker_module_default.alphaThumb,
+                style: { left: `${a * 100}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.previewSwatch,
+            style: { background: showAlpha ? colorValue.rgba : hexStr },
+            children: hasEyeDropper && /* @__PURE__ */ jsxRuntime.jsx("button", { className: ColorPicker_module_default.eyedropperBtn, onClick: handleEyeDropper, title: "Pick color", children: /* @__PURE__ */ jsxRuntime.jsx(EyedropperIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorPicker_module_default.inputSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorPicker_module_default.tabs, children: ["hex", "hsl", "rgb"].map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: [ColorPicker_module_default.tab, mode === m ? ColorPicker_module_default.tabActive : ""].filter(Boolean).join(" "),
+              onClick: () => setMode(m),
+              children: m.toUpperCase()
+            },
+            m
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ColorInput,
+            {
+              mode,
+              h,
+              s,
+              l,
+              r: rr,
+              g: gg,
+              b: bb,
+              hex: hexStr,
+              onChange: (nh, ns, nl) => {
+                setH(nh);
+                setS(ns);
+                setL(nl);
+                notify(nh, ns, nl, a);
+              },
+              onCopy: handleCopy,
+              copied
+            }
+          )
+        ] }),
+        recentColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorPicker_module_default.recents, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ColorPicker_module_default.recentsLabel, children: "Recent" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorPicker_module_default.swatches, children: recentColors.slice(0, 8).map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: ColorPicker_module_default.recentSwatch,
+              style: { background: c },
+              onClick: () => handleSwatch(c),
+              title: c
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map