@rovula/ui 0.0.46 → 0.0.48

package/dist/cjs/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/cjs/types/components/Table/Table.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 declare const Table: React.ForwardRefExoticComponent<{
+    rootClassName?: string | undefined;
     rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/cjs/types/components/Table/Table.stories.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
+        rootClassName?: string | undefined;
         rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
     } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
@@ -9,6 +10,7 @@ declare const meta: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        rootClassName?: string | undefined;
         rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;

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

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from "react";
+export type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    children?: TreeData[];
+};
+export interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+}
+export type TreeProps = {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+};
+export declare const Tree: FC<TreeProps>;
+/**
+ * TODO
+ * -----
+ * - Custom style
+ * - Custom icon, elm and render props -> callback with selected*expanded
+ * - OnClick item
+ * - OnClick expandButton
+ * - disabled props
+ * - right section icon
+ * - props for show icon, line
+ * - props for render item
+ * - OnLoad mode
+ * -----
+ *  - props onLoad item
+ *  - props for hasChildren * for check to trigger on load
+ *  - animate expand
+ *  - check duplicate reversive on updateChildren
+ *  - write storybook
+ */

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

@@ -0,0 +1,5 @@
+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>;

package/dist/components/Switch/Switch.js

@@ -14,9 +14,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "@/utils/cn";
+const switchBaseClasses = "group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors";
+const switchStateClasses = {
+    unchecked: "data-[state=unchecked]:bg-[var(--switch-default-color)] hover:data-[state=unchecked]:bg-[var(--switch-hover-color)]",
+    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",
+};
+const thumbBaseClasses = "block size-4 rounded-full shadow-lg transition-transform";
+const thumbStateClasses = {
+    unchecked: "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:-translate-x-[2px]",
+    checked: "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
+    hover: "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]",
+};
 const Switch = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn("group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors", "data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]", "hover:data-[state=checked]:bg-secondary-active/[0.48] hover:data-[state=unchecked]:bg-tertiary-active/[0.48]", "data-[disabled]:cursor-not-allowed data-[disabled]:bg-state-disable-solid/[0.32] data-[disabled]:pointer-events-none ", className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(" block size-4 rounded-full bg-secondary-active shadow-lg transition-transform", "data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active", "group-hover:ring group-hover:data-[state=checked]:ring-secondary-hover-bg group-hover:data-[state=unchecked]:ring-tertiary-hover-bg", "group-disabled:bg-state-disable-solid") }) })));
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn(switchBaseClasses, switchStateClasses.unchecked, switchStateClasses.checked, switchStateClasses.disabled, className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(thumbBaseClasses, thumbStateClasses.unchecked, thumbStateClasses.checked, thumbStateClasses.hover, thumbStateClasses.hoverColor, thumbStateClasses.disabled) }) })));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

package/dist/components/Switch/Switch.stories.js

