@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/error-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-summary.js","names":[],"sources":["../../src/components/error-summary.tsx"],"sourcesContent":["import AlertCircle from '@burtson-labs/icons/react/alert-circle';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\n\nexport interface ErrorSummaryItem {\n  /** The id of the field with the problem; the entry links to it. */\n  id: string;\n  message: React.ReactNode;\n}\n\nexport interface ErrorSummaryProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children' | 'title' | 'onSelect'\n> {\n  /** Nothing renders while this is empty. */\n  errors: ErrorSummaryItem[];\n  title?: React.ReactNode;\n  /** Called with the field id when an entry is chosen, after the field is focused. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * The errors of a long form, at the top of it after a failed submit, each a\n * link to its field. Focus moves here when errors appear, so a screen reader\n * hears the list; choosing an entry focuses the field and scrolls it into\n * view.\n */\nconst ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(function ErrorSummary(\n  { errors, title = 'Fix these to continue', onSelect, className, ...props },\n  ref,\n) {\n  const local = React.useRef<HTMLDivElement | null>(null);\n  const count = errors.length;\n  React.useEffect(() => {\n    if (count) local.current?.focus();\n  }, [count]);\n  if (!count) return null;\n  return (\n    <div\n      ref={(node) => {\n        local.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      }}\n      tabIndex={-1}\n      data-slot=\"error-summary\"\n      className={cn('outline-none', className)}\n      {...props}\n    >\n      <Alert variant=\"destructive\">\n        <AlertCircle />\n        <AlertTitle>{title}</AlertTitle>\n        <AlertDescription>\n          <ul className=\"grid gap-0.5\">\n            {errors.map(({ id, message }) => (\n              <li key={id}>\n                <a\n                  href={`#${id}`}\n                  className={cn(\n                    'rounded-xs text-foreground underline underline-offset-2 hover:text-destructive',\n                    focusRingClasses,\n                  )}\n                  onClick={(event) => {\n                    const el = document.getElementById(id);\n                    if (!el) return;\n                    event.preventDefault();\n                    el.focus();\n                    el.scrollIntoView?.({\n                      block: 'center',\n                      behavior:\n                        typeof matchMedia === 'function' &&\n                        matchMedia('(prefers-reduced-motion: reduce)').matches\n                          ? 'auto'\n                          : 'smooth',\n                    });\n                    onSelect?.(id);\n                  }}\n                >\n                  {message}\n                </a>\n              </li>\n            ))}\n          </ul>\n        </AlertDescription>\n      </Alert>\n    </div>\n  );\n});\n\nexport { ErrorSummary };\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAM,eAAe,MAAM,WAA8C,SAAS,aAChF,EAAE,QAAQ,QAAQ,yBAAyB,UAAU,WAAW,GAAG,SACnE,KACA;CACA,MAAM,QAAQ,MAAM,OAA8B,IAAI;CACtD,MAAM,QAAQ,OAAO;CACrB,MAAM,gBAAgB;EACpB,IAAI,OAAO,MAAM,SAAS,MAAM;CAClC,GAAG,CAAC,KAAK,CAAC;CACV,IAAI,CAAC,OAAO,OAAO;CACnB,OACE,oBAAC,OAAD;EACE,MAAM,SAAS;GACb,MAAM,UAAU;GAChB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;QAClC,IAAI,KAAK,IAAI,UAAU;EAC9B;EACA,UAAU;EACV,aAAU;EACV,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAO,SAAQ;GAAf,UAAA;IACE,oBAAC,aAAD,CAAc,CAAA;IACd,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA;IAC/B,oBAAC,kBAAD,EAAA,UACE,oBAAC,MAAD;KAAI,WAAU;KACX,UAAA,OAAO,KAAK,EAAE,IAAI,cACjB,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;MACE,MAAM,IAAI;MACV,WAAW,GACT,kFACA,gBACF;MACA,UAAU,UAAU;OAClB,MAAM,KAAK,SAAS,eAAe,EAAE;OACrC,IAAI,CAAC,IAAI;OACT,MAAM,eAAe;OACrB,GAAG,MAAM;OACT,GAAG,iBAAiB;QAClB,OAAO;QACP,UACE,OAAO,eAAe,cACtB,WAAW,kCAAkC,CAAC,CAAC,UAC3C,SACA;OACR,CAAC;OACD,WAAW,EAAE;MACf;MAEC,UAAA;KACA,CAAA,EACD,GAzBK,EAyBL,CACL;IACC,CAAA,EACY,CAAA;GACb;;CACJ,CAAA;AAET,CAAC"}

package/dist/components/field.d.ts

@@ -1,8 +1,67 @@
 import * as React from 'react';
