@moduix/react 1.1.0

package/dist/components/steps/Steps.css

@@ -0,0 +1,283 @@
+@layer ui.components {
+  .XFk_Vq_root {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--steps-max-width, 52rem);
+    min-width: 0;
+    color: var(--steps-color, var(--color-foreground));
+    display: flex;
+
+    &[data-orientation="horizontal"] {
+      gap: var(--steps-root-gap, var(--spacing-4));
+      flex-direction: column;
+    }
+
+    &[data-orientation="vertical"] {
+      align-items: stretch;
+      gap: var(--steps-vertical-gap, var(--spacing-6));
+      flex-direction: row;
+    }
+  }
+
+  .XFk_Vq_list {
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
+    &[data-orientation="horizontal"] {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &[data-orientation="vertical"] {
+      align-items: flex-start;
+      gap: var(--steps-gap, var(--spacing-4));
+      flex-direction: column;
+      flex: none;
+      width: fit-content;
+    }
+  }
+
+  .XFk_Vq_item {
+    align-items: center;
+    gap: var(--steps-trigger-gap, var(--spacing-3));
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    position: relative;
+
+    &:last-child {
+      flex: none;
+
+      & .XFk_Vq_separator {
+        display: none;
+      }
+    }
+
+    &[data-orientation="vertical"] {
+      min-height: var(--steps-vertical-item-min-height, 4rem);
+      flex: none;
+      align-items: flex-start;
+    }
+  }
+
+  .XFk_Vq_trigger {
+    z-index: 1;
+    align-items: center;
+    gap: var(--steps-trigger-gap, var(--spacing-3));
+    border-radius: var(--steps-trigger-radius, var(--radius-md));
+    min-width: 0;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    user-select: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    padding: 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+
+    &[data-orientation="vertical"] {
+      align-items: flex-start;
+    }
+
+    &:focus-visible .XFk_Vq_indicator {
+      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
+        var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: var(--steps-focus-ring-offset, 2px);
+    }
+
+    &[data-incomplete] {
+      color: var(--steps-trigger-color-incomplete, inherit);
+    }
+
+    @media (hover: hover) {
+      &:hover .XFk_Vq_indicator[data-incomplete] {
+        border-color: var(--steps-indicator-border-color-hover, var(--steps-indicator-border-color-current, var(--color-foreground)));
+        color: var(--steps-indicator-color-hover, var(--steps-indicator-color-current, var(--color-foreground)));
+      }
+    }
+  }
+
+  .XFk_Vq_indicator {
+    box-sizing: border-box;
+    width: var(--steps-indicator-size, 2rem);
+    height: var(--steps-indicator-size, 2rem);
+    border: var(--steps-indicator-border-width, var(--border-width-sm)) solid
+      var(--steps-indicator-border-color, var(--color-border));
+    border-radius: var(--steps-indicator-radius, var(--radius-full));
+    background-color: var(--steps-indicator-bg, var(--color-background));
+    color: var(--steps-indicator-color, var(--color-muted-foreground));
+    font-size: var(--steps-indicator-font-size, var(--text-sm));
+    font-weight: var(--steps-indicator-font-weight, var(--weight-semibold));
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      opacity var(--transition-default);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+
+    & :where(svg) {
+      width: var(--steps-indicator-icon-size, .875rem);
+      height: var(--steps-indicator-icon-size, .875rem);
+    }
+
+    &[data-current] {
+      border-color: var(--steps-indicator-border-color-current, var(--steps-indicator-border-color-complete, var(--color-foreground)));
+      background-color: var(--steps-indicator-bg-current, var(--steps-indicator-bg, var(--color-background)));
+      color: var(--steps-indicator-color-current, var(--color-foreground));
+    }
+
+    &[data-complete] {
+      border-color: var(--steps-indicator-border-color-complete, var(--color-foreground));
+      background-color: var(--steps-indicator-bg-complete, var(--color-foreground));
+      color: var(--steps-indicator-color-complete, var(--color-background));
+    }
+  }
+
+  .XFk_Vq_separator {
+    height: var(--steps-separator-thickness, var(--border-width-sm));
+    min-width: var(--steps-separator-min-width, var(--spacing-8));
+    margin-inline: var(--steps-separator-inset, .5rem);
+    background-color: var(--steps-separator-color, var(--color-border));
+    pointer-events: none;
+    flex: auto;
+
+    &[data-complete] {
+      background-color: var(--steps-separator-color-complete, var(--color-foreground));
+    }
+
+    &[data-orientation="vertical"] {
+      top: calc(var(--steps-indicator-size, 2rem) + var(--steps-separator-inset, .5rem));
+      bottom: calc(var(--steps-gap, var(--spacing-4)) * -1);
+      left: calc(var(--steps-indicator-size, 2rem) / 2);
+      width: var(--steps-separator-thickness, var(--border-width-sm));
+      min-width: 0;
+      height: auto;
+      margin-inline: 0;
+      position: absolute;
+      translate: -50%;
+    }
+  }
+
+  .XFk_Vq_content, .XFk_Vq_completedContent {
+    box-sizing: border-box;
+    min-height: var(--steps-content-min-height, 10rem);
+    min-width: 0;
+    padding-block: var(--steps-content-padding-y, var(--spacing-4));
+    padding-inline: var(--steps-content-padding-x, var(--spacing-4));
+    border-radius: var(--steps-content-radius, var(--radius-md));
+    background-color: var(--steps-content-bg, var(--color-muted));
+    color: var(--steps-content-color, var(--color-foreground));
+    font-size: var(--steps-content-font-size, var(--text-sm));
+    line-height: var(--steps-content-line-height, var(--line-height-text-sm));
+    outline: none;
+    place-items: center;
+    display: grid;
+
+    &[hidden]:not([hidden="until-found"]) {
+      display: none;
+    }
+
+    &[data-orientation="vertical"] {
+      flex: auto;
+    }
+
+    &:focus-visible {
+      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
+        var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--steps-focus-ring-offset, 2px) * -1);
+    }
+  }
+
+  .XFk_Vq_completedContent {
+    color: var(--steps-completed-content-color, var(--color-foreground));
+    font-weight: var(--steps-completed-content-font-weight, var(--weight-medium));
+    text-align: center;
+  }
+
+  .XFk_Vq_prevTrigger, .XFk_Vq_nextTrigger {
+    box-sizing: border-box;
+    min-height: var(--steps-action-height, 2rem);
+    justify-content: center;
+    align-items: center;
+    gap: var(--steps-action-gap, var(--spacing-2));
+    border: var(--steps-action-border-width, var(--border-width-sm)) solid
+      var(--steps-action-border-color, var(--color-border));
+    border-radius: var(--steps-action-radius, var(--radius-md));
+    padding-block: var(--steps-action-padding-y, .375rem);
+    padding-inline: var(--steps-action-padding-x, .75rem);
+    background-color: var(--steps-action-bg, var(--color-background));
+    color: var(--steps-action-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--steps-action-font-size, var(--text-sm));
+    line-height: var(--steps-action-line-height, var(--line-height-text-sm));
+    cursor: pointer;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      opacity var(--transition-default);
+    outline: none;
+    text-decoration: none;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover:not(:disabled):not([data-disabled]) {
+        background-color: var(--steps-action-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--steps-focus-ring-width, var(--border-width-sm)) solid
+        var(--steps-focus-ring-color, var(--color-ring));
+      outline-offset: var(--steps-focus-ring-offset, 2px);
+    }
+
+    &:is(:disabled, [data-disabled]) {
+      opacity: var(--steps-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .XFk_Vq_nextTrigger {
+    border-color: var(--steps-next-action-border-color, var(--color-foreground));
+    background-color: var(--steps-next-action-bg, var(--color-foreground));
+    color: var(--steps-next-action-color, var(--color-background));
+
+    @media (hover: hover) {
+      &:hover:not(:disabled):not([data-disabled]) {
+        background-color: var(--steps-next-action-bg-hover, var(--color-foreground));
+      }
+    }
+  }
+
+  .XFk_Vq_progress {
+    width: 100%;
+    height: var(--steps-progress-height, var(--border-width-md));
+    border-radius: var(--steps-progress-radius, var(--radius-full));
+    background-color: var(--steps-progress-bg, var(--color-border));
+    display: block;
+    position: relative;
+    overflow: hidden;
+
+    &:before {
+      content: "";
+      width: var(--percent, 0%);
+      border-radius: inherit;
+      background-color: var(--steps-progress-fill-bg, var(--color-foreground));
+      transition: width var(--transition-default);
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+    }
+  }
+}

package/dist/components/steps/Steps.d.ts

@@ -0,0 +1,19 @@
+import { Steps } from "@ark-ui/react/steps";
+
+//#region src/components/steps/Steps.d.ts
+declare const Steps$1: import("react").ForwardRefExoticComponent<Omit<Steps.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Steps.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Steps.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<Steps.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<Steps.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Steps.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Steps.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<Steps.SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Steps.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CompletedContent: import("react").ForwardRefExoticComponent<Omit<Steps.CompletedContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  PrevTrigger: import("react").ForwardRefExoticComponent<Omit<Steps.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  NextTrigger: import("react").ForwardRefExoticComponent<Omit<Steps.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Progress: import("react").ForwardRefExoticComponent<Omit<Steps.ProgressProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Steps$1 as Steps };

package/dist/components/steps/Steps.js

@@ -0,0 +1,122 @@
+import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Steps_module_default from "./Steps.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Steps, useStepsItemContext } from "@ark-ui/react/steps";
+//#region src/components/steps/Steps.tsx
+const StepsRoot = forwardRef(function StepsRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.Root, {
+		ref,
+		"data-slot": "steps-root",
+		className: clsx(Steps_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsRootProvider = forwardRef(function StepsRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.RootProvider, {
+		ref,
+		"data-slot": "steps-root-provider",
+		className: clsx(Steps_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsList = forwardRef(function StepsList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.List, {
+		ref,
+		"data-slot": "steps-list",
+		className: clsx(Steps_module_default.list, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsItem = forwardRef(function StepsItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.Item, {
+		ref,
+		"data-slot": "steps-item",
+		className: clsx(Steps_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsTrigger = forwardRef(function StepsTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.Trigger, {
+		ref,
+		"data-slot": "steps-trigger",
+		className: clsx(Steps_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsIndicator = forwardRef(function StepsIndicator({ className, children, ...props }, ref) {
+	const item = useStepsItemContext();
+	return /* @__PURE__ */ jsx(Steps.Indicator, {
+		ref,
+		"data-slot": "steps-indicator",
+		className: clsx(Steps_module_default.indicator, normalizeClassName(className)),
+		...props,
+		children: children ?? (item.completed ? /* @__PURE__ */ jsx(CheckIcon, {}) : item.index + 1)
+	});
+});
+const StepsSeparator = forwardRef(function StepsSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.Separator, {
+		ref,
+		"data-slot": "steps-separator",
+		className: clsx(Steps_module_default.separator, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsContent = forwardRef(function StepsContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.Content, {
+		ref,
+		"data-slot": "steps-content",
+		className: clsx(Steps_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsCompletedContent = forwardRef(function StepsCompletedContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.CompletedContent, {
+		ref,
+		"data-slot": "steps-completed-content",
+		className: clsx(Steps_module_default.completedContent, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsPrevTrigger = forwardRef(function StepsPrevTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.PrevTrigger, {
+		ref,
+		"data-slot": "steps-prev-trigger",
+		className: clsx(Steps_module_default.prevTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsNextTrigger = forwardRef(function StepsNextTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.NextTrigger, {
+		ref,
+		"data-slot": "steps-next-trigger",
+		className: clsx(Steps_module_default.nextTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const StepsProgress = forwardRef(function StepsProgress({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Steps.Progress, {
+		ref,
+		"data-slot": "steps-progress",
+		className: clsx(Steps_module_default.progress, normalizeClassName(className)),
+		...props
+	});
+});
+const Steps$1 = Object.assign(StepsRoot, {
+	Root: StepsRoot,
+	RootProvider: StepsRootProvider,
+	List: StepsList,
+	Item: StepsItem,
+	Trigger: StepsTrigger,
+	Indicator: StepsIndicator,
+	Separator: StepsSeparator,
+	Content: StepsContent,
+	CompletedContent: StepsCompletedContent,
+	PrevTrigger: StepsPrevTrigger,
+	NextTrigger: StepsNextTrigger,
+	Progress: StepsProgress
+});
+//#endregion
+export { Steps$1 as Steps };

package/dist/components/steps/Steps.module.js

@@ -0,0 +1,17 @@
+import './Steps.css';
+//#region src/components/steps/Steps.module.css
+var Steps_module_default = {
+	"completedContent": "XFk_Vq_completedContent",
+	"content": "XFk_Vq_content",
+	"indicator": "XFk_Vq_indicator",
+	"item": "XFk_Vq_item",
+	"list": "XFk_Vq_list",
+	"nextTrigger": "XFk_Vq_nextTrigger",
+	"prevTrigger": "XFk_Vq_prevTrigger",
+	"progress": "XFk_Vq_progress",
+	"root": "XFk_Vq_root",
+	"separator": "XFk_Vq_separator",
+	"trigger": "XFk_Vq_trigger"
+};
+//#endregion
+export { Steps_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Steps } from "./Steps.js";
+export { Steps };

package/dist/components/switch/Switch.css

@@ -0,0 +1,130 @@
+@layer ui.components {
+  .wDUCnq_root {
+    align-items: center;
+    gap: var(--switch-gap, var(--spacing-2));
+    vertical-align: middle;
+    cursor: pointer;
+    width: fit-content;
+    display: inline-flex;
+
+    &[data-disabled], &[data-readonly] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      opacity: var(--switch-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .wDUCnq_control {
+    box-sizing: border-box;
+    width: var(--switch-width, 3rem);
+    height: var(--switch-height, 1.5rem);
+    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, 1.25rem) -
+        (var(--switch-padding, .125rem) * 2) -
+        (var(--switch-border-width, var(--border-width-sm)) * 2));
+    border: var(--switch-border-width, var(--border-width-sm)) solid
+      var(--switch-border-color, var(--color-border));
+    border-radius: var(--switch-radius, var(--radius-full));
+    padding: var(--switch-padding, .125rem);
+    background-color: var(--switch-bg, var(--color-muted));
+    user-select: none;
+    transition: background-color var(--switch-transition, var(--transition-default)),
+      border-color var(--switch-transition, var(--transition-default)),
+      opacity var(--switch-transition, var(--transition-default));
+    outline: 0;
+    flex-shrink: 0;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: relative;
+
+    &[data-state="checked"] {
+      border-color: var(--switch-border-color-checked, var(--color-primary));
+      background-color: var(--switch-bg-checked, var(--color-primary));
+    }
+
+    &[data-focus-visible] {
+      outline: var(--switch-focus-ring-width, var(--border-width-sm)) solid
+        var(--switch-focus-ring-color, var(--color-ring));
+      outline-offset: var(--switch-focus-ring-offset, var(--border-width-sm));
+    }
+
+    @media (hover: hover) {
+      &[data-state="unchecked"][data-hover]:not([data-readonly]) {
+        background-color: var(--switch-bg-hover, var(--color-accent));
+      }
+
+      &[data-state="checked"][data-hover]:not([data-readonly]) {
+        background-color: var(--switch-bg-checked-hover, var(--switch-bg-checked, var(--color-primary)));
+      }
+    }
+  }
+
+  .wDUCnq_root[data-size="xs"] .wDUCnq_control {
+    --switch-width: var(--switch-width-xs, 1.75rem);
+    --switch-height: var(--switch-height-xs, 1rem);
+    --switch-thumb-size: var(--switch-thumb-size-xs, .75rem);
+  }
+
+  .wDUCnq_root[data-size="sm"] .wDUCnq_control {
+    --switch-width: var(--switch-width-sm, 2.25rem);
+    --switch-height: var(--switch-height-sm, 1.25rem);
+    --switch-thumb-size: var(--switch-thumb-size-sm, 1rem);
+  }
+
+  .wDUCnq_root[data-size="md"] .wDUCnq_control {
+    --switch-width: var(--switch-width-md, 2.75rem);
+    --switch-height: var(--switch-height-md, 1.5rem);
+    --switch-thumb-size: var(--switch-thumb-size-md, 1.25rem);
+  }
+
+  .wDUCnq_root[data-size="lg"] .wDUCnq_control {
+    --switch-width: var(--switch-width-lg, 3.25rem);
+    --switch-height: var(--switch-height-lg, 1.75rem);
+    --switch-thumb-size: var(--switch-thumb-size-lg, 1.5rem);
+  }
+
+  .wDUCnq_root[data-size="xl"] .wDUCnq_control {
+    --switch-width: var(--switch-width-xl, 3.75rem);
+    --switch-height: var(--switch-height-xl, 2rem);
+    --switch-thumb-size: var(--switch-thumb-size-xl, 1.75rem);
+  }
+
+  .wDUCnq_thumb {
+    width: var(--switch-thumb-size, 1.25rem);
+    height: var(--switch-thumb-size, 1.25rem);
+    border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
+    border-radius: var(--switch-thumb-radius, var(--radius-full));
+    background-color: var(--switch-thumb-bg-unchecked, var(--switch-thumb-bg, var(--color-background)));
+    color: var(--switch-thumb-color-unchecked, var(--switch-thumb-color, var(--color-muted)));
+    box-shadow: var(--switch-thumb-shadow, var(--shadow-sm));
+    transition: transform var(--switch-thumb-transition, var(--switch-transition, var(--transition-default))),
+      background-color var(--switch-transition, var(--transition-default)),
+      color var(--switch-transition, var(--transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    transform: translateX(0);
+
+    &[data-state="checked"] {
+      background-color: var(--switch-thumb-bg-checked, var(--switch-thumb-bg, var(--color-primary-foreground)));
+      color: var(--switch-thumb-color-checked, var(--switch-thumb-color, var(--color-primary)));
+      transform: translateX(var(--switch-thumb-translate, var(--switch-thumb-translate-default)));
+    }
+
+    & > svg {
+      width: var(--switch-thumb-icon-size, 65%);
+      height: var(--switch-thumb-icon-size, 65%);
+      flex-shrink: 0;
+    }
+  }
+
+  .wDUCnq_label {
+    color: var(--switch-label-color, var(--color-foreground));
+    font-size: var(--switch-label-font-size, var(--text-sm));
+    font-weight: var(--switch-label-font-weight, var(--weight-medium));
+    line-height: var(--switch-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+import { Switch } from "@ark-ui/react/switch";
+
+//#region src/components/switch/Switch.d.ts
+type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SwitchRootProps = ComponentProps<typeof Switch.Root> & {
+  size?: SwitchSize;
+};
+type SwitchRootProviderProps = ComponentProps<typeof Switch.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>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<Switch.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+//#endregion
+export { Switch$1 as Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize };

package/dist/components/switch/Switch.js

@@ -0,0 +1,67 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Switch_module_default from "./Switch.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Switch } from "@ark-ui/react/switch";
+//#region src/components/switch/Switch.tsx
+const SwitchRoot = forwardRef(function SwitchRoot({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		ref,
+		"data-slot": "switch-root",
+		"data-size": size,
+		className: clsx(Switch_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SwitchRootProvider = forwardRef(function SwitchRootProvider({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch.RootProvider, {
+		ref,
+		"data-slot": "switch-root-provider",
+		"data-size": size,
+		className: clsx(Switch_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+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 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 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 SwitchHiddenInput = forwardRef(function SwitchHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(Switch.HiddenInput, {
+		ref,
+		"data-slot": "switch-hidden-input",
+		...props
+	});
+});
+const Switch$1 = Object.assign(SwitchRoot, {
+	Root: SwitchRoot,
+	RootProvider: SwitchRootProvider,
+	Control: SwitchControl,
+	Thumb: SwitchThumb,
+	Label: SwitchLabel,
+	HiddenInput: SwitchHiddenInput
+});
+//#endregion
+export { Switch$1 as Switch };

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

@@ -0,0 +1,10 @@
+import './Switch.css';
+//#region src/components/switch/Switch.module.css
+var Switch_module_default = {
+	"control": "wDUCnq_control",
+	"label": "wDUCnq_label",
+	"root": "wDUCnq_root",
+	"thumb": "wDUCnq_thumb"
+};
+//#endregion
+export { Switch_module_default as default };

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

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