@api7/ui-components 0.4.0 → 0.5.0

package/dist/components/dialog/dialog.js

@@ -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"
 	});

package/dist/components/drawer/drawer.js

@@ -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"
 	});

package/dist/components/empty/empty.js

@@ -2,11 +2,11 @@ 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", {
+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,21 +34,21 @@ 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"
 	});

package/dist/components/field/field.js

@@ -6,42 +6,42 @@ import { Fieldset } from "@base-ui/react/fieldset";
 //#region 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"
 	});

package/dist/components/form/date-fields.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 const DatePicker = lazy(() => import("../date-picker/date-picker.js").then((m) => ({ default: m.DatePicker })));
 const DateRangePicker = lazy(() => import("../date-picker/date-picker.js").then((m) => ({ default: m.DateRangePicker })));
 function PickerFallback() {
-	return /* @__PURE__ */ jsx(Skeleton, { className: "asu:h-8 asu:w-full" });
+	return /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" });
 }
 /**
 * Tracks whether the calendar popover is open. Opening it moves focus off the trigger; that blur

package/dist/components/form/form-item.js

@@ -24,7 +24,7 @@ function useFieldState() {
 function OptionalMarker({ label }) {
 	const messages = useMessages();
 	return /* @__PURE__ */ jsxs("span", {
-		className: "asu:font-medium asu:text-muted-foreground",
+		className: "font-medium text-muted-foreground",
 		children: [" ", label ?? messages.form.optional]
 	});
 }
@@ -35,15 +35,15 @@ function LabelTooltip({ content, label }) {
 		render: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": label ?? messages.form.moreInfo,
-			className: "asu:inline-flex asu:text-muted-foreground"
+			className: "inline-flex text-muted-foreground"
 		}),
