@api7/ui-components 0.4.0 → 0.6.0

package/dist/components/date-picker/date-picker.js

@@ -8,7 +8,7 @@ import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarIcon } from "lucide-react";
 import { Field } from "@base-ui/react/field";
-//#region src/components/date-picker/date-picker.tsx
+// src/components/date-picker/date-picker.tsx
 function pad(value) {
 	return String(value).padStart(2, "0");
 }
@@ -42,7 +42,7 @@ function withTimeString(date, timeString) {
 function isSameRange(a, b) {
 	return a?.from?.getTime() === b?.from?.getTime() && a?.to?.getTime() === b?.to?.getTime();
 }
-const timeInputClassName = cn(controlSurface, controlFocus, "asu:h-8 asu:w-full asu:px-3");
+const timeInputClassName = cn(controlSurface, controlFocus, "h-8 w-full px-3");
 /** Popover trigger + single-selection Calendar, matching Input's control surface. */
 function DatePicker(props) {
 	const { value, defaultValue, onValueChange, onOpenChange, onBlur, placeholder, disabled, showTime, formatDate, calendarProps, className } = props;
@@ -74,15 +74,15 @@ function DatePicker(props) {
 			render: /* @__PURE__ */ jsxs(PopoverTrigger, {
 				disabled,
 				onBlur,
-				className: cn(controlSurface, controlFocus, "asu:flex asu:h-8 asu:items-center asu:gap-2 asu:px-3 asu:text-left", className),
-				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "asu:size-4 asu:shrink-0 asu:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
-					className: cn("asu:min-w-0 asu:flex-1 asu:truncate", !currentValue && "asu:text-muted-foreground"),
+				className: cn(controlSurface, controlFocus, "flex h-8 items-center gap-2 px-3 text-left", className),
+				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0 flex-1 truncate", !currentValue && "text-muted-foreground"),
 					children: currentValue ? format(currentValue) : resolvedPlaceholder
 				})]
 			})
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			"aria-label": resolvedPlaceholder,
-			className: "asu:w-auto",
+			className: "w-auto",
 			children: /* @__PURE__ */ jsxs("div", {
 				"data-slot": "date-picker-content",
 				children: [/* @__PURE__ */ jsx(Calendar, {
@@ -98,7 +98,7 @@ function DatePicker(props) {
 					value: currentValue ? timeInputValue(currentValue) : "",
 					disabled: !currentValue,
 					onChange: (event) => handleTimeChange(event.target.value),
-					className: cn(timeInputClassName, "asu:mt-3"),
+					className: cn(timeInputClassName, "mt-3"),
 					"data-slot": "date-picker-time"
 				})]
 			})
@@ -171,22 +171,22 @@ function DateRangePicker(props) {
 			render: /* @__PURE__ */ jsxs(PopoverTrigger, {
 				disabled,
 				onBlur,
-				className: cn(controlSurface, controlFocus, "asu:flex asu:h-8 asu:items-center asu:gap-2 asu:px-3 asu:text-left", className),
-				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "asu:size-4 asu:shrink-0 asu:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
-					className: cn("asu:min-w-0 asu:flex-1 asu:truncate", !displayText && "asu:text-muted-foreground"),
+				className: cn(controlSurface, controlFocus, "flex h-8 items-center gap-2 px-3 text-left", className),
+				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0 flex-1 truncate", !displayText && "text-muted-foreground"),
 					children: displayText ?? resolvedPlaceholder
 				})]
 			})
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			"aria-label": resolvedPlaceholder,
-			className: "asu:w-auto",
+			className: "w-auto",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "asu:flex asu:gap-3",
+				className: "flex gap-3",
 				"data-slot": "date-range-picker-content",
 				children: [presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
 					role: "group",
 					"aria-label": messages.datePicker.presetsLabel,
-					className: "asu:flex asu:shrink-0 asu:flex-col asu:gap-1 asu:border-r asu:border-border asu:pr-3",
+					className: "flex shrink-0 flex-col gap-1 border-r border-border pr-3",
 					"data-slot": "date-range-picker-presets",
 					children: presets.map((preset, index) => {
 						const isSelected = presetSelection?.index === index && presetSelection.label === preset.label && isSameRange(presetSelection.range, currentValue);
@@ -194,7 +194,7 @@ function DateRangePicker(props) {
 							type: "button",
 							"aria-pressed": isSelected,
 							onClick: () => handlePresetClick(preset, index),
-							className: cn("asu:h-8 asu:whitespace-nowrap asu:rounded-sm asu:px-3 asu:text-left asu:text-sm asu:text-foreground asu:outline-none asu:hover:bg-accent asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", isSelected && "asu:bg-accent asu:font-medium asu:text-primary-text"),
+							className: cn("h-8 whitespace-nowrap rounded-sm px-3 text-left text-sm text-foreground outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/40", isSelected && "bg-accent font-medium text-primary-text"),
 							"data-slot": "date-range-picker-preset",
 							children: preset.label
 						}, index);
@@ -207,7 +207,7 @@ function DateRangePicker(props) {
 					selected: currentValue,
 					onSelect: handleSelect
 				}), showTime && /* @__PURE__ */ jsxs("div", {
-					className: "asu:mt-3 asu:flex asu:gap-2",
+					className: "mt-3 flex gap-2",
 					children: [/* @__PURE__ */ jsx("input", {
 						type: "time",
 						step: "1",
@@ -232,5 +232,4 @@ function DateRangePicker(props) {
 		})]
 	});
 }
-//#endregion
 export { DatePicker, DateRangePicker };

package/dist/components/description-list/description-list.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+declare const descriptionListVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DescriptionListProps = Omit<ComponentProps<'dl'>, 'className'> & VariantProps<typeof descriptionListVariants> & {
+  className?: string;
+  columns?: number;
+};
+export type DescriptionListItemProps = Omit<ComponentProps<'div'>, 'className'> & {
+  className?: string;
+  colSpan?: number;
+};
+export type DescriptionListLabelProps = Omit<ComponentProps<'dt'>, 'className'> & {
+  className?: string;
+};
+export type DescriptionListValueProps = Omit<ComponentProps<'dd'>, 'className'> & {
+  className?: string;
+};
+declare function DescriptionList({ className, variant, columns, style, ...props }: DescriptionListProps): import("react").JSX.Element;
+declare function DescriptionListItem({ className, colSpan, style, ...props }: DescriptionListItemProps): import("react").JSX.Element;
+declare function DescriptionListLabel({ className, ...props }: DescriptionListLabelProps): import("react").JSX.Element;
+declare function DescriptionListValue({ className, ...props }: DescriptionListValueProps): import("react").JSX.Element;
+export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants };

package/dist/components/description-list/description-list.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/description-list/description-list.tsx
+const descriptionListVariants = cva("grid w-full grid-cols-[repeat(var(--description-list-columns,1),var(--description-list-label-width,160px)_minmax(0,1fr))] text-sm leading-5", {
+	variants: { variant: {
+		default: "",
+		outline: "border-t border-l border-border"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const DescriptionListContext = createContext({
+	variant: "default",
+	columns: 1
+});
+function normalizeColumns(value) {
+	if (value === void 0 || !Number.isFinite(value)) return 1;
+	return Math.max(1, Math.floor(value));
+}
+function clampColSpan(value, columns) {
+	if (value === void 0 || !Number.isFinite(value) || value < 1) return 1;
+	return Math.min(columns, Math.floor(value));
+}
+const descriptionListLabelVariants = cva("col-start-1 min-w-0 font-normal text-muted-foreground", {
+	variants: { variant: {
+		default: "py-2 pr-4",
+		outline: "border-r border-b border-border bg-table-header px-4 py-3"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const descriptionListValueVariants = cva("col-[2/-1] m-0 min-w-0 wrap-anywhere text-foreground", {
+	variants: { variant: {
+		default: "py-2",
+		outline: "border-r border-b border-border px-2 py-3"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function DescriptionList({ className, variant, columns, style, ...props }) {
+	const resolved = variant ?? "default";
+	const count = normalizeColumns(columns);
+	return /* @__PURE__ */ jsx(DescriptionListContext.Provider, {
+		value: {
+			variant: resolved,
+			columns: count
+		},
+		children: /* @__PURE__ */ jsx("dl", {
+			className: cn(descriptionListVariants({ variant: resolved }), className),
+			"data-variant": resolved,
+			style: {
+				"--description-list-columns": count,
+				...style
+			},
+			...props,
+			"data-slot": "description-list"
+		})
+	});
+}
+function DescriptionListItem({ className, colSpan, style, ...props }) {
+	const { columns } = useContext(DescriptionListContext);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-subgrid", className),
+		style: {
+			gridColumn: `span ${2 * clampColSpan(colSpan, columns)}`,
+			...style
+		},
+		...props,
+		"data-slot": "description-list-item"
+	});
+}
+function DescriptionListLabel({ className, ...props }) {
+	const { variant } = useContext(DescriptionListContext);
+	return /* @__PURE__ */ jsx("dt", {
+		className: cn(descriptionListLabelVariants({ variant }), className),
+		...props,
+		"data-slot": "description-list-label"
+	});
+}
+function DescriptionListValue({ className, ...props }) {
+	const { variant } = useContext(DescriptionListContext);
+	return /* @__PURE__ */ jsx("dd", {
+		className: cn(descriptionListValueVariants({ variant }), className),
+		...props,
+		"data-slot": "description-list-value"
+	});
+}
+export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants };

package/dist/components/dialog/dialog.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/components/dialog/dialog.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -26,5 +25,4 @@ export type DialogFooterProps = ComponentProps<'div'>;
 declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
 export type DialogCloseProps = WithClassName<Dialog.Close.Props>;
 declare function DialogClose({ className, ...props }: DialogCloseProps): import("react").JSX.Element;
-//#endregion
 export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/components/dialog/dialog.js

@@ -6,7 +6,7 @@ import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/components/dialog/dialog.tsx
+// src/components/dialog/dialog.tsx
 const DialogModalContext = createContext(true);
 function Dialog$1({ modal = true, ...props }) {
 	return /* @__PURE__ */ jsx(DialogModalContext.Provider, {
@@ -25,22 +25,22 @@ function DialogTrigger({ className, ...props }) {
 	});
 }
 const dialogContentSizeClassName = {
-	sm: "asu:max-w-md",
-	md: "asu:max-w-xl",
-	lg: "asu:max-w-3xl"
+	sm: "max-w-md",
+	md: "max-w-xl",
+	lg: "max-w-3xl"
 };
 function DialogContent({ className, showCloseButton = true, closeLabel, size = "md", children, ...props }) {
 	const messages = useMessages();
 	const showBackdrop = useContext(DialogModalContext) === true;
 	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [showBackdrop && /* @__PURE__ */ jsx(Dialog.Backdrop, {
-		className: "asu:fixed asu:inset-0 asu:bg-overlay asu:transition-opacity asu:duration-150 asu:motion-reduce:transition-none asu:data-ending-style:opacity-0 asu:data-starting-style:opacity-0",
+		className: "fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
 		"data-slot": "dialog-backdrop"
 	}), /* @__PURE__ */ jsxs(Dialog.Popup, {
-		className: cn("asu:fixed asu:top-1/2 asu:left-1/2 asu:flex asu:max-h-[calc(100vh-4rem)] asu:w-[calc(100vw-2rem)] asu:-translate-x-1/2 asu:-translate-y-1/2 asu:flex-col asu:rounded-md asu:bg-background asu:text-foreground asu:shadow-lg asu:dark:ring-1 asu:dark:ring-border asu:outline-none asu:transition-[opacity,scale] asu:duration-150 asu:motion-reduce:transition-none asu:data-starting-style:scale-95 asu:data-starting-style:opacity-0 asu:data-ending-style:scale-95 asu:data-ending-style:opacity-0", dialogContentSizeClassName[size], className),
+		className: cn("fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100vh-4rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-md bg-background text-foreground shadow-lg dark:ring-1 dark:ring-border outline-none transition-[opacity,scale] duration-150 motion-reduce:transition-none data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0", dialogContentSizeClassName[size], className),
 		...props,
 		"data-slot": "dialog-content",
 		children: [showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
-			className: "asu:absolute asu:top-3 asu:right-4",
+			className: "absolute top-3 right-4",
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				size: "icon"
@@ -52,35 +52,35 @@ function DialogContent({ className, showCloseButton = true, closeLabel, size = "
 }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:flex-col asu:gap-1 asu:border-b asu:border-border asu:p-4 asu:pr-12", className),
+		className: cn("flex flex-col gap-1 border-b border-border p-4 pr-12", className),
 		...props,
 		"data-slot": "dialog-header"
 	});
 }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
-		className: cn("asu:text-lg asu:font-medium asu:text-foreground", className),
+		className: cn("text-lg font-medium text-foreground", className),
 		...props,
 		"data-slot": "dialog-title"
 	});
 }
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Description, {
-		className: cn("asu:text-sm asu:text-muted-foreground", className),
+		className: cn("text-sm text-muted-foreground", className),
 		...props,
 		"data-slot": "dialog-description"
 	});
 }
 function DialogBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:max-h-[596px] asu:overflow-y-auto asu:p-6", className),
+		className: cn("max-h-[596px] overflow-y-auto p-6", className),
 		...props,
 		"data-slot": "dialog-body"
 	});
 }
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:items-center asu:justify-end asu:gap-3 asu:border-t asu:border-border asu:px-6 asu:py-4", className),
+		className: cn("flex items-center justify-end gap-3 border-t border-border px-6 py-4", className),
 		...props,
 		"data-slot": "dialog-footer"
 	});
@@ -92,5 +92,4 @@ function DialogClose({ className, ...props }) {
 		"data-slot": "dialog-close"
 	});
 }
-//#endregion
 export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/components/drawer/drawer.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Drawer } from "@base-ui/react/drawer";