@@ -10,19 +10,14 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 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/dist/components/Table/Table.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "@/utils/cn";
 const Table = React.forwardRef((_a, ref) => {
-    var { className, rootRef } = _a, props = __rest(_a, ["className", "rootRef"]);
-    return (_jsx("div", { className: "relative h-full w-full overflow-auto", ref: rootRef, children: _jsx("table", Object.assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
+    var { rootClassName, className, rootRef } = _a, props = __rest(_a, ["rootClassName", "className", "rootRef"]);
+    return (_jsx("div", { className: cn("relative h-full w-full overflow-auto", rootClassName), ref: rootRef, children: _jsx("table", Object.assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
 });
 Table.displayName = "Table";
 const TableHeader = React.forwardRef((_a, ref) => {

package/dist/components/Tree/Tree.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionButton, Checkbox, Icon, cn } from "@/index";
+import { useCallback, useMemo, useState, useEffect, } from "react";
+const TreeItem = ({ id, title, children, isFirstLevel = false, isLastItem, checkIsExpanded, checkIsChecked, onExpandChange, onCheckedChange, }) => {
+    const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
+    const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
+    const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
+    const handleExpandToggle = useCallback(() => {
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
+    }, [id, isExpanded, onExpandChange]);
+    // TODO move to props
+    const lineSize = 2;
+    const horizontalLineWidth = 4;
+    const expandButtonSize = 30;
+    const spacing = 2;
+    const styles = {
+        branch: {
+            height: isLastItem
+                ? `calc(50% + ${lineSize}px)`
+                : `calc(100% + ${lineSize}px)`,
+            width: lineSize,
+            marginTop: -lineSize,
+            borderBottomLeftRadius: lineSize / 2,
+        },
+        horizontalLine: {
+            height: lineSize,
+            width: lineSize +
+                horizontalLineWidth +
+                (hasChildren ? 0 : expandButtonSize + spacing),
+            marginLeft: -lineSize + 0.1,
+            borderBottomLeftRadius: lineSize / 2,
+        },
+        expandButton: {
+            width: expandButtonSize,
+            height: expandButtonSize,
+        },
+        childPadding: {
+            paddingLeft: isFirstLevel
+                ? expandButtonSize / 2 - lineSize / 2
+                : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+        },
+    };
+    return (_jsxs("div", { className: "flex flex-row w-full", children: [_jsx("div", { className: cn("bg-grey-150", { "h-1/2": isLastItem }), style: styles.branch }), _jsxs("div", { className: "flex flex-col w-full", children: [_jsxs("div", { className: "flex items-center py-2 min-h-10", children: [!isFirstLevel && (_jsx("div", { className: "bg-grey-150", style: styles.horizontalLine })), isFirstLevel && !hasChildren && (_jsx("div", { className: "flex mr-[2px]", style: styles.expandButton })), hasChildren && (_jsx("div", { className: "flex mr-[2px]", style: styles.expandButton, children: _jsx(ActionButton, { variant: "icon", size: "sm", onClick: handleExpandToggle, children: _jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" }) }) })), _jsx(Checkbox, { id: id, className: "size-[16pt]", checked: isChecked, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) }), _jsxs("div", { className: "ml-2 gap-1 flex items-center text-foreground", children: [_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning" }), _jsx("label", { htmlFor: id, className: "flex-1 cursor-pointer text-subtitle5 text-ellipsis", children: title })] })] }), isExpanded && hasChildren && (_jsx("div", { className: "flex flex-col", style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({}, child, { isLastItem: idx === children.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange }), child.id))) }))] })] }));
+};
+export const Tree = ({ data, defaultExpandedId = [], defaultCheckedId = [], checkedId, onCheckedChange, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, }) => {
+    const [checkedState, setCheckedState] = useState({});
+    const [expandedState, setExpandedState] = useState({});
+    const traverseTree = (nodes, callback) => {
+        nodes.forEach((node) => {
+            callback(node);
+            if (node.children) {
+                traverseTree(node.children, callback);
+            }
+        });
+    };
+    useEffect(() => {
+        if (defaultExpandAll) {
+            const allExpanded = {};
+            traverseTree(data, (node) => {
+                allExpanded[node.id] = true;
+            });
+            setExpandedState(allExpanded);
+        }
+        else {
+            const initialExpandedState = defaultExpandedId.reduce((acc, id) => {
+                acc[id] = true;
+                return acc;
+            }, {});
+            setExpandedState(initialExpandedState);
+        }
+    }, [data, defaultExpandedId, defaultExpandAll]);
+    useEffect(() => {
+        if (defaultCheckAll) {
+            const allChecked = {};
+            traverseTree(data, (node) => {
+                allChecked[node.id] = true;
+            });
+            setCheckedState(allChecked);
+        }
+        else if (!checkedId) {
+            const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
+                acc[id] = true;
+                return acc;
+            }, {});
+            setCheckedState(initialCheckedState);
+        }
+    }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
+    const handleExpandChange = useCallback((id, expanded) => {
+        setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
+    }, []);
+    const handleCheckedChange = useCallback((id, checked) => {
+        let newState = Object.assign(Object.assign({}, checkedState), { [id]: checked });
+        if (hierarchicalCheck) {
+            const updateCheckedState = (nodeId, isChecked, state) => {
+                state[nodeId] = isChecked;
+                // Update children recursively
+                const updateChildren = (parentId, isChecked) => {
+                    traverseTree(data, (node) => {
+                        if (node.id === parentId && node.children) {
+                            node.children.forEach((child) => {
+                                state[child.id] = isChecked;
+                                updateChildren(child.id, isChecked);
+                            });
+                        }
+                    });
+                };
+                // Update parents recursively
+                const updateParents = (childId, state) => {
+                    traverseTree(data, (node) => {
+                        var _a;
+                        if ((_a = node.children) === null || _a === void 0 ? void 0 : _a.some((child) => child.id === childId)) {
+                            const allChildrenChecked = node.children.every((child) => state[child.id]);
+                            state[node.id] = allChildrenChecked;
+                            updateParents(node.id, state);
+                        }
+                    });
+                };
+                updateChildren(nodeId, isChecked);
+                updateParents(nodeId, state);
+                return state;
+            };
+            newState = updateCheckedState(id, checked, newState);
+        }
+        setCheckedState(newState);
+        if (onCheckedChange) {
+            const checkedIds = Object.keys(newState).filter((key) => newState[key]);
+            onCheckedChange(checkedIds);
+        }
+    }, [checkedState, data, onCheckedChange, hierarchicalCheck]);
+    const checkIsExpanded = useCallback((id) => !!expandedState[id], [expandedState]);
+    const checkIsChecked = useCallback((id) => {
+        if (checkedId) {
+            return checkedId.includes(id);
+        }
+        return !!checkedState[id];
+    }, [checkedId, checkedState]);
+    return (_jsx("div", { className: "w-full", children: data.map((item, idx) => (_jsx(TreeItem, Object.assign({}, item, { isFirstLevel: true, isLastItem: idx === data.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: handleExpandChange, onCheckedChange: handleCheckedChange }), item.id))) }));
+};

package/dist/components/Tree/Tree.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tree } from "./Tree";
+// Example data for testing the Tree component (as plain objects)
+const exampleData = [
+    {
+        id: "1",
+        title: "Parent Folder 1",
+        children: [
+            {
+                id: "1.1",
+                title: "Child Folder 1.1",
+                children: [
+                    { id: "1.1.1", title: "Sub Folder 1.1.1" },
+                    { id: "1.1.2", title: "Sub Folder 1.1.2" },
+                ],
+            },
+            { id: "1.2", title: "Child Folder 1.2" },
+        ],
+    },
+    {
+        id: "2",
+        title: "Parent Folder 2",
+        children: [{ id: "2.1", title: "Child Folder 2.1" }],
+    },
+    { id: "3", title: "Parent Folder 3" },
+];
+// Storybook metadata
+const meta = {
+    title: "Components/Tree",
+    component: Tree,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// Default story
+export const Default = {
+    args: {
+        data: exampleData,
+        defaultExpandedId: ["1", "1.1"],
+        defaultCheckedId: ["1.1"],
+        defaultExpandAll: true,
+        defaultCheckAll: true,
+        hierarchicalCheck: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args)) }));
+    },
+};

