@moduix/react 1.1.0 → 2.0.0

package/dist/components/button/Button.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .ypNn3a_root {
+  .NbN_ya_root {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -31,18 +31,33 @@
       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);
       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"] {
       border-color: var(--button-default-border-color, var(--color-primary));
       background-color: var(--button-default-bg, var(--color-primary));
@@ -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));
         }
       }
     }
@@ -189,5 +204,10 @@
       min-width: var(--button-size-icon-lg, var(--size-xl));
       height: var(--button-size-icon-lg, var(--size-xl));
     }
+
+    &[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/button/Button.module.js

@@ -1,5 +1,5 @@
 import './Button.css';
 //#region src/components/button/Button.module.css
-var Button_module_default = { "root": "ypNn3a_root" };
+var Button_module_default = { "root": "NbN_ya_root" };
 //#endregion
 export { Button_module_default as default };

package/dist/components/card/Card.css

@@ -1,6 +1,7 @@
 @layer ui.components {
-  .E2gSWq_root {
-    --card-padding-default: var(--card-padding, var(--spacing-6));
+  ._2rXk6G_root {
+    --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));
     }
@@ -48,13 +51,13 @@
     }
   }
 
-  .E2gSWq_header, .E2gSWq_body, .E2gSWq_footer {
+  ._2rXk6G_header, ._2rXk6G_body, ._2rXk6G_footer {
     box-sizing: border-box;
     min-width: 0;
     padding-inline: var(--card-padding-default);
   }
 
-  .E2gSWq_header {
+  ._2rXk6G_header {
     column-gap: var(--card-action-gap, var(--spacing-2));
     row-gap: var(--card-header-gap, var(--spacing-1));
     padding-block: var(--card-padding-default) 0;
@@ -62,8 +65,21 @@
     display: grid;
   }
 
-  .E2gSWq_body {
-    padding-block: var(--card-body-padding-top, var(--spacing-4)) var(--card-padding-default);
+  ._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-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));
@@ -82,7 +98,7 @@
     }
   }
 
