feat: structure

src/components/slider/index.tsx

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Slider as RSlider } from 'radix-ui';
+
+export const Slider = (props: ComponentPropsWithoutRef<typeof RSlider.Root>) => (
+  <RSlider.Root className="modern-sk-slider" {...props}>
+    <RSlider.Track className="modern-sk-slider__track">
+      <RSlider.Range className="modern-sk-slider__range" />
+    </RSlider.Track>
+    <RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
+  </RSlider.Root>
+);
+
+export const Stepper = ({
+  onDecrement,
+  onIncrement,
+}: {
+  onDecrement: () => void;
+  onIncrement: () => void;
+}) => (
+  <div className="modern-sk-stepper">
+    <button type="button" onClick={onDecrement} aria-label="Decrease">
+      −
+    </button>
+    <button type="button" onClick={onIncrement} aria-label="Increase">
+      +
+    </button>
+  </div>
+);