@api7/ui-components 0.4.0 → 0.6.0

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

@@ -0,0 +1,67 @@
+"use client";
+import { useMessages } from "../../config/config-provider.js";
+import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./field.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { InfoIcon } from "lucide-react";
+// src/components/field/labeled-field.tsx
+/** Appended inside a label so the accessible name reads "Name Optional". */
+function OptionalMarker({ label }) {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "font-medium text-muted-foreground",
+		children: [" ", label ?? messages.form.optional]
+	});
+}
+/** Info icon button next to a label; kept outside the label so clicking it does not focus the control. */
+function LabelTooltip({ content, label }) {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label ?? messages.form.moreInfo,
+			className: "inline-flex text-muted-foreground"
+		}),
+		children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: content })] });
+}
+/**
+* A form row: label, optional marker, label tooltip, control, description and errors. It
+* takes the field state as props, so any form library or plain React state can drive it.
+*/
+function LabeledField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout = "stacked", group = false, name, invalid = false, touched, dirty, errors = [], children }) {
+	const labelRow = label && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsxs(group ? FieldsetLegend : FieldLabel, { children: [label, optional && /* @__PURE__ */ jsx(OptionalMarker, { label: optionalLabel })] }), labelTooltip && /* @__PURE__ */ jsx(LabelTooltip, {
+			content: labelTooltip,
+			label: moreInfoLabel
+		})]
+	});
+	let body;
+	if (group) body = /* @__PURE__ */ jsxs(Fieldset, { children: [labelRow, children] });
+	else if (layout === "stacked") body = /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] });
+	else body = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-row items-center gap-2.5",
+		children: layout === "inline-end" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [children, labelRow] })
+	});
+	return /* @__PURE__ */ jsxs(Field, {
+		name,
+		invalid,
+		touched,
+		dirty,
+		className,
+		"data-slot": "form-item",
+		children: [
+			body,
+			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+			invalid && errors.length > 0 && /* @__PURE__ */ jsx(FieldError, {
+				match: true,
+				children: errors.map((message) => /* @__PURE__ */ jsx("span", {
+					className: "block",
+					children: message
+				}, message))
+			})
+		]
+	});
+}
+export { LabeledField };

package/dist/components/form/choice-fields.d.ts

@@ -2,7 +2,6 @@ import { FormItemProps } from "./form-item.js";
 import { NumberFieldProps } from "../number-field/number-field.js";
 import { SelectProps } from "../select/select.js";
 import { ReactNode } from "react";
-//#region src/components/form/choice-fields.d.ts
 export type NumberFieldFieldProps = Omit<FormItemProps, 'layout'> & Omit<NumberFieldProps, 'name' | 'value' | 'defaultValue' | 'onValueChange' | 'onBlur' | 'className'>;
 export declare function FormNumberField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...numberFieldProps }: NumberFieldFieldProps): import("react").JSX.Element;
 export type SelectFieldProps = Omit<FormItemProps, 'layout'> & Pick<SelectProps, 'items' | 'multiple' | 'clearable' | 'disabled' | 'readOnly'> & {
@@ -24,5 +23,4 @@ export interface ComboboxFieldProps<Item> extends Omit<FormItemProps, 'layout'>
   itemToStringValue?: (item: Item) => string;
   children?: (item: Item) => ReactNode;
 }
-export declare function ComboboxField<Item>({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, items, multiple, placeholder, disabled, itemToStringLabel, itemToStringValue, children }: ComboboxFieldProps<Item>): import("react").JSX.Element;
-//#endregion
+export declare function ComboboxField<Item>({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, items, multiple, placeholder, disabled, itemToStringLabel, itemToStringValue, children }: ComboboxFieldProps<Item>): import("react").JSX.Element;

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

@@ -6,7 +6,7 @@ import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/form/choice-fields.tsx
+// src/components/form/choice-fields.tsx
 function FormNumberField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...numberFieldProps }) {
 	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(FormItem, {
@@ -119,5 +119,4 @@ function ComboboxField({ label, description, labelTooltip, optional, optionalLab
 		})
 	});
 }
