@fab1o978/react-ui 0.1.5 → 0.1.7

package/dist/index.css

@@ -832,48 +832,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_lSlider {
-  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_lThumb {
-  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_alphaSlider {
-  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_alphaThumb {
-  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_previewSwatch {
   width: 100%;
   height: 48px;
@@ -1027,6 +985,206 @@
   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_wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-family-base);
+  user-select: none;
+  -webkit-user-select: none;
+}
+.SliderControl_module_disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.SliderControl_module_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-400);
+  flex-shrink: 0;
+  line-height: 0;
+}
+.SliderControl_module_trackArea {
+  position: relative;
+  flex: 1;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.SliderControl_module_groove {
+  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_rail {
+  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_fill {
+  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_thumb {
+  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_thumb: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_thumbDragging {
+  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_tooltip {
+  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_tooltip::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_tooltipVisible {
+  opacity: 1;
+}
+[data-theme=dark] .SliderControl_module_groove {
+  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_thumb {
+  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_thumbDragging {
+  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));
+}
+
 /* src/components/SlidingCounter/SlidingCounter.module.scss */
 :root {
   --accent: #3b82f6;