-//#region src/components/drawer/drawer.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -26,5 +25,4 @@ export type DrawerFooterProps = ComponentProps<'div'>;
 declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react").JSX.Element;
 export type DrawerCloseProps = WithClassName<Drawer.Close.Props>;
 declare function DrawerClose({ className, ...props }: DrawerCloseProps): import("react").JSX.Element;
-//#endregion
 export { Drawer$1 as Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

package/dist/components/drawer/drawer.js

@@ -6,7 +6,7 @@ import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Drawer } from "@base-ui/react/drawer";
-//#region src/components/drawer/drawer.tsx
+// src/components/drawer/drawer.tsx
 const DrawerModalContext = createContext(true);
 function Drawer$1({ swipeDirection = "right", modal = true, ...props }) {
 	return /* @__PURE__ */ jsx(DrawerModalContext.Provider, {
@@ -26,26 +26,26 @@ function DrawerTrigger({ className, ...props }) {
 	});
 }
 const drawerContentSizeClassName = {
-	md: "asu:w-[588px] asu:max-w-[100vw]",
-	lg: "asu:w-[748px] asu:max-w-[100vw]",
-	full: "asu:w-[90vw] asu:max-w-[100vw]"
+	md: "w-[588px] max-w-[100vw]",
+	lg: "w-[748px] max-w-[100vw]",
+	full: "w-[90vw] max-w-[100vw]"
 };
 function DrawerContent({ className, showCloseButton = true, closeLabel, size = "md", children, ...props }) {
 	const messages = useMessages();
 	const isNonModal = useContext(DrawerModalContext) !== true;
 	const showBackdrop = !isNonModal;
 	return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [showBackdrop && /* @__PURE__ */ jsx(Drawer.Backdrop, {
-		className: "asu:fixed asu:inset-0 asu:bg-overlay asu:transition-opacity asu:duration-150 asu:motion-reduce:transition-none asu:data-ending-style:opacity-0 asu:data-starting-style:opacity-0",
+		className: "fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
 		"data-slot": "drawer-backdrop"
 	}), /* @__PURE__ */ jsx(Drawer.Viewport, {
-		className: cn("asu:fixed asu:inset-0", isNonModal && "asu:pointer-events-none"),
+		className: cn("fixed inset-0 z-50", isNonModal && "pointer-events-none"),
 		"data-slot": "drawer-viewport",
 		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-			className: cn("asu:fixed asu:inset-y-0 asu:right-0 asu:flex asu:h-full asu:flex-col asu:bg-background asu:text-foreground asu:shadow-lg asu:dark:ring-1 asu:dark:ring-border asu:outline-none asu:transition-transform asu:duration-200 asu:motion-reduce:transition-none asu:data-ending-style:translate-x-full asu:data-starting-style:translate-x-full", isNonModal && "asu:pointer-events-auto", drawerContentSizeClassName[size], className),
+			className: cn("fixed inset-y-0 right-0 flex h-full flex-col bg-background text-foreground shadow-lg dark:ring-1 dark:ring-border outline-none transition-transform duration-200 motion-reduce:transition-none data-ending-style:translate-x-full data-starting-style:translate-x-full", isNonModal && "pointer-events-auto", drawerContentSizeClassName[size], className),
 			...props,
 			"data-slot": "drawer-content",
 			children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
-				className: "asu:absolute asu:top-3 asu:right-4",
+				className: "absolute top-3 right-4",
 				render: /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					size: "icon"
@@ -58,35 +58,35 @@ function DrawerContent({ className, showCloseButton = true, closeLabel, size = "
 }
 function DrawerHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:flex-col asu:gap-1 asu:border-b asu:border-border asu:px-6 asu:py-4 asu:pr-12", className),
+		className: cn("flex flex-col gap-1 border-b border-border px-6 py-4 pr-12", className),
 		...props,
 		"data-slot": "drawer-header"
 	});
 }
 function DrawerTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer.Title, {
-		className: cn("asu:text-lg asu:font-semibold asu:text-foreground", className),
+		className: cn("text-lg font-semibold text-foreground", className),
 		...props,
 		"data-slot": "drawer-title"
 	});
 }
 function DrawerDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer.Description, {
-		className: cn("asu:text-sm asu:text-muted-foreground", className),
+		className: cn("text-sm text-muted-foreground", className),
 		...props,
 		"data-slot": "drawer-description"
 	});
 }
 function DrawerBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex-1 asu:overflow-y-auto asu:px-6 asu:py-4", className),
