@api7/ui-components 0.4.0 → 0.5.0

package/dist/components/popover/popover.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { popupClassName } from "../../lib/popup.js";
+import { popupClassName, popupLayerClassName } from "../../lib/popup.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/popover/popover.tsx
@@ -14,11 +14,12 @@ function PopoverTrigger({ className, ...props }) {
 }
 function PopoverContent({ className, side = "bottom", sideOffset = 4, align = "start", ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		className: popupLayerClassName,
 		side,
 		sideOffset,
 		align,
 		children: /* @__PURE__ */ jsx(Popover.Popup, {
-			className: cn(popupClassName, "asu:w-72 asu:max-w-[calc(100vw-2rem)] asu:p-3", className),
+			className: cn(popupClassName, "w-72 max-w-[calc(100vw-2rem)] p-3", className),
 			...props,
 			"data-slot": "popover-content"
 		})
@@ -26,14 +27,14 @@ function PopoverContent({ className, side = "bottom", sideOffset = 4, align = "s
 }
 function PopoverTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Title, {
-		className: cn("asu:text-sm asu:font-medium", className),
+		className: cn("text-sm font-medium", className),
 		...props,
 		"data-slot": "popover-title"
 	});
 }
 function PopoverDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Description, {
-		className: cn("asu:text-sm asu:text-muted-foreground", className),
+		className: cn("text-sm text-muted-foreground", className),
 		...props,
 		"data-slot": "popover-description"
 	});

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from "class-variance-authority";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/progress/progress.d.ts
+declare const trackVariants: (props?: ({
+  size?: "sm" | "md" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const indicatorVariants: (props?: ({
+  variant?: "destructive" | "success" | "warning" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A `null` value makes the bar indeterminate. A progress bar has no default name, because only the caller
+ * knows what is progressing, so give it an `aria-label` or an `aria-labelledby`.
+ */
+export interface ProgressProps extends Omit<Progress.Root.Props, 'className' | 'children'>, VariantProps<typeof trackVariants>, VariantProps<typeof indicatorVariants> {
+  className?: string;
+}
+declare function Progress$1({ className, size, variant, ...props }: ProgressProps): import("react").JSX.Element;
+//#endregion
+export { Progress$1 as Progress };

package/dist/components/progress/progress.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/progress/progress.tsx
+const trackVariants = cva("block w-full overflow-hidden rounded-full bg-accent-selected", {
+	variants: { size: {
+		xs: "h-1",
+		sm: "h-1.5",
+		md: "h-2"
+	} },
+	defaultVariants: { size: "sm" }
+});
+const indicatorVariants = cva("block h-full rounded-full transition-[width] motion-reduce:transition-none motion-safe:data-indeterminate:w-1/3 motion-safe:data-indeterminate:animate-progress-indeterminate motion-reduce:data-indeterminate:w-full motion-reduce:data-indeterminate:opacity-50", {
+	variants: { variant: {
+		default: "bg-primary-text",
+		success: "bg-success-foreground",
+		warning: "bg-warning-foreground",
+		destructive: "bg-destructive-text"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Progress$1({ className, size, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Root, {
+		className: cn("block w-full", className),
+		...props,
+		"data-slot": "progress",
+		children: /* @__PURE__ */ jsx(Progress.Track, {
+			className: trackVariants({ size }),
+			children: /* @__PURE__ */ jsx(Progress.Indicator, { className: indicatorVariants({ variant }) })
+		})
+	});
+}
+//#endregion
+export { Progress$1 as Progress };

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

@@ -6,7 +6,7 @@ import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/components/radio-group/radio-group.tsx
 function RadioGroup$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
-		className: cn("asu:flex asu:flex-col asu:gap-2", className),
+		className: cn("flex flex-col gap-2", className),
 		...props,
 		"data-slot": "radio-group"
 	});
@@ -14,11 +14,11 @@ function RadioGroup$1({ className, ...props }) {
 function RadioGroupItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-base-ui-swipe-ignore": true,
-		className: cn("asu:peer asu:relative asu:inline-flex asu:size-4 asu:shrink-0 asu:items-center asu:justify-center asu:rounded-full asu:border asu:border-input asu:bg-background 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-disabled:cursor-not-allowed asu:data-disabled:opacity-50 asu:aria-invalid:border-destructive", className),
+		className: cn("peer relative inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-background transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 data-checked:border-primary data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive", className),
 		...props,
 		"data-slot": "radio-group-item",
 		children: /* @__PURE__ */ jsx(Radio.Indicator, {
-			className: "asu:size-1.5 asu:rounded-full asu:bg-primary-foreground",
+			className: "size-1.5 rounded-full bg-primary-foreground",
 			"data-slot": "radio-group-indicator"
 		})
 	});

package/dist/components/select/select.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, controlSurface } from "../../lib/control.js";
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -72,19 +72,19 @@ function SelectTrigger({ className, children, size = "default", ...props }) {
 	const messages = useMessages();
 	const showClear = clearState?.hasValue ?? false;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("asu:relative asu:flex asu:w-full", className),
+		className: cn("relative flex w-full", className),
 		"data-slot": "select-trigger-wrapper",
 		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
 			ref: clearState?.triggerRef,
-			className: cn(controlSurface, controlFocus, "asu:peer/select-trigger asu:flex asu:w-full asu:items-center asu:justify-between", size === "sm" ? "asu:h-6 asu:gap-1 asu:px-2" : "asu:h-8 asu:gap-2 asu:px-3"),
+			className: cn(controlSurface, controlFocus, "peer/select-trigger flex w-full items-center justify-between", size === "sm" ? "h-6 gap-1 px-2" : "h-8 gap-2 px-3"),
 			...props,
 			"data-slot": "select-trigger",
 			children: [children, /* @__PURE__ */ jsxs("span", {
-				className: "asu:flex asu:shrink-0 asu:items-center asu:gap-2",
+				className: "flex shrink-0 items-center gap-2",
 				children: [showClear && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: "asu:size-3"
-				}), /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("asu:shrink-0 asu:text-foreground", size === "sm" ? "asu:size-3.5" : "asu:size-5") }) })]
+					className: "size-3"
+				}), /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("shrink-0 text-foreground", size === "sm" ? "size-3.5" : "size-5") }) })]
 			})]
 		}), showClear && clearState && /* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -93,31 +93,32 @@ function SelectTrigger({ className, children, size = "default", ...props }) {
 				event.stopPropagation();
 				clearState.onClear();
 			},
-			className: cn("asu:absolute asu:top-1/2 asu:-translate-y-1/2 asu:rounded-sm asu:text-muted-foreground asu:outline-none asu:hover:text-foreground", size === "sm" ? "asu:right-6" : "asu:right-8", "asu:peer-data-disabled/select-trigger:hidden", "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:aria-invalid:focus-visible:ring-destructive/40 asu:data-invalid:focus-visible:ring-destructive/40"),
+			className: cn("absolute top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground outline-none hover:text-foreground", size === "sm" ? "right-6" : "right-8", "peer-data-disabled/select-trigger:hidden", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40"),
 			"data-slot": "select-clear",
-			children: /* @__PURE__ */ jsx(XIcon, { className: "asu:size-3" })
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
 		})]
 	});
 }
 function SelectValue({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.Value, {
-		className: cn("asu:min-w-0 asu:truncate asu:text-left asu:data-placeholder:text-muted-foreground", className),
+		className: cn("min-w-0 truncate text-left data-placeholder:text-muted-foreground", className),
 		...props,
 		"data-slot": "select-value"
 	});
 }
 function SelectContent({ className, side = "bottom", sideOffset = 4, align = "start", alignItemWithTrigger = false, children, ...props }) {
 	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		className: popupLayerClassName,
 		side,
 		sideOffset,
 		align,
 		alignItemWithTrigger,
 		children: /* @__PURE__ */ jsx(Select.Popup, {
-			className: "asu:outline-none",
+			className: "outline-none",
 			...props,
 			"data-slot": "select-popup",
 			children: /* @__PURE__ */ jsx(Select.List, {
-				className: cn(listboxClassName, "asu:min-w-(--anchor-width)", className),
+				className: cn(listboxClassName, "min-w-(--anchor-width)", className),
 				"data-slot": "select-content",
 				children
 			})
@@ -130,11 +131,11 @@ function SelectItem({ className, children, ...props }) {
 		...props,
 		"data-slot": "select-item",
 		children: [/* @__PURE__ */ jsx(Select.ItemText, {
-			className: "asu:min-w-0 asu:flex-1 asu:truncate",
+			className: "min-w-0 flex-1 truncate",
 			children
 		}), /* @__PURE__ */ jsx(Select.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" })
 		})]
 	});
 }
