@api7/ui-components 0.4.0 → 0.6.0

package/dist/components/select/select.js

@@ -1,13 +1,13 @@
 "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";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { Select } from "@base-ui/react/select";
-//#region src/components/select/select.tsx
+// src/components/select/select.tsx
 const SelectClearContext = createContext(void 0);
 /**
 * Pass `items` (a value-to-label map, e.g. `{ http: 'HTTP' }`, or a `{ label, value }[]` list)
@@ -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,17 +148,16 @@ 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"
 	});
 }
-//#endregion
 export { Select$1 as Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/separator/separator.d.ts

@@ -1,8 +1,6 @@
 import { Separator } from "@base-ui/react/separator";
-//#region src/components/separator/separator.d.ts
 export type SeparatorProps = Omit<Separator.Props, 'className'> & {
   className?: string;
 };
 declare function Separator$1({ className, orientation, ...props }: SeparatorProps): import("react").JSX.Element;
-//#endregion
 export { Separator$1 as Separator };

package/dist/components/separator/separator.js

@@ -2,14 +2,13 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator } from "@base-ui/react/separator";
-//#region src/components/separator/separator.tsx
+// src/components/separator/separator.tsx
 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"
 	});
 }
-//#endregion
 export { Separator$1 as Separator };

package/dist/components/sidebar/sidebar.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactElement, ReactNode } from "react";
-//#region src/components/sidebar/sidebar.d.ts
 export type SidebarProps = ComponentProps<'nav'>;
 declare function Sidebar({ className, ...props }: SidebarProps): import("react").JSX.Element;
 export type SidebarGroupProps = ComponentProps<'div'> & {
@@ -17,5 +16,4 @@ export type SidebarItemProps = Omit<ComponentProps<'a'>, 'className' | 'children
   children?: ReactNode;
 };
 declare function SidebarItem({ render, className, active, disabled, disabledReason, icon, children, onClick, href, tabIndex, ...props }: SidebarItemProps): import("react").JSX.Element;
-//#endregion
 export { Sidebar, SidebarGroup, SidebarItem };

package/dist/components/sidebar/sidebar.js

@@ -1,13 +1,13 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { Separator } from "../separator/separator.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Separator } from "../separator/separator.js";
 import { cloneElement, useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/sidebar/sidebar.tsx
+// 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,16 +68,15 @@ 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
 	})] });
 	return element;
 }
-//#endregion
 export { Sidebar, SidebarGroup, SidebarItem };

package/dist/components/skeleton/skeleton.d.ts

@@ -1,6 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/skeleton/skeleton.d.ts
 export type SkeletonProps = ComponentProps<'div'>;
 declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;
-//#endregion
 export { Skeleton };

package/dist/components/skeleton/skeleton.js

@@ -1,12 +1,11 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/skeleton/skeleton.tsx
+// 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"
 	});
 }
-//#endregion
 export { Skeleton };

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+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;
+export { Spinner, spinnerVariants };

package/dist/components/spinner/spinner.js

@@ -0,0 +1,27 @@
+"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";
+// 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"
+	});
+}
+export { Spinner, spinnerVariants };

package/dist/components/switch/switch.d.ts

@@ -1,9 +1,7 @@
 import { Switch } from "@base-ui/react/switch";
-//#region src/components/switch/switch.d.ts
 export type SwitchProps = Omit<Switch.Root.Props, 'className'> & {
   className?: string;
   size?: 'sm' | 'md';
 };
 declare function Switch$1({ className, size, ...props }: SwitchProps): import("react").JSX.Element;
-//#endregion
 export { Switch$1 as Switch };

package/dist/components/switch/switch.js

@@ -2,19 +2,18 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
-//#region src/components/switch/switch.tsx
+// src/components/switch/switch.tsx
 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"
 		})
 	});
 }
-//#endregion
 export { Switch$1 as Switch };

package/dist/components/table/table.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/table/table.d.ts
 export type TableProps = Omit<ComponentProps<'table'>, 'className'> & {
   className?: string;
   containerClassName?: string;
@@ -29,5 +28,4 @@ export type TableCaptionProps = Omit<ComponentProps<'caption'>, 'className'> & {
   className?: string;
 };
 declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
-//#endregion
 export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };

package/dist/components/table/table.js

@@ -1,12 +1,12 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/table/table.tsx
+// src/components/table/table.tsx
 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,17 +43,16 @@ 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"
 	});
 }
-//#endregion
 export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };

package/dist/components/tabs/tabs.d.ts

@@ -1,5 +1,4 @@
 import { Tabs } from "@base-ui/react/tabs";
-//#region src/components/tabs/tabs.d.ts
 export type TabsProps = Omit<Tabs.Root.Props, 'className'> & {
   className?: string;
 };
@@ -16,5 +15,4 @@ export type TabsContentProps = Omit<Tabs.Panel.Props, 'className'> & {
   className?: string;
 };
 declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;
-//#endregion
 export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/tabs/tabs.js

@@ -2,17 +2,17 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
-//#region src/components/tabs/tabs.tsx
+// 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,17 +20,16 @@ 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"
 	});
 }
-//#endregion
 export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/textarea/textarea.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Input } from "@base-ui/react/input";
-//#region src/components/textarea/textarea.d.ts
 /**
  * Base UI's Field.Control (which Input wraps) derives `id`, `name`, `disabled`,
  * `autoFocus`, the controlled/uncontrolled `value`/`defaultValue` and the field's
@@ -23,5 +22,4 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'className' | 'valu
   onValueChange?: Input.Props['onValueChange'];
 };
 declare function Textarea({ className, id, name, disabled, autoFocus, value, defaultValue, onChange, onValueChange, ...rest }: TextareaProps): import("react").JSX.Element;
-//#endregion
 export { Textarea };

package/dist/components/textarea/textarea.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { controlFocus, controlSurface } from "../../lib/control.js";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
-//#region src/components/textarea/textarea.tsx
+// src/components/textarea/textarea.tsx
 function Textarea({ className, id, name, disabled, autoFocus, value, defaultValue, onChange, onValueChange, ...rest }) {
 	return /* @__PURE__ */ jsx(Input, {
 		id,
@@ -18,8 +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
 export { Textarea };

package/dist/components/toast/toast.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { CircleCheck } from "lucide-react";
-//#region src/components/toast/toast.d.ts
 export type ToastActionOptions = React.ComponentPropsWithoutRef<'button'>;
 export interface ToastOptions {
   description?: ReactNode;
@@ -43,5 +42,4 @@ export interface ToasterProps {
  * mounted, only the first one renders and the rest take over in order when it unmounts.
  */
 declare function Toaster({ limit }: ToasterProps): import("react").JSX.Element | null;
-//#endregion
 export { Toaster };

package/dist/components/toast/toast.js

@@ -6,7 +6,7 @@ import { useEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, Info, LoaderCircle, TriangleAlert, X } from "lucide-react";
 import { Toast } from "@base-ui/react/toast";
-//#region src/components/toast/toast.tsx
+// src/components/toast/toast.tsx
 const DEFAULT_TIMEOUT = {
 	success: 3e3,
 	info: 3e3,
@@ -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,11 +155,10 @@ 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, {})
 		}) })
 	});
 }
-//#endregion
 export { DEFAULT_TIMEOUT, TOAST_BACKGROUND_CLASSNAME, TOAST_ICON, TOAST_ICON_CLASSNAME, Toaster, toast, toastManager };

package/dist/components/tooltip/tooltip.d.ts

@@ -1,5 +1,4 @@
 import { Tooltip } from "@base-ui/react/tooltip";
-//#region src/components/tooltip/tooltip.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -14,5 +13,4 @@ export type TooltipContentProps = WithClassName<Tooltip.Popup.Props> & {
   align?: Tooltip.Positioner.Props['align'];
 };
 declare function TooltipContent({ className, side, sideOffset, align, children, ...props }: TooltipContentProps): import("react").JSX.Element;
-//#endregion
 export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };