@jonmilner/ui 0.1.0 → 0.1.2

package/dist/Box/index.d.mts

@@ -1,10 +1,8 @@
 import { Sprinkles } from "../styles/atoms.css.mjs";
-import { OmitEach } from "../types.mjs";
-import { ComponentPropsWithRef, ElementType } from "react";
+import { PolymorphicProps } from "../types.mjs";
+import { ElementType } from "react";
 //#region src/Box/index.d.ts
 export type StyleProps = { [K in keyof Sprinkles]?: Sprinkles[K] | null | false; };
-export type BoxProps<T extends ElementType = "div"> = {
-  as?: T;
-} & StyleProps & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps>;
+export type BoxProps<T extends ElementType = "div"> = PolymorphicProps<T, StyleProps>;
 export declare function Box<T extends ElementType = "div">({ as, className, ...props }: BoxProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/Button/index.d.mts

@@ -1,8 +1,8 @@
-import { OmitEach } from "../types.mjs";
+import { PolymorphicProps } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
 import { ClickableOwnProps } from "../Clickable/index.mjs";
 import { IconProps } from "../Icon/index.mjs";
-import { ComponentPropsWithRef, ComponentType, ElementType } from "react";
+import { ComponentType, ElementType } from "react";
 //#region src/Button/index.d.ts
 export type ButtonOwnProps = {
   iconEnd?: ComponentType<IconProps>;
@@ -11,9 +11,7 @@ export type ButtonOwnProps = {
   size?: "sm" | "med" | "lg";
   variant?: "primary" | "secondary" | "danger";
 };
-export type ButtonProps<T extends ElementType = "button"> = {
-  as?: T;
-} & StyleProps & ButtonOwnProps & Omit<ClickableOwnProps, "busy"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof ClickableOwnProps | keyof ButtonOwnProps | "aria-disabled" | "aria-busy">;
+export type ButtonProps<T extends ElementType = "button"> = PolymorphicProps<T, StyleProps & ButtonOwnProps & Omit<ClickableOwnProps, "busy">, "busy" | "aria-disabled" | "aria-busy">;
 export declare function Button<T extends ElementType = "button">({ variant, size, loading: loadingProp, iconStart: IconStart, iconEnd: IconEnd, minBlockSize, paddingBlock, paddingInline, gap, borderRadius, backgroundColor, color, className, children, "aria-busy": ariaBusy, ...props }: ButtonProps<T> & {
   "aria-busy"?: boolean | "true" | "false";
 }): import("react").JSX.Element;

package/dist/Clickable/index.d.mts

@@ -1,13 +1,11 @@
-import { OmitEach } from "../types.mjs";
+import { PolymorphicProps } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
-import { ComponentPropsWithRef, ElementType } from "react";
+import { ElementType } from "react";
 //#region src/Clickable/index.d.ts
 export type ClickableOwnProps = {
   busy?: boolean;
   disabled?: boolean;
 };
-export type ClickableProps<T extends ElementType = "button"> = {
-  as?: T;
-} & StyleProps & ClickableOwnProps & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof ClickableOwnProps | "aria-disabled" | "aria-busy">;
+export type ClickableProps<T extends ElementType = "button"> = PolymorphicProps<T, StyleProps & ClickableOwnProps, "aria-disabled" | "aria-busy">;
 export declare function Clickable<T extends ElementType = "button">({ as, disabled, busy, display, alignItems, justifyContent, minInlineSize, minBlockSize, className, ...props }: ClickableProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/Dialog/index.mjs

@@ -22,6 +22,7 @@ function g({ title: a, description: o, size: c = "med", position: h = "fixed", m
 		position: "fixed",
 		zIndex: "modal"
 	}) }), /* @__PURE__ */ p(m.Popup, {
+		"aria-modal": !0,
 		...j,
 		render: /* @__PURE__ */ f(n, {
 			zIndex: "modal",

package/dist/IconButton/index.d.mts

@@ -1,8 +1,8 @@
-import { OmitEach } from "../types.mjs";
+import { PolymorphicProps } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
 import { ClickableOwnProps } from "../Clickable/index.mjs";
 import { IconProps } from "../Icon/index.mjs";
-import { ComponentPropsWithRef, ComponentType, ElementType } from "react";
+import { ComponentType, ElementType } from "react";
 //#region src/IconButton/index.d.ts
 export type IconButtonOwnProps = {
   icon: ComponentType<IconProps>;
@@ -10,8 +10,6 @@ export type IconButtonOwnProps = {
   size?: "sm" | "med" | "lg";
   variant?: "primary" | "secondary";
 };
-export type IconButtonProps<T extends ElementType = "button"> = {
-  as?: T;
-} & StyleProps & IconButtonOwnProps & Omit<ClickableOwnProps, "busy"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof ClickableOwnProps | keyof IconButtonOwnProps | "aria-disabled" | "aria-busy" | "aria-label" | "aria-labelledby" | "children">;
+export type IconButtonProps<T extends ElementType = "button"> = PolymorphicProps<T, StyleProps & IconButtonOwnProps & Omit<ClickableOwnProps, "busy">, "busy" | "aria-disabled" | "aria-busy" | "aria-label" | "aria-labelledby" | "children">;
 export declare function IconButton<T extends ElementType = "button">({ label, icon: IconComponent, variant, size, minInlineSize, minBlockSize, borderRadius, backgroundColor, color, className, ...props }: IconButtonProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/Inline/index.d.mts

@@ -1,15 +1,14 @@
-import { OmitEach } from "../types.mjs";
+import { PolymorphicProps } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
-import { ComponentPropsWithRef, ElementType } from "react";
+import { ElementType } from "react";
 //#region src/Inline/index.d.ts
 type Gap = StyleProps["gap"];
 type Token = Extract<Gap, string>;
-export type InlineProps<T extends ElementType = "div"> = {
-  as?: T;
+export type InlineProps<T extends ElementType = "div"> = PolymorphicProps<T, {
   gap: Token | (Extract<Gap, object> & {
     base: Token;
   });
-} & Omit<StyleProps, "gap"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps>;
+} & Omit<StyleProps, "gap">>;
 export declare function Inline<T extends ElementType = "div">({ display, flexDirection, flexWrap, alignItems, className, ...props }: InlineProps<T>): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/SearchField/client.d.mts

@@ -0,0 +1,5 @@
+import "./index.mjs";
+import { AriaAttributes, ComponentPropsWithRef } from "react";
+//#region src/SearchField/client.d.ts
+export type SearchFieldInputProps = Pick<ComponentPropsWithRef<"input">, "ref" | "id" | "autoFocus" | "autoComplete" | "spellCheck" | "enterKeyHint" | "maxLength" | "onKeyDown" | Exclude<keyof AriaAttributes, "aria-label" | "aria-labelledby" | "aria-invalid" | "aria-describedby" | "aria-errormessage" | "aria-disabled" | "aria-required" | "aria-readonly" | "aria-hidden">>;
+//#endregion

package/dist/SearchField/client.mjs

@@ -23,46 +23,49 @@ var f = {
 		square: "med"
 	}
 };
-function p({ value: p, defaultValue: m, onValueChange: h, placeholder: g, size: _, disabled: v, required: y, name: b, clearLabel: x }) {
-	let S = l(null), [C, w] = u(m), T = p ?? C, E = (e) => {
-		p === void 0 && w(e), h?.(e);
-	}, D = T !== "" && (p === void 0 || h !== void 0), O = (e) => {
+function p({ value: p, defaultValue: m, onValueChange: h, placeholder: g, size: _, disabled: v, required: y, name: b, clearLabel: x, inputProps: { ref: S, onKeyDown: C, ...w } = {} }) {
+	let T = l(null), [E, D] = u(m), O = p ?? E, k = (e) => {
+		p === void 0 && D(e), h?.(e);
+	}, A = O !== "" && (p === void 0 || h !== void 0), j = (e) => {
+		if (C?.(e), e.defaultPrevented) return;
 		let t = e.nativeEvent.isComposing || e.keyCode === 229;
-		e.key === "Escape" && D && !t && (e.preventDefault(), e.stopPropagation(), E(""));
-	}, k = f[_];
+		e.key === "Escape" && A && !t && (e.preventDefault(), e.stopPropagation(), k(""));
+	}, M = f[_];
 	return /* @__PURE__ */ c(e, {
 		alignItems: "center",
 		display: "grid",
 		children: [
 			/* @__PURE__ */ s(d, {
+				...w,
 				name: b,
-				onKeyDown: O,
-				onValueChange: E,
+				onKeyDown: j,
+				onValueChange: k,
 				placeholder: g,
 				ref: S,
 				render: /* @__PURE__ */ s(t, {
 					as: "input",
 					className: o({ size: _ }),
+					ref: T,
 					size: _
 				}),
 				required: y,
 				type: "search",
-				value: T
+				value: O
 			}),
 			/* @__PURE__ */ s(r, {
 				className: a({ size: _ }),
 				size: _
 			}),
-			T !== "" && !v && /* @__PURE__ */ s(n, {
+			O !== "" && !v && /* @__PURE__ */ s(n, {
 				className: "_1cj8r6g9",
 				icon: i,
 				label: x,
-				minBlockSize: k.square,
-				minInlineSize: k.square,
+				minBlockSize: M.square,
+				minInlineSize: M.square,
 				onClick: () => {
-					E(""), S.current?.focus();
+					k(""), T.current?.focus();
 				},
-				size: k.size
+				size: M.size
 			})
 		]
 	});

package/dist/SearchField/index.d.mts

@@ -1,4 +1,5 @@
 import { StyleProps } from "../Box/index.mjs";
+import { SearchFieldInputProps } from "./client.mjs";
 import { CSSProperties, ReactNode } from "react";
 //#region src/SearchField/index.d.ts
 export type SearchFieldProps = StyleProps & {
@@ -9,6 +10,7 @@ export type SearchFieldProps = StyleProps & {
   disabled?: boolean;
   error?: ReactNode;
   hideLabel?: boolean;
+  inputProps?: SearchFieldInputProps;
   label: ReactNode;
   name?: string;
   onValueChange?: (value: string) => void;
@@ -18,5 +20,6 @@ export type SearchFieldProps = StyleProps & {
   style?: CSSProperties;
   value?: string;
 };
-export declare function SearchField({ label, hideLabel, value, defaultValue, onValueChange, placeholder, description, error, size, disabled, required, name, clearLabel, className, style, ...atoms }: SearchFieldProps): import("react").JSX.Element;
-//#endregion
+export declare function SearchField({ label, hideLabel, value, defaultValue, onValueChange, placeholder, description, error, size, disabled, required, name, clearLabel, inputProps, className, style, ...atoms }: SearchFieldProps): import("react").JSX.Element;
+//#endregion
+export type { SearchFieldInputProps };

package/dist/SearchField/index.mjs

@@ -3,13 +3,13 @@ import { hiddenLabel as t } from "./SearchField.css.mjs";
 import { SearchFieldControl as n } from "./client.mjs";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/SearchField/index.tsx
-function a({ label: a, hideLabel: o = !1, value: s, defaultValue: c = "", onValueChange: l, placeholder: u, description: d, error: f, size: p = "med", disabled: m = !1, required: h = !1, name: g, clearLabel: _ = "Clear search", className: v, style: y, ...b }) {
+function a({ label: a, hideLabel: o = !1, value: s, defaultValue: c = "", onValueChange: l, placeholder: u, description: d, error: f, size: p = "med", disabled: m = !1, required: h = !1, name: g, clearLabel: _ = "Clear search", inputProps: v, className: y, style: b, ...x }) {
 	return /* @__PURE__ */ i(e, {
-		...b,
-		className: v,
+		...x,
+		className: y,
 		disabled: m,
 		invalid: f != null && f !== !1 && f !== "",
-		style: y,
+		style: b,
 		children: [
 			/* @__PURE__ */ r(e.Label, {
 				className: o ? t : void 0,
@@ -19,6 +19,7 @@ function a({ label: a, hideLabel: o = !1, value: s, defaultValue: c = "", onValu
 				clearLabel: _,
 				defaultValue: c,
 				disabled: m,
+				inputProps: v,
 				name: g,
 				onValueChange: l,
 				placeholder: u,

package/dist/Stack/index.d.mts

@@ -1,15 +1,14 @@
-import { OmitEach } from "../types.mjs";
+import { PolymorphicProps } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
-import { ComponentPropsWithRef, ElementType } from "react";
+import { ElementType } from "react";
 //#region src/Stack/index.d.ts
 type Gap = StyleProps["gap"];
 type Token = Extract<Gap, string>;
-export type StackProps<T extends ElementType = "div"> = {
-  as?: T;
+export type StackProps<T extends ElementType = "div"> = PolymorphicProps<T, {
   gap: Token | (Extract<Gap, object> & {
     base: Token;
   });
-} & Omit<StyleProps, "gap"> & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps>;
+} & Omit<StyleProps, "gap">>;
 export declare function Stack<T extends ElementType = "div">({ display, flexDirection, className, ...props }: StackProps<T>): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/Tag/Tag.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
-@layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{white-space:normal;text-overflow:clip}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}
+@layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{white-space:normal;text-overflow:clip;padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Tag/index.mjs

@@ -34,7 +34,7 @@ var g = {
 		paddingInlineEnd: "8"
 	}
 };
-function _({ size: a = "med", href: p, onRemove: m, removeLabel: _, display: v = "inline-flex", alignItems: y = "center", gap: b = "2", minBlockSize: x = "xs", paddingInlineStart: S = g[a].paddingInlineStart, paddingInlineEnd: C = m ? "2" : g[a].paddingInlineEnd, borderRadius: w = "full", backgroundColor: T = "bgMuted", color: E = "fg", maxInlineSize: D, className: O, style: k, children: A, ...j }) {
+function _({ size: a = "med", href: p, onRemove: m, removeLabel: _, display: v = "inline-flex", alignItems: y = "center", gap: b = "2", minBlockSize: x = "xs", paddingInlineStart: S = g[a].paddingInlineStart, paddingInlineEnd: C = m ? "2" : g[a].paddingInlineEnd, borderRadius: w = "lg", backgroundColor: T = "bgMuted", color: E = "fg", maxInlineSize: D, className: O, style: k, children: A, ...j }) {
 	if (A == null || typeof A == "boolean" || A === "" || f(A) === "") return null;
 	let M = h(D, k), N = /* @__PURE__ */ u(r, {
 		as: "span",

package/dist/Text/index.d.mts

@@ -1,8 +1,8 @@
-import { OmitEach } from "../types.mjs";
+import { PolymorphicProps } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
 import { tokens } from "../tokens/scales.mjs";
 import { FontRole } from "../tokens/roles.mjs";
-import { ComponentPropsWithRef, ElementType } from "react";
+import { ElementType } from "react";
 //#region src/Text/index.d.ts
 export type TextOwnProps = {
   font?: FontRole;
@@ -11,8 +11,6 @@ export type TextOwnProps = {
   truncate?: boolean;
   weight?: keyof typeof tokens.fontWeight;
 };
-export type TextProps<T extends ElementType = "p"> = {
-  as?: T;
-} & StyleProps & TextOwnProps & OmitEach<ComponentPropsWithRef<T>, "as" | keyof StyleProps | keyof TextOwnProps>;
+export type TextProps<T extends ElementType = "p"> = PolymorphicProps<T, StyleProps & TextOwnProps>;
 export declare function Text<T extends ElementType = "p">({ as, size, font, weight, leading, truncate, display, overflow, className, ...props }: TextProps<T>): import("react").JSX.Element;
 //#endregion

package/dist/Toast/Toast.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
-@layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}
+@layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc2:has([data-swiping],[data-swipe-direction=down]){overflow-y:hidden}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}

package/dist/base.css

@@ -1,5 +1,5 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
-@layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
+@layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
 
 @font-face{src:local(Arial),local(ArialMT);size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback", sans-serif;--font-heading:"Inter", "Inter Fallback", sans-serif;--font-display:"Inter", "Inter Fallback", sans-serif;--font-label:"Inter", "Inter Fallback", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
 

package/dist/docs/AlertDialog.md

@@ -73,7 +73,7 @@ const [open, setOpen] = useState(false);
 
 ## Accessibility
 
-- The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="alertdialog"`, labelled by the title and described by the description.
+- The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="alertdialog"` with `aria-modal`, labelled by the title and described by the description.
 - Opening moves focus to Cancel; Tab and Shift+Tab cycle between the two buttons, and the page behind is inert. Esc or Cancel closes it, and focus returns to the trigger. A click outside does nothing.
 - The danger confirm button is told apart by its label as well as its color.
 - Under reduced motion the panel only fades.

package/dist/docs/Box.md

@@ -20,6 +20,7 @@ The base element every component builds on: one element, chosen with `as`, style
 
 - Style props take token keys only. Spacing keys are px values (`"16"`); the middle step is `med`, never `md`.
 - Properties are logical: `paddingInline`, `marginBlockStart`, `inlineSize`. There is no `paddingLeft` or `width`.
+- Sizing keys `xs`, `sm`, `med`, `lg` and `xl` are control heights, 24 to 56px: `maxInlineSize="lg"` is 48px wide. For a page or panel width use a container width, on `inlineSize`, `minInlineSize` and `maxInlineSize` only: `prose` (40rem, a reading column), `page` (64rem) or `wide` (80rem). `full`, `fit`, `min`, `max` and `auto` work on every sizing prop.
 - Only layout props are responsive: `{ base: "none", med: "flex" }` with breakpoints `sm`, `med`, `lg`, `xl`. Color and the rest take one value.
 - There are no hover, focus or active props; states belong in component CSS.
 - `null` and `false` leave a prop unset, so `paddingInline={dense && "8"}` works.
@@ -38,6 +39,13 @@ The base element every component builds on: one element, chosen with `as`, style
 <Box backgroundColor="bgRaised" borderRadius="med" boxShadow="sm" padding="16" />
 ```
 
+```tsx
+// A centered page: full width on small screens, at most 64rem on wide ones.
+<Box as="main" maxInlineSize="page" marginInline="auto" padding={{ base: "16", med: "32" }}>
+  …
+</Box>
+```
+
 ## Don't
 
 ```tsx
@@ -45,6 +53,11 @@ The base element every component builds on: one element, chosen with `as`, style
 <Box paddingLeft="16" gap="md" />
 ```
 
+```tsx
+// `lg` is a control height: this page is 48px wide.
+<Box as="main" maxInlineSize="lg" marginInline="auto" />
+```
+
 ```tsx
 // `style` is not checked: raw values here bypass the tokens.
 <Box style={{ color: "#333" }} />

package/dist/docs/SearchField.md

@@ -25,8 +25,11 @@ A form field for a search query: an `<input type="search">` (role `searchbox`) w
 - `disabled` uses the native `disabled`: the input leaves the tab order and does not submit, with a dashed border. `required` sets the native `required`.
 - `name` submits the query with its form. An uncontrolled field does not follow a native form reset; control it if the form resets.
 - Style props, `className` and `style` go to the `Field` around the label, input and messages, not to the input.
+- `inputProps` reach the input: `ref`, `id`, `autoFocus`, `autoComplete`, `spellCheck`, `enterKeyHint`, `maxLength`, `onKeyDown` and `aria-*` such as `aria-controls` (ADR 0093). `label` owns the name, Field owns `aria-invalid`, `aria-describedby` and `aria-errormessage`, and `disabled` and `required` own their state, so those, `aria-readonly` and `aria-hidden` are not among them.
+- A consumer `onKeyDown` runs before the field's own. Escape still clears unless that handler called `event.preventDefault()`. A prevented Escape also propagates, so a surrounding Dialog closes on it.
+- A consumer `ref` gets the input, and the clear button still returns focus to it. A consumer `id` takes over from Field's generated one at hydration, and the label follows it.
 - Wrapping the field in a search landmark (`<search>` or `role="search"`, with the form around it) is the page's job, not the field's.
-- The module has no hooks, so a server component can render it; `onValueChange` must come from a client component.
+- The module has no hooks, so a server component can render it; `onValueChange`, and an `inputProps` `ref` or `onKeyDown`, must come from a client component.
 
 ## Do
 
@@ -51,8 +54,25 @@ A form field for a search query: an `<input type="search">` (role `searchbox`) w
 </search>
 ```
 
+```tsx
+// A "/" shortcut focuses the field; the results list is the input's `aria-controls`.
+const ref = useRef<HTMLInputElement>(null);
+<SearchField
+  label="Search issues"
+  hideLabel
+  value={query}
+  onValueChange={setQuery}
+  inputProps={{ ref, autoComplete: "off", "aria-controls": "issue-results" }}
+/>;
+```
+
 ## Don't
 
+```tsx
+// Another name for the input: `label` names it, visible or not.
+<SearchField label="Search issues" inputProps={{ "aria-label": "Find" }} />
+```
+
 ```tsx
 // The placeholder is not a name: it disappears on the first keystroke.
 <SearchField label="" placeholder="Search" />
@@ -94,6 +114,7 @@ Generated from the TypeScript types.
 | `disabled` | `boolean` | no |  |
 | `error` | `ReactNode` | no |  |
 | `hideLabel` | `boolean` | no |  |
+| `inputProps` | `SearchFieldInputProps` | no |  |
 | `label` | `ReactNode` | yes |  |
 | `name` | `string` | no |  |
 | `onValueChange` | `((value: string) => void)` | no |  |

package/dist/docs/Tag.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-A label that puts content in a category: a topic, a label, a user-made category. A `span` with a `bgMuted` fill and a full radius around a `Text` in the `label` font. It can be read-only, a link, or removable.
+A label that puts content in a category: a topic, a label, a user-made category. A `span` with a `bgMuted` fill and an `lg` radius (half a one-line tag's height, so one line reads as a pill and wrapped lines stay inside the fill) around a `Text` in the `label` font. It can be read-only, a link, or removable.
 
 ## When to use
 
@@ -22,8 +22,8 @@ A label that puts content in a category: a topic, a label, a user-made category.
 - `size`: `sm` or `med` (default), the label's `fontSize` step. There are no color variants yet: a Tag is neutral (`fg` on `bgMuted`, a `contrastPairs` pair).
 - Read-only is the default. `href` makes the label a link (a `Clickable` `<a>` around the text, underlined). The tag itself stays a `span`, so a remove button never nests in the link.
 - `onRemove` adds a native `<button>` after the label with an `x` icon. Its name is "Remove <label>" from a string or number label; set `removeLabel` for any other label. Enter and Space activate it; the click calls `onRemove`. Tag handles no keys, so Backspace and Delete do nothing (ADR 0003, 0055).
-- Wrapping: an uncapped label wraps to the width it has, so a tag never overflows a narrow container or a 320px viewport at large text sizes.
-- Truncation: set `maxInlineSize` on the Tag, as the style prop or in `style` (the style prop's steps stop at 56px, so most caps are `style={{ maxInlineSize: "min(10rem, 100%)" }}`; the `100%` keeps a rem cap inside a narrow container at large text sizes). `style.maxWidth` counts too, and `style` wins over the prop, as inline styles do. A responsive prop truncates only with a `base` step and a size step (or `full`) at every breakpoint: `{ med: "xl" }` and `{ base: "xl", med: "fit" }` wrap. The prop's `fit`, `min`, `max` and `auto`, and `style` values `none`, `auto` and `*-content`, follow the content and wrap. A cap set only through `className` wraps instead. The label becomes one line with an ellipsis. While the pointer is over the tag, or focus is inside it, the label shows its whole text, wrapped within the same width. There is no tooltip and no `title`; the DOM always holds the full text, so screen readers read all of it and so does the remove button's name. The tag grows in height when it reveals, so leave room for it in a tight row. A read-only tag takes no focus, so a keyboard user cannot reveal it: cap read-only tags only where the full text is also elsewhere, or make them links.
+- Wrapping: an uncapped label wraps to the width it has, so a tag never overflows a narrow container or a 320px viewport at large text sizes. Every line stays inside the fill and its rounded corners, and inside the outline under forced colors.
+- Truncation: set `maxInlineSize` on the Tag, as the style prop or in `style` (the style prop's steps stop at 56px, so most caps are `style={{ maxInlineSize: "min(10rem, 100%)" }}`; the `100%` keeps a rem cap inside a narrow container at large text sizes). `style.maxWidth` counts too, and `style` wins over the prop, as inline styles do. A responsive prop truncates only with a `base` step and a size step (or `full`) at every breakpoint: `{ med: "xl" }` and `{ base: "xl", med: "fit" }` wrap. The prop's `fit`, `min`, `max` and `auto`, and `style` values `none`, `auto` and `*-content`, follow the content and wrap. A cap set only through `className` wraps instead. The label becomes one line with an ellipsis. While the pointer is over the tag, or focus is inside it, the label shows its whole text, wrapped within the same width and laid out as an uncapped label, so no line's descenders or link underline are cut off. There is no tooltip and no `title`; the DOM always holds the full text, so screen readers read all of it and so does the remove button's name. The tag grows in height when it reveals, so leave room for it in a tight row. A read-only tag takes no focus, so a keyboard user cannot reveal it: cap read-only tags only where the full text is also elsewhere, or make them links.
 - With no children it renders nothing. Display, fill, text color, padding, radius and `minBlockSize` (the remove button's 24px target) are default style props; a consumer's win. `className`, `style` and `ref` go to the root, `className` last.
 - The module has no hooks, so a server component can render it.
 

package/dist/docs/llms.txt

@@ -22,7 +22,7 @@
 - [SearchField](SearchField.md): A form field for a search query: an `<input type="search">` (role `searchbox`) with a search icon at its inline start and, while it holds a value, a clear button at its inline end. Escape empties a field that has a value, and the clear button empties it and puts focus back in the input, so a keyboard user never loses their place (ADR 0087). Built on Base UI's `Input` (ADR 0003); it composes `Field` for its label, description and error (ADR 0026). Three sizes at Button's heights (`sm`, `med`, `lg`: 32, 40 and 48 px).
 - [Stack](Stack.md): A vertical column of children with even space between them. `Stack` is a `Box` with `display="flex"` and `flexDirection="column"` as default style props, spaced by a required `gap`. Children render as they are: no wrapper per child.
 - [Tabs](Tabs.md): Switches between views that share one place on the page. The parts are `Tabs` (the root, a flex column; a row when vertical), `Tabs.List` (the `tablist`), `Tabs.Tab` (a `tab` button on `Clickable`) and `Tabs.Panel` (the `tabpanel`). Built on Base UI `Tabs` (ADR 0003, 0046): it owns the selection, one tab stop with arrow-key roving, `aria-selected`, and the ids that tie each tab to its panel. The selected tab shows an accent bar that fades and grows in (ADR 0049).
-- [Tag](Tag.md): A label that puts content in a category: a topic, a label, a user-made category. A `span` with a `bgMuted` fill and a full radius around a `Text` in the `label` font. It can be read-only, a link, or removable.
+- [Tag](Tag.md): A label that puts content in a category: a topic, a label, a user-made category. A `span` with a `bgMuted` fill and an `lg` radius (half a one-line tag's height, so one line reads as a pill and wrapped lines stay inside the fill) around a `Text` in the `label` font. It can be read-only, a link, or removable.
 - [Text](Text.md): The base of all visible text, and the primitive every text component builds on. Capsize trims the box to the cap height and the baseline, so the gap around text is the visible space. It takes every Box style prop (`color`, `textAlign`, margins), plus `size`, `font`, `weight`, `leading` and `truncate`.
 - [Toast](Toast.md): Tells the user briefly about the result of an action without interrupting them: "Changes saved", "Message sent", "Couldn't upload the file". Material calls it a snackbar and Atlassian a flag. Built on Base UI's Toast, which owns the queue, the timers and swipe-to-dismiss. The parts add the look: a raised card in a stack at the bottom end corner, an icon per variant, a close button, and a slide-up-and-fade that is a plain fade under reduced motion. A toast never takes focus and moves nothing on the page.
 

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "components": [
     {
       "name": "AlertDialog",
@@ -1446,6 +1446,11 @@
           "type": "boolean",
           "required": false
         },
+        {
+          "name": "inputProps",
+          "type": "SearchFieldInputProps",
+          "required": false
+        },
         {
           "name": "label",
           "type": "ReactNode",
@@ -2015,7 +2020,7 @@
     },
     {
       "name": "inlineSize",
-      "type": "\"auto\" | \"fit\" | \"full\" | \"lg\" | \"max\" | \"med\" | \"min\" | \"sm\" | \"xl\" | \"xs\"",
+      "type": "\"auto\" | \"fit\" | \"full\" | \"lg\" | \"max\" | \"med\" | \"min\" | \"page\" | \"prose\" | \"sm\" | \"wide\" | \"xl\" | \"xs\"",
       "required": false,
       "values": [
         "auto",
@@ -2025,7 +2030,10 @@
         "max",
         "med",
         "min",
+        "page",
+        "prose",
         "sm",
+        "wide",
         "xl",
         "xs"
       ],
@@ -2240,7 +2248,7 @@
     },
     {
       "name": "maxInlineSize",
-      "type": "\"auto\" | \"fit\" | \"full\" | \"lg\" | \"max\" | \"med\" | \"min\" | \"sm\" | \"xl\" | \"xs\"",
+      "type": "\"auto\" | \"fit\" | \"full\" | \"lg\" | \"max\" | \"med\" | \"min\" | \"page\" | \"prose\" | \"sm\" | \"wide\" | \"xl\" | \"xs\"",
       "required": false,
       "values": [
         "auto",
@@ -2250,7 +2258,10 @@
         "max",
         "med",
         "min",
+        "page",
+        "prose",
         "sm",
+        "wide",
         "xl",
         "xs"
       ],
@@ -2276,7 +2287,7 @@
     },
     {
       "name": "minInlineSize",
-      "type": "\"auto\" | \"fit\" | \"full\" | \"lg\" | \"max\" | \"med\" | \"min\" | \"sm\" | \"xl\" | \"xs\"",
+      "type": "\"auto\" | \"fit\" | \"full\" | \"lg\" | \"max\" | \"med\" | \"min\" | \"page\" | \"prose\" | \"sm\" | \"wide\" | \"xl\" | \"xs\"",
       "required": false,
       "values": [
         "auto",
@@ -2286,7 +2297,10 @@
         "max",
         "med",
         "min",
+        "page",
+        "prose",
         "sm",
+        "wide",
         "xl",
         "xs"
       ],
@@ -2554,6 +2568,9 @@
     "size.med": "var(--size-med)",
     "size.lg": "var(--size-lg)",
     "size.xl": "var(--size-xl)",
+    "container.prose": "var(--container-prose)",
+    "container.page": "var(--container-page)",
+    "container.wide": "var(--container-wide)",
     "radius.none": "var(--radius-none)",
     "radius.sm": "var(--radius-sm)",
     "radius.med": "var(--radius-med)",

package/dist/index.d.mts

@@ -16,6 +16,7 @@ import { Inline, InlineProps } from "./Inline/index.mjs";
 import { MenuTriggerProps } from "./Menu/client.mjs";
 import { Menu, MenuGroupProps, MenuItemProps, MenuPopupProps, MenuProps, MenuSeparatorProps } from "./Menu/index.mjs";
 import { MultiSelect, MultiSelectOption, MultiSelectProps } from "./MultiSelect/index.mjs";
+import { SearchFieldInputProps } from "./SearchField/client.mjs";
 import { SearchField, SearchFieldProps } from "./SearchField/index.mjs";
 import { Stack, StackProps } from "./Stack/index.mjs";
 import { Tabs, TabsListProps, TabsPanelProps, TabsProps, TabsTabProps } from "./Tabs/index.mjs";
@@ -24,4 +25,4 @@ import { ToastOptions, ToastProviderProps, ToastVariant, useToast } from "./Toas
 import { Toast } from "./Toast/index.mjs";
 import { Theme, defineTheme } from "./theme/define-theme.mjs";
 import { ThemeProvider, ThemeProviderProps } from "./theme/ThemeProvider.mjs";
-export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, defineTheme, useToast };
+export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, defineTheme, useToast };