From 24a733914c48e7c266acd9f538756f3fcb3d0f33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 9 Mar 2026 23:03:19 +0100
Subject: [PATCH] nicolium: migrate slider/step slider
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../nicolium/src/components/ui/slider.tsx     | 17 ++-----
 .../src/components/ui/step-slider.tsx         | 17 ++-----
 .../nicolium/src/styles/new/components.scss   | 50 +++++++++++++++++++
 3 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/packages/nicolium/src/components/ui/slider.tsx b/packages/nicolium/src/components/ui/slider.tsx
index e959dc719..8b76e74d2 100644
--- a/packages/nicolium/src/components/ui/slider.tsx
+++ b/packages/nicolium/src/components/ui/slider.tsx
@@ -139,24 +139,15 @@ const Slider: React.FC<ISlider> = ({
 
   return (
     <div
-      className='relative inline-flex h-6 cursor-pointer transition'
+      className={clsx('⁂-slider', animateKeyboardInput && '⁂-slider--animate')}
       onMouseDown={handleMouseDown}
       ref={node}
     >
-      <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
-      <div
-        className={clsx(
-          'absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500 transition-[width] ease-in-out',
-          animateKeyboardInput ? 'duration-150' : 'duration-0',
-        )}
-        style={{ width: `${value * 100}%` }}
-      />
+      <div className='⁂-slider__track' />
+      <div className='⁂-slider__fill' style={{ width: `${value * 100}%` }} />
       <span
         id={id}
-        className={clsx(
-          'absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] ease-in-out',
-          animateKeyboardInput ? 'duration-150' : 'duration-0',
-        )}
+        className='⁂-slider__thumb'
         tabIndex={0}
         style={{ left: `${value * 100}%` }}
         role='slider'
diff --git a/packages/nicolium/src/components/ui/step-slider.tsx b/packages/nicolium/src/components/ui/step-slider.tsx
index 70e75003d..cd7a78db1 100644
--- a/packages/nicolium/src/components/ui/step-slider.tsx
+++ b/packages/nicolium/src/components/ui/step-slider.tsx
@@ -106,26 +106,19 @@ const StepSlider: React.FC<IStepSlider> = ({
   };
 
   return (
-    <div
-      className='relative inline-flex h-6 cursor-pointer transition'
-      onMouseDown={handleMouseDown}
-      ref={node}
-    >
-      <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
-      <div
-        className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500'
-        style={{ width: `${(value / (steps - 1)) * 100}%` }}
-      />
+    <div className='⁂-step-slider' onMouseDown={handleMouseDown} ref={node}>
+      <div className='⁂-step-slider__track' />
+      <div className='⁂-step-slider__fill' style={{ width: `${(value / (steps - 1)) * 100}%` }} />
       {[...Array(steps).fill(undefined)].map((_, step) => (
         <span
           key={step}
-          className='absolute top-1/2 z-10 h-3 w-1 -translate-y-1/2 bg-accent-300'
+          className='⁂-step-slider__step'
           style={{ left: `${(step / (steps - 1)) * 100}%` }}
         />
       ))}
       <span
         id={id}
-        className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-100 ease-in-out'
+        className='⁂-step-slider__thumb'
         tabIndex={0}
         role='slider'
         aria-valuemin={0}
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index df22b0cbf..1508ed64a 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -1232,3 +1232,53 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
     background-color: rgb(var(--color-secondary-500));
   }
 }
+
+.⁂-slider {
+  position: relative;
+  display: inline-flex;
+  height: 1.5rem;
+  cursor: pointer;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &__track {
+    @apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
+  }
+
+  &__fill {
+    @apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500 transition-[width] duration-0 ease-in-out;
+  }
+
+  &__thumb {
+    @apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-0 ease-in-out;
+  }
+
+  &--animate {
+    .⁂-slider__fill {
+      @apply duration-150;
+    }
+  }
+}
+
+.⁂-step-slider {
+  position: relative;
+  display: inline-flex;
+  height: 1.5rem;
+  cursor: pointer;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &__track {
+    @apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
+  }
+
+  &__fill {
+    @apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500;
+  }
+
+  &__step {
+    @apply absolute top-1/2 z-10 h-3 w-1 -translate-y-1/2 bg-accent-300;
+  }
+
+  &__thumb {
+    @apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-100 ease-in-out;
+  }
+}