@moduix/react 1.1.1 → 2.0.0

package/dist/components/badge/Badge.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Badge_module_default from "./Badge.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/badge/Badge.tsx
 const BadgeRoot = forwardRef(function BadgeRoot({ className, variant = "default", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.span, {

package/dist/components/bleed/Bleed.d.ts

@@ -1,11 +1,13 @@
 //#region src/components/bleed/Bleed.d.ts
+type BleedAmount = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BleedInline = BleedAmount | 'full';
 declare const Bleed: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  inline?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-  block?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  inline?: BleedInline;
+  block?: BleedAmount;
 } & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-    inline?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
-    block?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+    inline?: BleedInline;
+    block?: BleedAmount;
   } & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion

package/dist/components/bleed/Bleed.js

@@ -1,20 +1,20 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Bleed_module_default from "./Bleed.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/bleed/Bleed.tsx
 const BleedRoot = forwardRef(function BleedRoot({ inline = "full", block = "none", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
 		ref,
+		...props,
 		"data-scope": "bleed",
 		"data-part": "root",
 		"data-slot": "bleed-root",
 		"data-inline": inline,
 		"data-block": block,
-		className: clsx(Bleed_module_default.root, normalizeClassName(className)),
-		...props
+		className: clsx(Bleed_module_default.root, normalizeClassName(className))
 	});
 });
 const Bleed = Object.assign(BleedRoot, { Root: BleedRoot });

package/dist/components/breadcrumbs/Breadcrumbs.css

@@ -23,7 +23,7 @@
   }
 
   .WoRWWa_item[data-scope="breadcrumbs"][data-part="item"] {
-    flex: none;
+    flex: 0 auto;
     align-items: center;
     min-width: 0;
     display: inline-flex;
@@ -77,6 +77,12 @@
     display: inline-flex;
   }
 
+  .WoRWWa_separatorIcon {
+    flex: none;
+    width: 1em;
+    height: 1em;
+  }
+
   .WoRWWa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
     min-width: var(--breadcrumbs-ellipsis-size, 1rem);
     min-height: var(--breadcrumbs-ellipsis-size, 1rem);

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,9 +1,27 @@
+import { HTMLArkProps } from "@ark-ui/react/factory";
+import { Key, ReactNode } from "react";
+
 //#region src/components/breadcrumbs/Breadcrumbs.d.ts
+type BreadcrumbsPathItem = {
+  href?: string;
+  key?: Key;
+  label: ReactNode;
+};
+type BreadcrumbsPathProps = Omit<HTMLArkProps<'ol'>, 'children'> & {
+  items: readonly BreadcrumbsPathItem[];
+  separator?: ReactNode;
+};
+declare function BreadcrumbsPath({
+  items,
+  separator,
+  ...props
+}: BreadcrumbsPathProps): import("react").JSX.Element;
 declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLOListElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
   Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Path: typeof BreadcrumbsPath;
   Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
   Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
   Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,10 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Breadcrumbs_module_default from "./Breadcrumbs.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/breadcrumbs/Breadcrumbs.tsx
 const BreadcrumbsRoot = forwardRef(function BreadcrumbsRoot({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.nav, {
@@ -57,7 +58,19 @@ const BreadcrumbsPage = forwardRef(function BreadcrumbsPage({ className, ...prop
 		...props
 	});
 });
-const BreadcrumbsSeparator = forwardRef(function BreadcrumbsSeparator({ className, children = "/", role = "presentation", ...props }, ref) {
+function BreadcrumbsPath({ items, separator, ...props }) {
+	return /* @__PURE__ */ jsx(BreadcrumbsList, {
+		...props,
+		children: items.map((item, index) => {
+			const isLastItem = index === items.length - 1;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbsItem, { children: item.href && !isLastItem ? /* @__PURE__ */ jsx(BreadcrumbsLink, {
+				href: item.href,
+				children: item.label
+			}) : /* @__PURE__ */ jsx(BreadcrumbsPage, { children: item.label }) }), !isLastItem ? /* @__PURE__ */ jsx(BreadcrumbsSeparator, { children: separator }) : null] }, item.key ?? item.href ?? index);
+		})
+	});
+}
+const BreadcrumbsSeparator = forwardRef(function BreadcrumbsSeparator({ className, children, role = "presentation", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.li, {
 		ref,
 		"data-scope": "breadcrumbs",
@@ -67,7 +80,7 @@ const BreadcrumbsSeparator = forwardRef(function BreadcrumbsSeparator({ classNam
 		role,
 		className: clsx(Breadcrumbs_module_default.separator, normalizeClassName(className)),
 		...props,
-		children
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: Breadcrumbs_module_default.separatorIcon })
 	});
 });
 const BreadcrumbsEllipsis = forwardRef(function BreadcrumbsEllipsis({ className, children = "...", ...props }, ref) {
@@ -87,6 +100,7 @@ const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
 	List: BreadcrumbsList,
 	Item: BreadcrumbsItem,
 	Link: BreadcrumbsLink,
+	Path: BreadcrumbsPath,
 	Page: BreadcrumbsPage,
 	Separator: BreadcrumbsSeparator,
 	Ellipsis: BreadcrumbsEllipsis

package/dist/components/breadcrumbs/Breadcrumbs.module.js

@@ -7,7 +7,8 @@ var Breadcrumbs_module_default = {
 	"list": "WoRWWa_list",
 	"page": "WoRWWa_page",
 	"root": "WoRWWa_root",
-	"separator": "WoRWWa_separator"
+	"separator": "WoRWWa_separator",
+	"separatorIcon": "WoRWWa_separatorIcon"
 };
 //#endregion
 export { Breadcrumbs_module_default as default };

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

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

package/dist/components/button/Button.css

@@ -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/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));

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

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

package/dist/components/clipboard/Clipboard.css

@@ -2,7 +2,7 @@
   .eM1-oW_root {
     gap: var(--clipboard-gap, .375rem);
     width: var(--clipboard-width, 100%);
-    max-width: var(--clipboard-max-width, 20rem);
+    max-width: var(--clipboard-max-width, none);
     color: var(--clipboard-color, var(--color-foreground));
     flex-direction: column;
     display: flex;

package/dist/components/clipboard/Clipboard.d.ts

@@ -9,7 +9,9 @@ declare const Clipboard$1: import("react").ForwardRefExoticComponent<Omit<Clipbo
   Input: import("react").ForwardRefExoticComponent<Omit<Clipboard.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Clipboard.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<Clipboard.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CopyText: import("react").ForwardRefExoticComponent<Omit<Clipboard.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Clipboard.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  useClipboard: (props?: import("@ark-ui/react/clipboard").UseClipboardProps) => import("@ark-ui/react/clipboard").UseClipboardReturn;
 };
 //#endregion
 export { Clipboard$1 as Clipboard };