@@ -147,14 +148,14 @@ function SelectGroup({ className, ...props }) {
 }
 function SelectGroupLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.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": "select-group-label"
 	});
 }
 function SelectSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.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": "select-separator"
 	});

package/dist/components/separator/separator.js

@@ -6,7 +6,7 @@ import { Separator } from "@base-ui/react/separator";
 function Separator$1({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		orientation,
-		className: cn("asu:shrink-0 asu:bg-border asu:data-[orientation=horizontal]:h-px asu:data-[orientation=horizontal]:w-full asu:data-[orientation=vertical]:w-px asu:data-[orientation=vertical]:self-stretch", className),
+		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
 		...props,
 		"data-slot": "separator"
 	});

package/dist/components/sidebar/sidebar.js

@@ -7,7 +7,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sidebar/sidebar.tsx
 function Sidebar({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
-		className: cn("asu:w-[226px] asu:bg-background asu:p-2 asu:pt-5", className),
+		className: cn("w-[226px] bg-background p-2 pt-5", className),
 		...props,
 		"data-slot": "sidebar"
 	});
@@ -15,13 +15,13 @@ function Sidebar({ className, ...props }) {
 function SidebarGroup({ label, separator = false, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [separator && /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-group-separator",
-		children: /* @__PURE__ */ jsx(Separator, { className: "asu:my-2" })
+		children: /* @__PURE__ */ jsx(Separator, { className: "my-2" })
 	}), /* @__PURE__ */ jsxs("div", {
-		className: cn("asu:mb-2", className),
+		className: cn("mb-2", className),
 		...props,
 		"data-slot": "sidebar-group",
 		children: [label && /* @__PURE__ */ jsx("div", {
-			className: "asu:px-2 asu:py-2 asu:pl-4 asu:text-xs asu:text-muted-foreground",
+			className: "px-2 py-2 pl-4 text-xs text-muted-foreground",
 			"data-slot": "sidebar-group-label",
 			children: label
 		}), children]
@@ -32,17 +32,17 @@ function SidebarItem({ render, className, active = false, disabled = false, disa
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: "asu:size-5 asu:shrink-0 asu:[&>svg]:size-5",
+			className: "size-5 shrink-0 [&>svg]:size-5",
 			"data-slot": "sidebar-item-icon",
 			children: icon
 		}),
 		/* @__PURE__ */ jsx("span", {
-			className: "asu:truncate",
+			className: "truncate",
 			children
 		}),
 		active && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: "asu:absolute asu:inset-y-0 asu:left-0 asu:w-1 asu:bg-sidebar-indicator",
+			className: "absolute inset-y-0 left-0 w-1 bg-sidebar-indicator",
 			"data-slot": "sidebar-item-indicator"
 		})
 	] });