-declare function Field({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function FieldHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<'label'>): React.JSX.Element;
-declare function FieldHint({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
-declare function FieldDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
-declare function FieldError({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
-export { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel };
+export interface FieldContextValue {
+    /** The control's id (the label points at it). */
+    id: string;
+    /** Ids of the description and error, for aria-describedby. */
+    describedBy?: string;
+    invalid: boolean;
+    required?: boolean;
+}
+/** The enclosing Field's id and aria wiring, for a custom control made of several inputs. */
+export declare const useField: () => FieldContextValue | null;
+export interface FieldProps extends React.ComponentProps<'div'> {
+    /** Sets the recipe: a label above the control. */
+    label?: React.ReactNode;
+    /** Help under the control. */
+    description?: React.ReactNode;
+    /** An error under the control; sets aria-invalid on it. */
+    error?: React.ReactNode;
+    /** Right of the label: a status, a count. `optional` shows "Optional". */
+    hint?: React.ReactNode;
+    optional?: boolean;
+    /** Sets aria-required on the control. (Mark whichever is rarer in the form, optional or required.) */
+    required?: boolean;
+    /**
+     * The child is a group of inputs (a time range), not one control: the label
+     * names the group and each input keeps its own aria-label.
+     */
+    group?: boolean;
+    /** Across every column of a FieldGrid. */
+    span?: boolean;
+}
+declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldHint: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const FieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldError: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const gridColumns: {
+    readonly 1: "";
+    readonly 2: "sm:grid-cols-2";
+    readonly 3: "sm:grid-cols-3";
+    readonly 4: "sm:grid-cols-2 xl:grid-cols-4";
+};
+export interface FieldGridProps extends React.ComponentProps<'div'> {
+    /** Columns from 640px up; one column on phones. */
+    columns?: keyof typeof gridColumns;
+}
+/**
+ * Fields side by side. Each recipe Field spans three rows of a subgrid
+ * (label, control, help), so the controls in a row share a top edge even
+ * when one label wraps or one field has help and its neighbour does not.
+ */
+declare const FieldGrid: React.ForwardRefExoticComponent<Omit<FieldGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface FieldSetProps extends React.ComponentProps<'fieldset'> {
+    /** The group's name, as its legend. */
+    legend?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Beside the legend, right-aligned: a count, a small button. */
+    action?: React.ReactNode;
+}
+/**
+ * A titled group of fields. Sets stack with a rule between them; `disabled`
+ * greys and locks everything inside. The legend names the fieldset through
+ * aria-labelledby, so it can sit in a row with the action.
+ */
+declare const FieldSet: React.ForwardRefExoticComponent<Omit<FieldSetProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export { Field, FieldDescription, FieldError, FieldGrid, FieldHeader, FieldHint, FieldLabel, FieldSet, };

package/dist/components/field.js

@@ -1,51 +1,183 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
+import { Select, SelectTrigger } from "./select.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/field.tsx
-function Field({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+var FieldContext = React.createContext(null);
+/** The enclosing Field's id and aria wiring, for a custom control made of several inputs. */
+var useField = () => React.useContext(FieldContext);
+var wire = (el, ctx) => React.cloneElement(el, {
+	id: el.props.id ?? ctx.id,
+	"aria-describedby": el.props["aria-describedby"] ?? ctx.describedBy,
+	"aria-invalid": el.props["aria-invalid"] ?? (ctx.invalid || void 0),
+	"aria-required": el.props["aria-required"] ?? (ctx.required || void 0)
+});
+/** The control the label points at: a kit Select's trigger, else the child itself. */
+function wireControl(children, ctx) {
+	if (!React.isValidElement(children)) return children;
+	if (children.type === Select) return React.cloneElement(children, { children: React.Children.map(children.props.children, (c) => React.isValidElement(c) && c.type === SelectTrigger ? wire(c, ctx) : c) });
+	return wire(children, ctx);
+}
+var Field = React.forwardRef(function Field({ label, description, error, hint, optional, required, group, span, id: idProp, className, children, ...props }, ref) {
+	const auto = React.useId();
+	if (!(label !== void 0)) return /* @__PURE__ */ jsx("div", {
+		ref,
+		id: idProp,
 		"data-slot": "field",
-		className: cn("grid gap-1.5", className),
-		...props
+		className: cn("grid gap-1.5", span && "sm:col-span-full", className),
+		...props,
+		children
 	});
-}
-function FieldHeader({ className, ...props }) {
+	const id = idProp ?? `f${auto.replace(/:/g, "")}`;
+	const descriptionId = description ? `${id}-description` : void 0;
+	const errorId = error ? `${id}-error` : void 0;
+	const describedBy = [errorId, descriptionId].filter(Boolean).join(" ") || void 0;
+	const ctx = {
+		id,
+		describedBy,
+		invalid: Boolean(error),
+		required
+	};
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "field",
+			"data-invalid": error ? "" : void 0,
+			role: group ? "group" : void 0,
+			"aria-labelledby": group ? `${id}-label` : void 0,
+			"aria-describedby": group ? describedBy : void 0,
+			className: cn("grid min-w-0 grid-cols-[minmax(0,1fr)] content-start", "[[data-slot=field-grid]>&]:row-span-3 [[data-slot=field-grid]>&]:grid-rows-subgrid", span && "sm:col-span-full", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsxs(FieldHeader, {
+					className: "min-h-5 items-end pb-1.5",
+					children: [group ? /* @__PURE__ */ jsx("span", {
+						id: `${id}-label`,
+						"data-slot": "field-label",
+						className: labelClasses,
+						children: label
+					}) : /* @__PURE__ */ jsx(FieldLabel, {
+						htmlFor: id,
+						children: label
+					}), (hint || optional) && /* @__PURE__ */ jsx(FieldHint, {
+						className: "shrink-0 leading-5",
+						children: hint ?? "Optional"
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 items-start",
+					children: group ? children : wireControl(children, ctx)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid content-start gap-1 pt-1.5 empty:hidden",
+					children: [error && /* @__PURE__ */ jsx(FieldError, {
+						id: errorId,
+						children: error
+					}), description && /* @__PURE__ */ jsx(FieldDescription, {
+						id: descriptionId,
+						children: description
+					})]
+				})
+			]
+		})
+	});
+});
+var labelClasses = "text-[13px] leading-5 font-semibold text-foreground";
+var FieldHeader = React.forwardRef(function FieldHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "field-header",
 		className: cn("flex items-baseline justify-between gap-3", className),
 		...props
 	});
-}
-function FieldLabel({ className, ...props }) {
+});
+var FieldLabel = React.forwardRef(function FieldLabel({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("label", {
+		ref,
 		"data-slot": "field-label",
-		className: cn("text-[13px] font-semibold text-foreground", className),
+		className: cn(labelClasses, className),
 		...props
 	});
-}
-function FieldHint({ className, ...props }) {
+});
+var FieldHint = React.forwardRef(function FieldHint({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "field-hint",
 		className: cn("text-xs text-muted-foreground", className),
 		...props
 	});
-}
-function FieldDescription({ className, ...props }) {
+});
+var FieldDescription = React.forwardRef(function FieldDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("p", {
+		ref,
 		"data-slot": "field-description",
 		className: cn("text-xs leading-5 text-muted-foreground", className),
 		...props
 	});
-}
-function FieldError({ className, ...props }) {
+});
+var FieldError = React.forwardRef(function FieldError({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("p", {
+		ref,
 		"data-slot": "field-error",
 		role: "alert",
-		className: cn("text-xs font-medium text-destructive", className),
+		className: cn("text-xs leading-5 font-medium text-destructive", className),
 		...props
 	});
-}
+});
+var gridColumns = {
+	1: "",
+	2: "sm:grid-cols-2",
+	3: "sm:grid-cols-3",
+	4: "sm:grid-cols-2 xl:grid-cols-4"
+};
+/**
+* Fields side by side. Each recipe Field spans three rows of a subgrid
+* (label, control, help), so the controls in a row share a top edge even
+* when one label wraps or one field has help and its neighbour does not.
+*/
+var FieldGrid = React.forwardRef(function FieldGrid({ columns = 2, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-grid",
+		className: cn("-mb-5 grid min-w-0 grid-cols-[minmax(0,1fr)] gap-x-4 gap-y-0 [&>*]:mb-5", gridColumns[columns], className),
+		...props
+	});
+});
+/**
+* A titled group of fields. Sets stack with a rule between them; `disabled`
+* greys and locks everything inside. The legend names the fieldset through
+* aria-labelledby, so it can sit in a row with the action.
+*/
+var FieldSet = React.forwardRef(function FieldSet({ legend, description, action, className, children, ...props }, ref) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("fieldset", {
+		ref,
+		"data-slot": "field-set",
+		"aria-labelledby": legend ? `${id}-legend` : void 0,
+		"aria-describedby": description ? `${id}-description` : void 0,
+		className: cn("grid min-w-0 gap-4 border-border [&+&]:border-t [&+&]:pt-5 disabled:opacity-60", className),
+		...props,
+		children: [(legend || action) && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1",
+				children: [legend && /* @__PURE__ */ jsx("div", {
+					id: `${id}-legend`,
+					"data-slot": "field-set-legend",
+					className: "text-sm leading-5 font-semibold",
+					children: legend
+				}), description && /* @__PURE__ */ jsx("p", {
+					id: `${id}-description`,
+					className: "text-[13px] leading-5 text-muted-foreground",
+					children: description
+				})]
+			}), action]
+		}), children]
+	});
+});
 //#endregion
