@adea-ai/ui 0.60.3 → 0.61.0

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

@@ -0,0 +1,93 @@
+import { cn } from "../../../lib/utils.js";
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/input-group/input-group.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=input-group>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<input data-slot=input-group-input>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span data-slot=input-group-addon>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<button type=button data-slot=input-group-button>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span>`);
+/**
+* InputGroup.
+*
+* A field with attached chrome: a leading icon, a unit, a trailing button, a
+* clear affordance. The point of the component is that the adornments and the
+* input share *one* border and *one* focus ring, so the group reads as a single
+* control. Two separate elements side by side always drift — the ring appears
+* on the wrong box, or the border doubles where they meet.
+*
+* The focus ring therefore lives on the group and follows `focus-within`. A
+* group containing several focusable things still reads as focused once, which
+* is the correct affordance: the user is somewhere inside it.
+*/
+function InputGroup(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	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);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+function InputGroupInput(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	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);
+		return _el$2;
+	})();
+}
+/**
+* A non-interactive adornment. `pointer-events-none` by default, because an
+* adornment that swallows a click makes the whole control feel dead just to
+* the left of the caret — the most annoying possible bug. Pass `align="end"`
+* and a real element when the adornment must be clickable.
+*/
+function InputGroupAddon(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"align",
+		"children"
+	]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none", "[&_svg]:pointer-events-none [&_svg]:size-4", {
+				"order-first": local.align !== "end",
+				"order-last": local.align === "end"
+			}, local.class);
+		} }, rest), false, true);
+		insert(_el$3, () => local.children);
+		return _el$3;
+	})();
+}
+/** A clickable trailing button, sized to the group's height. */
+function InputGroupButton(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground -me-1 flex size-6 shrink-0 items-center justify-center rounded-sm", "transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", "[&_svg]:size-3.5", local.class);
+		} }, rest), false, true);
+		insert(_el$4, () => local.children);
+		return _el$4;
+	})();
+}
+/** Text that reads as a value but is not an input, e.g. a unit or a suffix. */
+function InputGroupText(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$5 = _tmpl$5();
+		spread(_el$5, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground text-sm", local.class);
+		} }, rest), false, false);
+		return _el$5;
+	})();
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText };
+
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export { InputOtp, InputOtpCaret, type InputOtpProps } from './input-otp';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-otp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA"}

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

@@ -0,0 +1,37 @@
+import OtpField from '@corvu/otp-field';
+import type { ComponentProps } from 'solid-js';
+/**
+ * InputOtp.
+ *
+ * A one-time code, entered into separate boxes. The boxes are the *paint*: the
+ * value lives in a single real input, so paste works, autofill works, and a
+ * password manager sees one field rather than six.
+ *
+ * That split is the whole reason to use a component rather than six inputs. Six
+ * inputs cannot be pasted into, cannot be autofilled, and announce as six unrelated
+ * fields — every one of which is a defect a user hits on the first try.
+ *
+ * corvu supplies the value handling, the caret movement, the paste split and the
+ * keyboard behaviour.
+ */
+/**
+ * `maxLength` is omitted rather than exposed: corvu requires it, and a caller who
+ * has to set both it and `length` will eventually set them to different numbers.
+ * `length` is the one input and it drives the other.
+ */
+export type InputOtpProps = Omit<ComponentProps<typeof OtpField>, 'maxLength'> & {
+    /** How many characters. */
+    length?: number;
+    /** Group the boxes into runs, e.g. `[3, 3]` for a six-character code. */
+    groups?: readonly number[];
+};
+export declare function InputOtp(props: InputOtpProps): import("solid-js").JSX.Element;
+/**
+ * A caret drawn inside the active box.
+ *
+ * Exported for a caller building its own slot: the box above renders the character
+ * directly, and a blinking caret is the alternative when the field should look
+ * empty until something is typed.
+ */
+export declare function InputOtpCaret(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=input-otp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;GAaG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG;IAC/E,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC3B,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCA0D5C;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAS1D"}

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

@@ -0,0 +1,92 @@
+import { cn } from "../../../lib/utils.js";
+import { className, createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { For, Show, splitProps } from "solid-js";
+import OtpField from "@corvu/otp-field";
+//#region src/components/ui/input-otp/input-otp.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span aria-hidden=true class="text-muted-foreground px-1">–`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="flex items-center gap-1.5">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span aria-hidden=true>`);
+function InputOtp(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"length",
+		"groups",
+		"children"
+	]);
+	const length = () => local.length ?? 6;
+	const groups = () => local.groups ?? [length()];
+	return createComponent(OtpField, mergeProps({
+		get maxLength() {
+			return length();
+		},
+		get ["class"]() {
+			return cn("flex items-center gap-2", local.class);
+		}
+	}, rest, { children: (field) => [createComponent(OtpField.Input, {
+		get ["aria-label"]() {
+			return props["aria-label"] ?? "One-time code";
+		},
+		"class": "absolute inset-0 opacity-0"
+	}), createComponent(For, {
+		get each() {
+			return groups();
+		},
+		children: (size, groupIndex) => [createComponent(Show, {
+			get when() {
+				return groupIndex() > 0;
+			},
+			get children() {
+				return _tmpl$();
+			}
+		}), (() => {
+			var _el$2 = _tmpl$2();
+			insert(_el$2, createComponent(For, {
+				get each() {
+					return Array.from({ length: size });
+				},
+				children: (_, index) => {
+					const slot = groups().slice(0, groupIndex()).reduce((total, run) => total + run, 0) + index();
+					return (() => {
+						var _el$3 = _tmpl$3();
+						insert(_el$3, () => field.value[slot] ?? "");
+						effect((_p$) => {
+							var _v$ = cn("border-input bg-transparent flex size-10 items-center justify-center rounded-md border text-sm font-medium", "transition-[color,box-shadow,border-color] ease-out", "data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-primary-subtle", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"), _v$2 = field.activeSlots.includes(slot), _v$3 = props.disabled;
+							_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+							_v$2 !== _p$.t && setAttribute(_el$3, "data-active", _p$.t = _v$2);
+							_v$3 !== _p$.a && setAttribute(_el$3, "data-disabled", _p$.a = _v$3);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0
+						});
+						return _el$3;
+					})();
+				}
+			}));
+			return _el$2;
+		})()]
+	})] }));
+}
+/**
+* A caret drawn inside the active box.
+*
+* Exported for a caller building its own slot: the box above renders the character
+* directly, and a blinking caret is the alternative when the field should look
+* empty until something is typed.
+*/
+function InputOtpCaret(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("animate-caret bg-foreground inline-block h-4 w-px", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+//#endregion
+export { InputOtp, InputOtpCaret };
+
+//# sourceMappingURL=input-otp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":["OtpField","ComponentProps","For","Show","splitProps","cn","InputOtpProps","Omit","length","groups","InputOtp","props","local","rest","_$createComponent","_$mergeProps","maxLength","class","children","field","Input","aria-label","each","size","groupIndex","when","_tmpl$","_el$2","_tmpl$2","_$insert","Array","from","_","index","offset","slice","reduce","total","run","slot","_el$3","_tmpl$3","value","_$effect","_p$","_v$","_v$2","activeSlots","includes","_v$3","disabled","e","_$className","t","_$setAttribute","a","undefined","InputOtpCaret","_el$4","_tmpl$4","_$spread","_$createComponent","_$mergeProps","_$className","_$setAttribute"],"sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"sourcesContent":["import OtpField from '@corvu/otp-field'\nimport type { ComponentProps } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * InputOtp.\n *\n * A one-time code, entered into separate boxes. The boxes are the *paint*: the\n * value lives in a single real input, so paste works, autofill works, and a\n * password manager sees one field rather than six.\n *\n * That split is the whole reason to use a component rather than six inputs. Six\n * inputs cannot be pasted into, cannot be autofilled, and announce as six unrelated\n * fields — every one of which is a defect a user hits on the first try.\n *\n * corvu supplies the value handling, the caret movement, the paste split and the\n * keyboard behaviour.\n */\n/**\n * `maxLength` is omitted rather than exposed: corvu requires it, and a caller who\n * has to set both it and `length` will eventually set them to different numbers.\n * `length` is the one input and it drives the other.\n */\nexport type InputOtpProps = Omit<ComponentProps<typeof OtpField>, 'maxLength'> & {\n  /** How many characters. */\n  length?: number\n  /** Group the boxes into runs, e.g. `[3, 3]` for a six-character code. */\n  groups?: readonly number[]\n}\n\nexport function InputOtp(props: InputOtpProps) {\n  const [local, rest] = splitProps(props, ['class', 'length', 'groups', 'children'])\n\n  const length = () => local.length ?? 6\n  const groups = () => local.groups ?? [length()]\n\n  return (\n    <OtpField\n      maxLength={length()}\n      class={cn('flex items-center gap-2', local.class)}\n      {...rest}\n      children={(field) => (\n        <>\n          <OtpField.Input\n            aria-label={props['aria-label'] ?? 'One-time code'}\n            class=\"absolute inset-0 opacity-0\"\n          />\n          <For each={groups()}>\n            {(size, groupIndex) => (\n              <>\n                <Show when={groupIndex() > 0}>\n                  <span aria-hidden=\"true\" class=\"text-muted-foreground px-1\">\n                    –\n                  </span>\n                </Show>\n                <span class=\"flex items-center gap-1.5\">\n                  <For each={Array.from({ length: size })}>\n                    {(_, index) => {\n                      // The slot's index across the whole field, so the boxes after a\n                      // group boundary continue counting rather than restarting.\n                      const offset = groups()\n                        .slice(0, groupIndex())\n                        .reduce((total, run) => total + run, 0)\n                      const slot = offset + index()\n                      return (\n                        <span\n                          class={cn(\n                            'border-input bg-transparent flex size-10 items-center justify-center rounded-md border text-sm font-medium',\n                            'transition-[color,box-shadow,border-color] ease-out',\n                            'data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-primary-subtle',\n                            'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'\n                          )}\n                          data-active={field.activeSlots.includes(slot)}\n                          data-disabled={props.disabled}\n                        >\n                          {field.value[slot] ?? ''}\n                        </span>\n                      )\n                    }}\n                  </For>\n                </span>\n              </>\n            )}\n          </For>\n        </>\n      )}\n    />\n  )\n}\n\n/**\n * A caret drawn inside the active box.\n *\n * Exported for a caller building its own slot: the box above renders the character\n * directly, and a blinking caret is the alternative when the field should look\n * empty until something is typed.\n */\nexport function InputOtpCaret(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <span\n      aria-hidden=\"true\"\n      class={cn('animate-caret bg-foreground inline-block h-4 w-px', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAgBU,SAASC,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EAAC;EAAS;EAAU;EAAU;CAAU,CAAC;CAEjF,MAAMH,eAAeI,MAAMJ,UAAU;CACrC,MAAMC,eAAeG,MAAMH,UAAU,CAACD,OAAO,CAAC;CAE9C,OAAAM,gBACGd,UAAQe,WAAA;EAAA,IACPC,YAAS;GAAA,OAAER,OAAO;EAAC;EAAA,KAAA,WAAA;GAAA,OACZH,GAAG,2BAA2BO,MAAMK,KAAK;EAAC;CAAA,GAC7CJ,MAAI,EACRK,WAAWC,UAAK,CAAAL,gBAEXd,SAASoB,OAAK;EAAA,KAAA,gBAAA;GAAA,OACDT,MAAM,iBAAiB;EAAe;EAAA,SAAA;CAAA,CAAA,GAAAG,gBAGnDZ,KAAG;EAAA,IAACoB,OAAI;GAAA,OAAEb,OAAO;EAAC;EAAAS,WACfK,MAAMC,eAAU,CAAAV,gBAEbX,MAAI;GAAA,IAACsB,OAAI;IAAA,OAAED,WAAW,IAAI;GAAC;GAAA,IAAAN,WAAA;IAAA,OAAAQ,OAAA;GAAA;EAAA,CAAA,UAAA;GAAA,IAAAC,QAAAC,QAAA;GAAAC,OAAAF,OAAAb,gBAMzBZ,KAAG;IAAA,IAACoB,OAAI;KAAA,OAAEQ,MAAMC,KAAK,EAAEvB,QAAQe,KAAK,CAAC;IAAC;IAAAL,WACnCc,GAAGC,UAAU;KAMb,MAAMM,OAHS9B,OAAO,CAAC,CACpB0B,MAAM,GAAGX,WAAW,CAAC,CAAC,CACtBY,QAAQC,OAAOC,QAAQD,QAAQC,KAAK,CAC1BJ,IAASD,MAAM;KAC5B,cAAA;MAAA,IAAAO,QAAAC,QAAA;MAAAZ,OAAAW,aAWKrB,MAAMuB,MAAMH,SAAS,EAAE;MAAAI,QAAAC,QAAA;OAAA,IAAAC,MATjBxC,GACL,8GACA,uDACA,mGACA,+DACF,GAACyC,OACY3B,MAAM4B,YAAYC,SAAST,IAAI,GAACU,OAC9BtC,MAAMuC;OAAQL,QAAAD,IAAAO,KAAAC,UAAAZ,OAAAI,IAAAO,IAAAN,GAAA;OAAAC,SAAAF,IAAAS,KAAAC,aAAAd,OAAA,eAAAI,IAAAS,IAAAP,IAAA;OAAAG,SAAAL,IAAAW,KAAAD,aAAAd,OAAA,iBAAAI,IAAAW,IAAAN,IAAA;OAAA,OAAAL;MAAA,GAAA;OAAAO,GAAAK,KAAAA;OAAAH,GAAAG,KAAAA;OAAAD,GAAAC,KAAAA;MAAA,CAAA;MAAA,OAAAhB;KAAA,EAAA,CAAA;IAKnC;GAAC,CAAA,CAAA;GAAA,OAAAb;EAAA,EAAA,CAAA,CAAA;CAIR,CAAA,CAAA,EAGN,CAAA,CAAA;AAGP;;;;;;;;AASA,SAAgB8B,cAAc9C,OAA+B;CAC3D,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA+C,QAAAC,QAAA;EAAAC,OAAAF,OAAA3C,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWV,GAAG,qDAAqDO,MAAMK,KAAK;EAAC,EAAA,GACvEJ,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA6C;CAAA,EAAA,CAAA;AAGd"}

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

@@ -0,0 +1,2 @@
+export { Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, itemVariants, type ItemProps, } from './item';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,eAAe,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAY,EACZ,KAAK,SAAS,GACf,MAAM,QAAQ,CAAA"}

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

@@ -0,0 +1,49 @@
+import type { ComponentProps, JSX } from 'solid-js';
+import { type VariantProps } from '#lib/variants';
+/**
+ * Item.
+ *
+ * The general row: a leading slot, a body, and a trailing slot. It is the shape
+ * almost every list in an application takes — a file, a member, a setting, a
+ * search result — and it exists as a component because a row is where inconsistency
+ * is most visible: twenty of them make any drift in height, padding or alignment
+ * obvious at a glance.
+ *
+ * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list
+ * of like things, sized by the row ladder and meant to be scanned down a column.
+ * `Item` is a self-contained block — it has a border, its own surface, an optional
+ * title and description — and is meant to stand alone or sit in a grid. A list uses
+ * `ListRow`; a search result or a settings card uses `Item`.
+ *
+ * `variant="outline"` and `"muted"` exist because the two questions a caller
+ * actually has are "does this need an edge" and "is it on the canvas or inset".
+ */
+export declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ItemVariantProps = VariantProps<typeof itemVariants>;
+export type ItemProps = ComponentProps<'div'> & ItemVariantProps & {
+    /** A media slot: an icon, an avatar, a thumbnail. */
+    media?: JSX.Element;
+    /** A trailing slot: a badge, a timestamp, a menu trigger. */
+    trailing?: JSX.Element;
+};
+export declare function Item(props: ItemProps): JSX.Element;
+export declare function ItemTitle(props: ComponentProps<'div'>): JSX.Element;
+export declare function ItemDescription(props: ComponentProps<'div'>): JSX.Element;
+/**
+ * A group of items with an optional heading. It is a real `role="list"` with
+ * `role="listitem"` children, so a screen reader reports the count — which is how a
+ * user knows how many results there are without counting them.
+ */
+export declare function ItemGroup(props: ComponentProps<'div'> & {
+    label?: string;
+    /** The list's accessible name. */ listLabel?: string;
+}): JSX.Element;
+/** An item inside an `ItemGroup`, which is what makes it a list item. */
+export declare function ItemGroupEntry(props: ItemProps): JSX.Element;
+/** A centred message for a group with nothing in it. */
+export declare function ItemEmpty(props: ComponentProps<'div'>): JSX.Element;
+export {};
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/item/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY;;;8EAgBvB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEzD,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAC3C,gBAAgB,GAAG;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAEH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAkCpC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAGrD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS3D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CACtD,eAgBF;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,eAE9C;AAED,wDAAwD;AACxD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASrD"}

package/dist/components/ui/item/item.js

@@ -0,0 +1,163 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/ui/item/item.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=item-media class="flex size-8 shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=item-trailing class="flex shrink-0 items-center gap-2">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=item><div data-slot=item-body class="flex min-w-0 flex-1 flex-col gap-0.5">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=item-title>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=item-description>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div class="text-muted-foreground text-2xs font-medium tracking-wide uppercase">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div data-slot=item-group><div role=list class="flex flex-col gap-2">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div data-slot=item-empty>`);
+/**
+* Item.
+*
+* The general row: a leading slot, a body, and a trailing slot. It is the shape
+* almost every list in an application takes — a file, a member, a setting, a
+* search result — and it exists as a component because a row is where inconsistency
+* is most visible: twenty of them make any drift in height, padding or alignment
+* obvious at a glance.
+*
+* The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list
+* of like things, sized by the row ladder and meant to be scanned down a column.
+* `Item` is a self-contained block — it has a border, its own surface, an optional
+* title and description — and is meant to stand alone or sit in a grid. A list uses
+* `ListRow`; a search result or a settings card uses `Item`.
+*
+* `variant="outline"` and `"muted"` exist because the two questions a caller
+* actually has are "does this need an edge" and "is it on the canvas or inset".
+*/
+var itemVariants = cva("flex w-full items-center gap-3 rounded-lg text-sm", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			/** On the canvas, with an edge — the search-result shape. */
+			outline: "border border-border bg-card",
+			/** Inset: a code well, a disabled row, a quoted message. */
+			muted: "bg-muted"
+		},
+		size: {
+			sm: "min-h-row-sm px-3 py-1.5",
+			md: "min-h-row-md px-3 py-2",
+			lg: "min-h-row-lg px-4 py-2.5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+function Item(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size",
+		"media",
+		"trailing",
+		"children"
+	]);
+	return (() => {
+		var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn(itemVariants({
+				variant: local.variant,
+				size: local.size
+			}), local.class);
+		} }, rest), false, true);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.media;
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, () => local.media);
+				return _el$2;
+			}
+		}), _el$3);
+		insert(_el$3, () => local.children);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.trailing;
+			},
+			get children() {
+				var _el$4 = _tmpl$2();
+				insert(_el$4, () => local.trailing);
+				return _el$4;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+function ItemTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$5 = _tmpl$4();
+		spread(_el$5, mergeProps({ get ["class"]() {
+			return cn("truncate font-medium", local.class);
+		} }, rest), false, false);
+		return _el$5;
+	})();
+}
+function ItemDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$6 = _tmpl$5();
+		spread(_el$6, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground line-clamp-2 text-xs text-pretty", local.class);
+		} }, rest), false, false);
+		return _el$6;
+	})();
+}
+/**
+* A group of items with an optional heading. It is a real `role="list"` with
+* `role="listitem"` children, so a screen reader reports the count — which is how a
+* user knows how many results there are without counting them.
+*/
+function ItemGroup(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"label",
+		"listLabel",
+		"children"
+	]);
+	return (() => {
+		var _el$7 = _tmpl$7(), _el$9 = _el$7.firstChild;
+		spread(_el$7, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-2", local.class);
+		} }, rest), false, true);
+		insert(_el$7, createComponent(Show, {
+			get when() {
+				return local.label;
+			},
+			get children() {
+				var _el$8 = _tmpl$6();
+				insert(_el$8, () => local.label);
+				return _el$8;
+			}
+		}), _el$9);
+		insert(_el$9, () => local.children);
+		effect(() => setAttribute(_el$9, "aria-label", local.listLabel ?? local.label));
+		return _el$7;
+	})();
+}
+/** An item inside an `ItemGroup`, which is what makes it a list item. */
+function ItemGroupEntry(props) {
+	return createComponent(Item, mergeProps({ role: "listitem" }, props));
+}
+/** A centred message for a group with nothing in it. */
+function ItemEmpty(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$0 = _tmpl$8();
+		spread(_el$0, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground py-6 text-center text-sm", local.class);
+		} }, rest), false, false);
+		return _el$0;
+	})();
+}
+//#endregion
+export { Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, itemVariants };
+
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":["ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","itemVariants","variants","variant","default","outline","muted","size","sm","md","lg","defaultVariants","ItemVariantProps","ItemProps","media","Element","trailing","Item","props","local","rest","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$4","_tmpl$2","ItemTitle","_el$5","_tmpl$4","ItemDescription","_el$6","_tmpl$5","ItemGroup","label","listLabel","_el$7","_tmpl$7","_el$9","_el$8","_tmpl$6","_$effect","_$setAttribute","ItemGroupEntry","role","ItemEmpty","_el$0","_tmpl$8","_$mergeProps","_$createComponent","_$setAttribute"],"sources":["../../../../src/components/ui/item/item.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Item.\n *\n * The general row: a leading slot, a body, and a trailing slot. It is the shape\n * almost every list in an application takes — a file, a member, a setting, a\n * search result — and it exists as a component because a row is where inconsistency\n * is most visible: twenty of them make any drift in height, padding or alignment\n * obvious at a glance.\n *\n * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list\n * of like things, sized by the row ladder and meant to be scanned down a column.\n * `Item` is a self-contained block — it has a border, its own surface, an optional\n * title and description — and is meant to stand alone or sit in a grid. A list uses\n * `ListRow`; a search result or a settings card uses `Item`.\n *\n * `variant=\"outline\"` and `\"muted\"` exist because the two questions a caller\n * actually has are \"does this need an edge\" and \"is it on the canvas or inset\".\n */\nexport const itemVariants = cva('flex w-full items-center gap-3 rounded-lg text-sm', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      /** On the canvas, with an edge — the search-result shape. */\n      outline: 'border border-border bg-card',\n      /** Inset: a code well, a disabled row, a quoted message. */\n      muted: 'bg-muted',\n    },\n    size: {\n      sm: 'min-h-row-sm px-3 py-1.5',\n      md: 'min-h-row-md px-3 py-2',\n      lg: 'min-h-row-lg px-4 py-2.5',\n    },\n  },\n  defaultVariants: { variant: 'default', size: 'md' },\n})\n\ntype ItemVariantProps = VariantProps<typeof itemVariants>\n\nexport type ItemProps = ComponentProps<'div'> &\n  ItemVariantProps & {\n    /** A media slot: an icon, an avatar, a thumbnail. */\n    media?: JSX.Element\n    /** A trailing slot: a badge, a timestamp, a menu trigger. */\n    trailing?: JSX.Element\n  }\n\nexport function Item(props: ItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'media',\n    'trailing',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"item\"\n      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      <Show when={local.media}>\n        <span\n          data-slot=\"item-media\"\n          class=\"flex size-8 shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.media}\n        </span>\n      </Show>\n      <div data-slot=\"item-body\" class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        {local.children}\n      </div>\n      <Show when={local.trailing}>\n        <span data-slot=\"item-trailing\" class=\"flex shrink-0 items-center gap-2\">\n          {local.trailing}\n        </span>\n      </Show>\n    </div>\n  )\n}\n\nexport function ItemTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"item-title\" class={cn('truncate font-medium', local.class)} {...rest} />\n}\n\nexport function ItemDescription(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-description\"\n      class={cn('text-muted-foreground line-clamp-2 text-xs text-pretty', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A group of items with an optional heading. It is a real `role=\"list\"` with\n * `role=\"listitem\"` children, so a screen reader reports the count — which is how a\n * user knows how many results there are without counting them.\n */\nexport function ItemGroup(\n  props: ComponentProps<'div'> & {\n    label?: string\n    /** The list's accessible name. */ listLabel?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'listLabel', 'children'])\n\n  return (\n    <div data-slot=\"item-group\" class={cn('flex flex-col gap-2', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-muted-foreground text-2xs font-medium tracking-wide uppercase\">\n          {local.label}\n        </div>\n      </Show>\n      <div role=\"list\" aria-label={local.listLabel ?? local.label} class=\"flex flex-col gap-2\">\n        {local.children}\n      </div>\n    </div>\n  )\n}\n\n/** An item inside an `ItemGroup`, which is what makes it a list item. */\nexport function ItemGroupEntry(props: ItemProps) {\n  return <Item role=\"listitem\" {...props} />\n}\n\n/** A centred message for a group with nothing in it. */\nexport function ItemEmpty(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-empty\"\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Kbd, KbdGroup } from './kbd';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/kbd/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA"}

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * Kbd.
+ *
+ * A keyboard key, in the order the user presses them. The element is a real
+ * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes
+ * a shortcut visually distinct from the sentence around it.
+ *
+ * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`
+ * needs a gap between them that is a layout concern, not punctuation.
+ */
+export declare function Kbd(props: ComponentProps<'kbd'>): import("solid-js").JSX.Element;
+export declare function KbdGroup(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/kbd/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;GASG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAe/C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUrD"}

package/dist/components/ui/kbd/kbd.js

@@ -0,0 +1,40 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/kbd/kbd.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<kbd data-slot=kbd>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=kbd-group>`);
+/**
+* Kbd.
+*
+* A keyboard key, in the order the user presses them. The element is a real
+* `<kbd>` so the semantics survive copy-paste, and the mono face is what makes
+* a shortcut visually distinct from the sentence around it.
+*
+* `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`
+* needs a gap between them that is a layout concern, not punctuation.
+*/
+function Kbd(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none", "in-data-[slot=br-tooltip-content]:bg-background/20 in-data-[slot=br-tooltip-content]:text-scrim-foreground in-data-[slot=br-tooltip-content]:border-transparent", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+function KbdGroup(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("inline-flex items-center gap-1", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+//#endregion
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":["ComponentProps","splitProps","cn","Kbd","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","KbdGroup","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Kbd.\n *\n * A keyboard key, in the order the user presses them. The element is a real\n * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes\n * a shortcut visually distinct from the sentence around it.\n *\n * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`\n * needs a gap between them that is a layout concern, not punctuation.\n */\nexport function Kbd(props: ComponentProps<'kbd'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      class={cn(\n        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',\n        /* Inside a hover/selected row the key needs to recede with the row. */\n        'in-data-[slot=br-tooltip-content]:bg-background/20 in-data-[slot=br-tooltip-content]:text-scrim-foreground in-data-[slot=br-tooltip-content]:border-transparent',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function KbdGroup(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <span\n      data-slot=\"kbd-group\"\n      class={cn('inline-flex items-center gap-1', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,SAAgBG,IAAIC,OAA8B;CAChD,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,gMAEA,mKACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBK,SAASR,OAA+B;CACtD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,kCAAkCG,MAAMM,KAAK;EAAC,EAAA,GACpDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}

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

@@ -0,0 +1,2 @@
+export { Label } from './label';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * Label.
+ *
+ * A plain `<label>` rather than a Kobalte control. Kobalte has no standalone
+ * label primitive — its labels are parts of `TextField`, `Checkbox` and
+ * friends, and those parts carry the association wiring for *their* control.
+ * A free-standing label has to be the real element so the browser's native
+ * `for` → control association, click-to-focus, and `aria-labelledby` all keep
+ * working.
+ *
+ * Use the compound controls' own labels (`Switch.Label`, `Checkbox.Label`) when
+ * the label belongs to one of them; use this one for an `Input` or `Textarea`,
+ * which are plain elements with no wrapper.
+ */
+export declare function Label(props: ComponentProps<'label'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,kCAiBnD"}