@rovula/ui 0.0.70 → 0.0.72

package/dist/esm/types/components/Dropdown/Dropdown.styles.d.ts

@@ -2,7 +2,6 @@ export declare const iconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dropdownIconVariant: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
     disabled?: boolean | null | undefined;
     isFocus?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/esm/types/components/Slider/Slider.d.ts

@@ -1,5 +1,13 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface CustomSliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+    trackStyle?: React.CSSProperties;
+    thumbStyle?: React.CSSProperties;
+    rangeStyle?: React.CSSProperties;
+}
+declare const Slider: React.ForwardRefExoticComponent<CustomSliderProps & React.RefAttributes<HTMLSpanElement>>;
 export type SliderProps = React.ComponentProps<typeof Slider>;
 export { Slider };

package/dist/esm/types/components/Slider/Slider.stories.d.ts

@@ -1,12 +1,19 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    component: React.ForwardRefExoticComponent<import("./Slider").CustomSliderProps & React.RefAttributes<HTMLSpanElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        trackClassName?: string | undefined;
+        rangeClassName?: string | undefined;
+        thumbClassName?: string | undefined;
+        trackStyle?: React.CSSProperties | undefined;
+        thumbStyle?: React.CSSProperties | undefined;
+        rangeStyle?: React.CSSProperties | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
         color?: string | undefined | undefined;
@@ -303,3 +310,4 @@ export declare const Default: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const GradientColor: StoryObj;

package/dist/index.d.ts

@@ -506,7 +506,15 @@ declare const InputFilter: React__default.ForwardRefExoticComponent<{
     }) => ReactNode;
 } & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface CustomSliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+    trackStyle?: React.CSSProperties;
+    thumbStyle?: React.CSSProperties;
+    rangeStyle?: React.CSSProperties;
+}
+declare const Slider: React.ForwardRefExoticComponent<CustomSliderProps & React.RefAttributes<HTMLSpanElement>>;
 type SliderProps = React.ComponentProps<typeof Slider>;
 
 declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -760,4 +768,4 @@ declare function usePrevious<T>(value: T): T | undefined;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/src/theme/global.css