-//#endregion
 export { ComboboxField, FormNumberField, SelectField };

package/dist/components/form/date-fields.d.ts

@@ -1,6 +1,5 @@
 import { FormItemProps } from "./form-item.js";
 import { DatePickerProps, DateRangePickerProps } from "../date-picker/date-picker.js";
-//#region src/components/form/date-fields.d.ts
 type BoundPickerProps = 'value' | 'defaultValue' | 'onValueChange' | 'onOpenChange' | 'onBlur' | 'className';
 export type DatePickerFieldProps = Omit<FormItemProps, 'layout'> & Omit<DatePickerProps, BoundPickerProps>;
 export type DateRangePickerFieldProps = Omit<FormItemProps, 'layout'> & Omit<DateRangePickerProps, BoundPickerProps>;
@@ -8,5 +7,4 @@ export type DateRangePickerFieldProps = Omit<FormItemProps, 'layout'> & Omit<Dat
 export declare function DatePickerField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...pickerProps }: DatePickerFieldProps): import("react").JSX.Element;
 /** A DateRangePicker bound to the enclosing form field; the field value is a `DateRange` or `undefined`. */
 export declare function DateRangePickerField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...pickerProps }: DateRangePickerFieldProps): import("react").JSX.Element;
-//#endregion
 export {};

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

