@moduix/react 2.2.4 → 2.3.0

package/README.md

@@ -1,4 +1,4 @@
-![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/apps/docs/docs/public/banner.png)
+![moduix banner](https://raw.githubusercontent.com/Blinks44/moduix/main/website/docs/public/banner.png)
 
 [![npm](https://img.shields.io/npm/v/@moduix/react?logo=npm&label=npm)](https://www.npmjs.com/package/@moduix/react)
 [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE.md)

package/dist/components/accordion/Accordion_module.css

@@ -95,7 +95,7 @@
     font: inherit;
     font-size: var(--moduix-accordion-trigger-font-size, var(--moduix-text-md));
     line-height: var(--moduix-accordion-trigger-line-height, var(--moduix-line-height-text-md));
-    text-align: left;
+    text-align: start;
     -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
@@ -199,5 +199,16 @@
     padding: var(--moduix-accordion-item-body-padding, var(--moduix-spacing-3));
     display: grid;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .itemTrigger-g0LwOA, .itemIndicator-oa6fbh {
+      transition: none;
+    }
+
+    .itemContent-Qc_5wf[data-state][data-orientation] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
 }
 

package/dist/components/alert/Alert.d.ts

@@ -1,4 +1,4 @@
-type AlertStatus = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+type AlertStatus = 'info' | 'success' | 'warning' | 'error';
 declare const Alert: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     status?: AlertStatus;
 } & import("react").RefAttributes<HTMLDivElement>> & {

package/dist/components/alert/Alert.js

@@ -4,7 +4,7 @@ import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Alert_module from "./Alert.module.js";
-const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className, role, status = 'neutral', ...props }, ref) {
+const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className, role, status = 'info', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         role: role ?? ('error' === status ? 'alert' : 'status'),

package/dist/components/alert/Alert_module.css

@@ -5,14 +5,18 @@
     row-gap: var(--moduix-alert-content-gap, var(--moduix-spacing-1));
     column-gap: var(--moduix-alert-gap, var(--moduix-spacing-3));
     border: var(--moduix-alert-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-alert-border-color, var(--moduix-alert-border-color-default, var(--moduix-color-border)));
+      var(--moduix-alert-border-color, var(--_alert-border-color-default, var(--moduix-color-border)));
     border-radius: var(--moduix-alert-radius, var(--moduix-radius-lg));
     width: 100%;
     min-width: 0;
     padding: var(--moduix-alert-padding, var(--moduix-spacing-3));
-    background-color: var(--moduix-alert-bg, var(--moduix-alert-bg-default, var(--moduix-color-card)));
-    color: var(--moduix-alert-color, var(--moduix-alert-color-default, var(--moduix-color-card-foreground)));
+    background-color: var(--moduix-alert-bg, var(--_alert-bg-default, var(--moduix-color-card)));
+    color: var(--moduix-alert-color, var(--_alert-color-default, var(--moduix-color-card-foreground)));
     box-shadow: var(--moduix-alert-shadow, none);
+    --_alert-bg-default: var(--moduix-alert-info-bg, var(--moduix-color-card));
+    --_alert-border-color-default: var(--moduix-alert-info-border-color, var(--moduix-color-border));
+    --_alert-color-default: var(--moduix-alert-info-color, var(--moduix-color-card-foreground));
+    --_alert-indicator-color-default: var(--moduix-alert-info-indicator-color, var(--moduix-color-muted-foreground));
     grid-template-columns: auto minmax(0, 1fr);
     display: grid;
   }
@@ -21,55 +25,25 @@
     grid-column: 2;
   }
 
