@adea-ai/ui 0.84.0 → 0.87.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,oBAAoB,GAC1B,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,oBAAoB,GAC1B,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAA"}

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

@@ -1,2 +1,3 @@
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "./input-group.js";
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText };
+import { SecretInputGroup } from "./secret-input-group.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, SecretInputGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAiBtD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,eAe7D;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC1D,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAiB1D;AAED,gEAAgE;AAChE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAoB/D;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAGxF"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAiBtD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,eAqC7D;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC1D,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAiB1D;AAED,gEAAgE;AAChE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAoB/D;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAGxF"}

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

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useFormFieldControl } from "../../../lib/form-field.js";
 import { insert, mergeProps, spread, template } from "solid-js/web";
 import { splitProps } from "solid-js";
 //#region src/components/ui/input-group/input-group.tsx
@@ -25,18 +26,54 @@ function InputGroup(props) {
 	return (() => {
 		var _el$ = _tmpl$();
 		spread(_el$, mergeProps({ get ["class"]() {
-			return cn("border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm", "transition-[color,box-shadow,border-color] ease-out", "focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle", "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle", "has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", local.class);
+			return cn("border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm", "transition-[color,box-shadow,border-color] ease-out", "focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle", "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", local.class);
 		} }, rest), false, false);
 		return _el$;
 	})();
 }
 function InputGroupInput(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, [
+		"class",
+		"id",
+		"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"]
+	});
 	return (() => {
 		var _el$2 = _tmpl$2();
-		spread(_el$2, mergeProps({ get ["class"]() {
-			return cn("h-full min-w-0 flex-1 bg-transparent text-sm outline-none", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed", local.class);
-		} }, rest), false, false);
+		spread(_el$2, mergeProps({
+			get id() {
+				return field?.id ?? local.id;
+			},
+			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"];
+			},
+			get ["class"]() {
+				return cn("h-full min-w-0 flex-1 bg-transparent text-sm outline-none", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed", local.class);
+			}
+		}, rest), false, false);
 		return _el$2;
 	})();
 }

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":["ComponentProps","JSX","splitProps","cn","InputGroup","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","InputGroupInput","_el$2","_tmpl$2","InputGroupAddonProps","align","InputGroupAddon","_el$3","_tmpl$3","_$insert","children","InputGroupButton","_el$4","_tmpl$4","InputGroupText","Element","_el$5","_tmpl$5","_$mergeProps"],"sources":["../../../../src/components/ui/input-group/input-group.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * InputGroup.\n *\n * A field with attached chrome: a leading icon, a unit, a trailing button, a\n * clear affordance. The point of the component is that the adornments and the\n * input share *one* border and *one* focus ring, so the group reads as a single\n * control. Two separate elements side by side always drift — the ring appears\n * on the wrong box, or the border doubles where they meet.\n *\n * The focus ring therefore lives on the group and follows `focus-within`. A\n * group containing several focusable things still reads as focused once, which\n * is the correct affordance: the user is somewhere inside it.\n */\nexport function InputGroup(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"input-group\"\n      class={cn(\n        'border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm',\n        'transition-[color,box-shadow,border-color] ease-out',\n        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n        'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',\n        'has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function InputGroupInput(props: ComponentProps<'input'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <input\n      data-slot=\"input-group-input\"\n      class={cn(\n        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',\n        'placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type InputGroupAddonProps = ComponentProps<'span'> & {\n  /** Which edge the adornment sits on; also sets the pointer-events rule. */\n  align?: 'start' | 'end'\n}\n\n/**\n * A non-interactive adornment. `pointer-events-none` by default, because an\n * adornment that swallows a click makes the whole control feel dead just to\n * the left of the caret — the most annoying possible bug. Pass `align=\"end\"`\n * and a real element when the adornment must be clickable.\n */\nexport function InputGroupAddon(props: InputGroupAddonProps) {\n  const [local, rest] = splitProps(props, ['class', 'align', 'children'])\n\n  return (\n    <span\n      data-slot=\"input-group-addon\"\n      class={cn(\n        'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',\n        '[&_svg]:pointer-events-none [&_svg]:size-4',\n        { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </span>\n  )\n}\n\n/** A clickable trailing button, sized to the group's height. */\nexport function InputGroupButton(props: ComponentProps<'button'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"input-group-button\"\n      class={cn(\n        'text-muted-foreground -me-1 flex size-6 shrink-0 items-center justify-center rounded-sm',\n        'transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        '[&_svg]:size-3.5',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  )\n}\n\n/** Text that reads as a value but is not an input, e.g. a unit or a suffix. */\nexport function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <span class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBA,SAAgBI,WAAWC,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,qHACA,uDACA,iFACA,mIACA,oHACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBK,gBAAgBR,OAAgC;CAC9D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,6DACA,qCACA,+BACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd;;;;;;;AAaA,SAAgBI,gBAAgBb,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO;EAAC;EAAS;EAAS;CAAU,CAAC;CAEtE,cAAA;EAAA,IAAAc,QAAAC,QAAA;EAAAV,OAAAS,OAAAR,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,gFACA,8CACA;IAAE,eAAeG,MAAMW,UAAU;IAAO,cAAcX,MAAMW,UAAU;GAAM,GAC5EX,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,IAAA;EAAAc,OAAAF,aAEPb,MAAMgB,QAAQ;EAAA,OAAAH;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBI,iBAAiBlB,OAAiC;CAChE,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,cAAA;EAAA,IAAAmB,QAAAC,QAAA;EAAAf,OAAAc,OAAAb,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWR,GACL,2FACA,wFACA,oFACA,oDACA,oBACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,IAAA;EAAAc,OAAAG,aAEPlB,MAAMgB,QAAQ;EAAA,OAAAE;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBE,eAAerB,OAA4D;CACzF,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAuB,QAAAC,QAAA;EAAAnB,OAAAkB,OAAAjB,WAAA,EAAA,KAAA,WAAA;GAAA,OAAoBR,GAAG,iCAAiCG,MAAMM,KAAK;EAAC,EAAA,GAAML,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAqB;CAAA,EAAA,CAAA;AAChF"}
+{"version":3,"file":"input-group.js","names":["ComponentProps","JSX","splitProps","useFormFieldControl","cn","InputGroup","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","InputGroupInput","field","id","_el$2","_tmpl$2","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","InputGroupAddonProps","align","InputGroupAddon","_el$3","_tmpl$3","_$insert","children","InputGroupButton","_el$4","_tmpl$4","InputGroupText","Element","_el$5","_tmpl$5","_$mergeProps"],"sources":["../../../../src/components/ui/input-group/input-group.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * InputGroup.\n *\n * A field with attached chrome: a leading icon, a unit, a trailing button, a\n * clear affordance. The point of the component is that the adornments and the\n * input share *one* border and *one* focus ring, so the group reads as a single\n * control. Two separate elements side by side always drift — the ring appears\n * on the wrong box, or the border doubles where they meet.\n *\n * The focus ring therefore lives on the group and follows `focus-within`. A\n * group containing several focusable things still reads as focused once, which\n * is the correct affordance: the user is somewhere inside it.\n */\nexport function InputGroup(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"input-group\"\n      class={cn(\n        'border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm',\n        'transition-[color,box-shadow,border-color] ease-out',\n        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n        'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',\n        'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function InputGroupInput(props: ComponentProps<'input'>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\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\n  return (\n    <input\n      data-slot=\"input-group-input\"\n      id={field?.id ?? local.id}\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      class={cn(\n        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',\n        'placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type InputGroupAddonProps = ComponentProps<'span'> & {\n  /** Which edge the adornment sits on; also sets the pointer-events rule. */\n  align?: 'start' | 'end'\n}\n\n/**\n * A non-interactive adornment. `pointer-events-none` by default, because an\n * adornment that swallows a click makes the whole control feel dead just to\n * the left of the caret — the most annoying possible bug. Pass `align=\"end\"`\n * and a real element when the adornment must be clickable.\n */\nexport function InputGroupAddon(props: InputGroupAddonProps) {\n  const [local, rest] = splitProps(props, ['class', 'align', 'children'])\n\n  return (\n    <span\n      data-slot=\"input-group-addon\"\n      class={cn(\n        'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',\n        '[&_svg]:pointer-events-none [&_svg]:size-4',\n        { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </span>\n  )\n}\n\n/** A clickable trailing button, sized to the group's height. */\nexport function InputGroupButton(props: ComponentProps<'button'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"input-group-button\"\n      class={cn(\n        'text-muted-foreground -me-1 flex size-6 shrink-0 items-center justify-center rounded-sm',\n        'transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        '[&_svg]:size-3.5',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  )\n}\n\n/** Text that reads as a value but is not an input, e.g. a unit or a suffix. */\nexport function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <span class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA,SAAgBK,WAAWC,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQN,WAAWI,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,qHACA,uDACA,iFACA,mIACA,2EACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBK,gBAAgBR,OAAgC;CAC9D,MAAM,CAACC,OAAOC,QAAQN,WAAWI,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMS,QAAQZ,oBAAoB,WAAW;EAC3Ca,IAAIT,MAAMS;EACV,cAAcT,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CAED,cAAA;EAAA,IAAAU,QAAAC,QAAA;EAAAP,OAAAM,OAAAL,WAAA;GAAA,IAGII,KAAE;IAAA,OAAED,OAAOC,MAAMT,MAAMS;GAAE;GAAA,KAAA,gBAAA;IAAA,OACbT,MAAM;GAAa;GAAA,KAAA,qBAAA;IAAA,OACdQ,QAAQ,sBAAsBR,MAAM;GAAkB;GAAA,KAAA,sBAAA;IAAA,OACrDQ,QAAQ,uBAAuBR,MAAM;GAAmB;GAAA,KAAA,kBAAA;IAAA,OAC5DQ,QAAQ,mBAAmBR,MAAM;GAAe;GAAA,KAAA,uBAAA;IAAA,OAC3CQ,QAAQ,wBAAwBR,MAAM;GAAoB;GAAA,KAAA,WAAA;IAAA,OACtEH,GACL,6DACA,qCACA,+BACAG,MAAMM,KACR;GAAC;EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAS;CAAA,EAAA,CAAA;AAGd;;;;;;;AAaA,SAAgBS,gBAAgBpB,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQN,WAAWI,OAAO;EAAC;EAAS;EAAS;CAAU,CAAC;CAEtE,cAAA;EAAA,IAAAqB,QAAAC,QAAA;EAAAjB,OAAAgB,OAAAf,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,gFACA,8CACA;IAAE,eAAeG,MAAMkB,UAAU;IAAO,cAAclB,MAAMkB,UAAU;GAAM,GAC5ElB,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,IAAA;EAAAqB,OAAAF,aAEPpB,MAAMuB,QAAQ;EAAA,OAAAH;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBI,iBAAiBzB,OAAiC;CAChE,MAAM,CAACC,OAAOC,QAAQN,WAAWI,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,cAAA;EAAA,IAAA0B,QAAAC,QAAA;EAAAtB,OAAAqB,OAAApB,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWR,GACL,2FACA,wFACA,oFACA,oDACA,oBACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,IAAA;EAAAqB,OAAAG,aAEPzB,MAAMuB,QAAQ;EAAA,OAAAE;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBE,eAAe5B,OAA4D;CACzF,MAAM,CAACC,OAAOC,QAAQN,WAAWI,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA8B,QAAAC,QAAA;EAAA1B,OAAAyB,OAAAxB,WAAA,EAAA,KAAA,WAAA;GAAA,OAAoBR,GAAG,iCAAiCG,MAAMM,KAAK;EAAC,EAAA,GAAML,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA4B;CAAA,EAAA,CAAA;AAChF"}

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

@@ -0,0 +1,11 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+export type SecretInputGroupProps = {
+    value: string;
+    disabled: boolean;
+    onChange: JSX.EventHandler<HTMLInputElement, Event>;
+    onClear?: () => void;
+    class?: string;
+} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>;
+/** A password input with an optional keyboard-accessible clear action. */
+export declare function SecretInputGroup(props: SecretInputGroupProps): JSX.Element;
+//# sourceMappingURL=secret-input-group.d.ts.map

package/dist/components/ui/input-group/secret-input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/secret-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAKhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,kBAAkB,GAAG,cAAc,CAAC,CAAA;AAE5F,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA2C5D"}

package/dist/components/ui/input-group/secret-input-group.js

@@ -0,0 +1,67 @@
+import { FormFieldContext } from "../../../lib/form-field.js";
+import { ActionButton } from "../../composites/action-button/action-button.js";
+import { InputGroup, InputGroupInput } from "./input-group.js";
+import { createComponent, mergeProps } from "solid-js/web";
+import { splitProps, useContext } from "solid-js";
+//#region src/components/ui/input-group/secret-input-group.tsx
+/** A password input with an optional keyboard-accessible clear action. */
+function SecretInputGroup(props) {
+	const field = useContext(FormFieldContext);
+	const [local, rest] = splitProps(props, [
+		"value",
+		"disabled",
+		"onChange",
+		"onClear",
+		"aria-label",
+		"class"
+	]);
+	const input = createComponent(InputGroupInput, mergeProps(rest, {
+		get ["aria-label"]() {
+			return local["aria-label"] ?? (field ? void 0 : "New API key");
+		},
+		type: "password",
+		autocomplete: "new-password",
+		get value() {
+			return local.value;
+		},
+		get disabled() {
+			return local.disabled;
+		},
+		get onInput() {
+			return local.onChange;
+		}
+	}));
+	if (!local.onClear) return createComponent(InputGroup, {
+		get ["class"]() {
+			return local.class;
+		},
+		children: input
+	});
+	return createComponent(InputGroup, {
+		get ["class"]() {
+			return local.class;
+		},
+		get children() {
+			return [input, createComponent(ActionButton, {
+				"data-slot": "input-group-button",
+				variant: "ghost",
+				size: "xs",
+				"class": "-me-1 h-6 min-w-0 shrink-0 px-2",
+				get disabled() {
+					return local.disabled;
+				},
+				get tooltip() {
+					return local.disabled ? "This API key is managed by policy" : "Clear API key";
+				},
+				tooltipSide: "top",
+				"aria-label": "Clear API key",
+				onClick: () => local.onClear?.(),
+				children: "Clear"
+			})];
+		}
+	});
+}
+//#endregion
+export { SecretInputGroup };
+
+//# sourceMappingURL=secret-input-group.js.map

package/dist/components/ui/input-group/secret-input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-input-group.js","names":["splitProps","useContext","ComponentProps","JSX","ActionButton","FormFieldContext","InputGroup","InputGroupInput","SecretInputGroupProps","value","disabled","onChange","EventHandler","HTMLInputElement","Event","onClear","class","Pick","SecretInputGroup","props","field","local","rest","input","_$createComponent","_$mergeProps","aria-label","undefined","type","autocomplete","onInput","children","variant","size","tooltip","tooltipSide","onClick","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/input-group/secret-input-group.tsx"],"sourcesContent":["import { splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'\nimport { ActionButton } from '../../composites/action-button'\nimport { FormFieldContext } from '#lib/form-field'\nimport { InputGroup, InputGroupInput } from './input-group'\n\nexport type SecretInputGroupProps = {\n  value: string\n  disabled: boolean\n  onChange: JSX.EventHandler<HTMLInputElement, Event>\n  onClear?: () => void\n  class?: string\n} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>\n\n/** A password input with an optional keyboard-accessible clear action. */\nexport function SecretInputGroup(props: SecretInputGroupProps) {\n  const field = useContext(FormFieldContext)\n  const [local, rest] = splitProps(props, [\n    'value',\n    'disabled',\n    'onChange',\n    'onClear',\n    'aria-label',\n    'class',\n  ])\n\n  const input = (\n    <InputGroupInput\n      {...rest}\n      aria-label={local['aria-label'] ?? (field ? undefined : 'New API key')}\n      type=\"password\"\n      autocomplete=\"new-password\"\n      value={local.value}\n      disabled={local.disabled}\n      onInput={local.onChange}\n    />\n  )\n\n  if (!local.onClear) return <InputGroup class={local.class}>{input}</InputGroup>\n\n  return (\n    <InputGroup class={local.class}>\n      {input}\n      <ActionButton\n        data-slot=\"input-group-button\"\n        variant=\"ghost\"\n        size=\"xs\"\n        class=\"-me-1 h-6 min-w-0 shrink-0 px-2\"\n        disabled={local.disabled}\n        tooltip={local.disabled ? 'This API key is managed by policy' : 'Clear API key'}\n        tooltipSide=\"top\"\n        aria-label=\"Clear API key\"\n        onClick={() => local.onClear?.()}\n      >\n        Clear\n      </ActionButton>\n    </InputGroup>\n  )\n}\n"],"mappings":";;;;;;;AAcA,SAAgBkB,iBAAiBC,OAA8B;CAC7D,MAAMC,QAAQnB,WAAWI,gBAAgB;CACzC,MAAM,CAACgB,OAAOC,QAAQtB,WAAWmB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,MAAMI,QAAKC,gBACRjB,iBAAekB,WACVH,MAAI;EAAA,KAAA,gBAAA;GAAA,OACID,MAAM,kBAAkBD,QAAQO,KAAAA,IAAY;EAAc;EACtEC,MAAI;EACJC,cAAY;EAAA,IACZpB,QAAK;GAAA,OAAEY,MAAMZ;EAAK;EAAA,IAClBC,WAAQ;GAAA,OAAEW,MAAMX;EAAQ;EAAA,IACxBoB,UAAO;GAAA,OAAET,MAAMV;EAAQ;CAAA,CAAA,CAAA;CAI3B,IAAI,CAACU,MAAMN,SAAS,OAAAS,gBAAQlB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQe,MAAML;EAAK;EAAAe,UAAGR;CAAK,CAAA;CAEjE,OAAAC,gBACGlB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQe,MAAML;EAAK;EAAA,IAAAe,WAAA;GAAA,OAAA,CAC3BR,OAAKC,gBACLpB,cAAY;IAAA,aAAA;IAEX4B,SAAO;IACPC,MAAI;IAAA,SAAA;IAAA,IAEJvB,WAAQ;KAAA,OAAEW,MAAMX;IAAQ;IAAA,IACxBwB,UAAO;KAAA,OAAEb,MAAMX,WAAW,sCAAsC;IAAe;IAC/EyB,aAAW;IAAA,cAAA;IAEXC,eAAef,MAAMN,UAAU;IAACgB,UAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAMxC"}

package/dist/components/ui/native-select/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAoDpD"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCA6EpD"}

package/dist/components/ui/native-select/native-select.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useFormFieldControl } from "../../../lib/form-field.js";
 import { createComponent, effect, insert, mergeProps, spread, template, use } from "solid-js/web";
 import { ChevronDownIcon } from "lucide-solid";
 import { For, Show, createEffect, onMount, splitProps } from "solid-js";
