@moduix/react 1.1.1 → 2.0.0

package/README.md

@@ -58,8 +58,8 @@ bundle, so moduix does not ship duplicate React or Ark UI runtimes.
 
 ### shadcn copy-owned install
 
-`shadcn` can install selected moduix components from the GitHub registry directly into your project.
-The files become part of your codebase instead of staying in `node_modules`.
+`shadcn` can install selected moduix components from the hosted registry directly into your
+project. The files become part of your codebase instead of staying in `node_modules`.
 
 Make sure your project resolves the `@/*` alias to `src/*` in both `tsconfig.json` and
 `tsconfig.app.json`, and mirror it in your bundler config.
@@ -88,13 +88,15 @@ Create `components.json` in the project root when your app does not already have
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@moduix-react": "https://moduix.dev/r/react/{name}.json"
+  }
 }
 ```
 
 ```bash
-npx shadcn@latest add Blinks44/moduix/react-button
-npx shadcn@latest add Blinks44/moduix/react-accordion
+npx shadcn@latest add @moduix-react/button
+npx shadcn@latest add @moduix-react/accordion
 ```
 
 The registry install also pulls in the shared moduix foundation files those components need, such as
@@ -137,7 +139,7 @@ import '@moduix/react/style.css';
 Then import and compose the components you need:
 
 ```tsx
-import { Button, Dialog, Portal } from '@moduix/react';
+import { Button, Dialog } from '@moduix/react';
 
 export function Example() {
   return (
@@ -145,14 +147,12 @@ export function Example() {
       <Dialog.Trigger asChild>
         <Button>Open dialog</Button>
       </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content>
-            <Dialog.Title>Project settings</Dialog.Title>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.Title>Project settings</Dialog.Title>
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   );
 }
@@ -176,7 +176,7 @@ attributes for targeted styling. Theme values are regular CSS custom properties:
 Library CSS is organized with cascade layers:
 
 ```css
-@layer ui.reset, ui.tokens, ui.components;
+@layer ui.reset, ui.tokens, ui.base, ui.components;
 ```
 
 This keeps defaults predictable while still letting application styles override tokens,
@@ -190,7 +190,7 @@ QrCode, Select, Tabs, Toast, Tooltip, TreeView, and supporting layout and displa
 
 ## Documentation
 
-- Documentation: https://moduix.blinks44.workers.dev/
+- Documentation: https://moduix.dev/
 - npm package: https://www.npmjs.com/package/@moduix/react
 - React package README: `packages/react/README.md`
 - Docs app README: `apps/docs/README.md`

package/dist/components/accordion/Accordion.css

@@ -49,7 +49,7 @@
 
   .tIMeYW_root {
     box-sizing: border-box;
-    width: var(--accordion-width, 22rem);
+    width: var(--accordion-width, 100%);
     max-width: var(--accordion-max-width, 100%);
     min-width: 0;
     color: var(--accordion-color, var(--color-foreground));
@@ -187,4 +187,11 @@
       width: var(--accordion-horizontal-content-width, 16rem);
     }
   }
+
+  .tIMeYW_itemBody {
+    gap: var(--accordion-item-body-gap, var(--spacing-3));
+    min-width: 0;
+    padding: var(--accordion-item-body-padding, var(--spacing-3));
+    display: grid;
+  }
 }

package/dist/components/accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { Accordion } from "@ark-ui/react/accordion";
+import { Accordion, useAccordion } from "@ark-ui/react/accordion";
 
 //#region src/components/accordion/Accordion.d.ts
 declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accordion.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
@@ -8,6 +8,7 @@ declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accord
   ItemTrigger: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemContent: import("react").ForwardRefExoticComponent<Omit<Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemBody: 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 { Accordion$1 as Accordion };
+export { Accordion$1 as Accordion, useAccordion };

package/dist/components/accordion/Accordion.js

@@ -1,10 +1,11 @@
-import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Accordion_module_default from "./Accordion.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Accordion } from "@ark-ui/react/accordion";
+import { jsx } from "react/jsx-runtime";
+import { Accordion, useAccordion } from "@ark-ui/react/accordion";
 //#region src/components/accordion/Accordion.tsx
 const AccordionRoot = forwardRef(function AccordionRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Accordion.Root, {
@@ -55,13 +56,24 @@ const AccordionItemContent = forwardRef(function AccordionItemContent({ classNam
 		...props
 	});
 });
+const AccordionItemBody = forwardRef(function AccordionItemBody({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "accordion",
+		"data-part": "item-body",
+		"data-slot": "accordion-item-body",
+		className: clsx(Accordion_module_default.itemBody, normalizeClassName(className)),
+		...props
+	});
+});
 const Accordion$1 = Object.assign(AccordionRoot, {
 	Root: AccordionRoot,
 	RootProvider: AccordionRootProvider,
 	Item: AccordionItem,
 	ItemTrigger: AccordionItemTrigger,
 	ItemIndicator: AccordionItemIndicator,
-	ItemContent: AccordionItemContent
+	ItemContent: AccordionItemContent,
+	ItemBody: AccordionItemBody
 });
 //#endregion
-export { Accordion$1 as Accordion };
+export { Accordion$1 as Accordion, useAccordion };

package/dist/components/accordion/Accordion.module.js

