@agentero/design-system 0.28.0 → 0.29.1

package/src/data-table/data-table.js

@@ -12,24 +12,27 @@ var g = s(null), _ = () => {
 	let e = c(g);
 	if (!e) throw Error("useDataTable must be used within a DataTable.Root");
 	return e;
-}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ d(g, {
-	value: {
-		table: h({
-			...a,
-			getCoreRowModel: m()
-		}),
-		isLoading: t,
-		scrollRef: l(null),
-		onRowClick: n,
-		rowHref: r,
-		linkComponent: i
-	},
-	children: /* @__PURE__ */ d("div", {
-		"data-slot": "data-table-root",
-		className: "flex min-h-0 flex-1 flex-col",
-		children: e
-	})
-});
+}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => {
+	let o = h({
+		...a,
+		getCoreRowModel: m()
+	}), s = l(null);
+	return /* @__PURE__ */ d(g, {
+		value: {
+			table: o,
+			isLoading: t,
+			scrollRef: s,
+			onRowClick: n,
+			rowHref: r,
+			linkComponent: i
+		},
+		children: /* @__PURE__ */ d("div", {
+			"data-slot": "data-table-root",
+			className: "flex min-h-0 flex-1 flex-col",
+			children: e
+		})
+	});
+};
 v.displayName = "DataTable.Root";
 var y = ({ children: e }) => /* @__PURE__ */ d("div", {
 	"data-slot": "data-table-toolbar",
@@ -98,7 +101,7 @@ var b = a({
 				return /* @__PURE__ */ d(o, { children: /* @__PURE__ */ d(n.Row, {
 					className: e("has-aria-expanded:bg-bg-default-base-secondary", i && "cursor-pointer"),
 					onClick: i ? (e) => {
-						S(e.target) || !e.currentTarget.contains(e.target) || (v ? v(t.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
+						!S(e.target) && e.currentTarget.contains(e.target) && (v ? v(t.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
 					} : void 0,
 					children: t.getVisibleCells().map((e, t) => {
 						let i = e.column.columnDef.meta;

package/src/field/context.d.ts

@@ -2,6 +2,14 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 /** A validation error. Structurally matches a react-hook-form `FieldError`. */
 export type FieldErrorLike = {
     message?: string;
+    /**
+     * Every rule that failed, keyed by rule name. A form library fills it
+     * when it is set to collect all of them rather than stop at the first
+     * (react-hook-form's `criteriaMode: 'all'`), leaving only the first
+     * message in `message`. `Field.Error` renders all of them when it is
+     * there.
+     */
+    types?: Record<string, string | string[] | boolean | undefined>;
 } | undefined;
 /**
  * State of the surrounding `Field.Root`, shared with the Field family

package/src/field/field.d.ts

@@ -203,7 +203,9 @@ export declare const Description: {
  * set `invalid` on `Field.Root` alongside it. Takes `children` or an `errors`
  * array, and a form adapter can supply `errors` through `FieldContext` so a
  * bare `<Field.Error />` renders them. One per field: it takes the field's
- * single error id, and several errors render as one list.
+ * single error id, and several errors render as one list — several, here,
+ * meaning either several entries or one entry whose `types` lists every rule
+ * that failed.
  *
  * @summary Validation feedback for the field, announced as an alert
  */

package/src/field/field.js

@@ -45,19 +45,19 @@ var m = s({
 });
 g.displayName = "Field.Group";
 var _ = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled: o = !1, readOnly: s = !1, required: u = !1, controlId: p, ...m }) => {
-	let g = l(), _ = p ?? `${g}-control`, v = `${g}-description`, y = `${g}-error`, [b, x] = d([]), S = c((e) => (x((t) => t.includes(e) ? t : [...t, e]), () => x((t) => t.filter((t) => t !== e))), []);
+	let g = l(), _ = p ?? `${g}-control`, v = `${g}-description`, y = `${g}-error`, [b, x] = d([]), S = c((e) => (x((t) => t.includes(e) ? t : [...t, e]), () => x((t) => t.filter((t) => t !== e))), []), C = {
+		controlId: _,
+		descriptionId: v,
+		errorId: y,
+		describedBy: [...[v, y].filter((e) => b.includes(e)), ...b.filter((e) => e !== v && e !== y)].join(" ") || void 0,
+		registerMessage: S,
+		invalid: a,
+		disabled: o,
+		readOnly: s,
+		required: u
+	};
 	return /* @__PURE__ */ f(i, {
-		value: {
-			controlId: _,
-			descriptionId: v,
-			errorId: y,
-			describedBy: [...[v, y].filter((e) => b.includes(e)), ...b.filter((e) => e !== v && e !== y)].join(" ") || void 0,
-			registerMessage: S,
-			invalid: a,
-			disabled: o,
-			readOnly: s,
-			required: u
-		},
+		value: C,
 		children: /* @__PURE__ */ f(t, {
 			value: {
 				htmlFor: _,
@@ -109,8 +109,11 @@ var b = ({ className: t, id: n, ...r }) => {
 	});
 };
 b.displayName = "Field.Description";
-var x = ({ className: t, children: n, errors: r, id: i, ...o }) => {
-	let s = a(), c = i ?? s?.errorId, l = r ?? s?.errors, d = s?.registerMessage, p = [...new Set(l?.flatMap((e) => e?.message || []))], m = n ?? (p.length > 1 ? /* @__PURE__ */ f("ul", { children: p.map((e) => /* @__PURE__ */ f("li", { children: e }, e)) }) : p[0]), g = !!m;
+var x = (e) => {
+	let t = Object.values(e?.types ?? {}).flat().filter((e) => typeof e == "string" && e.length > 0);
+	return t.length ? t : e?.message ? [e.message] : [];
+}, S = ({ className: t, children: n, errors: r, id: i, ...o }) => {
+	let s = a(), c = i ?? s?.errorId, l = r ?? s?.errors, d = s?.registerMessage, p = [...new Set(l?.flatMap(x))], m = n ?? (p.length > 1 ? /* @__PURE__ */ f("ul", { children: p.map((e) => /* @__PURE__ */ f("li", { children: e }, e)) }) : p[0]), g = !!m;
 	return u(() => g && c ? d?.(c) : void 0, [
 		d,
 		g,
@@ -124,6 +127,6 @@ var x = ({ className: t, children: n, errors: r, id: i, ...o }) => {
 		children: m
 	}) : null;
 };
-x.displayName = "Field.Error";
+S.displayName = "Field.Error";
 //#endregion
-export { v as Content, b as Description, x as FieldError, g as Group, y as Label, _ as Root, m as fieldRecipe };
+export { v as Content, b as Description, S as Error, g as Group, y as Label, _ as Root, m as fieldRecipe };

package/src/field/index.js

@@ -1,5 +1,5 @@
 import { FieldContext as e, useFieldContext as t } from "./context.js";
-import { Content as n, Description as r, FieldError as i, Group as a, Label as o, Root as s, fieldRecipe as c } from "./field.js";
+import { Content as n, Description as r, Error as i, Group as a, Label as o, Root as s, fieldRecipe as c } from "./field.js";
 //#region src/field/index.ts
 var l = {
 	Root: s,

package/src/field-text/field-text.js

@@ -5,16 +5,16 @@ import { InputContext as n } from "../input/context.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/field-text/field-text.tsx
 var i = ({ children: t }) => {
-	let i = e();
+	let i = e(), a = i && {
+		id: i.controlId,
+		"aria-describedby": i.describedBy,
+		"aria-invalid": i.invalid || void 0,
+		required: i.required || void 0,
+		disabled: i.disabled || void 0,
+		readOnly: i.readOnly || void 0
+	};
 	return /* @__PURE__ */ r(n, {
-		value: i && {
-			id: i.controlId,
-			"aria-describedby": i.describedBy,
-			"aria-invalid": i.invalid || void 0,
-			required: i.required || void 0,
-			disabled: i.disabled || void 0,
-			readOnly: i.readOnly || void 0
-		},
+		value: a,
 		children: t
 	});
 }, a = ({ children: e, ...n }) => /* @__PURE__ */ r(t.Root, {

package/src/form/form.d.ts

@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef } from 'react';
+import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
+export type FormRootProps<TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues> = Omit<ComponentPropsWithRef<'form'>, 'onSubmit' | 'noValidate'> & {
+    /**
+     * The object `useForm()` returns. `Form.Root` hands it to every form field
+     * inside through react-hook-form's `FormProvider`, so a `FormText` needs only
+     * its `name`. Create it in the component that owns the form and pass
+     * `defaultValues`: a field whose value is `undefined` on the first render
+     * starts uncontrolled. A form whose resolver transforms the values
+     * (`useForm<Input, Context, Output>`) is accepted as is.
+     */
+    methods: UseFormReturn<TFieldValues, any, TTransformedValues>;
+    /**
+     * Called with the validated values once validation passes: the resolver's
+     * output when it transforms them, the form's values otherwise. Wrapped in
+     * `methods.handleSubmit`, which prevents the native submit and focuses the
+     * first invalid field; when it is omitted the form validates and does nothing
+     * else.
+     */
+    onSubmit?: SubmitHandler<TTransformedValues>;
+    /**
+     * Accessible name of the form. A `<form>` only becomes a landmark when it is
+     * named, and screen readers list landmarks by name, so it is required.
+     */
+    'aria-label': string;
+};
+/**
+ * The `<form>` element of a react-hook-form form: it provides the `useForm()`
+ * instance to the form fields inside it (`FormText` and the other `Form<X>`
+ * components) and routes the submit through `handleSubmit`. It always renders
+ * `noValidate`, so the `required` attribute a field sets reaches assistive
+ * technology without the browser's own validation bubble getting in the way:
+ * validation is react-hook-form's, from `rules` or a resolver.
+ *
+ * Use it around any form built with the `Form<X>` fields. Without
+ * react-hook-form, render a plain `<form>` with the presentational primitives
+ * ([FieldText](?path=/docs/components-fieldtext--docs)) instead — this
+ * component is only the binding.
+ *
+ * `react-hook-form` is an optional peer dependency: the design system never
+ * bundles its own copy, because `FormProvider` and the fields must share one
+ * React context. Two copies in an app (a nested version under a workspace,
+ * say) make every field throw from `useController`; `yarn why react-hook-form`
+ * should list a single instance.
+ *
+ * @summary Form element bound to a react-hook-form instance, shared with its fields
+ *
+ * @example
+ * const methods = useForm<Values>({ defaultValues: { agencyName: '', email: '' } });
+ *
+ * <Form.Root methods={methods} onSubmit={saveAgency} aria-label="Agency profile">
+ *   <FormText name="agencyName" label="Agency name" required rules={{ required: 'Enter the agency name.' }} />
+ *   <FormText name="email" label="Email" inputProps={{ type: 'email' }} />
+ *   <Button type="submit">Save</Button>
+ * </Form.Root>
+ */
+export declare const Root: {
+    <TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues>({ methods, onSubmit, ...props }: FormRootProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/form/form.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { FormProvider as t } from "react-hook-form";
+//#region src/form/form.tsx
+var n = () => {}, r = ({ methods: r, onSubmit: i, ...a }) => /* @__PURE__ */ e(t, {
+	...r,
+	children: /* @__PURE__ */ e("form", {
+		"data-slot": "form",
+		onSubmit: r.handleSubmit(i ?? n),
+		...a,
+		noValidate: !0
+	})
+});
+r.displayName = "Form.Root";
+//#endregion
+export { r as Root };

package/src/form/index.d.ts

@@ -0,0 +1,7 @@
+export type { FormRootProps } from './form';
+export declare const Form: {
+    Root: {
+        <TFieldValues extends import('react-hook-form').FieldValues = import('react-hook-form').FieldValues, TTransformedValues = TFieldValues>({ methods, onSubmit, ...props }: import('./form').FormRootProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/form/index.js

@@ -0,0 +1,5 @@
+import { Root as e } from "./form.js";
+//#region src/form/index.ts
+var t = { Root: e };
+//#endregion
+export { t as Form };

package/src/form-text/form-text.d.ts

@@ -0,0 +1,136 @@
+import { ReactNode } from 'react';
+import { Control, FieldPathByValue, FieldValues, UseControllerProps } from 'react-hook-form';
+import { FieldLabelProps } from '../field';
+import { FieldTextProps } from '../field-text';
+import { InputProps } from '../input';
+/**
+ * Props `FormText` forwards to its `Input`. The field owns `id` (pass
+ * `controlId` on `FormText` to choose it) and react-hook-form owns `name`,
+ * `value` and `defaultValue` (set it in `useForm`'s `defaultValues`).
+ *
+ * The state is the field's as well: `disabled`, `required` and `readOnly` are
+ * props of `FormText` itself and `aria-invalid` follows its validation state.
+ * An `Input` takes its own props over the ones its context hands it, so
+ * setting them here would move the control without the label and the root
+ * following. `aria-describedby` stays open: its ids join the ones the field
+ * wires rather than replacing them.
+ */
+export type FormTextInputProps = Omit<InputProps, 'id' | 'name' | 'value' | 'defaultValue' | 'ref' | 'disabled' | 'required' | 'readOnly' | 'aria-invalid'>;
+/**
+ * The paths of a form's values a `FormText` can bind to: those holding a
+ * string, `null` and `undefined` included, since an input stores a string and
+ * an empty form often starts from either. A path to a number, a boolean or an
+ * object is rejected at compile time; it belongs to the `Form<X>` of that
+ * value type. Untyped forms (`FieldValues`) accept any path.
+ */
+export type FormTextPath<TFieldValues extends FieldValues> = FieldPathByValue<TFieldValues, string | null | undefined>;
+export type FormTextProps<TFieldValues extends FieldValues = FieldValues, TName extends FormTextPath<TFieldValues> = FormTextPath<TFieldValues>, TTransformedValues = TFieldValues> = Omit<FieldTextProps, 'invalid' | 'children'> & {
+    /**
+     * Path of the value in the form, nested paths included (`'agency.npn'`).
+     * Type it against the form's values with the generic
+     * (`<FormText<Values> name="agency.npn" />`) or by passing `control`: the
+     * path must then exist and hold a string (`FormTextPath`).
+     */
+    name: TName;
+    /**
+     * The form's `control`, from `useForm()`. Defaults to the one the
+     * surrounding `Form.Root` provides; pass it explicitly to get `name`
+     * inference without writing the generic, or when the field renders outside
+     * a `Form.Root`. A `control` whose resolver transforms the values is
+     * accepted as is.
+     */
+    control?: Control<TFieldValues, any, TTransformedValues>;
+    /**
+     * react-hook-form validation rules for this field (`required`, `pattern`,
+     * `validate`…), same as `register`'s. They only validate: `rules.required`
+     * does not mark the field `required` — that is a separate, visible decision.
+     */
+    rules?: UseControllerProps<TFieldValues, TName>['rules'];
+    /**
+     * Drops the value from the form when the field unmounts, react-hook-form's
+     * `shouldUnregister`. Defaults to `false`: a field revealed by another one
+     * keeps its value while hidden.
+     */
+    shouldUnregister?: boolean;
+    /** The caption, rendered as the field's label. Text in almost every case. */
+    label: ReactNode;
+    /**
+     * Helper text shown under the control and announced through its
+     * `aria-describedby`. Use it for guidance the user needs before typing; put
+     * details worth a click in `tooltip` instead.
+     */
+    description?: ReactNode;
+    /**
+     * Content of an info tooltip rendered beside the label, for details that
+     * would clutter the description. The trigger is a sibling of the label, so
+     * the field's accessible name stays the label text.
+     */
+    tooltip?: FieldLabelProps['tooltip'];
+    /** Preferred side of the tooltip. Defaults to `'top'`. */
+    tooltipSide?: FieldLabelProps['tooltipSide'];
+    /**
+     * Appends a muted " (optional)" to the label. The forms mark optional fields
+     * rather than required ones; ignored when `required` is set.
+     */
+    optional?: boolean;
+    /**
+     * Marks the field required: an asterisk on the label and the native
+     * `required` attribute on the input, which assistive technology announces.
+     * It does not validate — pair it with `rules.required` or a resolver — and it
+     * never triggers the browser bubble, since `Form.Root` renders `noValidate`.
+     */
+    required?: boolean;
+    /**
+     * Disables the input and marks the field. Unlike react-hook-form's own
+     * `disabled` option, the value stays in the submitted data: disabling a
+     * field is a presentation decision, not a change to the form's values.
+     */
+    disabled?: boolean;
+    /**
+     * Everything else the `Input` should receive: `type`, `placeholder`,
+     * `maxLength`, `autoComplete`, `size`, `className`… Handlers such as
+     * `onChange` and `onBlur` run after react-hook-form's, which are already
+     * wired.
+     */
+    inputProps?: FormTextInputProps;
+};
+/**
+ * A complete text field bound to one react-hook-form value: label, `Input`,
+ * helper text and validation error, laid out in the standard order and wired
+ * through `useController`. It renders inside a `Form.Root`, which provides the
+ * form, and needs only a `name`, which on a typed form must point at a string
+ * (`FormTextPath`). The `required`, `invalid` and error states
+ * reach the label, the input's `aria-*` attributes and the message with no
+ * ids written by hand.
+ *
+ * Use it for the common case: a labelled single-line input in a form. When
+ * the layout is different — an input with addons, another control, a
+ * message rendered elsewhere — compose the primitives yourself:
+ * `useController` with [FieldText](?path=/docs/components-fieldtext--docs),
+ * `Label`, `Input`, `Field.Description` and `Field.Error`. `FormText` adds no
+ * behaviour of its own over that composition.
+ *
+ * Errors come from `useController`'s per-field state, never from
+ * `formState.errors`, so the message stays fresh under the React Compiler.
+ * With `criteriaMode: 'all'` on the form the error carries every rule that
+ * failed and `Field.Error` lists them all. An error on an array or object path
+ * (`error.root`) is not this field's: render a `Field.Error` for it where the
+ * group lives.
+ *
+ * @summary Label, Input, description and error bound to one react-hook-form field
+ *
+ * @example
+ * <FormText
+ *   name="taxId"
+ *   label="Tax ID"
+ *   tooltip="The EIN the IRS issued to the agency."
+ *   description="Nine digits, with or without the dash."
+ *   required
+ *   rules={{ required: 'Enter the tax ID.', pattern: { value: /^\d{2}-?\d{7}$/, message: 'Nine digits.' } }}
+ *   inputProps={{ inputMode: 'numeric', autoComplete: 'off' }}
+ * />
+ */
+export declare const FormText: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FormTextPath<TFieldValues> = FormTextPath<TFieldValues>, TTransformedValues = TFieldValues>({ name, control, rules, shouldUnregister, disabled, label, description, tooltip, tooltipSide, optional, inputProps, ...root }: FormTextProps<TFieldValues, TName, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/form-text/form-text.js

@@ -0,0 +1,40 @@
+"use client";
+import { mergeProps as e } from "../../lib/merge-props.js";
+import { Field as t } from "../field/index.js";
+import { Input as n } from "../input/input.js";
+import { FieldText as r } from "../field-text/field-text.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useController as o } from "react-hook-form";
+//#region src/form-text/form-text.tsx
+var s = ({ name: s, control: c, rules: l, shouldUnregister: u, disabled: d, label: f, description: p, tooltip: m, tooltipSide: h, optional: g, inputProps: _, ...v }) => {
+	let { field: y, fieldState: b } = o({
+		name: s,
+		control: c,
+		rules: l,
+		shouldUnregister: u
+	}), x = {
+		name: y.name,
+		value: y.value ?? "",
+		onChange: y.onChange,
+		onBlur: y.onBlur,
+		ref: y.ref
+	};
+	return /* @__PURE__ */ a(r, {
+		invalid: b.invalid,
+		disabled: d || y.disabled,
+		...v,
+		children: [/* @__PURE__ */ i(t.Label, {
+			tooltip: m,
+			tooltipSide: h,
+			optional: g,
+			children: f
+		}), /* @__PURE__ */ a(t.Content, { children: [
+			/* @__PURE__ */ i(n, { ...e(x, _ ?? {}) }),
+			p && /* @__PURE__ */ i(t.Description, { children: p }),
+			/* @__PURE__ */ i(t.Error, { errors: b.error ? [b.error] : void 0 })
+		] })]
+	});
+};
+s.displayName = "FormText";
+//#endregion
+export { s as FormText };

package/src/form-text/index.d.ts

@@ -0,0 +1,2 @@
+export { FormText } from './form-text';
+export type { FormTextInputProps, FormTextPath, FormTextProps } from './form-text';

package/src/form-text/index.js

@@ -0,0 +1,2 @@
+import { FormText as e } from "./form-text.js";
+export { e as FormText };

package/src/pagination/pagination.js

@@ -93,4 +93,4 @@ var l = o({
 	});
 };
 //#endregion
-export { u as Pagination };
+export { u as Pagination, l as paginationRecipe };

package/src/table/table.js

@@ -31,18 +31,18 @@ var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inli
 	if (!e) throw Error("Table parts must be used within Table.Root");
 	return e;
 }, d = i("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
-	let { size: r, sticky: i, embed: a } = n, s = c(n);
+	let { size: r, sticky: i, embed: a } = n, s = c(n), u = {
+		header: y({ sticky: f(i) }),
+		cell: x({ size: r }),
+		headRow: _({ body: !1 }),
+		bodyRow: _({
+			body: !0,
+			divider: !a,
+			stickyFooter: p(i)
+		})
+	};
 	return /* @__PURE__ */ o(l, {
-		value: {
-			header: y({ sticky: f(i) }),
-			cell: x({ size: r }),
-			headRow: _({ body: !1 }),
-			bodyRow: _({
-				body: !0,
-				divider: !a,
-				stickyFooter: p(i)
-			})
-		},
+		value: u,
 		children: /* @__PURE__ */ o("div", {
 			"data-slot": "table-root",
 			className: s.root(),
@@ -100,10 +100,10 @@ var _ = r({
 		}
 	}
 }), v = ({ className: t, ...n }) => {
-	let { headRow: r, bodyRow: i } = u();
+	let { headRow: r, bodyRow: i } = u(), s = a(d) === "body";
 	return /* @__PURE__ */ o("tr", {
 		"data-slot": "table-row",
-		className: e(a(d) === "body" ? i : r, t),
+		className: e(s ? i : r, t),
 		...n
 	});
 };

package/src/tabs/tabs.js

@@ -103,11 +103,14 @@ var f = ({ className: t, ...n }) => {
 	});
 };
 f.displayName = "Tabs.Content";
-var p = ({ className: t, variant: n, ...a }) => /* @__PURE__ */ i("span", {
-	"data-slot": "tabs-label",
-	className: e((r(s) ?? o({ variant: n })).trigger(), "pointer-events-none", t),
-	...a
-});
+var p = ({ className: t, variant: n, ...a }) => {
+	let c = r(s) ?? o({ variant: n });
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "tabs-label",
+		className: e(c.trigger(), "pointer-events-none", t),
+		...a
+	});
+};
 p.displayName = "Tabs.Label";
 //#endregion
 export { f as Content, p as Label, u as List, l as Root, d as Trigger, o as tabsRecipe };

package/src/tag/tag.js

@@ -110,21 +110,21 @@ var s = t({
 	className: "min-w-0 truncate",
 	children: e
 }) : e), l = ({ children: t, asChild: l, color: u, variant: d, size: f, pill: p, truncate: m, className: h, ref: g, ..._ }) => {
-	let v = l ? a : "span", y = n.toArray(l && r(t) ? t.props.children : t), b = e(s({
+	let v = l ? a : "span", y = n.toArray(l && r(t) ? t.props.children : t), b = y.length > 0 && y.every(r), x = e(s({
 		color: u,
 		variant: d,
 		size: f,
 		pill: p,
 		truncate: m,
 		interactive: l,
-		hasOnlyIcon: y.length > 0 && y.every(r)
-	}), h), x = m && !l ? c(t) : t;
+		hasOnlyIcon: b
+	}), h), S = m && !l ? c(t) : t;
 	return /* @__PURE__ */ i(v, {
 		"data-slot": "tag",
 		..._,
-		className: b,
+		className: x,
 		ref: g,
-		children: l ? /* @__PURE__ */ i(o, { children: t }) : x
+		children: l ? /* @__PURE__ */ i(o, { children: t }) : S
 	});
 };
 //#endregion