@fab1o978/react-ui 0.1.5 → 0.1.8

package/dist/components/ColorPicker/index.css

@@ -121,48 +121,6 @@
   box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
   background: transparent;
 }
-.ColorPicker_module_lSlider2 {
-  position: relative;
-  height: 10px;
-  border-radius: 5px;
-  cursor: ew-resize;
-  margin-block: 5px;
-  background-color: var(--color-neutral-200);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-.ColorPicker_module_lThumb2 {
-  position: absolute;
-  top: 50%;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
-  pointer-events: none;
-}
-.ColorPicker_module_alphaSlider2 {
-  position: relative;
-  height: 10px;
-  border-radius: 5px;
-  cursor: ew-resize;
-  margin-block: 5px;
-  background-color: var(--color-neutral-200);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-.ColorPicker_module_alphaThumb2 {
-  position: absolute;
-  top: 50%;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
-  pointer-events: none;
-}
 .ColorPicker_module_previewSwatch2 {
   width: 100%;
   height: 48px;
@@ -315,4 +273,204 @@
   padding: 0;
   flex-shrink: 0;
 }
+
+/* src/components/SliderControl/SliderControl.module.scss */
+:root {
+  --accent: #3b82f6;
+  --accent-dot: rgb(82.52, 145, 247.08);
+  --accent-track: #3b82f6;
+  --accent-ring: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.3);
+  --accent-light: rgb(157.485, 188.725, 239.765);
+  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
+  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
+  --color-primary-400: rgb(82.52, 145, 247.08);
+  --color-primary-500: #3b82f6;
+  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
+  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
+  --color-neutral-0: #ffffff;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-600: #4b5563;
+  --color-neutral-900: #111827;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --font-family-base:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --transition-fast: 150ms ease;
+  --color-surface: #ffffff;
+  --color-surface-elevated: #ffffff;
+}
+[data-theme=dark] {
+  --color-neutral-0: #0f172a;
+  --color-neutral-100: #1e293b;
+  --color-neutral-200: #334155;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-600: #cbd5e1;
+  --color-neutral-900: #f8fafc;
+  --color-surface: #1e293b;
+  --color-surface-elevated: #273549;
+  --color-primary-50: #172554;
+  --color-primary-100: #1e3a8a;
+  --accent-light: #172554;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+}
+.SliderControl_module_wrapper2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-family-base);
+  user-select: none;
+  -webkit-user-select: none;
+}
+.SliderControl_module_disabled2 {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.SliderControl_module_icon2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-400);
+  flex-shrink: 0;
+  line-height: 0;
+}
+.SliderControl_module_trackArea2 {
+  position: relative;
+  flex: 1;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.SliderControl_module_groove2 {
+  position: relative;
+  width: 100%;
+  height: 22px;
+  border-radius: var(--radius-full);
+  background: var(--color-neutral-300);
+  display: flex;
+  align-items: center;
+  box-shadow:
+    inset 0 4px 8px rgba(0, 0, 0, 0.14),
+    inset 0 2px 4px rgba(0, 0, 0, 0.06),
+    inset 0 -2px 3px rgba(255, 255, 255, 0.1);
+}
+.SliderControl_module_rail2 {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--color-neutral-400);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+}
+.SliderControl_module_fill2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--slider-accent-track, var(--accent-track));
+  border-radius: var(--radius-full);
+  transition: width 60ms linear;
+}
+.SliderControl_module_thumb2 {
+  position: absolute;
+  top: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: #dde0e6;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
+  cursor: grab;
+  transition: box-shadow 120ms ease, transform 120ms ease;
+  outline: none;
+  z-index: 2;
+}
+.SliderControl_module_thumb2:focus-visible {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 3px var(--slider-accent-ring, var(--accent-ring));
+}
+.SliderControl_module_thumbDragging2 {
+  cursor: grabbing;
+  transform: translate(-50%, -50%) scale(1.08);
+  box-shadow:
+    0 1px 4px rgba(0, 0, 0, 0.28),
+    0 0 0 3px var(--slider-accent-ring, var(--accent-ring)),
+    0 0 0 6px var(--slider-accent-glow, var(--accent-glow));
+}
+.SliderControl_module_tooltip2 {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  background: rgba(18, 18, 26, 0.85);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 3px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 10;
+}
+.SliderControl_module_tooltip2::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(18, 18, 26, 0.85);
+}
+.SliderControl_module_tooltipVisible2 {
+  opacity: 1;
+}
+[data-theme=dark] .SliderControl_module_groove2 {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    inset 0 3px 7px rgba(0, 0, 0, 0.32),
+    inset 0 1px 3px rgba(0, 0, 0, 0.22),
+    inset 0 -2px 3px rgba(255, 255, 255, 0.04);
+}
+[data-theme=dark] .SliderControl_module_thumb2 {
+  background: #4a4f5c;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+}
+[data-theme=dark] .SliderControl_module_thumbDragging2 {
+  box-shadow:
+    0 1px 4px rgba(0, 0, 0, 0.5),
+    0 0 0 3px var(--slider-accent-ring, var(--accent-ring)),
+    0 0 0 6px var(--slider-accent-glow, var(--accent-glow));
+}
 /*# sourceMappingURL=index.css.map */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/styles/tokens.scss","../../../src/components/ColorPicker/ColorPicker.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","@use \"../../styles/tokens\" as *;\n\n$accent-base:  var(--colorpicker-accent,       var(--accent));\n$accent-ring:  var(--colorpicker-accent-ring,  var(--accent-ring));\n$accent-glow:  var(--colorpicker-accent-glow,  var(--accent-glow));\n$accent-light: var(--colorpicker-accent-light, var(--accent-light));\n\n$disc: 200px;\n$slider-w: 20px;\n$thumb-size: 20px;\n$gap: 0.5rem;\n\n// ─── Dark theme scoped sull'elemento (prop theme=\"dark\") ──────────────────────\n// Sovrascrive i token globali localmente — non dipende dal data-theme dell'app.\n\n.colorPicker[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  --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// ─── Card ──────────────────────────────────────────────────────────────────────\n\n.colorPicker {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem;\n  background: var(--color-surface);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.04);\n  font-family: var(--font-family-base);\n  width: calc(#{$disc} + 2rem); // disc + card padding (1rem × 2 sides)\n  box-sizing: border-box;\n  user-select: none;\n}\n\n// ─── Disc + L slider row ───────────────────────────────────────────────────────\n\n.topRow {\n  display: flex;\n  justify-content: center;\n}\n\n.discWrapper {\n  position: relative;\n  width: $disc;\n  height: $disc;\n  flex-shrink: 0;\n  border-radius: 50%;\n  box-shadow: 0 0 0 1.5px var(--color-neutral-200);\n}\n\n.disc {\n  display: block;\n  width: $disc;\n  height: $disc;\n  cursor: crosshair;\n  border-radius: 50%;\n}\n\n.dot {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 2px solid;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);\n  background: transparent;\n}\n\n// ─── Lightness slider (horizontal) ────────────────────────────────────────────\n\n.lSlider {\n  position: relative;\n  height: 10px;\n  border-radius: 5px;\n  cursor: ew-resize;\n  margin-block: 5px;\n  background-color: var(--color-neutral-200);\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.lThumb {\n  position: absolute;\n  top: 50%;\n  width: $thumb-size;\n  height: $thumb-size;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  background: white;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);\n  pointer-events: none;\n}\n\n// ─── Alpha slider (horizontal) ────────────────────────────────────────────────\n\n.alphaSlider {\n  position: relative;\n  height: 10px;\n  border-radius: 5px;\n  cursor: ew-resize;\n  margin-block: 5px;\n  background-color: var(--color-neutral-200);\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n.alphaThumb {\n  position: absolute;\n  top: 50%;\n  width: $thumb-size;\n  height: $thumb-size;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  background: white;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);\n  pointer-events: none;\n}\n\n// ─── Preview swatch ────────────────────────────────────────────────────────────\n\n.previewSwatch {\n  width: 100%;\n  height: 48px;\n  border-radius: var(--radius-md);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0 0.5rem;\n  box-sizing: border-box;\n}\n\n.eyedropperBtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: var(--radius-sm);\n  background: rgba(255, 255, 255, 0.15);\n  cursor: pointer;\n  backdrop-filter: blur(4px);\n  transition: background var(--transition-fast);\n\n  &:hover {\n    background: rgba(255, 255, 255, 0.4);\n  }\n}\n\n// ─── Inputs ────────────────────────────────────────────────────────────────────\n\n.inputSection {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.tabs {\n  display: flex;\n  background: var(--color-neutral-100);\n  border-radius: var(--radius-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.tab {\n  flex: 1;\n  padding: 0.2rem 0;\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  border: none;\n  border-radius: calc(var(--radius-sm) - 1px);\n  background: transparent;\n  color: var(--color-neutral-400);\n  cursor: pointer;\n  transition: background var(--transition-fast), color var(--transition-fast);\n\n  &:hover:not(.tabActive) {\n    color: var(--color-neutral-600);\n  }\n}\n\n.tabActive {\n  background: $accent-base;\n  color: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.inputWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.inputAddon {\n  position: absolute;\n  left: 0.5rem;\n  font-size: var(--font-size-xs);\n  font-family: \"SF Mono\", \"Fira Code\", \"Consolas\", monospace;\n  color: var(--color-neutral-400);\n  pointer-events: none;\n  line-height: 1;\n}\n\n.input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0.4rem 2rem; // symmetric: room for # on left and copy icon on right\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-sm);\n  font-size: var(--font-size-xs);\n  font-family: \"SF Mono\", \"Fira Code\", \"Consolas\", monospace;\n  color: var(--color-neutral-900);\n  background: var(--color-neutral-0);\n  outline: none;\n  text-align: center;\n  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);\n\n  &:focus {\n    border-color: $accent-base;\n    box-shadow: 0 0 0 2px $accent-glow;\n  }\n}\n\n.inputCopyBtn {\n  position: absolute;\n  right: 0.35rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--color-neutral-400);\n  cursor: pointer;\n  transition: background var(--transition-fast), color var(--transition-fast);\n\n  &:hover {\n    background: var(--color-neutral-100);\n    color: var(--color-neutral-900);\n  }\n}\n\n\n// ─── Recent colors ─────────────────────────────────────────────────────────────\n\n.recents {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n  border-top: 1px solid var(--color-neutral-100);\n  overflow: hidden;\n}\n\n.recentsLabel {\n  font-size: 0.6rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--color-neutral-400);\n  flex-shrink: 0;\n}\n\n.swatches {\n  display: flex;\n  gap: 0.35rem;\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.recentSwatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1.5px solid rgba(0, 0, 0, 0.1);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n}\n"],"mappings":"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","names":["colorPicker","topRow","discWrapper","disc","dot","lSlider","lThumb","alphaSlider","alphaThumb","previewSwatch","eyedropperBtn","inputSection","tabs","tab","tabActive","inputWrapper","inputAddon","input","inputCopyBtn","recents","recentsLabel","swatches","recentSwatch"]}
