@moduix/react 2.2.0 → 2.2.5

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

@@ -0,0 +1,214 @@
+@layer moduix.components {
+  .root-vVzCs9 {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--moduix-angle-slider-gap, var(--moduix-spacing-3));
+    min-width: 0;
+    color: var(--moduix-angle-slider-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .root-vVzCs9[data-disabled] {
+    opacity: var(--moduix-angle-slider-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-VII5tE {
+    color: var(--moduix-angle-slider-label-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-angle-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-angle-slider-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-angle-slider-label-line-height, var(--moduix-line-height-text-sm));
+    text-align: center;
+  }
+
+  .control-TKuxcQ {
+    --_angle-slider-control-border-color: var(--moduix-angle-slider-control-border-color, var(--moduix-color-border));
+    --_angle-slider-track-border-color: var(--moduix-angle-slider-track-border-color, var(--moduix-color-border));
+    box-sizing: border-box;
+    width: var(--moduix-angle-slider-size, 8rem);
+    aspect-ratio: 1;
+    border-radius: var(--moduix-angle-slider-radius, var(--moduix-radius-full));
+    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),
+      var(--moduix-angle-slider-shadow, none);
+    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;
+    display: flex;
+    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);
+    border-radius: inherit;
+    background: var(--moduix-angle-slider-control-bg, var(--moduix-color-background));
+    box-shadow: inset 0 0 0
+        var(--moduix-angle-slider-control-border-width, var(--moduix-border-width-sm))
+        var(--_angle-slider-control-border-color);
+    content: "";
+    position: absolute;
+  }
+
+  .control-TKuxcQ:before {
+    z-index: 1;
+    width: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
+    height: var(--moduix-angle-slider-center-dot-size, var(--moduix-spacing-1-5));
+    border-radius: inherit;
+    background: var(--moduix-angle-slider-center-dot-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    content: "";
+    position: absolute;
+  }
+
+  .control-TKuxcQ:has(.thumb-BSrcel:focus-visible) {
+    box-shadow: inset 0 0 0 var(--moduix-angle-slider-track-border-width, var(--moduix-border-width-sm))
+          var(--_angle-slider-track-border-color),
+        0 0 0 var(--moduix-angle-slider-focus-ring-width, .1875rem)
+          var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-angle-slider-shadow, none);
+  }
+
+  .control-TKuxcQ[data-invalid] {
+    --_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]) {
+    cursor: default;
+  }
+
+  .thumb-BSrcel {
+    top: 0;
+    bottom: 0;
+    left: calc(50% - var(--moduix-angle-slider-thumb-line-width, .1875rem) / 2);
+    z-index: 2;
+    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
+    outline: 0;
+    position: absolute;
+  }
+
+  .thumb-BSrcel:before {
+    top: var(--moduix-angle-slider-ring-thickness, .875rem);
+    box-sizing: border-box;
+    width: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
+    height: var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4));
+    border: var(--moduix-angle-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
+        var(--moduix-angle-slider-thumb-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-angle-slider-thumb-radius, var(--moduix-radius-full));
+    background: var(--moduix-angle-slider-thumb-bg, var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)));
+    box-shadow: var(--moduix-angle-slider-thumb-shadow, var(--moduix-shadow-sm));
+    transition: border-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
+        box-shadow var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
+        background-color var(--moduix-angle-slider-transition, var(--moduix-transition-default)),
+        transform var(--moduix-angle-slider-transition, var(--moduix-transition-default));
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .thumb-BSrcel:after {
+    top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) +
+          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
+    width: var(--moduix-angle-slider-thumb-line-width, .1875rem);
+    height: calc(50% - var(--moduix-angle-slider-ring-thickness, .875rem) -
+          var(--moduix-angle-slider-thumb-size, var(--moduix-spacing-4)) - var(--moduix-spacing-1-5));
+    border-radius: var(--moduix-radius-full);
+    background: linear-gradient(to bottom,
+        var(--moduix-angle-slider-indicator-bg, var(--moduix-color-primary)),
+        transparent);
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .thumb-BSrcel:focus-visible:before {
+    border-color: var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-border-width-sm)
+        var(--moduix-angle-slider-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .thumb-BSrcel:active:not([data-disabled], [data-readonly]):before {
+    transform: translateX(-50%) scale(1.08);
+  }
+
+  .thumb-BSrcel[data-invalid]:before {
+    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-indicator-bg, var(--moduix-angle-slider-invalid-color, var(--moduix-color-destructive))),
+        transparent);
+  }
+
+  .thumb-BSrcel[data-disabled] {
+    pointer-events: none;
+  }
+
+  .markerGroup-Ga67fO {
+    z-index: 1;
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .marker-kWcrOw {
+    position: absolute;
+    inset: 0;
+  }
+
+  .marker-kWcrOw:before {
+    top: calc(var(--moduix-angle-slider-ring-thickness, .875rem) + .125rem);
+    width: var(--moduix-angle-slider-marker-width, .125rem);
+    height: var(--moduix-angle-slider-marker-height, .625rem);
+    border-radius: var(--moduix-radius-full);
+    background: var(--moduix-angle-slider-marker-color, var(--moduix-color-muted-foreground));
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .marker-kWcrOw[data-state="under-value"]:before {
+    background: var(--moduix-angle-slider-marker-active-color, var(--moduix-color-primary));
+  }
+
+  .marker-kWcrOw[data-state="at-value"]:before {
+    background: var(--moduix-angle-slider-marker-current-color, var(--moduix-color-foreground));
+  }
+
+  .valueText-QUG00u {
+    color: var(--moduix-angle-slider-value-text-color, var(--moduix-angle-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-angle-slider-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-angle-slider-value-text-font-weight, var(--moduix-weight-medium));
+    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/angle-slider/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from "./AngleSlider.js";

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -1,10 +1,8 @@
-//#region src/components/aspect-ratio/AspectRatio.d.ts
 declare const AspectRatio: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  ratio: number;
-} & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     ratio: number;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        ratio: number;
+    } & import("react").RefAttributes<HTMLDivElement>>;
 };
-//#endregion
-export { AspectRatio };
+export { AspectRatio };

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

@@ -1,24 +1,25 @@
-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, {
-		ref,
-		"data-scope": "aspect-ratio",
-		"data-part": "root",
-		"data-slot": "aspect-ratio-root",
-		className: clsx(AspectRatio_module_default.root, normalizeClassName(className)),
-		style: {
-			"--aspect-ratio-value": ratio,
-			...style
-		},
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+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",
+        "data-slot": "aspect-ratio-root",
+        className: clsx(AspectRatio_module.root, normalizeClassName(className)),
+        style: {
+            ...style,
+            '--_aspect-ratio-value': ratio
+        }
+    });
+});
+const AspectRatio = Object.assign(AspectRatio_AspectRatioRoot, {
+    Root: AspectRatio_AspectRatioRoot
 });