-export { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel };
+export { Field, FieldDescription, FieldError, FieldGrid, FieldHeader, FieldHint, FieldLabel, FieldSet, useField };
 
 //# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Field({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"field\" className={cn('grid gap-1.5', className)} {...props} />;\n}\n\nfunction FieldHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-header\"\n      className={cn('flex items-baseline justify-between gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<'label'>) {\n  return (\n    // Callers pass htmlFor (or wrap the control); the rule cannot see through the spread.\n    // eslint-disable-next-line jsx-a11y/label-has-associated-control\n    <label\n      data-slot=\"field-label\"\n      className={cn('text-[13px] font-semibold text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldHint({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"field-hint\"\n      className={cn('text-xs text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn('text-xs leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldError({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-error\"\n      role=\"alert\"\n      className={cn('text-xs font-medium text-destructive', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel };\n"],"mappings":";;;;AAIA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAsC;CACnE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAQ,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAwC;CAC1E,OAGE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAuC;CACxE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAoC;CACtE,OACE,oBAAC,KAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Select, SelectTrigger } from './select';\n\n/*\n * Label, hint, description and error around a control. Two ways in:\n *\n *   <Field label=\"Name\" description=\"Shown in logs\" error={error}>\n *     <Input />\n *   </Field>\n *\n * wires the control's id, aria-describedby, aria-invalid and aria-required\n * for you (one control as the child; `group` for several), or compose the\n * parts yourself: <Field><FieldLabel htmlFor=…/><Input id=…/><FieldError/></Field>.\n */\n\nexport interface FieldContextValue {\n  /** The control's id (the label points at it). */\n  id: string;\n  /** Ids of the description and error, for aria-describedby. */\n  describedBy?: string;\n  invalid: boolean;\n  required?: boolean;\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null);\n\n/** The enclosing Field's id and aria wiring, for a custom control made of several inputs. */\nexport const useField = () => React.useContext(FieldContext);\n\nexport interface FieldProps extends React.ComponentProps<'div'> {\n  /** Sets the recipe: a label above the control. */\n  label?: React.ReactNode;\n  /** Help under the control. */\n  description?: React.ReactNode;\n  /** An error under the control; sets aria-invalid on it. */\n  error?: React.ReactNode;\n  /** Right of the label: a status, a count. `optional` shows \"Optional\". */\n  hint?: React.ReactNode;\n  optional?: boolean;\n  /** Sets aria-required on the control. (Mark whichever is rarer in the form, optional or required.) */\n  required?: boolean;\n  /**\n   * The child is a group of inputs (a time range), not one control: the label\n   * names the group and each input keeps its own aria-label.\n   */\n  group?: boolean;\n  /** Across every column of a FieldGrid. */\n  span?: boolean;\n}\n\nconst wire = (\n  el: React.ReactElement<Record<string, unknown>>,\n  ctx: FieldContextValue,\n): React.ReactElement =>\n  React.cloneElement(el, {\n    id: el.props.id ?? ctx.id,\n    'aria-describedby': el.props['aria-describedby'] ?? ctx.describedBy,\n    'aria-invalid': el.props['aria-invalid'] ?? (ctx.invalid || undefined),\n    'aria-required': el.props['aria-required'] ?? (ctx.required || undefined),\n  });\n\n/** The control the label points at: a kit Select's trigger, else the child itself. */\nfunction wireControl(children: React.ReactNode, ctx: FieldContextValue): React.ReactNode {\n  if (!React.isValidElement<Record<string, unknown>>(children)) return children;\n  if (children.type === Select)\n    return React.cloneElement(children, {\n      children: React.Children.map(children.props.children as React.ReactNode, (c) =>\n        React.isValidElement<Record<string, unknown>>(c) && c.type === SelectTrigger\n          ? wire(c, ctx)\n          : c,\n      ),\n    });\n  return wire(children, ctx);\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    label,\n    description,\n    error,\n    hint,\n    optional,\n    required,\n    group,\n    span,\n    id: idProp,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const auto = React.useId();\n  const recipe = label !== undefined;\n  if (!recipe)\n    return (\n      <div\n        ref={ref}\n        id={idProp}\n        data-slot=\"field\"\n        className={cn('grid gap-1.5', span && 'sm:col-span-full', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  const id = idProp ?? `f${auto.replace(/:/g, '')}`;\n  const descriptionId = description ? `${id}-description` : undefined;\n  const errorId = error ? `${id}-error` : undefined;\n  const describedBy = [errorId, descriptionId].filter(Boolean).join(' ') || undefined;\n  const ctx: FieldContextValue = { id, describedBy, invalid: Boolean(error), required };\n  return (\n    <FieldContext.Provider value={ctx}>\n      <div\n        ref={ref}\n        data-slot=\"field\"\n        data-invalid={error ? '' : undefined}\n        role={group ? 'group' : undefined}\n        aria-labelledby={group ? `${id}-label` : undefined}\n        aria-describedby={group ? describedBy : undefined}\n        className={cn(\n          'grid min-w-0 grid-cols-[minmax(0,1fr)] content-start',\n          // In a FieldGrid each field spans three rows of the subgrid, so\n          // labels, controls and help in one row share their top edges.\n          '[[data-slot=field-grid]>&]:row-span-3 [[data-slot=field-grid]>&]:grid-rows-subgrid',\n          span && 'sm:col-span-full',\n          className,\n        )}\n        {...props}\n      >\n        <FieldHeader className=\"min-h-5 items-end pb-1.5\">\n          {group ? (\n            <span id={`${id}-label`} data-slot=\"field-label\" className={labelClasses}>\n              {label}\n            </span>\n          ) : (\n            <FieldLabel htmlFor={id}>{label}</FieldLabel>\n          )}\n          {(hint || optional) && (\n            <FieldHint className=\"shrink-0 leading-5\">{hint ?? 'Optional'}</FieldHint>\n          )}\n        </FieldHeader>\n        <div className=\"flex min-w-0 items-start\">\n          {group ? children : wireControl(children, ctx)}\n        </div>\n        <div className=\"grid content-start gap-1 pt-1.5 empty:hidden\">\n          {error && <FieldError id={errorId}>{error}</FieldError>}\n          {description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}\n        </div>\n      </div>\n    </FieldContext.Provider>\n  );\n});\n\nconst labelClasses = 'text-[13px] leading-5 font-semibold text-foreground';\n\nconst FieldHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function FieldHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"field-header\"\n        className={cn('flex items-baseline justify-between gap-3', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  function FieldLabel({ className, ...props }, ref) {\n    return (\n      // Callers pass htmlFor (or wrap the control); the rule cannot see through the spread.\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label ref={ref} data-slot=\"field-label\" className={cn(labelClasses, className)} {...props} />\n    );\n  },\n);\n\nconst FieldHint = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function FieldHint({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"field-hint\"\n        className={cn('text-xs text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst FieldDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<'p'>>(\n  function FieldDescription({ className, ...props }, ref) {\n    return (\n      <p\n        ref={ref}\n        data-slot=\"field-description\"\n        className={cn('text-xs leading-5 text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst FieldError = React.forwardRef<HTMLParagraphElement, React.ComponentProps<'p'>>(\n  function FieldError({ className, ...props }, ref) {\n    return (\n      <p\n        ref={ref}\n        data-slot=\"field-error\"\n        role=\"alert\"\n        className={cn('text-xs leading-5 font-medium text-destructive', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst gridColumns = {\n  1: '',\n  2: 'sm:grid-cols-2',\n  3: 'sm:grid-cols-3',\n  4: 'sm:grid-cols-2 xl:grid-cols-4',\n} as const;\n\nexport interface FieldGridProps extends React.ComponentProps<'div'> {\n  /** Columns from 640px up; one column on phones. */\n  columns?: keyof typeof gridColumns;\n}\n\n/**\n * Fields side by side. Each recipe Field spans three rows of a subgrid\n * (label, control, help), so the controls in a row share a top edge even\n * when one label wraps or one field has help and its neighbour does not.\n */\nconst FieldGrid = React.forwardRef<HTMLDivElement, FieldGridProps>(function FieldGrid(\n  { columns = 2, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"field-grid\"\n      className={cn(\n        // Rows are spaced by each child's bottom margin, so a field's label,\n        // control and help sit in rows of their own with no gap between them.\n        '-mb-5 grid min-w-0 grid-cols-[minmax(0,1fr)] gap-x-4 gap-y-0 [&>*]:mb-5',\n        gridColumns[columns],\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport interface FieldSetProps extends React.ComponentProps<'fieldset'> {\n  /** The group's name, as its legend. */\n  legend?: React.ReactNode;\n  description?: React.ReactNode;\n  /** Beside the legend, right-aligned: a count, a small button. */\n  action?: React.ReactNode;\n}\n\n/**\n * A titled group of fields. Sets stack with a rule between them; `disabled`\n * greys and locks everything inside. The legend names the fieldset through\n * aria-labelledby, so it can sit in a row with the action.\n */\nconst FieldSet = React.forwardRef<HTMLFieldSetElement, FieldSetProps>(function FieldSet(\n  { legend, description, action, className, children, ...props },\n  ref,\n) {\n  const id = React.useId();\n  return (\n    <fieldset\n      ref={ref}\n      data-slot=\"field-set\"\n      aria-labelledby={legend ? `${id}-legend` : undefined}\n      aria-describedby={description ? `${id}-description` : undefined}\n      className={cn(\n        'grid min-w-0 gap-4 border-border [&+&]:border-t [&+&]:pt-5 disabled:opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      {(legend || action) && (\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"grid gap-1\">\n            {legend && (\n              <div\n                id={`${id}-legend`}\n                data-slot=\"field-set-legend\"\n                className=\"text-sm leading-5 font-semibold\"\n              >\n                {legend}\n              </div>\n            )}\n            {description && (\n              <p id={`${id}-description`} className=\"text-[13px] leading-5 text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n          {action}\n        </div>\n      )}\n      {children}\n    </fieldset>\n  );\n});\n\nexport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGrid,\n  FieldHeader,\n  FieldHint,\n  FieldLabel,\n  FieldSet,\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface FormActionsProps extends React.ComponentProps<'div'> {
