@adea-ai/ui 0.84.0 → 0.87.0

package/dist/components/ui/combobox/value-combobox.js

@@ -0,0 +1,42 @@
+import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from "./combobox.js";
+import { createComponent } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/combobox/value-combobox.tsx
+/** A single-choice combobox for a controlled string value and labelled choices. */
+function ValueCombobox(props) {
+	const [local, rest] = splitProps(props, [
+		"value",
+		"choices",
+		"onValueChange"
+	]);
+	return createComponent(Combobox, {
+		get options() {
+			return local.choices;
+		},
+		optionValue: "value",
+		optionTextValue: (choice) => choice.textValue ?? textFromLabel(choice.label),
+		optionLabel: (choice) => choice.textValue ?? textFromLabel(choice.label),
+		get value() {
+			return local.choices.find((choice) => String(choice.value) === local.value) ?? null;
+		},
+		onChange: (option) => option && local.onValueChange(String(option.value)),
+		itemComponent: (itemProps) => createComponent(ComboboxItem, {
+			get item() {
+				return itemProps.item;
+			},
+			get children() {
+				return itemProps.item.rawValue.label;
+			}
+		}),
+		get children() {
+			return [createComponent(ComboboxInput, rest), createComponent(ComboboxContent, {})];
+		}
+	});
+}
+function textFromLabel(label) {
+	return typeof label === "string" || typeof label === "number" ? String(label) : "";
+}
+//#endregion
+export { ValueCombobox };
+
+//# sourceMappingURL=value-combobox.js.map

package/dist/components/ui/combobox/value-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-combobox.js","names":["splitProps","ComponentProps","JSX","Combobox","ComboboxContent","ComboboxInput","ComboboxItem","ValueComboboxChoice","value","label","textValue","Element","ValueComboboxProps","Omit","choices","onValueChange","ValueCombobox","props","local","rest","_$createComponent","options","optionValue","optionTextValue","choice","textFromLabel","optionLabel","find","String","onChange","option","itemComponent","itemProps","item","children","rawValue","_$createComponent"],"sources":["../../../../src/components/ui/combobox/value-combobox.tsx"],"sourcesContent":["import { splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from './combobox'\n\nexport type ValueComboboxChoice =\n  | { value: string; label: string | number; textValue?: string }\n  | { value: string; label: JSX.Element; textValue: string }\n\nexport type ValueComboboxProps = Omit<ComponentProps<typeof ComboboxInput>, 'value'> & {\n  value: string\n  choices: ValueComboboxChoice[]\n  onValueChange: (value: string) => void\n}\n\n/** A single-choice combobox for a controlled string value and labelled choices. */\nexport function ValueCombobox(props: ValueComboboxProps) {\n  const [local, rest] = splitProps(props, ['value', 'choices', 'onValueChange'])\n\n  return (\n    <Combobox\n      options={local.choices}\n      optionValue=\"value\"\n      optionTextValue={(choice) => choice.textValue ?? textFromLabel(choice.label)}\n      optionLabel={(choice) => choice.textValue ?? textFromLabel(choice.label)}\n      value={local.choices.find((choice) => String(choice.value) === local.value) ?? null}\n      onChange={(option) => option && local.onValueChange(String(option.value))}\n      itemComponent={(itemProps) => (\n        <ComboboxItem item={itemProps.item}>{itemProps.item.rawValue.label}</ComboboxItem>\n      )}\n    >\n      <ComboboxInput {...rest} />\n      <ComboboxContent />\n    </Combobox>\n  )\n}\n\nfunction textFromLabel(label: JSX.Element) {\n  return typeof label === 'string' || typeof label === 'number' ? String(label) : ''\n}\n"],"mappings":";;;;;AAcA,SAAgBgB,cAAcC,OAA2B;CACvD,MAAM,CAACC,OAAOC,QAAQnB,WAAWiB,OAAO;EAAC;EAAS;EAAW;CAAe,CAAC;CAE7E,OAAAG,gBACGjB,UAAQ;EAAA,IACPkB,UAAO;GAAA,OAAEH,MAAMJ;EAAO;EACtBQ,aAAW;EACXC,kBAAkBC,WAAWA,OAAOd,aAAae,cAAcD,OAAOf,KAAK;EAC3EiB,cAAcF,WAAWA,OAAOd,aAAae,cAAcD,OAAOf,KAAK;EAAC,IACxED,QAAK;GAAA,OAAEU,MAAMJ,QAAQa,MAAMH,WAAWI,OAAOJ,OAAOhB,KAAK,MAAMU,MAAMV,KAAK,KAAK;EAAI;EACnFqB,WAAWC,WAAWA,UAAUZ,MAAMH,cAAca,OAAOE,OAAOtB,KAAK,CAAC;EACxEuB,gBAAgBC,cAASZ,gBACtBd,cAAY;GAAA,IAAC2B,OAAI;IAAA,OAAED,UAAUC;GAAI;GAAA,IAAAC,WAAA;IAAA,OAAGF,UAAUC,KAAKE,SAAS1B;GAAK;EAAA,CAAA;EACnE,IAAAyB,WAAA;GAAA,OAAA,CAAAd,gBAEAf,eAAkBc,IAAI,GAAAC,gBACtBhB,iBAAe,CAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAGtB;AAEA,SAASqB,cAAchB,OAAoB;CACzC,OAAO,OAAOA,UAAU,YAAY,OAAOA,UAAU,WAAWmB,OAAOnB,KAAK,IAAI;AAClF"}

package/dist/components/ui/empty/empty-state.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, JSX } from 'solid-js';
+export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> & {
+    title: string;
+    detail: string;
+    busy?: boolean;
+    icon?: JSX.Element;
+    announceAs?: 'alert' | 'status';
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    action?: () => void;
+    actionLabel?: string;
+    actionTooltip?: string;
+};
+/** A semantic empty, loading, or error state built from the shared empty parts. */
+export declare function EmptyState(props: EmptyStateProps): JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/ui/empty/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/empty/empty-state.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC,GAAG;IAC7F,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkDhD"}

