@adea-ai/ui 0.84.0 → 0.87.0

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAgBW,MAAMC,OAAgD;CACpE,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQd,WAAgBe,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQN,GAAG,yBAAyBG,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACpF;;;;;;;;;;AAoBA,SAAgBa,UAAUf,OAAuB;CAC/C,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CACD,MAAMgB,UAAUxB,eAAe;CAC/B,MAAMyB,UAAU,GAAGD,QAAO;CAC1B,MAAME,gBAAgB,GAAGF,QAAO;CAChC,MAAMG,UAAU,GAAGH,QAAO;CAC1B,MAAMI,QAAQxB,uBAAuB;EACnCe,WAAWV,MAAMU;EACjBU,kBAAkBL;EAClBC;EACAC;EACAC;EACAV,YAAYR,MAAMQ;EAClBC,aAAaT,MAAMS;EACnBE,aAAaX,MAAMW,SAAS;CAC9B,CAAC;CACD,MAAMU,aAAO,CAAAnB,gBAERV,MAAI;EAAA,IAAC8B,OAAI;GAAA,OAAEtB,MAAMQ;EAAI;EAAA,IAAAI,WAAA;GAAA,IAAAW,OAAAC,OAAA;GAAAC,aAAAF,MAAA,MACbN,aAAa;GAAAS,OAAAH,YACjBvB,MAAMQ,IAAI;GAAA,OAAAe;EAAA;CAAA,CAAA,GAAArB,gBAGdV,MAAI;EAAA,IAAC8B,OAAI;GAAA,OAAEtB,MAAMS;EAAK;EAAA,IAAAG,WAAA;GAAA,IAAAe,QAAAC,QAAA;GAAAH,aAAAE,OAAA,MACdT,OAAO;GAAAQ,OAAAC,aACX3B,MAAMS,KAAK;GAAA,OAAAkB;EAAA;CAAA,CAAA,CAAA;CAMpB,OAAAzB,gBACGN,iBAAiBiC,UAAQ;EAACC,OAAOX;EAAK,IAAAP,WAAA;GAAA,IAAAmB,QAAAC,QAAA;GAAAC,OAAAF,OAAA5B,WAAA,EAAA,KAAA,WAAA;IAAA,OACzBN,GAAG,yBAAyBG,MAAMI,KAAK;GAAC,EAAA,GAAMH,IAAI,GAAA,OAAA,IAAA;GAAAyB,OAAAK,cAAA;IAAA,IAAAG,MAAAC,WAAA,CAAA,CAC3DnC,MAAMW,KAAK;IAAA,aAAXuB,IAAA,IAAAhC,gBACEkC,UAAQ;KAAA,SAAA;KAAA,KAAA,sBAAA;MAAA,OAEWjB,MAAMmB,YAAY;KAAC;KAAA,KAAA,kBAAA;MAAA,OACvBnB,MAAMqB,QAAQ,KAAKC,KAAAA;KAAS;KAAA,IAAA7B,WAAA;MAAA,OAAA;OAAAV,gBAEzCwC,aAAW;QAACC,IAAI3B;QAAS4B,SAAO;QAAA,IAAAhC,WAAA;SAAA,OAC9BZ,MAAMO;QAAK;OAAA,CAAA;OAAA4B,WAEbnC,MAAMY,QAAQ;OAAAuB,WACdd,KAAK,CAAC;MAAA;KAAA;IAAA,CAAA,IAAA;KAAAnB,gBAINR,OAAK;MAACiD,IAAI3B;MAAO,KAAA,SAAA;OAAA,OAAOG,MAAMT,UAAU;MAAC;MAAA,IAAAE,WAAA;OAAA,OACvCZ,MAAMO;MAAK;KAAA,CAAA;KAAA4B,WAEbnC,MAAMY,QAAQ;KAAAuB,KACdd,IAAI;IAAA;GAER,EAAA,CAAA,CAAA;GAAA,OAAAU;EAAA;CAAA,CAAA;AAIT;AAEA,SAAgBe,WAAW/C,OAAsD;CAC/E,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGd,UAAiBM,OAAKS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQN,GAAG,oCAAoCG,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAEhG;AAEA,SAAgB8C,iBAAiBhD,OAA4D;CAC3F,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGd,UAAiB4D,aAAW7C,WAAA,EAAA,KAAA,WAAA;EAAA,OACpBN,GAAG,iCAAiCG,MAAMI,KAAK;CAAC,EAAA,GACnDH,IAAI,CAAA;AAGd;AAEA,SAAgBgD,WAAWlD,OAA6D;CACtF,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGd,UAAiB8D,cAAY/C,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQN,GAAG,2BAA2BG,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAE9F;AAEA,SAAgBkD,WAAWpD,OAAsD;CAC/E,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAG,gBACGd,UAAiBgE,OAAKjD,WAAA,EAAA,KAAA,WAAA;EAAA,OACdN,GACL,wGACA,oEACA,4FACA,oFACA,4FACA,gFACAG,MAAMI,KACR;CAAC,EAAA,GACGH,IAAI,CAAA;AAGd;AAEA,SAAgBoD,cAActD,OAAyD;CACrF,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAG,gBACGd,UAAiBkE,UAAQnD,WAAA,EAAA,KAAA,WAAA;EAAA,OACjBN,GACL,sHACA,6EACA,qCACA,oFACA,4FACA,gFACAG,MAAMI,KACR;CAAC,EAAA,GACGH,IAAI,CAAA;AAGd;;;;;;AAOA,SAAgBmC,SAASrC,OAAmC;CAC1D,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAwD,QAAAC,QAAA;EAAAvB,OAAAsB,OAAApD,WAAA,EAAA,KAAA,WAAA;GAAA,OAAwBN,GAAG,uBAAuBG,MAAMI,KAAK;EAAC,EAAA,GAAMH,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAsD;CAAA,EAAA,CAAA;AAC1E;;AAGA,SAAgBE,WAAW1D,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA2D,QAAAC,QAAA;EAAA1B,OAAAyB,OAAAvD,WAAA,EAAA,KAAA,WAAA;GAAA,OAA2CN,GAAG,uBAAuBG,MAAMI,KAAK;EAAC,EAAA,GAAMH,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAyD;CAAA,EAAA,CAAA;AAC7F;AAEA,SAAgBhB,YAAY3C,OAAoE;CAC9F,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,SAAS,SAAS,CAAC;CAC5D,cAAA;EAAA,IAAA6D,QAAAC,QAAA;EAAA5B,OAAA2B,OAAAzD,WAAA,EAAA,KAAA,WAAA;GAAA,OAEWN,GACL,QACAG,MAAM4C,YAAY,UACd,wBACA,0CACJ5C,MAAMI,KACR;EAAC,EAAA,GACGH,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA2D;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBE,eAAe/D,OAG5B;CACD,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,cAAA;EAAA,IAAAgE,QAAAC,QAAA,GAAAG,QAAAJ,MAAAG,WAAAE;EAAAnC,OAAA8B,OAAA5D,WAAA,EAAA,KAAA,WAAA;GAAA,OACcN,GAAG,yCAAyCG,MAAMI,KAAK;EAAC,EAAA,GAAMH,IAAI,GAAA,OAAA,IAAA;EAAAyB,OAAAqC,OAAA7D,gBAE3EV,MAAI;GAAA,IAAC8B,OAAI;IAAA,OAAEtB,MAAMY;GAAQ;GAAA,IAAAA,WAAA;IAAA,IAAAyD,QAAAC,QAAA;IAAA5C,OAAA2C,aAC8CrE,MAAMY,QAAQ;IAAA,OAAAyD;GAAA;EAAA,CAAA,GAAAF,KAAA;EAAA,OAAAJ;CAAA,EAAA,CAAA;AAK5F"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","names":["createEffect","createSignal","JSX","FormField","Input","NumberFieldProps","label","hint","value","min","max","integer","onChange","class","onBlur","EventHandler","HTMLInputElement","FocusEvent","NumberField","props","draft","setDraft","String","error","setError","validate","raw","next","Number","isFinite","isInteger","_$createComponent","children","type","step","required","onInput","event","currentTarget","nextError","_$createComponent"],"sources":["../../../../src/components/ui/field/number-field.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX } from 'solid-js'\nimport { FormField } from './field'\nimport { Input } from '../input/input'\n\nexport type NumberFieldProps = {\n  label: string\n  hint?: string\n  value: number\n  min: number\n  max: number\n  integer?: boolean\n  onChange: (value: number) => void\n  class?: string\n  onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>\n}\n\n/**\n * A controlled numeric field that keeps an editable draft while validating\n * range and integer constraints. Invalid drafts are announced and restored\n * to the latest controlled value when focus leaves the input.\n */\nexport function NumberField(props: NumberFieldProps) {\n  const [draft, setDraft] = createSignal(String(props.value))\n  const [error, setError] = createSignal('')\n  const integer = () => props.integer ?? true\n\n  createEffect(() => {\n    setDraft(String(props.value))\n  })\n\n  const validate = (raw: string) => {\n    if (!raw) return `${props.label} is required.`\n    const next = Number(raw)\n    if (!Number.isFinite(next)) return `${props.label} must be a valid number.`\n    if (integer() && !Number.isInteger(next)) {\n      return `${props.label} must be a whole number.`\n    }\n    if (next < props.min || next > props.max) {\n      return `${props.label} must be between ${props.min} and ${props.max}.`\n    }\n    return ''\n  }\n\n  return (\n    <FormField label={props.label} hint={props.hint} error={error()} class={props.class}>\n      <Input\n        type=\"number\"\n        value={draft()}\n        min={props.min}\n        max={props.max}\n        step={integer() ? 1 : 'any'}\n        required\n        onInput={(event) => {\n          const raw = event.currentTarget.value\n          setDraft(raw)\n          const nextError = validate(raw)\n          setError(nextError)\n          if (!nextError) props.onChange(Number(raw))\n        }}\n        onBlur={(event) => {\n          const nextError = validate(draft())\n          if (nextError) {\n            setDraft(String(props.value))\n            setError('')\n          }\n          props.onBlur?.(event)\n        }}\n      />\n    </FormField>\n  )\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgBkB,YAAYC,OAAyB;CACnD,MAAM,CAACC,OAAOC,YAAYpB,aAAaqB,OAAOH,MAAMX,KAAK,CAAC;CAC1D,MAAM,CAACe,OAAOC,YAAYvB,aAAa,EAAE;CACzC,MAAMU,gBAAgBQ,MAAMR,WAAW;CAEvCX,mBAAmB;EACjBqB,SAASC,OAAOH,MAAMX,KAAK,CAAC;CAC9B,CAAC;CAED,MAAMiB,YAAYC,QAAgB;EAChC,IAAI,CAACA,KAAK,OAAO,GAAGP,MAAMb,MAAK;EAC/B,MAAMqB,OAAOC,OAAOF,GAAG;EACvB,IAAI,CAACE,OAAOC,SAASF,IAAI,GAAG,OAAO,GAAGR,MAAMb,MAAK;EACjD,IAAIK,QAAQ,KAAK,CAACiB,OAAOE,UAAUH,IAAI,GACrC,OAAO,GAAGR,MAAMb,MAAK;EAEvB,IAAIqB,OAAOR,MAAMV,OAAOkB,OAAOR,MAAMT,KACnC,OAAO,GAAGS,MAAMb,MAAK,mBAAoBa,MAAMV,IAAG,OAAQU,MAAMT,IAAG;EAErE,OAAO;CACT;CAEA,OAAAqB,gBACG5B,WAAS;EAAA,IAACG,QAAK;GAAA,OAAEa,MAAMb;EAAK;EAAA,IAAEC,OAAI;GAAA,OAAEY,MAAMZ;EAAI;EAAA,IAAEgB,QAAK;GAAA,OAAEA,MAAM;EAAC;EAAA,KAAA,WAAA;GAAA,OAASJ,MAAMN;EAAK;EAAA,IAAAmB,WAAA;GAAA,OAAAD,gBAChF3B,OAAK;IACJ6B,MAAI;IAAA,IACJzB,QAAK;KAAA,OAAEY,MAAM;IAAC;IAAA,IACdX,MAAG;KAAA,OAAEU,MAAMV;IAAG;IAAA,IACdC,MAAG;KAAA,OAAES,MAAMT;IAAG;IAAA,IACdwB,OAAI;KAAA,OAAEvB,QAAQ,IAAI,IAAI;IAAK;IAC3BwB,UAAQ;IACRC,UAAUC,UAAU;KAClB,MAAMX,MAAMW,MAAMC,cAAc9B;KAChCa,SAASK,GAAG;KACZ,MAAMa,YAAYd,SAASC,GAAG;KAC9BF,SAASe,SAAS;KAClB,IAAI,CAACA,WAAWpB,MAAMP,SAASgB,OAAOF,GAAG,CAAC;IAC5C;IACAZ,SAASuB,UAAU;KAEjB,IADkBZ,SAASL,MAAM,CAC7BmB,GAAW;MACblB,SAASC,OAAOH,MAAMX,KAAK,CAAC;MAC5BgB,SAAS,EAAE;KACb;KACAL,MAAML,SAASuB,KAAK;IACtB;GAAC,CAAA;EAAA;CAAA,CAAA;AAIT"}

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

