@moduix/react 1.1.1 → 2.1.0

package/dist/components/angle-slider/AngleSlider.css

@@ -2,7 +2,7 @@
   .vn7zXa_root {
     box-sizing: border-box;
     align-items: center;
-    gap: var(--angle-slider-gap, .75rem);
+    gap: var(--angle-slider-gap, var(--spacing-3));
     min-width: 0;
     color: var(--angle-slider-color, var(--color-foreground));
     flex-direction: column;
@@ -54,8 +54,8 @@
 
     &:before {
       z-index: 1;
-      width: var(--angle-slider-center-dot-size, .375rem);
-      height: var(--angle-slider-center-dot-size, .375rem);
+      width: var(--angle-slider-center-dot-size, var(--spacing-1-5));
+      height: var(--angle-slider-center-dot-size, var(--spacing-1-5));
       border-radius: inherit;
       background: var(--angle-slider-center-dot-color, var(--angle-slider-color, var(--color-foreground)));
       content: "";
@@ -92,8 +92,8 @@
     &:before {
       top: var(--angle-slider-ring-thickness, .875rem);
       box-sizing: border-box;
-      width: var(--angle-slider-thumb-size, 1rem);
-      height: var(--angle-slider-thumb-size, 1rem);
+      width: var(--angle-slider-thumb-size, var(--spacing-4));
+      height: var(--angle-slider-thumb-size, var(--spacing-4));
       border: var(--angle-slider-thumb-border-width, var(--border-width-sm)) solid
         var(--angle-slider-thumb-border-color, var(--color-border));
       border-radius: var(--angle-slider-thumb-radius, var(--radius-full));
@@ -110,11 +110,11 @@
     }
 
     &:after {
-      top: calc(var(--angle-slider-ring-thickness, .875rem) + var(--angle-slider-thumb-size, 1rem) +
-          .25rem);
+      top: calc(var(--angle-slider-ring-thickness, .875rem) +
+          var(--angle-slider-thumb-size, var(--spacing-4)) + var(--spacing-1));
       width: var(--angle-slider-thumb-line-width, .1875rem);
-      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) - var(--angle-slider-thumb-size, 1rem) -
-          .375rem);
+      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) -
+          var(--angle-slider-thumb-size, var(--spacing-4)) - var(--spacing-1-5));
       border-radius: var(--radius-full);
       background: linear-gradient(to bottom,
         var(--angle-slider-indicator-bg, var(--color-primary)),

package/dist/components/angle-slider/AngleSlider.d.ts

@@ -1,16 +1,32 @@
+import { ComponentProps } from "react";
 import { AngleSlider } from "@ark-ui/react/angle-slider";
 
 //#region src/components/angle-slider/AngleSlider.d.ts
+declare function AngleSliderMarks({
+  values,
+  ...props
+}: ComponentProps<typeof AngleSlider.MarkerGroup> & {
+  values: readonly number[];
+}): import("react").JSX.Element;
+declare function AngleSliderDial({
+  children,
+  thumbClassName,
+  ...props
+}: ComponentProps<typeof AngleSlider.Control> & {
+  thumbClassName?: string;
+}): import("react").JSX.Element;
 declare const AngleSlider$1: import("react").ForwardRefExoticComponent<Omit<AngleSlider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<AngleSlider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<AngleSlider.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<AngleSlider.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<AngleSlider.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Dial: typeof AngleSliderDial;
   Thumb: import("react").ForwardRefExoticComponent<Omit<AngleSlider.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   MarkerGroup: import("react").ForwardRefExoticComponent<Omit<AngleSlider.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Marker: import("react").ForwardRefExoticComponent<Omit<AngleSlider.MarkerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Marks: typeof AngleSliderMarks;
   ValueText: import("react").ForwardRefExoticComponent<Omit<AngleSlider.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<AngleSlider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
+declare const useAngleSlider$1: (props?: import("@ark-ui/react/angle-slider").UseAngleSliderProps) => import("@ark-ui/react/angle-slider").UseAngleSliderReturn;
 //#endregion
-export { AngleSlider$1 as AngleSlider };
+export { AngleSlider$1 as AngleSlider, useAngleSlider$1 as useAngleSlider };

package/dist/components/angle-slider/AngleSlider.js

@@ -1,16 +1,18 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import AngleSlider_module_default from "./AngleSlider.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { AngleSlider } from "@ark-ui/react/angle-slider";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AngleSlider, useAngleSlider } from "@ark-ui/react/angle-slider";
 //#region src/components/angle-slider/AngleSlider.tsx
-const AngleSliderRoot = forwardRef(function AngleSliderRoot({ className, ...props }, ref) {
+const AngleSliderRoot = forwardRef(function AngleSliderRoot({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AngleSlider.Root, {
 		ref,
 		"data-slot": "angle-slider-root",
 		className: clsx(AngleSlider_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const AngleSliderLabel = forwardRef(function AngleSliderLabel({ className, ...props }, ref) {
@@ -21,14 +23,22 @@ const AngleSliderLabel = forwardRef(function AngleSliderLabel({ className, ...pr
 		...props
 	});
 });
-const AngleSliderRootProvider = forwardRef(function AngleSliderRootProvider({ className, ...props }, ref) {
+const AngleSliderRootProvider = forwardRef(function AngleSliderRootProvider({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AngleSlider.RootProvider, {
 		ref,
 		"data-slot": "angle-slider-root-provider",
 		className: clsx(AngleSlider_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(AngleSlider.HiddenInput, { "data-slot": "angle-slider-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 AngleSliderControl = forwardRef(function AngleSliderControl({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AngleSlider.Control, {
 		ref,
@@ -61,6 +71,18 @@ const AngleSliderMarker = forwardRef(function AngleSliderMarker({ className, ...
 		...props
 	});
 });
+function AngleSliderMarks({ values, ...props }) {
+	return /* @__PURE__ */ jsx(AngleSliderMarkerGroup, {
+		...props,
+		children: values.map((value) => /* @__PURE__ */ jsx(AngleSliderMarker, { value }, value))
+	});
+}
+function AngleSliderDial({ children, thumbClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(AngleSliderControl, {
+		...props,
+		children: [children, /* @__PURE__ */ jsx(AngleSliderThumb, { className: thumbClassName })]
+	});
+}
 const AngleSliderValueText = forwardRef(function AngleSliderValueText({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AngleSlider.ValueText, {
 		ref,
@@ -69,24 +91,18 @@ const AngleSliderValueText = forwardRef(function AngleSliderValueText({ classNam
 		...props
 	});
 });
-const AngleSliderHiddenInput = forwardRef(function AngleSliderHiddenInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(AngleSlider.HiddenInput, {
-		ref,
-		"data-slot": "angle-slider-hidden-input",
-		className: normalizeClassName(className),
-		...props
-	});
-});
 const AngleSlider$1 = Object.assign(AngleSliderRoot, {
 	Root: AngleSliderRoot,
 	RootProvider: AngleSliderRootProvider,
 	Label: AngleSliderLabel,
 	Control: AngleSliderControl,
+	Dial: AngleSliderDial,
 	Thumb: AngleSliderThumb,
 	MarkerGroup: AngleSliderMarkerGroup,
 	Marker: AngleSliderMarker,
-	ValueText: AngleSliderValueText,
-	HiddenInput: AngleSliderHiddenInput
+	Marks: AngleSliderMarks,
+	ValueText: AngleSliderValueText
 });
+const useAngleSlider$1 = useAngleSlider;
 //#endregion
-export { AngleSlider$1 as AngleSlider };
+export { AngleSlider$1 as AngleSlider, useAngleSlider$1 as useAngleSlider };

package/dist/components/angle-slider/index.d.ts

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

package/dist/components/aspect-ratio/AspectRatio.css

@@ -1,7 +1,9 @@
 @layer ui.components {
   .iOVgxW_root {
-    border-radius: var(--aspect-ratio-radius, var(--radius-md));
+    --aspect-ratio-value: 1;
     width: 100%;
+    aspect-ratio: var(--aspect-ratio-value);
+    border-radius: var(--aspect-ratio-radius, var(--radius-md));
     position: relative;
     overflow: hidden;
 

package/dist/components/aspect-ratio/AspectRatio.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import AspectRatio_module_default from "./AspectRatio.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/aspect-ratio/AspectRatio.tsx
 const AspectRatioRoot = forwardRef(function AspectRatioRoot({ ratio, className, style, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
@@ -13,7 +13,7 @@ const AspectRatioRoot = forwardRef(function AspectRatioRoot({ ratio, className,
 		"data-slot": "aspect-ratio-root",
 		className: clsx(AspectRatio_module_default.root, normalizeClassName(className)),
 		style: {
-			aspectRatio: ratio,
+			"--aspect-ratio-value": ratio,
 			...style
 		},
 		...props

package/dist/components/avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { Avatar } from "@ark-ui/react/avatar";
+import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
 
 //#region src/components/avatar/Avatar.d.ts
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -9,11 +9,14 @@ type AvatarRootProps = ComponentProps<typeof Avatar.Root> & {
 type AvatarRootProviderProps = ComponentProps<typeof Avatar.RootProvider> & {
   size?: AvatarSize;
 };
+type AvatarFallbackProps = ComponentProps<typeof Avatar.Fallback> & {
+  name?: string;
+};
 declare const Avatar$1: import("react").ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<AvatarRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Image: import("react").ForwardRefExoticComponent<Omit<Avatar.ImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-  Fallback: import("react").ForwardRefExoticComponent<Omit<Avatar.FallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Fallback: import("react").ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Avatar$1 as Avatar };
+export { Avatar$1 as Avatar, useAvatar, useAvatarContext };

package/dist/components/avatar/Avatar.js

@@ -1,10 +1,16 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Avatar_module_default from "./Avatar.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Avatar } from "@ark-ui/react/avatar";
+import { jsx } from "react/jsx-runtime";
+import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
 //#region src/components/avatar/Avatar.tsx
+const getInitials = (name) => {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	const firstName = parts[0] ?? "";
+	const lastName = parts.length > 1 ? parts[parts.length - 1] : "";
+	return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0] ?? "";
+};
 const AvatarRoot = forwardRef(function AvatarRoot({ className, size, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Avatar.Root, {
 		ref,
@@ -31,12 +37,13 @@ const AvatarImage = forwardRef(function AvatarImage({ className, ...props }, ref
 		...props
 	});
 });
-const AvatarFallback = forwardRef(function AvatarFallback({ className, ...props }, ref) {
+const AvatarFallback = forwardRef(function AvatarFallback({ children, className, name, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Avatar.Fallback, {
 		ref,
 		"data-slot": "avatar-fallback",
 		className: clsx(Avatar_module_default.fallback, normalizeClassName(className)),
-		...props
+		...props,
+		children: children ?? (name ? getInitials(name) : void 0)
 	});
 });
 const Avatar$1 = Object.assign(AvatarRoot, {
@@ -46,4 +53,4 @@ const Avatar$1 = Object.assign(AvatarRoot, {
 	Fallback: AvatarFallback
 });
 //#endregion
-export { Avatar$1 as Avatar };
+export { Avatar$1 as Avatar, useAvatar, useAvatarContext };

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

@@ -1,2 +1,2 @@
-import { Avatar } from "./Avatar.js";
-export { Avatar };
+import { Avatar, useAvatar, useAvatarContext } from "./Avatar.js";
+export { Avatar, useAvatar, useAvatarContext };

package/dist/components/badge/Badge.css

@@ -2,7 +2,7 @@
   .NXa69G_root {
     justify-content: center;
     align-items: center;
-    gap: var(--badge-gap, .375rem);
+    gap: var(--badge-gap, var(--spacing-1-5));
     border: var(--badge-border-width, var(--border-width-sm)) solid
       var(--badge-border-color, transparent);
     border-radius: var(--badge-radius, var(--radius-full));
@@ -10,7 +10,7 @@
     min-width: 0;
     max-width: 100%;
     padding-block: var(--badge-padding-y, 0);
-    padding-inline: var(--badge-padding-x, .625rem);
+    padding-inline: var(--badge-padding-x, var(--spacing-2-5));
     background-color: var(--badge-bg, var(--color-primary));
     color: var(--badge-color, var(--color-primary-foreground));
     font-size: var(--badge-font-size, var(--text-xs));
@@ -29,9 +29,38 @@
     display: inline-flex;
     overflow: hidden;
 
+    &:is(a, button, [role="button"]) {
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: var(--badge-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+          solid var(--badge-focus-ring-color, var(--color-ring));
+        outline-offset: var(--badge-focus-ring-offset, var(--focus-ring-offset));
+      }
+
+      &[data-variant="default"], &[data-variant="secondary"], &[data-variant="destructive"] {
+        &:hover {
+          opacity: .9;
+        }
+      }
+
+      &[data-variant="outline"], &[data-variant="ghost"] {
+        &:hover {
+          border-color: var(--badge-border-color, var(--color-primary));
+          color: var(--badge-color, var(--color-primary));
+        }
+      }
+
+      &[data-variant="link"] {
+        &:hover {
+          text-decoration-color: currentColor;
+        }
+      }
+    }
+
     & > svg {
-      width: var(--badge-icon-size, .75rem);
-      height: var(--badge-icon-size, .75rem);
+      width: var(--badge-icon-size, var(--spacing-3));
+      height: var(--badge-icon-size, var(--spacing-3));
       pointer-events: none;
       flex-shrink: 0;
     }
@@ -43,22 +72,37 @@
 
     &[data-variant="destructive"] {
       background-color: var(--badge-bg, var(--color-destructive));
-      color: var(--badge-color, var(--color-primary-foreground));
+      color: var(--badge-color, var(--color-destructive-foreground));
     }
 
-    &[data-variant="outline"], &[data-variant="ghost"] {
+    &[data-variant="outline"], &[data-variant="ghost"], &[data-variant="link"] {
       background-color: var(--badge-bg, transparent);
+    }
+
+    &[data-variant="outline"], &[data-variant="ghost"] {
       color: var(--badge-color, var(--color-foreground));
     }
 
     &[data-variant="outline"] {
       border-color: var(--badge-border-color, var(--color-border));
     }
+
+    &[data-variant="link"] {
+      min-height: auto;
+      color: var(--badge-color, var(--color-primary));
+      text-decoration: underline;
+      text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
+      text-underline-offset: var(--badge-link-underline-offset, .15em);
+      border-color: #0000;
+      padding-inline: 0;
+      text-decoration-thickness: from-font;
+      overflow: visible;
+    }
   }
 
   .NXa69G_dot {
-    width: var(--badge-dot-size, .375rem);
-    height: var(--badge-dot-size, .375rem);
+    width: var(--badge-dot-size, var(--spacing-1-5));
+    height: var(--badge-dot-size, var(--spacing-1-5));
     background-color: currentColor;
     border-radius: 50%;
     flex-shrink: 0;

package/dist/components/badge/Badge.d.ts

@@ -1,9 +1,9 @@
 //#region src/components/badge/Badge.d.ts
 declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
 } & import("react").RefAttributes<HTMLSpanElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
   } & import("react").RefAttributes<HTMLSpanElement>>;
   Dot: 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/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;
@@ -32,7 +32,7 @@
   .WoRWWa_link[data-scope="breadcrumbs"][data-part="link"], .WoRWWa_page[data-scope="breadcrumbs"][data-part="page"] {
     min-width: 0;
     max-width: 100%;
-    padding-inline: var(--breadcrumbs-item-padding-x, .25rem);
+    padding-inline: var(--breadcrumbs-item-padding-x, var(--spacing-1));
     white-space: nowrap;
     display: block;
   }
@@ -58,7 +58,8 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--breadcrumbs-focus-ring-width, var(--border-width-sm))
+      box-shadow: 0 0 0
+        var(--breadcrumbs-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         var(--breadcrumbs-focus-ring-color, var(--color-ring));
     }
   }
@@ -77,10 +78,16 @@
     display: inline-flex;
   }
 
+  .WoRWWa_separatorIcon {
+    width: var(--breadcrumbs-separator-icon-size, 1em);
+    height: var(--breadcrumbs-separator-icon-size, 1em);
+    flex: none;
+  }
+
   .WoRWWa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
-    min-width: var(--breadcrumbs-ellipsis-size, 1rem);
-    min-height: var(--breadcrumbs-ellipsis-size, 1rem);
-    padding-inline: var(--breadcrumbs-item-padding-x, .25rem);
+    min-width: var(--breadcrumbs-ellipsis-size, var(--spacing-4));
+    min-height: var(--breadcrumbs-ellipsis-size, var(--spacing-4));
+    padding-inline: var(--breadcrumbs-item-padding-x, var(--spacing-1));
     color: var(--breadcrumbs-ellipsis-color, var(--color-muted-foreground));
     border-radius: var(--breadcrumbs-ellipsis-radius, var(--radius-sm));
     justify-content: center;

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