package/dist/components/ui/empty/empty-state.js

@@ -0,0 +1,96 @@
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
+import { Spinner } from "../spinner/spinner.js";
+import { ActionButton } from "../../composites/action-button/action-button.js";
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Search } from "lucide-solid";
+import { Show, splitProps } from "solid-js";
+//#region src/components/ui/empty/empty-state.tsx
+/** A semantic empty, loading, or error state built from the shared empty parts. */
+function EmptyState(props) {
+	const [local, rest] = splitProps(props, [
+		"title",
+		"detail",
+		"busy",
+		"icon",
+		"announceAs",
+		"headingLevel",
+		"action",
+		"actionLabel",
+		"actionTooltip",
+		"class"
+	]);
+	return createComponent(Empty, mergeProps(rest, {
+		get ["class"]() {
+			return local.class;
+		},
+		get role() {
+			return local.announceAs;
+		},
+		get ["aria-live"]() {
+			return local.announceAs === "status" ? "polite" : void 0;
+		},
+		get ["aria-busy"]() {
+			return local.busy || void 0;
+		},
+		get children() {
+			return [createComponent(EmptyHeader, { get children() {
+				return [
+					createComponent(Show, {
+						get when() {
+							return local.busy || local.icon;
+						},
+						get children() {
+							return createComponent(EmptyMedia, {
+								variant: "icon",
+								get children() {
+									return memo(() => !!local.busy)() ? createComponent(Spinner, {
+										label: false,
+										"aria-hidden": "true"
+									}) : local.icon ?? createComponent(Search, { "aria-hidden": "true" });
+								}
+							});
+						}
+					}),
+					createComponent(EmptyTitle, {
+						role: "heading",
+						get ["aria-level"]() {
+							return local.headingLevel ?? 1;
+						},
+						get children() {
+							return local.title;
+						}
+					}),
+					createComponent(EmptyDescription, { get children() {
+						return local.detail;
+					} })
+				];
+			} }), createComponent(Show, {
+				get when() {
+					return local.action;
+				},
+				get children() {
+					return createComponent(EmptyContent, { get children() {
+						return createComponent(ActionButton, {
+							get tooltip() {
+								return local.actionTooltip ?? local.actionLabel ?? "Try again";
+							},
+							get ["aria-label"]() {
+								return local.actionLabel ?? "Try again";
+							},
+							get onClick() {
+								return local.action;
+							},
+							get children() {
+								return local.actionLabel ?? "Try again";
+							}
+						});
+					} });
+				}
+			})];
+		}
+	}));
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/ui/empty/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":["Search","ComponentProps","JSX","Show","splitProps","ActionButton","Spinner","Empty","EmptyContent","EmptyDescription","EmptyHeader","EmptyMedia","EmptyTitle","EmptyStateProps","Omit","title","detail","busy","icon","Element","announceAs","headingLevel","action","actionLabel","actionTooltip","EmptyState","props","local","rest","_$createComponent","_$mergeProps","class","role","aria-live","undefined","aria-busy","children","when","variant","_$memo","label","aria-level","tooltip","aria-label","onClick","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/empty/empty-state.tsx"],"sourcesContent":["import { Search } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { ActionButton } from '../../composites/action-button'\nimport { Spinner } from '../spinner'\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty'\n\nexport type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> & {\n  title: string\n  detail: string\n  busy?: boolean\n  icon?: JSX.Element\n  announceAs?: 'alert' | 'status'\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  action?: () => void\n  actionLabel?: string\n  actionTooltip?: string\n}\n\n/** A semantic empty, loading, or error state built from the shared empty parts. */\nexport function EmptyState(props: EmptyStateProps) {\n  const [local, rest] = splitProps(props, [\n    'title',\n    'detail',\n    'busy',\n    'icon',\n    'announceAs',\n    'headingLevel',\n    'action',\n    'actionLabel',\n    'actionTooltip',\n    'class',\n  ])\n\n  return (\n    <Empty\n      {...rest}\n      class={local.class}\n      role={local.announceAs}\n      aria-live={local.announceAs === 'status' ? 'polite' : undefined}\n      aria-busy={local.busy || undefined}\n    >\n      <EmptyHeader>\n        <Show when={local.busy || local.icon}>\n          <EmptyMedia variant=\"icon\">\n            {local.busy ? (\n              <Spinner label={false} aria-hidden=\"true\" />\n            ) : (\n              (local.icon ?? <Search aria-hidden=\"true\" />)\n            )}\n          </EmptyMedia>\n        </Show>\n        <EmptyTitle role=\"heading\" aria-level={local.headingLevel ?? 1}>\n          {local.title}\n        </EmptyTitle>\n        <EmptyDescription>{local.detail}</EmptyDescription>\n      </EmptyHeader>\n      <Show when={local.action}>\n        <EmptyContent>\n          <ActionButton\n            tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}\n            aria-label={local.actionLabel ?? 'Try again'}\n            onClick={local.action}\n          >\n            {local.actionLabel ?? 'Try again'}\n          </ActionButton>\n        </EmptyContent>\n      </Show>\n    </Empty>\n  )\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgByB,WAAWC,OAAwB;CACjD,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGtB,OAAKuB,WACAF,MAAI;EAAA,KAAA,WAAA;GAAA,OACDD,MAAMI;EAAK;EAAA,IAClBC,OAAI;GAAA,OAAEL,MAAMP;EAAU;EAAA,KAAA,eAAA;GAAA,OACXO,MAAMP,eAAe,WAAW,WAAWc,KAAAA;EAAS;EAAA,KAAA,eAAA;GAAA,OACpDP,MAAMV,QAAQiB,KAAAA;EAAS;EAAA,IAAAE,WAAA;GAAA,OAAA,CAAAP,gBAEjCnB,aAAW,EAAA,IAAA0B,WAAA;IAAA,OAAA;KAAAP,gBACT1B,MAAI;MAAA,IAACkC,OAAI;OAAA,OAAEV,MAAMV,QAAQU,MAAMT;MAAI;MAAA,IAAAkB,WAAA;OAAA,OAAAP,gBACjClB,YAAU;QAAC2B,SAAO;QAAA,IAAAF,WAAA;SAAA,OAChBG,WAAA,CAAA,CAAAZ,MAAMV,IAAI,CAAA,CAAA,IAAAY,gBACRvB,SAAO;UAACkC,OAAO;UAAK,eAAA;SAAA,CAAA,IAEpBb,MAAMT,QAAIW,gBAAK7B,QAAM,EAAA,eAAA,OAAA,CAAA;QACvB;OAAA,CAAA;MAAA;KAAA,CAAA;KAAA6B,gBAGJjB,YAAU;MAACoB,MAAI;MAAA,KAAA,gBAAA;OAAA,OAAuBL,MAAMN,gBAAgB;MAAC;MAAA,IAAAe,WAAA;OAAA,OAC3DT,MAAMZ;MAAK;KAAA,CAAA;KAAAc,gBAEbpB,kBAAgB,EAAA,IAAA2B,WAAA;MAAA,OAAET,MAAMX;KAAM,EAAA,CAAA;IAAA;GAAA,EAAA,CAAA,GAAAa,gBAEhC1B,MAAI;IAAA,IAACkC,OAAI;KAAA,OAAEV,MAAML;IAAM;IAAA,IAAAc,WAAA;KAAA,OAAAP,gBACrBrB,cAAY,EAAA,IAAA4B,WAAA;MAAA,OAAAP,gBACVxB,cAAY;OAAA,IACXqC,UAAO;QAAA,OAAEf,MAAMH,iBAAiBG,MAAMJ,eAAe;OAAW;OAAA,KAAA,gBAAA;QAAA,OACpDI,MAAMJ,eAAe;OAAW;OAAA,IAC5CqB,UAAO;QAAA,OAAEjB,MAAML;OAAM;OAAA,IAAAc,WAAA;QAAA,OAEpBT,MAAMJ,eAAe;OAAW;MAAA,CAAA;KAAA,EAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA,CAAA;AAM7C"}

package/dist/components/ui/empty/index.d.ts

@@ -1,2 +1,3 @@
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, type EmptyMediaProps, type EmptyProps, } from './empty';
+export { EmptyState, type EmptyStateProps } from './empty-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/empty/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/empty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,UAAU,GAChB,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/empty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,UAAU,GAChB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/ui/empty/index.js