@@ -68,12 +68,12 @@ function SidebarItem({ render, className, active = false, disabled = false, disa
 			baseProps.onClick?.(event);
 			onClick?.(event);
 		},
-		className: cn("asu:relative asu:mb-1 asu:flex asu:items-center asu:gap-3 asu:overflow-hidden asu:rounded-md asu:px-3 asu:py-2.5 asu:text-sm asu:leading-5 asu:text-foreground asu:whitespace-nowrap", "asu:hover:bg-sidebar-accent", active && "asu:bg-sidebar-accent asu:font-medium", disabled && "asu:opacity-50 asu:cursor-not-allowed", baseProps.className, className),
+		className: cn("relative mb-1 flex items-center gap-3 overflow-hidden rounded-md px-3 py-2.5 text-sm leading-5 text-foreground whitespace-nowrap", "hover:bg-sidebar-accent", active && "bg-sidebar-accent font-medium", disabled && "opacity-50 cursor-not-allowed", baseProps.className, className),
 		"data-slot": "sidebar-item"
 	}, content);
 	if (showReason) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: element }), /* @__PURE__ */ jsx(TooltipContent, { children: disabledReason })] }), /* @__PURE__ */ jsx("span", {
 		id: reasonId,
-		className: "asu:sr-only",
+		className: "sr-only",
 		"data-slot": "sidebar-item-reason",
 		children: disabledReason
 	})] });