-  .E2gSWq_footer {
+  ._2rXk6G_footer {
     align-items: center;
     gap: var(--card-footer-gap, var(--spacing-2));
     padding-block: 0 var(--card-padding-default);
@@ -90,7 +106,7 @@
     display: flex;
   }
 
-  .E2gSWq_title {
+  ._2rXk6G_title {
     min-width: 0;
     color: var(--card-title-color, currentColor);
     font-size: var(--card-title-font-size-default);
@@ -101,7 +117,7 @@
     margin: 0;
   }
 
-  .E2gSWq_description {
+  ._2rXk6G_description {
     min-width: 0;
     color: var(--card-description-color, var(--color-muted-foreground));
     font-size: var(--card-description-font-size, var(--text-sm));
@@ -111,7 +127,7 @@
     margin: 0;
   }
 
-  .E2gSWq_action {
+  ._2rXk6G_action {
     z-index: 1;
     justify-content: flex-end;
     align-items: start;
@@ -122,7 +138,7 @@
     position: relative;
   }
 
-  .E2gSWq_link {
+  ._2rXk6G_link {
     color: inherit;
     text-decoration: none;
     position: static;

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

@@ -1,14 +1,15 @@
 import './Card.css';
 //#region src/components/card/Card.module.css
 var Card_module_default = {
-	"action": "E2gSWq_action",
-	"body": "E2gSWq_body",
-	"description": "E2gSWq_description",
-	"footer": "E2gSWq_footer",
-	"header": "E2gSWq_header",
-	"link": "E2gSWq_link",
-	"root": "E2gSWq_root",
-	"title": "E2gSWq_title"
+	"action": "_2rXk6G_action",
+	"body": "_2rXk6G_body",
+	"description": "_2rXk6G_description",
+	"footer": "_2rXk6G_footer",
+	"header": "_2rXk6G_header",
+	"link": "_2rXk6G_link",
+	"media": "_2rXk6G_media",
+	"root": "_2rXk6G_root",
+	"title": "_2rXk6G_title"
 };
 //#endregion
 export { Card_module_default as default };

package/dist/components/carousel/Carousel.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .m9QXca_root {
+  .NQiVeG_root {
     gap: var(--carousel-gap, var(--spacing-3));
     flex-direction: column;
     width: 100%;
@@ -7,25 +7,25 @@
     display: flex;
   }
 
-  .m9QXca_root[data-orientation="vertical"] {
+  .NQiVeG_root[data-orientation="vertical"] {
     height: var(--carousel-height, 24rem);
     flex-direction: row;
     align-items: stretch;
   }
 
-  .m9QXca_control {
+  .NQiVeG_control {
     align-items: center;
     gap: var(--carousel-gap, var(--spacing-3));
     min-width: 0;
     display: flex;
   }
 
-  .m9QXca_control[data-orientation="vertical"] {
+  .NQiVeG_control[data-orientation="vertical"] {
     flex-direction: column;
     justify-content: space-between;
   }
 
-  .m9QXca_itemGroup {
+  .NQiVeG_itemGroup {
     overscroll-behavior-x: contain;
     overscroll-behavior-y: auto;
     border-radius: var(--carousel-track-radius, var(--radius-xl));
@@ -46,17 +46,19 @@
     }
   }
 
-  .m9QXca_root[data-orientation="vertical"] > .m9QXca_itemGroup {
+  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_itemGroup {
+    overscroll-behavior-x: auto;
+    overscroll-behavior-y: contain;
     height: 100%;
   }
 
-  .m9QXca_item {
+  .NQiVeG_item {
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;
   }
 
-  .m9QXca_prevTrigger, .m9QXca_nextTrigger, .m9QXca_autoplayTrigger {
+  .NQiVeG_prevTrigger, .NQiVeG_nextTrigger, .NQiVeG_autoplayTrigger {
     width: var(--carousel-control-size, 2.5rem);
     height: var(--carousel-control-size, 2.5rem);
     border: var(--border-width-sm) solid
@@ -106,32 +108,32 @@
     }
   }
 
-  .m9QXca_defaultIcon {
+  .NQiVeG_defaultIcon {
     justify-content: center;
     align-items: center;
     display: inline-flex;
   }
 
-  .m9QXca_root[data-orientation="vertical"] {
-    & .m9QXca_defaultIcon {
+  .NQiVeG_root[data-orientation="vertical"] {
+    & .NQiVeG_defaultIcon {
       & svg {
         transform: rotate(90deg);
       }
     }
   }
 
-  .m9QXca_indicatorGroup {
+  .NQiVeG_indicatorGroup {
     justify-content: center;
     align-items: center;
     gap: var(--carousel-indicator-gap, var(--spacing-2));
     display: flex;
   }
 
-  .m9QXca_root[data-orientation="vertical"] > .m9QXca_indicatorGroup, .m9QXca_control[data-orientation="vertical"] > .m9QXca_indicatorGroup {
+  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup {
     flex-direction: column;
   }
 
-  .m9QXca_indicator {
+  .NQiVeG_indicator {
     width: var(--carousel-indicator-size, .5rem);
     height: var(--carousel-indicator-size, .5rem);
     border-radius: var(--radius-full);
@@ -167,18 +169,18 @@
     }
   }
 
-  .m9QXca_root[data-orientation="vertical"] > .m9QXca_indicatorGroup .m9QXca_indicator, .m9QXca_control[data-orientation="vertical"] > .m9QXca_indicatorGroup .m9QXca_indicator {
+  .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);
     }
   }
 
-  .m9QXca_autoplayTrigger {
+  .NQiVeG_autoplayTrigger {
     min-width: 3rem;
   }
 
-  .m9QXca_autoplayIndicator {
+  .NQiVeG_autoplayIndicator {
     min-width: 1rem;
     font-size: var(--text-xs);
     font-weight: var(--weight-medium);
@@ -189,7 +191,7 @@
     display: inline-flex;
   }
 
-  .m9QXca_progressText {
+  .NQiVeG_progressText {
     color: var(--carousel-progress-text-color, var(--color-muted-foreground));
     font-size: var(--carousel-progress-text-font-size, var(--text-sm));
     line-height: var(--line-height-text-sm);

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/carousel/Carousel.module.js

@@ -1,18 +1,18 @@
 import './Carousel.css';
 //#region src/components/carousel/Carousel.module.css
 var Carousel_module_default = {
-	"autoplayIndicator": "m9QXca_autoplayIndicator",
-	"autoplayTrigger": "m9QXca_autoplayTrigger",
-	"control": "m9QXca_control",
-	"defaultIcon": "m9QXca_defaultIcon",
-	"indicator": "m9QXca_indicator",
-	"indicatorGroup": "m9QXca_indicatorGroup",
-	"item": "m9QXca_item",
-	"itemGroup": "m9QXca_itemGroup",
-	"nextTrigger": "m9QXca_nextTrigger",
-	"prevTrigger": "m9QXca_prevTrigger",
-	"progressText": "m9QXca_progressText",
-	"root": "m9QXca_root"
+	"autoplayIndicator": "NQiVeG_autoplayIndicator",
+	"autoplayTrigger": "NQiVeG_autoplayTrigger",
+	"control": "NQiVeG_control",
+	"defaultIcon": "NQiVeG_defaultIcon",
+	"indicator": "NQiVeG_indicator",
+	"indicatorGroup": "NQiVeG_indicatorGroup",
+	"item": "NQiVeG_item",
+	"itemGroup": "NQiVeG_itemGroup",
+	"nextTrigger": "NQiVeG_nextTrigger",
+	"prevTrigger": "NQiVeG_prevTrigger",
+	"progressText": "NQiVeG_progressText",
+	"root": "NQiVeG_root"
 };
 //#endregion
 export { Carousel_module_default as default };

package/dist/components/checkbox/Checkbox.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .xohwwq_root {
+  .NxmH7W_root {
     align-items: center;
     gap: var(--checkbox-gap, var(--spacing-2));
     vertical-align: middle;
@@ -16,7 +16,7 @@
     }
   }
 
-  .xohwwq_control {
+  .NxmH7W_control {
     box-sizing: border-box;
     width: var(--_checkbox-size, 1.25rem);
     height: var(--_checkbox-size, 1.25rem);
@@ -70,32 +70,32 @@
     }
   }
 
-  .xohwwq_root[data-size="xs"] .xohwwq_control {
+  .NxmH7W_root[data-size="xs"] .NxmH7W_control {
     --_checkbox-size: var(--checkbox-size-xs, .875rem);
     --_checkbox-icon-size: var(--checkbox-icon-size-xs, .5rem);
   }
 
-  .xohwwq_root[data-size="sm"] .xohwwq_control {
+  .NxmH7W_root[data-size="sm"] .NxmH7W_control {
     --_checkbox-size: var(--checkbox-size-sm, 1rem);
     --_checkbox-icon-size: var(--checkbox-icon-size-sm, .625rem);
   }
 
-  .xohwwq_root[data-size="md"] .xohwwq_control {
+  .NxmH7W_root[data-size="md"] .NxmH7W_control {
     --_checkbox-size: var(--checkbox-size-md, 1.25rem);
     --_checkbox-icon-size: var(--checkbox-icon-size-md, .75rem);
   }
 
-  .xohwwq_root[data-size="lg"] .xohwwq_control {
+  .NxmH7W_root[data-size="lg"] .NxmH7W_control {
     --_checkbox-size: var(--checkbox-size-lg, 1.5rem);
     --_checkbox-icon-size: var(--checkbox-icon-size-lg, .875rem);
   }
 
-  .xohwwq_root[data-size="xl"] .xohwwq_control {
+  .NxmH7W_root[data-size="xl"] .NxmH7W_control {
     --_checkbox-size: var(--checkbox-size-xl, 1.75rem);
     --_checkbox-icon-size: var(--checkbox-icon-size-xl, 1rem);
   }
 
-  .xohwwq_indicator {
+  .NxmH7W_indicator {
     width: 100%;
     height: 100%;
     color: inherit;
@@ -104,7 +104,7 @@
     display: inline-flex;
   }
 
-  .xohwwq_icon {
+  .NxmH7W_icon {
     width: var(--_checkbox-icon-size, .75rem);
     height: var(--_checkbox-icon-size, .75rem);
     color: inherit;
@@ -119,14 +119,14 @@
     }
   }
 
-  .xohwwq_label {
+  .NxmH7W_label {
     color: var(--checkbox-label-color, var(--color-foreground));
     font-size: var(--checkbox-label-font-size, var(--text-sm));
     font-weight: var(--checkbox-label-font-weight, var(--weight-medium));
     line-height: var(--checkbox-label-line-height, var(--line-height-text-sm));
   }
 
-  .xohwwq_group {
+  .NxmH7W_group {
     gap: var(--checkbox-group-gap, var(--spacing-2));
     color: var(--checkbox-group-color, var(--color-foreground));
     flex-direction: column;

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 };