@api7/ui-components 0.4.0 → 0.6.0

package/dist/components/button/button.js

@@ -5,27 +5,27 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { LoaderCircle } from "lucide-react";
 import { Button } from "@base-ui/react/button";
-//#region src/components/button/button.tsx
-const buttonVariants = cva("asu:inline-flex asu:shrink-0 asu:items-center asu:justify-center asu:gap-2 asu:rounded-md asu:border asu:border-transparent asu:text-sm asu:font-medium asu:whitespace-nowrap asu:transition-colors asu:outline-none asu:select-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:disabled:pointer-events-none asu:disabled:opacity-50 asu:data-disabled:pointer-events-none asu:data-disabled:opacity-50 asu:[&_svg]:pointer-events-none asu:[&_svg]:shrink-0 asu:[&_svg:not([class*='size-'])]:size-3.5", {
+// src/components/button/button.tsx
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
 	variants: {
 		variant: {
-			primary: "asu:bg-primary asu:text-primary-foreground asu:hover:bg-primary-hover",
-			secondary: "asu:bg-secondary asu:text-secondary-foreground asu:hover:bg-secondary-hover",
-			outline: "asu:border-input asu:bg-background asu:text-foreground asu:hover:bg-accent asu:hover:text-accent-foreground",
-			ghost: "asu:text-foreground asu:hover:bg-accent asu:hover:text-accent-foreground",
-			destructive: "asu:bg-destructive asu:text-destructive-foreground asu:hover:bg-destructive-hover",
-			link: "asu:text-primary-text asu:underline-offset-4 asu:hover:underline"
+			primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+			outline: "border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+			ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+			link: "text-primary-text underline-offset-4 hover:underline"
 		},
 		size: {
-			sm: "asu:h-6 asu:px-2 asu:text-xs",
-			md: "asu:h-8 asu:px-3",
-			lg: "asu:h-10 asu:px-4",
-			icon: "asu:size-8 asu:px-0"
+			sm: "h-6 px-2 text-xs",
+			md: "h-8 px-3",
+			lg: "h-10 px-4",
+			icon: "size-8 px-0"
 		}
 	},
 	compoundVariants: [{
 		variant: "link",
-		className: "asu:h-auto asu:px-0"
+		className: "h-auto px-0"
 	}],
 	defaultVariants: {
 		variant: "primary",
@@ -48,15 +48,14 @@ function Button$1({ className, variant, size, loading = false, loadingLabel, dis
 		children: [
 			loading && /* @__PURE__ */ jsx(LoaderCircle, {
 				"aria-hidden": "true",
-				className: "asu:animate-spin"
+				className: "animate-spin"
 			}),
 			loading && /* @__PURE__ */ jsx("span", {
-				className: "asu:sr-only",
+				className: "sr-only",
 				children: `${loadingLabel ?? messages.button.loading} `
 			}),
 			children
 		]
 	});
 }
-//#endregion
 export { Button$1 as Button, buttonVariants };

package/dist/components/calendar/calendar.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { DayPicker } from "react-day-picker";
-//#region src/components/calendar/calendar.d.ts
 export type CalendarProps = ComponentProps<typeof DayPicker>;
 /**
  * Wraps react-day-picker's DayPicker with this library's visual conventions. Locale falls back to
@@ -12,8 +11,7 @@ export type CalendarProps = ComponentProps<typeof DayPicker>;
  * look of their own, such as `today`, with the app's own class; the library's state looks (for
  * example `selected`) cannot be replaced. Today is not highlighted unless `classNames.today` is set,
  * for example `classNames={{ today: 'my-today' }}` with `.my-today > button { border: 1px solid
- * var(--asu-primary); }` in the app's CSS.
+ * var(--color-primary); }` in the app's CSS.
  */
 declare function Calendar({ className, classNames, locale, navLayout, components, ...props }: CalendarProps): import("react").JSX.Element;
-//#endregion
 export { Calendar };

package/dist/components/calendar/calendar.js

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

package/dist/components/checkbox/checkbox.d.ts

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

package/dist/components/checkbox/checkbox.js

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

package/dist/components/combobox/combobox.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Combobox } from "@base-ui/react/combobox";
-//#region src/components/combobox/combobox.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -44,5 +43,4 @@ export type ComboboxChipProps = WithClassName<Combobox.Chip.Props> & {
 declare function ComboboxChip({ className, children, removeLabel, ...props }: ComboboxChipProps): import("react").JSX.Element;
 export type ComboboxChipsInputProps = WithClassName<Combobox.Input.Props>;
 declare function ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps): import("react").JSX.Element;
