@moduix/react 2.2.0 → 2.2.4

package/dist/components/carousel/Carousel_module.css

@@ -0,0 +1,201 @@
+@layer moduix.components {
+  .root-WpPvZz {
+    gap: var(--moduix-carousel-gap, var(--moduix-spacing-3));
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    display: flex;
+  }
+
+  .root-WpPvZz[data-orientation="vertical"] {
+    height: var(--moduix-carousel-height, 24rem);
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .control-WlsxZf {
+    align-items: center;
+    gap: var(--moduix-carousel-gap, var(--moduix-spacing-3));
+    min-width: 0;
+    display: flex;
+  }
+
+  .control-WlsxZf[data-orientation="vertical"] {
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .itemGroup-a7LtFI {
+    overscroll-behavior-x: contain;
+    overscroll-behavior-y: auto;
+    border-radius: var(--moduix-carousel-track-radius, var(--moduix-radius-xl));
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    flex: auto;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+  }
+
+  .itemGroup-a7LtFI::-webkit-scrollbar {
+    display: none;
+  }
+
+  .itemGroup-a7LtFI[data-dragging] {
+    cursor: grabbing;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .root-WpPvZz[data-orientation="vertical"] > .itemGroup-a7LtFI {
+    overscroll-behavior-x: auto;
+    overscroll-behavior-y: contain;
+    height: 100%;
+  }
+
+  .item-sJ0Txa {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy {
+    width: var(--moduix-carousel-control-size, var(--moduix-size-md));
+    height: var(--moduix-carousel-control-size, var(--moduix-size-md));
+    border: var(--moduix-border-width-sm) solid
+      var(--moduix-carousel-control-border-color, color-mix(in oklab, var(--moduix-color-border) 88%, black 12%));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-carousel-control-bg, color-mix(in oklab, var(--moduix-color-background) 92%, var(--moduix-color-card) 8%));
+    box-shadow: var(--moduix-carousel-control-shadow, var(--moduix-shadow-sm));
+    color: var(--moduix-carousel-control-color, var(--moduix-color-foreground));
+    cursor: pointer;
+    transition: background-color var(--moduix-transition-fast),
+      border-color var(--moduix-transition-fast),
+      color var(--moduix-transition-fast),
+      box-shadow var(--moduix-transition-fast),
+      transform var(--moduix-transition-fast);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy) svg {
+    width: var(--moduix-carousel-control-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-carousel-control-icon-size, var(--moduix-spacing-4));
+  }
+
+  :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy):not(:disabled, [data-disabled]):hover {
+    border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+    background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
+    box-shadow: var(--moduix-carousel-control-shadow-hover, var(--moduix-shadow-md));
+    color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
+  }
+
+  :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy):focus-visible {
+    outline: var(--moduix-carousel-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-carousel-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-carousel-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy):is(:disabled, [data-disabled]) {
+    cursor: not-allowed;
+    opacity: var(--moduix-opacity-disabled);
+  }
+
+  :is(.prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy)[data-pressed] {
+    border-color: var(--moduix-carousel-control-border-color-hover, color-mix(in oklab, var(--moduix-color-border) 50%, var(--moduix-color-foreground) 50%));
+    background-color: var(--moduix-carousel-control-bg-hover, var(--moduix-color-accent));
+    color: var(--moduix-carousel-control-color-hover, var(--moduix-color-accent-foreground));
+  }
+
+  .defaultIcon-KFMqjR {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .root-WpPvZz[data-orientation="vertical"] .defaultIcon-KFMqjR svg {
+    transform: rotate(90deg);
+  }
+
+  .root-WpPvZz[data-orientation="horizontal"][dir="rtl"] .defaultIcon-KFMqjR svg {
+    transform: rotate(180deg);
+  }
+
+  .indicatorGroup-TO_gj_ {
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-carousel-indicator-gap, var(--moduix-spacing-2));
+    display: flex;
+  }
+
+  .root-WpPvZz[data-orientation="vertical"] > .indicatorGroup-TO_gj_, .control-WlsxZf[data-orientation="vertical"] > .indicatorGroup-TO_gj_ {
+    flex-direction: column;
+  }
+
+  .indicator-cjLdPK {
+    width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
+    height: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-carousel-indicator-bg, color-mix(in oklab, var(--moduix-color-muted) 84%, var(--moduix-color-background) 16%));
+    cursor: pointer;
+    opacity: .88;
+    transition: inline-size var(--moduix-transition-fast),
+      block-size var(--moduix-transition-fast),
+      background-color var(--moduix-transition-fast),
+      opacity var(--moduix-transition-fast);
+    border: 0;
+    padding: 0;
+  }
+
+  .indicator-cjLdPK:not(:disabled, [data-disabled], [data-readonly]):hover {
+    background-color: var(--moduix-carousel-indicator-bg-hover, color-mix(in oklab, var(--moduix-color-muted) 56%, var(--moduix-color-foreground) 44%));
+  }
+
+  .indicator-cjLdPK:focus-visible {
+    outline: var(--moduix-carousel-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-carousel-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-carousel-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .indicator-cjLdPK[data-current] {
+    width: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
+    background-color: var(--moduix-carousel-indicator-bg-current, var(--moduix-color-primary));
+    opacity: 1;
+  }
+
+  .indicator-cjLdPK:is(:disabled, [data-disabled], [data-readonly]) {
+    cursor: not-allowed;
+    opacity: var(--moduix-opacity-disabled);
+  }
+
+  :is(.root-WpPvZz[data-orientation="vertical"] > .indicatorGroup-TO_gj_ .indicator-cjLdPK, .control-WlsxZf[data-orientation="vertical"] > .indicatorGroup-TO_gj_ .indicator-cjLdPK)[data-current] {
+    width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
+    height: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
+  }
+
+  .autoplayTrigger-h1Iihy {
+    --moduix-carousel-autoplay-trigger-min-width-fallback: calc(var(--moduix-size-md) + var(--moduix-spacing-3));
+    min-width: var(--moduix-carousel-autoplay-trigger-min-width, var(--moduix-carousel-autoplay-trigger-min-width-fallback));
+  }
+
+  .autoplayIndicator-MQFp2o {
+    min-width: var(--moduix-carousel-autoplay-indicator-min-width, var(--moduix-spacing-4));
+    font-size: var(--moduix-text-xs);
+    font-weight: var(--moduix-weight-medium);
+    line-height: var(--moduix-line-height-text-xs);
+    text-transform: uppercase;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .progressText-sWCHxc {
+    color: var(--moduix-carousel-progress-text-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-carousel-progress-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-line-height-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Carousel } from "./Carousel.js";
-export { Carousel };
+export { Carousel, useCarousel, useCarouselContext } from './Carousel.js';

package/dist/components/carousel/index.js

@@ -0,0 +1 @@
+export { Carousel, useCarousel, useCarouselContext } from "./Carousel.js";

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,21 +1,19 @@
-import { ComponentProps } from "react";
-import { Checkbox, useCheckbox, useCheckboxGroup } from "@ark-ui/react/checkbox";
-
-//#region src/components/checkbox/Checkbox.d.ts
+import { Checkbox as CheckboxPrimitive, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from '@ark-ui/react/checkbox';
+import type { ComponentProps, ReactNode } from 'react';
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type RootProps = ComponentProps<typeof Checkbox.Root> & {
-  size?: CheckboxSize;
+type RootProps = ComponentProps<typeof CheckboxPrimitive.Root> & {
+    size?: CheckboxSize;
 };
-type RootProviderProps = ComponentProps<typeof Checkbox.RootProvider> & {
-  size?: CheckboxSize;
+type RootProviderProps = ComponentProps<typeof CheckboxPrimitive.RootProvider> & {
+    size?: CheckboxSize;
 };
-declare const Checkbox$1: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<RootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<Checkbox.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<Checkbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Group: import("react").ForwardRefExoticComponent<Omit<Checkbox.GroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<RootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Context: (props: CheckboxPrimitive.ContextProps) => ReactNode;
+    Control: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.GroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
-export { Checkbox$1 as Checkbox, useCheckbox, useCheckboxGroup };
+export { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };

package/dist/components/checkbox/Checkbox.js

@@ -1,87 +1,101 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { CheckIcon, IndeterminateIcon } from "../../lib/moduix/icons/ui/Icons.js";
-import Checkbox_module_default from "./Checkbox.module.js";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from "@ark-ui/react/checkbox";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, useCheckbox, useCheckboxGroup } from "@ark-ui/react/checkbox";
-//#region src/components/checkbox/Checkbox.tsx
-const CheckboxRoot = forwardRef(function CheckboxRoot({ asChild, children, className, size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.Root, {
-		ref,
-		asChild,
-		"data-slot": "checkbox-root",
-		"data-size": size,
-		className: clsx(Checkbox_module_default.root, normalizeClassName(className)),
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+import { CheckIcon, IndeterminateIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Checkbox_module from "./Checkbox.module.js";
+const Checkbox_CheckboxRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Checkbox.Root, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "checkbox-root",
+        "data-size": size,
+        className: clsx(Checkbox_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const CheckboxRootProvider = forwardRef(function CheckboxRootProvider({ asChild, children, className, size = "md", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.RootProvider, {
-		ref,
-		asChild,
-		"data-slot": "checkbox-root-provider",
-		"data-size": size,
-		className: clsx(Checkbox_module_default.root, normalizeClassName(className)),
-		...props,
-		children: withHiddenInput(children, asChild)
-	});
+const Checkbox_CheckboxRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Checkbox.RootProvider, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "checkbox-root-provider",
+        "data-size": size,
+        className: clsx(Checkbox_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const CheckboxIndicator = forwardRef(function CheckboxIndicator({ className, children, indeterminate, ...props }, ref) {
-	const slot = indeterminate ? "checkbox-indicator-indeterminate-icon" : "checkbox-indicator-checked-icon";
-	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
-		ref,
-		"data-slot": "checkbox-indicator",
-		className: clsx(Checkbox_module_default.indicator, normalizeClassName(className)),
-		indeterminate,
-		...props,
-		children: children ?? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-slot": slot,
-			className: Checkbox_module_default.icon,
-			children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
-		})
-	});
+const Checkbox_CheckboxIndicator = /*#__PURE__*/ forwardRef(function({ className, children, indeterminate, ...props }, ref) {
+    const slot = indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
+    return /*#__PURE__*/ jsx(Checkbox.Indicator, {
+        ref: ref,
+        "data-slot": "checkbox-indicator",
+        className: clsx(Checkbox_module.indicator, normalizeClassName(className)),
+        indeterminate: indeterminate,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx("span", {
+            "aria-hidden": "true",
+            "data-slot": slot,
+            className: Checkbox_module.icon,
+            children: indeterminate ? /*#__PURE__*/ jsx(IndeterminateIcon, {}) : /*#__PURE__*/ jsx(CheckIcon, {})
+        })
+    });
 });
-const CheckboxControl = forwardRef(function CheckboxControl({ children, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.Control, {
-		ref,
-		"data-slot": "checkbox-control",
-		className: clsx(Checkbox_module_default.control, normalizeClassName(className)),
-		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckboxIndicator, {}), /* @__PURE__ */ jsx(CheckboxIndicator, { indeterminate: true })] })
-	});
+const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Checkbox.Control, {
+        ref: ref,
+        "data-slot": "checkbox-control",
+        className: clsx(Checkbox_module.control, normalizeClassName(className)),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Checkbox_CheckboxIndicator, {}),
+                /*#__PURE__*/ jsx(Checkbox_CheckboxIndicator, {
+                    indeterminate: true
+                })
+            ]
+        })
+    });
 });
 function withHiddenInput(children, asChild) {
-	const hiddenInput = /* @__PURE__ */ jsx(Checkbox.HiddenInput, { "data-slot": "checkbox-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(Checkbox.HiddenInput, {
+        "data-slot": "checkbox-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 CheckboxLabel = forwardRef(function CheckboxLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.Label, {
-		ref,
-		"data-slot": "checkbox-label",
-		className: clsx(Checkbox_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const Checkbox_CheckboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Checkbox.Label, {
+        ref: ref,
+        "data-slot": "checkbox-label",
+        className: clsx(Checkbox_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
-const CheckboxGroup = forwardRef(function CheckboxGroup({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.Group, {
-		ref,
-		"data-slot": "checkbox-group",
-		className: clsx(Checkbox_module_default.group, normalizeClassName(className)),
-		...props
-	});
+const Checkbox_CheckboxGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Checkbox.Group, {
+        ref: ref,
+        "data-slot": "checkbox-group",
+        className: clsx(Checkbox_module.group, normalizeClassName(className)),
+        ...props
+    });
 });
-const Checkbox$1 = Object.assign(CheckboxRoot, {
-	Root: CheckboxRoot,
-	RootProvider: CheckboxRootProvider,
-	Control: CheckboxControl,
-	Indicator: CheckboxIndicator,
-	Label: CheckboxLabel,
-	Group: CheckboxGroup
+const Checkbox_Checkbox = Object.assign(Checkbox_CheckboxRoot, {
+    Root: Checkbox_CheckboxRoot,
+    RootProvider: Checkbox_CheckboxRootProvider,
+    Context: Checkbox.Context,
+    Control: Checkbox_CheckboxControl,
+    Indicator: Checkbox_CheckboxIndicator,
+    Label: Checkbox_CheckboxLabel,
+    Group: Checkbox_CheckboxGroup
 });
-//#endregion
-export { Checkbox$1 as Checkbox, useCheckbox, useCheckboxGroup };
+export { Checkbox_Checkbox as Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };

package/dist/components/checkbox/Checkbox.module.js

@@ -1,12 +1,10 @@
-import './Checkbox.css';
-//#region src/components/checkbox/Checkbox.module.css
-var Checkbox_module_default = {
-	"control": "NxmH7W_control",
-	"group": "NxmH7W_group",
-	"icon": "NxmH7W_icon",
-	"indicator": "NxmH7W_indicator",
-	"label": "NxmH7W_label",
-	"root": "NxmH7W_root"
+import "./Checkbox_module.css";
+const Checkbox_module = {
+    root: "root-HuLdBM",
+    control: "control-UQ7BTk",
+    indicator: "indicator-CrYx7C",
+    icon: "icon-zuDoQa",
+    label: "label-YzjPY9",
+    group: "group-VCsSdV"
 };
-//#endregion
-export { Checkbox_module_default as default };
+export default Checkbox_module;

package/dist/components/checkbox/{Checkbox.css → Checkbox_module.css}

@@ -1,22 +1,22 @@
 @layer moduix.components {
-  .NxmH7W_root {
+  .root-HuLdBM {
     align-items: center;
     gap: var(--moduix-checkbox-gap, var(--moduix-spacing-2));
     vertical-align: middle;
     color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
     cursor: pointer;
     display: inline-flex;
+  }
 
-    &[data-disabled], &[data-readonly] {
-      cursor: default;
-    }
+  .root-HuLdBM[data-disabled], .root-HuLdBM[data-readonly] {
+    cursor: default;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-checkbox-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .root-HuLdBM[data-disabled] {
+    opacity: var(--moduix-checkbox-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .NxmH7W_control {
+  .control-UQ7BTk {
     box-sizing: border-box;
     width: var(--_checkbox-size, 1.25rem);
     height: var(--_checkbox-size, 1.25rem);
@@ -25,6 +25,7 @@
     border-radius: var(--moduix-checkbox-radius, var(--moduix-radius-xs));
     background-color: var(--moduix-checkbox-bg, var(--moduix-color-background));
     color: var(--moduix-checkbox-color, var(--moduix-color-primary-foreground));
+    -webkit-user-select: none;
     user-select: none;
     transition: background-color var(--moduix-checkbox-transition, var(--moduix-transition-default)),
       border-color var(--moduix-checkbox-transition, var(--moduix-transition-default)),
@@ -37,65 +38,65 @@
     padding: 0;
     line-height: 0;
     display: inline-flex;
+  }
 
-    &[data-state="checked"], &[data-state="indeterminate"] {
-      border-color: var(--moduix-checkbox-border-color-checked, var(--moduix-color-primary));
-      background-color: var(--moduix-checkbox-bg-checked, var(--moduix-color-primary));
-    }
+  .control-UQ7BTk[data-state="checked"], .control-UQ7BTk[data-state="indeterminate"] {
+    border-color: var(--moduix-checkbox-border-color-checked, var(--moduix-color-primary));
+    background-color: var(--moduix-checkbox-bg-checked, var(--moduix-color-primary));
+  }
 
-    &[data-focus-visible] {
-      outline: var(--moduix-checkbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .control-UQ7BTk[data-focus-visible] {
+    outline: var(--moduix-checkbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-checkbox-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-checkbox-focus-ring-offset, var(--moduix-border-width-sm));
-    }
+    outline-offset: var(--moduix-checkbox-focus-ring-offset, var(--moduix-border-width-sm));
+  }
 
-    &[data-invalid] {
-      border-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
-      color: var(--moduix-checkbox-color-invalid, var(--moduix-color-destructive-foreground));
+  .control-UQ7BTk[data-invalid] {
+    border-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+    color: var(--moduix-checkbox-color-invalid, var(--moduix-color-destructive-foreground));
+  }
 
-      &[data-state="checked"], &[data-state="indeterminate"] {
-        border-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
-        background-color: var(--moduix-checkbox-bg-invalid, var(--moduix-color-destructive));
-      }
+  .control-UQ7BTk[data-invalid][data-state="checked"], .control-UQ7BTk[data-invalid][data-state="indeterminate"] {
+    border-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+    background-color: var(--moduix-checkbox-bg-invalid, var(--moduix-color-destructive));
+  }
 
-      &[data-focus-visible] {
-        outline-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
-      }
-    }
+  .control-UQ7BTk[data-invalid][data-focus-visible] {
+    outline-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+  }
 
-    @media (hover: hover) {
-      &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--moduix-checkbox-bg-hover, var(--moduix-color-accent));
-      }
+  @media (hover: hover) {
+    .control-UQ7BTk[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-checkbox-bg-hover, var(--moduix-color-accent));
     }
   }
 
-  .NxmH7W_root[data-size="xs"] .NxmH7W_control {
+  .root-HuLdBM[data-size="xs"] .control-UQ7BTk {
     --_checkbox-size: var(--moduix-checkbox-size-xs, var(--moduix-spacing-3-5));
     --_checkbox-icon-size: var(--moduix-checkbox-icon-size-xs, var(--moduix-spacing-2));
   }
 
-  .NxmH7W_root[data-size="sm"] .NxmH7W_control {
+  .root-HuLdBM[data-size="sm"] .control-UQ7BTk {
     --_checkbox-size: var(--moduix-checkbox-size-sm, var(--moduix-spacing-4));
     --_checkbox-icon-size: var(--moduix-checkbox-icon-size-sm, var(--moduix-spacing-2-5));
   }
 
-  .NxmH7W_root[data-size="md"] .NxmH7W_control {
+  .root-HuLdBM[data-size="md"] .control-UQ7BTk {
     --_checkbox-size: var(--moduix-checkbox-size-md, var(--moduix-spacing-5));
     --_checkbox-icon-size: var(--moduix-checkbox-icon-size-md, var(--moduix-spacing-3));
   }
 
-  .NxmH7W_root[data-size="lg"] .NxmH7W_control {
+  .root-HuLdBM[data-size="lg"] .control-UQ7BTk {
     --_checkbox-size: var(--moduix-checkbox-size-lg, var(--moduix-size-xs));
     --_checkbox-icon-size: var(--moduix-checkbox-icon-size-lg, var(--moduix-spacing-3-5));
   }
 
-  .NxmH7W_root[data-size="xl"] .NxmH7W_control {
+  .root-HuLdBM[data-size="xl"] .control-UQ7BTk {
     --_checkbox-size: var(--moduix-checkbox-size-xl, var(--moduix-spacing-7));
     --_checkbox-icon-size: var(--moduix-checkbox-icon-size-xl, var(--moduix-spacing-4));
   }
 
-  .NxmH7W_indicator {
+  .indicator-CrYx7C {
     width: 100%;
     height: 100%;
     color: inherit;
@@ -104,7 +105,7 @@
     display: inline-flex;
   }
 
-  .NxmH7W_icon {
+  .icon-zuDoQa {
     width: var(--_checkbox-icon-size, .75rem);
     height: var(--_checkbox-icon-size, .75rem);
     color: inherit;
@@ -112,24 +113,25 @@
     align-items: center;
     line-height: 0;
     display: inline-flex;
+  }
 
-    & > svg {
-      width: 100%;
-      height: 100%;
-    }
+  .icon-zuDoQa > svg {
+    width: 100%;
+    height: 100%;
   }
 
-  .NxmH7W_label {
+  .label-YzjPY9 {
     color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
     font-size: var(--moduix-checkbox-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-checkbox-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-checkbox-label-line-height, var(--moduix-line-height-text-sm));
   }
 
-  .NxmH7W_group {
+  .group-VCsSdV {
     gap: var(--moduix-checkbox-group-gap, var(--moduix-spacing-2));
     color: var(--moduix-checkbox-group-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
   }
 }
+

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

@@ -1,2 +1 @@
-import { Checkbox, useCheckbox, useCheckboxGroup } from "./Checkbox.js";
-export { Checkbox, useCheckbox, useCheckboxGroup };
+export * from './Checkbox.js';

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export * from "./Checkbox.js";