@@ -4,11 +4,11 @@ import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
 import { Suspense, lazy, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/form/date-fields.tsx
+// src/components/form/date-fields.tsx
 const DatePicker = lazy(() => import("../date-picker/date-picker.js").then((m) => ({ default: m.DatePicker })));
 const DateRangePicker = lazy(() => import("../date-picker/date-picker.js").then((m) => ({ default: m.DateRangePicker })));
 function PickerFallback() {
-	return /* @__PURE__ */ jsx(Skeleton, { className: "asu:h-8 asu:w-full" });
+	return /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" });
 }
 /**
 * Tracks whether the calendar popover is open. Opening it moves focus off the trigger; that blur
@@ -73,5 +73,4 @@ function DateRangePickerField({ label, description, labelTooltip, optional, opti
 		})
 	});
 }
-//#endregion
 export { DatePickerField, DateRangePickerField };

package/dist/components/form/errors.d.ts

@@ -1,3 +1 @@
-//#region src/components/form/errors.d.ts
-export declare function formatFieldErrors(errors: readonly unknown[]): string[];
-//#endregion
+export declare function formatFieldErrors(errors: readonly unknown[]): string[];

package/dist/components/form/errors.js

@@ -1,4 +1,4 @@
-//#region src/components/form/errors.ts
+// src/components/form/errors.ts
 function formatFieldErrors(errors) {
 	const messages = [];
 	for (const error of errors) {
@@ -7,5 +7,4 @@ function formatFieldErrors(errors) {
 	}
 	return messages;
 }
-//#endregion
 export { formatFieldErrors };

package/dist/components/form/form-context.d.ts

@@ -1,3 +1 @@
-//#region src/components/form/form-context.d.ts
-export declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
-//#endregion
+export declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;

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

@@ -1,6 +1,5 @@
 "use client";
 import { createFormHookContexts } from "@tanstack/react-form";
-//#region src/components/form/form-context.ts
+// src/components/form/form-context.ts
 const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();
-//#endregion
 export { fieldContext, formContext, useFieldContext, useFormContext };

package/dist/components/form/form-item.d.ts

@@ -1,18 +1,7 @@
+import { LabeledFieldLayout, LabeledFieldProps } from "../field/labeled-field.js";
 import { ReactNode } from "react";
-//#region src/components/form/form-item.d.ts
-export type FormItemLayout = 'stacked' | 'inline-end' | 'inline-start';
-export interface FormItemProps {
-  label?: ReactNode;
-  description?: ReactNode;
-  /** Info icon next to the label that shows this content in a tooltip. */
-  labelTooltip?: ReactNode;
-  /** Appends the "Optional" marker to the label. */
-  optional?: boolean;
-  optionalLabel?: string;
-  moreInfoLabel?: string;
-  className?: string;
-  layout?: FormItemLayout;
-}
+export type FormItemLayout = LabeledFieldLayout;
+export type FormItemProps = Pick<LabeledFieldProps, 'label' | 'description' | 'labelTooltip' | 'optional' | 'optionalLabel' | 'moreInfoLabel' | 'className' | 'layout'>;
 /** Reads the bound field and returns what FormItem and controls need. */
 export declare function useFieldState(): {
   name: string;
@@ -21,7 +10,7 @@ export declare function useFieldState(): {
   touched: boolean;
   dirty: boolean;
 };
-export declare function FormItem({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout, children }: FormItemProps & {
+/** LabeledField bound to the TanStack Form field around it. */
+export declare function FormItem(props: FormItemProps & Pick<LabeledFieldProps, 'group'> & {
   children: ReactNode;
-}): import("react").JSX.Element;
-//#endregion
+}): import("react").JSX.Element;

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

@@ -1,12 +1,9 @@
 "use client";
-import { useMessages } from "../../config/config-provider.js";
-import { Field, FieldDescription, FieldError, FieldLabel } from "../field/field.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { LabeledField } from "../field/labeled-field.js";
 import { useFieldContext } from "./form-context.js";
 import { formatFieldErrors } from "./errors.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { InfoIcon } from "lucide-react";
-//#region src/components/form/form-item.tsx
+import { jsx } from "react/jsx-runtime";
+// src/components/form/form-item.tsx
 /** Reads the bound field and returns what FormItem and controls need. */
 function useFieldState() {
 	const field = useFieldContext();
@@ -20,57 +17,11 @@ function useFieldState() {
 		dirty: field.state.meta.isDirty
 	};
 }
-/** Appended inside a label so the accessible name reads "Name Optional". */
-function OptionalMarker({ label }) {
-	const messages = useMessages();
-	return /* @__PURE__ */ jsxs("span", {
-		className: "asu:font-medium asu:text-muted-foreground",
-		children: [" ", label ?? messages.form.optional]
+/** LabeledField bound to the TanStack Form field around it. */
+function FormItem(props) {
+	return /* @__PURE__ */ jsx(LabeledField, {
+		...props,
+		...useFieldState()
 	});
 }
-/** Info icon button next to a label; kept outside the label so clicking it does not focus the control. */
-function LabelTooltip({ content, label }) {
-	const messages = useMessages();
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-		render: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": label ?? messages.form.moreInfo,
-			className: "asu:inline-flex asu:text-muted-foreground"
-		}),
-		children: /* @__PURE__ */ jsx(InfoIcon, { className: "asu:size-3.5" })
-	}), /* @__PURE__ */ jsx(TooltipContent, { children: content })] });
-}
-function FormItem({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout = "stacked", children }) {
-	const { name, invalid, errors, touched, dirty } = useFieldState();
-	const labelRow = label && /* @__PURE__ */ jsxs("div", {
-		className: "asu:flex asu:items-center asu:gap-1",
-		children: [/* @__PURE__ */ jsxs(FieldLabel, { children: [label, optional && /* @__PURE__ */ jsx(OptionalMarker, { label: optionalLabel })] }), labelTooltip && /* @__PURE__ */ jsx(LabelTooltip, {
-			content: labelTooltip,
-			label: moreInfoLabel
-		})]
-	});
-	return /* @__PURE__ */ jsxs(Field, {
-		name,
-		invalid,
-		touched,
-		dirty,
-		className,
-		"data-slot": "form-item",
-		children: [
-			layout === "stacked" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] }) : /* @__PURE__ */ jsx("div", {
-				className: "asu:flex asu:flex-row asu:items-center asu:gap-2.5",
-				children: layout === "inline-end" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [children, labelRow] })
-			}),
-			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
-			invalid && /* @__PURE__ */ jsx(FieldError, {
-				match: true,
-				children: errors.map((message) => /* @__PURE__ */ jsx("span", {
-					className: "asu:block",
-					children: message
-				}, message))
-			})
-		]
-	});
-}
-//#endregion
-export { FormItem, LabelTooltip, OptionalMarker, useFieldState };
+export { FormItem, useFieldState };