-const AspectRatio = Object.assign(AspectRatioRoot, { Root: AspectRatioRoot });
-//#endregion
 export { AspectRatio };

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": "iOVgxW_root" };
-//#endregion
-export { AspectRatio_module_default as default };
+import "./AspectRatio_module.css";
+const AspectRatio_module = {
+    root: "root-_8OMdK"
+};
+export default AspectRatio_module;

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

@@ -0,0 +1,24 @@
+@layer moduix.components {
+  .root-_8OMdK {
+    --_aspect-ratio-value: 1;
+    box-sizing: border-box;
+    width: 100%;
+    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/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export { AspectRatio } from './AspectRatio.js';

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

@@ -0,0 +1 @@
+export { AspectRatio } from "./AspectRatio.js";

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

@@ -1,22 +1,20 @@
-import { ComponentProps } from "react";
-import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
-
-//#region src/components/avatar/Avatar.d.ts
+import { Avatar as AvatarPrimitive, useAvatar, useAvatarContext } from '@ark-ui/react/avatar';
+import { type ComponentProps, type ReactNode } from 'react';
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type AvatarRootProps = ComponentProps<typeof Avatar.Root> & {
-  size?: AvatarSize;
+type AvatarRootProps = ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: AvatarSize;
 };
-type AvatarRootProviderProps = ComponentProps<typeof Avatar.RootProvider> & {
-  size?: AvatarSize;
+type AvatarRootProviderProps = ComponentProps<typeof AvatarPrimitive.RootProvider> & {
+    size?: AvatarSize;
 };
-type AvatarFallbackProps = ComponentProps<typeof Avatar.Fallback> & {
-  name?: string;
+type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.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<AvatarFallbackProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+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) => 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>>;
 };
-//#endregion
-export { Avatar$1 as Avatar, useAvatar, useAvatarContext };
+export { Avatar, useAvatar, useAvatarContext };

package/dist/components/avatar/Avatar.js

@@ -1,56 +1,91 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Avatar_module_default from "./Avatar.module.js";
+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 { 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] ?? "";
+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 ? `${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 AvatarRoot = forwardRef(function AvatarRoot({ className, size, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.Root, {
-		ref,
-		"data-slot": "avatar-root",
-		"data-size": size,
-		className: clsx(Avatar_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Root, {
+        ref: ref,
+        "data-slot": "avatar-root",
+        "data-size": size,
+        className: clsx(Avatar_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const AvatarRootProvider = forwardRef(function AvatarRootProvider({ className, size, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.RootProvider, {
-		ref,
-		"data-slot": "avatar-root-provider",
-		"data-size": size,
-		className: clsx(Avatar_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.RootProvider, {
+        ref: ref,
+        "data-slot": "avatar-root-provider",
+        "data-size": size,
+        className: clsx(Avatar_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const AvatarImage = forwardRef(function AvatarImage({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.Image, {
-		ref,
-		"data-slot": "avatar-image",
-		className: clsx(Avatar_module_default.image, normalizeClassName(className)),
-		...props
-	});
+const Avatar_AvatarImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Image, {
+        ref: ref,
+        "data-slot": "avatar-image",
+        className: clsx(Avatar_module.image, normalizeClassName(className)),
+        ...props
+    });
 });
-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,
-		children: children ?? (name ? getInitials(name) : void 0)
-	});
+const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, className, name, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Fallback, {
+        ref: ref,
+        "data-slot": "avatar-fallback",
+        className: clsx(Avatar_module.fallback, normalizeClassName(className)),
+        ...props,
+        children: getFallbackContent(children, name)
+    });
 });
-const Avatar$1 = Object.assign(AvatarRoot, {
-	Root: AvatarRoot,
-	RootProvider: AvatarRootProvider,
-	Image: AvatarImage,
-	Fallback: AvatarFallback
+const Avatar_Avatar = Object.assign(Avatar_AvatarRoot, {
+    Root: Avatar_AvatarRoot,
+    RootProvider: Avatar_AvatarRootProvider,
+    Context: Avatar.Context,
+    Image: Avatar_AvatarImage,
+    Fallback: Avatar_AvatarFallback
 });
-//#endregion
-export { Avatar$1 as Avatar, useAvatar, useAvatarContext };
+export { Avatar_Avatar as Avatar, useAvatar, useAvatarContext };

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

@@ -1,9 +1,8 @@
-import './Avatar.css';
-//#region src/components/avatar/Avatar.module.css
-var Avatar_module_default = {
-	"fallback": "qCmyuq_fallback",
-	"image": "qCmyuq_image",
-	"root": "qCmyuq_root"
+import "./Avatar_module.css";
+const Avatar_module = {
+    root: "root-qlUdBE",
+    image: "image-eMihfZ",
+    fallback: "fallback-UO951k",
+    fallbackIcon: "fallbackIcon-OJh0sm"
 };
-//#endregion
-export { Avatar_module_default as default };
+export default Avatar_module;

package/dist/components/avatar/{Avatar.css → Avatar_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  .qCmyuq_root {
+  .root-qlUdBE {
     box-sizing: border-box;
     width: var(--moduix-avatar-size, var(--moduix-size-md));
     height: var(--moduix-avatar-size, var(--moduix-size-md));
@@ -9,6 +9,7 @@
     font-size: var(--moduix-avatar-font-size, var(--moduix-text-md));
     font-weight: var(--moduix-avatar-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-avatar-line-height, var(--moduix-line-height-text-md));
+    -webkit-user-select: none;
     user-select: none;
     vertical-align: middle;
     flex-shrink: 0;
@@ -17,59 +18,67 @@
     display: inline-flex;
     position: relative;
     overflow: hidden;
+  }
 
-    &:where([data-size="xs"]) {
-      --moduix-avatar-size: var(--moduix-size-xs);
-      --moduix-avatar-font-size: var(--moduix-text-xs);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-xs);
-    }
+  .root-qlUdBE:where([data-size="xs"]) {
+    --moduix-avatar-size: var(--moduix-size-xs);
+    --moduix-avatar-font-size: var(--moduix-text-xs);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-xs);
+  }
 
-    &:where([data-size="sm"]) {
-      --moduix-avatar-size: var(--moduix-size-sm);
-      --moduix-avatar-font-size: var(--moduix-text-sm);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-sm);
-    }
+  .root-qlUdBE:where([data-size="sm"]) {
+    --moduix-avatar-size: var(--moduix-size-sm);
+    --moduix-avatar-font-size: var(--moduix-text-sm);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-sm);
+  }
 
-    &:where([data-size="lg"]) {
-      --moduix-avatar-size: var(--moduix-size-lg);
-      --moduix-avatar-font-size: var(--moduix-text-lg);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
-    }
+  .root-qlUdBE:where([data-size="lg"]) {
+    --moduix-avatar-size: var(--moduix-size-lg);
+    --moduix-avatar-font-size: var(--moduix-text-lg);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
+  }
 
-    &:where([data-size="xl"]) {
-      --moduix-avatar-size: var(--moduix-size-xl);
-      --moduix-avatar-font-size: var(--moduix-text-lg);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
-    }
+  .root-qlUdBE:where([data-size="xl"]) {
+    --moduix-avatar-size: var(--moduix-size-xl);
+    --moduix-avatar-font-size: var(--moduix-text-lg);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
   }
 
-  .qCmyuq_image {
+  .image-eMihfZ {
     object-fit: var(--moduix-avatar-image-object-fit, cover);
     object-position: var(--moduix-avatar-image-object-position, center);
     border-radius: inherit;
     width: 100%;
     height: 100%;
     display: block;
+  }
 
-    &[data-state="hidden"] {
-      display: none;
-    }
+  .image-eMihfZ[data-state="hidden"] {
+    display: none;
   }
 
-  .qCmyuq_fallback {
+  .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;
+  }
 
-    &[data-state="hidden"] {
-      display: none;
-    }
+  .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/avatar/index.d.ts

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

package/dist/components/avatar/index.js

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