+    /** Cancel, Back or Delete: left-aligned on wide screens, first in the row on phones. */
+    start?: React.ReactNode;
+    /**
+     * On phones the row is pinned to the bottom of the screen, above the home
+     * indicator, while the form scrolls under it. For a page's own form, not
+     * one inside a card or a dialog.
+     */
+    sticky?: boolean;
+}
+/**
+ * A form's buttons. Wide screens: right-aligned, the primary last, with
+ * `start` on the left. Phones: one row, the buttons sharing the width and
+ * the primary (the last one) taking twice the share.
+ */
+declare const FormActions: React.ForwardRefExoticComponent<Omit<FormActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { FormActions };

package/dist/components/form-actions.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form-actions.tsx
+/**
+* A form's buttons. Wide screens: right-aligned, the primary last, with
+* `start` on the left. Phones: one row, the buttons sharing the width and
+* the primary (the last one) taking twice the share.
+*/
+var FormActions = React.forwardRef(function FormActions({ start, sticky, className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "form-actions",
+		"data-sticky": sticky || void 0,
+		className: cn("flex items-center gap-2", "max-sm:*:contents max-sm:**:data-[slot=button]:min-w-0 max-sm:**:data-[slot=button]:flex-1", "max-sm:[&>div:last-child>[data-slot=button]:last-child]:flex-[2]", sticky && "max-sm:sticky max-sm:bottom-0 max-sm:z-20 max-sm:-mx-4 max-sm:border-t max-sm:border-border max-sm:bg-background/95 max-sm:px-4 max-sm:pt-3 max-sm:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-sm:backdrop-blur-md", className),
+		...props,
+		children: [start && /* @__PURE__ */ jsx("div", {
+			className: "mr-auto flex items-center gap-2",
+			children: start
+		}), /* @__PURE__ */ jsx("div", {
+			className: "ml-auto flex items-center gap-2",
+			children
+		})]
+	});
+});
+//#endregion
+export { FormActions };
+
+//# sourceMappingURL=form-actions.js.map