package/dist/components/form/form.d.ts

@@ -3,7 +3,6 @@ import { DatePickerField, DateRangePickerField } from "./date-fields.js";
 import { SubmitButton } from "./submit-button.js";
 import { TextField, TextareaField } from "./text-field.js";
 import { CheckboxField, RadioGroupField, SwitchField } from "./toggle-fields.js";
-//#region src/components/form/form.d.ts
 /**
  * The field components registered with `useAppForm` by default. Extend them with your own
  * fields by spreading this into a new `createFormHook` call:
@@ -118,5 +117,4 @@ export declare const useAppForm: <TFormData, TOnMount extends import("@tanstack/
     SubmitButton: typeof SubmitButton;
   }>;
   fields: TFields;
-}>) => ReturnType<import("react").FunctionComponent>;
-//#endregion
+}>) => ReturnType<import("react").FunctionComponent>;

package/dist/components/form/form.js

@@ -6,7 +6,7 @@ import { SubmitButton } from "./submit-button.js";
 import { TextField, TextareaField } from "./text-field.js";
 import { CheckboxField, RadioGroupField, SwitchField } from "./toggle-fields.js";
 import { createFormHook } from "@tanstack/react-form";
-//#region src/components/form/form.ts
+// src/components/form/form.ts
 /**
 * The field components registered with `useAppForm` by default. Extend them with your own
 * fields by spreading this into a new `createFormHook` call:
@@ -42,5 +42,4 @@ const { useAppForm, withForm, withFieldGroup } = createFormHook({
 	fieldComponents,
 	formComponents
 });
-//#endregion
 export { fieldComponents, formComponents, useAppForm, withFieldGroup, withForm };

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

@@ -2,12 +2,12 @@
 import { Skeleton } from "../skeleton/skeleton.js";
 import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/form/lazy-field-components.tsx
+// src/components/form/lazy-field-components.tsx
 function loadOnDemand(load) {
 	const Lazy = lazy(load);
 	return function OnDemandField(props) {
 		return /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx(Skeleton, { className: "asu:h-8 asu:w-full" }),
+			fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
 			children: /* @__PURE__ */ jsx(Lazy, { ...props })
 		});
 	};
@@ -15,5 +15,4 @@ function loadOnDemand(load) {
 const LazySelectField = loadOnDemand(() => import("./choice-fields.js").then((m) => ({ default: m.SelectField })));
 const LazyFormNumberField = loadOnDemand(() => import("./choice-fields.js").then((m) => ({ default: m.FormNumberField })));
 const LazyComboboxField = loadOnDemand(() => import("./choice-fields.js").then((m) => ({ default: m.ComboboxField })));
-//#endregion
 export { LazyComboboxField, LazyFormNumberField, LazySelectField };

package/dist/components/form/submit-button.d.ts

@@ -1,5 +1,3 @@
 import { ButtonProps } from "../button/button.js";
-//#region src/components/form/submit-button.d.ts
 export type SubmitButtonProps = Omit<ButtonProps, 'type' | 'loading'>;
-export declare function SubmitButton(props: SubmitButtonProps): import("react").JSX.Element;
-//#endregion
+export declare function SubmitButton(props: SubmitButtonProps): import("react").JSX.Element;

package/dist/components/form/submit-button.js

@@ -2,7 +2,7 @@
 import { Button } from "../button/button.js";
 import { useFormContext } from "./form-context.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/form/submit-button.tsx
+// src/components/form/submit-button.tsx
 function SubmitButton(props) {
 	const form = useFormContext();
 	return /* @__PURE__ */ jsx(form.Subscribe, {
@@ -15,5 +15,4 @@ function SubmitButton(props) {
 		})
 	});
 }