-  .root-QHB4Xj[data-status="neutral"] {
-    --moduix-alert-bg-default: var(--moduix-color-card);
-    --moduix-alert-border-color-default: var(--moduix-color-border);
-    --moduix-alert-color-default: var(--moduix-color-card-foreground);
-    --moduix-alert-indicator-color-default: var(--moduix-color-muted-foreground);
-  }
-
-  .root-QHB4Xj[data-status="info"] {
-    --moduix-alert-bg-default: color-mix(in oklab,
-        var(--moduix-color-primary) 4%,
-        var(--moduix-color-background));
-    --moduix-alert-border-color-default: color-mix(in oklab,
-        var(--moduix-color-primary) 32%,
-        transparent);
-    --moduix-alert-color-default: var(--moduix-color-foreground);
-    --moduix-alert-indicator-color-default: var(--moduix-color-primary);
-  }
-
   .root-QHB4Xj[data-status="success"] {
-    --moduix-alert-bg-default: color-mix(in oklab,
-        var(--moduix-color-success) 10%,
-        var(--moduix-color-background));
-    --moduix-alert-border-color-default: color-mix(in oklab,
-        var(--moduix-color-success) 34%,
-        transparent);
-    --moduix-alert-color-default: var(--moduix-color-foreground);
-    --moduix-alert-indicator-color-default: var(--moduix-color-success);
+    --_alert-bg-default: var(--moduix-alert-success-bg, color-mix(in oklab, var(--moduix-color-success) 10%, var(--moduix-color-background)));
+    --_alert-border-color-default: var(--moduix-alert-success-border-color, color-mix(in oklab, var(--moduix-color-success) 34%, transparent));
+    --_alert-color-default: var(--moduix-alert-success-color, var(--moduix-color-foreground));
+    --_alert-indicator-color-default: var(--moduix-alert-success-indicator-color, var(--moduix-color-success));
   }
 
   .root-QHB4Xj[data-status="warning"] {
-    --moduix-alert-bg-default: color-mix(in oklab,
-        var(--moduix-color-warning) 13%,
-        var(--moduix-color-background));
-    --moduix-alert-border-color-default: color-mix(in oklab,
-        var(--moduix-color-warning) 38%,
-        transparent);
-    --moduix-alert-color-default: var(--moduix-color-foreground);
-    --moduix-alert-indicator-color-default: var(--moduix-color-warning);
+    --_alert-bg-default: var(--moduix-alert-warning-bg, color-mix(in oklab, var(--moduix-color-warning) 13%, var(--moduix-color-background)));
+    --_alert-border-color-default: var(--moduix-alert-warning-border-color, color-mix(in oklab, var(--moduix-color-warning) 38%, transparent));
+    --_alert-color-default: var(--moduix-alert-warning-color, var(--moduix-color-foreground));
+    --_alert-indicator-color-default: var(--moduix-alert-warning-indicator-color, var(--moduix-color-warning));
   }
 
   .root-QHB4Xj[data-status="error"] {
-    --moduix-alert-bg-default: color-mix(in oklab,
-        var(--moduix-color-destructive) 9%,
-        var(--moduix-color-background));
-    --moduix-alert-border-color-default: color-mix(in oklab,
-        var(--moduix-color-destructive) 35%,
-        transparent);
-    --moduix-alert-color-default: var(--moduix-color-foreground);
-    --moduix-alert-indicator-color-default: var(--moduix-color-destructive);
+    --_alert-bg-default: var(--moduix-alert-error-bg, color-mix(in oklab, var(--moduix-color-destructive) 9%, var(--moduix-color-background)));
+    --_alert-border-color-default: var(--moduix-alert-error-border-color, color-mix(in oklab, var(--moduix-color-destructive) 35%, transparent));
+    --_alert-color-default: var(--moduix-alert-error-color, var(--moduix-color-foreground));
+    --_alert-indicator-color-default: var(--moduix-alert-error-indicator-color, var(--moduix-color-destructive));
   }
 
   .root-QHB4Xj:not(:has( > [data-part="indicator"])) {
@@ -83,7 +57,7 @@
   .indicator-FFj13M {
     width: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
     height: var(--moduix-alert-indicator-size, var(--moduix-spacing-4));
-    color: var(--moduix-alert-indicator-color, var(--moduix-alert-indicator-color-default, currentColor));
+    color: var(--moduix-alert-indicator-color, var(--_alert-indicator-color-default, currentColor));
     justify-content: center;
     align-items: center;
     margin-block-start: var(--moduix-alert-indicator-offset, var(--moduix-spacing-0-5));
@@ -105,7 +79,7 @@
 
   .title-O9DOvg {
     min-width: 0;
-    color: var(--moduix-alert-title-color, var(--moduix-alert-color, var(--moduix-alert-color-default)));
+    color: var(--moduix-alert-title-color, var(--moduix-alert-color, var(--_alert-color-default)));
     font-size: var(--moduix-alert-title-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-alert-title-font-weight, var(--moduix-weight-semibold));
     line-height: var(--moduix-alert-title-line-height, var(--moduix-line-height-text-sm));
@@ -122,7 +96,7 @@
   }
 
   .description-ph4U3F > :first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .description-ph4U3F > :last-child {

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

@@ -9,9 +9,15 @@ type AngleSliderDialProps = Omit<ComponentProps<typeof AngleSliderPrimitive.Cont
     thumbClassName?: string;
 };
 declare function AngleSliderDial({ children, thumbClassName, ...props }: AngleSliderDialProps): import("react").JSX.Element;
-declare const AngleSlider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    RootProvider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const AngleSlider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & {
+    form?: string;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & {
+        form?: string;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & {
+        form?: string;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Context: (props: AngleSliderPrimitive.ContextProps) => ReactNode;
     Label: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<AngleSliderPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -2,17 +2,19 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AngleSlider, useAngleSlider, useAngleSliderContext } from "@ark-ui/react/angle-slider";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
+import { Children, cloneElement, forwardRef, useEffect, useRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import AngleSlider_module from "./AngleSlider.module.js";
-const AngleSlider_AngleSliderRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+const AngleSlider_AngleSliderRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, defaultValue, form, value, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Root, {
         ref: ref,
         "data-slot": "angle-slider-root",
         className: clsx(AngleSlider_module.root, normalizeClassName(className)),
         asChild: asChild,
+        defaultValue: defaultValue,
+        value: value,
         ...props,
-        children: withHiddenInput(children, asChild)
+        children: withHiddenInput(children, asChild, form, void 0 === value ? defaultValue ?? 0 : void 0)
     });
 });
 const AngleSlider_AngleSliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -23,19 +25,41 @@ const AngleSlider_AngleSliderLabel = /*#__PURE__*/ forwardRef(function({ classNa
         ...props
     });
 });
-const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, form, value, ...props }, ref) {
+    const initialValue = useRef(value.value);
     return /*#__PURE__*/ jsx(AngleSlider.RootProvider, {
         ref: ref,
         "data-slot": "angle-slider-root-provider",
         className: clsx(AngleSlider_module.root, normalizeClassName(className)),
         asChild: asChild,
+        value: value,
         ...props,
-        children: withHiddenInput(children, asChild)
+        children: withHiddenInput(children, asChild, form, initialValue.current)
     });
 });