+		className: cn("flex-1 overflow-y-auto px-6 py-4", className),
 		...props,
 		"data-slot": "drawer-body"
 	});
 }
 function DrawerFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:items-center asu:justify-end asu:gap-4 asu:border-t asu:border-border asu:px-6 asu:py-3", className),
+		className: cn("flex items-center justify-end gap-4 border-t border-border px-6 py-3", className),
 		...props,
 		"data-slot": "drawer-footer"
 	});
@@ -98,5 +98,4 @@ function DrawerClose({ className, ...props }) {
 		"data-slot": "drawer-close"
 	});
 }
-//#endregion
 export { Drawer$1 as Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

package/dist/components/empty/empty.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/empty/empty.d.ts
 declare const emptyMediaVariants: (props?: ({
   variant?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -16,5 +15,4 @@ declare function EmptyMedia({ variant, className, ...props }: EmptyMediaProps):
 declare function EmptyTitle({ className, ...props }: EmptyTitleProps): import("react").JSX.Element;
 declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
 declare function EmptyContent({ className, ...props }: EmptyContentProps): import("react").JSX.Element;
-//#endregion
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };

package/dist/components/empty/empty.js

@@ -1,12 +1,12 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/empty/empty.tsx
-const emptyVariants = cva("asu:flex asu:w-full asu:min-w-0 asu:flex-col asu:items-center asu:justify-center asu:gap-3 asu:rounded-sm asu:border-[3px] asu:border-dashed asu:border-border asu:px-4 asu:py-4 asu:text-center");
-const emptyMediaVariants = cva("asu:flex asu:shrink-0 asu:items-center asu:justify-center", {
+// src/components/empty/empty.tsx
+const emptyVariants = cva("flex w-full min-w-0 flex-col items-center justify-center gap-3 rounded-sm border-[3px] border-dashed border-border px-4 py-4 text-center");
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center", {
 	variants: { variant: {
-		default: "asu:size-[76px] asu:[&_img]:size-full asu:[&_img]:object-contain asu:[&_svg]:size-full",
-		icon: "asu:size-10 asu:rounded-sm asu:bg-muted asu:text-foreground asu:[&_svg:not([class*=size-])]:size-5"
+		default: "size-[76px] [&_img]:size-full [&_img]:object-contain [&_svg]:size-full",
+		icon: "size-10 rounded-sm bg-muted text-foreground [&_svg:not([class*=size-])]:size-5"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -19,7 +19,7 @@ function Empty({ className, ...props }) {
 }
 function EmptyHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:max-w-sm asu:flex-col asu:items-center asu:gap-1", className),
+		className: cn("flex max-w-sm flex-col items-center gap-1", className),
 		...props,
 		"data-slot": "empty-header"
 	});
@@ -34,24 +34,23 @@ function EmptyMedia({ variant = "default", className, ...props }) {
 }
 function EmptyTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:text-base asu:font-medium asu:text-foreground", className),
+		className: cn("text-base font-medium text-foreground", className),
 		...props,
 		"data-slot": "empty-title"
 	});
 }
 function EmptyDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:text-xs asu:text-muted-foreground", className),
+		className: cn("text-xs text-muted-foreground", className),
 		...props,
 		"data-slot": "empty-description"
 	});
 }
 function EmptyContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:max-w-sm asu:flex-col asu:items-center asu:gap-2", className),