-//#endregion
 export { SubmitButton };

package/dist/components/form/text-field.d.ts

@@ -1,9 +1,7 @@
 import { FormItemProps } from "./form-item.js";
 import { InputProps } from "../input/input.js";
 import { TextareaProps } from "../textarea/textarea.js";
-//#region src/components/form/text-field.d.ts
 export type TextFieldProps = Omit<FormItemProps, 'layout'> & Omit<InputProps, 'name' | 'value' | 'defaultValue' | 'onValueChange' | 'onBlur' | 'className'>;
 export declare function TextField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...inputProps }: TextFieldProps): import("react").JSX.Element;
 export type TextareaFieldProps = Omit<FormItemProps, 'layout'> & Omit<TextareaProps, 'name' | 'value' | 'defaultValue' | 'onValueChange' | 'onBlur' | 'className'>;
-export declare function TextareaField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...textareaProps }: TextareaFieldProps): import("react").JSX.Element;
-//#endregion
+export declare function TextareaField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...textareaProps }: TextareaFieldProps): import("react").JSX.Element;

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

@@ -4,7 +4,7 @@ import { Textarea } from "../textarea/textarea.js";
 import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/form/text-field.tsx
+// src/components/form/text-field.tsx
 function TextField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...inputProps }) {
 	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(FormItem, {
@@ -43,5 +43,4 @@ function TextareaField({ label, description, labelTooltip, optional, optionalLab
 		})
 	});
 }
-//#endregion
 export { TextField, TextareaField };

package/dist/components/form/toggle-fields.d.ts

@@ -2,7 +2,6 @@ import { FormItemProps } from "./form-item.js";
 import { CheckboxProps } from "../checkbox/checkbox.js";
 import { SwitchProps } from "../switch/switch.js";
 import { ReactNode } from "react";
-//#region src/components/form/toggle-fields.d.ts
 export type CheckboxFieldProps = Omit<FormItemProps, 'layout'> & Omit<CheckboxProps, 'name' | 'checked' | 'defaultChecked' | 'onCheckedChange' | 'onBlur' | 'className'>;
 export declare function CheckboxField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...checkboxProps }: CheckboxFieldProps): import("react").JSX.Element;
 export type SwitchFieldProps = Omit<FormItemProps, 'layout'> & Omit<SwitchProps, 'name' | 'checked' | 'defaultChecked' | 'onCheckedChange' | 'onBlur' | 'className'>;
@@ -16,5 +15,4 @@ export type RadioGroupFieldProps = Omit<FormItemProps, 'layout'> & {
   disabled?: boolean;
   orientation?: 'horizontal' | 'vertical';
 };
-export declare function RadioGroupField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, options, disabled, orientation }: RadioGroupFieldProps): import("react").JSX.Element;
-//#endregion
+export declare function RadioGroupField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, options, disabled, orientation }: RadioGroupFieldProps): import("react").JSX.Element;

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

@@ -1,14 +1,14 @@
 "use client";
 import { cn } from "../../lib/cn.js";
 import { Checkbox } from "../checkbox/checkbox.js";
