@moduix/react 1.1.0

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

@@ -0,0 +1,14 @@
+//#region src/components/alert/Alert.d.ts
+declare const Alert: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  status?: "neutral" | "info" | "success" | "warning" | "error";
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    status?: "neutral" | "info" | "success" | "warning" | "error";
+  } & import("react").RefAttributes<HTMLDivElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Alert };

package/dist/components/alert/Alert.js

@@ -0,0 +1,69 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Alert_module_default from "./Alert.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/alert/Alert.tsx
+const AlertRoot = forwardRef(function AlertRoot({ className, role, status = "neutral", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		role: role ?? (status === "error" ? "alert" : "status"),
+		"data-scope": "alert",
+		"data-part": "root",
+		"data-slot": "alert-root",
+		"data-status": status,
+		className: clsx(Alert_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const AlertIndicator = forwardRef(function AlertIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-scope": "alert",
+		"data-part": "indicator",
+		"data-slot": "alert-indicator",
+		"aria-hidden": "true",
+		className: clsx(Alert_module_default.indicator, normalizeClassName(className)),
+		...props
+	});
+});
+const AlertContent = forwardRef(function AlertContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "alert",
+		"data-part": "content",
+		"data-slot": "alert-content",
+		className: clsx(Alert_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const AlertTitle = forwardRef(function AlertTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.h3, {
+		ref,
+		"data-scope": "alert",
+		"data-part": "title",
+		"data-slot": "alert-title",
+		className: clsx(Alert_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const AlertDescription = forwardRef(function AlertDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "alert",
+		"data-part": "description",
+		"data-slot": "alert-description",
+		className: clsx(Alert_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const Alert = Object.assign(AlertRoot, {
+	Root: AlertRoot,
+	Indicator: AlertIndicator,
+	Content: AlertContent,
+	Title: AlertTitle,
+	Description: AlertDescription
+});
+//#endregion
+export { Alert };

package/dist/components/alert/Alert.module.js

@@ -0,0 +1,11 @@
+import './Alert.css';
+//#region src/components/alert/Alert.module.css
+var Alert_module_default = {
+	"content": "EnZEzW_content",
+	"description": "EnZEzW_description",
+	"indicator": "EnZEzW_indicator",
+	"root": "EnZEzW_root",
+	"title": "EnZEzW_title"
+};
+//#endregion
+export { Alert_module_default as default };

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

@@ -0,0 +1,192 @@
+@layer ui.components {
+  .yUv4bW_root {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--angle-slider-gap, .75rem);
+    min-width: 0;
+    color: var(--angle-slider-color, var(--color-foreground));
+    flex-direction: column;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--angle-slider-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .yUv4bW_label {
+    color: var(--angle-slider-label-color, var(--angle-slider-color, var(--color-foreground)));
+    font-size: var(--angle-slider-label-font-size, var(--text-sm));
+    font-weight: var(--angle-slider-label-font-weight, var(--weight-medium));
+    line-height: var(--angle-slider-label-line-height, var(--line-height-text-sm));
+    text-align: center;
+  }
+
+  .yUv4bW_control {
+    --_angle-slider-control-border-color: var(--angle-slider-control-border-color, var(--color-border));
+    --_angle-slider-track-border-color: var(--angle-slider-track-border-color, var(--color-border));
+    box-sizing: border-box;
+    width: var(--angle-slider-size, 8rem);
+    aspect-ratio: 1;
+    border-radius: var(--angle-slider-radius, var(--radius-full));
+    background: var(--angle-slider-track-bg, var(--color-muted));
+    min-width: 0;
+    box-shadow: inset 0 0 0 var(--angle-slider-track-border-width, var(--border-width-sm))
+        var(--_angle-slider-track-border-color),
+      var(--angle-slider-shadow, none);
+    cursor: pointer;
+    user-select: none;
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    &:after {
+      z-index: 1;
+      inset: var(--angle-slider-ring-thickness, .875rem);
+      border-radius: inherit;
+      background: var(--angle-slider-control-bg, var(--color-background));
+      box-shadow: inset 0 0 0 var(--angle-slider-control-border-width, var(--border-width-sm))
+        var(--_angle-slider-control-border-color);
+      content: "";
+      position: absolute;
+    }
+
+    &:before {
+      z-index: 1;
+      width: var(--angle-slider-center-dot-size, .375rem);
+      height: var(--angle-slider-center-dot-size, .375rem);
+      border-radius: inherit;
+      background: var(--angle-slider-center-dot-color, var(--angle-slider-color, var(--color-foreground)));
+      content: "";
+      position: absolute;
+    }
+
+    &:has(.yUv4bW_thumb:focus-visible) {
+      box-shadow: inset 0 0 0 var(--angle-slider-track-border-width, var(--border-width-sm))
+          var(--_angle-slider-track-border-color),
+        0 0 0 var(--angle-slider-focus-ring-width, .1875rem)
+          var(--angle-slider-focus-ring-color, var(--color-ring)),
+        var(--angle-slider-shadow, none);
+    }
+
+    &[data-invalid] {
+      --_angle-slider-control-border-color: var(--angle-slider-invalid-color, var(--color-destructive));
+      --_angle-slider-track-border-color: var(--angle-slider-invalid-color, var(--color-destructive));
+    }
+
+    &:is([data-disabled], [data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  .yUv4bW_thumb {
+    top: 0;
+    bottom: 0;
+    left: calc(50% - var(--angle-slider-thumb-line-width, .1875rem) / 2);
+    z-index: 2;
+    width: var(--angle-slider-thumb-line-width, .1875rem);
+    outline: 0;
+    position: absolute;
+
+    &: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);
+      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));
+      background: var(--angle-slider-thumb-bg, var(--angle-slider-indicator-bg, var(--color-primary)));
+      box-shadow: var(--angle-slider-thumb-shadow, var(--shadow-sm));
+      transition: border-color var(--angle-slider-transition, var(--transition-default)),
+        box-shadow var(--angle-slider-transition, var(--transition-default)),
+        background-color var(--angle-slider-transition, var(--transition-default)),
+        transform var(--angle-slider-transition, var(--transition-default));
+      content: "";
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:after {
+      top: calc(var(--angle-slider-ring-thickness, .875rem) + var(--angle-slider-thumb-size, 1rem) +
+          .25rem);
+      width: var(--angle-slider-thumb-line-width, .1875rem);
+      height: calc(50% - var(--angle-slider-ring-thickness, .875rem) - var(--angle-slider-thumb-size, 1rem) -
+          .375rem);
+      border-radius: var(--radius-full);
+      background: linear-gradient(to bottom,
+        var(--angle-slider-indicator-bg, var(--color-primary)),
+        transparent);
+      content: "";
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:focus-visible:before {
+      border-color: var(--angle-slider-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0 var(--border-width-sm)
+        var(--angle-slider-focus-ring-color, var(--color-ring));
+    }
+
+    &:active:not([data-disabled], [data-readonly]):before {
+      transform: translateX(-50%) scale(1.08);
+    }
+
+    &[data-invalid]:before {
+      border-color: var(--angle-slider-invalid-color, var(--color-destructive));
+    }
+
+    &[data-invalid]:after {
+      background: linear-gradient(to bottom,
+        var(--angle-slider-invalid-color, var(--color-destructive)),
+        transparent);
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .yUv4bW_markerGroup {
+    z-index: 1;
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .yUv4bW_marker {
+    position: absolute;
+    inset: 0;
+
+    &:before {
+      top: calc(var(--angle-slider-ring-thickness, .875rem) + .125rem);
+      width: var(--angle-slider-marker-width, .125rem);
+      height: var(--angle-slider-marker-height, .625rem);
+      border-radius: var(--radius-full);
+      background: var(--angle-slider-marker-color, var(--color-muted-foreground));
+      content: "";
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &[data-state="under-value"]:before {
+      background: var(--angle-slider-marker-active-color, var(--color-primary));
+    }
+
+    &[data-state="at-value"]:before {
+      background: var(--angle-slider-marker-current-color, var(--color-foreground));
+    }
+  }
+
+  .yUv4bW_valueText {
+    color: var(--angle-slider-value-text-color, var(--angle-slider-color, var(--color-foreground)));
+    font-size: var(--angle-slider-value-text-font-size, var(--text-sm));
+    font-weight: var(--angle-slider-value-text-font-weight, var(--weight-medium));
+    line-height: var(--angle-slider-value-text-line-height, var(--line-height-text-sm));
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { AngleSlider } from "@ark-ui/react/angle-slider";
+
+//#region src/components/angle-slider/AngleSlider.d.ts
+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>>;
+  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>>;
+  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>>;
+};
+//#endregion
+export { AngleSlider$1 as AngleSlider };

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

@@ -0,0 +1,92 @@
+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";
+//#region src/components/angle-slider/AngleSlider.tsx
+const AngleSliderRoot = forwardRef(function AngleSliderRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.Root, {
+		ref,
+		"data-slot": "angle-slider-root",
+		className: clsx(AngleSlider_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderLabel = forwardRef(function AngleSliderLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.Label, {
+		ref,
+		"data-slot": "angle-slider-label",
+		className: clsx(AngleSlider_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderRootProvider = forwardRef(function AngleSliderRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.RootProvider, {
+		ref,
+		"data-slot": "angle-slider-root-provider",
+		className: clsx(AngleSlider_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderControl = forwardRef(function AngleSliderControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.Control, {
+		ref,
+		"data-slot": "angle-slider-control",
+		className: clsx(AngleSlider_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderThumb = forwardRef(function AngleSliderThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.Thumb, {
+		ref,
+		"data-slot": "angle-slider-thumb",
+		className: clsx(AngleSlider_module_default.thumb, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderMarkerGroup = forwardRef(function AngleSliderMarkerGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.MarkerGroup, {
+		ref,
+		"data-slot": "angle-slider-marker-group",
+		className: clsx(AngleSlider_module_default.markerGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderMarker = forwardRef(function AngleSliderMarker({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.Marker, {
+		ref,
+		"data-slot": "angle-slider-marker",
+		className: clsx(AngleSlider_module_default.marker, normalizeClassName(className)),
+		...props
+	});
+});
+const AngleSliderValueText = forwardRef(function AngleSliderValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AngleSlider.ValueText, {
+		ref,
+		"data-slot": "angle-slider-value-text",
+		className: clsx(AngleSlider_module_default.valueText, normalizeClassName(className)),
+		...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,
+	Thumb: AngleSliderThumb,
+	MarkerGroup: AngleSliderMarkerGroup,
+	Marker: AngleSliderMarker,
+	ValueText: AngleSliderValueText,
+	HiddenInput: AngleSliderHiddenInput
+});
+//#endregion
+export { AngleSlider$1 as AngleSlider };

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

@@ -0,0 +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"
+};
+//#endregion
+export { AngleSlider_module_default as default };

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

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

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

@@ -0,0 +1,14 @@
+@layer ui.components {
+  .j80LYW_root {
+    border-radius: var(--aspect-ratio-radius, var(--radius-md));
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    & > :where(img, video, iframe, canvas, svg) {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+//#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>>;
+};
+//#endregion
+export { AspectRatio };

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

@@ -0,0 +1,24 @@
+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";
+//#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: {
+			aspectRatio: ratio,
+			...style
+		},
+		...props
+	});
+});
+const AspectRatio = Object.assign(AspectRatioRoot, { Root: AspectRatioRoot });
+//#endregion
+export { AspectRatio };

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

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

package/dist/components/avatar/Avatar.css

@@ -0,0 +1,75 @@
+@layer ui.components {
+  .TplYlq_root {
+    box-sizing: border-box;
+    width: var(--avatar-size, var(--size-md));
+    height: var(--avatar-size, var(--size-md));
+    border-radius: var(--avatar-radius, var(--radius-full));
+    background-color: var(--avatar-bg, var(--color-muted));
+    color: var(--avatar-color, var(--color-foreground));
+    font-size: var(--avatar-font-size, var(--text-md));
+    font-weight: var(--avatar-font-weight, var(--weight-medium));
+    line-height: var(--avatar-line-height, var(--line-height-text-md));
+    user-select: none;
+    vertical-align: middle;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+
+    &:where([data-size="xs"]) {
+      --avatar-size: var(--size-xs);
+      --avatar-font-size: var(--text-xs);
+      --avatar-line-height: var(--line-height-text-xs);
+    }
+
+    &:where([data-size="sm"]) {
+      --avatar-size: var(--size-sm);
+      --avatar-font-size: var(--text-sm);
+      --avatar-line-height: var(--line-height-text-sm);
+    }
+
+    &:where([data-size="lg"]) {
+      --avatar-size: var(--size-lg);
+      --avatar-font-size: var(--text-lg);
+      --avatar-line-height: var(--line-height-text-lg);
+    }
+
+    &:where([data-size="xl"]) {
+      --avatar-size: var(--size-xl);
+      --avatar-font-size: var(--text-lg);
+      --avatar-line-height: var(--line-height-text-lg);
+    }
+  }
+
+  .TplYlq_image {
+    object-fit: var(--avatar-image-object-fit, cover);
+    object-position: var(--avatar-image-object-position, center);
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    &[data-state="hidden"] {
+      display: none;
+    }
+  }
+
+  .TplYlq_fallback {
+    width: 100%;
+    height: 100%;
+    padding: var(--avatar-fallback-padding, 0);
+    background-color: var(--avatar-fallback-bg, var(--avatar-bg, var(--color-muted)));
+    color: var(--avatar-fallback-color, inherit);
+    border-radius: inherit;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+
+    &[data-state="hidden"] {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import { Avatar } from "@ark-ui/react/avatar";
+
+//#region src/components/avatar/Avatar.d.ts
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarRootProps = ComponentProps<typeof Avatar.Root> & {
+  size?: AvatarSize;
+};
+type AvatarRootProviderProps = ComponentProps<typeof Avatar.RootProvider> & {
+  size?: AvatarSize;
+};
+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>>;
+};
+//#endregion
+export { Avatar$1 as Avatar };

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,49 @@
+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";
+//#region src/components/avatar/Avatar.tsx
+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 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 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 AvatarFallback = forwardRef(function AvatarFallback({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		ref,
+		"data-slot": "avatar-fallback",
+		className: clsx(Avatar_module_default.fallback, normalizeClassName(className)),
+		...props
+	});
+});
+const Avatar$1 = Object.assign(AvatarRoot, {
+	Root: AvatarRoot,
+	RootProvider: AvatarRootProvider,
+	Image: AvatarImage,
+	Fallback: AvatarFallback
+});
+//#endregion
+export { Avatar$1 as Avatar };

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

@@ -0,0 +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"
+};
+//#endregion
+export { Avatar_module_default as default };

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

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