@@ -6,6 +6,7 @@ var Accordion_module_default = {
 	"accordion-item-content-open": "tIMeYW_accordion-item-content-open",
 	"accordion-item-content-open-horizontal": "tIMeYW_accordion-item-content-open-horizontal",
 	"item": "tIMeYW_item",
+	"itemBody": "tIMeYW_itemBody",
 	"itemContent": "tIMeYW_itemContent",
 	"itemIndicator": "tIMeYW_itemIndicator",
 	"itemTrigger": "tIMeYW_itemTrigger",

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

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

package/dist/components/alert/Alert.css

@@ -2,19 +2,24 @@
   .ZXk2dW_root {
     box-sizing: border-box;
     align-items: start;
-    gap: var(--alert-gap, var(--spacing-3));
+    row-gap: var(--alert-content-gap, var(--spacing-1));
+    column-gap: var(--alert-gap, var(--spacing-3));
     border: var(--alert-border-width, var(--border-width-sm)) solid
       var(--alert-border-color, var(--alert-border-color-default, var(--color-border)));
     border-radius: var(--alert-radius, var(--radius-lg));
     width: 100%;
     min-width: 0;
-    padding: var(--alert-padding, var(--spacing-4));
+    padding: var(--alert-padding, var(--spacing-3));
     background-color: var(--alert-bg, var(--alert-bg-default, var(--color-card)));
     color: var(--alert-color, var(--alert-color-default, var(--color-card-foreground)));
     box-shadow: var(--alert-shadow, none);
     grid-template-columns: auto minmax(0, 1fr);
     display: grid;
 
+    & > [data-part="title"], & > [data-part="description"] {
+      grid-column: 2;
+    }
+
     &[data-status="neutral"] {
       --alert-bg-default: var(--color-card);
       --alert-border-color-default: var(--color-border);
@@ -50,9 +55,11 @@
       --alert-indicator-color-default: var(--color-destructive);
     }
 
-    &:not(:has([data-part="indicator"])) {
-      & [data-part="content"] {
-        grid-column: 1 / -1;
+    &:not(:has( > [data-part="indicator"])) {
+      grid-template-columns: minmax(0, 1fr);
+
+      & > [data-part="content"], & > [data-part="title"], & > [data-part="description"] {
+        grid-column: 1;
       }
     }
   }
@@ -105,4 +112,11 @@
       margin-bottom: 0;
     }
   }
+
+  .ZXk2dW_actions {
+    gap: var(--alert-actions-gap, var(--spacing-2));
+    flex-wrap: wrap;
+    margin-block-start: var(--alert-actions-margin-top, var(--spacing-2));
+    display: flex;
+  }
 }

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

@@ -1,14 +1,16 @@
 //#region src/components/alert/Alert.d.ts
+type AlertStatus = 'neutral' | '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?: "neutral" | "info" | "success" | "warning" | "error";
+  status?: AlertStatus;
 } & 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";
+    status?: AlertStatus;
   } & 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>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLParagraphElement>>;
   Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Actions: 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

@@ -1,11 +1,11 @@
 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";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/alert/Alert.tsx
-const AlertRoot = forwardRef(function AlertRoot({ className, role, status = "neutral", ...props }, ref) {
+const AlertRoot = forwardRef(function AlertRoot({ children, className, role, status = "neutral", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
 		ref,
 		role: role ?? (status === "error" ? "alert" : "status"),
@@ -14,7 +14,8 @@ const AlertRoot = forwardRef(function AlertRoot({ className, role, status = "neu
 		"data-slot": "alert-root",
 		"data-status": status,
 		className: clsx(Alert_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children
 	});
 });
 const AlertIndicator = forwardRef(function AlertIndicator({ className, ...props }, ref) {
@@ -39,7 +40,7 @@ const AlertContent = forwardRef(function AlertContent({ className, ...props }, r
 	});
 });
 const AlertTitle = forwardRef(function AlertTitle({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.h3, {
+	return /* @__PURE__ */ jsx(ark.p, {
 		ref,
 		"data-scope": "alert",
 		"data-part": "title",
@@ -58,12 +59,23 @@ const AlertDescription = forwardRef(function AlertDescription({ className, ...pr
 		...props
 	});
 });
+const AlertActions = forwardRef(function AlertActions({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "alert",
+		"data-part": "actions",
+		"data-slot": "alert-actions",
+		className: clsx(Alert_module_default.actions, normalizeClassName(className)),
+		...props
+	});
+});
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,
 	Indicator: AlertIndicator,
 	Content: AlertContent,
 	Title: AlertTitle,
-	Description: AlertDescription
+	Description: AlertDescription,
+	Actions: AlertActions
 });
 //#endregion
 export { Alert };

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

@@ -1,6 +1,7 @@
 import './Alert.css';
 //#region src/components/alert/Alert.module.css
 var Alert_module_default = {
+	"actions": "ZXk2dW_actions",
 	"content": "ZXk2dW_content",
 	"description": "ZXk2dW_description",
 	"indicator": "ZXk2dW_indicator",

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import AspectRatio_module_default from "./AspectRatio.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/aspect-ratio/AspectRatio.tsx
 const AspectRatioRoot = forwardRef(function AspectRatioRoot({ ratio, className, style, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
@@ -13,7 +13,7 @@ const AspectRatioRoot = forwardRef(function AspectRatioRoot({ ratio, className,
 		"data-slot": "aspect-ratio-root",
 		className: clsx(AspectRatio_module_default.root, normalizeClassName(className)),
 		style: {
-			aspectRatio: ratio,
+			"--aspect-ratio-value": ratio,
 			...style
 		},
 		...props

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

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

package/dist/components/avatar/Avatar.js

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

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

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

package/dist/components/badge/Badge.css

@@ -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,14 +74,29 @@
       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;
+    }
   }
 
   .NXa69G_dot {

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