@moduix/react 1.1.0 → 2.0.0

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

@@ -1,13 +1,13 @@
 import './AngleSlider.css';
 //#region src/components/angle-slider/AngleSlider.module.css
 var AngleSlider_module_default = {
-	"control": "yUv4bW_control",
-	"label": "yUv4bW_label",
-	"marker": "yUv4bW_marker",
-	"markerGroup": "yUv4bW_markerGroup",
-	"root": "yUv4bW_root",
-	"thumb": "yUv4bW_thumb",
-	"valueText": "yUv4bW_valueText"
+	"control": "vn7zXa_control",
+	"label": "vn7zXa_label",
+	"marker": "vn7zXa_marker",
+	"markerGroup": "vn7zXa_markerGroup",
+	"root": "vn7zXa_root",
+	"thumb": "vn7zXa_thumb",
+	"valueText": "vn7zXa_valueText"
 };
 //#endregion
 export { AngleSlider_module_default as default };

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 {
-  .j80LYW_root {
-    border-radius: var(--aspect-ratio-radius, var(--radius-md));
+  .iOVgxW_root {
+    --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/aspect-ratio/AspectRatio.module.js

@@ -1,5 +1,5 @@
 import './AspectRatio.css';
 //#region src/components/aspect-ratio/AspectRatio.module.css
-var AspectRatio_module_default = { "root": "j80LYW_root" };
+var AspectRatio_module_default = { "root": "iOVgxW_root" };
 //#endregion
 export { AspectRatio_module_default as default };

package/dist/components/avatar/Avatar.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .TplYlq_root {
+  .qCmyuq_root {
     box-sizing: border-box;
     width: var(--avatar-size, var(--size-md));
     height: var(--avatar-size, var(--size-md));
@@ -43,7 +43,7 @@
     }
   }
 
-  .TplYlq_image {
+  .qCmyuq_image {
     object-fit: var(--avatar-image-object-fit, cover);
     object-position: var(--avatar-image-object-position, center);
     border-radius: inherit;
@@ -56,7 +56,7 @@
     }
   }
 
-  .TplYlq_fallback {
+  .qCmyuq_fallback {
     width: 100%;
     height: 100%;
     padding: var(--avatar-fallback-padding, 0);

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

@@ -1,9 +1,9 @@
 import './Avatar.css';
 //#region src/components/avatar/Avatar.module.css
 var Avatar_module_default = {
-	"fallback": "TplYlq_fallback",
-	"image": "TplYlq_image",
-	"root": "TplYlq_root"
+	"fallback": "qCmyuq_fallback",
+	"image": "qCmyuq_image",
+	"root": "qCmyuq_root"
 };
 //#endregion
 export { Avatar_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .aGjOha_root {
+  .NXa69G_root {
     justify-content: center;
     align-items: center;
     gap: var(--badge-gap, .375rem);
@@ -29,6 +29,34 @@
     display: inline-flex;
     overflow: hidden;
 
+    &:is(a, button, [role="button"]) {
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: var(--border-width-md) solid var(--color-ring);
+        outline-offset: var(--spacing-1);
+      }
+
+      &[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);
@@ -46,17 +74,32 @@
       color: var(--badge-color, var(--color-primary-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: .15em;
+      border-color: #0000;
+      padding-inline: 0;
+      text-decoration-thickness: from-font;
+      overflow: visible;
+    }
   }
 
-  .aGjOha_dot {
+  .NXa69G_dot {
     width: var(--badge-dot-size, .375rem);
     height: var(--badge-dot-size, .375rem);
     background-color: currentColor;

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/badge/Badge.module.js

@@ -1,8 +1,8 @@
 import './Badge.css';
 //#region src/components/badge/Badge.module.css
 var Badge_module_default = {
-	"dot": "aGjOha_dot",
-	"root": "aGjOha_root"
+	"dot": "NXa69G_dot",
+	"root": "NXa69G_root"
 };
 //#endregion
 export { Badge_module_default as default };

package/dist/components/bleed/Bleed.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Nez5aa_root {
+  .m38JbW_root {
     box-sizing: border-box;
     margin: 0;
 

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/bleed/Bleed.module.js

@@ -1,5 +1,5 @@
 import './Bleed.css';
 //#region src/components/bleed/Bleed.module.css
-var Bleed_module_default = { "root": "Nez5aa_root" };
+var Bleed_module_default = { "root": "m38JbW_root" };
 //#endregion
 export { Bleed_module_default as default };

package/dist/components/breadcrumbs/Breadcrumbs.css

@@ -1,12 +1,12 @@
 @layer ui.components {
-  .ubtGFa_root[data-scope="breadcrumbs"][data-part="root"] {
+  .WoRWWa_root[data-scope="breadcrumbs"][data-part="root"] {
     max-width: var(--breadcrumbs-max-width, 100%);
     color: var(--breadcrumbs-color, var(--color-muted-foreground));
     font-size: var(--breadcrumbs-font-size, var(--text-sm));
     line-height: var(--breadcrumbs-line-height, var(--line-height-text-sm));
   }
 
-  .ubtGFa_list[data-scope="breadcrumbs"][data-part="list"] {
+  .WoRWWa_list[data-scope="breadcrumbs"][data-part="list"] {
     align-items: center;
     gap: var(--breadcrumbs-gap, var(--spacing-1));
     white-space: nowrap;
@@ -16,20 +16,20 @@
     list-style: none;
     display: flex;
 
-    & > .ubtGFa_item:last-child {
+    & > .WoRWWa_item:last-child {
       max-width: var(--breadcrumbs-item-max-width, 16rem);
       flex: auto;
     }
   }
 
-  .ubtGFa_item[data-scope="breadcrumbs"][data-part="item"] {
-    flex: none;
+  .WoRWWa_item[data-scope="breadcrumbs"][data-part="item"] {
+    flex: 0 auto;
     align-items: center;
     min-width: 0;
     display: inline-flex;
   }
 
-  .ubtGFa_link[data-scope="breadcrumbs"][data-part="link"], .ubtGFa_page[data-scope="breadcrumbs"][data-part="page"] {
+  .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);
@@ -37,12 +37,12 @@
     display: block;
   }
 
-  .ubtGFa_link[data-scope="breadcrumbs"][data-part="link"], .ubtGFa_page[data-scope="breadcrumbs"][data-part="page"], .ubtGFa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
+  .WoRWWa_link[data-scope="breadcrumbs"][data-part="link"], .WoRWWa_page[data-scope="breadcrumbs"][data-part="page"], .WoRWWa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  .ubtGFa_link[data-scope="breadcrumbs"][data-part="link"] {
+  .WoRWWa_link[data-scope="breadcrumbs"][data-part="link"] {
     color: var(--breadcrumbs-link-color, var(--color-muted-foreground));
     text-decoration: var(--breadcrumbs-link-text-decoration, none);
     text-underline-offset: var(--breadcrumbs-link-underline-offset, .2em);
@@ -63,12 +63,12 @@
     }
   }
 
-  .ubtGFa_page[data-scope="breadcrumbs"][data-part="page"] {
+  .WoRWWa_page[data-scope="breadcrumbs"][data-part="page"] {
     color: var(--breadcrumbs-page-color, var(--color-foreground));
     font-weight: var(--breadcrumbs-page-font-weight, var(--weight-medium));
   }
 
-  .ubtGFa_separator[data-scope="breadcrumbs"][data-part="separator"] {
+  .WoRWWa_separator[data-scope="breadcrumbs"][data-part="separator"] {
     color: var(--breadcrumbs-separator-color, var(--color-muted-foreground));
     font-size: var(--breadcrumbs-separator-font-size, .875em);
     user-select: none;
@@ -77,7 +77,13 @@
     display: inline-flex;
   }
 
-  .ubtGFa_ellipsis[data-scope="breadcrumbs"][data-part="ellipsis"] {
+  .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);
     padding-inline: var(--breadcrumbs-item-padding-x, .25rem);

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

@@ -1,13 +1,14 @@
 import './Breadcrumbs.css';
 //#region src/components/breadcrumbs/Breadcrumbs.module.css
 var Breadcrumbs_module_default = {
-	"ellipsis": "ubtGFa_ellipsis",
-	"item": "ubtGFa_item",
-	"link": "ubtGFa_link",
-	"list": "ubtGFa_list",
-	"page": "ubtGFa_page",
-	"root": "ubtGFa_root",
-	"separator": "ubtGFa_separator"
+	"ellipsis": "WoRWWa_ellipsis",
+	"item": "WoRWWa_item",
+	"link": "WoRWWa_link",
+	"list": "WoRWWa_list",
+	"page": "WoRWWa_page",
+	"root": "WoRWWa_root",
+	"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 };