@api7/ui-components 0.3.0 → 0.5.0

package/dist/components/calendar/calendar.js

@@ -10,7 +10,7 @@ import { enUS, zhCN } from "react-day-picker/locale";
 //#region src/components/calendar/calendar.tsx
 /** Merges a consumer's `classNames` prop with ours key by key. Consumer classes are appended to the
 * key's own classes (the cell's fixed size, range-band fillers and state looks), which they cannot
-* replace: only `asu:` utilities take part in `cn`'s conflict resolution. */
+* replace: only `` utilities take part in `cn`'s conflict resolution. */
 function mergeClassNames(base, overrides = {}) {
 	const merged = { ...base };
 	for (const key of Object.keys(overrides)) merged[key] = cn(base[key], overrides[key]);
@@ -36,15 +36,15 @@ function CalendarRoot({ className: rootClassName, rootRef, ...rootProps }) {
 /** Module-scope for stable identity (see CalendarRoot). */
 function CalendarChevron({ className: chevronClassName, orientation, ...chevronProps }) {
 	if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeft, {
-		className: cn("asu:size-4", chevronClassName),
+		className: cn("size-4", chevronClassName),
 		...chevronProps
 	});
 	if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRight, {
-		className: cn("asu:size-4", chevronClassName),
+		className: cn("size-4", chevronClassName),
 		...chevronProps
 	});
 	return /* @__PURE__ */ jsx(ChevronDown, {
-		className: cn("asu:size-4", chevronClassName),
+		className: cn("size-4", chevronClassName),
 		...chevronProps
 	});
 }
