@adea-ai/ui 0.85.0 → 0.88.0

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"}

package/dist/components/ui/field/field.js

@@ -1,27 +1,36 @@
 import { cn } from "../../../lib/utils.js";
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
+import { FormFieldContext, createFormFieldContext } from "../../../lib/form-field.js";
+import { Label } from "../label/label.js";
+import { createComponent, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { Show, createUniqueId, splitProps } from "solid-js";
 import { TextField } from "@kobalte/core/text-field";
 //#region src/components/ui/field/field.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<fieldset>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<legend>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span class="text-muted-foreground text-2xs tracking-wide uppercase">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div><span class="bg-border h-px flex-1"></span><span class="bg-border h-px flex-1">`);
+var _tmpl$ = /*#__PURE__*/ template(`<p class="text-muted-foreground text-sm">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<p role=alert class="text-foreground text-sm">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<fieldset>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=field-group>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<legend>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<span class="text-muted-foreground text-2xs tracking-wide uppercase">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div><span class="bg-border h-px flex-1"></span><span class="bg-border h-px flex-1">`);
 /**
 * 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.
 */
 function Field(props) {
 	const [local, rest] = splitProps(props, ["class"]);
@@ -29,6 +38,108 @@ function Field(props) {
 		return cn("flex flex-col gap-1.5", local.class);
 	} }, rest));
 }
