@rovula/ui 0.0.47 → 0.0.49

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

@@ -293,13 +293,8 @@ declare const meta: {
 export default meta;
 export declare const Default: {
     args: {
-        defaultValue: number[];
-        max: number;
-        step: number;
-        name: string;
-        minStepsBetweenThumbs: number;
+        checked: boolean;
         disabled: boolean;
-        inverted: boolean;
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TreeProps } from "./type";
+declare const Tree: FC<TreeProps>;
+export default Tree;

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Tree from "./Tree";
+declare const meta: Meta<typeof Tree>;
+export default meta;
+export declare const Default: StoryObj<typeof Tree>;
+export declare const onClick: StoryObj<typeof Tree>;
+export declare const CustomIcon: StoryObj<typeof Tree>;
+export declare const renderRightSection: StoryObj<typeof Tree>;
+export declare const ControlShowExpandButton: StoryObj<typeof Tree>;
+export declare const Diabled: StoryObj<typeof Tree>;
+export declare const DiabledEachItem: StoryObj<typeof Tree>;
+export declare const ExpandLoadData: StoryObj<typeof Tree>;

package/dist/esm/types/components/Tree/TreeItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TreeItemProps } from "./type";
+declare const TreeItem: FC<TreeItemProps>;
+export default TreeItem;

package/dist/esm/types/components/Tree/index.d.ts

@@ -0,0 +1,4 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+export * from "./type";
+export { Tree, TreeItem };

package/dist/esm/types/components/Tree/type.d.ts

@@ -0,0 +1,76 @@
+import { CSSProperties, ReactNode } from "react";
+export type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClickItem?: (id: string) => void;
+    children?: TreeData[];
+    renderIcon?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+};
+export interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showExpandButton?: boolean;
+    enableSeparatorLine?: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    checkIsLoading?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+    renderRightSection?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    renderElement?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+        children: ReactNode;
+        styles: {
+            branch: CSSProperties;
+            horizontalLine: CSSProperties;
+            expandButton: CSSProperties;
+            childPadding: CSSProperties;
+        };
+        onClick?: TreeItemProps["onClickItem"];
+    }) => ReactNode;
+    renderTitle?: (params: {
+        id: string;
+        title: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    classes?: Partial<{
+        elementWrapper: string;
+        branch: string;
+        itemWrapper: string;
+        itemContainer: string;
+        horizontalLine: string;
+        expandButton: string;
+        separatorLine: string;
+        checkbox: string;
+        item: string;
+        title: string;
+        childrenWrapper: string;
+    }>;
+}
+export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    loadingId?: string[];
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+}

package/dist/esm/types/index.d.ts

@@ -32,6 +32,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef } from 'react';
+import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -601,6 +601,86 @@ declare function useToast(options?: ToastOptions): {
     position?: ToasterPosition;
 };
 
+type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClickItem?: (id: string) => void;
+    children?: TreeData[];
+    renderIcon?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+};
+interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showExpandButton?: boolean;
+    enableSeparatorLine?: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    checkIsLoading?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+    renderRightSection?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    renderElement?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+        children: ReactNode;
+        styles: {
+            branch: CSSProperties;
+            horizontalLine: CSSProperties;
+            expandButton: CSSProperties;
+            childPadding: CSSProperties;
+        };
+        onClick?: TreeItemProps["onClickItem"];
+    }) => ReactNode;
+    renderTitle?: (params: {
+        id: string;
+        title: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    classes?: Partial<{
+        elementWrapper: string;
+        branch: string;
+        itemWrapper: string;
+        itemContainer: string;
+        horizontalLine: string;
+        expandButton: string;
+        separatorLine: string;
+        checkbox: string;
+        item: string;
+        title: string;
+        childrenWrapper: string;
+    }>;
+}
+interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    loadingId?: string[];
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+}
+
+declare const Tree: FC<TreeProps>;
+
+declare const TreeItem: FC<TreeItemProps>;
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -612,4 +692,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 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, 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, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, 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, 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, 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, useToast };

package/dist/index.js

@@ -34,6 +34,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/src/theme/global.css

