@adea-ai/ui 0.60.4 → 0.61.1

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

@@ -0,0 +1,145 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/ui/entity-icon/entity-icon.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class="absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span role=img>`);
+/**
+* EntityIcon.
+*
+* A tile that stands for a thing: a room, a project, an agent, an installed
+* plugin, a workspace. Its job is to be identifiable in a column of its
+* siblings, which is a different job from `Avatar`'s (identifying a *person*) and
+* the reason the two are separate components rather than one with a `round` prop.
+*
+* Three decisions are baked in because getting them wrong is what makes icon
+* grids look messy:
+*
+* 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
+*    empty box. `fallback` takes the name and returns the glyph, so a caller can
+*    choose initials, a domain letter, or a kind icon.
+* 2. **The tile owns its own contrast.** `tone` tints the background and the
+*    glyph together, so a caller never picks a colour pair and never ships an
+*    icon that disappears against its tile.
+* 3. **Size is on the control ladder**, not arbitrary. A tile in a rail and a
+*    tile in a detail header are the same two or three sizes every other
+*    interactive element uses.
+*
+* `shape="rounded"` is the default because a rounded square reads as an object
+* and a circle reads as a person; use `circle` only when the tile really does
+* hold a face.
+*/
+var entityIconVariants = cva("relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		shape: {
+			rounded: "rounded-lg",
+			circle: "rounded-full",
+			square: "rounded-none"
+		},
+		size: {
+			xs: "size-5 text-2xs [&_svg]:size-3",
+			sm: "size-6 text-2xs [&_svg]:size-3.5",
+			md: "size-8 text-xs [&_svg]:size-4",
+			lg: "size-10 text-sm [&_svg]:size-5",
+			xl: "size-12 text-base [&_svg]:size-6"
+		},
+		tone: {
+			/** Neutral: an inset tile with a hairline edge — the default. */
+			neutral: "border-border bg-muted text-muted-foreground",
+			/** On the brand: for a thing the application itself owns. */
+			primary: "border-transparent bg-primary-subtle text-primary",
+			/** Bare: no fill and no edge, for a tile that already sits on a surface. */
+			bare: "border-transparent bg-transparent text-foreground",
+			success: "border-transparent bg-success-subtle text-success",
+			warning: "border-transparent bg-warning-subtle text-warning",
+			danger: "border-transparent bg-destructive-subtle text-destructive",
+			info: "border-transparent bg-info-subtle text-info"
+		}
+	},
+	defaultVariants: {
+		shape: "rounded",
+		size: "md",
+		tone: "neutral"
+	}
+});
+/**
+* Two letters from a name, chosen so the result is stable and readable: the
+* first letter of the first two words when there are two ("Agent HQ" → "AH"),
+* otherwise the first two characters ("Kitchen" → "Ki").
+*/
+function monogram(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+	return name.trim().slice(0, 2);
+}
+function Glyph(props) {
+	return props.glyph.kind === "component" ? createComponent(Dynamic, { get component() {
+		return props.glyph.value;
+	} }) : props.glyph.value;
+}
+function EntityIcon(props) {
+	const [local, rest] = splitProps(props, [
+		"name",
+		"icon",
+		"fallback",
+		"badge",
+		"ring",
+		"shape",
+		"size",
+		"tone",
+		"class"
+	]);
+	const glyph = () => {
+		const icon = local.icon;
+		if (!icon) return void 0;
+		return typeof icon === "function" ? {
+			kind: "component",
+			value: icon
+		} : {
+			kind: "element",
+			value: icon
+		};
+	};
+	return (() => {
+		var _el$ = _tmpl$2();
+		spread(_el$, mergeProps({
+			get ["class"]() {
+				return cn(entityIconVariants({
+					shape: local.shape,
+					size: local.size,
+					tone: local.tone
+				}), local.ring && "ring-2 ring-ring ring-offset-2 ring-offset-background", local.class);
+			},
+			get ["aria-label"]() {
+				return local.name;
+			}
+		}, rest), false, true);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return glyph();
+			},
+			get fallback() {
+				return memo(() => !!local.fallback)() ? local.fallback(local.name) : monogram(local.name);
+			},
+			children: (value) => createComponent(Glyph, { get glyph() {
+				return value();
+			} })
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.badge;
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, () => local.badge);
+				return _el$2;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+//#endregion
+export { EntityIcon, entityIconVariants, monogram };
+
+//# sourceMappingURL=entity-icon.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { EntityIcon, entityIconVariants, monogram, type EntityIconProps } from './entity-icon';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,39 @@
+import { TextField as KobalteTextField } from '@kobalte/core/text-field';
+import type { ComponentProps } from 'solid-js';
+/**
+ * Field.
+ *
+ * The wrapper that makes a form control describable and validatable: a label,
+ * a description, an error message, and the ARIA relationships between them.
+ *
+ * It is built on Kobalte's TextField specifically so `aria-describedby`,
+ * `aria-invalid` and `aria-errormessage` are wired by construction. Those three
+ * attributes are the difference between "this field is required and empty" and
+ * a red border that only a sighted user can perceive — and they are also the
+ * first thing a hand-rolled form drops.
+ *
+ * `Field` owns the description and the error slot, so a form's controls line up
+ * and its messages land in the same place regardless of which control is used.
+ * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.
+ */
+export declare function Field(props: ComponentProps<typeof KobalteTextField>): import("solid-js").JSX.Element;
+export declare function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>): import("solid-js").JSX.Element;
+export declare function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>): import("solid-js").JSX.Element;
+export declare function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>): import("solid-js").JSX.Element;
+export declare function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>): import("solid-js").JSX.Element;
+export declare function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>): import("solid-js").JSX.Element;
+/**
+ * A labelled group of fields with a single legend, for a real `<fieldset>`.
+ * Grouping is what lets a screen reader announce "Shipping address, group"
+ * before reading the four fields inside it.
+ */
+export declare function FieldSet(props: ComponentProps<'fieldset'>): import("solid-js").JSX.Element;
+export declare function FieldLegend(props: ComponentProps<'legend'> & {
+    variant?: 'legend' | 'label';
+}): import("solid-js").JSX.Element;
+/** A horizontal rule with a word in it, for "or continue with" separators. */
+export declare function FieldSeparator(props: {
+    class?: string;
+    children?: ComponentProps<'span'>['children'];
+}): import("solid-js").JSX.Element;
+//# sourceMappingURL=field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGnE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,kCAK9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,WAAW,CAAC,kCAQ1F;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,YAAY,CAAC,kCAKrF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,kCAiB9E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,kCAiBpF;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,kCAGzD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,kCAc7F;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAA;CAC9C,kCAYA"}

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