+{"version":3,"sources":["../../../src/styles/tokens.scss","../../../src/components/ColorPicker/ColorPicker.module.scss","../../../src/styles/tokens.scss","../../../src/components/SliderControl/SliderControl.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","@use \"../../styles/tokens\" as *;\n\n$accent-base:  var(--colorpicker-accent,       var(--accent));\n$accent-ring:  var(--colorpicker-accent-ring,  var(--accent-ring));\n$accent-glow:  var(--colorpicker-accent-glow,  var(--accent-glow));\n$accent-light: var(--colorpicker-accent-light, var(--accent-light));\n\n$disc: 200px;\n$slider-w: 20px;\n$thumb-size: 20px;\n$gap: 0.5rem;\n\n// ─── Dark theme scoped sull'elemento (prop theme=\"dark\") ──────────────────────\n// Sovrascrive i token globali localmente — non dipende dal data-theme dell'app.\n\n.colorPicker[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  --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// ─── Card ──────────────────────────────────────────────────────────────────────\n\n.colorPicker {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem;\n  background: var(--color-surface);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.04);\n  font-family: var(--font-family-base);\n  width: calc(#{$disc} + 2rem); // disc + card padding (1rem × 2 sides)\n  box-sizing: border-box;\n  user-select: none;\n}\n\n// ─── Disc + L slider row ───────────────────────────────────────────────────────\n\n.topRow {\n  display: flex;\n  justify-content: center;\n}\n\n.discWrapper {\n  position: relative;\n  width: $disc;\n  height: $disc;\n  flex-shrink: 0;\n  border-radius: 50%;\n  box-shadow: 0 0 0 1.5px var(--color-neutral-200);\n}\n\n.disc {\n  display: block;\n  width: $disc;\n  height: $disc;\n  cursor: crosshair;\n  border-radius: 50%;\n}\n\n.dot {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 2px solid;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);\n  background: transparent;\n}\n\n\n// ─── Preview swatch ────────────────────────────────────────────────────────────\n\n.previewSwatch {\n  width: 100%;\n  height: 48px;\n  border-radius: var(--radius-md);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0 0.5rem;\n  box-sizing: border-box;\n}\n\n.eyedropperBtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: var(--radius-sm);\n  background: rgba(255, 255, 255, 0.15);\n  cursor: pointer;\n  backdrop-filter: blur(4px);\n  transition: background var(--transition-fast);\n\n  &:hover {\n    background: rgba(255, 255, 255, 0.4);\n  }\n}\n\n// ─── Inputs ────────────────────────────────────────────────────────────────────\n\n.inputSection {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.tabs {\n  display: flex;\n  background: var(--color-neutral-100);\n  border-radius: var(--radius-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.tab {\n  flex: 1;\n  padding: 0.2rem 0;\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  border: none;\n  border-radius: calc(var(--radius-sm) - 1px);\n  background: transparent;\n  color: var(--color-neutral-400);\n  cursor: pointer;\n  transition: background var(--transition-fast), color var(--transition-fast);\n\n  &:hover:not(.tabActive) {\n    color: var(--color-neutral-600);\n  }\n}\n\n.tabActive {\n  background: $accent-base;\n  color: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.inputWrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.inputAddon {\n  position: absolute;\n  left: 0.5rem;\n  font-size: var(--font-size-xs);\n  font-family: \"SF Mono\", \"Fira Code\", \"Consolas\", monospace;\n  color: var(--color-neutral-400);\n  pointer-events: none;\n  line-height: 1;\n}\n\n.input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0.4rem 2rem; // symmetric: room for # on left and copy icon on right\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-sm);\n  font-size: var(--font-size-xs);\n  font-family: \"SF Mono\", \"Fira Code\", \"Consolas\", monospace;\n  color: var(--color-neutral-900);\n  background: var(--color-neutral-0);\n  outline: none;\n  text-align: center;\n  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);\n\n  &:focus {\n    border-color: $accent-base;\n    box-shadow: 0 0 0 2px $accent-glow;\n  }\n}\n\n.inputCopyBtn {\n  position: absolute;\n  right: 0.35rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--color-neutral-400);\n  cursor: pointer;\n  transition: background var(--transition-fast), color var(--transition-fast);\n\n  &:hover {\n    background: var(--color-neutral-100);\n    color: var(--color-neutral-900);\n  }\n}\n\n\n// ─── Recent colors ─────────────────────────────────────────────────────────────\n\n.recents {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n  border-top: 1px solid var(--color-neutral-100);\n  overflow: hidden;\n}\n\n.recentsLabel {\n  font-size: 0.6rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--color-neutral-400);\n  flex-shrink: 0;\n}\n\n.swatches {\n  display: flex;\n  gap: 0.35rem;\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.recentSwatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1.5px solid rgba(0, 0, 0, 0.1);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n}\n","@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","@use \"../../styles/tokens\" as *;\n\n$accent-track: var(--slider-accent-track, var(--accent-track));\n$accent-ring:  var(--slider-accent-ring,  var(--accent-ring));\n$accent-glow:  var(--slider-accent-glow,  var(--accent-glow));\n\n$groove-height: 22px;\n$rail-height:    6px;\n$thumb-size:    18px;\n$hit-zone:      36px;\n\n.wrapper {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: var(--font-family-base);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.disabled {\n  opacity: 0.45;\n  pointer-events: none;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-neutral-400);\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n// ── Hit zone ───────────────────────────────────────────────────────────────────\n.trackArea {\n  position: relative;\n  flex: 1;\n  height: $hit-zone;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n// ── Groove — the carved channel, >= thumb size ─────────────────────────────────\n.groove {\n  position: relative;\n  width: 100%;\n  height: $groove-height;\n  border-radius: var(--radius-full);\n  background: var(--color-neutral-300);\n  display: flex;\n  align-items: center;\n  // purely inset: no outer shadow\n  box-shadow:\n    inset 0 4px 8px rgba(0, 0, 0, 0.14),\n    inset 0 2px 4px rgba(0, 0, 0, 0.06),\n    inset 0 -2px 3px rgba(255, 255, 255, 0.10);\n}\n\n// ── Rail — thin line inside the groove where fill runs ─────────────────────────\n.rail {\n  position: absolute;\n  left: 8px;\n  right: 8px;\n  height: $rail-height;\n  border-radius: var(--radius-full);\n  background: var(--color-neutral-400);\n  box-shadow:\n    inset 0 1px 3px rgba(0, 0, 0, 0.30),\n    inset 0 1px 1px rgba(0, 0, 0, 0.18);\n  overflow: hidden;\n}\n\n// ── Fill ───────────────────────────────────────────────────────────────────────\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: $accent-track;\n  border-radius: var(--radius-full);\n  transition: width 60ms linear;\n}\n\n// ── Thumb ──────────────────────────────────────────────────────────────────────\n.thumb {\n  position: absolute;\n  top: 50%;\n  width: $thumb-size;\n  height: $thumb-size;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  background: #dde0e6;\n  border: 1px solid rgba(0, 0, 0, 0.10);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);\n  cursor: grab;\n  transition: box-shadow 120ms ease, transform 120ms ease;\n  outline: none;\n  z-index: 2;\n}\n\n.thumb:focus-visible {\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.22),\n    0 0 0 3px $accent-ring;\n}\n\n.thumbDragging {\n  cursor: grabbing;\n  transform: translate(-50%, -50%) scale(1.08);\n  box-shadow:\n    0 1px 4px rgba(0, 0, 0, 0.28),\n    0 0 0 3px $accent-ring,\n    0 0 0 6px $accent-glow;\n}\n\n// ── Tooltip ────────────────────────────────────────────────────────────────────\n.tooltip {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  transform: translateX(-50%);\n  background: rgba(18, 18, 26, 0.85);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  padding: 3px 8px;\n  border-radius: 6px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 120ms ease;\n  z-index: 10;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 4px solid transparent;\n    border-top-color: rgba(18, 18, 26, 0.85);\n  }\n}\n\n.tooltipVisible {\n  opacity: 1;\n}\n\n// ── Dark mode ──────────────────────────────────────────────────────────────────\n[data-theme=\"dark\"] {\n  .groove {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 0.07),\n      inset 0 3px 7px rgba(0, 0, 0, 0.32),\n      inset 0 1px 3px rgba(0, 0, 0, 0.22),\n      inset 0 -2px 3px rgba(255, 255, 255, 0.04);\n  }\n\n  .thumb {\n    background: #4a4f5c;\n    border-color: rgba(255, 255, 255, 0.08);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);\n  }\n\n  .thumbDragging {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 3px $accent-ring,\n      0 0 0 6px $accent-glow;\n  }\n}\n"],"mappings":"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","names":["colorPicker","topRow","discWrapper","disc","dot","previewSwatch","eyedropperBtn","inputSection","tabs","tab","tabActive","inputWrapper","inputAddon","input","inputCopyBtn","recents","recentsLabel","swatches","recentSwatch","wrapper","disabled","icon","trackArea","groove","rail","fill","thumb","thumbDragging","tooltip","tooltipVisible"]}