package/dist/components/skeleton/skeleton.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:animate-pulse asu:rounded-md asu:bg-accent-selected asu:motion-reduce:animate-none", className),
+		className: cn("animate-pulse rounded-md bg-accent-selected motion-reduce:animate-none", className),
 		...props,
 		"data-slot": "skeleton"
 	});

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/spinner/spinner.d.ts
+declare const spinnerVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The spinner is an SVG that takes its colour from the text colour, so set it with a `text-*` class. An
+ * `aria-label` overrides the localized default announcement.
+ */
+export type SpinnerProps = Omit<ComponentProps<'svg'>, 'ref'> & VariantProps<typeof spinnerVariants>;
+declare function Spinner({ className, size, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion
+export { Spinner, spinnerVariants };

package/dist/components/spinner/spinner.js

@@ -0,0 +1,28 @@
+"use client";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { LoaderCircle } from "lucide-react";
+//#region src/components/spinner/spinner.tsx
+const spinnerVariants = cva("shrink-0 animate-spin motion-reduce:animate-none", {
+	variants: { size: {
+		xs: "size-3",
+		sm: "size-4",
+		md: "size-6",
+		lg: "size-8"
+	} },
+	defaultVariants: { size: "md" }
+});
+function Spinner({ className, size, ...props }) {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsx(LoaderCircle, {
+		role: "status",
+		"aria-label": messages.spinner.label,
+		className: cn(spinnerVariants({ size }), className),
+		...props,
+		"data-slot": "spinner"
+	});
+}
+//#endregion
+export { Spinner, spinnerVariants };

package/dist/components/switch/switch.js

@@ -7,11 +7,11 @@ function Switch$1({ className, size = "md", ...props }) {
 	return /* @__PURE__ */ jsx(Switch.Root, {
 		"data-size": size,
 		"data-base-ui-swipe-ignore": true,
-		className: cn("asu:group/switch asu:peer asu:relative asu:inline-flex asu:shrink-0 asu:items-center asu:rounded-full asu:p-0.5 asu:transition-colors asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:data-checked:bg-primary asu:data-unchecked:bg-input asu:data-disabled:cursor-not-allowed asu:data-disabled:opacity-50 asu:data-[size=md]:h-5 asu:data-[size=md]:w-9 asu:data-[size=sm]:h-4 asu:data-[size=sm]:w-7", className),
+		className: cn("group/switch peer relative inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=md]:h-5 data-[size=md]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7", className),
 		...props,
 		"data-slot": "switch",
 		children: /* @__PURE__ */ jsx(Switch.Thumb, {
-			className: "asu:pointer-events-none asu:block asu:rounded-full asu:bg-background asu:shadow-sm asu:transition-transform asu:group-data-[size=md]/switch:size-4 asu:group-data-[size=sm]/switch:size-3 asu:data-unchecked:translate-x-0 asu:group-data-[size=md]/switch:data-checked:translate-x-4 asu:group-data-[size=sm]/switch:data-checked:translate-x-3",
+			className: "pointer-events-none block rounded-full bg-background shadow-sm transition-transform group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 group-data-[size=md]/switch:data-checked:translate-x-4 group-data-[size=sm]/switch:data-checked:translate-x-3",
 			"data-slot": "switch-thumb"
 		})
 	});

package/dist/components/table/table.js

@@ -4,9 +4,9 @@ import { jsx } from "react/jsx-runtime";
 function Table({ className, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "table-container",
-		className: cn("asu:relative asu:w-full asu:overflow-x-auto", containerClassName),
+		className: cn("relative w-full overflow-x-auto", containerClassName),
 		children: /* @__PURE__ */ jsx("table", {
-			className: cn("asu:w-full asu:caption-bottom asu:border-collapse asu:text-sm", className),
+			className: cn("w-full caption-bottom border-collapse text-sm", className),
 			...props,
 			"data-slot": "table"
 		})
@@ -21,21 +21,21 @@ function TableHeader({ className, ...props }) {
 }
 function TableBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: cn("asu:[&_tr:hover]:bg-muted/50", className),
+		className: cn("[&_tr:hover]:bg-muted/50", className),
 		...props,
 		"data-slot": "table-body"
 	});
 }
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn("asu:group/row asu:border-b asu:border-border", className),
+		className: cn("group/row border-b border-border", className),
 		...props,
 		"data-slot": "table-row"
 	});
 }
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
-		className: cn("asu:h-10 asu:px-4 asu:py-2 asu:text-left asu:align-middle asu:text-xs asu:font-medium asu:text-muted-foreground asu:bg-table-header", className),
+		className: cn("h-10 px-4 py-2 text-left align-middle text-xs font-medium text-muted-foreground bg-table-header", className),
 		scope: "col",
 		...props,
 		"data-slot": "table-head"