+		className: cn("flex max-w-sm flex-col items-center gap-2", className),
 		...props,
 		"data-slot": "empty-content"
 	});
 }
-//#endregion
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };

package/dist/components/field/field.d.ts

@@ -1,6 +1,5 @@
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
-//#region src/components/field/field.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -16,5 +15,4 @@ declare function FieldDescription({ className, ...props }: FieldDescriptionProps
 declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
 declare function Fieldset$1({ className, ...props }: FieldsetProps): import("react").JSX.Element;
 declare function FieldsetLegend({ className, ...props }: FieldsetLegendProps): import("react").JSX.Element;
-//#endregion
 export { Field$1 as Field, FieldDescription, FieldError, FieldLabel, Fieldset$1 as Fieldset, FieldsetLegend };

package/dist/components/field/field.js

@@ -3,48 +3,47 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
-//#region src/components/field/field.tsx
+// src/components/field/field.tsx
 function Field$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Field.Root, {
-		className: cn("asu:flex asu:flex-col asu:gap-1.5", className),
+		className: cn("flex flex-col gap-1.5", className),
 		...props,
 		"data-slot": "field"
 	});
 }
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Field.Label, {
-		className: cn("asu:inline-flex asu:items-center asu:gap-2 asu:text-sm asu:leading-5 asu:font-medium asu:text-foreground asu:data-disabled:text-muted-foreground", className),
+		className: cn("inline-flex items-center gap-2 text-sm leading-5 font-medium text-foreground data-disabled:text-muted-foreground", className),
 		...props,
 		"data-slot": "field-label"
 	});
 }
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Field.Description, {
-		className: cn("asu:text-sm asu:text-muted-foreground", className),
+		className: cn("text-sm text-muted-foreground", className),
 		...props,
 		"data-slot": "field-description"
 	});
 }
 function FieldError({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Field.Error, {
-		className: cn("asu:text-sm asu:text-destructive-text", className),
+		className: cn("text-sm text-destructive-text", className),
 		...props,
 		"data-slot": "field-error"
 	});
 }
 function Fieldset$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Fieldset.Root, {
-		className: cn("asu:m-0 asu:flex asu:flex-col asu:gap-3 asu:border-0 asu:p-0", className),
+		className: cn("m-0 flex flex-col gap-3 border-0 p-0", className),
 		...props,
 		"data-slot": "fieldset"
 	});
 }
 function FieldsetLegend({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Fieldset.Legend, {
-		className: cn("asu:mb-1 asu:text-sm asu:font-medium asu:text-foreground", className),
+		className: cn("mb-1 text-sm font-medium text-foreground", className),
 		...props,
 		"data-slot": "fieldset-legend"
 	});
 }