@@ -1,2 +1,3 @@
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+import { EmptyState } from "./empty-state.js";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle };

package/dist/components/ui/entity-icon/entity-icon.d.ts

@@ -13,7 +13,8 @@ import { type VariantProps } from '#lib/variants';
  *
  * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
  *    empty box. `fallback` takes the name and returns the glyph, so a caller can
- *    choose initials, a domain letter, or a kind icon.
+ *    choose initials, a domain letter, or a kind icon. When `src` is supplied,
+ *    its contained image overlays that glyph and failure reveals the glyph below.
  * 2. **The tile owns its own contrast.** `tone` tints the background while
  *    monogram text keeps the body foreground; vector glyphs retain the status
  *    colour. A caller never picks a colour pair or ships a glyph that disappears.
@@ -34,6 +35,8 @@ type EntityIconVariantProps = VariantProps<typeof entityIconVariants>;
 export type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> & EntityIconVariantProps & {
     /** The entity's name. Used for the accessible label and, via `fallback`, the monogram. */
     name: string;
+    /** Optional image URL. The image is decorative; `name` remains the accessible label. */
+    src?: string;
     /**
      * A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element
      * (`icon={<Wrench />}`). Both are accepted because both are what a caller

package/dist/components/ui/entity-icon/entity-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAE1F,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,kBAAkB;;;;8EA+B9B,CAAA;AAED,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAErE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACpE,sBAAsB,GAAG;IACvB,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;IACxC,wEAAwE;IACxE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAEH;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI7C;AAiBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA2ChD"}
+{"version":3,"file":"entity-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,GAAG,EACT,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,kBAAkB;;;;8EA+B9B,CAAA;AAED,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAErE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACpE,sBAAsB,GAAG;IACvB,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;IACxC,wEAAwE;IACxE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAEH;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI7C;AAkCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+ChD"}

package/dist/components/ui/entity-icon/entity-icon.js

@@ -1,10 +1,11 @@
 import { cn } from "../../../lib/utils.js";
 import { cva } from "../../../lib/variants.js";
-import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
+import { Dynamic, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { Show, createSignal, splitProps } from "solid-js";
 //#region src/components/ui/entity-icon/entity-icon.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span class="absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span role=img>`);
+var _tmpl$ = /*#__PURE__*/ template(`<img data-slot=entity-icon-image alt aria-hidden=true class="pointer-events-none absolute inset-0 size-full object-contain">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span role=img>`);
 /**
 * EntityIcon.
 *
@@ -18,7 +19,8 @@ var _tmpl$2 = /*#__PURE__*/ template(`<span role=img>`);
 *
 * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
 *    empty box. `fallback` takes the name and returns the glyph, so a caller can
-*    choose initials, a domain letter, or a kind icon.
+*    choose initials, a domain letter, or a kind icon. When `src` is supplied,
+*    its contained image overlays that glyph and failure reveals the glyph below.
 * 2. **The tile owns its own contrast.** `tone` tints the background while
 *    monogram text keeps the body foreground; vector glyphs retain the status
 *    colour. A caller never picks a colour pair or ships a glyph that disappears.
@@ -78,9 +80,24 @@ function Glyph(props) {
 		return props.glyph.value;
 	} }) : props.glyph.value;
 }