-function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(AngleSlider.HiddenInput, {
-        "data-slot": "angle-slider-hidden-input"
+function AngleSliderHiddenInput({ form, resetValue }) {
+    const angleSlider = useAngleSliderContext();
+    const inputRef = useRef(null);
+    useEffect(()=>{
+        const formElement = inputRef.current?.form;
+        if (!formElement || void 0 === resetValue) return;
+        const handleReset = ()=>angleSlider.setValue(resetValue);
+        formElement.addEventListener('reset', handleReset);
+        return ()=>formElement.removeEventListener('reset', handleReset);
+    }, [
+        angleSlider,
+        resetValue
+    ]);
+    return /*#__PURE__*/ jsx(AngleSlider.HiddenInput, {
+        ref: inputRef,
+        "data-slot": "angle-slider-hidden-input",
+        form: form
+    });
+}
+function withHiddenInput(children, asChild, form, resetValue) {
+    const hiddenInput = /*#__PURE__*/ jsx(AngleSliderHiddenInput, {
+        form: form,
+        resetValue: resetValue
     });
     if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -81,9 +105,9 @@ const AngleSlider_AngleSliderMarker = /*#__PURE__*/ forwardRef(function({ classN
 function AngleSliderMarks({ values, ...props }) {
     return /*#__PURE__*/ jsx(AngleSlider_AngleSliderMarkerGroup, {
         ...props,
-        children: values.map((value)=>/*#__PURE__*/ jsx(AngleSlider_AngleSliderMarker, {
+        children: values.map((value, index)=>/*#__PURE__*/ jsx(AngleSlider_AngleSliderMarker, {
                 value: value
-            }, value))
+            }, `${value}-${index}`))
     });
 }
 function AngleSliderDial({ children, thumbClassName, ...props }) {

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

@@ -28,7 +28,7 @@
     width: var(--moduix-angle-slider-size, 8rem);
     aspect-ratio: 1;
     border-radius: var(--moduix-angle-slider-radius, var(--moduix-radius-full));
-    background: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
+    background-color: var(--moduix-angle-slider-track-bg, var(--moduix-color-muted));
     min-width: 0;
     box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
         var(--_angle-slider-track-border-color),
@@ -36,6 +36,8 @@
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
+    transition: background-color
+      var(--moduix-angle-slider-transition, var(--moduix-transition-default));
     outline: 0;
     justify-content: center;
     align-items: center;
@@ -43,6 +45,16 @@
     position: relative;
   }
 
+  @media (hover: hover) {
+    .control-TKuxcQ:not([data-disabled], [data-readonly]):hover {
+      background-color: var(--moduix-angle-slider-track-bg-hover, color-mix(in oklab, var(--moduix-color-muted) 92%, var(--moduix-color-foreground)));
+    }
+  }
+
+  .control-TKuxcQ:not([data-disabled], [data-readonly]):active {
+    background-color: var(--moduix-angle-slider-track-bg-active, color-mix(in oklab, var(--moduix-color-muted) 84%, var(--moduix-color-foreground)));
+  }
+
   .control-TKuxcQ:after {
     z-index: 1;
     inset: var(--moduix-angle-slider-ring-thickness, .875rem);
@@ -74,8 +86,8 @@
   }
 
   .control-TKuxcQ[data-invalid] {
-    --_angle-slider-control-border-color: var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive));
-    --_angle-slider-track-border-color: var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive));
+    --_angle-slider-control-border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
+    --_angle-slider-track-border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
   }
 
   .control-TKuxcQ:is([data-disabled], [data-readonly]) {
@@ -139,12 +151,13 @@
   }
 
   .thumb-BSrcel[data-invalid]:before {
-    border-color: var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive));
+    border-color: var(--moduix-angle-slider-invalid-border-color, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
+    background: var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)));
   }
 
   .thumb-BSrcel[data-invalid]:after {
     background: linear-gradient(to bottom,
-        var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive)),
+        var(--moduix-angle-slider-invalid-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive))),
         transparent);
   }
 
