@moduix/react 2.2.0 → 2.2.4

package/dist/components/swap/Swap.d.ts

@@ -1,11 +1,16 @@
-import { Swap, useSwapContext } from "@ark-ui/react/swap";
-
-//#region src/components/swap/Swap.d.ts
-declare const Swap$1: import("react").ForwardRefExoticComponent<Omit<Swap.RootProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Swap.RootProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Swap.RootProviderProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<Swap.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  useSwap: (props?: import("@ark-ui/react/swap").UseSwapProps) => import("@ark-ui/react/swap").UseSwapReturn;
+import { Swap as SwapPrimitive, useSwap, useSwapContext } from '@ark-ui/react/swap';
+import type { ComponentProps } from 'react';
+type SwapAnimation = 'fade' | 'scale' | 'rotate' | 'flip' | (string & {});
+type SwapRootProps = ComponentProps<typeof SwapPrimitive.Root> & {
+    animation?: SwapAnimation;
 };
-//#endregion
-export { Swap$1 as Swap, useSwapContext };
+type SwapRootProviderProps = ComponentProps<typeof SwapPrimitive.RootProvider> & {
+    animation?: SwapAnimation;
+};
+declare const Swap: import("react").ForwardRefExoticComponent<Omit<SwapRootProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SwapRootProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SwapRootProviderProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<SwapPrimitive.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    useSwap: (props?: import("@ark-ui/react/swap").UseSwapProps) => import("@ark-ui/react/swap").UseSwapReturn;
+};
+export { Swap, useSwap, useSwapContext, type SwapAnimation };

package/dist/components/swap/Swap.js