@@ -76,7 +76,7 @@ function CalendarDay({ day, modifiers, ...dayProps }) {
 * look of their own, such as `today`, with the app's own class; the library's state looks (for
 * example `selected`) cannot be replaced. Today is not highlighted unless `classNames.today` is set,
 * for example `classNames={{ today: 'my-today' }}` with `.my-today > button { border: 1px solid
-* var(--asu-primary); }` in the app's CSS.
+* var(--color-primary); }` in the app's CSS.
 */
 function Calendar({ className, classNames, locale, navLayout, components, ...props }) {
 	const configLocale = useLocale();
@@ -96,37 +96,37 @@ function Calendar({ className, classNames, locale, navLayout, components, ...pro
 	}), [components]);
 	const ownClassNames = {
 		root: cn(defaultClassNames.root),
-		months: cn("asu:flex asu:flex-col asu:gap-4 asu:sm:flex-row", defaultClassNames.months),
-		month: cn("asu:relative asu:flex asu:w-full asu:flex-col asu:gap-3", defaultClassNames.month),
-		button_previous: cn(buttonVariants({ variant: "ghost" }), "asu:absolute asu:top-0 asu:left-0 asu:size-7 asu:rounded-sm asu:p-0 asu:hover:bg-accent-hover", defaultClassNames.button_previous),
-		button_next: cn(buttonVariants({ variant: "ghost" }), "asu:absolute asu:top-0 asu:right-0 asu:size-7 asu:rounded-sm asu:p-0 asu:hover:bg-accent-hover", defaultClassNames.button_next),
-		month_caption: cn("asu:flex asu:h-7 asu:items-center asu:justify-center", defaultClassNames.month_caption),
-		caption_label: cn("asu:text-sm asu:font-medium asu:select-none", props.captionLayout?.startsWith("dropdown") && "asu:flex asu:items-center asu:gap-1 asu:rounded-sm asu:[&>svg]:size-3.5 asu:[&>svg]:text-muted-foreground", defaultClassNames.caption_label),
-		dropdowns: cn("asu:flex asu:items-center asu:justify-center asu:gap-1.5 asu:text-sm asu:font-medium", defaultClassNames.dropdowns),
-		dropdown_root: cn("asu:relative asu:rounded-sm asu:has-focus-visible:ring-2 asu:has-focus-visible:ring-ring/40", defaultClassNames.dropdown_root),
-		dropdown: cn("asu:absolute asu:inset-0 asu:opacity-0", defaultClassNames.dropdown),
-		month_grid: cn("asu:w-full asu:border-collapse", defaultClassNames.month_grid),
-		weekdays: cn("asu:flex", defaultClassNames.weekdays),
-		weekday: cn("asu:flex asu:size-8 asu:items-center asu:justify-center asu:text-xs asu:font-normal asu:text-muted-foreground", defaultClassNames.weekday),
-		week: cn("asu:mt-1 asu:flex", defaultClassNames.week),
-		week_number_header: cn("asu:size-8", defaultClassNames.week_number_header),
-		week_number: cn("asu:flex asu:size-8 asu:items-center asu:justify-center asu:text-xs asu:text-muted-foreground", defaultClassNames.week_number),
-		day: cn("asu:relative asu:size-8 asu:p-0 asu:text-center asu:align-middle", "asu:data-join-next:after:absolute asu:data-join-next:after:top-1/2 asu:data-join-next:after:right-0 asu:data-join-next:after:h-6 asu:data-join-next:after:w-1 asu:data-join-next:after:-translate-y-1/2 asu:data-join-next:after:bg-info-subtle", "asu:data-join-prev:after:absolute asu:data-join-prev:after:top-1/2 asu:data-join-prev:after:left-0 asu:data-join-prev:after:h-6 asu:data-join-prev:after:w-1 asu:data-join-prev:after:-translate-y-1/2 asu:data-join-prev:after:bg-info-subtle", defaultClassNames.day),
+		months: cn("flex flex-col gap-4 sm:flex-row", defaultClassNames.months),
+		month: cn("relative flex w-full flex-col gap-3", defaultClassNames.month),
+		button_previous: cn(buttonVariants({ variant: "ghost" }), "absolute top-0 left-0 size-7 rounded-sm p-0 hover:bg-accent-hover", defaultClassNames.button_previous),
+		button_next: cn(buttonVariants({ variant: "ghost" }), "absolute top-0 right-0 size-7 rounded-sm p-0 hover:bg-accent-hover", defaultClassNames.button_next),
+		month_caption: cn("flex h-7 items-center justify-center", defaultClassNames.month_caption),
+		caption_label: cn("text-sm font-medium select-none", props.captionLayout?.startsWith("dropdown") && "flex items-center gap-1 rounded-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+		dropdowns: cn("flex items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+		dropdown_root: cn("relative rounded-sm has-focus-visible:ring-2 has-focus-visible:ring-ring/40", defaultClassNames.dropdown_root),
+		dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+		month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+		weekdays: cn("flex", defaultClassNames.weekdays),
+		weekday: cn("flex size-8 items-center justify-center text-xs font-normal text-muted-foreground", defaultClassNames.weekday),
+		week: cn("mt-1 flex", defaultClassNames.week),
+		week_number_header: cn("size-8", defaultClassNames.week_number_header),
+		week_number: cn("flex size-8 items-center justify-center text-xs text-muted-foreground", defaultClassNames.week_number),
+		day: cn("relative size-8 p-0 text-center align-middle", "data-join-next:after:absolute data-join-next:after:top-1/2 data-join-next:after:right-0 data-join-next:after:h-6 data-join-next:after:w-1 data-join-next:after:-translate-y-1/2 data-join-next:after:bg-info-subtle", "data-join-prev:after:absolute data-join-prev:after:top-1/2 data-join-prev:after:left-0 data-join-prev:after:h-6 data-join-prev:after:w-1 data-join-prev:after:-translate-y-1/2 data-join-prev:after:bg-info-subtle", defaultClassNames.day),
 		range_start: cn(defaultClassNames.range_start),
-		range_middle: cn("asu:relative asu:before:absolute asu:before:inset-x-0 asu:before:inset-y-1 asu:before:bg-info-subtle", "asu:data-row-start:before:start-1 asu:data-row-end:before:end-1", defaultClassNames.range_middle),
+		range_middle: cn("relative before:absolute before:inset-x-0 before:inset-y-1 before:bg-info-subtle", "data-row-start:before:start-1 data-row-end:before:end-1", defaultClassNames.range_middle),
 		range_end: cn(defaultClassNames.range_end),
-		hidden: cn("asu:invisible", defaultClassNames.hidden),
+		hidden: cn("invisible", defaultClassNames.hidden),
 		today: cn(defaultClassNames.today),
-		selected: cn("asu:[&:not([data-range-middle])>button]:bg-primary asu:[&:not([data-range-middle])>button]:text-primary-foreground asu:[&:not([data-range-middle])>button]:hover:bg-primary", defaultClassNames.selected),
-		disabled: cn("asu:[&>button]:pointer-events-none asu:[&>button]:text-muted-foreground asu:[&>button]:opacity-50", defaultClassNames.disabled),
-		outside: cn("asu:[&>button]:text-muted-foreground asu:[&>button]:opacity-50", defaultClassNames.outside)
+		selected: cn("[&:not([data-range-middle])>button]:bg-primary [&:not([data-range-middle])>button]:text-primary-foreground [&:not([data-range-middle])>button]:hover:bg-primary", defaultClassNames.selected),
+		disabled: cn("[&>button]:pointer-events-none [&>button]:text-muted-foreground [&>button]:opacity-50", defaultClassNames.disabled),
+		outside: cn("[&>button]:text-muted-foreground [&>button]:opacity-50", defaultClassNames.outside)
 	};
 	return /* @__PURE__ */ jsx(CalendarDayContext.Provider, {
 		value: dayContextValue,
 		children: /* @__PURE__ */ jsx(DayPicker, {
 			locale: resolvedLocale,
 			navLayout: navLayout ?? "around",
-			className: cn("asu:w-fit asu:select-none", className),
+			className: cn("w-fit select-none", className),
 			classNames: mergeClassNames(ownClassNames, classNames),
 			components: mergedComponents,
 			...props.mode === "range" ? { resetOnSelect: true } : {},
@@ -156,7 +156,7 @@ function CalendarDayButton({ className, day, modifiers, ref: forwardedRef, ...pr
 			else if (forwardedRef) forwardedRef.current = node;
 		},
 		"data-slot": "calendar-day",
-		className: cn("asu:absolute asu:inset-0 asu:m-auto asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:text-sm asu:outline-none asu:hover:bg-accent-hover asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", className)
+		className: cn("absolute inset-0 m-auto flex size-6 items-center justify-center rounded-sm text-sm outline-none hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring/40", className)
 	});
 }
 //#endregion

package/dist/components/checkbox/checkbox.js

@@ -7,15 +7,15 @@ import { Checkbox } from "@base-ui/react/checkbox";
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-base-ui-swipe-ignore": true,
-		className: cn("asu:peer asu:inline-flex asu:size-4 asu:shrink-0 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-input asu:bg-background asu:text-primary-foreground asu:transition-colors asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:data-checked:border-primary asu:data-checked:bg-primary asu:data-indeterminate:border-primary asu:data-indeterminate:bg-primary asu:data-disabled:cursor-not-allowed asu:data-disabled:opacity-50 asu:aria-invalid:border-destructive", className),
+		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background text-primary-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive", className),
 		...props,
 		"data-slot": "checkbox",
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
-			className: "asu:flex asu:items-center asu:justify-center",
+			className: "flex items-center justify-center",
 			"data-slot": "checkbox-indicator",
 			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
 				...indicatorProps,
-				children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, { className: "asu:size-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "asu:size-3" })
+				children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" })
 			})
 		})
 	});

package/dist/components/combobox/combobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { listItemClassName, listboxClassName } from "../../lib/popup.js";
+import { listItemClassName, listboxClassName, popupLayerClassName } from "../../lib/popup.js";
 import { controlFocus, controlFocusWithin, controlSurface } from "../../lib/control.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
@@ -13,26 +13,26 @@ function Combobox$1(props) {
 function ComboboxInput({ className, clearLabel, toggleLabel, ...props }) {
 	const messages = useMessages();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "asu:relative",
+		className: "relative",
 		"data-slot": "combobox-input-group",
 		children: [/* @__PURE__ */ jsx(Combobox.Input, {
-			className: cn(controlSurface, controlFocus, "asu:h-8 asu:w-full asu:pr-16 asu:pl-3", className),
+			className: cn(controlSurface, controlFocus, "h-8 w-full pr-16 pl-3", className),
 			...props,
 			"data-slot": "combobox-input"
 		}), /* @__PURE__ */ jsxs("span", {
-			className: "asu:absolute asu:top-1/2 asu:right-2 asu:flex asu:-translate-y-1/2 asu:items-center asu:gap-2",
+			className: "absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-2",
 			children: [/* @__PURE__ */ jsx(Combobox.Clear, {
 				"aria-label": clearLabel ?? messages.combobox.clear,
-				className: "asu:text-muted-foreground asu:hover:text-foreground",
+				className: "text-muted-foreground hover:text-foreground",
 				"data-slot": "combobox-clear",
-				children: /* @__PURE__ */ jsx(XIcon, { className: "asu:size-3" })
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
 			}), /* @__PURE__ */ jsx(Combobox.Trigger, {
 				"aria-label": toggleLabel ?? messages.combobox.toggle,
-				className: "asu:flex asu:items-center",
+				className: "flex items-center",
 				"data-slot": "combobox-trigger",
 				children: /* @__PURE__ */ jsx(ChevronDownIcon, {
 					"aria-hidden": "true",
-					className: "asu:size-5 asu:shrink-0 asu:text-foreground"
+					className: "size-5 shrink-0 text-foreground"
 				})
 			})]
 		})]
@@ -40,11 +40,12 @@ function ComboboxInput({ className, clearLabel, toggleLabel, ...props }) {
 }
 function ComboboxContent({ className, side = "bottom", sideOffset = 4, align = "start", children, empty = /* @__PURE__ */ jsx(ComboboxEmpty, {}), ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		className: popupLayerClassName,
 		side,
 		sideOffset,
 		align,
 		children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-			className: cn(listboxClassName, "asu:min-w-(--anchor-width) asu:outline-none", className),
+			className: cn(listboxClassName, "min-w-(--anchor-width) outline-none", className),
 			...props,
 			"data-slot": "combobox-content",
 			children: [/* @__PURE__ */ jsx(Combobox.List, {
@@ -56,22 +57,22 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 4, align = "
 }
 function ComboboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Item, {
-		className: cn(listItemClassName, "asu:border-b asu:border-border asu:last:border-b-0", className),
+		className: cn(listItemClassName, "border-b border-border last:border-b-0", className),
 		...props,
 		"data-slot": "combobox-item",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "asu:min-w-0 asu:flex-1 asu:truncate",
+			className: "min-w-0 flex-1 truncate",
 			children
 		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-			className: "asu:flex asu:size-4 asu:shrink-0 asu:items-center asu:justify-center",
-			children: /* @__PURE__ */ jsx(CheckIcon, { className: "asu:size-4" })
+			className: "flex size-4 shrink-0 items-center justify-center",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
 		})]
 	});
 }
 function ComboboxEmpty({ className, children, ...props }) {
 	const messages = useMessages();
 	return /* @__PURE__ */ jsx(Combobox.Empty, {
-		className: cn("asu:px-4 asu:py-2.5 asu:text-sm asu:text-muted-foreground asu:empty:p-0", className),
+		className: cn("px-4 py-2.5 text-sm text-muted-foreground empty:p-0", className),
 		...props,
 		"data-slot": "combobox-empty",
 		children: children ?? messages.combobox.empty
@@ -86,7 +87,7 @@ function ComboboxGroup({ className, ...props }) {
 }
 function ComboboxGroupLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-		className: cn("asu:px-4 asu:py-2 asu:text-xs asu:font-medium asu:text-muted-foreground", className),
+		className: cn("px-4 py-2 text-xs font-medium text-muted-foreground", className),
 		...props,
 		"data-slot": "combobox-group-label"
 	});
@@ -97,17 +98,17 @@ function ComboboxValue(props) {
 function ComboboxChips({ className, clearLabel, ...props }) {
 	const messages = useMessages();
 	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
-		className: cn(controlSurface, controlFocusWithin, "asu:flex asu:min-h-8 asu:items-start asu:gap-1 asu:px-2 asu:py-1", className),
+		className: cn(controlSurface, controlFocusWithin, "flex min-h-8 items-start gap-1 px-2 py-1", className),
 		"data-slot": "combobox-chips-group",
 		children: [/* @__PURE__ */ jsx(Combobox.Chips, {
-			className: "asu:flex asu:min-w-0 asu:flex-1 asu:flex-wrap asu:items-center asu:gap-1",
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-1",
 			...props,
 			"data-slot": "combobox-chips"
 		}), /* @__PURE__ */ jsx(Combobox.Clear, {
 			"aria-label": clearLabel ?? messages.combobox.clear,
-			className: "asu:flex asu:h-6 asu:shrink-0 asu:items-center asu:text-muted-foreground asu:hover:text-foreground",
+			className: "flex h-6 shrink-0 items-center text-muted-foreground hover:text-foreground",
 			"data-slot": "combobox-chips-clear",
-			children: /* @__PURE__ */ jsx(XIcon, { className: "asu:size-3" })
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
 		})]
 	});
 }
@@ -116,23 +117,23 @@ function ComboboxChip({ className, children, removeLabel, ...props }) {
 	const defaultLabel = typeof children === "string" ? children : void 0;
 	return /* @__PURE__ */ jsxs(Combobox.Chip, {
 		"aria-label": defaultLabel,
-		className: cn("asu:inline-flex asu:h-6 asu:items-center asu:gap-1 asu:rounded-full asu:bg-secondary asu:px-2 asu:text-sm asu:text-secondary-foreground", className),
+		className: cn("inline-flex h-6 items-center gap-1 rounded-full bg-secondary px-2 text-sm text-secondary-foreground", className),
 		...props,
 		"data-slot": "combobox-chip",
 		children: [children, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			"aria-label": removeLabel ?? (defaultLabel ? `${messages.combobox.remove} ${defaultLabel}` : messages.combobox.remove),
-			className: "asu:flex asu:items-center asu:text-secondary-foreground/70 asu:hover:text-secondary-foreground",
+			className: "flex items-center text-secondary-foreground/70 hover:text-secondary-foreground",
 			"data-slot": "combobox-chip-remove",
 			children: /* @__PURE__ */ jsx(XIcon, {
 				"aria-hidden": "true",
-				className: "asu:size-3"
+				className: "size-3"
 			})
 		})]
 	});
 }
 function ComboboxChipsInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Input, {
-		className: cn("asu:h-6 asu:min-w-16 asu:flex-1 asu:bg-transparent asu:text-sm asu:text-foreground asu:outline-none asu:placeholder:text-muted-foreground asu:disabled:cursor-not-allowed asu:disabled:opacity-50", className),
+		className: cn("h-6 min-w-16 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		"data-slot": "combobox-chips-input"
 	});

package/dist/components/data-table/data-table.js

@@ -110,11 +110,11 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 		hidePagination
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("asu:w-full", className),
+		className: cn("w-full", className),
 		"data-slot": "data-table",
 		children: [
 			toolbar ? /* @__PURE__ */ jsx("div", {
-				className: "asu:flex asu:justify-end asu:gap-2 asu:pb-3",
+				className: "flex justify-end gap-2 pb-3",
 				"data-slot": "data-table-toolbar",
 				children: toolbar
 			}) : null,
@@ -132,7 +132,7 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 					className: header.column.columnDef.meta?.className,
 					"aria-sort": ariaSort,
 					children: header.isPlaceholder ? null : filter ? /* @__PURE__ */ jsxs("div", {
-						className: "asu:flex asu:items-center asu:gap-1",
+						className: "flex items-center gap-1",
 						children: [title, /* @__PURE__ */ jsx(FilterHeader, {
 							column: header.column,
 							filter
@@ -140,11 +140,11 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 					}) : title
 				}, header.id);
 			}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: LOADING_ROW_COUNT }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
-				className: "asu:h-14",
-				children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "asu:h-4 asu:w-full" }) }, column.id))
+				className: "h-14",
+				children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, column.id))
 			}, `skeleton-${rowIndex}`)) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 				colSpan: table.getVisibleLeafColumns().length,
-				className: "asu:h-[200px] asu:text-center asu:text-xl asu:font-medium asu:text-muted-foreground",
+				className: "h-[200px] text-center text-xl font-medium text-muted-foreground",
 				children: empty ?? messages.dataTable.empty
 			}) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
 				className: cell.column.columnDef.meta?.className,
@@ -170,7 +170,7 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 }
 function DataTableRowActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:opacity-0 asu:group-hover/row:opacity-100 asu:group-focus-within/row:opacity-100", className),
+		className: cn("opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100", className),
 		...props,
 		"data-slot": "data-table-row-actions"
 	});

package/dist/components/data-table/filter-header.js

@@ -19,7 +19,7 @@ function FilterHeader({ column, filter }) {
 		render: /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			size: "icon",
-			className: "asu:size-6",
+			className: "size-6",
 			"aria-label": active ? messages.dataTable.filterActive({
 				label: filter.label,
 				count: chosen.length
@@ -27,18 +27,18 @@ function FilterHeader({ column, filter }) {
 		}),
 		children: /* @__PURE__ */ jsx(Funnel, {
 			"aria-hidden": "true",
-			className: active ? "asu:text-primary asu:fill-current" : "asu:text-muted-foreground"
+			className: active ? "text-primary-text fill-current" : "text-muted-foreground"
 		})
 	}), /* @__PURE__ */ jsxs(MenuContent, {
 		align: "start",
-		className: "asu:min-w-48",
+		className: "min-w-48",
 		children: [
 			filter.options.map((option) => /* @__PURE__ */ jsxs(MenuCheckboxItem, {
 				checked: chosen.includes(option.value),
 				disabled: required && chosen.length === 1 && chosen.includes(option.value),
 				onCheckedChange: (on) => change(on ? [...chosen, option.value] : chosen.filter((value) => value !== option.value)),
 				children: [option.label, option.count !== void 0 && /* @__PURE__ */ jsx("span", {
-					className: "asu:ml-auto asu:pl-4 asu:text-muted-foreground",
+					className: "ml-auto pl-4 text-muted-foreground",
 					children: option.count
 				})]
 			}, option.value)),

package/dist/components/data-table/sort-header.js

@@ -9,8 +9,8 @@ function SortHeader({ column, children }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick: column.getToggleSortingHandler(),
-		className: cn("asu:inline-flex asu:items-center asu:gap-1 asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", sorted ? "asu:text-foreground" : "asu:text-muted-foreground"),
-		children: [children, /* @__PURE__ */ jsx(Icon, { className: "asu:size-3.5" })]
+		className: cn("inline-flex items-center gap-1 outline-none focus-visible:ring-2 focus-visible:ring-ring/40", sorted ? "text-foreground" : "text-muted-foreground"),
+		children: [children, /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })]
 	});
 }
 //#endregion

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

@@ -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"),
+							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",

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

@@ -0,0 +1,26 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/description-list/description-list.d.ts
+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;
+//#endregion
+export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants };

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

@@ -0,0 +1,89 @@
+"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";
+//#region 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"
+	});
+}
+//#endregion
+export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants };