@djangocfg/ui-core 2.1.208 → 2.1.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.208",
+  "version": "2.1.209",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -81,7 +81,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.208",
+    "@djangocfg/i18n": "^2.1.209",
     "react-device-detect": "^2.2.3",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -143,9 +143,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.208",
+    "@djangocfg/i18n": "^2.1.209",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.208",
+    "@djangocfg/typescript-config": "^2.1.209",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/slider.story.tsx

@@ -111,3 +111,24 @@ export const Disabled = () => (
     <Slider defaultValue={[50]} max={100} disabled />
   </div>
 );
+
+export const Vertical = () => {
+  const [value, setValue] = useState([70]);
+
+  return (
+    <div className="flex items-start gap-8">
+      <div className="flex flex-col items-center gap-2">
+        <span className="text-sm text-muted-foreground">{value[0]}%</span>
+        <Slider
+          orientation="vertical"
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          step={5}
+          className="h-32"
+        />
+        <Label>Volume</Label>
+      </div>
+    </div>
+  );
+};

package/src/components/slider.tsx

@@ -9,21 +9,38 @@ import { cn } from '../lib/utils';
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
+>(({ className, orientation = 'horizontal', ...props }, ref) => {
+  const isVertical = orientation === 'vertical';
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      orientation={orientation}
+      className={cn(
+        "relative flex touch-none select-none",
+        isVertical
+          ? "flex-col items-center"
+          : "flex-row items-center w-full",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          "relative overflow-hidden rounded-full bg-primary/20",
+          isVertical ? "w-1.5 h-full grow" : "h-1.5 w-full grow"
+        )}
+      >
+        <SliderPrimitive.Range
+          className={cn(
+            "absolute bg-primary",
+            isVertical ? "w-full bottom-0" : "h-full left-0"
+          )}
+        />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    </SliderPrimitive.Root>
+  );
+})
 Slider.displayName = SliderPrimitive.Root.displayName
 
 export { Slider }