@agentero/design-system 0.27.1 → 0.29.0

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/input/context.d.ts

@@ -0,0 +1,17 @@
+import { InputProps } from './input';
+/**
+ * Props a container hands to every `Input` rendered inside it: the wiring
+ * (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`,
+ * `readOnly`) and, from a form adapter, `name`, `value`, `onChange`, `onBlur`
+ * and `ref`. An `Input` with no provider above it reads `null` and uses only
+ * its own props.
+ */
+export declare const InputContext: import('react').Context<Partial<InputProps> | null>;
+/**
+ * Merges the surrounding `InputContext`, if any, under the input's own props.
+ * Own props win; handlers present on both sides are chained and
+ * `aria-describedby` ids are concatenated. In development it warns when the
+ * input carries an `id` that differs from the one the container provides,
+ * since the label would then point elsewhere.
+ */
+export declare const useInputContext: (props: InputProps) => InputProps;

package/src/input/context.js

@@ -0,0 +1,10 @@
+"use client";
+import { useMergeProps as e } from "../../lib/merge-props.js";
+import { createContext as t, use as n } from "react";
+//#region src/input/context.ts
+var r = t(null), i = (t) => {
+	let i = n(r);
+	return process.env.NODE_ENV !== "production" && i?.id && t.id && i.id !== t.id && console.warn(`Input: its id "${t.id}" differs from the one its field provides ("${i.id}"), so the label and messages point elsewhere. Set \`controlId\` on the container instead.`), e(i, t);
+};
+//#endregion
+export { r as InputContext, i as useInputContext };

package/src/input/index.d.ts

@@ -1,2 +1,3 @@
+export { InputContext, useInputContext } from './context';
 export { Input, inputRecipe } from './input';
 export type { InputProps, InputSize, InputVariants } from './input';

package/src/input/index.js

@@ -1,2 +1,3 @@
-import { Input as e, inputRecipe as t } from "./input.js";
-export { e as Input, t as inputRecipe };
+import { InputContext as e, useInputContext as t } from "./context.js";
+import { Input as n, inputRecipe as r } from "./input.js";
+export { n as Input, e as InputContext, r as inputRecipe, t as useInputContext };

package/src/input/input.d.ts

@@ -82,18 +82,18 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
  * [Label](?path=/docs/components-label--docs) so the control has an accessible
  * name.
  *
- * It is deliberately self-contained: it renders the props it is given and
- * knows nothing about form fields, form libraries, or surrounding layout.
- * Wiring (`id`, `aria-invalid`, `aria-describedby`) arrives as plain props, so
- * a field wrapper can inject them and standalone usage can set them by hand.
- * There is no `status` prop — mark the control `aria-invalid` and the
+ * When a container provides `InputContext`, the input takes its wiring (`id`,
+ * `aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from
+ * it with nothing passed by hand; `FieldText` is one such container. Standalone it
+ * renders exactly the props it is given, and its own props always win over the
+ * context. There is no `status` prop — mark the control `aria-invalid` and the
  * destructive border follows.
  *
  * Do not use Input for multi-line text; that is TextArea's job. It also has no
  * slots for leading or trailing addons — an input with a currency prefix or a
  * unit suffix belongs in an input group, not here.
  *
- * @summary Base single-line text control, unaware of fields and form libraries
+ * @summary Base single-line text control that takes its wiring from InputContext
  *
  * @example
  * <Label htmlFor="email">Email</Label>
@@ -104,6 +104,6 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
  * <span id="email-error">Enter a valid email address.</span>
  */
 export declare const Input: {
-    ({ className, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    (props: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/input/input.js

@@ -1,8 +1,10 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
+import { useInputContext as t } from "./context.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/input/input.tsx
-var r = t({
+var i = n({
 	base: [
 		"box-border w-full min-w-0 appearance-none rounded-md px-4 shadow-sm",
 		"border border-solid border-border-input-default bg-bg-input-normal text-text-input-normal",
@@ -24,12 +26,15 @@ var r = t({
 		lg: "h-12 rounded-lg text-base"
 	} },
 	defaultVariants: { size: "md" }
-}), i = ({ className: t, size: i, ...a }) => /* @__PURE__ */ n("input", {
-	"data-slot": "input",
-	"data-size": i,
-	className: e(r({ size: i }), t),
-	...a
-});
-i.displayName = "Input";
+}), a = (n) => {
+	let { className: a, size: o, ...s } = t(n);
+	return /* @__PURE__ */ r("input", {
+		"data-slot": "input",
+		"data-size": o,
+		className: e(i({ size: o }), a),
+		...s
+	});
+};
+a.displayName = "Input";
 //#endregion
-export { i as Input, r as inputRecipe };
+export { a as Input, i as inputRecipe };

package/src/label/context.d.ts

@@ -0,0 +1,13 @@
+import { LabelProps } from './label';
+/**
+ * Props a container hands to every `Label` rendered inside it, typically
+ * `htmlFor` (the control's id) and `required`. A `Label` with no provider above
+ * it reads `null` and uses only its own props.
+ */
+export declare const LabelContext: import('react').Context<Partial<LabelProps> | null>;
+/**
+ * Merges the surrounding `LabelContext`, if any, under the label's own props.
+ * Own props win, so an explicit `htmlFor` or `required={false}` overrides
+ * whatever the container provides.
+ */
+export declare const useLabelContext: (props: LabelProps) => LabelProps;

package/src/label/context.js

@@ -0,0 +1,7 @@
+"use client";
+import { useMergeProps as e } from "../../lib/merge-props.js";
+import { createContext as t, use as n } from "react";
+//#region src/label/context.ts
+var r = t(null), i = (t) => e(n(r), t);
+//#endregion
+export { r as LabelContext, i as useLabelContext };

package/src/label/index.d.ts

@@ -1,2 +1,3 @@
+export { LabelContext, useLabelContext } from './context';
 export { Label, labelRecipe } from './label';
 export type { LabelProps, LabelVariants } from './label';

package/src/label/index.js

@@ -1,2 +1,3 @@
-import { Label as e, labelRecipe as t } from "./label.js";
-export { e as Label, t as labelRecipe };
+import { LabelContext as e, useLabelContext as t } from "./context.js";
+import { Label as n, labelRecipe as r } from "./label.js";
+export { n as Label, e as LabelContext, r as labelRecipe, t as useLabelContext };

package/src/label/label.d.ts

@@ -49,6 +49,11 @@ export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & Lab
  * button) inside a `<label>` gives that element the label's accessible name and
  * makes a click focus the control — render it as a sibling instead.
  *
+ * When a container provides `LabelContext`, the label takes `htmlFor` and
+ * `required` from it and associates itself with the control without an explicit
+ * `htmlFor`; `Field.Root` is one such container. Standalone it behaves as a
+ * plain label. Its own props always win over the context.
+ *
  * @summary Accessible caption for a form control
  *
  * @example
@@ -56,6 +61,6 @@ export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & Lab
  * <Input id="phone" type="tel" />
  */
 export declare const Label: {
-    ({ className, children, optional, required, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    (props: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/label/label.js

@@ -1,32 +1,34 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import * as i from "@radix-ui/react-label";
+import { useLabelContext as t } from "./context.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-label";
 //#region src/label/label.tsx
-var a = t({
+var o = n({
 	slots: {
 		root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
 		text: "align-middle",
-		required: "ms-1 align-middle text-text-input-destructive"
+		required: "align-middle text-text-input-destructive"
 	},
 	variants: { optional: { true: { text: "after:font-normal after:text-text-input-placeholder after:content-[\"_(optional)\"]" } } },
 	defaultVariants: { optional: !1 }
-}), o = ({ className: t, children: o, optional: s = !1, required: c = !1, ...l }) => {
-	let u = a({ optional: s && !c });
-	return /* @__PURE__ */ r(i.Root, {
+}), s = (n) => {
+	let { className: s, children: c, optional: l = !1, required: u = !1, ...d } = t(n), f = o({ optional: l && !u });
+	return /* @__PURE__ */ i(a.Root, {
 		"data-slot": "label",
-		className: e(u.root(), t),
-		...l,
-		children: [/* @__PURE__ */ n("span", {
-			className: u.text(),
-			children: o
-		}), c && /* @__PURE__ */ n("span", {
+		className: e(f.root(), s),
+		...d,
+		children: [/* @__PURE__ */ r("span", {
+			className: f.text(),
+			children: c
+		}), u && /* @__PURE__ */ r("span", {
 			"aria-hidden": !0,
-			className: u.required(),
+			className: f.required(),
 			children: "*"
 		})]
 	});
 };
-o.displayName = "Label";
+s.displayName = "Label";
 //#endregion
-export { o as Label, a as labelRecipe };
+export { s as Label, o as labelRecipe };

package/src/modal/modal.js

@@ -3,21 +3,21 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../button/button.js";
 import { IconClose as n } from "./icons.js";
 import { tv as r } from "tailwind-variants";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createContext as o, useContext as s } from "react";
+import { createContext as i, useContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import * as c from "@radix-ui/react-dialog";
 //#region src/modal/modal.tsx
-var l = (e) => /* @__PURE__ */ i(c.Root, {
+var l = (e) => /* @__PURE__ */ o(c.Root, {
 	"data-slot": "modal-root",
 	...e
 });
 l.displayName = "Modal.Root";
-var u = (e) => /* @__PURE__ */ i(c.Trigger, {
+var u = (e) => /* @__PURE__ */ o(c.Trigger, {
 	"data-slot": "modal-trigger",
 	...e
 });
 u.displayName = "Modal.Trigger";
-var d = o("dialog"), f = r({
+var d = i("dialog"), f = r({
 	slots: {
 		overlay: [
 			"fixed inset-0 z-(--z-index-top-layer) bg-overlay-dark-300",
@@ -41,70 +41,70 @@ var d = o("dialog"), f = r({
 		lg: { content: "max-w-[45rem]" }
 	} },
 	defaultVariants: { size: "md" }
-}), p = f(), m = ({ className: t, size: n, variant: r = "dialog", children: o, onEscapeKeyDown: s, onPointerDownOutside: l, ...u }) => {
+}), p = f(), m = ({ className: t, size: n, variant: r = "dialog", children: i, onEscapeKeyDown: a, onPointerDownOutside: l, ...u }) => {
 	let p = f({ size: n }), m = r === "alert";
-	return /* @__PURE__ */ i(d.Provider, {
+	return /* @__PURE__ */ o(d.Provider, {
 		value: r,
-		children: /* @__PURE__ */ a(c.Portal, { children: [/* @__PURE__ */ i(c.Overlay, {
+		children: /* @__PURE__ */ s(c.Portal, { children: [/* @__PURE__ */ o(c.Overlay, {
 			"data-slot": "modal-overlay",
 			className: p.overlay()
-		}), /* @__PURE__ */ i(c.Content, {
+		}), /* @__PURE__ */ o(c.Content, {
 			"data-slot": "modal-content",
 			role: m ? "alertdialog" : "dialog",
 			className: e(p.content(), t),
 			onEscapeKeyDown: (e) => {
-				s?.(e), m && e.preventDefault();
+				a?.(e), m && e.preventDefault();
 			},
 			onPointerDownOutside: (e) => {
 				l?.(e), m && e.preventDefault();
 			},
 			...u,
-			children: o
+			children: i
 		})] })
 	});
 };
 m.displayName = "Modal.Content";
-var h = ({ className: e, children: r, ...o }) => {
-	let l = s(d);
-	return /* @__PURE__ */ a("div", {
+var h = ({ className: e, children: r, ...i }) => {
+	let l = a(d);
+	return /* @__PURE__ */ s("div", {
 		"data-slot": "modal-title",
 		className: p.title({ className: e }),
-		children: [/* @__PURE__ */ i(c.Title, {
-			...o,
+		children: [/* @__PURE__ */ o(c.Title, {
+			...i,
 			children: r
-		}), l === "dialog" && /* @__PURE__ */ i(c.Close, {
+		}), l === "dialog" && /* @__PURE__ */ o(c.Close, {
 			asChild: !0,
-			children: /* @__PURE__ */ i(t, {
+			children: /* @__PURE__ */ o(t, {
 				variant: "ghost",
 				size: "sm",
 				"aria-label": "Close",
 				className: "shrink-0",
-				children: /* @__PURE__ */ i(n, {})
+				children: /* @__PURE__ */ o(n, {})
 			})
 		})]
 	});
 };
 h.displayName = "Modal.Title";
-var g = ({ className: e, ...t }) => /* @__PURE__ */ i(c.Description, {
+var g = ({ className: e, ...t }) => /* @__PURE__ */ o(c.Description, {
 	"data-slot": "modal-description",
 	className: p.description({ className: e }),
 	...t
 });
 g.displayName = "Modal.Description";
-var _ = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+var _ = ({ className: e, ...t }) => /* @__PURE__ */ o("div", {
 	"data-slot": "modal-body",
 	tabIndex: 0,
 	className: p.body({ className: e }),
 	...t
 });
 _.displayName = "Modal.Body";
-var v = ({ className: e, ...t }) => /* @__PURE__ */ i("div", {
+var v = ({ className: e, ...t }) => /* @__PURE__ */ o("div", {
 	"data-slot": "modal-footer",
 	className: p.footer({ className: e }),
 	...t
 });
 v.displayName = "Modal.Footer";
-var y = (e) => /* @__PURE__ */ i(c.Close, {
+var y = (e) => /* @__PURE__ */ o(c.Close, {
 	"data-slot": "modal-close",
 	...e
 });

package/src/progress/progress.js

@@ -1,7 +1,7 @@
 "use client";
 import { tv as e } from "tailwind-variants";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as r } from "react";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-progress";
 //#region src/progress/progress.tsx
 var a = e({ slots: {
@@ -12,28 +12,28 @@ var a = e({ slots: {
 	label: "text-sm text-text-default-base-primary",
 	value: "text-base text-text-default-base-primary"
 } }), o = ({ percentage: e, label: o, "aria-label": s, className: c }) => {
-	let l = r(), u = a(), d = Math.min(100, Math.max(0, e));
-	return /* @__PURE__ */ n("div", {
+	let l = t(), u = a(), d = Math.min(100, Math.max(0, e));
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "progress",
 		className: u.root(),
-		children: [o && /* @__PURE__ */ n("div", {
+		children: [o && /* @__PURE__ */ r("div", {
 			"data-slot": "progress-label",
 			className: u.labelRow(),
-			children: [/* @__PURE__ */ t("span", {
+			children: [/* @__PURE__ */ n("span", {
 				id: l,
 				className: u.label(),
 				children: o
-			}), /* @__PURE__ */ n("span", {
+			}), /* @__PURE__ */ r("span", {
 				className: u.value(),
 				children: [d, "%"]
 			})]
-		}), /* @__PURE__ */ t(i.Root, {
+		}), /* @__PURE__ */ n(i.Root, {
 			"data-slot": "progress-track",
 			value: d,
 			"aria-labelledby": o ? l : void 0,
 			"aria-label": o ? void 0 : s ?? "Progress",
 			className: u.track({ className: c }),
-			children: /* @__PURE__ */ t(i.Indicator, {
+			children: /* @__PURE__ */ n(i.Indicator, {
 				"data-slot": "progress-indicator",
 				className: u.indicator(),
 				style: { transform: `translateX(-${100 - d}%)` }

package/src/switch/switch.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useId as i } from "react";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-switch";
 //#region src/switch/switch.tsx
 var o = t({
@@ -32,24 +32,24 @@ var o = t({
 	},
 	defaultVariants: { size: "md" }
 }), s = ({ className: t, size: s, reverse: c, label: l, id: u, ref: d, ...f }) => {
-	let p = i(), m = u ?? (l ? p : void 0), h = o({
+	let p = n(), m = u ?? (l ? p : void 0), h = o({
 		size: s,
 		reverse: c
-	}), g = /* @__PURE__ */ n(a.Root, {
+	}), g = /* @__PURE__ */ r(a.Root, {
 		ref: d,
 		id: m,
 		"data-slot": "switch",
 		className: e(h.root(), t),
 		...f,
-		children: /* @__PURE__ */ n(a.Thumb, {
+		children: /* @__PURE__ */ r(a.Thumb, {
 			"data-slot": "switch-thumb",
 			className: h.thumb()
 		})
 	});
-	return l ? /* @__PURE__ */ r("span", {
+	return l ? /* @__PURE__ */ i("span", {
 		"data-slot": "switch-wrapper",
 		className: h.wrapper(),
-		children: [g, /* @__PURE__ */ n("label", {
+		children: [g, /* @__PURE__ */ r("label", {
 			htmlFor: m,
 			"data-slot": "switch-label",
 			className: h.label(),