@@ -1,2 +1,3 @@
 export { Input, type InputProps } from './input';
+export { InputControl, type InputControlProps } from './input-control';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

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

@@ -1,2 +1,3 @@
+import { InputControl } from "./input-control.js";
 import { Input } from "./input.js";
-export { Input };
+export { Input, InputControl };

package/dist/components/ui/input/input-control.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * InputControl.
+ *
+ * A styled native input with no optional suggestion-list behavior. Use this
+ * when a consumer needs only the control; `Input` adds native datalist
+ * suggestions for forms that need them.
+ */
+export type InputControlProps = ComponentProps<'input'>;
+export declare function InputControl(props: InputControlProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=input-control.d.ts.map

package/dist/components/ui/input/input-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/input-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;AAEvD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAwBpD"}

package/dist/components/ui/input/input-control.js

@@ -0,0 +1,24 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/input/input-control.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<input data-slot=input>`);
+function InputControl(props) {
+	const [local, rest] = splitProps(props, ["class", "type"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get type() {
+				return local.type ?? "text";
+			},
+			get ["class"]() {
+				return cn("h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "placeholder:text-muted-foreground", "selection:bg-primary selection:text-primary-foreground", "file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "read-only:bg-surface-hover", local.class);
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { InputControl };
+
+//# sourceMappingURL=input-control.js.map

package/dist/components/ui/input/input-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-control.js","names":["ComponentProps","splitProps","cn","InputControlProps","InputControl","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","type","class","_$mergeProps"],"sources":["../../../../src/components/ui/input/input-control.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * InputControl.\n *\n * A styled native input with no optional suggestion-list behavior. Use this\n * when a consumer needs only the control; `Input` adds native datalist\n * suggestions for forms that need them.\n */\nexport type InputControlProps = ComponentProps<'input'>\n\nexport function InputControl(props: InputControlProps) {\n  const [local, rest] = splitProps(props, ['class', 'type'])\n\n  return (\n    <input\n      data-slot=\"input\"\n      type={local.type ?? 'text'}\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',\n        'selection:bg-primary selection:text-primary-foreground',\n        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',\n        /* A pointer click on a text field is a typing affordance, so the ring\n         appears where the user agent already matches :focus-visible. */\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        'read-only:bg-surface-hover',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;AAaA,SAAgBI,aAAaC,OAA0B;CACrD,MAAM,CAACC,OAAOC,QAAQN,WAAWI,OAAO,CAAC,SAAS,MAAM,CAAC;CAEzD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA;GAAA,IAGIC,OAAI;IAAA,OAAEN,MAAMM,QAAQ;GAAM;GAAA,KAAA,WAAA;IAAA,OACnBV,GACL,wGACA,oEACA,qCACA,0DACA,kHAGA,oFACA,4FACA,gFACA,8BACAI,MAAMO,KACR;GAAC;EAAA,GACGN,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd"}

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACjD,gFAAgF;IAChF,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAChC,CAAA;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,kCAoCtC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACjD,gFAAgF;IAChF,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAChC,CAAA;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,kCA+CtC"}

package/dist/components/ui/input/input.js

@@ -1,51 +1,79 @@
-import { cn } from "../../../lib/utils.js";
-import { createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { useFormFieldControl } from "../../../lib/form-field.js";
+import { InputControl } from "./input-control.js";
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
 import { For, Show, createUniqueId, splitProps } from "solid-js";
 //#region src/components/ui/input/input.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<input data-slot=input>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<datalist>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<option>`);
