@moduix/react 1.1.1 → 2.1.0

package/dist/components/button/Button.css

@@ -26,21 +26,36 @@
     display: inline-flex;
 
     &:focus-visible {
-      outline: var(--button-focus-ring-width, var(--border-width-md)) solid
+      outline: var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
         var(--button-focus-ring-color, var(--color-ring));
       outline-offset: calc(var(--button-focus-ring-offset, var(--button-border-width, var(--border-width-sm))) * -1);
     }
 
+    &:active:not([data-disabled]) {
+      opacity: .9;
+    }
+
     &[data-disabled] {
       opacity: var(--button-disabled-opacity, var(--opacity-disabled));
       cursor: default;
       pointer-events: none;
     }
 
+    &[data-loading] {
+      cursor: progress;
+    }
+
     & :where(svg) {
-      width: var(--button-icon-size, 1rem);
-      height: var(--button-icon-size, 1rem);
+      width: var(--button-icon-size, var(--spacing-4));
+      height: var(--button-icon-size, var(--spacing-4));
+      flex-shrink: 0;
+    }
+
+    & [data-icon="inline-start"], & [data-icon="inline-end"] {
       flex-shrink: 0;
+      justify-content: center;
+      align-items: center;
+      display: inline-flex;
     }
 
     &[data-variant="default"] {
@@ -50,7 +65,7 @@
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
-          background-color: var(--button-default-bg-hover, var(--color-foreground));
+          background-color: var(--button-default-bg-hover, color-mix(in srgb, var(--button-default-bg, var(--color-primary)) 88%, black));
         }
       }
     }
@@ -82,7 +97,7 @@
     &[data-variant="destructive"] {
       border-color: var(--button-destructive-border-color, var(--color-destructive));
       background-color: var(--button-destructive-bg, var(--color-destructive));
-      color: var(--button-destructive-color, var(--color-primary-foreground));
+      color: var(--button-destructive-color, var(--color-destructive-foreground));
 
       @media (hover: hover) {
         &:not([data-disabled]):hover {
@@ -99,7 +114,7 @@
       @media (hover: hover) {
         &:not([data-disabled]):hover {
           background-color: var(--button-destructive-outline-bg-hover, var(--color-destructive));
-          color: var(--button-destructive-outline-color-hover, var(--button-destructive-color, var(--color-primary-foreground)));
+          color: var(--button-destructive-outline-color-hover, var(--button-destructive-color, var(--color-destructive-foreground)));
         }
       }
     }
@@ -133,36 +148,36 @@
 
     &[data-size="xs"] {
       min-height: var(--button-size-xs, var(--size-xs));
-      padding-block: var(--button-padding-y-xs, .25rem);
-      padding-inline: var(--button-padding-x-xs, .625rem);
+      padding-block: var(--button-padding-y-xs, var(--spacing-0-5));
+      padding-inline: var(--button-padding-x-xs, var(--spacing-2-5));
       font-size: var(--button-font-size-xs, var(--text-xs));
       line-height: var(--button-line-height-xs, var(--line-height-text-xs));
     }
 
     &[data-size="sm"] {
       min-height: var(--button-size-sm, var(--size-sm));
-      padding-block: var(--button-padding-y-sm, .375rem);
-      padding-inline: var(--button-padding-x-sm, .75rem);
+      padding-block: var(--button-padding-y-sm, var(--spacing-1));
+      padding-inline: var(--button-padding-x-sm, var(--spacing-3));
     }
 
     &[data-size="md"] {
-      min-height: var(--button-size-md, var(--size-lg));
-      padding-block: var(--button-padding-y-md, .5rem);
-      padding-inline: var(--button-padding-x-md, 1rem);
+      min-height: var(--button-size-md, var(--size-md));
+      padding-block: var(--button-padding-y-md, var(--spacing-1));
+      padding-inline: var(--button-padding-x-md, var(--spacing-4));
     }
 
     &[data-size="lg"] {
-      min-height: var(--button-size-lg, var(--size-xl));
-      padding-block: var(--button-padding-y-lg, .625rem);
-      padding-inline: var(--button-padding-x-lg, 1.25rem);
+      min-height: var(--button-size-lg, var(--size-lg));
+      padding-block: var(--button-padding-y-lg, var(--spacing-1-5));
+      padding-inline: var(--button-padding-x-lg, var(--spacing-5));
       font-size: var(--button-font-size-lg, var(--text-md));
       line-height: var(--button-line-height-lg, var(--line-height-text-md));
     }
 
     &[data-size="xl"] {
-      min-height: var(--button-size-xl, 3.5rem);
-      padding-block: var(--button-padding-y-xl, .75rem);
-      padding-inline: var(--button-padding-x-xl, 1.5rem);
+      min-height: var(--button-size-xl, var(--size-xl));
+      padding-block: var(--button-padding-y-xl, var(--spacing-2));
+      padding-inline: var(--button-padding-x-xl, var(--spacing-6));
       font-size: var(--button-font-size-xl, var(--text-lg));
       line-height: var(--button-line-height-xl, var(--line-height-text-lg));
     }
@@ -179,15 +194,20 @@
     }
 
     &[data-size="icon-md"] {
-      width: var(--button-size-icon-md, var(--size-lg));
-      min-width: var(--button-size-icon-md, var(--size-lg));
-      height: var(--button-size-icon-md, var(--size-lg));
+      width: var(--button-size-icon-md, var(--size-md));
+      min-width: var(--button-size-icon-md, var(--size-md));
+      height: var(--button-size-icon-md, var(--size-md));
     }
 
     &[data-size="icon-lg"] {
-      width: var(--button-size-icon-lg, var(--size-xl));
-      min-width: var(--button-size-icon-lg, var(--size-xl));
-      height: var(--button-size-icon-lg, var(--size-xl));
+      width: var(--button-size-icon-lg, var(--size-lg));
+      min-width: var(--button-size-icon-lg, var(--size-lg));
+      height: var(--button-size-icon-lg, var(--size-lg));
+    }
+
+    &[data-variant="link"] {
+      min-height: 0;
+      padding-block: 0;
     }
   }
 }