-		children: /* @__PURE__ */ jsx(InfoIcon, { className: "asu:size-3.5" })
+		children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: content })] });
 }
 function FormItem({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout = "stacked", children }) {
 	const { name, invalid, errors, touched, dirty } = useFieldState();
 	const labelRow = label && /* @__PURE__ */ jsxs("div", {
-		className: "asu:flex asu:items-center asu:gap-1",
+		className: "flex items-center gap-1",
 		children: [/* @__PURE__ */ jsxs(FieldLabel, { children: [label, optional && /* @__PURE__ */ jsx(OptionalMarker, { label: optionalLabel })] }), labelTooltip && /* @__PURE__ */ jsx(LabelTooltip, {
 			content: labelTooltip,
 			label: moreInfoLabel
@@ -58,14 +58,14 @@ function FormItem({ label, description, labelTooltip, optional, optionalLabel, m
 		"data-slot": "form-item",
 		children: [
 			layout === "stacked" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] }) : /* @__PURE__ */ jsx("div", {
-				className: "asu:flex asu:flex-row asu:items-center asu:gap-2.5",
+				className: "flex flex-row items-center gap-2.5",
 				children: layout === "inline-end" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [children, labelRow] })
 			}),
 			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
 			invalid && /* @__PURE__ */ jsx(FieldError, {
 				match: true,
 				children: errors.map((message) => /* @__PURE__ */ jsx("span", {
-					className: "asu:block",
+					className: "block",
 					children: message
 				}, message))
 			})

package/dist/components/form/lazy-field-components.js

@@ -7,7 +7,7 @@ function loadOnDemand(load) {
 	const Lazy = lazy(load);
 	return function OnDemandField(props) {
 		return /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx(Skeleton, { className: "asu:h-8 asu:w-full" }),
+			fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
 			children: /* @__PURE__ */ jsx(Lazy, { ...props })
 		});
 	};

package/dist/components/form/toggle-fields.js

@@ -61,7 +61,7 @@ function RadioGroupField({ label, description, labelTooltip, optional, optionalL
 		"data-slot": "form-item",
 		children: [
 			/* @__PURE__ */ jsxs(Fieldset, { children: [label && /* @__PURE__ */ jsxs("div", {
-				className: "asu:flex asu:items-center asu:gap-1",
+				className: "flex items-center gap-1",
 				children: [/* @__PURE__ */ jsxs(FieldsetLegend, { children: [label, optional && /* @__PURE__ */ jsx(OptionalMarker, { label: optionalLabel })] }), labelTooltip && /* @__PURE__ */ jsx(LabelTooltip, {
 					content: labelTooltip,
 					label: moreInfoLabel
@@ -72,11 +72,11 @@ function RadioGroupField({ label, description, labelTooltip, optional, optionalL
 				onBlur: field.handleBlur,
 				disabled,
 				"aria-orientation": orientation,
-				className: cn(orientation === "horizontal" && "asu:flex-row asu:flex-wrap asu:gap-6"),
+				className: cn(orientation === "horizontal" && "flex-row flex-wrap gap-6"),
 				children: options.map((option) => /* @__PURE__ */ jsx(Field.Item, {
 					disabled: option.disabled,
 					children: /* @__PURE__ */ jsxs(FieldLabel, {
-						className: "asu:font-normal",
+						className: "font-normal",
 						children: [
 							/* @__PURE__ */ jsx(RadioGroupItem, { value: option.value }),
 							" ",
@@ -89,7 +89,7 @@ function RadioGroupField({ label, description, labelTooltip, optional, optionalL
 			invalid && /* @__PURE__ */ jsx(FieldError, {
 				match: true,
 				children: errors.map((message) => /* @__PURE__ */ jsx("span", {
-					className: "asu:block",
+					className: "block",
 					children: message
 				}, message))
 			})

package/dist/components/input/input.js

@@ -6,7 +6,7 @@ import { Input } from "@base-ui/react/input";
 //#region src/components/input/input.tsx
 function Input$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
-		className: cn(controlSurface, controlFocus, "asu:h-8 asu:px-3 asu:py-1", className),
+		className: cn(controlSurface, controlFocus, "h-8 px-3 py-1", className),
 		...props,
 		"data-slot": "input"
 	});

package/dist/components/input-group/input-group.js

@@ -3,20 +3,20 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input-group/input-group.tsx
 const groupParts = [
-	"asu:isolate",
-	"asu:[&>[data-slot]]:h-auto asu:[&>[data-slot]]:rounded-none",
-	"asu:[&>[data-slot]:first-child]:rounded-l-sm asu:[&>[data-slot]:last-child]:rounded-r-sm asu:[&>[data-slot]:not(:first-child)]:-ml-px",
-	"asu:[&>[data-slot=input]]:relative asu:[&>[data-slot=input]]:flex-1 asu:[&>[data-slot=input]]:focus-visible:z-10",
-	"asu:[&>[data-slot=button]]:focus-visible:relative asu:[&>[data-slot=button]]:focus-visible:z-10",
-	"asu:[&>[data-slot=input]+[data-slot][data-slot]]:border-l-transparent asu:[&>[data-slot][data-slot]:has(+[data-slot=input])]:border-r-transparent",
-	"asu:[&>[data-slot=input]:not(:focus-visible):not([aria-invalid=true]):has(+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive]))]:border-r-transparent asu:[&>[data-slot=input]+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])]:ml-0",
-	"asu:[&>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]:not(:focus-visible):not([aria-invalid=true])]:border-l-transparent asu:[&>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]]:ml-0",
-	"asu:[&>[data-slot=input]+[data-slot=button][data-variant=outline]:focus-visible]:border-l-input asu:[&>[data-slot=button][data-variant=outline]:focus-visible:has(+[data-slot=input])]:border-r-input"
+	"isolate",
+	"[&>[data-slot]]:h-auto [&>[data-slot]]:rounded-none",
+	"[&>[data-slot]:first-child]:rounded-l-sm [&>[data-slot]:last-child]:rounded-r-sm [&>[data-slot]:not(:first-child)]:-ml-px",
+	"[&>[data-slot=input]]:relative [&>[data-slot=input]]:flex-1 [&>[data-slot=input]]:focus-visible:z-10",
+	"[&>[data-slot=button]]:focus-visible:relative [&>[data-slot=button]]:focus-visible:z-10",
+	"[&>[data-slot=input]+[data-slot][data-slot]]:border-l-transparent [&>[data-slot][data-slot]:has(+[data-slot=input])]:border-r-transparent",
+	"[&>[data-slot=input]:not(:focus-visible):not([aria-invalid=true]):has(+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive]))]:border-r-transparent [&>[data-slot=input]+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])]:ml-0",
+	"[&>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]:not(:focus-visible):not([aria-invalid=true])]:border-l-transparent [&>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]]:ml-0",
+	"[&>[data-slot=input]+[data-slot=button][data-variant=outline]:focus-visible]:border-l-input [&>[data-slot=button][data-variant=outline]:focus-visible:has(+[data-slot=input])]:border-r-input"
 ].join(" ");
 /** Joins an `Input` and a `Button` or an `InputGroupAddon` into one control: they touch, share one divider, and each keeps its own hover and focus. */
 function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:h-8 asu:w-full asu:items-stretch", groupParts, className),
+		className: cn("flex h-8 w-full items-stretch", groupParts, className),
 		...props,
 		"data-slot": "input-group"
 	});
@@ -27,7 +27,7 @@ function InputGroup({ className, ...props }) {
 */
 function InputGroupAddon({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:flex asu:shrink-0 asu:items-center asu:border asu:border-input asu:bg-muted asu:px-3 asu:text-sm asu:text-muted-foreground", "asu:overflow-hidden asu:[&_[data-slot=button]]:-mx-3 asu:[&_[data-slot=button]]:h-full asu:[&_[data-slot=button]]:rounded-none asu:[&_[data-slot=button]]:border-0 asu:[&_[data-slot=button]]:focus-visible:ring-inset asu:[&_[data-slot=button]]:focus-visible:ring-ring asu:[&_[data-slot=button]]:bg-transparent asu:[&_[data-slot=button]]:text-foreground asu:[&_[data-slot=button]]:hover:bg-accent", className),
+		className: cn("flex shrink-0 items-center border border-input bg-muted px-3 text-sm text-muted-foreground", "overflow-hidden [&_[data-slot=button]]:-mx-3 [&_[data-slot=button]]:h-full [&_[data-slot=button]]:rounded-none [&_[data-slot=button]]:border-0 [&_[data-slot=button]]:focus-visible:ring-inset [&_[data-slot=button]]:focus-visible:ring-ring [&_[data-slot=button]]:bg-transparent [&_[data-slot=button]]:text-foreground [&_[data-slot=button]]:hover:bg-accent", className),
 		...props,
 		"data-slot": "input-group-addon"
 	});

package/dist/components/menu/menu.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { popupClassName } from "../../lib/popup.js";
+import { popupClassName, popupLayerClassName } from "../../lib/popup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu.tsx
-const menuItemClassName = "asu:flex asu:h-13 asu:cursor-default asu:items-center asu:gap-2 asu:px-3 asu:text-sm asu:outline-none asu:select-none asu:data-highlighted:bg-accent asu:data-disabled:pointer-events-none asu:data-disabled:opacity-50 asu:[&_svg]:size-4 asu:[&_svg]:shrink-0";
-const destructiveItemClassName = "asu:text-destructive-text asu:data-highlighted:bg-destructive-subtle";
+const menuItemClassName = "flex h-13 cursor-default items-center gap-2 px-3 text-sm outline-none select-none data-highlighted:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
+const destructiveItemClassName = "text-destructive-text data-highlighted:bg-destructive-subtle";
 const Menu$1 = Menu.Root;
 function MenuTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
@@ -17,11 +17,12 @@ function MenuTrigger({ className, ...props }) {
 }
 function MenuContent({ className, side = "bottom", sideOffset = 4, align = "end", ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: popupLayerClassName,
 		side,
 		sideOffset,
 		align,
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
-			className: cn(popupClassName, "asu:min-w-40 asu:py-1", className),
+			className: cn(popupClassName, "min-w-40 py-1", className),
 			...props,
 			"data-slot": "menu-content"
 		})
@@ -36,7 +37,7 @@ function MenuItem({ className, variant = "default", ...props }) {
 }
 function MenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Separator, {
-		className: cn("asu:my-1 asu:h-px asu:bg-border", className),
+		className: cn("my-1 h-px bg-border", className),
 		...props,
 		"data-slot": "menu-separator"
 	});
@@ -50,7 +51,7 @@ function MenuGroup({ className, ...props }) {
 }
 function MenuGroupLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: cn("asu:px-3 asu:py-2 asu:text-xs asu:font-medium asu:text-muted-foreground", className),
+		className: cn("px-3 py-2 text-xs font-medium text-muted-foreground", className),
 		...props,
 		"data-slot": "menu-group-label"
 	});
@@ -61,7 +62,7 @@ function MenuCheckboxItem({ className, children, ...props }) {
 		...props,
 		"data-slot": "menu-checkbox-item",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "asu:flex asu:size-4 asu:shrink-0 asu:items-center asu:justify-center",
+			className: "flex size-4 shrink-0 items-center justify-center",
 			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -79,8 +80,8 @@ function MenuRadioItem({ className, children, ...props }) {
 		...props,
 		"data-slot": "menu-radio-item",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "asu:flex asu:size-4 asu:shrink-0 asu:items-center asu:justify-center",
-			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "asu:inline-block asu:size-2 asu:rounded-full asu:bg-current" }) })
+			className: "flex size-4 shrink-0 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "inline-block size-2 rounded-full bg-current" }) })
 		}), children]
 	});
 }
@@ -90,16 +91,17 @@ function MenuSubTrigger({ className, children, ...props }) {
 		className: cn(menuItemClassName, className),
 		...props,
 		"data-slot": "menu-sub-trigger",
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "asu:ml-auto" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
 }
 function MenuSubContent({ className, side, sideOffset, align, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: popupLayerClassName,
 		side,
 		sideOffset,
 		align,
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
-			className: cn(popupClassName, "asu:min-w-40 asu:py-1", className),
+			className: cn(popupClassName, "min-w-40 py-1", className),
 			...props,
 			"data-slot": "menu-sub-content"
 		})

package/dist/components/number-field/number-field.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { NumberField } from "@base-ui/react/number-field";
 //#region src/components/number-field/number-field.tsx
-const stepperButtonClassName = "asu:flex asu:basis-1/2 asu:grow-0 asu:shrink-0 asu:items-center asu:justify-center asu:text-muted-foreground asu:hover:bg-accent asu:hover:text-accent-foreground asu:disabled:cursor-not-allowed asu:disabled:opacity-50 asu:[&_svg]:size-3";
+const stepperButtonClassName = "flex basis-1/2 grow-0 shrink-0 items-center justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-3";
 function NumberField$1({ className, placeholder, showStepper = false, unit, incrementLabel, decrementLabel, locale, format, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }) {
 	const messages = useMessages();
 	const uiLocale = useLocale();
@@ -20,25 +20,25 @@ function NumberField$1({ className, placeholder, showStepper = false, unit, incr
 			useGrouping: false,
 			...format
 		},
-		className: cn("asu:group/number-field asu:flex asu:w-full", className),
+		className: cn("group/number-field flex w-full", className),
 		...props,
 		"data-slot": "number-field",
 		children: [/* @__PURE__ */ jsxs(NumberField.Group, {
-			className: cn(controlSurface, controlFocusWithin, "asu:flex asu:h-8 asu:flex-1 asu:overflow-hidden", hasUnit ? "asu:rounded-l-sm asu:rounded-r-none" : "asu:rounded-sm"),
+			className: cn(controlSurface, controlFocusWithin, "flex h-8 flex-1 overflow-hidden", hasUnit ? "rounded-l-sm rounded-r-none" : "rounded-sm"),
 			"data-slot": "number-field-group",
 			children: [/* @__PURE__ */ jsx(NumberField.Input, {
 				placeholder,
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
 				"aria-describedby": describedBy,
-				className: "asu:min-w-0 asu:flex-1 asu:bg-transparent asu:px-3 asu:text-left asu:text-foreground asu:tabular-nums asu:outline-none asu:placeholder:text-muted-foreground",
+				className: "min-w-0 flex-1 bg-transparent px-3 text-left text-foreground tabular-nums outline-none placeholder:text-muted-foreground",
 				"data-slot": "number-field-input"
 			}), showStepper && /* @__PURE__ */ jsxs("div", {
-				className: "asu:flex asu:w-6 asu:shrink-0 asu:flex-col asu:border-l asu:border-input",
+				className: "flex w-6 shrink-0 flex-col border-l border-input",
 				"data-slot": "number-field-stepper",
 				children: [/* @__PURE__ */ jsx(NumberField.Increment, {
 					"aria-label": incrementLabel ?? messages.numberField.increment,
-					className: cn(stepperButtonClassName, "asu:border-b asu:border-input"),
+					className: cn(stepperButtonClassName, "border-b border-input"),
 					"data-slot": "number-field-increment",
 					children: /* @__PURE__ */ jsx(ChevronUp, {})
 				}), /* @__PURE__ */ jsx(NumberField.Decrement, {
@@ -50,7 +50,7 @@ function NumberField$1({ className, placeholder, showStepper = false, unit, incr
 			})]
 		}), hasUnit && /* @__PURE__ */ jsx("span", {
 			id: unitId,
-			className: "asu:flex asu:shrink-0 asu:items-center asu:rounded-r-sm asu:border asu:border-l-0 asu:border-input asu:bg-muted asu:px-3 asu:text-sm asu:text-muted-foreground asu:group-data-disabled/number-field:opacity-50",
+			className: "flex shrink-0 items-center rounded-r-sm border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground group-data-disabled/number-field:opacity-50",
 			"data-slot": "number-field-unit",
 			children: unit
 		})]

package/dist/components/pagination/pagination.js

@@ -56,13 +56,13 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 	const pageItems = getPageItems(currentPage, pageCount);
 	const effectivePageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("asu:flex asu:h-11 asu:items-center asu:justify-between asu:px-[22px] asu:py-3", className),
+		className: cn("flex h-11 items-center justify-between px-[22px] py-3", className),
 		"data-slot": "pagination",
 		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
-			className: "asu:text-sm asu:text-muted-foreground",
+			className: "text-sm text-muted-foreground",
 			children: messages.pagination.results
 		}), /* @__PURE__ */ jsx("span", {
-			className: "asu:ml-2.5 asu:text-sm asu:text-foreground",
+			className: "ml-2.5 text-sm text-foreground",
 			children: messages.pagination.range({
 				from: formatter.format(from),
 				to: formatter.format(to),
@@ -70,7 +70,7 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 			})
 		})] }), /* @__PURE__ */ jsxs("nav", {
 			"aria-label": label ?? messages.pagination.label,
-			className: "asu:flex asu:items-center asu:gap-1.5",
+			className: "flex items-center gap-1.5",
 			"data-slot": "pagination-nav",
 			children: [
 				/* @__PURE__ */ jsx("button", {
@@ -78,13 +78,13 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 					"aria-label": messages.pagination.previous,
 					disabled: currentPage <= 0,
 					onClick: () => onPageIndexChange(currentPage - 1),
-					className: cn("asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-input asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", currentPage <= 0 && "asu:cursor-not-allowed asu:opacity-50"),
+					className: cn("flex size-6 items-center justify-center rounded-sm border border-input outline-none focus-visible:ring-2 focus-visible:ring-ring/40", currentPage <= 0 && "cursor-not-allowed opacity-50"),
 					"data-slot": "pagination-previous",
-					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "asu:size-3.5" })
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
 				}),
 				pageItems.map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: "asu:flex asu:size-6 asu:items-center asu:justify-center asu:text-sm asu:text-muted-foreground",
+					className: "flex size-6 items-center justify-center text-sm text-muted-foreground",
 					"data-slot": "pagination-ellipsis",
 					children: "…"
 				}, `ellipsis-${index}`) : /* @__PURE__ */ jsx("button", {
@@ -92,7 +92,7 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 					"aria-label": messages.pagination.page({ page: formatter.format(item + 1) }),
 					"aria-current": item === currentPage ? "page" : void 0,
 					onClick: () => onPageIndexChange(item),
-					className: cn("asu:size-6 asu:rounded-sm asu:text-sm asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", item === currentPage ? "asu:bg-primary asu:text-primary-foreground" : "asu:hover:bg-accent-hover"),
+					className: cn("size-6 rounded-sm text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40", item === currentPage ? "bg-primary text-primary-foreground" : "hover:bg-accent-hover"),
 					"data-slot": "pagination-page",
 					children: item + 1
 				}, item)),
@@ -101,9 +101,9 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 					"aria-label": messages.pagination.next,
 					disabled: currentPage >= pageCount - 1,
 					onClick: () => onPageIndexChange(currentPage + 1),
-					className: cn("asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-input asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", currentPage >= pageCount - 1 && "asu:cursor-not-allowed asu:opacity-50"),
+					className: cn("flex size-6 items-center justify-center rounded-sm border border-input outline-none focus-visible:ring-2 focus-visible:ring-ring/40", currentPage >= pageCount - 1 && "cursor-not-allowed opacity-50"),
 					"data-slot": "pagination-next",
-					children: /* @__PURE__ */ jsx(ChevronRight, { className: "asu:size-3.5" })
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
 				}),
 				/* @__PURE__ */ jsxs(Select, {
 					items: pageSizeItems(effectivePageSizeOptions, messages, formatter),
@@ -111,9 +111,9 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 					onValueChange: (value) => onPageSizeChange(Number(value)),
 					children: [/* @__PURE__ */ jsx(SelectTrigger, {
 						size: "sm",
-						className: "asu:w-[110px]",
+						className: "w-[110px]",
 						"aria-label": messages.pagination.pageSizeLabel,
-						children: /* @__PURE__ */ jsx(SelectValue, { className: "asu:flex-1 asu:text-center" })
+						children: /* @__PURE__ */ jsx(SelectValue, { className: "flex-1 text-center" })
 					}), /* @__PURE__ */ jsx(SelectContent, { children: effectivePageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, {
 						value: String(size),
 						children: messages.pagination.pageSize({ size: formatter.format(size) })