@@ -2559,6 +2559,10 @@ input[type=number] {
   height: 100%;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .h-1\/2 {
   height: 50%;
 }
@@ -3002,6 +3006,12 @@ input[type=number] {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .self-center {
   align-self: center;
 }
@@ -3392,6 +3402,11 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
+
 .border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
   border-bottom-color: rgb(var(--navbar-border-color));
 }
@@ -4945,6 +4960,30 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--other-transparency-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-\[\#848484\] {
+  --tw-gradient-from: #848484 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(132 132 132 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-black {
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-\[\#A00202\] {
+  --tw-gradient-to: #A00202 var(--tw-gradient-to-position);
+}
+
+.to-white {
+  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+}
+
 .fill-action-button-icon-active {
   fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
 }
@@ -5966,12 +6005,6 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[0px_2px_24px_0px_rgba\(145\2c _158\2c _171\2c _0\.24\)\] {
-  --tw-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
-  --tw-shadow-colored: 0px 2px 24px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -5984,11 +6017,6 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[var\(--dropdown-menu-shadow\)\] {
-  --tw-shadow-color: var(--dropdown-menu-shadow);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -6034,11 +6062,6 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
-.ring-primary {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
-}
-
 .ring-offset-background {
   --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
 }
@@ -6048,6 +6071,11 @@ input[type=number] {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -141,6 +141,8 @@ export const CustomOption = {
     fullwidth: true,
     options: customOptions,
     filterMode: true,
+
+    // iconMode: "flat",
   },
   render: (args) => {
     console.log("args ", args);

package/src/components/Dropdown/Dropdown.styles.ts

@@ -19,11 +19,12 @@ export const iconWrapperVariant = cva(
 
 export const dropdownIconVariant = cva(["transition-all"], {
   variants: {
-    size: {
-      sm: "size-[14px]",
-      md: "size-5",
-      lg: "size-6",
-    },
+    // Controll by text-input
+    // size: {
+    //   sm: "size-[14px]",
+    //   md: "size-5",
+    //   lg: "size-6",
+    // },
     disabled: {
       true: "fill-input-text-disabled",
       false: "fill-inherit",
@@ -34,7 +35,6 @@ export const dropdownIconVariant = cva(["transition-all"], {
     },
   },
   defaultVariants: {
-    size: "md",
     disabled: false,
     isFocus: false,
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -12,11 +12,7 @@ import React, {
 } from "react";
 import * as Portal from "@radix-ui/react-portal";
 import TextInput, { InputProps } from "../TextInput/TextInput";
-import {
-  customInputVariant,
-  dropdownIconVariant,
-  iconWrapperVariant,
-} from "./Dropdown.styles";
+import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -339,11 +335,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         <TextInput
           hasClearIcon={false}
           endIcon={
-            <div className={iconWrapperVariant({ size })}>
-              <ChevronDownIcon
-                className={dropdownIconVariant({ size, isFocus: isFocused })}
-              />
-            </div>
+            <ChevronDownIcon
+              className={dropdownIconVariant({ isFocus: isFocused })}
+            />
           }
           {...props}
           ref={inputRef}

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -52,10 +52,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[var(--dropdown-menu-shadow)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
+    style={{
+      boxShadow: "var(--dropdown-menu-shadow)",
+      ...props.style,
+    }}
   />
 ));
 DropdownMenuSubContent.displayName =
@@ -70,10 +74,14 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[0px_2px_24px_0px_rgba(145,_158,_171,_0.24)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
+      style={{
+        boxShadow: "var(--dropdown-menu-shadow)",
+        ...props.style,
+      }}
     />
   </DropdownMenuPrimitive.Portal>
 ));

package/src/components/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Slider } from "./Slider";
 
@@ -13,7 +13,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-background">
         <Story />
       </div>
     ),
@@ -45,3 +45,84 @@ export const Default = {
     );
   },
 } satisfies StoryObj;
+
+export const GradientColor: StoryObj = {
+  render: () => {
+    const [exposure, setExposure] = useState([50]);
+    const [empty, setEmpty] = useState([50]);
+    const [rainbow, setRainbow] = useState([50]);
+    const [darkRed, setDarkRed] = useState([50]);
+
+    return (
+      <div className="w-[400px] p-6 space-y-8 rounded-md shadow-lg bg-surface">
+        {/* Exposure (Black to White) */}
+        <Slider
+          value={exposure}
+          onValueChange={setExposure}
+          className="bg-grey-transparent-24"
+          trackClassName="h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-black to-white"
+          rangeClassName="bg-unset"
+          thumbClassName="bg-white border border-white shadow"
+          thumbStyle={{
+            filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+          }}
+          min={0}
+          max={100}
+          step={1}
+        />
+
+        {/* Empty (no gradient) */}
+        <Slider
+          value={empty}
+          onValueChange={setEmpty}
+          className="bg-grey-transparent-24"
+          trackClassName="h-1 rounded-full bg-grey-transparent-24"
+          rangeClassName="bg-unset"
+          thumbClassName="bg-white border border-white shadow"
+          thumbStyle={{
+            filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+          }}
+          min={0}
+          max={100}
+          step={1}
+        />
+
+        {/* Rainbow (custom linear-gradient via style) */}
+        <Slider
+          value={rainbow}
+          onValueChange={setRainbow}
+          className="bg-grey-transparent-24"
+          trackClassName="h-1 rounded-full bg-grey-transparent-24"
+          trackStyle={{
+            backgroundImage:
+              "linear-gradient(90deg, #F00 0%, #FF8502 11.54%, #F2FF05 23.08%, #06F90F 35.58%, #00E6FF 48.56%, #0404FF 61.54%, #AB02FF 74.52%, #FF069E 87.5%, #FF0408 100%)",
+          }}
+          rangeClassName="bg-unset"
+          thumbClassName="bg-white border border-white shadow"
+          thumbStyle={{
+            filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+          }}
+          min={0}
+          max={100}
+          step={1}
+        />
+
+        {/* Dark Red Gradient */}
+        <Slider
+          value={darkRed}
+          onValueChange={setDarkRed}
+          className="bg-grey-transparent-24"
+          trackClassName="h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-[#848484] to-[#A00202]"
+          rangeClassName="bg-unset"
+          thumbClassName="bg-white border border-white shadow"
+          thumbStyle={{
+            filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+          }}
+          min={0}
+          max={100}
+          step={1}
+        />
+      </div>
+    );
+  },
+};

package/src/components/Slider/Slider.tsx

@@ -2,30 +2,67 @@
 
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-
 import { cn } from "@/utils/cn";
 
+export interface CustomSliderProps
+  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  trackClassName?: string;
+  rangeClassName?: string;
+  thumbClassName?: string;
+  trackStyle?: React.CSSProperties;
+  thumbStyle?: React.CSSProperties;
+  rangeStyle?: React.CSSProperties;
+}
+
 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-2 w-full grow overflow-hidden rounded-full bg-grey-50">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    {/* <SliderPrimitive.Thumb className="block cursor-pointer h-5 w-5 rounded-full border-[3px] border-primary bg-background ring-offset-background ring-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> */}
-    <SliderPrimitive.Thumb className="block cursor-pointer h-5 w-5 rounded-full border-[3px] border-primary bg-background ring-0 outline-none disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-));
+  CustomSliderProps
+>(
+  (
+    {
+      className,
+      trackClassName,
+      rangeClassName,
+      thumbClassName,
+      thumbStyle,
+      trackStyle,
+      rangeStyle,
+      ...props
+    },
+    ref
+  ) => (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          "relative h-2 w-full grow overflow-hidden rounded-full bg-grey-50",
+          trackClassName
+        )}
+        style={trackStyle}
+      >
+        <SliderPrimitive.Range
+          className={cn("absolute h-full bg-primary", rangeClassName)}
+          style={rangeStyle}
+        />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        className={cn(
+          "block h-5 w-5 cursor-pointer rounded-full border-[3px] border-primary bg-background outline-none ring-0 transition-colors disabled:pointer-events-none disabled:opacity-50",
+          thumbClassName
+        )}
+        style={thumbStyle}
+      />
+    </SliderPrimitive.Root>
+  )
+);
+
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export type SliderProps = React.ComponentProps<typeof Slider>;
-
 export { Slider };