-//#endregion
 export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue };

package/dist/components/combobox/combobox.js

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

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

@@ -1,7 +1,6 @@
 import { DataTableColumnFilter } from "./filter-header.js";
 import { ComponentProps, ReactNode } from "react";
 import { ColumnDef, ColumnFiltersState, PaginationState, RowData, SortingState, TableFeatures } from "@tanstack/react-table";
-//#region src/components/data-table/data-table.d.ts
 declare const dataTableFeatures: {
   columnFilteringFeature: import("@tanstack/react-table").TableFeature;
   columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
@@ -84,5 +83,4 @@ export interface DataTableProps<TData extends RowData> {
 }
 declare function DataTable<TData extends RowData>({ columns, data, getRowId, sorting, defaultSorting, onSortingChange, manualSorting, columnFilters, onColumnFiltersChange, manualFiltering, pagination, defaultPagination, onPaginationChange, manualPagination, rowCount, pageSizeOptions, hidePagination, paginationLabel, loading, empty, toolbar, className }: DataTableProps<TData>): import("react").JSX.Element;
 declare function DataTableRowActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-//#endregion
 export { DataTable, type DataTableColumnDef, type DataTableFeatures, DataTableRowActions, createDataTableColumnHelper, dataTableFeatures };

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

@@ -9,7 +9,7 @@ import { SortHeader } from "./sort-header.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { columnFilteringFeature, columnVisibilityFeature, constructFilterFn, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
-//#region src/components/data-table/data-table.tsx
+// src/components/data-table/data-table.tsx
 const LOADING_ROW_COUNT = 4;
 const filterFn_oneOf = constructFilterFn({
 	filter: (value, chosen) => chosen.includes(String(value)),
@@ -110,11 +110,11 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 		hidePagination
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("asu:w-full", className),
+		className: cn("w-full", className),
 		"data-slot": "data-table",
 		children: [
 			toolbar ? /* @__PURE__ */ jsx("div", {
-				className: "asu:flex asu:justify-end asu:gap-2 asu:pb-3",
+				className: "flex justify-end gap-2 pb-3",
 				"data-slot": "data-table-toolbar",
 				children: toolbar
 			}) : null,
@@ -132,7 +132,7 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 					className: header.column.columnDef.meta?.className,
 					"aria-sort": ariaSort,
 					children: header.isPlaceholder ? null : filter ? /* @__PURE__ */ jsxs("div", {
-						className: "asu:flex asu:items-center asu:gap-1",
+						className: "flex items-center gap-1",
 						children: [title, /* @__PURE__ */ jsx(FilterHeader, {
 							column: header.column,
 							filter
@@ -140,11 +140,11 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 					}) : title
 				}, header.id);
 			}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: LOADING_ROW_COUNT }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
-				className: "asu:h-14",
-				children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "asu:h-4 asu:w-full" }) }, column.id))
+				className: "h-14",
+				children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, column.id))
 			}, `skeleton-${rowIndex}`)) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 				colSpan: table.getVisibleLeafColumns().length,
-				className: "asu:h-[200px] asu:text-center asu:text-xl asu:font-medium asu:text-muted-foreground",
+				className: "h-[200px] text-center text-xl font-medium text-muted-foreground",
 				children: empty ?? messages.dataTable.empty
 			}) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
 				className: cell.column.columnDef.meta?.className,
@@ -170,10 +170,9 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 }
 function DataTableRowActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("asu:opacity-0 asu:group-hover/row:opacity-100 asu:group-focus-within/row:opacity-100", className),
+		className: cn("opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100", className),
 		...props,
 		"data-slot": "data-table-row-actions"
 	});
 }
-//#endregion
 export { DataTable, DataTableRowActions, createDataTableColumnHelper, dataTableFeatures };

package/dist/components/data-table/filter-header.d.ts