@@ -1,39 +1,40 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Swap_module_default from "./Swap.module.js";
-import { clsx } from "clsx";
-import { forwardRef } from "react";
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { Swap, useSwap, useSwapContext } from "@ark-ui/react/swap";
-//#region src/components/swap/Swap.tsx
-const SwapRoot = forwardRef(function SwapRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Swap.Root, {
-		ref,
-		"data-slot": "swap-root",
-		className: clsx(Swap_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Swap_module from "./Swap.module.js";
+const Swap_SwapRoot = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Swap.Root, {
+        ref: ref,
+        "data-slot": "swap-root",
+        "data-animation": animation,
+        className: clsx(Swap_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SwapRootProvider = forwardRef(function SwapRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Swap.RootProvider, {
-		ref,
-		"data-slot": "swap-root-provider",
-		className: clsx(Swap_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Swap_SwapRootProvider = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Swap.RootProvider, {
+        ref: ref,
+        "data-slot": "swap-root-provider",
+        "data-animation": animation,
+        className: clsx(Swap_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SwapIndicator = forwardRef(function SwapIndicator({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Swap.Indicator, {
-		ref,
-		"data-slot": "swap-indicator",
-		className: clsx(Swap_module_default.indicator, normalizeClassName(className)),
-		...props
-	});
+const Swap_SwapIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Swap.Indicator, {
+        ref: ref,
+        "data-slot": "swap-indicator",
+        className: clsx(Swap_module.indicator, normalizeClassName(className)),
+        ...props
+    });
 });
-const Swap$1 = Object.assign(SwapRoot, {
-	Root: SwapRoot,
-	RootProvider: SwapRootProvider,
-	Indicator: SwapIndicator,
-	useSwap
+const Swap_Swap = Object.assign(Swap_SwapRoot, {
+    Root: Swap_SwapRoot,
+    RootProvider: Swap_SwapRootProvider,
+    Indicator: Swap_SwapIndicator,
+    useSwap: useSwap
 });
-//#endregion
-export { Swap$1 as Swap, useSwapContext };
+export { Swap_Swap as Swap, useSwap, useSwapContext };

package/dist/components/swap/Swap.module.js

@@ -1,11 +1,22 @@
-import './Swap.css';
-//#region src/components/swap/Swap.module.css
-var Swap_module_default = {
-	"indicator": "jqWswG_indicator",
-	"root": "jqWswG_root",
-	"swap": "jqWswG_swap",
-	"swap-enter": "jqWswG_swap-enter",
-	"swap-exit": "jqWswG_swap-exit"
+import "./Swap_module.css";
+const Swap_module = {
+    root: "root-hsHHcI",
+    indicator: "indicator-S0xChs",
+    "swap-enter": "swap-enter-VItkkF",
+    swapEnter: "swap-enter-VItkkF",
+    "swap-exit": "swap-exit-LhGw4e",
+    swapExit: "swap-exit-LhGw4e",
+    "swap-scale-enter": "swap-scale-enter-Dk2hX4",
+    swapScaleEnter: "swap-scale-enter-Dk2hX4",
+    "swap-scale-exit": "swap-scale-exit-_CsIGz",
+    swapScaleExit: "swap-scale-exit-_CsIGz",
+    "swap-rotate-enter": "swap-rotate-enter-tH9kI6",
+    swapRotateEnter: "swap-rotate-enter-tH9kI6",
+    "swap-rotate-exit": "swap-rotate-exit-KRzyNE",
+    swapRotateExit: "swap-rotate-exit-KRzyNE",
+    "swap-flip-enter": "swap-flip-enter-kaIqut",
+    swapFlipEnter: "swap-flip-enter-kaIqut",
+    "swap-flip-exit": "swap-flip-exit-x6dSs8",
+    swapFlipExit: "swap-flip-exit-x6dSs8"
 };
-//#endregion
-export { Swap_module_default as default };
+export default Swap_module;

package/dist/components/swap/Swap_module.css

@@ -0,0 +1,118 @@
+@layer moduix.components {
+  .root-hsHHcI {
+    vertical-align: middle;
+    grid-template-areas: "swap";
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .root-hsHHcI[data-animation="flip"] {
+    perspective: 24rem;
+  }
+
+  .indicator-S0xChs {
+    color: inherit;
+    grid-area: swap;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .root-hsHHcI[data-animation="fade"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-enter-VItkkF var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="fade"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-exit-LhGw4e var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="scale"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-scale-enter-Dk2hX4 var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="scale"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-scale-exit-_CsIGz var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="rotate"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-rotate-enter-tH9kI6 var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="rotate"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-rotate-exit-KRzyNE var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs {
+    backface-visibility: hidden;
+  }
+
+  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-flip-enter-kaIqut var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-flip-exit-x6dSs8 var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .indicator-S0xChs[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
+  @keyframes swap-enter-VItkkF {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+    }
+  }
+
+  @keyframes swap-exit-LhGw4e {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+    }
+  }
+
+  @keyframes swap-scale-enter-Dk2hX4 {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: scale(var(--moduix-swap-enter-starting-scale, .5));
+    }
+  }
+
+  @keyframes swap-scale-exit-_CsIGz {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: scale(var(--moduix-swap-exit-ending-scale, .5));
+    }
+  }
+
+  @keyframes swap-rotate-enter-tH9kI6 {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: rotate(-180deg);
+    }
+  }
+
+  @keyframes swap-rotate-exit-KRzyNE {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: rotate(180deg);
+    }
+  }
+
+  @keyframes swap-flip-enter-kaIqut {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: rotateY(-180deg);
+    }
+  }
+
+  @keyframes swap-flip-exit-x6dSs8 {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: rotateY(180deg);
+    }
+  }
+}
+

package/dist/components/swap/index.d.ts

@@ -1,2 +1 @@
-import { Swap, useSwapContext } from "./Swap.js";
-export { Swap, useSwapContext };
+export { Swap, useSwap, useSwapContext, type SwapAnimation } from './Swap.js';

package/dist/components/swap/index.js

@@ -0,0 +1 @@
+export { Swap, useSwap, useSwapContext } from "./Swap.js";

package/dist/components/switch/Switch.d.ts

@@ -1,21 +1,19 @@
-import { ComponentProps, ReactNode } from "react";
-import { Switch, useSwitch, useSwitchContext } from "@ark-ui/react/switch";
-
-//#region src/components/switch/Switch.d.ts
+import { Switch as SwitchPrimitive, useSwitch, useSwitchContext } from '@ark-ui/react/switch';
+import type { ComponentProps, ReactNode } from 'react';
 type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type SwitchRootProps = ComponentProps<typeof Switch.Root> & {
-  size?: SwitchSize;
+type SwitchRootProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: SwitchSize;
 };
-type SwitchRootProviderProps = ComponentProps<typeof Switch.RootProvider> & {
-  size?: SwitchSize;
+type SwitchRootProviderProps = ComponentProps<typeof SwitchPrimitive.RootProvider> & {
+    size?: SwitchSize;
 };
-declare const Switch$1: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<SwitchRootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<Switch.ControlProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Thumb: import("react").ForwardRefExoticComponent<Omit<Switch.ThumbProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<Switch.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Context: (props: Switch.ContextProps) => ReactNode;
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SwitchRootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.ControlProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.ThumbProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Context: (props: SwitchPrimitive.ContextProps) => ReactNode;
 };
-//#endregion
-export { Switch$1 as Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, useSwitch, useSwitchContext };
+export { Switch, useSwitch, useSwitchContext };
+export type { SwitchRootProps, SwitchRootProviderProps, SwitchSize };

package/dist/components/switch/Switch.js

@@ -1,70 +1,76 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Switch_module_default from "./Switch.module.js";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/react/switch";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/react/switch";
-//#region src/components/switch/Switch.tsx
-const SwitchRoot = forwardRef(function SwitchRoot({ asChild, children, className, size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Switch.Root, {
-		ref,
-		asChild,
-		"data-slot": "switch-root",
-		"data-size": size,
-		className: clsx(Switch_module_default.root, normalizeClassName(className)),
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Switch_module from "./Switch.module.js";
+const Switch_SwitchRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Switch.Root, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "switch-root",
+        "data-size": size,
+        className: clsx(Switch_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const SwitchRootProvider = forwardRef(function SwitchRootProvider({ asChild, children, className, size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Switch.RootProvider, {
-		ref,
-		asChild,
-		"data-slot": "switch-root-provider",
-		"data-size": size,
-		className: clsx(Switch_module_default.root, normalizeClassName(className)),
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+const Switch_SwitchRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Switch.RootProvider, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "switch-root-provider",
+        "data-size": size,
+        className: clsx(Switch_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const SwitchControl = forwardRef(function SwitchControl({ className, children, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Switch.Control, {
-		ref,
-		"data-slot": "switch-control",
-		className: clsx(Switch_module_default.control, normalizeClassName(className)),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, {})
-	});
+const Switch_SwitchControl = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Switch.Control, {
+        ref: ref,
+        "data-slot": "switch-control",
+        className: clsx(Switch_module.control, normalizeClassName(className)),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(Switch_SwitchThumb, {})
+    });
 });
-const SwitchThumb = forwardRef(function SwitchThumb({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Switch.Thumb, {
-		ref,
-		"data-slot": "switch-thumb",
-		className: clsx(Switch_module_default.thumb, normalizeClassName(className)),
-		...props
-	});
+const Switch_SwitchThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Switch.Thumb, {
+        ref: ref,
+        "data-slot": "switch-thumb",
+        className: clsx(Switch_module.thumb, normalizeClassName(className)),
+        ...props
+    });
 });
-const SwitchLabel = forwardRef(function SwitchLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Switch.Label, {
-		ref,
-		"data-slot": "switch-label",
-		className: clsx(Switch_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const Switch_SwitchLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Switch.Label, {
+        ref: ref,
+        "data-slot": "switch-label",
+        className: clsx(Switch_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
 function withHiddenInput(children, asChild) {
-	const hiddenInput = /* @__PURE__ */ jsx(Switch.HiddenInput, { "data-slot": "switch-hidden-input" });
-	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
-	const child = Children.only(children);
-	return cloneElement(child, {}, child.props.children, hiddenInput);
+    const hiddenInput = /*#__PURE__*/ jsx(Switch.HiddenInput, {
+        "data-slot": "switch-hidden-input"
+    });
+    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children,
+            hiddenInput
+        ]
+    });
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
-const Switch$1 = Object.assign(SwitchRoot, {
-	Root: SwitchRoot,
-	RootProvider: SwitchRootProvider,
-	Control: SwitchControl,
-	Thumb: SwitchThumb,
-	Label: SwitchLabel,
-	Context: SwitchContext
+const Switch_Switch = Object.assign(Switch_SwitchRoot, {
+    Root: Switch_SwitchRoot,
+    RootProvider: Switch_SwitchRootProvider,
+    Control: Switch_SwitchControl,
+    Thumb: Switch_SwitchThumb,
+    Label: Switch_SwitchLabel,
+    Context: SwitchContext
 });
-//#endregion
-export { Switch$1 as Switch, useSwitch, useSwitchContext };
+export { Switch_Switch as Switch, useSwitch, useSwitchContext };

package/dist/components/switch/Switch.module.js

@@ -1,10 +1,8 @@
-import './Switch.css';
-//#region src/components/switch/Switch.module.css
-var Switch_module_default = {
-	"control": "PUgkqa_control",
-	"label": "PUgkqa_label",
-	"root": "PUgkqa_root",
-	"thumb": "PUgkqa_thumb"
+import "./Switch_module.css";
+const Switch_module = {
+    root: "root-BQV0g7",
+    control: "control-_x56fO",
+    thumb: "thumb-AkEGnM",
+    label: "label-OFdult"
 };
-//#endregion
-export { Switch_module_default as default };
+export default Switch_module;

package/dist/components/switch/{Switch.css → Switch_module.css}

@@ -1,22 +1,23 @@
 @layer moduix.components {
-  .PUgkqa_root {
+  .root-BQV0g7 {
     align-items: center;
     gap: var(--moduix-switch-gap, var(--moduix-spacing-2));
     vertical-align: middle;
     cursor: pointer;
+    width: -moz-fit-content;
     width: fit-content;
     display: inline-flex;
+  }
 
-    &[data-disabled], &[data-readonly] {
-      cursor: default;
-    }
+  .root-BQV0g7[data-disabled], .root-BQV0g7[data-readonly] {
+    cursor: default;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-switch-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .root-BQV0g7[data-disabled] {
+    opacity: var(--moduix-switch-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .PUgkqa_control {
+  .control-_x56fO {
     box-sizing: border-box;
     width: var(--moduix-switch-width, 3rem);
     height: var(--moduix-switch-height, var(--moduix-size-xs));
@@ -28,6 +29,7 @@
     border-radius: var(--moduix-switch-radius, var(--moduix-radius-full));
     padding: var(--moduix-switch-padding, var(--moduix-spacing-0-5));
     background-color: var(--moduix-switch-bg, var(--moduix-color-muted));
+    -webkit-user-select: none;
     user-select: none;
     transition: background-color var(--moduix-switch-transition, var(--moduix-transition-default)),
       border-color var(--moduix-switch-transition, var(--moduix-transition-default)),
@@ -38,60 +40,64 @@
     line-height: 0;
     display: inline-flex;
     position: relative;
+  }
 
-    &[data-state="checked"] {
-      border-color: var(--moduix-switch-border-color-checked, var(--moduix-color-primary));
-      background-color: var(--moduix-switch-bg-checked, var(--moduix-color-primary));
-    }
+  .control-_x56fO[data-state="checked"] {
+    border-color: var(--moduix-switch-border-color-checked, var(--moduix-color-primary));
+    background-color: var(--moduix-switch-bg-checked, var(--moduix-color-primary));
+  }
 
-    &[data-focus-visible] {
-      outline: var(--moduix-switch-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .control-_x56fO[data-invalid] {
+    border-color: var(--moduix-color-destructive);
+  }
+
+  .control-_x56fO[data-focus-visible] {
+    outline: var(--moduix-switch-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-switch-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-switch-focus-ring-offset, var(--moduix-border-width-sm));
-    }
+    outline-offset: var(--moduix-switch-focus-ring-offset, var(--moduix-border-width-sm));
+  }
 
-    @media (hover: hover) {
-      &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--moduix-switch-bg-hover, var(--moduix-color-accent));
-      }
+  @media (hover: hover) {
+    .control-_x56fO[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-switch-bg-hover, var(--moduix-color-accent));
+    }
 
-      &[data-state="checked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--moduix-switch-bg-checked-hover, var(--moduix-switch-bg-checked, var(--moduix-color-primary)));
-      }
+    .control-_x56fO[data-state="checked"][data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-switch-bg-checked-hover, var(--moduix-switch-bg-checked, var(--moduix-color-primary)));
     }
   }
 
-  .PUgkqa_root[data-size="xs"] .PUgkqa_control {
+  .root-BQV0g7[data-size="xs"] .control-_x56fO {
     --moduix-switch-width: var(--moduix-switch-width-xs, 1.75rem);
     --moduix-switch-height: var(--moduix-switch-height-xs, 1rem);
     --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
   }
 
-  .PUgkqa_root[data-size="sm"] .PUgkqa_control {
+  .root-BQV0g7[data-size="sm"] .control-_x56fO {
     --moduix-switch-width: var(--moduix-switch-width-sm, 2.25rem);
     --moduix-switch-height: var(--moduix-switch-height-sm, 1.25rem);
     --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
   }
 
-  .PUgkqa_root[data-size="md"] .PUgkqa_control {
+  .root-BQV0g7[data-size="md"] .control-_x56fO {
     --moduix-switch-width: var(--moduix-switch-width-md, 2.75rem);
     --moduix-switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
     --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
   }
 
-  .PUgkqa_root[data-size="lg"] .PUgkqa_control {
+  .root-BQV0g7[data-size="lg"] .control-_x56fO {
     --moduix-switch-width: var(--moduix-switch-width-lg, 3.25rem);
     --moduix-switch-height: var(--moduix-switch-height-lg, 1.75rem);
     --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
   }
 
-  .PUgkqa_root[data-size="xl"] .PUgkqa_control {
+  .root-BQV0g7[data-size="xl"] .control-_x56fO {
     --moduix-switch-width: var(--moduix-switch-width-xl, 3.75rem);
     --moduix-switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
     --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
   }
 
-  .PUgkqa_thumb {
+  .thumb-AkEGnM {
     width: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
     height: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
     border: var(--moduix-switch-thumb-border-width, 0) solid
@@ -108,25 +114,31 @@
     align-items: center;
     display: inline-flex;
     transform: translateX(0);
+  }
 
-    &[data-state="checked"] {
-      background-color: var(--moduix-switch-thumb-bg-checked, var(--moduix-switch-thumb-bg, var(--moduix-color-primary-foreground)));
-      color: var(--moduix-switch-thumb-color-checked, var(--moduix-switch-thumb-color, var(--moduix-color-primary)));
-      transform: translateX(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)));
-    }
+  .thumb-AkEGnM[data-state="checked"] {
+    background-color: var(--moduix-switch-thumb-bg-checked, var(--moduix-switch-thumb-bg, var(--moduix-color-primary-foreground)));
+    color: var(--moduix-switch-thumb-color-checked, var(--moduix-switch-thumb-color, var(--moduix-color-primary)));
+    transform: translateX(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)));
+  }
 
-    & > svg {
-      width: var(--moduix-switch-thumb-icon-size, 65%);
-      height: var(--moduix-switch-thumb-icon-size, 65%);
-      flex-shrink: 0;
-    }
+  .thumb-AkEGnM > svg {
+    width: var(--moduix-switch-thumb-icon-size, 65%);
+    height: var(--moduix-switch-thumb-icon-size, 65%);
+    flex-shrink: 0;
   }
 
-  .PUgkqa_label {
+  .root-BQV0g7:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .thumb-AkEGnM[data-state="checked"] {
+    transform: translateX(calc(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)) * -1));
+  }
+
+  .label-OFdult {
     color: var(--moduix-switch-label-color, var(--moduix-color-foreground));
     font-size: var(--moduix-switch-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-switch-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-switch-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
     user-select: none;
   }
 }
+

package/dist/components/switch/index.d.ts

@@ -1,2 +1,2 @@
-import { Switch, SwitchRootProps, SwitchRootProviderProps, SwitchSize, useSwitch, useSwitchContext } from "./Switch.js";
-export { Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, useSwitch, useSwitchContext };
+export { Switch, useSwitch, useSwitchContext } from './Switch.js';
+export type { SwitchRootProps, SwitchRootProviderProps, SwitchSize } from './Switch.js';

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { Switch, useSwitch, useSwitchContext } from "./Switch.js";