@@ -191,5 +204,11 @@
     line-height: var(--moduix-angle-slider-value-text-line-height, var(--moduix-line-height-text-sm));
     text-align: center;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control-TKuxcQ, .thumb-BSrcel:before {
+      transition: none;
+    }
+  }
 }
 

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

@@ -7,6 +7,7 @@ import AspectRatio_module from "./AspectRatio.module.js";
 const AspectRatio_AspectRatioRoot = /*#__PURE__*/ forwardRef(function({ ratio, className, style, ...props }, ref) {
     if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError('AspectRatio `ratio` must be a finite number greater than zero.');
     return /*#__PURE__*/ jsx(ark.div, {
+        ...props,
         ref: ref,
         "data-scope": "aspect-ratio",
         "data-part": "root",
@@ -14,9 +15,8 @@ const AspectRatio_AspectRatioRoot = /*#__PURE__*/ forwardRef(function({ ratio, c
         className: clsx(AspectRatio_module.root, normalizeClassName(className)),
         style: {
             ...style,
-            '--aspect-ratio-value': ratio
-        },
-        ...props
+            '--_aspect-ratio-value': ratio
+        }
     });
 });
 const AspectRatio = Object.assign(AspectRatio_AspectRatioRoot, {

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

@@ -1,17 +1,24 @@
 @layer moduix.components {
   .root-_8OMdK {
-    --aspect-ratio-value: 1;
+    --_aspect-ratio-value: 1;
+    box-sizing: border-box;
     width: 100%;
-    aspect-ratio: var(--aspect-ratio-value);
+    aspect-ratio: var(--_aspect-ratio-value);
     border-radius: var(--moduix-aspect-ratio-radius, var(--moduix-radius-md));
+    display: block;
     position: relative;
     overflow: hidden;
   }
 
   .root-_8OMdK > :where(img, video, iframe, canvas, svg) {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     display: block;
   }
+
+  .root-_8OMdK > iframe {
+    border: 0;
+  }
 }
 

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

@@ -1,5 +1,5 @@
 import { Avatar as AvatarPrimitive, useAvatar, useAvatarContext } from '@ark-ui/react/avatar';
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AvatarRootProps = ComponentProps<typeof AvatarPrimitive.Root> & {
     size?: AvatarSize;
@@ -13,7 +13,7 @@ type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback> & {
 declare const Avatar: 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>>;
-    Context: (props: AvatarPrimitive.ContextProps) => import("react").ReactNode;
+    Context: (props: AvatarPrimitive.ContextProps) => ReactNode;
     Image: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.ImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
     Fallback: import("react").ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };

package/dist/components/avatar/Avatar.js

@@ -1,14 +1,50 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Avatar_module from "./Avatar.module.js";
+const graphemeSegmenter = new Intl.Segmenter(void 0, {
+    granularity: 'grapheme'
+});
+const getFirstGrapheme = (value)=>{
+    const [firstGrapheme] = graphemeSegmenter.segment(value);
+    return firstGrapheme?.segment ?? '';
+};
 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] ?? '';
+    return firstName && lastName ? `${getFirstGrapheme(firstName)}${getFirstGrapheme(lastName)}` : getFirstGrapheme(firstName);
+};
+function AvatarFallbackIcon() {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        "data-slot": "avatar-fallback-icon",
+        className: Avatar_module.fallbackIcon,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: "12",
+                cy: "8",
+                r: "5"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M20 21a8 8 0 0 0-16 0"
+            })
+        ]
+    });
+}
+const getFallbackContent = (children, name)=>{
+    if (null != children) return children;
+    const initials = name ? getInitials(name) : '';
+    return initials || /*#__PURE__*/ jsx(AvatarFallbackIcon, {});
 };
 const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.Root, {
@@ -42,7 +78,7 @@ const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, clas
         "data-slot": "avatar-fallback",
         className: clsx(Avatar_module.fallback, normalizeClassName(className)),
         ...props,
-        children: children ?? (name ? getInitials(name) : void 0)
+        children: getFallbackContent(children, name)
     });
 });
 const Avatar_Avatar = Object.assign(Avatar_AvatarRoot, {

package/dist/components/avatar/Avatar.module.js

@@ -2,6 +2,7 @@ import "./Avatar_module.css";
 const Avatar_module = {
     root: "root-qlUdBE",
     image: "image-eMihfZ",
-    fallback: "fallback-UO951k"
+    fallback: "fallback-UO951k",
+    fallbackIcon: "fallbackIcon-OJh0sm"
 };
 export default Avatar_module;

package/dist/components/avatar/Avatar_module.css

@@ -58,20 +58,27 @@
   }
 
   .fallback-UO951k {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     padding: var(--moduix-avatar-fallback-padding, 0);
     background-color: var(--moduix-avatar-fallback-bg, var(--moduix-avatar-bg, var(--moduix-color-muted)));
     color: var(--moduix-avatar-fallback-color, inherit);
     border-radius: inherit;
+    line-height: inherit;
     justify-content: center;
     align-items: center;
-    line-height: 1;
     display: inline-flex;
   }
 
   .fallback-UO951k[data-state="hidden"] {
     display: none;
   }
+
+  .fallbackIcon-OJh0sm {
+    width: var(--moduix-avatar-fallback-icon-size, 55%);
+    height: var(--moduix-avatar-fallback-icon-size, 55%);
+    flex-shrink: 0;
+  }
 }
 

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