@@ -1576,6 +1576,30 @@
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--grey-grey-140);
+  /* ------------------------------------------------------------------ */
+  /* Switch Component Tokens                                           */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[element]-[state]-[property]              */
+  /* Element: [progress, track]                                         */
+  /* ------------------------------------------------------------------ */
+  /* Default State */
+  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
+  --switch-thumb-default-color: var(--state-color-secondary-active);
+  /* Hover State */
+  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
+  --switch-thumb-hover-color: var(--switch-thumb-default-color);
+  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
+  /* Active State */
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active);
+  /* Active Hover State */
+  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
+  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
+  /* Disabled State */
+  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
+  --switch-thumb-disabled-color: var(--state-color-disable-solid)
+;
 }
 
 :root[data-theme="SKL"]{
@@ -1820,16 +1844,16 @@
   /* #2d2e30; */
   --input-color-error: #ed2f15;
   /* Function button */
-  --function-default-solid: #1e3249;
-  --function-default-hover: #35475b;
-  --function-default-hover-bg: rgba(30 50 73 / 0.08);
-  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-solid: var(--state-color-primary-default);
+  --function-default-hover: var(--state-color-primary-hover);
+  --function-default-hover-bg: var(--state-color-primary-hover-bg);
+  --function-default-stroke: var(--state-color-primary-stroke);
   --function-default-icon: #ffffff;
-  --function-default-outline-icon: #1e3249;
-  --function-active-solid: #9b8f00;
-  --function-active-hover: #b1a400;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-default-outline-icon: var(--state-color-primary-default);
+  --function-active-solid: var(--state-color-secondary-default);
+  --function-active-hover: var(--state-color-secondary-hover);
+  --function-active-hover-bg: var(--state-color-secondary-hover-bg);
+  --function-active-stroke:  var(--state-color-secondary-stroke);
   --function-active-icon: #ffffff;
   --text-black: #000000;
   --text-dark: #18283a;
@@ -1853,7 +1877,7 @@
   --background: var(--base-color-bg);
   --foreground: var(--common-black);
   --primary: var(--primary-ramps-primary-100);
-  --secondary: var(--secondary-ramps-secondary-100);
+  --primary: var(--secondary-ramps-secondary-100);
   --tertiary: var(--tertiary-ramps-tertiary-100);
   --info: var(--info-info-100);
   --success: var(--success-success-100);
@@ -3518,6 +3542,10 @@ input[type=number] {
   margin-right: 1rem;
 }
 
+.mr-\[2px\] {
+  margin-right: 2px;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -3619,6 +3647,11 @@ input[type=number] {
   height: 14px;
 }
 
+.size-\[16pt\] {
+  width: 16pt;
+  height: 16pt;
+}
+
 .size-\[30px\] {
   width: 30px;
   height: 30px;
@@ -3634,6 +3667,10 @@ input[type=number] {
   height: 100%;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -3674,6 +3711,10 @@ input[type=number] {
   height: 24px;
 }
 
+.h-\[2px\] {
+  height: 2px;
+}
+
 .h-\[32px\] {
   height: 32px;
 }
@@ -3727,6 +3768,10 @@ input[type=number] {
   max-height: 100vh;
 }
 
+.min-h-10 {
+  min-height: 2.5rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -4083,6 +4128,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -6059,6 +6108,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
 }
 
+.fill-info {
+  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+}
+
 .fill-inherit {
   fill: inherit;
 }
@@ -6083,6 +6136,14 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.fill-secondary {
+  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+}
+
+.fill-warning {
+  fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
+}
+
 .stroke-input-default-stroke {
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
@@ -8921,8 +8982,8 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.group:disabled .group-disabled\:bg-\[--switch-thumb-disabled-color\] {
-  background-color: var(--switch-thumb-disabled-color);
+.group:disabled .group-disabled\:\!bg-\[--switch-thumb-disabled-color\] {
+  background-color: var(--switch-thumb-disabled-color) !important;
 }
 
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
@@ -9255,8 +9316,8 @@ input[type=number] {
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
 
-.data-\[disabled\]\:bg-\[var\(--switch-disabled-color\)\][data-disabled] {
-  background-color: var(--switch-disabled-color);
+.data-\[disabled\]\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled] {
+  background-color: var(--switch-disabled-color) !important;
 }
 
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true] {

package/dist/theme/themes/SKL/color.css

@@ -12,16 +12,16 @@
   --input-color-error: #ed2f15;
 
   /* Function button */
-  --function-default-solid: #1e3249;
-  --function-default-hover: #35475b;
-  --function-default-hover-bg: rgba(30 50 73 / 0.08);
-  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-solid: var(--state-color-primary-default);
+  --function-default-hover: var(--state-color-primary-hover);
+  --function-default-hover-bg: var(--state-color-primary-hover-bg);
+  --function-default-stroke: var(--state-color-primary-stroke);
   --function-default-icon: #ffffff;
-  --function-default-outline-icon: #1e3249;
-  --function-active-solid: #9b8f00;
-  --function-active-hover: #b1a400;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-default-outline-icon: var(--state-color-primary-default);
+  --function-active-solid: var(--state-color-secondary-default);
+  --function-active-hover: var(--state-color-secondary-hover);
+  --function-active-hover-bg: var(--state-color-secondary-hover-bg);
+  --function-active-stroke:  var(--state-color-secondary-stroke);
   --function-active-icon: #ffffff;
 
   --text-black: #000000;
@@ -49,7 +49,7 @@
   --foreground: var(--common-black);
 
   --primary: var(--primary-ramps-primary-100);
-  --secondary: var(--secondary-ramps-secondary-100);
+  --primary: var(--secondary-ramps-secondary-100);
   --tertiary: var(--tertiary-ramps-tertiary-100);
   --info: var(--info-info-100);
   --success: var(--success-success-100);

package/dist/theme/themes/xspector/baseline.css

@@ -6,3 +6,4 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/dropdown-menu.css);
+@import url(components/switch.css);

package/dist/theme/themes/xspector/components/switch.css

@@ -0,0 +1,30 @@
+:root[data-theme="xspector"] {
+  /* ------------------------------------------------------------------ */
+  /* Switch Component Tokens                                           */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[element]-[state]-[property]              */
+  /* Element: [progress, track]                                         */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
+  --switch-thumb-default-color: var(--state-color-secondary-active);
+
+  /* Hover State */
+  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
+  --switch-thumb-hover-color: var(--switch-thumb-default-color);
+  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
+
+  /* Active State */
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active);
+
+  /* Active Hover State */
+  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
+  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
+
+  /* Disabled State */
+  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
+  --switch-thumb-disabled-color: var(--state-color-disable-solid)
+}

package/package.json

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

package/src/components/Switch/Switch.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),
@@ -24,13 +24,8 @@ export default meta;
 
 export const Default = {
   args: {
-    defaultValue: [50],
-    max: 100,
-    step: 1,
-    name: "test",
-    minStepsBetweenThumbs: 1,
+    checked: false,
     disabled: false,
-    inverted: false,
   },
   render: (args) => {
     console.log("args ", args);

package/src/components/Switch/Switch.tsx

@@ -13,7 +13,7 @@ const switchStateClasses = {
   checked:
     "data-[state=checked]:bg-[var(--switch-active-color)] hover:data-[state=checked]:bg-[var(--switch-active-hover-color)]",
   disabled:
-    "data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--switch-disabled-color)] data-[disabled]:pointer-events-none",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:!bg-[var(--switch-disabled-color)] data-[disabled]:pointer-events-none",
 };
 
 const thumbBaseClasses =
@@ -27,7 +27,7 @@ const thumbStateClasses = {
     "group-hover:ring group-hover:data-[state=checked]:ring-[var(--switch-thumb-active-hover-ring)] group-hover:data-[state=unchecked]:ring-[var(--switch-thumb-hover-ring)]",
   hoverColor:
     "group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
-  disabled: "group-disabled:bg-[--switch-thumb-disabled-color]",
+  disabled: "group-disabled:!bg-[--switch-thumb-disabled-color]",
 };
 
 const Switch = React.forwardRef<