@@ -1,7 +1,6 @@
 import "./data-table.js";
 import { ReactNode } from "react";
 import { RowData } from "@tanstack/react-table";
-//#region src/components/data-table/filter-header.d.ts
 export interface DataTableColumnFilterOption {
   value: string;
   label: ReactNode;
@@ -18,5 +17,4 @@ export interface DataTableColumnFilter {
    * checked: the last checked value cannot be unchecked, and Reset checks the default again.
    */
   defaultValue?: string[];
-}
-//#endregion
+}

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

@@ -4,7 +4,7 @@ import { Button } from "../button/button.js";
 import { Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../menu/menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Funnel } from "lucide-react";
-//#region src/components/data-table/filter-header.tsx
+// src/components/data-table/filter-header.tsx
 function FilterHeader({ column, filter }) {
 	const messages = useMessages();
 	const filterValue = column.getFilterValue();
@@ -19,7 +19,7 @@ function FilterHeader({ column, filter }) {
 		render: /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			size: "icon",
-			className: "asu:size-6",
+			className: "size-6",
 			"aria-label": active ? messages.dataTable.filterActive({
 				label: filter.label,
 				count: chosen.length
@@ -27,18 +27,18 @@ function FilterHeader({ column, filter }) {
 		}),
 		children: /* @__PURE__ */ jsx(Funnel, {
 			"aria-hidden": "true",
-			className: active ? "asu:text-primary-text asu:fill-current" : "asu:text-muted-foreground"
+			className: active ? "text-primary-text fill-current" : "text-muted-foreground"
 		})
 	}), /* @__PURE__ */ jsxs(MenuContent, {
 		align: "start",
-		className: "asu:min-w-48",
+		className: "min-w-48",
 		children: [
 			filter.options.map((option) => /* @__PURE__ */ jsxs(MenuCheckboxItem, {
 				checked: chosen.includes(option.value),
 				disabled: required && chosen.length === 1 && chosen.includes(option.value),
 				onCheckedChange: (on) => change(on ? [...chosen, option.value] : chosen.filter((value) => value !== option.value)),
 				children: [option.label, option.count !== void 0 && /* @__PURE__ */ jsx("span", {
-					className: "asu:ml-auto asu:pl-4 asu:text-muted-foreground",
+					className: "ml-auto pl-4 text-muted-foreground",
 					children: option.count
 				})]
 			}, option.value)),
@@ -51,5 +51,4 @@ function FilterHeader({ column, filter }) {
 		]
 	})] });
 }
-//#endregion
 export { FilterHeader };

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

@@ -2,16 +2,15 @@
 import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
-//#region src/components/data-table/sort-header.tsx
+// src/components/data-table/sort-header.tsx
 function SortHeader({ column, children }) {
 	const sorted = column.getIsSorted();
 	const Icon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ChevronsUpDown;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick: column.getToggleSortingHandler(),
-		className: cn("asu:inline-flex asu:items-center asu:gap-1 asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", sorted ? "asu:text-foreground" : "asu:text-muted-foreground"),
-		children: [children, /* @__PURE__ */ jsx(Icon, { className: "asu:size-3.5" })]
+		className: cn("inline-flex items-center gap-1 outline-none focus-visible:ring-2 focus-visible:ring-ring/40", sorted ? "text-foreground" : "text-muted-foreground"),
+		children: [children, /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })]
 	});
 }
-//#endregion
 export { SortHeader };

package/dist/components/date-picker/date-picker.d.ts

@@ -1,7 +1,6 @@
 import { CalendarProps } from "../calendar/calendar.js";
 import { FocusEventHandler } from "react";
 import { DateRange, DateRange as DateRange$1 } from "react-day-picker";
-//#region src/components/date-picker/date-picker.d.ts
 export interface DatePickerProps {
   /** Controlled value. Passing the `value` key at all makes the picker controlled, so `value={undefined}` clears it. */
   value?: Date;
@@ -51,5 +50,4 @@ export interface DateRangePickerProps {
 }
 /** Popover trigger + two-month range Calendar, with optional preset ranges listed beside the calendar. */
 declare function DateRangePicker(props: DateRangePickerProps): import("react").JSX.Element;
-//#endregion
 export { DatePicker, type DateRange$1 as DateRange, DateRangePicker };