@agentero/design-system 0.31.4 → 0.31.6

package/src/combobox/combobox.js

@@ -1,15 +1,16 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { useMergeProps as t } from "../../lib/merge-props.js";
-import { InputContext as n } from "../input/context.js";
-import { inputRecipe as r } from "../input/input.js";
-import { IconCancel as i } from "./icons.js";
-import { tv as a } from "tailwind-variants";
-import { use as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Combobox as l } from "@base-ui/react/combobox";
+import { useFieldContext as n } from "../field/context.js";
+import { InputContext as r } from "../input/context.js";
+import { inputRecipe as i } from "../input/input.js";
+import { IconCancel as a, IconCheck as o } from "./icons.js";
+import { tv as s } from "tailwind-variants";
+import { createContext as c, use as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Combobox as f } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var u = a({ slots: {
+var p = s({ slots: {
 	field: "relative",
 	clear: [
 		"absolute top-1/2 right-3 flex size-6 -translate-y-1/2 cursor-pointer items-center",
@@ -28,82 +29,115 @@ var u = a({ slots: {
 	],
 	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "data-empty:py-0"],
 	item: [
-		"mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
+		"group/item mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
 		"px-3 py-2 text-sm text-text-default-base-primary select-none",
 		"data-highlighted:bg-bg-default-base-primary-hover",
 		"data-disabled:cursor-default data-disabled:text-text-default-base-tertiary"
 	],
+	indicator: [
+		"mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm",
+		"border border-border-input-default bg-bg-input-normal",
+		"text-text-default-base-inverse-primary transition-colors duration-200 ease-in-out",
+		"data-selected:border-bg-checkbox-selected data-selected:bg-bg-checkbox-selected",
+		"[&>svg]:hidden data-selected:[&>svg]:block",
+		"group-data-disabled/item:border-border-checkbox-disabled",
+		"group-data-disabled/item:data-selected:border-bg-checkbox-disabled",
+		"group-data-disabled/item:data-selected:bg-bg-checkbox-disabled"
+	],
 	message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
-} }), d = u(), f = (e) => /* @__PURE__ */ s(l.Root, { ...e });
-f.displayName = "Combobox.Root";
-var p = /* @__PURE__ */ new Set([
+} }), m = p(), h = c(!1), g = ({ onOpenChange: e, ...t }) => {
+	let n = !!t.multiple;
+	return /* @__PURE__ */ u(h, {
+		value: n,
+		children: /* @__PURE__ */ u(f.Root, {
+			onOpenChange: (t, r) => {
+				e?.(t, r), n && !t && r.reason === "item-press" && r.cancel();
+			},
+			...t
+		})
+	});
+};
+g.displayName = "Combobox.Root";
+var _ = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), m = (e) => {
-	let r = o(n), i = r ? Object.fromEntries(Object.entries(r).filter(([e]) => !p.has(e))) : null;
-	return t(i, e);
-}, h = ({ clearLabel: t = "Clear", ...n }) => {
-	let { className: a, size: o = "md", ...u } = m(n);
-	return /* @__PURE__ */ c("div", {
+]), v = (e) => {
+	let i = l(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !_.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
+	return t({
+		...o,
+		...s
+	}, e);
+}, y = ({ clearLabel: t = "Clear", ...n }) => {
+	let { className: r, size: o = "md", ...s } = v(n), c = l(h);
+	return /* @__PURE__ */ d("div", {
 		"data-slot": "combobox-field",
-		className: d.field(),
-		children: [/* @__PURE__ */ s(l.Input, {
+		className: m.field(),
+		children: [/* @__PURE__ */ u(f.Input, {
 			"data-slot": "combobox-input",
 			"data-size": o,
-			className: e(r({ size: o }), "pr-11", a),
-			...u
-		}), /* @__PURE__ */ s(l.Clear, {
+			className: e(i({ size: o }), "pr-11", r),
+			...s
+		}), !c && /* @__PURE__ */ u(f.Clear, {
 			"data-slot": "combobox-clear",
 			"aria-label": t,
-			className: d.clear(),
-			children: /* @__PURE__ */ s(i, {})
+			className: m.clear(),
+			children: /* @__PURE__ */ u(a, {})
 		})]
 	});
 };
-h.displayName = "Combobox.Input";
-var g = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: c = 8, ...u }) => /* @__PURE__ */ s(l.Portal, { children: /* @__PURE__ */ s(l.Positioner, {
+y.displayName = "Combobox.Input";
+var b = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ u(f.Portal, { children: /* @__PURE__ */ u(f.Positioner, {
 	side: n,
 	align: r,
 	sideOffset: i,
 	alignOffset: a,
 	anchor: o,
-	collisionPadding: c,
+	collisionPadding: s,
 	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ s(l.Popup, {
+	children: /* @__PURE__ */ u(f.Popup, {
 		"data-slot": "combobox-content",
-		className: e(d.content(), t),
-		...u
+		className: e(m.content(), t),
+		...c
 	})
 }) });
-g.displayName = "Combobox.Content";
-var _ = ({ className: t, ...n }) => {
+b.displayName = "Combobox.Content";
+var x = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ s(l.List, {
+	return /* @__PURE__ */ u(f.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(d.list(), t),
+		className: e(m.list(), t),
 		...n
 	});
 };
-_.displayName = "Combobox.List";
-var v = ({ className: t, ...n }) => /* @__PURE__ */ s(l.Item, {
-	"data-slot": "combobox-item",
-	className: e(d.item(), t),
-	...n
-});
-v.displayName = "Combobox.Item";
-var y = ({ className: t, ...n }) => /* @__PURE__ */ s(l.Empty, {
+x.displayName = "Combobox.List";
+var S = ({ className: t, children: n, ...r }) => {
+	let i = l(h);
+	return /* @__PURE__ */ d(f.Item, {
+		"data-slot": "combobox-item",
+		className: e(m.item(), t),
+		...r,
+		children: [i && /* @__PURE__ */ u(f.ItemIndicator, {
+			keepMounted: !0,
+			"data-slot": "combobox-item-indicator",
+			className: m.indicator(),
+			children: /* @__PURE__ */ u(o, { className: "size-3.5" })
+		}), n]
+	});
+};
+S.displayName = "Combobox.Item";
+var C = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Empty, {
 	"data-slot": "combobox-empty",
-	className: e(d.message(), t),
+	className: e(m.message(), t),
 	...n
 });
-y.displayName = "Combobox.Empty";
-var b = ({ className: t, ...n }) => /* @__PURE__ */ s(l.Status, {
+C.displayName = "Combobox.Empty";
+var w = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Status, {
 	"data-slot": "combobox-status",
-	className: e(d.message(), t),
+	className: e(m.message(), t),
 	...n
 });
-b.displayName = "Combobox.Status";
+w.displayName = "Combobox.Status";
 //#endregion
-export { g as Content, y as Empty, h as Input, v as Item, _ as List, f as Root, b as Status, u as comboboxRecipe };
+export { b as Content, C as Empty, y as Input, S as Item, x as List, g as Root, w as Status, p as comboboxRecipe };

package/src/combobox/icons.d.ts

@@ -8,3 +8,11 @@ import { SVGProps } from 'react';
  * @summary 24px cancel icon used as the Combobox clear affordance
  */
 export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Material Sharp check drawn inside a selected row's indicator, the same glyph
+ * `Checkbox` uses, so a multi-select row reads as a ticked checkbox. Takes its
+ * color from the surrounding text.
+ *
+ * @summary 24px check used by the Combobox selection indicator
+ */
+export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/combobox/icons.js

@@ -8,6 +8,16 @@ var t = (t) => /* @__PURE__ */ e("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	...t,
 	children: /* @__PURE__ */ e("path", { d: "M12 13.0538L15.0731 16.1269C15.2115 16.2654 15.3856 16.3362 15.5952 16.3394C15.8048 16.3426 15.982 16.2718 16.1269 16.1269C16.2718 15.982 16.3442 15.8064 16.3442 15.6C16.3442 15.3936 16.2718 15.218 16.1269 15.0731L13.0538 12L16.1269 8.9269C16.2653 8.78845 16.3362 8.61442 16.3394 8.4048C16.3426 8.1952 16.2718 8.01797 16.1269 7.8731C15.982 7.72822 15.8064 7.65577 15.6 7.65577C15.3936 7.65577 15.2179 7.72822 15.0731 7.8731L12 10.9462L8.92688 7.8731C8.78842 7.73463 8.61439 7.6638 8.40478 7.6606C8.19518 7.65738 8.01794 7.72822 7.87308 7.8731C7.72819 8.01797 7.65575 8.1936 7.65575 8.4C7.65575 8.6064 7.72819 8.78203 7.87308 8.9269L10.9461 12L7.87308 15.0731C7.73461 15.2115 7.66378 15.3856 7.66058 15.5952C7.65736 15.8048 7.72819 15.982 7.87308 16.1269C8.01794 16.2718 8.19358 16.3442 8.39998 16.3442C8.60638 16.3442 8.78201 16.2718 8.92688 16.1269L12 13.0538ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29657C3.74667 7.14042 4.42342 6.13474 5.27825 5.27952C6.1331 4.42429 7.13834 3.74723 8.29398 3.24835C9.44959 2.74947 10.6844 2.50002 11.9983 2.50002C13.3122 2.50002 14.5473 2.74936 15.7034 3.24802C16.8596 3.74669 17.8652 4.42344 18.7205 5.27827C19.5757 6.13312 20.2527 7.13837 20.7516 8.294C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76664 4 7.87498 4.775 6.32498 6.325C4.77498 7.875 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	stroke: "currentColor",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" })
 });
 //#endregion
-export { t as IconCancel };
+export { t as IconCancel, n as IconCheck };

package/src/combobox/index.d.ts

@@ -1,7 +1,7 @@
 export { comboboxRecipe } from './combobox';
 export declare const Combobox: {
     Root: {
-        <Value, Multiple extends boolean | undefined = false, Item = Value>(props: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+        <Value, Multiple extends boolean | undefined = false, Item = Value>({ onOpenChange, ...props }: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {
@@ -20,7 +20,7 @@ export declare const Combobox: {
         displayName: string;
     };
     Item: {
-        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, ...props }: Omit<import('@base-ui/react/combobox').ComboboxItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Empty: {

package/src/command/command.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
+import { Command as CommandPrimitive, useCommandState as useCommandStatePrimitive } from 'cmdk';
 export declare const commandRecipe: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
@@ -85,6 +85,8 @@ type RootProps = ComponentProps<typeof CommandPrimitive>;
  * nothing to search.
  *
  * `label` names the search input — it is the only prop that can, see `Input`.
+ * A component rendered inside `Root` reads its search text and results with
+ * `useCommandState`, exported next to `Command`.
  *
  * @summary Filterable command palette container
  * @see {@link https://github.com/pacocoursey/cmdk|cmdk}
@@ -242,4 +244,38 @@ export declare const Item: {
     ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Snapshot of the surrounding `Root` that `useCommandState` selects from.
+ *
+ * @property {string} search - Current text in `Input`.
+ * @property {string} value - Value of the active item.
+ * @property {string} [selectedItemId] - DOM id of the active item.
+ * @property {{ count: number; items: Map<string, number>; groups: Set<string> }} filtered -
+ *   Result of the current search: how many items match, each matching item's score keyed by
+ *   value, and the values of the groups that still hold a match.
+ */
+export type CommandState = Parameters<Parameters<typeof useCommandStatePrimitive>[0]>[0];
+/**
+ * Reads the state of the nearest `Command.Root`: the search text, the active
+ * value and the filtered results. The selector picks the slice a component
+ * needs, and the component re-renders only when that slice changes.
+ *
+ * Call it from a component rendered inside `Command.Root`. Import it from here,
+ * not from `cmdk`: this hook and `Root` resolve the same copy of `cmdk`, so it
+ * always finds the state, even when the app installs a different `cmdk` version.
+ *
+ * @summary Hook that reads the search text and results of the surrounding Command
+ *
+ * @example
+ * ```tsx
+ * import { Command, useCommandState } from '@agentero/design-system/command';
+ *
+ * const CreateItem = ({ onCreate }: { onCreate: (name: string) => void }) => {
+ * 	const search = useCommandState(state => state.search);
+ * 	if (!search) return null;
+ * 	return <Command.Item onSelect={() => onCreate(search)}>Create "{search}"</Command.Item>;
+ * };
+ * ```
+ */
+export declare const useCommandState: <T>(selector: (state: CommandState) => T) => T;
 export {};

package/src/command/command.js

@@ -2,9 +2,9 @@
 import { IconSearch as e } from "./icons.js";
 import { tv as t } from "tailwind-variants";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Command as i } from "cmdk";
+import { Command as i, useCommandState as a } from "cmdk";
 //#region src/command/command.tsx
-var a = t({ slots: {
+var o = t({ slots: {
 	root: ["overflow-hidden rounded-md bg-bg-default-base-primary shadow-xl", "border border-border-default-base-primary"],
 	search: ["flex items-center gap-2 px-4 py-3", "border-b border-border-default-base-primary"],
 	searchIcon: "shrink-0 pointer-events-none [&>path]:fill-icon-default-base-tertiary",
@@ -18,48 +18,49 @@ var a = t({ slots: {
 		"data-[disabled=true]:cursor-default data-[disabled=true]:text-text-default-disable-primary",
 		"data-[disabled=true]:hover:bg-transparent data-[disabled=true]:data-[selected=true]:bg-transparent"
 	]
-} }), o = a(), s = ({ className: e, ...t }) => /* @__PURE__ */ n(i, {
+} }), s = o(), c = ({ className: e, ...t }) => /* @__PURE__ */ n(i, {
 	"data-slot": "command-root",
-	className: o.root({ className: e }),
+	className: s.root({ className: e }),
 	...t
 });
-s.displayName = "Command.Root";
-var c = ({ className: t, ...a }) => /* @__PURE__ */ r("div", {
+c.displayName = "Command.Root";
+var l = ({ className: t, ...a }) => /* @__PURE__ */ r("div", {
 	"data-slot": "command-search",
-	className: o.search({ className: t }),
+	className: s.search({ className: t }),
 	children: [/* @__PURE__ */ n(e, {
 		"data-slot": "command-search-icon",
-		className: o.searchIcon(),
+		className: s.searchIcon(),
 		"aria-hidden": !0
 	}), /* @__PURE__ */ n(i.Input, {
 		"data-slot": "command-input",
-		className: o.input(),
+		className: s.input(),
 		...a
 	})]
 });
-c.displayName = "Command.Input";
-var l = ({ className: e, ...t }) => /* @__PURE__ */ n(i.List, {
+l.displayName = "Command.Input";
+var u = ({ className: e, ...t }) => /* @__PURE__ */ n(i.List, {
 	"data-slot": "command-list",
-	className: o.list({ className: e }),
+	className: s.list({ className: e }),
 	...t
 });
-l.displayName = "Command.List";
-var u = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Empty, {
+u.displayName = "Command.List";
+var d = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Empty, {
 	"data-slot": "command-empty",
-	className: o.empty({ className: e }),
+	className: s.empty({ className: e }),
 	...t
 });
-u.displayName = "Command.Empty";
-var d = (e) => /* @__PURE__ */ n(i.Group, {
+d.displayName = "Command.Empty";
+var f = (e) => /* @__PURE__ */ n(i.Group, {
 	"data-slot": "command-group",
 	...e
 });
-d.displayName = "Command.Group";
-var f = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Item, {
+f.displayName = "Command.Group";
+var p = ({ className: e, ...t }) => /* @__PURE__ */ n(i.Item, {
 	"data-slot": "command-item",
-	className: o.item({ className: e }),
+	className: s.item({ className: e }),
 	...t
 });
-f.displayName = "Command.Item";
+p.displayName = "Command.Item";
+var m = (e) => a(e);
 //#endregion
-export { u as Empty, d as Group, c as Input, f as Item, l as List, s as Root, a as commandRecipe };
+export { d as Empty, f as Group, l as Input, p as Item, u as List, c as Root, o as commandRecipe, m as useCommandState };

package/src/command/index.d.ts

@@ -1,4 +1,5 @@
-export { commandRecipe } from './command';
+export { commandRecipe, useCommandState } from './command';
+export type { CommandState } from './command';
 export declare const Command: {
     Root: {
         ({ className, ...props }: {

package/src/command/index.js

@@ -1,6 +1,6 @@
-import { Empty as e, Group as t, Input as n, Item as r, List as i, Root as a, commandRecipe as o } from "./command.js";
+import { Empty as e, Group as t, Input as n, Item as r, List as i, Root as a, commandRecipe as o, useCommandState as s } from "./command.js";
 //#region src/command/index.ts
-var s = {
+var c = {
 	Root: a,
 	Input: n,
 	List: i,
@@ -9,4 +9,4 @@ var s = {
 	Item: r
 };
 //#endregion
-export { s as Command, o as commandRecipe };
+export { c as Command, o as commandRecipe, s as useCommandState };

package/src/field/context.d.ts

@@ -19,6 +19,13 @@ export type FieldErrorLike = {
 export type FieldContextValue = {
     /** `id` the control must carry so the label points at it. */
     controlId: string;
+    /**
+     * `id` the `Label` carries, for a control that names itself with
+     * `aria-labelledby` because a plain `<label for>` is not enough: a floating
+     * surface that hides the rest of the page from assistive technology hides
+     * the label with it, and only a direct reference survives that.
+     */
+    labelId: string;
     /** `id` the `Field.Description` takes by default. One description per field. */
     descriptionId: string;
     /** `id` the `Field.Error` takes by default. One error element per field. */

package/src/field/field.d.ts

@@ -126,7 +126,9 @@ export type FieldRootProps = ComponentPropsWithRef<'div'> & {
  * `Field.Description` and `Field.Error` read `FieldContext` and register
  * themselves so the control's `aria-describedby` lists exactly the messages on
  * screen, and a `Field<X>` such as `FieldText` provides the control's context so
- * the control associates itself too. Nobody passes an `id` by hand.
+ * the control associates itself too. Nobody passes an `id` by hand. The label
+ * gets an id as well (`labelId` in `FieldContext`) for a control that must
+ * name itself with `aria-labelledby`, as `Combobox.Input` does.
  *
  * Presentational and form-library agnostic: pass `invalid` and the error
  * messages from whatever validates the form. Deliberately not a `role="group"`:

package/src/field/field.js

@@ -45,21 +45,23 @@ 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))), []), C = {
+	let g = l(), _ = p ?? `${g}-control`, v = `${g}-label`, y = `${g}-description`, b = `${g}-error`, [x, S] = d([]), C = c((e) => (S((t) => t.includes(e) ? t : [...t, e]), () => S((t) => t.filter((t) => t !== e))), []), w = {
 		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,
+		labelId: v,
+		descriptionId: y,
+		errorId: b,
+		describedBy: [...[y, b].filter((e) => x.includes(e)), ...x.filter((e) => e !== y && e !== b)].join(" ") || void 0,
+		registerMessage: C,
 		invalid: a,
 		disabled: o,
 		readOnly: s,
 		required: u
 	};
 	return /* @__PURE__ */ f(i, {
-		value: C,
+		value: w,
 		children: /* @__PURE__ */ f(t, {
 			value: {
+				id: v,
 				htmlFor: _,
 				required: u || void 0
 			},

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

@@ -1,11 +1,11 @@
 "use client";
-import { InputContext as e } from "../input/context.js";
-import { useFieldContext as t } from "../field/context.js";
-import { Field as n } from "../field/index.js";
+import { useFieldContext as e } from "../field/context.js";
+import { Field as t } from "../field/index.js";
+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: n }) => {
-	let i = t(), a = i && {
+var i = ({ children: t }) => {
+	let i = e(), a = i && {
 		id: i.controlId,
 		"aria-describedby": i.describedBy,
 		"aria-invalid": i.invalid || void 0,
@@ -13,12 +13,12 @@ var i = ({ children: n }) => {
 		disabled: i.disabled || void 0,
 		readOnly: i.readOnly || void 0
 	};
-	return /* @__PURE__ */ r(e, {
+	return /* @__PURE__ */ r(n, {
 		value: a,
-		children: n
+		children: t
 	});
-}, a = ({ children: e, ...t }) => /* @__PURE__ */ r(n.Root, {
-	...t,
+}, a = ({ children: e, ...n }) => /* @__PURE__ */ r(t.Root, {
+	...n,
 	children: /* @__PURE__ */ r(i, { children: e })
 });
 a.displayName = "FieldText";

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

@@ -1,7 +1,7 @@
 "use client";
 import { mergeProps as e } from "../../lib/merge-props.js";
-import { Input as t } from "../input/input.js";
-import { Field as n } from "../field/index.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";
@@ -23,15 +23,15 @@ var s = ({ name: s, control: c, rules: l, shouldUnregister: u, disabled: d, labe
 		invalid: b.invalid,
 		disabled: d || y.disabled,
 		...v,
-		children: [/* @__PURE__ */ i(n.Label, {
+		children: [/* @__PURE__ */ i(t.Label, {
 			tooltip: m,
 			tooltipSide: h,
 			optional: g,
 			children: f
-		}), /* @__PURE__ */ a(n.Content, { children: [
-			/* @__PURE__ */ i(t, { ...e(x, _ ?? {}) }),
-			p && /* @__PURE__ */ i(n.Description, { children: p }),
-			/* @__PURE__ */ i(n.Error, { errors: b.error ? [b.error] : void 0 })
+		}), /* @__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 })
 		] })]
 	});
 };