package/dist/components/ColorPicker/index.js

@@ -10,10 +10,6 @@ var ColorPicker_module_default = {
   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",
@@ -30,6 +26,21 @@ var ColorPicker_module_default = {
   recentSwatch: "ColorPicker_module_recentSwatch2"
 };
 
+// src/components/SliderControl/SliderControl.module.scss
+var SliderControl_module_default = {
+  wrapper: "SliderControl_module_wrapper2",
+  disabled: "SliderControl_module_disabled2",
+  icon: "SliderControl_module_icon2",
+  trackArea: "SliderControl_module_trackArea2",
+  groove: "SliderControl_module_groove2",
+  rail: "SliderControl_module_rail2",
+  fill: "SliderControl_module_fill2",
+  thumb: "SliderControl_module_thumb2",
+  thumbDragging: "SliderControl_module_thumbDragging2",
+  tooltip: "SliderControl_module_tooltip2",
+  tooltipVisible: "SliderControl_module_tooltipVisible2"
+};
+
 // src/utils/color.ts
 function hexToHsl(hex) {
   const r = parseInt(hex.slice(1, 3), 16) / 255;
@@ -145,6 +156,177 @@ function accentToCssVars(tokens, prefix) {
     [`--${prefix}-accent-light`]: tokens.light
   };
 }
+function clamp(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function snapToStep(v, min, step) {
+  return Math.round((v - min) / step) * step + min;
+}
+var SliderControl = ({
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  showTooltip = "drag",
+  showPercentage = false,
+  leftIcon,
+  rightIcon,
+  railBackground,
+  accent,
+  className,
+  disabled = false
+}) => {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const trackRef = useRef(null);
+  const thumbRef = useRef(null);
+  const value = isControlled ? controlledValue : internalValue;
+  const pct = (clamp(value, min, max) - min) / (max - min);
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "slider") : {};
+  const setValue = useCallback(
+    (next) => {
+      const snapped = clamp(snapToStep(next, min, step), min, max);
+      if (!isControlled) setInternalValue(snapped);
+      onChange?.(snapped);
+    },
+    [isControlled, min, max, step, onChange]
+  );
+  const valueFromPointer = useCallback(
+    (e) => {
+      const rect = trackRef.current.getBoundingClientRect();
+      const ratio = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+      return min + ratio * (max - min);
+    },
+    [min, max]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setIsDragging(true);
+      thumbRef.current?.focus();
+      setValue(valueFromPointer(e.nativeEvent));
+    },
+    [disabled, setValue, valueFromPointer]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isDragging || disabled) return;
+      setValue(valueFromPointer(e.nativeEvent));
+    },
+    [isDragging, disabled, setValue, valueFromPointer]
+  );
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+    thumbRef.current?.blur();
+  }, []);
+  useEffect(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setValue(value + (e.deltaY < 0 ? step : -step));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [disabled, value, step, setValue]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      const map = {
+        ArrowRight: step,
+        ArrowUp: step,
+        ArrowLeft: -step,
+        ArrowDown: -step,
+        PageUp: step * 10,
+        PageDown: -step * 10
+      };
+      if (e.key === "Home") {
+        setValue(min);
+        e.preventDefault();
+        return;
+      }
+      if (e.key === "End") {
+        setValue(max);
+        e.preventDefault();
+        return;
+      }
+      if (map[e.key] !== void 0) {
+        setValue(value + map[e.key]);
+        e.preventDefault();
+      }
+    },
+    [disabled, step, min, max, value, setValue]
+  );
+  const tooltipVisible = showTooltip === "always" || showTooltip === "drag" && (isDragging || isFocused);
+  const decimals = step < 1 ? Math.ceil(-Math.log10(step)) : 0;
+  const displayValue = showPercentage ? `${Math.round((value - min) / (max - min) * 100)}%` : value.toFixed(decimals);
+  const tooltipOffset = `calc(${pct * 100}% + ${(0.5 - pct) * 20}px)`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [SliderControl_module_default.wrapper, disabled ? SliderControl_module_default.disabled : "", className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      children: [
+        leftIcon !== null && leftIcon !== void 0 && /* @__PURE__ */ jsx("span", { className: SliderControl_module_default.icon, children: leftIcon }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: trackRef,
+            className: SliderControl_module_default.trackArea,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: SliderControl_module_default.groove, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: SliderControl_module_default.rail,
+                  style: railBackground ? { background: railBackground } : void 0,
+                  children: !railBackground && /* @__PURE__ */ jsx("div", { className: SliderControl_module_default.fill, style: { width: `${pct * 100}%` } })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: thumbRef,
+                  role: "slider",
+                  tabIndex: disabled ? -1 : 0,
+                  "aria-valuenow": Math.round(value),
+                  "aria-valuemin": min,
+                  "aria-valuemax": max,
+                  "aria-disabled": disabled,
+                  className: [SliderControl_module_default.thumb, isDragging ? SliderControl_module_default.thumbDragging : ""].filter(Boolean).join(" "),
+                  style: { left: `calc(${pct * 100}% + ${(0.5 - pct) * 24}px)` },
+                  onKeyDown: handleKeyDown,
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => setIsFocused(false)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: [SliderControl_module_default.tooltip, tooltipVisible ? SliderControl_module_default.tooltipVisible : ""].filter(Boolean).join(" "),
+                  style: { left: tooltipOffset },
+                  "aria-hidden": "true",
+                  children: displayValue
+                }
+              )
+            ]
+          }
+        ),
+        rightIcon !== null && rightIcon !== void 0 && /* @__PURE__ */ jsx("span", { className: SliderControl_module_default.icon, children: rightIcon })
+      ]
+    }
+  );
+};
+SliderControl.displayName = "SliderControl";
 var DISC = 200;
 var CopyIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
   /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "7", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.4" }),