package/dist/components/button/Button.d.ts

@@ -1,12 +1,18 @@
 //#region src/components/button/Button.d.ts
 declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  loading?: boolean;
   variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
+  'data-scope'?: string;
+  'data-part'?: string;
   'data-slot'?: string;
 } & import("react").RefAttributes<HTMLButtonElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    loading?: boolean;
     variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
+    'data-scope'?: string;
+    'data-part'?: string;
     'data-slot'?: string;
   } & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/button/Button.js

@@ -1,25 +1,30 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Button_module_default from "./Button.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
-const ButtonRoot = forwardRef(function ButtonRoot({ asChild, className, disabled, size = "md", type, "data-slot": dataSlot, variant = "default", "aria-disabled": ariaDisabled, ...props }, ref) {
-	const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+const ButtonRoot = forwardRef(function ButtonRoot({ asChild, className, disabled, loading = false, size = "md", type, "data-scope": dataScope = "button", "data-part": dataPart = "root", "data-slot": dataSlot, variant = "default", "aria-busy": ariaBusy, "aria-disabled": ariaDisabled, ...props }, ref) {
+	const nativeDisabled = asChild ? void 0 : loading || disabled;
+	const resolvedAriaBusy = loading ? true : ariaBusy;
+	const resolvedAriaDisabled = loading ? true : ariaDisabled;
+	const isDisabled = disabled || loading || resolvedAriaDisabled === true || resolvedAriaDisabled === "true";
 	return /* @__PURE__ */ jsx(ark.button, {
 		ref,
 		asChild,
 		type: asChild ? type : type ?? "button",
-		disabled,
-		"aria-disabled": ariaDisabled,
+		disabled: nativeDisabled,
+		"aria-busy": resolvedAriaBusy,
+		"aria-disabled": resolvedAriaDisabled,
 		...props,
-		"data-scope": "button",
-		"data-part": "root",
+		"data-scope": dataScope,
+		"data-part": dataPart,
 		"data-slot": dataSlot ?? "button-root",
 		"data-variant": variant,
 		"data-size": size,
 		"data-disabled": isDisabled ? "" : void 0,
+		"data-loading": loading ? "" : void 0,
 		className: clsx(Button_module_default.root, normalizeClassName(className))
 	});
 });

package/dist/components/card/Card.css

@@ -1,6 +1,7 @@
 @layer ui.components {
   ._2rXk6G_root {
-    --card-padding-default: var(--card-padding, var(--spacing-6));
+    --card-padding-default: var(--card-spacing, var(--card-padding, var(--spacing-6)));
+    --card-section-spacing-default: var(--card-spacing, var(--card-body-padding-top, var(--spacing-4)));
     --card-title-font-size-default: var(--card-title-font-size, var(--text-lg));
     --card-title-line-height-default: var(--card-title-line-height, var(--line-height-text-lg));
     box-sizing: border-box;
@@ -21,13 +22,15 @@
     }
 
     &[data-size="sm"] {
-      --card-padding-default: var(--card-padding-sm, var(--spacing-4));
+      --card-padding-default: var(--card-spacing-sm, var(--card-spacing, var(--card-padding-sm, var(--spacing-4))));
+      --card-section-spacing-default: var(--card-spacing-sm, var(--card-spacing, var(--card-body-padding-top, var(--spacing-4))));
       --card-title-font-size-default: var(--card-title-font-size-sm, var(--text-md));
       --card-title-line-height-default: var(--card-title-line-height-sm, var(--line-height-text-md));
     }
 
     &[data-size="lg"] {
-      --card-padding-default: var(--card-padding-lg, var(--spacing-8));
+      --card-padding-default: var(--card-spacing-lg, var(--card-spacing, var(--card-padding-lg, var(--spacing-8))));
+      --card-section-spacing-default: var(--card-spacing-lg, var(--card-spacing, var(--card-body-padding-top, var(--spacing-4))));
       --card-title-font-size-default: var(--card-title-font-size-lg, var(--text-xl));
       --card-title-line-height-default: var(--card-title-line-height-lg, var(--line-height-text-xl));
     }
@@ -62,8 +65,21 @@
     display: grid;
   }
 
+  ._2rXk6G_media {
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    min-width: 0;
+    overflow: hidden;
+
+    & > :where(img, picture, video, canvas, svg, iframe) {
+      width: 100%;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
   ._2rXk6G_body {
-    padding-block: var(--card-body-padding-top, var(--spacing-4)) var(--card-padding-default);
+    padding-block: var(--card-section-spacing-default) var(--card-padding-default);
     color: var(--card-body-color, var(--color-muted-foreground));
     font-size: var(--card-body-font-size, var(--text-sm));
     line-height: var(--card-body-line-height, var(--line-height-text-sm));
@@ -140,7 +156,7 @@
     }
 
     &:focus-visible:after {
-      outline: var(--card-focus-ring-width, var(--border-width-md)) solid
+      outline: var(--card-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
         var(--card-focus-ring-color, var(--color-ring));
       outline-offset: var(--card-focus-ring-offset, var(--border-width-sm));
     }

package/dist/components/card/Card.d.ts

@@ -9,6 +9,7 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react
   } & import("react").RefAttributes<HTMLDivElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Media: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
   Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/card/Card.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Card_module_default from "./Card.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/card/Card.tsx
 const CardRoot = forwardRef(function CardRoot({ className, size = "md", variant = "outline", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
@@ -37,6 +37,16 @@ const CardBody = forwardRef(function CardBody({ className, ...props }, ref) {
 		...props
 	});
 });
+const CardMedia = forwardRef(function CardMedia({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "card",
+		"data-part": "media",
+		"data-slot": "card-media",
+		className: clsx(Card_module_default.media, normalizeClassName(className)),
+		...props
+	});
+});
 const CardFooter = forwardRef(function CardFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
 		ref,
@@ -91,6 +101,7 @@ const Card = Object.assign(CardRoot, {
 	Root: CardRoot,
 	Header: CardHeader,
 	Body: CardBody,
+	Media: CardMedia,
 	Footer: CardFooter,
 	Title: CardTitle,
 	Description: CardDescription,

package/dist/components/card/Card.module.js

@@ -7,6 +7,7 @@ var Card_module_default = {
 	"footer": "_2rXk6G_footer",
 	"header": "_2rXk6G_header",
 	"link": "_2rXk6G_link",
+	"media": "_2rXk6G_media",
 	"root": "_2rXk6G_root",
 	"title": "_2rXk6G_title"
 };

package/dist/components/carousel/Carousel.css

@@ -47,6 +47,8 @@
   }
 
   .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_itemGroup {
+    overscroll-behavior-x: auto;
+    overscroll-behavior-y: contain;
     height: 100%;
   }
 
@@ -57,8 +59,8 @@
   }
 
   .NQiVeG_prevTrigger, .NQiVeG_nextTrigger, .NQiVeG_autoplayTrigger {
-    width: var(--carousel-control-size, 2.5rem);
-    height: var(--carousel-control-size, 2.5rem);
+    width: var(--carousel-control-size, var(--size-md));
+    height: var(--carousel-control-size, var(--size-md));
     border: var(--border-width-sm) solid
       var(--carousel-control-border-color, color-mix(in oklab, var(--color-border) 88%, black 12%));
     border-radius: var(--radius-full);
@@ -77,8 +79,8 @@
     display: inline-flex;
 
     & svg {
-      width: 1rem;
-      height: 1rem;
+      width: var(--carousel-control-icon-size, var(--spacing-4));
+      height: var(--carousel-control-icon-size, var(--spacing-4));
     }
 
     &:not(:disabled, [data-disabled]):hover {
@@ -89,9 +91,9 @@
     }
 
     &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--border-width-md)) solid
-        var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, 2px);
+      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--carousel-focus-ring-color, var(--color-ring));
+      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:is(:disabled, [data-disabled]) {
@@ -132,8 +134,8 @@
   }
 
   .NQiVeG_indicator {
-    width: var(--carousel-indicator-size, .5rem);
-    height: var(--carousel-indicator-size, .5rem);
+    width: var(--carousel-indicator-size, var(--spacing-2));
+    height: var(--carousel-indicator-size, var(--spacing-2));
     border-radius: var(--radius-full);
     background-color: var(--carousel-indicator-bg, color-mix(in oklab, var(--color-muted) 84%, var(--color-background) 16%));
     cursor: pointer;
@@ -150,13 +152,13 @@
     }
 
     &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--border-width-md)) solid