-//#endregion
 export { Field$1 as Field, FieldDescription, FieldError, FieldLabel, Fieldset$1 as Fieldset, FieldsetLegend };

package/dist/components/field/labeled-field.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export type LabeledFieldLayout = 'stacked' | 'inline-end' | 'inline-start';
+export interface LabeledFieldProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Info icon next to the label that shows this content in a tooltip. */
+  labelTooltip?: ReactNode;
+  /** Appends the "Optional" marker to the label. */
+  optional?: boolean;
+  optionalLabel?: string;
+  moreInfoLabel?: string;
+  className?: string;
+  layout?: LabeledFieldLayout;
+  /**
+   * Renders a fieldset whose legend is the label, for a group of controls such as radio
+   * buttons. Only the stacked layout applies to a group.
+   */
+  group?: boolean;
+  /** Name of the field, given to the control inside it. */
+  name?: string;
+  /** Marks the field and its control invalid and shows the errors. */
+  invalid?: boolean;
+  touched?: boolean;
+  dirty?: boolean;
+  /** Messages shown under the field while it is invalid. */
+  errors?: readonly string[];
+  children: ReactNode;
+}
+/**
+ * A form row: label, optional marker, label tooltip, control, description and errors. It
+ * takes the field state as props, so any form library or plain React state can drive it.
+ */
+export declare function LabeledField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout, group, name, invalid, touched, dirty, errors, children }: LabeledFieldProps): import("react").JSX.Element;