-import { Field as Field$1, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "../field/field.js";
+import { FieldLabel } from "../field/field.js";
 import { RadioGroup, RadioGroupItem } from "../radio-group/radio-group.js";
 import { Switch } from "../switch/switch.js";
 import { useFieldContext } from "./form-context.js";
-import { FormItem, LabelTooltip, OptionalMarker, useFieldState } from "./form-item.js";
+import { FormItem } from "./form-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
-//#region src/components/form/toggle-fields.tsx
+// src/components/form/toggle-fields.tsx
 function CheckboxField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...checkboxProps }) {
 	const field = useFieldContext();
 	return /* @__PURE__ */ jsx(FormItem, {
@@ -51,50 +51,34 @@ function SwitchField({ label, description, labelTooltip, optional, optionalLabel
 }
 function RadioGroupField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, options, disabled, orientation }) {
 	const field = useFieldContext();
-	const { name, invalid, errors, touched, dirty } = useFieldState();
-	return /* @__PURE__ */ jsxs(Field$1, {
-		name,
-		invalid,
-		touched,
-		dirty,
+	return /* @__PURE__ */ jsx(FormItem, {
+		label,
+		description,
+		labelTooltip,
+		optional,
+		optionalLabel,
+		moreInfoLabel,
 		className,
-		"data-slot": "form-item",
-		children: [
-			/* @__PURE__ */ jsxs(Fieldset, { children: [label && /* @__PURE__ */ jsxs("div", {
-				className: "asu:flex asu:items-center asu:gap-1",
-				children: [/* @__PURE__ */ jsxs(FieldsetLegend, { children: [label, optional && /* @__PURE__ */ jsx(OptionalMarker, { label: optionalLabel })] }), labelTooltip && /* @__PURE__ */ jsx(LabelTooltip, {
-					content: labelTooltip,
-					label: moreInfoLabel
-				})]
-			}), /* @__PURE__ */ jsx(RadioGroup, {
-				value: field.state.value ?? null,
-				onValueChange: (value) => field.handleChange(value),
-				onBlur: field.handleBlur,
-				disabled,
-				"aria-orientation": orientation,
-				className: cn(orientation === "horizontal" && "asu:flex-row asu:flex-wrap asu:gap-6"),
-				children: options.map((option) => /* @__PURE__ */ jsx(Field.Item, {
-					disabled: option.disabled,
-					children: /* @__PURE__ */ jsxs(FieldLabel, {
-						className: "asu:font-normal",
-						children: [
-							/* @__PURE__ */ jsx(RadioGroupItem, { value: option.value }),
-							" ",
-							option.label
-						]
-					})
-				}, option.value))
-			})] }),
-			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
-			invalid && /* @__PURE__ */ jsx(FieldError, {
-				match: true,
-				children: errors.map((message) => /* @__PURE__ */ jsx("span", {
-					className: "asu:block",
-					children: message
-				}, message))
-			})
-		]
+		group: true,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			value: field.state.value ?? null,
+			onValueChange: (value) => field.handleChange(value),
+			onBlur: field.handleBlur,
+			disabled,
+			"aria-orientation": orientation,
+			className: cn(orientation === "horizontal" && "flex-row flex-wrap gap-6"),
+			children: options.map((option) => /* @__PURE__ */ jsx(Field.Item, {
+				disabled: option.disabled,
+				children: /* @__PURE__ */ jsxs(FieldLabel, {
+					className: "font-normal",
+					children: [
+						/* @__PURE__ */ jsx(RadioGroupItem, { value: option.value }),
+						" ",
+						option.label
+					]
+				})
+			}, option.value))
+		})
 	});
 }
-//#endregion
 export { CheckboxField, RadioGroupField, SwitchField };

package/dist/components/input/input.d.ts

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

package/dist/components/input/input.js

@@ -3,13 +3,12 @@ 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/input/input.tsx
+// src/components/input/input.tsx
 function Input$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
-		className: cn(controlSurface, controlFocus, "asu:h-8 asu:px-3 asu:py-1", className),
+		className: cn(controlSurface, controlFocus, "h-8 px-3 py-1", className),
 		...props,
 		"data-slot": "input"
 	});
 }
-//#endregion
 export { Input$1 as Input };

package/dist/components/input-group/input-group.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/input-group/input-group.d.ts
 export type InputGroupProps = ComponentProps<'div'>;
 /** Joins an `Input` and a `Button` or an `InputGroupAddon` into one control: they touch, share one divider, and each keeps its own hover and focus. */
 declare function InputGroup({ className, ...props }: InputGroupProps): import("react").JSX.Element;
@@ -9,5 +8,4 @@ export type InputGroupAddonProps = ComponentProps<'div'>;
  * inside it loses its own surface and fills the block. It is drawn with a divider on the side that faces the field.
  */
 declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
-//#endregion
 export { InputGroup, InputGroupAddon };

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

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