@@ -0,0 +1,111 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+import { TextField } from "@kobalte/core/text-field";
+//#region src/components/ui/field/field.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<fieldset>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<legend>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class="text-muted-foreground text-2xs tracking-wide uppercase">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div><span class="bg-border h-px flex-1"></span><span class="bg-border h-px flex-1">`);
+/**
+* Field.
+*
+* The wrapper that makes a form control describable and validatable: a label,
+* a description, an error message, and the ARIA relationships between them.
+*
+* It is built on Kobalte's TextField specifically so `aria-describedby`,
+* `aria-invalid` and `aria-errormessage` are wired by construction. Those three
+* attributes are the difference between "this field is required and empty" and
+* a red border that only a sighted user can perceive — and they are also the
+* first thing a hand-rolled form drops.
+*
+* `Field` owns the description and the error slot, so a form's controls line up
+* and its messages land in the same place regardless of which control is used.
+* Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.
+*/
+function Field(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(TextField, mergeProps({ get ["class"]() {
+		return cn("flex flex-col gap-1.5", local.class);
+	} }, rest));
+}
+function FieldLabel(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(TextField.Label, mergeProps({ get ["class"]() {
+		return cn("text-sm leading-none font-medium", local.class);
+	} }, rest));
+}
+function FieldDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(TextField.Description, mergeProps({ get ["class"]() {
+		return cn("text-muted-foreground text-sm", local.class);
+	} }, rest));
+}
+function FieldError(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(TextField.ErrorMessage, mergeProps({ get ["class"]() {
+		return cn("text-destructive text-sm", local.class);
+	} }, rest));
+}
+function FieldInput(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(TextField.Input, mergeProps({ get ["class"]() {
+		return cn("h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "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", local.class);
+	} }, rest));
+}
+function FieldTextArea(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(TextField.TextArea, mergeProps({ get ["class"]() {
+		return cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none resize-y", "placeholder:text-muted-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", local.class);
+	} }, rest));
+}
+/**
+* A labelled group of fields with a single legend, for a real `<fieldset>`.
+* Grouping is what lets a screen reader announce "Shipping address, group"
+* before reading the four fields inside it.
+*/
+function FieldSet(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-4", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+function FieldLegend(props) {
+	const [local, rest] = splitProps(props, ["class", "variant"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("mb-1", local.variant === "label" ? "text-sm font-medium" : "text-base font-semibold tracking-tight", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+/** A horizontal rule with a word in it, for "or continue with" separators. */
+function FieldSeparator(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$3 = _tmpl$4(), _el$6 = _el$3.firstChild.nextSibling;
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("relative flex items-center gap-3 py-1", local.class);
+		} }, rest), false, true);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return local.children;
+			},
+			get children() {
+				var _el$5 = _tmpl$3();
+				insert(_el$5, () => local.children);
+				return _el$5;
+			}
+		}), _el$6);
+		return _el$3;
+	})();
+}
+//#endregion
+export { Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea };
+
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":["TextField","KobalteTextField","ComponentProps","Show","splitProps","cn","Field","props","local","rest","_$createComponent","_$mergeProps","class","FieldLabel","Label","FieldDescription","Description","FieldError","ErrorMessage","FieldInput","Input","FieldTextArea","TextArea","FieldSet","_el$","_tmpl$","_$spread","FieldLegend","variant","_el$2","_tmpl$2","FieldSeparator","children","_el$3","_tmpl$4","_el$4","firstChild","_el$6","nextSibling","_$insert","when","_el$5","_tmpl$3","_$createComponent","KobalteTextField","_$mergeProps"],"sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["import { TextField as KobalteTextField } from '@kobalte/core/text-field'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Field.\n *\n * The wrapper that makes a form control describable and validatable: a label,\n * a description, an error message, and the ARIA relationships between them.\n *\n * It is built on Kobalte's TextField specifically so `aria-describedby`,\n * `aria-invalid` and `aria-errormessage` are wired by construction. Those three\n * attributes are the difference between \"this field is required and empty\" and\n * a red border that only a sighted user can perceive — and they are also the\n * first thing a hand-rolled form drops.\n *\n * `Field` owns the description and the error slot, so a form's controls line up\n * and its messages land in the same place regardless of which control is used.\n * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.\n */\nexport function Field(props: ComponentProps<typeof KobalteTextField>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />\n}\n\nexport function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTextField.ErrorMessage class={cn('text-destructive text-sm', local.class)} {...rest} />\n  )\n}\n\nexport function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteTextField.Input\n      class={cn(\n        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none',\n        'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteTextField.TextArea\n      class={cn(\n        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none resize-y',\n        'placeholder:text-muted-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A labelled group of fields with a single legend, for a real `<fieldset>`.\n * Grouping is what lets a screen reader announce \"Shipping address, group\"\n * before reading the four fields inside it.\n */\nexport function FieldSet(props: ComponentProps<'fieldset'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\nexport function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  const [local, rest] = splitProps(props, ['class', 'variant'])\n  return (\n    <legend\n      class={cn(\n        'mb-1',\n        local.variant === 'label'\n          ? 'text-sm font-medium'\n          : 'text-base font-semibold tracking-tight',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A horizontal rule with a word in it, for \"or continue with\" separators. */\nexport function FieldSeparator(props: {\n  class?: string\n  children?: ComponentProps<'span'>['children']\n}) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <div class={cn('relative flex items-center gap-3 py-1', local.class)} {...rest}>\n      <span class=\"bg-border h-px flex-1\" />\n      <Show when={local.children}>\n        <span class=\"text-muted-foreground text-2xs tracking-wide uppercase\">{local.children}</span>\n      </Show>\n      <span class=\"bg-border h-px flex-1\" />\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, } from './field';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/ui/hover-card/hover-card.d.ts

@@ -0,0 +1,17 @@
+import { HoverCard as KobalteHoverCard } from '@kobalte/core/hover-card';
+import type { ComponentProps } from 'solid-js';
+/**
+ * HoverCard.
+ *
+ * A rich preview shown on hover: a user's profile, a file's summary, a link's
+ * destination. The difference from Tooltip is that this may be hovered *into*
+ * — the pointer can leave the trigger, cross the gap, and read the card.
+ *
+ * Because it only opens on hover, its content must also be reachable another
+ * way (clicking the trigger, for instance). A hover card that holds the only
+ * route to something is unreachable by keyboard and by touch.
+ */
+export declare function HoverCard(props: ComponentProps<typeof KobalteHoverCard>): import("solid-js").JSX.Element;
+export declare function HoverCardTrigger(props: ComponentProps<typeof KobalteHoverCard.Trigger>): import("solid-js").JSX.Element;
+export declare function HoverCardContent(props: ComponentProps<typeof KobalteHoverCard.Content>): import("solid-js").JSX.Element;
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/ui/hover-card/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAEvE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAEtF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAsBtF"}

package/dist/components/ui/hover-card/hover-card.js

@@ -0,0 +1,40 @@
+import { cn } from "../../../lib/utils.js";
+import { overlaySurface, popoverArrow } from "../../../lib/overlay.js";
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { HoverCard } from "@kobalte/core/hover-card";
+//#region src/components/ui/hover-card/hover-card.tsx
+/**
+* HoverCard.
+*
+* A rich preview shown on hover: a user's profile, a file's summary, a link's
+* destination. The difference from Tooltip is that this may be hovered *into*
+* — the pointer can leave the trigger, cross the gap, and read the card.
+*
+* Because it only opens on hover, its content must also be reachable another
+* way (clicking the trigger, for instance). A hover card that holds the only
+* route to something is unreachable by keyboard and by touch.
+*/
+function HoverCard$1(props) {
+	return createComponent(HoverCard, props);
+}
+function HoverCardTrigger(props) {
+	return createComponent(HoverCard.Trigger, props);
+}
+function HoverCardContent(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(HoverCard.Portal, { get children() {
+		return createComponent(HoverCard.Content, mergeProps({ get ["class"]() {
+			return cn(overlaySurface, "z-(--z-menu) w-64 p-3", "origin-(--kb-hover-card-content-transform-origin)", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", local.class);
+		} }, rest, { get children() {
+			return [memo(() => local.children), createComponent(HoverCard.Arrow, {
+				"aria-hidden": "true",
+				"class": popoverArrow
+			})];
+		} }));
+	} });
+}
+//#endregion
+export { HoverCard$1 as HoverCard, HoverCardContent, HoverCardTrigger };
+
+//# sourceMappingURL=hover-card.js.map

package/dist/components/ui/hover-card/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","names":["HoverCard","KobalteHoverCard","ComponentProps","splitProps","overlaySurface","popoverArrow","cn","props","_$createComponent","HoverCardTrigger","Trigger","HoverCardContent","Content","local","rest","Portal","children","_$mergeProps","class","_$memo","Arrow","HoverCard","_$createComponent","KobalteHoverCard","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/hover-card/hover-card.tsx"],"sourcesContent":["import { HoverCard as KobalteHoverCard } from '@kobalte/core/hover-card'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { overlaySurface, popoverArrow } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * HoverCard.\n *\n * A rich preview shown on hover: a user's profile, a file's summary, a link's\n * destination. The difference from Tooltip is that this may be hovered *into*\n * — the pointer can leave the trigger, cross the gap, and read the card.\n *\n * Because it only opens on hover, its content must also be reachable another\n * way (clicking the trigger, for instance). A hover card that holds the only\n * route to something is unreachable by keyboard and by touch.\n */\nexport function HoverCard(props: ComponentProps<typeof KobalteHoverCard>) {\n  return <KobalteHoverCard {...props} />\n}\n\nexport function HoverCardTrigger(props: ComponentProps<typeof KobalteHoverCard.Trigger>) {\n  return <KobalteHoverCard.Trigger {...props} />\n}\n\nexport function HoverCardContent(props: ComponentProps<typeof KobalteHoverCard.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteHoverCard.Portal>\n      <KobalteHoverCard.Content\n        class={cn(\n          overlaySurface,\n          'z-(--z-menu) w-64 p-3',\n          'origin-(--kb-hover-card-content-transform-origin)',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <KobalteHoverCard.Arrow aria-hidden=\"true\" class={popoverArrow} />\n      </KobalteHoverCard.Content>\n    </KobalteHoverCard.Portal>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgBA,YAAUO,OAAgD;CACxE,OAAAC,gBAAQP,WAAqBM,KAAK;AACpC;AAEA,SAAgBE,iBAAiBF,OAAwD;CACvF,OAAAC,gBAAQP,UAAiBS,SAAYH,KAAK;AAC5C;AAEA,SAAgBI,iBAAiBJ,OAAwD;CACvF,MAAM,CAACM,OAAOC,QAAQX,WAAWI,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAC,gBACGP,UAAiBc,QAAM,EAAA,IAAAC,WAAA;EAAA,OAAAR,gBACrBP,UAAiBW,SAAOK,WAAA,EAAA,KAAA,WAAA;GAAA,OAChBX,GACLF,gBACA,yBACA,qDACA,6EACA,0EACA,uDACAS,MAAMK,KACR;EAAC,EAAA,GACGJ,MAAI,EAAA,IAAAE,WAAA;GAAA,OAAA,CAAAG,WAEPN,MAAMG,QAAQ,GAAAR,gBACdP,UAAiBmB,OAAK;IAAA,eAAA;IAAA,SAA2Bf;GAAY,CAAA,CAAA;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA;AAItE"}

package/dist/components/ui/hover-card/index.d.ts

@@ -0,0 +1,2 @@
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/hover-card/index.d.ts.map

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * Input.
+ *
+ * Deliberately a plain `<input>` rather than a Kobalte TextField part. The
+ * styling contract is what a consumer needs from an input; validation,
+ * description and error wiring come from `Field`, which composes this. Keeping
+ * them separate is what lets an input sit inside a custom control without
+ * inheriting a form's ARIA graph.
+ *
+ * Height comes from `h-control-md`; an input cannot be given a new height
+ * without a new token, which is what keeps it aligned with Button and Select.
+ */
+export declare function Input(props: ComponentProps<'input'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=input.d.ts.map

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

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

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

@@ -0,0 +1,36 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/input/input.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<input data-slot=input>`);
+/**
+* Input.
+*
+* Deliberately a plain `<input>` rather than a Kobalte TextField part. The
+* styling contract is what a consumer needs from an input; validation,
+* description and error wiring come from `Field`, which composes this. Keeping
+* them separate is what lets an input sit inside a custom control without
+* inheriting a form's ARIA graph.
+*
+* Height comes from `h-control-md`; an input cannot be given a new height
+* without a new token, which is what keeps it aligned with Button and Select.
+*/
+function Input(props) {
+	const [local, rest] = splitProps(props, ["class", "type"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get type() {
+				return local.type ?? "text";
+			},
+			get ["class"]() {
+				return cn("h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "placeholder:text-muted-foreground", "selection:bg-primary selection:text-primary-foreground", "file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "read-only:bg-surface-hover", local.class);
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["ComponentProps","splitProps","cn","Input","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","type","class","_$mergeProps"],"sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Input.\n *\n * Deliberately a plain `<input>` rather than a Kobalte TextField part. The\n * styling contract is what a consumer needs from an input; validation,\n * description and error wiring come from `Field`, which composes this. Keeping\n * them separate is what lets an input sit inside a custom control without\n * inheriting a form's ARIA graph.\n *\n * Height comes from `h-control-md`; an input cannot be given a new height\n * without a new token, which is what keeps it aligned with Button and Select.\n */\nexport function Input(props: ComponentProps<'input'>) {\n  const [local, rest] = splitProps(props, ['class', 'type'])\n\n  return (\n    <input\n      data-slot=\"input\"\n      type={local.type ?? 'text'}\n      class={cn(\n        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',\n        'transition-[color,box-shadow,border-color] ease-out outline-none',\n        'placeholder:text-muted-foreground',\n        'selection:bg-primary selection:text-primary-foreground',\n        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',\n        /* A pointer click on a text field is a typing affordance, so the ring\n           appears where the user agent already matches :focus-visible. */\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        'read-only:bg-surface-hover',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,SAAgBG,MAAMC,OAAgC;CACpD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,SAAS,MAAM,CAAC;CAEzD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA;GAAA,IAGIC,OAAI;IAAA,OAAEN,MAAMM,QAAQ;GAAM;GAAA,KAAA,WAAA;IAAA,OACnBT,GACL,wGACA,oEACA,qCACA,0DACA,kHAGA,oFACA,4FACA,gFACA,8BACAG,MAAMO,KACR;GAAC;EAAA,GACGN,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd"}

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

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

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

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

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

@@ -0,0 +1,34 @@
+import type { ComponentProps, JSX } from 'solid-js';
+/**
+ * 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.
+ */
+export declare function InputGroup(props: ComponentProps<'div'>): JSX.Element;
+export declare function InputGroupInput(props: ComponentProps<'input'>): JSX.Element;
+export type InputGroupAddonProps = ComponentProps<'span'> & {
+    /** Which edge the adornment sits on; also sets the pointer-events rule. */
+    align?: 'start' | 'end';
+};
+/**
+ * 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.
+ */
+export declare function InputGroupAddon(props: InputGroupAddonProps): JSX.Element;
+/** A clickable trailing button, sized to the group's height. */
+export declare function InputGroupButton(props: ComponentProps<'button'>): JSX.Element;
+/** Text that reads as a value but is not an input, e.g. a unit or a suffix. */
+export declare function InputGroupText(props: ComponentProps<'span'> & {
+    children?: JSX.Element;
+}): JSX.Element;
+//# sourceMappingURL=input-group.d.ts.map

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

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