package/dist/esm/bundle.css

@@ -1,6 +1,7 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
+@import "./themes/SKL/baseline.css";
 
 /*
 ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
@@ -698,6 +699,9 @@ input[type=number] {
 .mr-4{
   margin-right: 1rem;
 }
+.mr-\[2px\]{
+  margin-right: 2px;
+}
 .mt-1{
   margin-top: 0.25rem;
 }
@@ -776,6 +780,10 @@ input[type=number] {
   width: 14px;
   height: 14px;
 }
+.size-\[16pt\]{
+  width: 16pt;
+  height: 16pt;
+}
 .size-\[30px\]{
   width: 30px;
   height: 30px;
@@ -788,6 +796,9 @@ input[type=number] {
   width: 100%;
   height: 100%;
 }
+.h-1\/2{
+  height: 50%;
+}
 .h-10{
   height: 2.5rem;
 }
@@ -858,6 +869,9 @@ input[type=number] {
 .max-h-screen{
   max-height: 100vh;
 }
+.min-h-10{
+  min-height: 2.5rem;
+}
 .w-1\/2{
   width: 50%;
 }
@@ -1131,6 +1145,9 @@ input[type=number] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.text-ellipsis{
+  text-overflow: ellipsis;
+}
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2201,10 +2218,6 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-active{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-secondary-default{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2722,6 +2735,9 @@ input[type=number] {
 .fill-primary-default{
   fill: color-mix(in srgb, var(--state-color-primary-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);
 }
@@ -4977,9 +4993,8 @@ input[type=number] {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.group:disabled .group-disabled\:bg-state-disable-solid{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+.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{
   top: 0.5rem;
@@ -5241,8 +5256,8 @@ input[type=number] {
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
-.data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled]{
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
+.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]{
   --tw-bg-opacity: 1;
@@ -5331,13 +5346,16 @@ input[type=number] {
 .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
   background-color: var(--dropdown-menu-selected-bg);
 }
+.data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state=checked]{
+  background-color: var(--switch-active-color);
+}
+.data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state=checked]{
+  background-color: var(--switch-thumb-active-color);
+}
 .data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked]{
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
-}
 .data-\[state\=open\]\:bg-primary[data-state=open]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5346,12 +5364,11 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.data-\[state\=unchecked\]\:bg-tertiary-active[data-state=unchecked]{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * var(--tw-bg-opacity)), transparent);
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state=unchecked]{
+  background-color: var(--switch-default-color);
 }
-.data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state=unchecked]{
+  background-color: var(--switch-thumb-default-color);
 }
 .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
   fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
@@ -5537,27 +5554,31 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state=checked]:hover{
+  background-color: var(--switch-active-hover-color);
+}
 .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover{
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
-}
-.hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover{
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
+.hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state=unchecked]:hover{
+  background-color: var(--switch-hover-color);
 }
 .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
 }
-.group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked]{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+.group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state=checked]{
+  background-color: var(--switch-thumb-active-hover-color);
 }
-.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked]{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+.group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state=unchecked]{
+  background-color: var(--switch-thumb-hover-color);
+}
+.group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state=checked]{
+  --tw-ring-color: var(--switch-thumb-active-hover-ring);
+}
+.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state=unchecked]{
+  --tw-ring-color: var(--switch-thumb-hover-ring);
 }
 @media (min-width: 640px){