+function EntityIconImage(props) {
+	const [failed, setFailed] = createSignal(false);
+	return createComponent(Show, {
+		get when() {
+			return !failed();
+		},
+		get children() {
+			var _el$ = _tmpl$();
+			_el$.addEventListener("error", () => setFailed(true));
+			effect(() => setAttribute(_el$, "src", props.src));
+			return _el$;
+		}
+	});
+}
 function EntityIcon(props) {
 	const [local, rest] = splitProps(props, [
 		"name",
+		"src",
 		"icon",
 		"fallback",
 		"badge",
@@ -102,8 +119,8 @@ function EntityIcon(props) {
 		};
 	};
 	return (() => {
-		var _el$ = _tmpl$2();
-		spread(_el$, mergeProps({
+		var _el$2 = _tmpl$3();
+		spread(_el$2, mergeProps({
 			get ["class"]() {
 				return cn(entityIconVariants({
 					shape: local.shape,
@@ -115,7 +132,7 @@ function EntityIcon(props) {
 				return local.name;
 			}
 		}, rest), false, true);
-		insert(_el$, createComponent(Show, {
+		insert(_el$2, createComponent(Show, {
 			get when() {
 				return glyph();
 			},
@@ -126,17 +143,24 @@ function EntityIcon(props) {
 				return value();
 			} })
 		}), null);
-		insert(_el$, createComponent(Show, {
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return local.src;
+			},
+			keyed: true,
+			children: (src) => createComponent(EntityIconImage, { src })
+		}), null);
+		insert(_el$2, createComponent(Show, {
 			get when() {
 				return local.badge;
 			},
 			get children() {
-				var _el$2 = _tmpl$();
-				insert(_el$2, () => local.badge);
-				return _el$2;
+				var _el$3 = _tmpl$2();
+				insert(_el$3, () => local.badge);
+				return _el$3;
 			}
 		}), null);
-		return _el$;
+		return _el$2;
 	})();
 }
 //#endregion

package/dist/components/ui/entity-icon/entity-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"entity-icon.js","names":["Show","splitProps","Component","ComponentProps","JSX","Dynamic","cva","VariantProps","cn","entityIconVariants","variants","shape","rounded","circle","square","size","xs","sm","md","lg","xl","tone","neutral","primary","bare","success","warning","danger","info","defaultVariants","EntityIconVariantProps","EntityIconProps","Omit","name","icon","Element","fallback","badge","ring","monogram","words","trim","split","filter","Boolean","length","toUpperCase","slice","Glyph","kind","value","props","glyph","_$createComponent","component","EntityIcon","local","rest","undefined","_el$","_tmpl$2","_$spread","_$mergeProps","class","aria-label","_$insert","when","_$memo","children","_el$2","_tmpl$","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"sourcesContent":["import { Show, splitProps, type Component, type ComponentProps, type JSX } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * EntityIcon.\n *\n * A tile that stands for a thing: a room, a project, an agent, an installed\n * plugin, a workspace. Its job is to be identifiable in a column of its\n * siblings, which is a different job from `Avatar`'s (identifying a *person*) and\n * the reason the two are separate components rather than one with a `round` prop.\n *\n * Three decisions are baked in because getting them wrong is what makes icon\n * grids look messy:\n *\n * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an\n *    empty box. `fallback` takes the name and returns the glyph, so a caller can\n *    choose initials, a domain letter, or a kind icon.\n * 2. **The tile owns its own contrast.** `tone` tints the background while\n *    monogram text keeps the body foreground; vector glyphs retain the status\n *    colour. A caller never picks a colour pair or ships a glyph that disappears.\n * 3. **Size is on the control ladder**, not arbitrary. A tile in a rail and a\n *    tile in a detail header are the same two or three sizes every other\n *    interactive element uses.\n *\n * `shape=\"rounded\"` is the default because a rounded square reads as an object\n * and a circle reads as a person; use `circle` only when the tile really does\n * hold a face.\n */\nexport const entityIconVariants = cva(\n  'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      shape: {\n        rounded: 'rounded-lg',\n        circle: 'rounded-full',\n        square: 'rounded-none',\n      },\n      size: {\n        xs: 'size-5 text-2xs [&_svg]:size-3',\n        sm: 'size-6 text-2xs [&_svg]:size-3.5',\n        md: 'size-8 text-xs [&_svg]:size-4',\n        lg: 'size-10 text-sm [&_svg]:size-5',\n        xl: 'size-12 text-base [&_svg]:size-6',\n      },\n      tone: {\n        /** Neutral: an inset tile with a hairline edge — the default. */\n        neutral: 'border-border bg-muted text-muted-foreground',\n        /** On the brand: for a thing the application itself owns. */\n        primary: 'border-transparent bg-primary-subtle text-primary',\n        /** Bare: no fill and no edge, for a tile that already sits on a surface. */\n        bare: 'border-transparent bg-transparent text-foreground',\n        success: 'border-transparent bg-success-subtle text-foreground [&_svg]:text-success',\n        warning: 'border-transparent bg-warning-subtle text-foreground [&_svg]:text-warning',\n        danger: 'border-transparent bg-destructive-subtle text-foreground [&_svg]:text-destructive',\n        info: 'border-transparent bg-info-subtle text-foreground [&_svg]:text-info',\n      },\n    },\n    defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },\n  }\n)\n\ntype EntityIconVariantProps = VariantProps<typeof entityIconVariants>\n\nexport type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &\n  EntityIconVariantProps & {\n    /** The entity's name. Used for the accessible label and, via `fallback`, the monogram. */\n    name: string\n    /**\n     * A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element\n     * (`icon={<Wrench />}`). Both are accepted because both are what a caller\n     * naturally writes, and the difference is an implementation detail they should\n     * not have to know.\n     */\n    icon?: Component | JSX.Element\n    /** Glyph for an entity with no icon. Defaults to the name's first two letters. */\n    fallback?: (name: string) => JSX.Element\n    /** A corner badge: a status dot, an unread count, an installed tick. */\n    badge?: JSX.Element\n    /** A second edge, drawn outside the tile — an active or selected ring. */\n    ring?: boolean\n  }\n\n/**\n * Two letters from a name, chosen so the result is stable and readable: the\n * first letter of the first two words when there are two (\"Agent HQ\" → \"AH\"),\n * otherwise the first two characters (\"Kitchen\" → \"Ki\").\n */\nexport function monogram(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean)\n  if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase()\n  return name.trim().slice(0, 2)\n}\n\n/**\n * A glyph is either a component reference or an element, and the two render\n * differently — `Dynamic` for the first, the element itself for the second. The\n * union is discriminated so the branch is checked rather than cast.\n */\ntype Glyph = { kind: 'component'; value: Component } | { kind: 'element'; value: JSX.Element }\n\nfunction Glyph(props: { glyph: Glyph }) {\n  return props.glyph.kind === 'component' ? (\n    <Dynamic component={props.glyph.value} />\n  ) : (\n    props.glyph.value\n  )\n}\n\nexport function EntityIcon(props: EntityIconProps) {\n  const [local, rest] = splitProps(props, [\n    'name',\n    'icon',\n    'fallback',\n    'badge',\n    'ring',\n    'shape',\n    'size',\n    'tone',\n    'class',\n  ])\n\n  const glyph = (): Glyph | undefined => {\n    const icon = local.icon\n    if (!icon) return undefined\n    return typeof icon === 'function'\n      ? { kind: 'component', value: icon as Component }\n      : { kind: 'element', value: icon as JSX.Element }\n  }\n\n  return (\n    <span\n      class={cn(\n        entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),\n        local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',\n        local.class\n      )}\n      role=\"img\"\n      aria-label={local.name}\n      {...rest}\n    >\n      <Show\n        when={glyph()}\n        fallback={local.fallback ? local.fallback(local.name) : monogram(local.name)}\n      >\n        {(value) => <Glyph glyph={value()} />}\n      </Show>\n      <Show when={local.badge}>\n        <span class=\"absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4\">{local.badge}</span>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAaS,qBAAqBH,IAChC,2JACA;CACEI,UAAU;EACRC,OAAO;GACLC,SAAS;GACTC,QAAQ;GACRC,QAAQ;EACV;EACAC,MAAM;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;EACN;EACAC,MAAM;;GAEJC,SAAS;;GAETC,SAAS;;GAETC,MAAM;GACNC,SAAS;GACTC,SAAS;GACTC,QAAQ;GACRC,MAAM;EACR;CACF;CACAC,iBAAiB;EAAElB,OAAO;EAAWI,MAAM;EAAMM,MAAM;CAAU;AACnE,CACF;;;;;;AA4BA,SAAgBkB,SAASN,MAAsB;CAC7C,MAAMO,QAAQP,KAAKQ,KAAK,CAAC,CAACC,MAAM,KAAK,CAAC,CAACC,OAAOC,OAAO;CACrD,IAAIJ,MAAMK,UAAU,GAAG,QAAQL,MAAM,EAAE,CAAE,KAAMA,MAAM,EAAE,CAAE,GAAA,CAAKM,YAAY;CAC1E,OAAOb,KAAKQ,KAAK,CAAC,CAACM,MAAM,GAAG,CAAC;AAC/B;AASA,SAASC,MAAMG,OAAyB;CACtC,OAAOA,MAAMC,MAAMH,SAAS,cAAWI,gBACpChD,SAAO,EAAA,IAACiD,YAAS;EAAA,OAAEH,MAAMC,MAAMF;CAAK,EAAA,CAAA,IAErCC,MAAMC,MAAMF;AAEhB;AAEA,SAAgBK,WAAWJ,OAAwB;CACjD,MAAM,CAACK,OAAOC,QAAQxD,WAAWkD,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,MAAMC,cAAiC;EACrC,MAAMlB,OAAOsB,MAAMtB;EACnB,IAAI,CAACA,MAAM,OAAOwB,KAAAA;EAClB,OAAO,OAAOxB,SAAS,aACnB;GAAEe,MAAM;GAAaC,OAAOhB;EAAkB,IAC9C;GAAEe,MAAM;GAAWC,OAAOhB;EAAoB;CACpD;CAEA,cAAA;EAAA,IAAAyB,OAAAC,QAAA;EAAAC,OAAAF,MAAAG,WAAA;GAAA,KAAA,WAAA;IAAA,OAEWtD,GACLC,mBAAmB;KAAEE,OAAO6C,MAAM7C;KAAOI,MAAMyC,MAAMzC;KAAMM,MAAMmC,MAAMnC;IAAK,CAAC,GAC7EmC,MAAMlB,QAAQ,yDACdkB,MAAMO,KACR;GAAC;GAAA,KAAA,gBAAA;IAAA,OAEWP,MAAMvB;GAAI;EAAA,GAClBwB,IAAI,GAAA,OAAA,IAAA;EAAAQ,OAAAN,MAAAN,gBAEPrD,MAAI;GAAA,IACHkE,OAAI;IAAA,OAAEd,MAAM;GAAC;GAAA,IACbhB,WAAQ;IAAA,OAAE+B,WAAA,CAAA,CAAAX,MAAMpB,QAAQ,CAAA,CAAA,IAAGoB,MAAMpB,SAASoB,MAAMvB,IAAI,IAAIM,SAASiB,MAAMvB,IAAI;GAAC;GAAAmC,WAE1ElB,UAAKG,gBAAML,OAAK,EAAA,IAACI,QAAK;IAAA,OAAEF,MAAM;GAAC,EAAA,CAAA;EAAI,CAAA,GAAA,IAAA;EAAAe,OAAAN,MAAAN,gBAEtCrD,MAAI;GAAA,IAACkE,OAAI;IAAA,OAAEV,MAAMnB;GAAK;GAAA,IAAA+B,WAAA;IAAA,IAAAC,QAAAC,OAAA;IAAAL,OAAAI,aACoDb,MAAMnB,KAAK;IAAA,OAAAgC;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAV;CAAA,EAAA,CAAA;AAI5F"}
+{"version":3,"file":"entity-icon.js","names":["createSignal","Show","splitProps","Component","ComponentProps","JSX","Dynamic","cva","VariantProps","cn","entityIconVariants","variants","shape","rounded","circle","square","size","xs","sm","md","lg","xl","tone","neutral","primary","bare","success","warning","danger","info","defaultVariants","EntityIconVariantProps","EntityIconProps","Omit","name","src","icon","Element","fallback","badge","ring","monogram","words","trim","split","filter","Boolean","length","toUpperCase","slice","Glyph","kind","value","props","glyph","_$createComponent","component","EntityIconImage","failed","setFailed","when","children","_el$","_tmpl$","addEventListener","_$effect","_$setAttribute","EntityIcon","local","rest","undefined","_el$2","_tmpl$3","_$spread","_$mergeProps","class","aria-label","_$insert","_$memo","keyed","_el$3","_tmpl$2","_$createComponent","_$setAttribute","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"sourcesContent":["import {\n  createSignal,\n  Show,\n  splitProps,\n  type Component,\n  type ComponentProps,\n  type JSX,\n} from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * EntityIcon.\n *\n * A tile that stands for a thing: a room, a project, an agent, an installed\n * plugin, a workspace. Its job is to be identifiable in a column of its\n * siblings, which is a different job from `Avatar`'s (identifying a *person*) and\n * the reason the two are separate components rather than one with a `round` prop.\n *\n * Three decisions are baked in because getting them wrong is what makes icon\n * grids look messy:\n *\n * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an\n *    empty box. `fallback` takes the name and returns the glyph, so a caller can\n *    choose initials, a domain letter, or a kind icon. When `src` is supplied,\n *    its contained image overlays that glyph and failure reveals the glyph below.\n * 2. **The tile owns its own contrast.** `tone` tints the background while\n *    monogram text keeps the body foreground; vector glyphs retain the status\n *    colour. A caller never picks a colour pair or ships a glyph that disappears.\n * 3. **Size is on the control ladder**, not arbitrary. A tile in a rail and a\n *    tile in a detail header are the same two or three sizes every other\n *    interactive element uses.\n *\n * `shape=\"rounded\"` is the default because a rounded square reads as an object\n * and a circle reads as a person; use `circle` only when the tile really does\n * hold a face.\n */\nexport const entityIconVariants = cva(\n  'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      shape: {\n        rounded: 'rounded-lg',\n        circle: 'rounded-full',\n        square: 'rounded-none',\n      },\n      size: {\n        xs: 'size-5 text-2xs [&_svg]:size-3',\n        sm: 'size-6 text-2xs [&_svg]:size-3.5',\n        md: 'size-8 text-xs [&_svg]:size-4',\n        lg: 'size-10 text-sm [&_svg]:size-5',\n        xl: 'size-12 text-base [&_svg]:size-6',\n      },\n      tone: {\n        /** Neutral: an inset tile with a hairline edge — the default. */\n        neutral: 'border-border bg-muted text-muted-foreground',\n        /** On the brand: for a thing the application itself owns. */\n        primary: 'border-transparent bg-primary-subtle text-primary',\n        /** Bare: no fill and no edge, for a tile that already sits on a surface. */\n        bare: 'border-transparent bg-transparent text-foreground',\n        success: 'border-transparent bg-success-subtle text-foreground [&_svg]:text-success',\n        warning: 'border-transparent bg-warning-subtle text-foreground [&_svg]:text-warning',\n        danger: 'border-transparent bg-destructive-subtle text-foreground [&_svg]:text-destructive',\n        info: 'border-transparent bg-info-subtle text-foreground [&_svg]:text-info',\n      },\n    },\n    defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },\n  }\n)\n\ntype EntityIconVariantProps = VariantProps<typeof entityIconVariants>\n\nexport type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &\n  EntityIconVariantProps & {\n    /** The entity's name. Used for the accessible label and, via `fallback`, the monogram. */\n    name: string\n    /** Optional image URL. The image is decorative; `name` remains the accessible label. */\n    src?: string\n    /**\n     * A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element\n     * (`icon={<Wrench />}`). Both are accepted because both are what a caller\n     * naturally writes, and the difference is an implementation detail they should\n     * not have to know.\n     */\n    icon?: Component | JSX.Element\n    /** Glyph for an entity with no icon. Defaults to the name's first two letters. */\n    fallback?: (name: string) => JSX.Element\n    /** A corner badge: a status dot, an unread count, an installed tick. */\n    badge?: JSX.Element\n    /** A second edge, drawn outside the tile — an active or selected ring. */\n    ring?: boolean\n  }\n\n/**\n * Two letters from a name, chosen so the result is stable and readable: the\n * first letter of the first two words when there are two (\"Agent HQ\" → \"AH\"),\n * otherwise the first two characters (\"Kitchen\" → \"Ki\").\n */\nexport function monogram(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean)\n  if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase()\n  return name.trim().slice(0, 2)\n}\n\n/**\n * A glyph is either a component reference or an element, and the two render\n * differently — `Dynamic` for the first, the element itself for the second. The\n * union is discriminated so the branch is checked rather than cast.\n */\ntype Glyph = { kind: 'component'; value: Component } | { kind: 'element'; value: JSX.Element }\n\nfunction Glyph(props: { glyph: Glyph }) {\n  return props.glyph.kind === 'component' ? (\n    <Dynamic component={props.glyph.value} />\n  ) : (\n    props.glyph.value\n  )\n}\n\nfunction EntityIconImage(props: { src: string }) {\n  const [failed, setFailed] = createSignal(false)\n\n  return (\n    <Show when={!failed()}>\n      <img\n        data-slot=\"entity-icon-image\"\n        src={props.src}\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute inset-0 size-full object-contain\"\n        onError={() => setFailed(true)}\n      />\n    </Show>\n  )\n}\n\nexport function EntityIcon(props: EntityIconProps) {\n  const [local, rest] = splitProps(props, [\n    'name',\n    'src',\n    'icon',\n    'fallback',\n    'badge',\n    'ring',\n    'shape',\n    'size',\n    'tone',\n    'class',\n  ])\n\n  const glyph = (): Glyph | undefined => {\n    const icon = local.icon\n    if (!icon) return undefined\n    return typeof icon === 'function'\n      ? { kind: 'component', value: icon as Component }\n      : { kind: 'element', value: icon as JSX.Element }\n  }\n\n  return (\n    <span\n      class={cn(\n        entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),\n        local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',\n        local.class\n      )}\n      role=\"img\"\n      aria-label={local.name}\n      {...rest}\n    >\n      <Show\n        when={glyph()}\n        fallback={local.fallback ? local.fallback(local.name) : monogram(local.name)}\n      >\n        {(value) => <Glyph glyph={value()} />}\n      </Show>\n      <Show when={local.src} keyed>\n        {(src) => <EntityIconImage src={src} />}\n      </Show>\n      <Show when={local.badge}>\n        <span class=\"absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4\">{local.badge}</span>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/field/field.d.ts

@@ -1,39 +1,62 @@
 import { TextField as KobalteTextField } from '@kobalte/core/text-field';
-import type { ComponentProps } from 'solid-js';
+import type { ComponentProps, JSX } from 'solid-js';
 /**
  * Field.
  *
  * The wrapper that makes a form control describable and validatable: a label,
  * a description, an error message, and the ARIA relationships between them.
  *
+ * This Kobalte TextField composition is for its own `FieldLabel`, `FieldInput`
+ * and `FieldTextArea` parts. Use `FormField` to wire the standalone shared
+ * controls, including checkboxes, switches and comboboxes.
+ *
  * It is built on Kobalte's TextField specifically so `aria-describedby`,
  * `aria-invalid` and `aria-errormessage` are wired by construction. Those three
  * attributes are the difference between "this field is required and empty" and
  * a red border that only a sighted user can perceive — and they are also the
  * first thing a hand-rolled form drops.
  *
- * `Field` owns the description and the error slot, so a form's controls line up
- * and its messages land in the same place regardless of which control is used.
- * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.
+ * `Field` owns the description and the error slot, so its controls line up and
+ * its messages land in the same place regardless of which TextField part is used.
+ */
+export declare function Field(props: ComponentProps<typeof KobalteTextField>): JSX.Element;
+export type FormFieldProps = Omit<ComponentProps<'div'>, 'children' | 'ref'> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    controlId?: string;
+    group?: boolean;
+    children: JSX.Element;
+};
+/**
+ * FormField.
+ *
+ * A shared label, help and validation wrapper for any one shared control. Its
+ * context is consumed by Input, Textarea, NativeSelect, Checkbox, Switch,
+ * RadioGroup and ComboboxInput, so the actual focusable element receives the
+ * generated ID and description relationships. Set `group` when the label names
+ * a set of controls; the wrapper then uses fieldset and legend semantics.
  */
-export declare function Field(props: ComponentProps<typeof KobalteTextField>): import("solid-js").JSX.Element;
-export declare function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>): import("solid-js").JSX.Element;
-export declare function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>): import("solid-js").JSX.Element;
-export declare function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>): import("solid-js").JSX.Element;
-export declare function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>): import("solid-js").JSX.Element;
-export declare function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>): import("solid-js").JSX.Element;
+export declare function FormField(props: FormFieldProps): JSX.Element;
+export declare function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>): JSX.Element;
+export declare function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>): JSX.Element;
+export declare function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>): JSX.Element;
+export declare function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>): JSX.Element;
+export declare function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>): JSX.Element;
 /**
  * A labelled group of fields with a single legend, for a real `<fieldset>`.
  * Grouping is what lets a screen reader announce "Shipping address, group"
  * before reading the four fields inside it.
  */