package/dist/components/form-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.js","names":[],"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface FormActionsProps extends React.ComponentProps<'div'> {\n  /** Cancel, Back or Delete: left-aligned on wide screens, first in the row on phones. */\n  start?: React.ReactNode;\n  /**\n   * On phones the row is pinned to the bottom of the screen, above the home\n   * indicator, while the form scrolls under it. For a page's own form, not\n   * one inside a card or a dialog.\n   */\n  sticky?: boolean;\n}\n\n/**\n * A form's buttons. Wide screens: right-aligned, the primary last, with\n * `start` on the left. Phones: one row, the buttons sharing the width and\n * the primary (the last one) taking twice the share.\n */\nconst FormActions = React.forwardRef<HTMLDivElement, FormActionsProps>(function FormActions(\n  { start, sticky, className, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"form-actions\"\n      data-sticky={sticky || undefined}\n      className={cn(\n        'flex items-center gap-2',\n        // Phone: the two groups dissolve into one row; the primary is widest.\n        'max-sm:*:contents max-sm:**:data-[slot=button]:min-w-0 max-sm:**:data-[slot=button]:flex-1',\n        'max-sm:[&>div:last-child>[data-slot=button]:last-child]:flex-[2]',\n        sticky &&\n          'max-sm:sticky max-sm:bottom-0 max-sm:z-20 max-sm:-mx-4 max-sm:border-t max-sm:border-border max-sm:bg-background/95 max-sm:px-4 max-sm:pt-3 max-sm:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-sm:backdrop-blur-md',\n        className,\n      )}\n      {...props}\n    >\n      {start && <div className=\"mr-auto flex items-center gap-2\">{start}</div>}\n      <div className=\"ml-auto flex items-center gap-2\">{children}</div>\n    </div>\n  );\n});\n\nexport { FormActions };\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,cAAc,MAAM,WAA6C,SAAS,YAC9E,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SACzC,KACA;CACA,OACE,qBAAC,OAAD;EACO;EACL,aAAU;EACV,eAAa,UAAU,KAAA;EACvB,WAAW,GACT,2BAEA,8FACA,oEACA,UACE,4NACF,SACF;EACA,GAAI;EAbN,UAAA,CAeG,SAAS,oBAAC,OAAD;GAAK,WAAU;GAAmC,UAAA;EAAW,CAAA,GACvE,oBAAC,OAAD;GAAK,WAAU;GAAmC;EAAc,CAAA,CAC7D;;AAET,CAAC"}

package/dist/components/icon-button.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { type ButtonProps } from './button';
 export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
+    /** The accessible name, also the tooltip: "Open terminal". */
     label: string;
     children: React.ReactNode;
 }
-declare function IconButton({ label, className, children, size, ...props }: IconButtonProps): React.JSX.Element;
+/** An icon-only Button with its name built in. Keeps `data-slot="button"`, since it is one. */
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { IconButton };

package/dist/components/icon-button.js

@@ -1,10 +1,13 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button.tsx
-function IconButton({ label, className, children, size = "icon", ...props }) {
+/** An icon-only Button with its name built in. Keeps `data-slot="button"`, since it is one. */
+var IconButton = React.forwardRef(function IconButton({ label, className, children, size = "icon", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Button, {
+		ref,
 		"aria-label": label,
 		title: props.title ?? label,
 		size,
@@ -12,7 +15,7 @@ function IconButton({ label, className, children, size = "icon", ...props }) {
 		...props,
 		children
 	});
-}
+});
 //#endregion
 export { IconButton };
 

package/dist/components/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/components/icon-button.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button, type ButtonProps } from './button';\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'children'> {\n  label: string;\n  children: React.ReactNode;\n}\n\nfunction IconButton({ label, className, children, size = 'icon', ...props }: IconButtonProps) {\n  return (\n    <Button\n      aria-label={label}\n      title={props.title ?? label}\n      size={size}\n      className={cn('rounded-md', className)}\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n}\n\nexport { IconButton };\n"],"mappings":";;;;;AAWA,SAAS,WAAW,EAAE,OAAO,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA0B;CAC5F,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,OAAO,MAAM,SAAS;EAChB;EACN,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;EAEH;CACK,CAAA;AAEZ"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/components/icon-button.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button, type ButtonProps } from './button';\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'children'> {\n  /** The accessible name, also the tooltip: \"Open terminal\". */\n  label: string;\n  children: React.ReactNode;\n}\n\n/** An icon-only Button with its name built in. Keeps `data-slot=\"button\"`, since it is one. */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { label, className, children, size = 'icon', ...props },\n  ref,\n) {\n  return (\n    <Button\n      ref={ref}\n      aria-label={label}\n      title={props.title ?? label}\n      size={size}\n      className={cn('rounded-md', className)}\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n});\n\nexport { IconButton };\n"],"mappings":";;;;;;;AAaA,IAAM,aAAa,MAAM,WAA+C,SAAS,WAC/E,EAAE,OAAO,WAAW,UAAU,OAAO,QAAQ,GAAG,SAChD,KACA;CACA,OACE,oBAAC,QAAD;EACO;EACL,cAAY;EACZ,OAAO,MAAM,SAAS;EAChB;EACN,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/input.d.ts

@@ -4,15 +4,50 @@ import * as React from 'react';
  * one (Composer, a bordered Command): the border turns the ring colour and a
  * 1px inset ring doubles it to 2px. It sits inside the border box, so it
  * follows the radius exactly and no overflow can clip it. The outline is
- * suppressed with !important: an app's unlayered `:focus-visible { outline }`
- * would otherwise beat the utilities layer and draw a second, offset box.
- * outline-hidden keeps a transparent outline, which forced-colors mode shows.
+ * suppressed with !important (an app's unlayered `:focus-visible { outline }`
+ * would otherwise beat the utilities layer and draw a second, offset box) and
+ * comes back as a system-colour outline in forced-colors mode, where no ring
+ * colour survives.
  */
-export declare const fieldFocusClasses = "outline-hidden! focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive";
+export declare const fieldFocusClasses = "outline-none! forced-colors:focus-visible:[outline:2px_solid_Highlight]! forced-colors:focus-visible:outline-offset-2 focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive";
 /**
  * Fields and field-like triggers: 10px radius (radius-md). Popovers are 12px
  * (radius-lg) and their rows 8px (radius-sm: 12px less the 4px inset).
+ * Placeholder text is the muted foreground at full strength (4.5:1 on the
+ * field); disabled fields fill with muted and dim.
  */
-export declare const fieldClasses = "w-full min-w-0 rounded-md border border-input bg-surface px-3 text-base sm:text-sm text-foreground shadow-xs transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground/80 hover:border-border-strong outline-hidden! focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive dark:bg-surface-raised";
-declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { Input };
+export declare const fieldClasses = "w-full min-w-0 rounded-md border border-input bg-surface px-3 text-base sm:text-sm text-foreground shadow-xs transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground hover:border-border-strong outline-none! forced-colors:focus-visible:[outline:2px_solid_Highlight]! forced-colors:focus-visible:outline-offset-2 focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive dark:bg-surface-raised";
+/**
+ * Field widths by what goes in them, on the 4px scale. Every width is full on
+ * a phone (fields stack there); from 640px a field takes the width its
+ * content needs, so a row of them reads as a form rather than a column of
+ * bars. `full` always fills the row.
+ */
+export declare const fieldWidthClasses: {
+    /** 2–4 digits: minutes, a percentage, a count. */
+    readonly xs: "w-full sm:w-24";
+    /** Money, gallons, a year, a time of day. */
+    readonly sm: "w-full sm:w-36";
+    /** A date, a short code, a short choice. */
+    readonly md: "w-full sm:w-48";
+    /** Names, emails, most choices: capped so they do not run across a wide card. */
+    readonly lg: "w-full sm:max-w-sm";
+    readonly full: "w-full";
+};
+export type FieldWidth = keyof typeof fieldWidthClasses;
+export interface InputProps extends React.ComponentProps<'input'> {
+    /** How wide the field is from 640px up; full width on phones. */
+    width?: FieldWidth;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface SearchInputProps extends Omit<InputProps, 'type'> {
+    /** Classes for the wrapper that positions the icon; `className` goes to the input. */
+    containerClassName?: string;
+}
+/**
+ * A search box: the magnifier inside the field, `type="search"` for the
+ * browser's clear control and the search key on phone keyboards, and Enter
+ * left to the form. Name it with `aria-label`, `aria-labelledby` or a Label.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input, SearchInput };

package/dist/components/input.js

@@ -1,32 +1,76 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, noOutlineClasses } from "../lib/utils.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Search from "@burtson-labs/icons/react/search";
 //#region src/components/input.tsx
 /**
 * Keyboard focus for anything that is a text field, or a box that contains
 * one (Composer, a bordered Command): the border turns the ring colour and a
 * 1px inset ring doubles it to 2px. It sits inside the border box, so it
 * follows the radius exactly and no overflow can clip it. The outline is
-* suppressed with !important: an app's unlayered `:focus-visible { outline }`
-* would otherwise beat the utilities layer and draw a second, offset box.
-* outline-hidden keeps a transparent outline, which forced-colors mode shows.
+* suppressed with !important (an app's unlayered `:focus-visible { outline }`
+* would otherwise beat the utilities layer and draw a second, offset box) and
+* comes back as a system-colour outline in forced-colors mode, where no ring
+* colour survives.
 */
-var fieldFocusClasses = "outline-hidden! focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive";
+var fieldFocusClasses = `${noOutlineClasses} focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive`;
 /**
 * Fields and field-like triggers: 10px radius (radius-md). Popovers are 12px
 * (radius-lg) and their rows 8px (radius-sm: 12px less the 4px inset).
+* Placeholder text is the muted foreground at full strength (4.5:1 on the
+* field); disabled fields fill with muted and dim.
 */
-var fieldClasses = `w-full min-w-0 rounded-md border border-input bg-surface px-3 text-base sm:text-sm text-foreground shadow-xs transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground/80 hover:border-border-strong ${fieldFocusClasses} disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive dark:bg-surface-raised`;
-var Input = React.forwardRef(function Input({ className, type, ...props }, ref) {
+var fieldClasses = `w-full min-w-0 rounded-md border border-input bg-surface px-3 text-base sm:text-sm text-foreground shadow-xs transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground hover:border-border-strong ${fieldFocusClasses} disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive dark:bg-surface-raised`;
+/**
+* Field widths by what goes in them, on the 4px scale. Every width is full on
+* a phone (fields stack there); from 640px a field takes the width its
+* content needs, so a row of them reads as a form rather than a column of
+* bars. `full` always fills the row.
+*/
+var fieldWidthClasses = {
+	/** 2–4 digits: minutes, a percentage, a count. */
+	xs: "w-full sm:w-24",
+	/** Money, gallons, a year, a time of day. */
+	sm: "w-full sm:w-36",
+	/** A date, a short code, a short choice. */
+	md: "w-full sm:w-48",
+	/** Names, emails, most choices: capped so they do not run across a wide card. */
+	lg: "w-full sm:max-w-sm",
+	full: "w-full"
+};
+var Input = React.forwardRef(function Input({ className, type, width, ...props }, ref) {
 	return /* @__PURE__ */ jsx("input", {
 		ref,
 		type,
 		"data-slot": "input",
-		className: cn(fieldClasses, "h-9 py-1.5 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground", className),
+		className: cn(fieldClasses, "h-9 py-1.5 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground", width && fieldWidthClasses[width], className),
 		...props
 	});
 });
+/**
+* A search box: the magnifier inside the field, `type="search"` for the
+* browser's clear control and the search key on phone keyboards, and Enter
+* left to the form. Name it with `aria-label`, `aria-labelledby` or a Label.
+*/
+var SearchInput = React.forwardRef(function SearchInput({ className, containerClassName, width, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "search-input",
+		className: cn("relative flex min-w-0", width ? fieldWidthClasses[width] : "w-full", containerClassName),
+		children: [/* @__PURE__ */ jsx(Search, {
+			"aria-hidden": true,
+			className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+		}), /* @__PURE__ */ jsx(Input, {
+			ref,
+			type: "search",
+			autoComplete: "off",
+			enterKeyHint: "search",
+			className: cn("pl-9", className),
+			...props
+		})]
+	});
+});
 //#endregion
-export { Input, fieldClasses, fieldFocusClasses };
+export { Input, SearchInput, fieldClasses, fieldFocusClasses, fieldWidthClasses };
 
 //# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * Keyboard focus for anything that is a text field, or a box that contains\n * one (Composer, a bordered Command): the border turns the ring colour and a\n * 1px inset ring doubles it to 2px. It sits inside the border box, so it\n * follows the radius exactly and no overflow can clip it. The outline is\n * suppressed with !important: an app's unlayered `:focus-visible { outline }`\n * would otherwise beat the utilities layer and draw a second, offset box.\n * outline-hidden keeps a transparent outline, which forced-colors mode shows.\n */\nexport const fieldFocusClasses =\n  'outline-hidden! focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive';\n\n/**\n * Fields and field-like triggers: 10px radius (radius-md). Popovers are 12px\n * (radius-lg) and their rows 8px (radius-sm: 12px less the 4px inset).\n */\nexport const fieldClasses = `w-full min-w-0 rounded-md border border-input bg-surface px-3 text-base sm:text-sm text-foreground shadow-xs transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground/80 hover:border-border-strong ${fieldFocusClasses} disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive dark:bg-surface-raised`;\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(function Input(\n  { className, type, ...props }: React.ComponentProps<'input'>,\n  ref,\n) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        fieldClasses,\n        'h-9 py-1.5 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Input };\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,oBACX;;;;;AAMF,IAAa,eAAe,sOAAsO,kBAAkB;AAEpR,IAAM,QAAQ,MAAM,WAA4D,SAAS,MACvF,EAAE,WAAW,MAAM,GAAG,SACtB,KACA;CACA,OACE,oBAAC,SAAD;EACO;EACC;EACN,aAAU;EACV,WAAW,GACT,cACA,+GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\n\n/**\n * Keyboard focus for anything that is a text field, or a box that contains\n * one (Composer, a bordered Command): the border turns the ring colour and a\n * 1px inset ring doubles it to 2px. It sits inside the border box, so it\n * follows the radius exactly and no overflow can clip it. The outline is\n * suppressed with !important (an app's unlayered `:focus-visible { outline }`\n * would otherwise beat the utilities layer and draw a second, offset box) and\n * comes back as a system-colour outline in forced-colors mode, where no ring\n * colour survives.\n */\nexport const fieldFocusClasses = `${noOutlineClasses} focus-visible:border-ring focus-visible:inset-ring-1 focus-visible:inset-ring-ring aria-invalid:focus-visible:inset-ring-destructive`;\n\n/**\n * Fields and field-like triggers: 10px radius (radius-md). Popovers are 12px\n * (radius-lg) and their rows 8px (radius-sm: 12px less the 4px inset).\n * Placeholder text is the muted foreground at full strength (4.5:1 on the\n * field); disabled fields fill with muted and dim.\n */\nexport const fieldClasses = `w-full min-w-0 rounded-md border border-input bg-surface px-3 text-base sm:text-sm text-foreground shadow-xs transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground hover:border-border-strong ${fieldFocusClasses} disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive dark:bg-surface-raised`;\n\n/**\n * Field widths by what goes in them, on the 4px scale. Every width is full on\n * a phone (fields stack there); from 640px a field takes the width its\n * content needs, so a row of them reads as a form rather than a column of\n * bars. `full` always fills the row.\n */\nexport const fieldWidthClasses = {\n  /** 2–4 digits: minutes, a percentage, a count. */\n  xs: 'w-full sm:w-24',\n  /** Money, gallons, a year, a time of day. */\n  sm: 'w-full sm:w-36',\n  /** A date, a short code, a short choice. */\n  md: 'w-full sm:w-48',\n  /** Names, emails, most choices: capped so they do not run across a wide card. */\n  lg: 'w-full sm:max-w-sm',\n  full: 'w-full',\n} as const;\n\nexport type FieldWidth = keyof typeof fieldWidthClasses;\n\nexport interface InputProps extends React.ComponentProps<'input'> {\n  /** How wide the field is from 640px up; full width on phones. */\n  width?: FieldWidth;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, type, width, ...props }: InputProps,\n  ref,\n) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        fieldClasses,\n        'h-9 py-1.5 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',\n        width && fieldWidthClasses[width],\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport interface SearchInputProps extends Omit<InputProps, 'type'> {\n  /** Classes for the wrapper that positions the icon; `className` goes to the input. */\n  containerClassName?: string;\n}\n\n/**\n * A search box: the magnifier inside the field, `type=\"search\"` for the\n * browser's clear control and the search key on phone keyboards, and Enter\n * left to the form. Name it with `aria-label`, `aria-labelledby` or a Label.\n */\nconst SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(\n  { className, containerClassName, width, ...props }: SearchInputProps,\n  ref,\n) {\n  return (\n    <span\n      data-slot=\"search-input\"\n      className={cn(\n        'relative flex min-w-0',\n        width ? fieldWidthClasses[width] : 'w-full',\n        containerClassName,\n      )}\n    >\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n      />\n      <Input\n        ref={ref}\n        type=\"search\"\n        autoComplete=\"off\"\n        enterKeyHint=\"search\"\n        className={cn('pl-9', className)}\n        {...props}\n      />\n    </span>\n  );\n});\n\nexport { Input, SearchInput };\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,oBAAoB,GAAG,iBAAiB;;;;;;;AAQrD,IAAa,eAAe,mOAAmO,kBAAkB;;;;;;;AAQjR,IAAa,oBAAoB;;CAE/B,IAAI;;CAEJ,IAAI;;CAEJ,IAAI;;CAEJ,IAAI;CACJ,MAAM;AACR;AASA,IAAM,QAAQ,MAAM,WAAyC,SAAS,MACpE,EAAE,WAAW,MAAM,OAAO,GAAG,SAC7B,KACA;CACA,OACE,oBAAC,SAAD;EACO;EACC;EACN,aAAU;EACV,WAAW,GACT,cACA,+GACA,SAAS,kBAAkB,QAC3B,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;;;;;;AAYD,IAAM,cAAc,MAAM,WAA+C,SAAS,YAChF,EAAE,WAAW,oBAAoB,OAAO,GAAG,SAC3C,KACA;CACA,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,yBACA,QAAQ,kBAAkB,SAAS,UACnC,kBACF;EANF,UAAA,CAQE,oBAAC,QAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,GACD,oBAAC,OAAD;GACO;GACL,MAAK;GACL,cAAa;GACb,cAAa;GACb,WAAW,GAAG,QAAQ,SAAS;GAC/B,GAAI;EACL,CAAA,CACG;;AAEV,CAAC"}

package/dist/components/kbd.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-declare function Kbd({ className, ...props }: React.ComponentProps<'kbd'>): React.JSX.Element;
-declare function KbdGroup({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare const Kbd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const KbdGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Kbd, KbdGroup };