+/**
+* 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.
+*/
+function FormField(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"label",
+		"hint",
+		"error",
+		"controlId",
+		"group",
+		"children"
+	]);
+	const fieldId = createUniqueId();
+	const labelId = `${fieldId}-label`;
+	const descriptionId = `${fieldId}-description`;
+	const errorId = `${fieldId}-error`;
+	const field = createFormFieldContext({
+		controlId: local.controlId,
+		defaultControlId: fieldId,
+		labelId,
+		descriptionId,
+		errorId,
+		hint: () => local.hint,
+		error: () => local.error,
+		group: () => local.group ?? false
+	});
+	const help = () => [createComponent(Show, {
+		get when() {
+			return local.hint;
+		},
+		get children() {
+			var _el$ = _tmpl$();
+			setAttribute(_el$, "id", descriptionId);
+			insert(_el$, () => local.hint);
+			return _el$;
+		}
+	}), createComponent(Show, {
+		get when() {
+			return local.error;
+		},
+		get children() {
+			var _el$2 = _tmpl$2();
+			setAttribute(_el$2, "id", errorId);
+			insert(_el$2, () => local.error);
+			return _el$2;
+		}
+	})];
+	return createComponent(FormFieldContext.Provider, {
+		value: field,
+		get children() {
+			var _el$3 = _tmpl$3();
+			spread(_el$3, mergeProps({ get ["class"]() {
+				return cn("flex flex-col gap-1.5", local.class);
+			} }, rest), false, true);
+			insert(_el$3, (() => {
+				var _c$ = memo(() => !!local.group);
+				return () => _c$() ? createComponent(FieldSet, {
+					"class": "flex flex-col gap-1.5",
+					get ["aria-describedby"]() {
+						return field.describedBy();
+					},
+					get ["aria-invalid"]() {
+						return field.invalid() || void 0;
+					},
+					get children() {
+						return [
+							createComponent(FieldLegend, {
+								id: labelId,
+								variant: "label",
+								get children() {
+									return local.label;
+								}
+							}),
+							memo(() => local.children),
+							memo(() => help())
+						];
+					}
+				}) : [
+					createComponent(Label, {
+						id: labelId,
+						get ["for"]() {
+							return field.controlId();
+						},
+						get children() {
+							return local.label;
+						}
+					}),
+					memo(() => local.children),
+					memo(help)
+				];
+			})());
+			return _el$3;
+		}
+	});
+}
 function FieldLabel(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return createComponent(TextField.Label, mergeProps({ get ["class"]() {
@@ -67,45 +178,56 @@ function FieldTextArea(props) {
 function FieldSet(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps({ get ["class"]() {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-4", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+/** A visual stack for related controls that does not imply fieldset semantics. */
+function FieldGroup(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$5 = _tmpl$5();
+		spread(_el$5, mergeProps({ get ["class"]() {
 			return cn("flex flex-col gap-4", local.class);
 		} }, rest), false, false);
-		return _el$;
+		return _el$5;
 	})();
 }
 function FieldLegend(props) {
 	const [local, rest] = splitProps(props, ["class", "variant"]);
 	return (() => {
-		var _el$2 = _tmpl$2();
-		spread(_el$2, mergeProps({ get ["class"]() {
+		var _el$6 = _tmpl$6();
+		spread(_el$6, mergeProps({ get ["class"]() {
 			return cn("mb-1", local.variant === "label" ? "text-sm font-medium" : "text-base font-semibold tracking-tight", local.class);
 		} }, rest), false, false);
-		return _el$2;
+		return _el$6;
 	})();
 }
 /** A horizontal rule with a word in it, for "or continue with" separators. */
 function FieldSeparator(props) {
 	const [local, rest] = splitProps(props, ["class", "children"]);
 	return (() => {
-		var _el$3 = _tmpl$4(), _el$6 = _el$3.firstChild.nextSibling;
-		spread(_el$3, mergeProps({ get ["class"]() {
+		var _el$7 = _tmpl$8(), _el$0 = _el$7.firstChild.nextSibling;
+		spread(_el$7, mergeProps({ get ["class"]() {
 			return cn("relative flex items-center gap-3 py-1", local.class);
 		} }, rest), false, true);
-		insert(_el$3, createComponent(Show, {
+		insert(_el$7, createComponent(Show, {
 			get when() {
 				return local.children;
 			},
 			get children() {
-				var _el$5 = _tmpl$3();
-				insert(_el$5, () => local.children);
-				return _el$5;
+				var _el$9 = _tmpl$7();
+				insert(_el$9, () => local.children);
+				return _el$9;
 			}
-		}), _el$6);
-		return _el$3;
+		}), _el$0);
+		return _el$7;
 	})();
 }
 //#endregion
-export { Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea };
+export { Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FormField };
 
 //# sourceMappingURL=field.js.map

package/dist/components/ui/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":["TextField","KobalteTextField","ComponentProps","Show","splitProps","cn","Field","props","local","rest","_$createComponent","_$mergeProps","class","FieldLabel","Label","FieldDescription","Description","FieldError","ErrorMessage","FieldInput","Input","FieldTextArea","TextArea","FieldSet","_el$","_tmpl$","_$spread","FieldLegend","variant","_el$2","_tmpl$2","FieldSeparator","children","_el$3","_tmpl$4","_el$4","firstChild","_el$6","nextSibling","_$insert","when","_el$5","_tmpl$3","_$createComponent","KobalteTextField","_$mergeProps"],"sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["import { TextField as KobalteTextField } from '@kobalte/core/text-field'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Field.\n *\n * The wrapper that makes a form control describable and validatable: a label,\n * a description, an error message, and the ARIA relationships between them.\n *\n * It is built on Kobalte's TextField specifically so `aria-describedby`,\n * `aria-invalid` and `aria-errormessage` are wired by construction. Those three\n * attributes are the difference between \"this field is required and empty\" and\n * a red border that only a sighted user can perceive — and they are also the\n * first thing a hand-rolled form drops.\n *\n * `Field` owns the description and the error slot, so a form's controls line up\n * and its messages land in the same place regardless of which control is used.\n * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.\n */\nexport function Field(props: ComponentProps<typeof KobalteTextField>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />\n}\n\nexport function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.ErrorMessage class={cn('text-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteTextField.Input\n      class={cn(\n        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none',\n        'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteTextField.TextArea\n      class={cn(\n        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none resize-y',\n        'placeholder:text-muted-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A labelled group of fields with a single legend, for a real `<fieldset>`.\n * Grouping is what lets a screen reader announce \"Shipping address, group\"\n * before reading the four fields inside it.\n */\nexport function FieldSet(props: ComponentProps<'fieldset'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\nexport function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  const [local, rest] = splitProps(props, ['class', 'variant'])\n  return (\n    <legend\n      class={cn(\n        'mb-1',\n        local.variant === 'label'\n          ? 'text-sm font-medium'\n          : 'text-base font-semibold tracking-tight',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A horizontal rule with a word in it, for \"or continue with\" separators. */\nexport function FieldSeparator(props: {\n  class?: string\n  children?: ComponentProps<'span'>['children']\n}) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <div class={cn('relative flex items-center gap-3 py-1', local.class)} {...rest}>\n      <span class=\"bg-border h-px flex-1\" />\n      <Show when={local.children}>\n        <span class=\"text-muted-foreground text-2xs tracking-wide uppercase\">{local.children}</span>\n      </Show>\n      <span class=\"bg-border h-px flex-1\" />\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"field.js","names":["TextField","KobalteTextField","ComponentProps","JSX","createUniqueId","Show","splitProps","Label","createFormFieldContext","FormFieldContext","cn","Field","props","local","rest","_$createComponent","_$mergeProps","class","FormFieldProps","Omit","label","hint","error","controlId","group","children","Element","FormField","fieldId","labelId","descriptionId","errorId","field","defaultControlId","help","when","_el$","_tmpl$","_$setAttribute","_$insert","_el$2","_tmpl$2","Provider","value","_el$3","_tmpl$3","_$spread","_c$","_$memo","FieldSet","aria-describedby","describedBy","aria-invalid","invalid","undefined","FieldLegend","id","variant","for","FieldLabel","FieldDescription","Description","FieldError","ErrorMessage","FieldInput","Input","FieldTextArea","TextArea","_el$4","_tmpl$4","FieldGroup","_el$5","_tmpl$5","_el$6","_tmpl$6","FieldSeparator","_el$7","_tmpl$8","_el$8","firstChild","_el$0","nextSibling","_el$9","_tmpl$7","_$createComponent","KobalteTextField","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["import { TextField as KobalteTextField } from '@kobalte/core/text-field'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { Label } from '../label/label'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Field.\n *\n * The wrapper that makes a form control describable and validatable: a label,\n * a description, an error message, and the ARIA relationships between them.\n *\n * This Kobalte TextField composition is for its own `FieldLabel`, `FieldInput`\n * and `FieldTextArea` parts. Use `FormField` to wire the standalone shared\n * controls, including checkboxes, switches and comboboxes.\n *\n * It is built on Kobalte's TextField specifically so `aria-describedby`,\n * `aria-invalid` and `aria-errormessage` are wired by construction. Those three\n * attributes are the difference between \"this field is required and empty\" and\n * a red border that only a sighted user can perceive — and they are also the\n * first thing a hand-rolled form drops.\n *\n * `Field` owns the description and the error slot, so its controls line up and\n * its messages land in the same place regardless of which TextField part is used.\n */\nexport function Field(props: ComponentProps<typeof KobalteTextField>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />\n}\n\nexport type FormFieldProps = Omit<ComponentProps<'div'>, 'children' | 'ref'> & {\n  label: string\n  hint?: string\n  error?: string\n  controlId?: string\n  group?: boolean\n  children: JSX.Element\n}\n\n/**\n * FormField.\n *\n * A shared label, help and validation wrapper for any one shared control. Its\n * context is consumed by Input, Textarea, NativeSelect, Checkbox, Switch,\n * RadioGroup and ComboboxInput, so the actual focusable element receives the\n * generated ID and description relationships. Set `group` when the label names\n * a set of controls; the wrapper then uses fieldset and legend semantics.\n */\nexport function FormField(props: FormFieldProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'hint',\n    'error',\n    'controlId',\n    'group',\n    'children',\n  ])\n  const fieldId = createUniqueId()\n  const labelId = `${fieldId}-label`\n  const descriptionId = `${fieldId}-description`\n  const errorId = `${fieldId}-error`\n  const field = createFormFieldContext({\n    controlId: local.controlId,\n    defaultControlId: fieldId,\n    labelId,\n    descriptionId,\n    errorId,\n    hint: () => local.hint,\n    error: () => local.error,\n    group: () => local.group ?? false,\n  })\n  const help = () => (\n    <>\n      <Show when={local.hint}>\n        <p id={descriptionId} class=\"text-muted-foreground text-sm\">\n          {local.hint}\n        </p>\n      </Show>\n      <Show when={local.error}>\n        <p id={errorId} role=\"alert\" class=\"text-foreground text-sm\">\n          {local.error}\n        </p>\n      </Show>\n    </>\n  )\n\n  return (\n    <FormFieldContext.Provider value={field}>\n      <div class={cn('flex flex-col gap-1.5', local.class)} {...rest}>\n        {local.group ? (\n          <FieldSet\n            class=\"flex flex-col gap-1.5\"\n            aria-describedby={field.describedBy()}\n            aria-invalid={field.invalid() || undefined}\n          >\n            <FieldLegend id={labelId} variant=\"label\">\n              {local.label}\n            </FieldLegend>\n            {local.children}\n            {help()}\n          </FieldSet>\n        ) : (\n          <>\n            <Label id={labelId} for={field.controlId()}>\n              {local.label}\n            </Label>\n            {local.children}\n            {help()}\n          </>\n        )}\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n\nexport function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.ErrorMessage class={cn('text-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteTextField.Input\n      class={cn(\n        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none',\n        'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteTextField.TextArea\n      class={cn(\n        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none resize-y',\n        'placeholder:text-muted-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A labelled group of fields with a single legend, for a real `<fieldset>`.\n * Grouping is what lets a screen reader announce \"Shipping address, group\"\n * before reading the four fields inside it.\n */\nexport function FieldSet(props: ComponentProps<'fieldset'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\n/** A visual stack for related controls that does not imply fieldset semantics. */\nexport function FieldGroup(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"field-group\" class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\nexport function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  const [local, rest] = splitProps(props, ['class', 'variant'])\n  return (\n    <legend\n      class={cn(\n        'mb-1',\n        local.variant === 'label'\n          ? 'text-sm font-medium'\n          : 'text-base font-semibold tracking-tight',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A horizontal rule with a word in it, for \"or continue with\" separators. */\nexport function FieldSeparator(props: {\n  class?: string\n  children?: ComponentProps<'span'>['children']\n}) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <div class={cn('relative flex items-center gap-3 py-1', local.class)} {...rest}>\n      <span class=\"bg-border h-px flex-1\" />\n      <Show when={local.children}>\n        <span class=\"text-muted-foreground text-2xs tracking-wide uppercase\">{local.children}</span>\n      </Show>\n      <span class=\"bg-border h-px flex-1\" />\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,4 @@
-export { Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, } from './field';
+export { Field, FormField, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, type FormFieldProps, } from './field';
+export { NumberField } from './number-field';
+export type { NumberFieldProps } from './number-field';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,aAAa,GACd,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,aAAa,EACb,KAAK,cAAc,GACpB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

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

@@ -1,2 +1,3 @@
-import { Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea } from "./field.js";
-export { Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea };
+import { Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FormField } from "./field.js";
+import { NumberField } from "./number-field.js";
+export { Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FormField, NumberField };

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

@@ -0,0 +1,19 @@
+import { type JSX } from 'solid-js';
+export type NumberFieldProps = {
+    label: string;
+    hint?: string;
+    value: number;
+    min: number;
+    max: number;
+    integer?: boolean;
+    onChange: (value: number) => void;
+    class?: string;
+    onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>;
+};
+/**
+ * A controlled numeric field that keeps an editable draft while validating
+ * range and integer constraints. Invalid drafts are announced and restored
+ * to the latest controlled value when focus leaves the input.
+ */
+export declare function NumberField(props: NumberFieldProps): JSX.Element;
+//# sourceMappingURL=number-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/number-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAI/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;CACxD,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiDlD"}

package/dist/components/ui/field/number-field.js

@@ -0,0 +1,76 @@
+import { FormField } from "./field.js";
+import { Input } from "../input/input.js";
+import { createComponent } from "solid-js/web";
+import { createEffect, createSignal } from "solid-js";
+//#region src/components/ui/field/number-field.tsx
+/**
+* A controlled numeric field that keeps an editable draft while validating
+* range and integer constraints. Invalid drafts are announced and restored
+* to the latest controlled value when focus leaves the input.
+*/
+function NumberField(props) {
+	const [draft, setDraft] = createSignal(String(props.value));
+	const [error, setError] = createSignal("");
+	const integer = () => props.integer ?? true;
+	createEffect(() => {
+		setDraft(String(props.value));
+	});
+	const validate = (raw) => {
+		if (!raw) return `${props.label} is required.`;
+		const next = Number(raw);
+		if (!Number.isFinite(next)) return `${props.label} must be a valid number.`;
+		if (integer() && !Number.isInteger(next)) return `${props.label} must be a whole number.`;
+		if (next < props.min || next > props.max) return `${props.label} must be between ${props.min} and ${props.max}.`;
+		return "";
+	};
+	return createComponent(FormField, {
+		get label() {
+			return props.label;
+		},
+		get hint() {
+			return props.hint;
+		},
+		get error() {
+			return error();
+		},
+		get ["class"]() {
+			return props.class;
+		},
+		get children() {
+			return createComponent(Input, {
+				type: "number",
+				get value() {
+					return draft();
+				},
+				get min() {
+					return props.min;
+				},
+				get max() {
+					return props.max;
+				},
+				get step() {
+					return integer() ? 1 : "any";
+				},
+				required: true,
+				onInput: (event) => {
+					const raw = event.currentTarget.value;
+					setDraft(raw);
+					const nextError = validate(raw);
+					setError(nextError);
+					if (!nextError) props.onChange(Number(raw));
+				},
+				onBlur: (event) => {
+					if (validate(draft())) {
+						setDraft(String(props.value));
+						setError("");
+					}
+					props.onBlur?.(event);
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { NumberField };
+
+//# sourceMappingURL=number-field.js.map