-export declare function FieldSet(props: ComponentProps<'fieldset'>): import("solid-js").JSX.Element;
+export declare function FieldSet(props: ComponentProps<'fieldset'>): JSX.Element;
+/** A visual stack for related controls that does not imply fieldset semantics. */
+export declare function FieldGroup(props: ComponentProps<'div'>): JSX.Element;
 export declare function FieldLegend(props: ComponentProps<'legend'> & {
     variant?: 'legend' | 'label';
-}): import("solid-js").JSX.Element;
+}): JSX.Element;
 /** A horizontal rule with a word in it, for "or continue with" separators. */
 export declare function FieldSeparator(props: {
     class?: string;
     children?: ComponentProps<'span'>['children'];
-}): import("solid-js").JSX.Element;
+}): JSX.Element;
 //# sourceMappingURL=field.d.ts.map

package/dist/components/ui/field/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGnE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,kCAK9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,WAAW,CAAC,kCAQ1F;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,YAAY,CAAC,kCAKrF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,kCAiB9E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,kCAiBpF;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,kCAGzD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,kCAc7F;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAA;CAC9C,kCAYA"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,eAGnE;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkE9C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,eAK9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,WAAW,CAAC,eAQ1F;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,YAAY,CAAC,eAKrF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,eAiB9E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAiBpF;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,eAGzD;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAGtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,eAc7F;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAA;CAC9C,eAYA"}