@@ -4,6 +4,7 @@ declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("reac
     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" | "link";
     } & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & 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>>;
 };
 export { Badge };

package/dist/components/badge/Badge.js

@@ -4,18 +4,27 @@ import { clsx } from "clsx";
 import { Children, forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Badge_module from "./Badge.module.js";
+const Badge_BadgeLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        ...props,
+        "data-scope": "badge",
+        "data-part": "label",
+        "data-slot": "badge-label",
+        className: clsx(Badge_module.label, normalizeClassName(className))
+    });
+});
 const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, variant = 'default', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
+        ...props,
         "data-scope": "badge",
         "data-part": "root",
         "data-slot": "badge-root",
         "data-variant": variant,
         className: clsx(Badge_module.root, normalizeClassName(className)),
         asChild: asChild,
-        ...props,
-        children: asChild ? children : Children.map(children, (child)=>'string' == typeof child || 'number' == typeof child ? /*#__PURE__*/ jsx("span", {
-                className: Badge_module.label,
+        children: asChild ? children : Children.map(children, (child)=>'string' == typeof child || 'number' == typeof child ? /*#__PURE__*/ jsx(Badge_BadgeLabel, {
                 children: child
             }) : child)
     });
@@ -23,16 +32,17 @@ const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, c
 const Badge_BadgeDot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
+        ...props,
         "data-scope": "badge",
         "data-part": "dot",
         "data-slot": "badge-dot",
         "aria-hidden": "true",
-        className: clsx(Badge_module.dot, normalizeClassName(className)),
-        ...props
+        className: clsx(Badge_module.dot, normalizeClassName(className))
     });
 });
 const Badge = Object.assign(Badge_BadgeRoot, {
     Root: Badge_BadgeRoot,
+    Label: Badge_BadgeLabel,
     Dot: Badge_BadgeDot
 });
 export { Badge };