@@ -43,14 +43,14 @@ function TableHead({ className, ...props }) {
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn("asu:p-4 asu:align-middle asu:text-sm asu:leading-[1.75] asu:text-foreground", className),
+		className: cn("p-4 align-middle text-sm leading-[1.75] text-foreground", className),
 		...props,
 		"data-slot": "table-cell"
 	});
 }
 function TableCaption({ className, ...props }) {
 	return /* @__PURE__ */ jsx("caption", {
-		className: cn("asu:mt-4 asu:text-sm asu:text-muted-foreground", className),
+		className: cn("mt-4 text-sm text-muted-foreground", className),
 		...props,
 		"data-slot": "table-caption"
 	});

package/dist/components/tabs/tabs.js

@@ -5,14 +5,14 @@ import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs.tsx
 function Tabs$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Root, {
-		className: cn("asu:flex asu:flex-col asu:data-[orientation=vertical]:flex-row", className),
+		className: cn("flex flex-col data-[orientation=vertical]:flex-row", className),
 		...props,
 		"data-slot": "tabs"
 	});
 }
 function TabsList({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.List, {
-		className: cn("asu:relative asu:flex asu:gap-8 asu:overflow-x-auto asu:shadow-[inset_0_-1px_0_0_var(--asu-border)] asu:data-[orientation=vertical]:flex-col asu:data-[orientation=vertical]:overflow-x-visible asu:data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--asu-border)]", className),
+		className: cn("relative flex gap-8 overflow-x-auto shadow-[inset_0_-1px_0_0_var(--color-border)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:overflow-x-visible data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-border)]", className),
 		...props,
 		"data-slot": "tabs-list",
 		children
@@ -20,14 +20,14 @@ function TabsList({ className, children, ...props }) {
 }
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
-		className: cn("asu:relative asu:h-10 asu:shrink-0 asu:rounded-sm asu:px-0 asu:text-sm asu:font-medium asu:whitespace-nowrap asu:text-muted-foreground asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:data-active:text-primary-text asu:data-disabled:opacity-50", "asu:after:pointer-events-none asu:after:absolute asu:after:inset-x-[-10px] asu:after:bottom-0 asu:after:hidden asu:after:h-0.5 asu:after:bg-primary asu:after:content-[\"\"] asu:data-active:after:block asu:data-[orientation=vertical]:after:inset-x-auto asu:data-[orientation=vertical]:after:inset-y-[-10px] asu:data-[orientation=vertical]:after:right-[-1px] asu:data-[orientation=vertical]:after:bottom-auto asu:data-[orientation=vertical]:after:h-auto asu:data-[orientation=vertical]:after:w-0.5", className),
+		className: cn("relative h-10 shrink-0 rounded-sm px-0 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/40 data-active:text-primary-text data-disabled:opacity-50", "after:pointer-events-none after:absolute after:inset-x-[-10px] after:bottom-0 after:hidden after:h-0.5 after:bg-primary after:content-[\"\"] data-active:after:block data-[orientation=vertical]:after:inset-x-auto data-[orientation=vertical]:after:inset-y-[-10px] data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:bottom-auto data-[orientation=vertical]:after:h-auto data-[orientation=vertical]:after:w-0.5", className),
 		...props,
 		"data-slot": "tabs-trigger"
 	});
 }
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
-		className: cn("asu:pt-4 asu:outline-none asu:data-[orientation=vertical]:pt-0 asu:data-[orientation=vertical]:pl-4", className),
+		className: cn("pt-4 outline-none data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4", className),
 		...props,
 		"data-slot": "tabs-content"
 	});