@@ -314,50 +496,21 @@ var ColorPicker = ({
     },
     [updateDisc]
   );
-  const updateL = useCallback(
-    (clientX, rect) => {
-      const nl = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
+  const handleLChange = useCallback(
+    (nl) => {
       setL(nl);
       notify(h, s, nl, a);
     },
     [h, s, a, notify]
   );
-  const handleLPointerDown = useCallback(
-    (e) => {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateL]
-  );
-  const handleLPointerMove = useCallback(
-    (e) => {
-      if (e.buttons === 0) return;
-      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateL]
-  );
-  const updateA = useCallback(
-    (clientX, rect) => {
-      const na = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  const handleAChange = useCallback(
+    (val) => {
+      const na = val / 100;
       setA(na);
       notify(h, s, l, na);
     },
     [h, s, l, notify]
   );
-  const handleAPointerDown = useCallback(
-    (e) => {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateA]
-  );
-  const handleAPointerMove = 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 luminance = (0.299 * rr + 0.587 * gg + 0.114 * bb) / 255;
   const swatchFg = luminance > 0.6 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.9)";
@@ -370,7 +523,6 @@ var ColorPicker = ({
     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 {
@@ -431,35 +583,27 @@ var ColorPicker = ({
           )
         ] }) }),
         /* @__PURE__ */ jsx(
-          "div",
+          SliderControl,
           {
-            className: ColorPicker_module_default.lSlider,
-            style: { backgroundImage: lGradient },
-            onPointerDown: handleLPointerDown,
-            onPointerMove: handleLPointerMove,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: ColorPicker_module_default.lThumb,
-                style: { left: `${l}%` }
-              }
-            )
+            value: l,
+            onChange: handleLChange,
+            min: 0,
+            max: 100,
+            step: 1,
+            showTooltip: "never",
+            railBackground: lGradient
           }
         ),
         showAlpha && /* @__PURE__ */ jsx(
-          "div",
+          SliderControl,
           {
-            className: ColorPicker_module_default.alphaSlider,
-            style: { backgroundImage: alphaGradient },
-            onPointerDown: handleAPointerDown,
-            onPointerMove: handleAPointerMove,
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: ColorPicker_module_default.alphaThumb,
-                style: { left: `${a * 100}%` }
-              }
-            )
+            value: Math.round(a * 100),
+            onChange: handleAChange,
+            min: 0,
+            max: 100,
+            step: 1,
+            showTooltip: "never",
+            railBackground: `linear-gradient(to right, transparent, ${rgbStr}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 / 10px 10px`
           }
         ),
         /* @__PURE__ */ jsx(