@@ -25,8 +26,22 @@ function NativeSelect(props) {
 		"class",
 		"children",
 		"defaultValue",
-		"options"
+		"options",
+		"id",
+		"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"]
+	});
 	let select;
 	createEffect(() => {
 		if (!select) return;
@@ -40,9 +55,29 @@ function NativeSelect(props) {
 		use((element) => {
 			select = element;
 		}, _el$2);
-		spread(_el$2, mergeProps({ get ["class"]() {
-			return cn("h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "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 dark:bg-input/30", local.class);
-		} }, rest), false, true);
+		spread(_el$2, mergeProps({
+			get id() {
+				return field?.id ?? local.id;
+			},
+			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"];
+			},
+			get ["class"]() {
+				return cn("h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "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 dark:bg-input/30", local.class);
+			}
+		}, rest), false, true);
 		insert(_el$2, createComponent(Show, {
 			get when() {
 				return local.options;

package/dist/components/ui/native-select/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","cn","NativeSelectProps","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = ComponentProps<'select'> & {\n  /** Render the choices from data instead of raw option children. */\n  options?: readonly NativeSelectOption[]\n  /** Initialize an uncontrolled selection after its native options mount. */\n  defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  if (multiple && Array.isArray(value)) {\n    const selected = new Set(value.map(String))\n    for (const option of select.options) option.selected = selected.has(option.value)\n    return\n  }\n\n  select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  const defaultValues =\n    multiple && Array.isArray(value)\n      ? new Set(value.map(String))\n      : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n  for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n  setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n  value: string\n  label: string\n  disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue', 'options'])\n  let select: HTMLSelectElement | undefined\n\n  // Set selection after native options exist; setting select.value before its\n  // children are mounted makes browsers fall back to the first option.\n  createEffect(() => {\n    if (!select) return\n    setSelectedValue(select, rest.value, Boolean(rest.multiple))\n  })\n  onMount(() => {\n    if (select && rest.value === undefined) {\n      initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n    }\n  })\n\n  return (\n    <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n      <select\n        ref={(element) => {\n          select = element\n        }}\n        data-slot=\"native-select\"\n        class={cn(\n          'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',\n          'transition-[color,box-shadow,border-color] ease-out outline-none',\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 dark:bg-input/30',\n          local.class\n        )}\n        {...rest}\n      >\n        <Show when={local.options} fallback={local.children}>\n          {(options) => (\n            <For each={options()}>\n              {(option) => (\n                <option value={option.value} disabled={option.disabled}>\n                  {option.label}\n                </option>\n              )}\n            </For>\n          )}\n        </Show>\n      </select>\n      <ChevronDownIcon\n        data-slot=\"native-select-icon\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\"\n      />\n    </span>\n  )\n}\n"],"mappings":";;;;;;;AAYA,SAASY,iBACPC,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,IAAID,YAAYE,MAAMC,QAAQJ,KAAK,GAAG;EACpC,MAAMK,WAAW,IAAIC,IAAIN,MAAMO,IAAIC,MAAM,CAAC;EAC1C,KAAK,MAAMC,UAAUX,OAAOJ,SAASe,OAAOJ,WAAWA,SAASK,IAAID,OAAOT,KAAK;EAChF;CACF;CAEAF,OAAOE,QAAQQ,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK;AACvE;AAEA,SAASW,2BACPb,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,MAAMU,gBACJX,YAAYE,MAAMC,QAAQJ,KAAK,IAC3B,IAAIM,IAAIN,MAAMO,IAAIC,MAAM,CAAC,oBACzB,IAAIF,IAAI,CAACE,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK,CAAC,CAAC;CAEvE,KAAK,MAAMS,UAAUX,OAAOJ,SAASe,OAAOI,kBAAkBD,cAAcF,IAAID,OAAOT,KAAK;CAC5FH,iBAAiBC,QAAQE,OAAOC,QAAQ;AAC1C;AAkBA,SAAgBgB,aAAaC,OAA0B;CACrD,MAAM,CAACC,OAAOC,QAAQ7B,WAAW2B,OAAO;EAAC;EAAS;EAAY;EAAgB;CAAS,CAAC;CACxF,IAAIpB;CAIJX,mBAAmB;EACjB,IAAI,CAACW,QAAQ;EACbD,iBAAiBC,QAAQsB,KAAKpB,OAAOqB,QAAQD,KAAKnB,QAAQ,CAAC;CAC7D,CAAC;CACDZ,cAAc;EACZ,IAAIS,UAAUsB,KAAKpB,UAAUE,KAAAA,GAC3BS,2BAA2Bb,QAAQqB,MAAMvB,cAAcyB,QAAQD,KAAKnB,QAAQ,CAAC;CAEjF,CAAC;CAED,cAAA;EAAA,IAAAqB,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,KAGYC,YAAY;GAChB7B,SAAS6B;EACX,GAACH,KAAA;EAAAI,OAAAJ,OAAAK,WAAA,EAAA,KAAA,WAAA;GAAA,OAEMrC,GACL,iHACA,oEACA,oFACA,4FACA,iGACA2B,MAAMW,KACR;EAAC,EAAA,GACGV,IAAI,GAAA,OAAA,IAAA;EAAAW,OAAAP,OAAAQ,gBAEP1C,MAAI;GAAA,IAAC2C,OAAI;IAAA,OAAEd,MAAMzB;GAAO;GAAA,IAAEwC,WAAQ;IAAA,OAAEf,MAAMgB;GAAQ;GAAAA,WAC/CzC,YAAOsC,gBACN5C,KAAG;IAAA,IAACgD,OAAI;KAAA,OAAE1C,QAAQ;IAAC;IAAAyC,WAChB1B,kBAAM;KAAA,IAAA4B,QAAAC,QAAA;KAAAP,OAAAM,aAEH5B,OAAOM,KAAK;KAAAwB,aAAAF,MAAArB,WADwBP,OAAOO,QAAQ;KAAAuB,aAAAF,MAAArC,QAAvCS,OAAOT,KAAK;KAAA,OAAAqC;IAAA,EAAA,CAAA;GAG5B,CAAA;EAEJ,CAAA,CAAA;EAAAN,OAAAT,MAAAU,gBAGJ/C,iBAAe;GAAA,aAAA;GAAA,eAAA;GAAA,SAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAqC;CAAA,EAAA,CAAA;AAOtB"}
+{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = ComponentProps<'select'> & {\n  /** Render the choices from data instead of raw option children. */\n  options?: readonly NativeSelectOption[]\n  /** Initialize an uncontrolled selection after its native options mount. */\n  defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  if (multiple && Array.isArray(value)) {\n    const selected = new Set(value.map(String))\n    for (const option of select.options) option.selected = selected.has(option.value)\n    return\n  }\n\n  select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  const defaultValues =\n    multiple && Array.isArray(value)\n      ? new Set(value.map(String))\n      : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n  for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n  setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n  value: string\n  label: string\n  disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'children',\n    'defaultValue',\n    'options',\n    'id',\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  let select: HTMLSelectElement | undefined\n\n  // Set selection after native options exist; setting select.value before its\n  // children are mounted makes browsers fall back to the first option.\n  createEffect(() => {\n    if (!select) return\n    setSelectedValue(select, rest.value, Boolean(rest.multiple))\n  })\n  onMount(() => {\n    if (select && rest.value === undefined) {\n      initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n    }\n  })\n\n  return (\n    <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n      <select\n        ref={(element) => {\n          select = element\n        }}\n        data-slot=\"native-select\"\n        id={field?.id ?? local.id}\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        class={cn(\n          'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',\n          'transition-[color,box-shadow,border-color] ease-out outline-none',\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 dark:bg-input/30',\n          local.class\n        )}\n        {...rest}\n      >\n        <Show when={local.options} fallback={local.children}>\n          {(options) => (\n            <For each={options()}>\n              {(option) => (\n                <option value={option.value} disabled={option.disabled}>\n                  {option.label}\n                </option>\n              )}\n            </For>\n          )}\n        </Show>\n      </select>\n      <ChevronDownIcon\n        data-slot=\"native-select-icon\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\"\n      />\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,SAASa,iBACPC,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,IAAID,YAAYE,MAAMC,QAAQJ,KAAK,GAAG;EACpC,MAAMK,WAAW,IAAIC,IAAIN,MAAMO,IAAIC,MAAM,CAAC;EAC1C,KAAK,MAAMC,UAAUX,OAAOJ,SAASe,OAAOJ,WAAWA,SAASK,IAAID,OAAOT,KAAK;EAChF;CACF;CAEAF,OAAOE,QAAQQ,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK;AACvE;AAEA,SAASW,2BACPb,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,MAAMU,gBACJX,YAAYE,MAAMC,QAAQJ,KAAK,IAC3B,IAAIM,IAAIN,MAAMO,IAAIC,MAAM,CAAC,oBACzB,IAAIF,IAAI,CAACE,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK,CAAC,CAAC;CAEvE,KAAK,MAAMS,UAAUX,OAAOJ,SAASe,OAAOI,kBAAkBD,cAAcF,IAAID,OAAOT,KAAK;CAC5FH,iBAAiBC,QAAQE,OAAOC,QAAQ;AAC1C;AAkBA,SAAgBgB,aAAaC,OAA0B;CACrD,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMG,QAAQ9B,oBAAoB,WAAW;EAC3C+B,IAAIH,MAAMG;EACV,cAAcH,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CACD,IAAIrB;CAIJZ,mBAAmB;EACjB,IAAI,CAACY,QAAQ;EACbD,iBAAiBC,QAAQsB,KAAKpB,OAAOuB,QAAQH,KAAKnB,QAAQ,CAAC;CAC7D,CAAC;CACDb,cAAc;EACZ,IAAIU,UAAUsB,KAAKpB,UAAUE,KAAAA,GAC3BS,2BAA2Bb,QAAQqB,MAAMvB,cAAc2B,QAAQH,KAAKnB,QAAQ,CAAC;CAEjF,CAAC;CAED,cAAA;EAAA,IAAAuB,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,KAGYC,YAAY;GAChB/B,SAAS+B;EACX,GAACH,KAAA;EAAAI,OAAAJ,OAAAK,WAAA;GAAA,IAEDT,KAAE;IAAA,OAAED,OAAOC,MAAMH,MAAMG;GAAE;GAAA,KAAA,gBAAA;IAAA,OACbH,MAAM;GAAa;GAAA,KAAA,qBAAA;IAAA,OACdE,QAAQ,sBAAsBF,MAAM;GAAkB;GAAA,KAAA,sBAAA;IAAA,OACrDE,QAAQ,uBAAuBF,MAAM;GAAmB;GAAA,KAAA,kBAAA;IAAA,OAC5DE,QAAQ,mBAAmBF,MAAM;GAAe;GAAA,KAAA,uBAAA;IAAA,OAC3CE,QAAQ,wBAAwBF,MAAM;GAAoB;GAAA,KAAA,WAAA;IAAA,OACtE3B,GACL,iHACA,oEACA,oFACA,4FACA,iGACA2B,MAAMkB,KACR;GAAC;EAAA,GACGjB,IAAI,GAAA,OAAA,IAAA;EAAAkB,OAAAZ,OAAAa,gBAEPlD,MAAI;GAAA,IAACmD,OAAI;IAAA,OAAErB,MAAMzB;GAAO;GAAA,IAAE+C,WAAQ;IAAA,OAAEtB,MAAMuB;GAAQ;GAAAA,WAC/ChD,YAAO6C,gBACNpD,KAAG;IAAA,IAACwD,OAAI;KAAA,OAAEjD,QAAQ;IAAC;IAAAgD,WAChBjC,kBAAM;KAAA,IAAAmC,QAAAC,QAAA;KAAAP,OAAAM,aAEHnC,OAAOM,KAAK;KAAA+B,aAAAF,MAAA5B,WADwBP,OAAOO,QAAQ;KAAA8B,aAAAF,MAAA5C,QAAvCS,OAAOT,KAAK;KAAA,OAAA4C;IAAA,EAAA,CAAA;GAG5B,CAAA;EAEJ,CAAA,CAAA;EAAAN,OAAAd,MAAAe,gBAGJvD,iBAAe;GAAA,aAAA;GAAA,eAAA;GAAA,SAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAwC;CAAA,EAAA,CAAA;AAOtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACnE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAmC5C"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACnE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAuC5C"}

package/dist/components/ui/progress/progress.js

@@ -15,24 +15,36 @@ function Progress$1(props) {
 	return createComponent(Progress, mergeProps({ get ["class"]() {
 		return cn("flex w-full flex-col gap-1.5", local.class);
 	} }, rest, { get children() {
-		return [(() => {
-			var _el$ = _tmpl$();
-			insert(_el$, createComponent(Progress.Label, {
-				"class": "text-muted-foreground text-sm",
-				get children() {
-					return local.label;
-				}
-			}), null);
-			insert(_el$, createComponent(Show, {
-				get when() {
-					return !local.hideValue;
-				},
-				get children() {
-					return createComponent(Progress.ValueLabel, { "class": "text-muted-foreground text-sm tabular-nums" });
-				}
-			}), null);
-			return _el$;
-		})(), createComponent(Progress.Track, {
+		return [createComponent(Show, {
+			get when() {
+				return local.label || !local.hideValue;
+			},
+			get children() {
+				var _el$ = _tmpl$();
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return local.label;
+					},
+					get children() {
+						return createComponent(Progress.Label, {
+							"class": "text-muted-foreground text-sm",
+							get children() {
+								return local.label;
+							}
+						});
+					}
+				}), null);
+				insert(_el$, createComponent(Show, {
+					get when() {
+						return !local.hideValue;
+					},
+					get children() {
+						return createComponent(Progress.ValueLabel, { "class": "text-muted-foreground text-sm tabular-nums" });
+					}
+				}), null);
+				return _el$;
+			}
+		}), createComponent(Progress.Track, {
 			get ["class"]() {
 				return cn("bg-input relative h-1.5 w-full overflow-hidden rounded-full", local.trackClass);
 			},

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

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["Progress","KobalteProgress","ComponentProps","Show","splitProps","cn","ProgressProps","label","trackClass","indicatorClass","hideValue","props","local","rest","_$createComponent","_$mergeProps","class","children","_el$","_tmpl$","_$insert","Label","when","ValueLabel","Track","Fill","indeterminate","Progress","_$createComponent","KobalteProgress","_$mergeProps"],"sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as KobalteProgress } from '@kobalte/core/progress'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Progress.\n *\n * A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a\n * screen reader reports the percentage instead of just \"progress bar\" — which\n * is why a caller must pass a real `value`, or use Spinner when there is none.\n *\n * `indeterminate` renders the sweeping bar for an operation that reports no\n * progress at all. It is a visibly different treatment so the two states are\n * never confused by someone glancing at the screen.\n */\nexport type ProgressProps = ComponentProps<typeof KobalteProgress> & {\n  /**\n   * The visible label, which is also the bar's accessible name.\n   *\n   * Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar\n   * with neither announces \"progress bar, 64%\" and no subject — the reader\n   * cannot tell whether it is a build, an upload or a download.\n   */\n  label?: string\n  trackClass?: string\n  indicatorClass?: string\n  /** Hide the numeric readout that otherwise sits beside the track. */\n  hideValue?: boolean\n}\n\nexport function Progress(props: ProgressProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'indicatorClass',\n    'hideValue',\n    'label',\n  ])\n\n  return (\n    <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>\n      <div class=\"flex items-center justify-between gap-3\">\n        <KobalteProgress.Label class=\"text-muted-foreground text-sm\">\n          {local.label}\n        </KobalteProgress.Label>\n        <Show when={!local.hideValue}>\n          <KobalteProgress.ValueLabel class=\"text-muted-foreground text-sm tabular-nums\" />\n        </Show>\n      </div>\n      <KobalteProgress.Track\n        class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}\n      >\n        <KobalteProgress.Fill\n          class={cn(\n            'bg-primary h-full rounded-full',\n            {\n              'animate-indeterminate w-1/4': props.indeterminate,\n              'w-(--kb-progress-fill-width)': !props.indeterminate,\n            },\n            local.indicatorClass\n          )}\n        />\n      </KobalteProgress.Track>\n    </KobalteProgress>\n  )\n}\n"],"mappings":";;;;;;AA+BA,SAAgBA,WAASW,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGb,UAAec,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQV,GAAG,gCAAgCO,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA,QAAA;GAAA,IAAAC,OAAAC,OAAA;GAAAC,OAAAF,MAAAJ,gBAE5Eb,SAAgBoB,OAAK;IAAA,SAAA;IAAA,IAAAJ,WAAA;KAAA,OACnBL,MAAML;IAAK;GAAA,CAAA,GAAA,IAAA;GAAAa,OAAAF,MAAAJ,gBAEbX,MAAI;IAAA,IAACmB,OAAI;KAAA,OAAE,CAACV,MAAMF;IAAS;IAAA,IAAAO,WAAA;KAAA,OAAAH,gBACzBb,SAAgBsB,YAAU,EAAA,SAAA,6CAAA,CAAA;IAAA;GAAA,CAAA,GAAA,IAAA;GAAA,OAAAL;EAAA,EAAA,CAAA,GAAAJ,gBAG9Bb,SAAgBuB,OAAK;GAAA,KAAA,WAAA;IAAA,OACbnB,GAAG,+DAA+DO,MAAMJ,UAAU;GAAC;GAAA,IAAAS,WAAA;IAAA,OAAAH,gBAEzFb,SAAgBwB,MAAI,EAAA,KAAA,WAAA;KAAA,OACZpB,GACL,kCACA;MACE,+BAA+BM,MAAMe;MACrC,gCAAgC,CAACf,MAAMe;KACzC,GACAd,MAAMH,cACR;IAAC,EAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAKX"}
+{"version":3,"file":"progress.js","names":["Progress","KobalteProgress","ComponentProps","Show","splitProps","cn","ProgressProps","label","trackClass","indicatorClass","hideValue","props","local","rest","_$createComponent","_$mergeProps","class","children","when","_el$","_tmpl$","_$insert","Label","ValueLabel","Track","Fill","indeterminate","Progress","_$createComponent","KobalteProgress","_$mergeProps"],"sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as KobalteProgress } from '@kobalte/core/progress'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Progress.\n *\n * A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a\n * screen reader reports the percentage instead of just \"progress bar\" — which\n * is why a caller must pass a real `value`, or use Spinner when there is none.\n *\n * `indeterminate` renders the sweeping bar for an operation that reports no\n * progress at all. It is a visibly different treatment so the two states are\n * never confused by someone glancing at the screen.\n */\nexport type ProgressProps = ComponentProps<typeof KobalteProgress> & {\n  /**\n   * The visible label, which is also the bar's accessible name.\n   *\n   * Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar\n   * with neither announces \"progress bar, 64%\" and no subject — the reader\n   * cannot tell whether it is a build, an upload or a download.\n   */\n  label?: string\n  trackClass?: string\n  indicatorClass?: string\n  /** Hide the numeric readout that otherwise sits beside the track. */\n  hideValue?: boolean\n}\n\nexport function Progress(props: ProgressProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'indicatorClass',\n    'hideValue',\n    'label',\n  ])\n\n  return (\n    <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>\n      <Show when={local.label || !local.hideValue}>\n        <div class=\"flex items-center justify-between gap-3\">\n          <Show when={local.label}>\n            <KobalteProgress.Label class=\"text-muted-foreground text-sm\">\n              {local.label}\n            </KobalteProgress.Label>\n          </Show>\n          <Show when={!local.hideValue}>\n            <KobalteProgress.ValueLabel class=\"text-muted-foreground text-sm tabular-nums\" />\n          </Show>\n        </div>\n      </Show>\n      <KobalteProgress.Track\n        class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}\n      >\n        <KobalteProgress.Fill\n          class={cn(\n            'bg-primary h-full rounded-full',\n            {\n              'animate-indeterminate w-1/4': props.indeterminate,\n              'w-(--kb-progress-fill-width)': !props.indeterminate,\n            },\n            local.indicatorClass\n          )}\n        />\n      </KobalteProgress.Track>\n    </KobalteProgress>\n  )\n}\n"],"mappings":";;;;;;AA+BA,SAAgBA,WAASW,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGb,UAAec,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQV,GAAG,gCAAgCO,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA,CAAAH,gBAC9EX,MAAI;GAAA,IAACe,OAAI;IAAA,OAAEN,MAAML,SAAS,CAACK,MAAMF;GAAS;GAAA,IAAAO,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,MAAAL,gBAEtCX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAEN,MAAML;KAAK;KAAA,IAAAU,WAAA;MAAA,OAAAH,gBACpBb,SAAgBqB,OAAK;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACnBL,MAAML;OAAK;MAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAAc,OAAAF,MAAAL,gBAGfX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAE,CAACN,MAAMF;KAAS;KAAA,IAAAO,WAAA;MAAA,OAAAH,gBACzBb,SAAgBsB,YAAU,EAAA,SAAA,6CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAJ;GAAA;EAAA,CAAA,GAAAL,gBAIhCb,SAAgBuB,OAAK;GAAA,KAAA,WAAA;IAAA,OACbnB,GAAG,+DAA+DO,MAAMJ,UAAU;GAAC;GAAA,IAAAS,WAAA;IAAA,OAAAH,gBAEzFb,SAAgBwB,MAAI,EAAA,KAAA,WAAA;KAAA,OACZpB,GACL,kCACA;MACE,+BAA+BM,MAAMe;MACrC,gCAAgC,CAACf,MAAMe;KACzC,GACAd,MAAMH,cACR;IAAC,EAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAKX"}

package/dist/components/ui/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,kCAGzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCA4DxD"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,kCA8BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCA4DxD"}

package/dist/components/ui/radio-group/radio-group.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useFormFieldControl } from "../../../lib/form-field.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { Circle } from "lucide-solid";
 import { splitProps } from "solid-js";
@@ -18,10 +19,46 @@ var _tmpl$ = /*#__PURE__*/ template(`<div class="grid gap-0.5 leading-none">`);
 * tokens so either choice sits correctly next to the other.
 */
 function RadioGroup$1(props) {
-	const [local, rest] = splitProps(props, ["class"]);
-	return createComponent(RadioGroup, mergeProps({ get ["class"]() {
-		return cn("grid gap-2", local.class);
-	} }, rest));
+	const [local, rest] = splitProps(props, [
+		"class",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-invalid",
+		"aria-errormessage"
+	]);
+	const field = useFormFieldControl("group", {
+		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"]
+	});
+	return createComponent(RadioGroup, mergeProps({
+		get id() {
+			return field?.id ?? local.id;
+		},
+		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"];
+		},
+		get ["class"]() {
+			return cn("grid gap-2", local.class);
+		}
+	}, rest));
 }
 function RadioGroupItem(props) {
 	const [local, rest] = splitProps(props, [

package/dist/components/ui/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","RadioGroupItemProps","Item","controlClass","label","description","RadioGroupItem","title","children","ItemInput","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteRadioGroup class={cn('grid gap-2', local.class)} {...rest} />\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n}\n\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n\n  return (\n    <KobalteRadioGroup.Item\n      title={local.title}\n      class={cn('group/radio flex items-start gap-2.5', local.class)}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\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-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel class=\"text-sm font-medium\">\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgBA,aAAWM,OAAiD;CAC1E,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,YAAiBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,cAAcE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAC1E;AAaA,SAAgBS,eAAeX,OAA4B;CACzD,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGR,WAAkBY,MAAIH,WAAA;EAAA,IACrBQ,QAAK;GAAA,OAAEX,MAAMW;EAAK;EAAA,KAAA,WAAA;GAAA,OACXb,GAAG,wCAAwCE,MAAMI,KAAK;EAAC;CAAA,GAC1DH,MAAI,EAAA,IAAAW,WAAA;EAAA,OAAA;GAAAV,gBAEPR,WAAkBmB,WAAS;IAAA,KAAA,gBAAA;KAAA,OACdb,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,sBAAA;KAAA,OACvBA,MAAM;IAAmB;IAAA,KAAA,kBAAA;KAAA,OAC7BA,MAAM;IAAe;IAAA,KAAA,eAAA;KAAA,OACxBA,MAAM;IAAY;IAAA,IAC7BW,QAAK;KAAA,OAAEX,MAAMW;IAAK;GAAA,CAAA;GAAAT,gBAEnBR,WAAkByB,aAAW;IAAA,KAAA,WAAA;KAAA,OACrBrB,GACL,oGACA,qFACA,oFACA,6DACA,kGACA,iEACAE,MAAMO,YACR;IAAC;IAAA,IAAAK,WAAA;KAAA,OAAAV,gBAEAR,WAAkB0B,eAAa;MAAA,SAAA;MAAA,IAAAR,WAAA;OAAA,OAAAV,gBAC7BP,QAAM,EAAA,SAAA,sBAAA,CAAA;MAAA;KAAA,CAAA;IAAA;GAAA,CAAA;GAAA0B,WAGVrB,MAAMY,mBAAQ;IAAA,IAAAU,OAAAC,OAAA;IAAAC,OAAAF,aAAA;KAAA,IAAAG,MAAAJ,WAAA,CAAA,CAEVrB,MAAMQ,KAAK;KAAA,aAAXiB,IAAA,IAAAvB,gBACER,WAAkBgC,WAAS;MAAA,SAAA;MAAA,IAAAd,WAAA;OAAA,OACzBZ,MAAMQ;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;IAAAgB,OAAAF,aAAA;KAAA,IAAAK,OAAAN,WAAA,CAAA,CACPrB,MAAMS,WAAW;KAAA,aAAjBkB,KAAA,IAAAzB,gBACER,WAAkBkC,iBAAe;MAAA,SAAA;MAAA,IAAAhB,WAAA;OAAA,OAC/BZ,MAAMS;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAa;GAAA,EAAA,CAAA,CAEX;EAAA;CAAA,EAAA,CAAA,CAAA;AAGP"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","RadioGroupItem","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\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  return (\n    <KobalteRadioGroup\n      id={field?.id ?? local.id}\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      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n}\n\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n\n  return (\n    <KobalteRadioGroup.Item\n      title={local.title}\n      class={cn('group/radio flex items-start gap-2.5', local.class)}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\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-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel class=\"text-sm font-medium\">\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}

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

@@ -14,6 +14,8 @@ import type { ComponentProps, JSX } from 'solid-js';
  * user sees.
  */
 export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {
+    /** ID for the hidden native switch input; useful with an external label. */
+    inputId?: string;
     controlClass?: string;
     thumbClass?: string;
     labelClass?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAwExC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAK5E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKxF"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAsFxC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAK5E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKxF"}

package/dist/components/ui/switch/switch.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useFormFieldControl } from "../../../lib/form-field.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { splitProps } from "solid-js";
 import { Switch } from "@kobalte/core/switch";
@@ -18,10 +19,24 @@ function Switch$1(props) {
 		"aria-labelledby",
 		"aria-describedby",
 		"aria-invalid",
+		"aria-errormessage",
 		"aria-busy",
+		"id",
+		"inputId",
 		"title"
 	]);
+	const field = useFormFieldControl("control", {
+		id: local.inputId ?? 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"]
+	});
 	return createComponent(Switch, mergeProps({
+		get id() {
+			return field ? void 0 : local.id;
+		},
 		get title() {
 			return local.title;
 		},
@@ -31,17 +46,23 @@ function Switch$1(props) {
 	}, rest, { get children() {
 		return [
 			createComponent(Switch.Input, {
+				get id() {
+					return field?.id ?? local.inputId;
+				},
 				get ["aria-label"]() {
 					return local["aria-label"];
 				},
 				get ["aria-labelledby"]() {
-					return local["aria-labelledby"];
+					return field?.["aria-labelledby"] ?? local["aria-labelledby"];
 				},
 				get ["aria-describedby"]() {
-					return local["aria-describedby"];
+					return field?.["aria-describedby"] ?? local["aria-describedby"];
 				},
 				get ["aria-invalid"]() {
-					return local["aria-invalid"];
+					return field?.["aria-invalid"] ?? local["aria-invalid"];
+				},
+				get ["aria-errormessage"]() {
+					return field?.["aria-errormessage"] ?? local["aria-errormessage"];
 				},
 				get ["aria-busy"]() {
 					return local["aria-busy"];