-        var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, 2px);
+      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--carousel-focus-ring-color, var(--color-ring));
+      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &[data-current] {
-      width: calc(var(--carousel-indicator-size, .5rem) * 3);
+      width: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
       background-color: var(--carousel-indicator-bg-current, var(--color-primary));
       opacity: 1;
     }
@@ -169,17 +171,17 @@
 
   .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator {
     &[data-current] {
-      width: var(--carousel-indicator-size, .5rem);
-      height: calc(var(--carousel-indicator-size, .5rem) * 3);
+      width: var(--carousel-indicator-size, var(--spacing-2));
+      height: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
     }
   }
 
   .NQiVeG_autoplayTrigger {
-    min-width: 3rem;
+    min-width: var(--carousel-autoplay-trigger-min-width, calc(var(--size-md) + var(--spacing-3)));
   }
 
   .NQiVeG_autoplayIndicator {
-    min-width: 1rem;
+    min-width: var(--carousel-autoplay-indicator-min-width, var(--spacing-4));
     font-size: var(--text-xs);
     font-weight: var(--weight-medium);
     line-height: var(--line-height-text-xs);

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

@@ -4,6 +4,7 @@ import { Carousel } from "@ark-ui/react/carousel";
 declare const Carousel$1: import("react").ForwardRefExoticComponent<Omit<Carousel.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Carousel.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Carousel.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: Carousel.ContextProps) => import("react").ReactNode;
   Control: import("react").ForwardRefExoticComponent<Omit<Carousel.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<Carousel.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<Carousel.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -11,6 +12,9 @@ declare const Carousel$1: import("react").ForwardRefExoticComponent<Omit<Carouse
   NextTrigger: import("react").ForwardRefExoticComponent<Omit<Carousel.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   IndicatorGroup: import("react").ForwardRefExoticComponent<Omit<Carousel.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<Carousel.IndicatorProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Indicators: import("react").ForwardRefExoticComponent<Omit<Carousel.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement> & {
+    indicatorClassName?: string;
+  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   AutoplayTrigger: import("react").ForwardRefExoticComponent<Omit<Carousel.AutoplayTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   AutoplayIndicator: import("react").ForwardRefExoticComponent<Omit<Carousel.AutoplayIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ProgressText: import("react").ForwardRefExoticComponent<Omit<Carousel.ProgressTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/carousel/Carousel.js

@@ -1,9 +1,9 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Carousel_module_default from "./Carousel.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Carousel } from "@ark-ui/react/carousel";
 //#region src/components/carousel/Carousel.tsx
 const CarouselRoot = forwardRef(function CarouselRoot({ className, ...props }, ref) {
@@ -86,6 +86,17 @@ const CarouselIndicator = forwardRef(function CarouselIndicator({ className, ...
 		...props
 	});
 });
+const CarouselIndicators = forwardRef(function CarouselIndicators({ className, indicatorClassName, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Carousel.Context, { children: (api) => /* @__PURE__ */ jsx(CarouselIndicatorGroup, {
+		ref,
+		className,
+		...props,
+		children: api.pageSnapPoints.map((_, index) => /* @__PURE__ */ jsx(CarouselIndicator, {
+			index,
+			className: indicatorClassName
+		}, index))
+	}) });
+});
 const CarouselAutoplayTrigger = forwardRef(function CarouselAutoplayTrigger({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Carousel.AutoplayTrigger, {
 		ref,
@@ -113,6 +124,7 @@ const CarouselProgressText = forwardRef(function CarouselProgressText({ classNam
 const Carousel$1 = Object.assign(CarouselRoot, {
 	Root: CarouselRoot,
 	RootProvider: CarouselRootProvider,
+	Context: Carousel.Context,
 	Control: CarouselControl,
 	ItemGroup: CarouselItemGroup,
 	Item: CarouselItem,
@@ -120,6 +132,7 @@ const Carousel$1 = Object.assign(CarouselRoot, {
 	NextTrigger: CarouselNextTrigger,
 	IndicatorGroup: CarouselIndicatorGroup,
 	Indicator: CarouselIndicator,
+	Indicators: CarouselIndicators,
 	AutoplayTrigger: CarouselAutoplayTrigger,
 	AutoplayIndicator: CarouselAutoplayIndicator,
 	ProgressText: CarouselProgressText

package/dist/components/checkbox/Checkbox.css

@@ -44,14 +44,14 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--checkbox-focus-ring-width, var(--border-width-sm)) solid
-        var(--checkbox-focus-ring-color, var(--color-ring));
+      outline: var(--checkbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--checkbox-focus-ring-color, var(--color-ring));
       outline-offset: var(--checkbox-focus-ring-offset, var(--border-width-sm));
     }
 
     &[data-invalid] {
       border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
-      color: var(--checkbox-color-invalid, var(--color-primary-foreground));
+      color: var(--checkbox-color-invalid, var(--color-destructive-foreground));
 
       &[data-state="checked"], &[data-state="indeterminate"] {
         border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
@@ -71,28 +71,28 @@
   }
 
   .NxmH7W_root[data-size="xs"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-xs, .875rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-xs, .5rem);
+    --_checkbox-size: var(--checkbox-size-xs, var(--spacing-3-5));
+    --_checkbox-icon-size: var(--checkbox-icon-size-xs, var(--spacing-2));
   }
 
   .NxmH7W_root[data-size="sm"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-sm, 1rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-sm, .625rem);
+    --_checkbox-size: var(--checkbox-size-sm, var(--spacing-4));
+    --_checkbox-icon-size: var(--checkbox-icon-size-sm, var(--spacing-2-5));
   }
 
   .NxmH7W_root[data-size="md"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-md, 1.25rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-md, .75rem);
+    --_checkbox-size: var(--checkbox-size-md, var(--spacing-5));
+    --_checkbox-icon-size: var(--checkbox-icon-size-md, var(--spacing-3));
   }
 
   .NxmH7W_root[data-size="lg"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-lg, 1.5rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-lg, .875rem);
+    --_checkbox-size: var(--checkbox-size-lg, var(--size-xs));
+    --_checkbox-icon-size: var(--checkbox-icon-size-lg, var(--spacing-3-5));
   }
 
   .NxmH7W_root[data-size="xl"] .NxmH7W_control {
-    --_checkbox-size: var(--checkbox-size-xl, 1.75rem);
-    --_checkbox-icon-size: var(--checkbox-icon-size-xl, 1rem);
+    --_checkbox-size: var(--checkbox-size-xl, var(--spacing-7));
+    --_checkbox-icon-size: var(--checkbox-icon-size-xl, var(--spacing-4));
   }
 
   .NxmH7W_indicator {

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

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { Checkbox } from "@ark-ui/react/checkbox";
+import { Checkbox, useCheckbox, useCheckboxGroup } from "@ark-ui/react/checkbox";
 
 //#region src/components/checkbox/Checkbox.d.ts
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -14,9 +14,8 @@ declare const Checkbox$1: import("react").ForwardRefExoticComponent<Omit<RootPro
   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>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   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>>;
 };
 //#endregion
-export { Checkbox$1 as Checkbox };
+export { Checkbox$1 as Checkbox, useCheckbox, useCheckboxGroup };

package/dist/components/checkbox/Checkbox.js

@@ -1,35 +1,31 @@
-import { CheckIcon, IndeterminateIcon } from "../../lib/moduix/icons/ui/Icons.js";
 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";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { Checkbox } from "@ark-ui/react/checkbox";
+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({ className, size = "md", ...props }, ref) {
+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
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const CheckboxRootProvider = forwardRef(function CheckboxRootProvider({ className, size = "md", ...props }, ref) {
+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
-	});
-});
-const CheckboxControl = forwardRef(function CheckboxControl({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.Control, {
-		ref,
-		"data-slot": "checkbox-control",
-		className: clsx(Checkbox_module_default.control, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const CheckboxIndicator = forwardRef(function CheckboxIndicator({ className, children, indeterminate, ...props }, ref) {
@@ -48,13 +44,21 @@ const CheckboxIndicator = forwardRef(function CheckboxIndicator({ className, chi
 		})
 	});
 });
-const CheckboxHiddenInput = forwardRef(function CheckboxHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(Checkbox.HiddenInput, {
+const CheckboxControl = forwardRef(function CheckboxControl({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Control, {
 		ref,
-		"data-slot": "checkbox-hidden-input",
-		...props
+		"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 })] })
 	});
 });
+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 CheckboxLabel = forwardRef(function CheckboxLabel({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox.Label, {
 		ref,
@@ -76,9 +80,8 @@ const Checkbox$1 = Object.assign(CheckboxRoot, {
 	RootProvider: CheckboxRootProvider,
 	Control: CheckboxControl,
 	Indicator: CheckboxIndicator,
-	HiddenInput: CheckboxHiddenInput,
 	Label: CheckboxLabel,
 	Group: CheckboxGroup
 });
 //#endregion
-export { Checkbox$1 as Checkbox };
+export { Checkbox$1 as Checkbox, useCheckbox, useCheckboxGroup };

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

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