package/dist/components/textarea/textarea.js

@@ -18,7 +18,7 @@ function Textarea({ className, id, name, disabled, autoFocus, value, defaultValu
 			...rest,
 			"data-slot": "textarea"
 		}),
-		className: cn(controlSurface, controlFocus, "asu:min-h-16 asu:px-3 asu:py-2 asu:field-sizing-content", className)
+		className: cn(controlSurface, controlFocus, "min-h-16 px-3 py-2 field-sizing-content", className)
 	});
 }
 //#endregion

package/dist/components/toast/toast.js

@@ -22,18 +22,18 @@ const TOAST_ICON = {
 	loading: LoaderCircle
 };
 const TOAST_ICON_CLASSNAME = {
-	success: "asu:text-success",
-	info: "asu:text-info",
-	warning: "asu:text-warning",
-	error: "asu:text-destructive-text",
-	loading: "asu:text-info"
+	success: "text-success",
+	info: "text-info",
+	warning: "text-warning",
+	error: "text-destructive-text",
+	loading: "text-info"
 };
 const TOAST_BACKGROUND_CLASSNAME = {
-	success: "asu:bg-success-subtle",
-	info: "asu:bg-info-subtle",
-	warning: "asu:bg-warning-subtle",
-	error: "asu:bg-destructive-subtle",
-	loading: "asu:bg-info-subtle"
+	success: "bg-success-subtle",
+	info: "bg-info-subtle",
+	warning: "bg-warning-subtle",
+	error: "bg-destructive-subtle",
+	loading: "bg-info-subtle"
 };
 const toastManager = Toast.createToastManager();
 function isToastPromiseMessage(value) {
@@ -88,24 +88,24 @@ function ToastItem({ toast: toastObject }) {
 	const Icon = TOAST_ICON[type];
 	return /* @__PURE__ */ jsxs(Toast.Root, {
 		toast: toastObject,
-		className: cn("asu:relative asu:flex asu:gap-2 asu:rounded-md asu:p-2 asu:pr-8 asu:text-sm asu:text-foreground asu:shadow-lg asu:dark:ring-1 asu:dark:ring-border asu:data-limited:hidden", TOAST_BACKGROUND_CLASSNAME[type]),
+		className: cn("relative flex gap-2 rounded-md p-2 pr-8 text-sm text-foreground shadow-lg dark:ring-1 dark:ring-border data-limited:hidden", TOAST_BACKGROUND_CLASSNAME[type]),
 		"data-slot": "toast",
 		children: [/* @__PURE__ */ jsxs(Toast.Content, {
-			className: "asu:flex asu:flex-1 asu:gap-2",
+			className: "flex flex-1 gap-2",
 			children: [/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
-				className: cn("asu:size-4 asu:shrink-0", TOAST_ICON_CLASSNAME[type], type === "loading" && "asu:animate-spin")
+				className: cn("size-4 shrink-0", TOAST_ICON_CLASSNAME[type], type === "loading" && "animate-spin")
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "asu:flex asu:flex-1 asu:flex-col asu:gap-0.5",
+				className: "flex flex-1 flex-col gap-0.5",
 				children: [
-					/* @__PURE__ */ jsx(Toast.Title, { className: "asu:font-medium" }),
+					/* @__PURE__ */ jsx(Toast.Title, { className: "font-medium" }),
 					/* @__PURE__ */ jsx(Toast.Description, {}),
 					toastObject.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
 						...toastObject.actionProps,
 						className: cn(buttonVariants({
 							variant: "outline",
 							size: "sm"
-						}), "asu:mt-1 asu:self-start", toastObject.actionProps.className)
+						}), "mt-1 self-start", toastObject.actionProps.className)
 					})
 				]
 			})]