+var _tmpl$ = /*#__PURE__*/ template(`<datalist>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<option>`);
 function Input(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"type",
+		"id",
 		"list",
-		"suggestions"
+		"suggestions",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-invalid",
+		"aria-errormessage"
 	]);
+	const field = useFormFieldControl("control", {
+		id: local.id,
+		"aria-label": local["aria-label"],
+		"aria-labelledby": local["aria-labelledby"],
+		"aria-describedby": local["aria-describedby"],
+		"aria-invalid": local["aria-invalid"],
+		"aria-errormessage": local["aria-errormessage"]
+	});
 	const suggestionsId = createUniqueId();
 	const listId = () => local.list ?? `input-suggestions-${suggestionsId}`;
-	return [(() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps({
-			get type() {
-				return local.type ?? "text";
-			},
-			get list() {
-				return memo(() => !!local.suggestions)() ? listId() : local.list;
-			},
-			get ["class"]() {
-				return cn("h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "placeholder:text-muted-foreground", "selection:bg-primary selection:text-primary-foreground", "file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "read-only:bg-surface-hover", local.class);
-			}
-		}, rest), false, false);
-		return _el$;
-	})(), createComponent(Show, {
+	return [createComponent(InputControl, mergeProps(rest, {
+		get ["class"]() {
+			return local.class;
+		},
+		get type() {
+			return local.type;
+		},
+		get id() {
+			return field?.id ?? local.id;
+		},
+		get list() {
+			return memo(() => !!local.suggestions)() ? listId() : local.list;
+		},
+		get ["aria-label"]() {
+			return local["aria-label"];
+		},
+		get ["aria-labelledby"]() {
+			return field?.["aria-labelledby"] ?? local["aria-labelledby"];
+		},
+		get ["aria-describedby"]() {
+			return field?.["aria-describedby"] ?? local["aria-describedby"];
+		},
+		get ["aria-invalid"]() {
+			return field?.["aria-invalid"] ?? local["aria-invalid"];
+		},
+		get ["aria-errormessage"]() {
+			return field?.["aria-errormessage"] ?? local["aria-errormessage"];
+		}
+	})), createComponent(Show, {
 		get when() {
 			return local.suggestions;
 		},
 		children: (suggestions) => (() => {
-			var _el$2 = _tmpl$2();
-			insert(_el$2, createComponent(For, {
+			var _el$ = _tmpl$();
+			insert(_el$, createComponent(For, {
 				get each() {
 					return suggestions();
 				},
 				children: (value) => (() => {
-					var _el$3 = _tmpl$3();
-					_el$3.value = value;
-					return _el$3;
+					var _el$2 = _tmpl$2();
+					_el$2.value = value;
+					return _el$2;
 				})()
 			}));
-			effect(() => setAttribute(_el$2, "id", listId()));
-			return _el$2;
+			effect(() => setAttribute(_el$, "id", listId()));
+			return _el$;
 		})()
 	})];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["ComponentProps","createUniqueId","For","Show","splitProps","cn","InputProps","suggestions","Input","props","local","rest","suggestionsId","listId","list","_el$","_tmpl$","_$spread","_$mergeProps","type","_$memo","class","_$createComponent","when","children","_el$2","_tmpl$2","_$insert","each","value","_el$3","_tmpl$3","_$effect","_$setAttribute","_$mergeProps","_$memo","_$createComponent","_$setAttribute"],"sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { createUniqueId, For, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Input.\n *\n * Deliberately a plain `<input>` rather than a Kobalte TextField part. The\n * styling contract is what a consumer needs from an input; validation,\n * description and error wiring come from `Field`, which composes this. Keeping\n * them separate is what lets an input sit inside a custom control without\n * inheriting a form's ARIA graph.\n *\n * Height comes from `h-control-md`; an input cannot be given a new height\n * without a new token, which is what keeps it aligned with Button and Select.\n */\nexport type InputProps = ComponentProps<'input'> & {\n  /** Native text suggestions; custom values remain valid and submit unchanged. */\n  suggestions?: readonly string[]\n}\n\nexport function Input(props: InputProps) {\n  const [local, rest] = splitProps(props, ['class', 'type', 'list', 'suggestions'])\n  const suggestionsId = createUniqueId()\n  const listId = () => local.list ?? `input-suggestions-${suggestionsId}`\n\n  return (\n    <>\n      <input\n        data-slot=\"input\"\n        type={local.type ?? 'text'}\n        list={local.suggestions ? listId() : local.list}\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',\n          'selection:bg-primary selection:text-primary-foreground',\n          'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',\n          /* A pointer click on a text field is a typing affordance, so the ring\n           appears where the user agent already matches :focus-visible. */\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          'read-only:bg-surface-hover',\n          local.class\n        )}\n        {...rest}\n      />\n      <Show when={local.suggestions}>\n        {(suggestions) => (\n          <datalist id={listId()}>\n            <For each={suggestions()}>{(value) => <option value={value} />}</For>\n          </datalist>\n        )}\n      </Show>\n    </>\n  )\n}\n"],"mappings":";;;;;;;AAqBA,SAAgBQ,MAAMC,OAAmB;CACvC,MAAM,CAACC,OAAOC,QAAQP,WAAWK,OAAO;EAAC;EAAS;EAAQ;EAAQ;CAAa,CAAC;CAChF,MAAMG,gBAAgBX,eAAe;CACrC,MAAMY,eAAeH,MAAMI,QAAQ,qBAAqBF;CAExD,OAAA,QAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA;GAAA,IAIMC,OAAI;IAAA,OAAET,MAAMS,QAAQ;GAAM;GAAA,IAC1BL,OAAI;IAAA,OAAEM,WAAA,CAAA,CAAAV,MAAMH,WAAW,CAAA,CAAA,IAAGM,OAAO,IAAIH,MAAMI;GAAI;GAAA,KAAA,WAAA;IAAA,OACxCT,GACL,wGACA,oEACA,qCACA,0DACA,kHAGA,oFACA,4FACA,gFACA,8BACAK,MAAMW,KACR;GAAC;EAAA,GACGV,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAI;CAAA,EAAA,CAAA,GAAAO,gBAETnB,MAAI;EAAA,IAACoB,OAAI;GAAA,OAAEb,MAAMH;EAAW;EAAAiB,WACzBjB,uBAAW;GAAA,IAAAkB,QAAAC,QAAA;GAAAC,OAAAF,OAAAH,gBAERpB,KAAG;IAAA,IAAC0B,OAAI;KAAA,OAAErB,YAAY;IAAC;IAAAiB,WAAIK,iBAAK;KAAA,IAAAC,QAAAC,QAAA;KAAAD,MAAAD,QAAoBA;KAAK,OAAAC;IAAA,EAAA,CAAA;GAAI,CAAA,CAAA;GAAAE,aAAAC,aAAAR,OAAA,MADlDZ,OAAO,CAAC,CAAA;GAAA,OAAAY;EAAA,EAAA,CAAA;CAGvB,CAAA,CAAA;AAIT"}
+{"version":3,"file":"input.js","names":["ComponentProps","createUniqueId","For","Show","splitProps","useFormFieldControl","InputControl","InputProps","suggestions","Input","props","local","rest","field","id","suggestionsId","listId","list","_$createComponent","_$mergeProps","class","type","_$memo","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","when","children","_el$","_tmpl$","_$insert","each","value","_el$2","_tmpl$2","_$effect","_$setAttribute","_$createComponent","_$mergeProps","_$memo","_$setAttribute"],"sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { createUniqueId, For, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { InputControl } from './input-control'\n\n/**\n * Input.\n *\n * Deliberately a plain `<input>` rather than a Kobalte TextField part. The\n * styling contract is what a consumer needs from an input; validation,\n * description and error wiring come from `Field`, which composes this. Keeping\n * them separate is what lets an input sit inside a custom control without\n * inheriting a form's ARIA graph.\n *\n * Height comes from `h-control-md`; an input cannot be given a new height\n * without a new token, which is what keeps it aligned with Button and Select.\n */\nexport type InputProps = ComponentProps<'input'> & {\n  /** Native text suggestions; custom values remain valid and submit unchanged. */\n  suggestions?: readonly string[]\n}\n\nexport function Input(props: InputProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'type',\n    'id',\n    'list',\n    'suggestions',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  const suggestionsId = createUniqueId()\n  const listId = () => local.list ?? `input-suggestions-${suggestionsId}`\n\n  return (\n    <>\n      <InputControl\n        {...rest}\n        class={local.class}\n        type={local.type}\n        id={field?.id ?? local.id}\n        list={local.suggestions ? listId() : local.list}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      />\n      <Show when={local.suggestions}>\n        {(suggestions) => (\n          <datalist id={listId()}>\n            <For each={suggestions()}>{(value) => <option value={value} />}</For>\n          </datalist>\n        )}\n      </Show>\n    </>\n  )\n}\n"],"mappings":";;;;;;;AAsBA,SAAgBS,MAAMC,OAAmB;CACvC,MAAM,CAACC,OAAOC,QAAQR,WAAWM,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMG,QAAQR,oBAAoB,WAAW;EAC3CS,IAAIH,MAAMG;EACV,cAAcH,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CACD,MAAMI,gBAAgBd,eAAe;CACrC,MAAMe,eAAeL,MAAMM,QAAQ,qBAAqBF;CAExD,OAAA,CAAAG,gBAEKZ,cAAYa,WACPP,MAAI;EAAA,KAAA,WAAA;GAAA,OACDD,MAAMS;EAAK;EAAA,IAClBC,OAAI;GAAA,OAAEV,MAAMU;EAAI;EAAA,IAChBP,KAAE;GAAA,OAAED,OAAOC,MAAMH,MAAMG;EAAE;EAAA,IACzBG,OAAI;GAAA,OAAEK,WAAA,CAAA,CAAAX,MAAMH,WAAW,CAAA,CAAA,IAAGQ,OAAO,IAAIL,MAAMM;EAAI;EAAA,KAAA,gBAAA;GAAA,OACnCN,MAAM;EAAa;EAAA,KAAA,qBAAA;GAAA,OACdE,QAAQ,sBAAsBF,MAAM;EAAkB;EAAA,KAAA,sBAAA;GAAA,OACrDE,QAAQ,uBAAuBF,MAAM;EAAmB;EAAA,KAAA,kBAAA;GAAA,OAC5DE,QAAQ,mBAAmBF,MAAM;EAAe;EAAA,KAAA,uBAAA;GAAA,OAC3CE,QAAQ,wBAAwBF,MAAM;EAAoB;CAAA,CAAA,CAAA,GAAAO,gBAE9Ef,MAAI;EAAA,IAACyB,OAAI;GAAA,OAAEjB,MAAMH;EAAW;EAAAqB,WACzBrB,uBAAW;GAAA,IAAAsB,OAAAC,OAAA;GAAAC,OAAAF,MAAAZ,gBAERhB,KAAG;IAAA,IAAC+B,OAAI;KAAA,OAAEzB,YAAY;IAAC;IAAAqB,WAAIK,iBAAK;KAAA,IAAAC,QAAAC,QAAA;KAAAD,MAAAD,QAAoBA;KAAK,OAAAC;IAAA,EAAA,CAAA;GAAI,CAAA,CAAA;GAAAE,aAAAC,aAAAR,MAAA,MADlDd,OAAO,CAAC,CAAA;GAAA,OAAAc;EAAA,EAAA,CAAA;CAGvB,CAAA,CAAA;AAIT"}

package/dist/components/ui/input-group/index.d.ts

@@ -1,2 +1,3 @@
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, type InputGroupAddonProps, } from './input-group';
+export { SecretInputGroup, type SecretInputGroupProps } from './secret-input-group';
 //# sourceMappingURL=index.d.ts.map