@@ -114,7 +114,7 @@ function ToastItem({ toast: toastObject }) {
 			className: cn(buttonVariants({
 				variant: "ghost",
 				size: "icon"
-			}), "asu:absolute asu:top-1 asu:right-1 asu:size-6"),
+			}), "absolute top-1 right-1 size-6"),
 			children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
 		})]
 	});
@@ -155,7 +155,7 @@ function Toaster({ limit = 3 }) {
 		toastManager,
 		limit,
 		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
-			className: "asu:fixed asu:top-4 asu:right-4 asu:z-[1010] asu:flex asu:w-90 asu:max-w-[calc(100vw-2rem)] asu:flex-col asu:gap-2",
+			className: "fixed top-4 right-4 z-[1010] flex w-90 max-w-[calc(100vw-2rem)] flex-col gap-2",
 			"data-slot": "toaster",
 			children: /* @__PURE__ */ jsx(ToastList, {})
 		}) })

package/dist/components/tooltip/tooltip.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../lib/cn.js";
+import { popupLayerClassName } from "../../lib/popup.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -29,15 +30,16 @@ function TooltipTrigger({ className, delay, ...props }) {
 }
 function TooltipContent({ className, side = "top", sideOffset = 6, align, children, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		className: popupLayerClassName,
 		side,
 		sideOffset,
 		align,
 		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
-			className: cn("asu:rounded-sm asu:bg-tooltip asu:px-2 asu:py-1 asu:text-sm asu:leading-5 asu:text-tooltip-foreground asu:max-w-xs", className),
+			className: cn("rounded-sm bg-tooltip px-2 py-1 text-sm leading-5 text-tooltip-foreground max-w-xs", className),
 			...props,
 			"data-slot": "tooltip-content",
 			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, {
-				className: "asu:size-2.5 asu:rotate-45 asu:bg-tooltip asu:data-[side=bottom]:-top-1 asu:data-[side=left]:-right-1 asu:data-[side=right]:-left-1 asu:data-[side=top]:-bottom-1",
+				className: "size-2.5 rotate-45 bg-tooltip data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1",
 				"data-slot": "tooltip-arrow"
 			})]
 		})

package/dist/config/messages.d.ts

@@ -4,6 +4,10 @@ export interface Messages {
   readonly button: {
     readonly loading: string;
   };
+  /** Accessible name of a Spinner, announced as a status. */
+  readonly spinner: {
+    readonly label: string;
+  };
   readonly numberField: {
     readonly increment: string;
     readonly decrement: string;

package/dist/config/messages.js

@@ -5,6 +5,7 @@ function deepFreeze(value) {
 }
 const enUS = deepFreeze({
 	button: { loading: "Loading" },
+	spinner: { label: "Loading" },
 	numberField: {
 		increment: "Increase",
 		decrement: "Decrease"
@@ -50,6 +51,7 @@ const enUS = deepFreeze({
 });
 const zhCN = deepFreeze({
 	button: { loading: "加载中" },
+	spinner: { label: "加载中" },
 	numberField: {
 		increment: "增加",
 		decrement: "减少"