@nocoo/basalt 2.0.0-rc.1

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,38 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+export type DropdownMenuProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, "open" | "defaultOpen" | "onOpenChange"> & {
+    /**
+     * The controlled open state.
+     */
+    open?: boolean;
+    /**
+     * The uncontrolled initial open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, "disabled"> & {
+    /**
+     * Disable the menu item.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "disabled"> & {
+    /**
+     * Disable the menu item.
+     * @default false
+     */
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dropdown-menu.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { overlayItemClass as t, overlayPanelClass as n } from "./overlay.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dropdown-menu";
+//#region src/components/dropdown-menu.tsx
+var o = a.Root, s = a.Trigger, c = a.Group, l = a.Portal, u = a.Sub, d = a.RadioGroup, f = r.forwardRef(({ className: t, sideOffset: r = 8, ...o }, s) => /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Content, {
+	ref: s,
+	sideOffset: r,
+	className: n(e("min-w-40", t)),
+	...o
+}) }));
+f.displayName = a.Content.displayName;
+var p = r.forwardRef(({ className: n, ...r }, o) => /* @__PURE__ */ i(a.Item, {
+	ref: o,
+	className: t(e("relative outline-hidden focus:bg-basalt-accent data-disabled:pointer-events-none data-disabled:opacity-50", n)),
+	...r
+}));
+p.displayName = a.Item.displayName;
+//#endregion
+export { o as DropdownMenu, f as DropdownMenuContent, c as DropdownMenuGroup, p as DropdownMenuItem, l as DropdownMenuPortal, d as DropdownMenuRadioGroup, u as DropdownMenuSub, s as DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type DropdownMenuProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>,\n\t\"open\" | \"defaultOpen\" | \"onOpenChange\"\n> & {\n\t/**\n\t * The controlled open state.\n\t */\n\topen?: boolean;\n\t/**\n\t * The uncontrolled initial open state.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n};\nexport const DropdownMenu: React.FC<DropdownMenuProps> = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuContent = React.forwardRef<\n\tReact.ElementRef<typeof DropdownMenuPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nexport type DropdownMenuItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,\n\t\"disabled\"\n> & {\n\t/**\n\t * Disable the menu item.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const DropdownMenuItem = React.forwardRef<\n\tReact.ElementRef<typeof DropdownMenuPrimitive.Item>,\n\tDropdownMenuItemProps\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden focus:bg-basalt-accent data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n"],"mappings":";;;;;;;AAuBA,IAAa,IAA4C,EAAsB,MAClE,IAAsB,EAAsB,SAC5C,IAAoB,EAAsB,OAC1C,IAAqB,EAAsB,QAC3C,IAAkB,EAAsB,KACxC,IAAyB,EAAsB,YAE/C,IAAsB,EAAM,YAGtC,EAAE,cAAW,gBAAA,GAAuB,GAAG,KAAS,MAClD,kBAAC,EAAsB,QAAvB,EAAA,UACC,kBAAC,EAAsB,SAAvB;CACM;CACO;CACZ,WAAW,EAAkB,EAAG,YAAY,CAAS,CAAC;CACtD,GAAI;AACJ,CAAA,EAC4B,CAAA,CAC9B;AACD,EAAoB,cAAc,EAAsB,QAAQ;AAahE,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAsB,MAAvB;CACM;CACL,WAAW,EACV,EACC,6GACA,CACD,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAsB,KAAK"}

package/dist/components/empty.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare function Empty({ title, description, icon, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/empty.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/empty.tsx
+function r({ title: r = "No results", description: i, icon: a, className: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("flex flex-col items-center gap-2 text-center", o),
+		...s,
+		children: [
+			a ? /* @__PURE__ */ t("div", {
+				className: "text-basalt-muted-foreground [&_svg]:size-8",
+				children: a
+			}) : null,
+			/* @__PURE__ */ t("p", {
+				className: "text-sm font-medium text-basalt-foreground",
+				children: r
+			}),
+			i ? /* @__PURE__ */ t("p", {
+				className: "text-xs text-basalt-muted-foreground",
+				children: i
+			}) : null
+		]
+	});
+}
+//#endregion
+export { r as Empty };
+
+//# sourceMappingURL=empty.js.map

package/dist/components/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","names":[],"sources":["../../src/components/empty.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport function Empty({\n\ttitle = \"No results\",\n\tdescription,\n\ticon,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & { title?: string; description?: string; icon?: ReactNode }) {\n\treturn (\n\t\t<div className={cn(\"flex flex-col items-center gap-2 text-center\", className)} {...props}>\n\t\t\t{icon ? <div className=\"text-basalt-muted-foreground [&_svg]:size-8\">{icon}</div> : null}\n\t\t\t<p className=\"text-sm font-medium text-basalt-foreground\">{title}</p>\n\t\t\t{description ? <p className=\"text-xs text-basalt-muted-foreground\">{description}</p> : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAGA,SAAgB,EAAM,EACrB,WAAQ,cACR,gBACA,SACA,cACA,GAAG,KAC4F;CAC/F,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,gDAAgD,CAAS;EAAG,GAAI;EAAnF,UAAA;GACE,IAAO,kBAAC,OAAD;IAAK,WAAU;IAA+C,UAAA;GAAU,CAAA,IAAI;GACpF,kBAAC,KAAD;IAAG,WAAU;IAA8C,UAAA;GAAS,CAAA;GACnE,IAAc,kBAAC,KAAD;IAAG,WAAU;IAAwC,UAAA;GAAe,CAAA,IAAI;EACnF;;AAEP"}

package/dist/components/field.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type FieldError = Exclude<React.ReactNode, undefined> | {
+    message: React.ReactNode;
+};
+export interface FieldProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className"> {
+    /**
+     * Visible label.
+     */
+    label: React.ReactNode;
+    /**
+     * Associates the label and described-by ids.
+     */
+    htmlFor?: string;
+    /**
+     * Supporting text when there is no error.
+     */
+    hint?: React.ReactNode;
+    /**
+     * Replaces the hint and marks the control invalid.
+     */
+    error?: FieldError;
+    /**
+     * When false, show (optional) after the label.
+     */
+    required?: boolean;
+    /**
+     * Info icon with hover text on the label.
+     */
+    labelTooltip?: React.ReactNode;
+    /**
+     * Additional classes for the field root.
+     */
+    className?: string;
+    /**
+     * The control or content to render.
+     */
+    children: React.ReactNode;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/field.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Label as t } from "./label.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/field.tsx
+function a(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e) && !n.isValidElement(e) && "message" in e;
+}
+function o(e) {
+	if (e != null) return a(e) ? e.message : e;
+}
+function s(e) {
+	return !!e;
+}
+var c = n.forwardRef(({ label: a, htmlFor: c, hint: l, error: u, required: d, labelTooltip: f, className: p, children: m, ...h }, g) => {
+	let _ = n.useId(), v = n.isValidElement(m) ? m : null, y = v ? c ?? v.props.id ?? _ : c, b = y ? `${y}-hint` : void 0, x = y ? `${y}-error` : void 0, S = o(u), C = s(S), w = [[C ? x : null, !C && l ? b : null].filter(Boolean).join(" "), v?.props["aria-describedby"]].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i("div", {
+		ref: g,
+		...h,
+		className: e("flex flex-col gap-1.5", p),
+		children: [
+			/* @__PURE__ */ r(t, {
+				htmlFor: y,
+				showOptional: d === !1,
+				tooltip: f,
+				children: a
+			}),
+			v ? n.cloneElement(v, {
+				id: y,
+				"aria-invalid": C ? !0 : v.props["aria-invalid"],
+				"aria-describedby": w || void 0
+			}) : m,
+			l && !C ? /* @__PURE__ */ r("p", {
+				id: b,
+				className: "text-xs text-basalt-muted-foreground",
+				children: l
+			}) : null,
+			C ? /* @__PURE__ */ r("p", {
+				id: x,
+				className: "text-xs text-basalt-destructive",
+				role: "alert",
+				children: S
+			}) : null
+		]
+	});
+});
+c.displayName = "Field";
+//#endregion
+export { c as Field };
+
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Label } from \"./label\";\n\nexport type FieldError = Exclude<React.ReactNode, undefined> | { message: React.ReactNode };\n\ntype FieldControlProps = {\n\tid?: string;\n\t\"aria-describedby\"?: string;\n\t\"aria-invalid\"?: boolean | \"true\" | \"false\";\n};\n\nexport interface FieldProps\n\textends Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"className\"> {\n\t/**\n\t * Visible label.\n\t */\n\tlabel: React.ReactNode;\n\t/**\n\t * Associates the label and described-by ids.\n\t */\n\thtmlFor?: string;\n\t/**\n\t * Supporting text when there is no error.\n\t */\n\thint?: React.ReactNode;\n\t/**\n\t * Replaces the hint and marks the control invalid.\n\t */\n\terror?: FieldError;\n\t/**\n\t * When false, show (optional) after the label.\n\t */\n\trequired?: boolean;\n\t/**\n\t * Info icon with hover text on the label.\n\t */\n\tlabelTooltip?: React.ReactNode;\n\t/**\n\t * Additional classes for the field root.\n\t */\n\tclassName?: string;\n\t/**\n\t * The control or content to render.\n\t */\n\tchildren: React.ReactNode;\n}\n\nfunction isStructuredError(error: FieldError): error is { message: React.ReactNode } {\n\treturn (\n\t\ttypeof error === \"object\" &&\n\t\terror !== null &&\n\t\t!Array.isArray(error) &&\n\t\t!React.isValidElement(error) &&\n\t\t\"message\" in error\n\t);\n}\n\nfunction fieldErrorMessage(error: FieldError | undefined): React.ReactNode | undefined {\n\tif (error == null) {\n\t\treturn undefined;\n\t}\n\treturn isStructuredError(error) ? error.message : error;\n}\n\nfunction hasFieldError(message: React.ReactNode | undefined): boolean {\n\treturn Boolean(message);\n}\n\nexport const Field = React.forwardRef<HTMLDivElement, FieldProps>(\n\t({ label, htmlFor, hint, error, required, labelTooltip, className, children, ...props }, ref) => {\n\t\tconst generatedId = React.useId();\n\t\tconst child = React.isValidElement(children)\n\t\t\t? (children as React.ReactElement<FieldControlProps>)\n\t\t\t: null;\n\t\tconst controlId = child ? (htmlFor ?? child.props.id ?? generatedId) : htmlFor;\n\t\tconst hintId = controlId ? `${controlId}-hint` : undefined;\n\t\tconst errorId = controlId ? `${controlId}-error` : undefined;\n\t\tconst errorMessage = fieldErrorMessage(error);\n\t\tconst hasError = hasFieldError(errorMessage);\n\t\tconst describedBy = [hasError ? errorId : null, !hasError && hint ? hintId : null]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\tconst mergedDescribedBy = [describedBy, child?.props[\"aria-describedby\"]]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\t\treturn (\n\t\t\t<div ref={ref} {...props} className={cn(\"flex flex-col gap-1.5\", className)}>\n\t\t\t\t<Label htmlFor={controlId} showOptional={required === false} tooltip={labelTooltip}>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t\t{child\n\t\t\t\t\t? React.cloneElement(child, {\n\t\t\t\t\t\t\tid: controlId,\n\t\t\t\t\t\t\t\"aria-invalid\": hasError ? true : child.props[\"aria-invalid\"],\n\t\t\t\t\t\t\t\"aria-describedby\": mergedDescribedBy || undefined,\n\t\t\t\t\t\t})\n\t\t\t\t\t: children}\n\t\t\t\t{hint && !hasError ? (\n\t\t\t\t\t<p id={hintId} className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t{hint}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t{hasError ? (\n\t\t\t\t\t<p id={errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t{errorMessage}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t);\n\t},\n);\nField.displayName = \"Field\";\n"],"mappings":";;;;;;AAgDA,SAAS,EAAkB,GAA0D;CACpF,OACC,OAAO,KAAU,cACjB,KACA,CAAC,MAAM,QAAQ,CAAK,KACpB,CAAC,EAAM,eAAe,CAAK,KAC3B,aAAa;AAEf;AAEA,SAAS,EAAkB,GAA4D;CAClF,SAAS,MAGb,OAAO,EAAkB,CAAK,IAAI,EAAM,UAAU;AACnD;AAEA,SAAS,EAAc,GAA+C;CACrE,OAAO,EAAQ;AAChB;AAEA,IAAa,IAAQ,EAAM,YACzB,EAAE,UAAO,YAAS,SAAM,UAAO,aAAU,iBAAc,cAAW,aAAU,GAAG,KAAS,MAAQ;CAChG,IAAM,IAAc,EAAM,MAAM,GAC1B,IAAQ,EAAM,eAAe,CAAQ,IACvC,IACD,MACG,IAAY,IAAS,KAAW,EAAM,MAAM,MAAM,IAAe,GACjE,IAAS,IAAY,GAAG,EAAU,SAAS,KAAA,GAC3C,IAAU,IAAY,GAAG,EAAU,UAAU,KAAA,GAC7C,IAAe,EAAkB,CAAK,GACtC,IAAW,EAAc,CAAY,GAIrC,IAAoB,CAHN,CAAC,IAAW,IAAU,MAAM,CAAC,KAAY,IAAO,IAAS,IAAI,CAAC,CAChF,OAAO,OAAO,CAAC,CACf,KAAK,GACoB,GAAa,GAAO,MAAM,mBAAmB,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACV,OACC,kBAAC,OAAD;EAAU;EAAK,GAAI;EAAO,WAAW,EAAG,yBAAyB,CAAS;EAA1E,UAAA;GACC,kBAAC,GAAD;IAAO,SAAS;IAAW,cAAc,MAAa;IAAO,SAAS;IACpE,UAAA;GACK,CAAA;GACN,IACE,EAAM,aAAa,GAAO;IAC1B,IAAI;IACJ,gBAAgB,IAAW,KAAO,EAAM,MAAM;IAC9C,oBAAoB,KAAqB,KAAA;GAC1C,CAAC,IACA;GACF,KAAQ,CAAC,IACT,kBAAC,KAAD;IAAG,IAAI;IAAQ,WAAU;IACvB,UAAA;GACC,CAAA,IACA;GACH,IACA,kBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAkC,MAAK;IAC/D,UAAA;GACC,CAAA,IACA;EACA;;AAEP,CACD;AACA,EAAM,cAAc"}

package/dist/components/flow.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+export type FlowProps = {
+    /**
+     * Accessible name for the step list.
+     * @default "Flow"
+     */
+    "aria-label"?: string;
+    /**
+     * Additional classes for the list.
+     */
+    className?: string;
+    /**
+     * Step nodes.
+     */
+    children: ReactNode;
+};
+export declare function Flow({ className, children, "aria-label": ariaLabel }: FlowProps): import("react").JSX.Element;
+export type FlowNodeProps = {
+    /**
+     * Label for the step.
+     */
+    children: ReactNode;
+};
+export declare function FlowNode({ children }: FlowNodeProps): import("react").JSX.Element;

package/dist/components/flow.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Children as t, Fragment as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/flow.tsx
+function o() {
+	let e = `flow-arrow-${r().replace(/:/g, "")}`;
+	return /* @__PURE__ */ i("li", {
+		"aria-hidden": "true",
+		className: "flex w-10 shrink-0 items-center text-basalt-muted-foreground",
+		children: /* @__PURE__ */ a("svg", {
+			viewBox: "0 0 40 16",
+			className: "h-4 w-10 overflow-visible",
+			overflow: "visible",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("marker", {
+				id: e,
+				markerWidth: "8",
+				markerHeight: "8",
+				refX: "0",
+				refY: "4",
+				orient: "auto",
+				markerUnits: "userSpaceOnUse",
+				children: /* @__PURE__ */ i("path", {
+					d: "M 0,1.5 Q 0,0 1.5,0 Q 3.5,1 5.8,3.2 Q 6.5,4 5.8,4.8 Q 3.5,7 1.5,8 Q 0,8 0,6.5 Z",
+					fill: "currentColor",
+					stroke: "none"
+				})
+			}) }), /* @__PURE__ */ i("path", {
+				d: "M 0 8 L 32 8",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				markerEnd: `url(#${e})`
+			})]
+		})
+	});
+}
+function s({ className: r, children: s, "aria-label": c = "Flow" }) {
+	let l = t.toArray(s);
+	return /* @__PURE__ */ i("ol", {
+		"aria-label": c,
+		className: e("flex items-center", r),
+		children: l.map((e, t) => /* @__PURE__ */ a(n, { children: [e, t < l.length - 1 ? /* @__PURE__ */ i(o, {}) : null] }, t))
+	});
+}
+function c({ children: e }) {
+	return /* @__PURE__ */ i("li", {
+		className: "rounded-basalt-md border border-basalt-border bg-basalt-secondary px-3 py-2 text-sm",
+		children: e
+	});
+}
+//#endregion
+export { s as Flow, c as FlowNode };
+
+//# sourceMappingURL=flow.js.map

package/dist/components/flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.js","names":[],"sources":["../../src/components/flow.tsx"],"sourcesContent":["import { Children, Fragment, type ReactNode, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nfunction FlowArrow() {\n\tconst id = `flow-arrow-${useId().replace(/:/g, \"\")}`;\n\treturn (\n\t\t<li aria-hidden=\"true\" className=\"flex w-10 shrink-0 items-center text-basalt-muted-foreground\">\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 40 16\"\n\t\t\t\tclassName=\"h-4 w-10 overflow-visible\"\n\t\t\t\toverflow=\"visible\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<marker\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tmarkerWidth=\"8\"\n\t\t\t\t\t\tmarkerHeight=\"8\"\n\t\t\t\t\t\trefX=\"0\"\n\t\t\t\t\t\trefY=\"4\"\n\t\t\t\t\t\torient=\"auto\"\n\t\t\t\t\t\tmarkerUnits=\"userSpaceOnUse\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M 0,1.5 Q 0,0 1.5,0 Q 3.5,1 5.8,3.2 Q 6.5,4 5.8,4.8 Q 3.5,7 1.5,8 Q 0,8 0,6.5 Z\"\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</marker>\n\t\t\t\t</defs>\n\t\t\t\t<path\n\t\t\t\t\td=\"M 0 8 L 32 8\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tmarkerEnd={`url(#${id})`}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</li>\n\t);\n}\n\nexport type FlowProps = {\n\t/**\n\t * Accessible name for the step list.\n\t * @default \"Flow\"\n\t */\n\t\"aria-label\"?: string;\n\t/**\n\t * Additional classes for the list.\n\t */\n\tclassName?: string;\n\t/**\n\t * Step nodes.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function Flow({ className, children, \"aria-label\": ariaLabel = \"Flow\" }: FlowProps) {\n\tconst nodes = Children.toArray(children);\n\treturn (\n\t\t<ol aria-label={ariaLabel} className={cn(\"flex items-center\", className)}>\n\t\t\t{nodes.map((child, index) => (\n\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t{child}\n\t\t\t\t\t{index < nodes.length - 1 ? <FlowArrow /> : null}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nexport type FlowNodeProps = {\n\t/**\n\t * Label for the step.\n\t */\n\tchildren: ReactNode;\n};\n\nexport function FlowNode({ children }: FlowNodeProps) {\n\treturn (\n\t\t<li className=\"rounded-basalt-md border border-basalt-border bg-basalt-secondary px-3 py-2 text-sm\">\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n"],"mappings":";;;;;AAGA,SAAS,IAAY;CACpB,IAAM,IAAK,cAAc,EAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CACjD,OACC,kBAAC,MAAD;EAAI,eAAY;EAAO,WAAU;EAChC,UAAA,kBAAC,OAAD;GACC,SAAQ;GACR,WAAU;GACV,UAAS;GACT,eAAY;GAJb,UAAA,CAMC,kBAAC,QAAD,EAAA,UACC,kBAAC,UAAD;IACK;IACJ,aAAY;IACZ,cAAa;IACb,MAAK;IACL,MAAK;IACL,QAAO;IACP,aAAY;IAEZ,UAAA,kBAAC,QAAD;KACC,GAAE;KACF,MAAK;KACL,QAAO;IACP,CAAA;GACM,CAAA,EACH,CAAA,GACN,kBAAC,QAAD;IACC,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,WAAW,QAAQ,EAAG;GACtB,CAAA,CACG;;CACF,CAAA;AAEN;AAkBA,SAAgB,EAAK,EAAE,cAAW,aAAU,cAAc,IAAY,UAAqB;CAC1F,IAAM,IAAQ,EAAS,QAAQ,CAAQ;CACvC,OACC,kBAAC,MAAD;EAAI,cAAY;EAAW,WAAW,EAAG,qBAAqB,CAAS;EACrE,UAAA,EAAM,KAAK,GAAO,MAClB,kBAAC,GAAD,EAAA,UAAA,CACE,GACA,IAAQ,EAAM,SAAS,IAAI,kBAAC,GAAD,CAAY,CAAA,IAAI,IACnC,EAAA,GAHK,CAGL,CACV;CACE,CAAA;AAEN;AASA,SAAgB,EAAS,EAAE,eAA2B;CACrD,OACC,kBAAC,MAAD;EAAI,WAAU;EACZ;CACE,CAAA;AAEN"}

package/dist/components/grid.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type GridProps = {
+    /**
+     * Number of equal columns.
+     * @default 2
+     */
+    columns?: number;
+    /**
+     * Additional classes for the grid.
+     */
+    className?: string;
+    children?: ReactNode;
+};
+export declare function Grid({ className, columns, style, ...props }: GridProps & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function GridItem({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/components/grid.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/grid.tsx
+function n({ className: n, columns: r = 2, style: i, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("grid gap-3", n),
+		...a,
+		style: {
+			gridTemplateColumns: `repeat(${r}, minmax(0, 1fr))`,
+			...i
+		}
+	});
+}
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex items-center justify-center rounded-basalt-lg bg-basalt-secondary px-6 py-8 text-sm", n),
+		...r
+	});
+}
+//#endregion
+export { n as Grid, r as GridItem };
+
+//# sourceMappingURL=grid.js.map

package/dist/components/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../src/components/grid.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type GridProps = {\n\t/**\n\t * Number of equal columns.\n\t * @default 2\n\t */\n\tcolumns?: number;\n\t/**\n\t * Additional classes for the grid.\n\t */\n\tclassName?: string;\n\tchildren?: ReactNode;\n};\n\nexport function Grid({\n\tclassName,\n\tcolumns = 2,\n\tstyle,\n\t...props\n}: GridProps & HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"grid gap-3\", className)}\n\t\t\t{...props}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport function GridItem({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-center rounded-basalt-lg bg-basalt-secondary px-6 py-8 text-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAgBA,SAAgB,EAAK,EACpB,cACA,aAAU,GACV,UACA,GAAG,KAC2C;CAC9C,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,cAAc,CAAS;EACrC,GAAI;EACJ,OAAO;GACN,qBAAqB,UAAU,EAAQ;GACvC,GAAG;EACJ;CACA,CAAA;AAEH;AAEA,SAAgB,EAAS,EAAE,cAAW,GAAG,KAAyC;CACjF,OACC,kBAAC,OAAD;EACC,WAAW,EACV,4FACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH"}

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

@@ -0,0 +1,5 @@
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React from "react";
+export declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+export declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/hover-card.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-hover-card";
+//#region src/components/hover-card.tsx
+var o = a.Root, s = a.Trigger, c = r.forwardRef(({ className: r, sideOffset: o = 8, ...s }, c) => /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Content, {
+	ref: c,
+	sideOffset: o,
+	className: e(t, n, "w-64 rounded-basalt-md border border-basalt-border bg-basalt-popover p-4 text-basalt-popover-foreground shadow-md", r),
+	...s
+}) }));
+c.displayName = a.Content.displayName;
+//#endregion
+export { o as HoverCard, c as HoverCardContent, s as HoverCardTrigger };
+
+//# sourceMappingURL=hover-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/components/hover-card.tsx"],"sourcesContent":["import * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const HoverCard = HoverCardPrimitive.Root;\nexport const HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nexport const HoverCardContent = React.forwardRef<\n\tReact.ElementRef<typeof HoverCardPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<HoverCardPrimitive.Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\"w-64 rounded-basalt-md border border-basalt-border bg-basalt-popover p-4 text-basalt-popover-foreground shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</HoverCardPrimitive.Portal>\n));\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;\n"],"mappings":";;;;;;;AAKA,IAAa,IAAY,EAAmB,MAC/B,IAAmB,EAAmB,SAEtC,IAAmB,EAAM,YAGnC,EAAE,cAAW,gBAAA,GAAuB,GAAG,KAAS,MAClD,kBAAC,EAAmB,QAApB,EAAA,UACC,kBAAC,EAAmB,SAApB;CACM;CACO;CACZ,WAAW,EACV,GACA,GACA,qHACA,CACD;CACA,GAAI;AACJ,CAAA,EACyB,CAAA,CAC3B;AACD,EAAiB,cAAc,EAAmB,QAAQ"}

package/dist/components/input-area.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export type InputAreaSize = "sm" | "default" | "lg";
+export type InputAreaProps = Omit<React.ComponentProps<"textarea">, "rows"> & {
+    /**
+     * The visible text row count.
+     */
+    rows?: number;
+    /**
+     * The visual size of the text area.
+     * @default default
+     */
+    size?: InputAreaSize;
+    /**
+     * Ignore password managers on this field.
+     * @default false
+     */
+    passwordManagerIgnore?: boolean;
+};
+export declare const InputArea: React.ForwardRefExoticComponent<Omit<InputAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/input-area.js

@@ -0,0 +1,27 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { FOCUS_BORDER as t } from "./overlay.js";
+import { controlSurfaceClass as n } from "../utils/control-surface.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/input-area.tsx
+var a = {
+	sm: "min-h-[64px] px-2.5 py-1.5 text-xs",
+	default: "min-h-[80px] px-3 py-2 text-sm",
+	lg: "min-h-[96px] px-4 py-2 text-base"
+}, o = {
+	"data-1p-ignore": "true",
+	"data-bwignore": "true",
+	"data-form-type": "other",
+	"data-lpignore": "true"
+}, s = r.forwardRef(({ className: r, size: s = "default", passwordManagerIgnore: c = !1, ...l }, u) => /* @__PURE__ */ i("textarea", {
+	ref: u,
+	className: n(e("flex w-full text-basalt-foreground shadow-xs placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40", a[s], t, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", c && "keeper-ignore", r)),
+	...l,
+	...c ? o : {}
+}));
+s.displayName = "InputArea";
+//#endregion
+export { s as InputArea };
+
+//# sourceMappingURL=input-area.js.map

package/dist/components/input-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-area.js","names":[],"sources":["../../src/components/input-area.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { FOCUS_BORDER } from \"./overlay\";\n\nexport type InputAreaSize = \"sm\" | \"default\" | \"lg\";\n\nconst INPUT_AREA_SIZE_CLASS: Record<InputAreaSize, string> = {\n\tsm: \"min-h-[64px] px-2.5 py-1.5 text-xs\",\n\tdefault: \"min-h-[80px] px-3 py-2 text-sm\",\n\tlg: \"min-h-[96px] px-4 py-2 text-base\",\n};\n\nconst PASSWORD_MANAGER_MARKERS = {\n\t\"data-1p-ignore\": \"true\",\n\t\"data-bwignore\": \"true\",\n\t\"data-form-type\": \"other\",\n\t\"data-lpignore\": \"true\",\n} as const;\n\nexport type InputAreaProps = Omit<React.ComponentProps<\"textarea\">, \"rows\"> & {\n\t/**\n\t * The visible text row count.\n\t */\n\trows?: number;\n\t/**\n\t * The visual size of the text area.\n\t * @default default\n\t */\n\tsize?: InputAreaSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n\t({ className, size = \"default\", passwordManagerIgnore = false, ...props }, ref) => (\n\t\t<textarea\n\t\t\tref={ref}\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\n\t\t\t\t\t\"flex w-full text-basalt-foreground shadow-xs placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:border-transparent disabled:text-basalt-muted-foreground/40\",\n\t\t\t\t\tINPUT_AREA_SIZE_CLASS[size],\n\t\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\t\tpasswordManagerIgnore && \"keeper-ignore\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t)}\n\t\t\t{...props}\n\t\t\t{...(passwordManagerIgnore ? PASSWORD_MANAGER_MARKERS : {})}\n\t\t/>\n\t),\n);\nInputArea.displayName = \"InputArea\";\n"],"mappings":";;;;;;;AAOA,IAAM,IAAuD;CAC5D,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAEM,IAA2B;CAChC,kBAAkB;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,iBAAiB;AAClB,GAmBa,IAAY,EAAM,YAC7B,EAAE,cAAW,UAAO,WAAW,2BAAwB,IAAO,GAAG,KAAS,MAC1E,kBAAC,YAAD;CACM;CACL,WAAW,EACV,EACC,0LACA,EAAsB,IACtB,GACA,+FACA,KAAyB,iBACzB,CACD,CACD;CACA,GAAI;CACJ,GAAK,IAAwB,IAA2B,CAAC;AACzD,CAAA,CAEH;AACA,EAAU,cAAc"}

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { type ButtonProps } from "./button.js";
+import { Input } from "./input.js";
+export type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Disable the input and nested actions.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type InputGroupInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, "type" | "size" | "passwordManagerIgnore"> & {
+    /**
+     * The type of input control to render.
+     */
+    type?: React.HTMLInputTypeAttribute;
+};
+export type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Place the addon at the start or end of the group.
+     * @default start
+     */
+    align?: "start" | "end";
+};
+declare function InputGroupAddon({ align, className, children, ...props }: InputGroupAddonProps): React.JSX.Element;
+export type InputGroupSuffixProps = React.HTMLAttributes<HTMLDivElement>;
+declare function InputGroupSuffix({ className, children, ...props }: InputGroupSuffixProps): React.JSX.Element;
+export interface InputGroupButtonProps extends Omit<ButtonProps, "variant" | "size" | "asChild" | "loading" | "icon"> {
+    /**
+     * Visual style for the nested action.
+     * @default ghost
+     */
+    variant?: ButtonProps["variant"];
+    /**
+     * Size for the nested action.
+     * @default icon
+     */
+    size?: ButtonProps["size"];
+    /**
+     * Render the nested action through its child element.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Show a spinner and disable the nested action.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon rendered before the nested action label.
+     */
+    icon?: React.ReactNode;
+}
+export declare const InputGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Disable the input and nested actions.
+     * @default false
+     */
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("./input.js").InputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "passwordManagerIgnore" | "size" | "type"> & {
+        /**
+         * The type of input control to render.
+         */
+        type?: React.HTMLInputTypeAttribute;
+    } & React.RefAttributes<HTMLInputElement>>;
+    Addon: typeof InputGroupAddon;
+    Suffix: typeof InputGroupSuffix;
+    Button: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/input-group.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { controlSurfaceClass as n } from "../utils/control-surface.js";
+import { Input as r } from "./input.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/input-group.tsx
+var o = i.createContext(!1), s = i.forwardRef(({ className: t, disabled: r, onClick: i, children: s, ...c }, l) => /* @__PURE__ */ a(o.Provider, {
+	value: !!r,
+	children: /* @__PURE__ */ a("div", {
+		ref: l,
+		"data-slot": "input-group",
+		"data-disabled": r ? "" : void 0,
+		"aria-disabled": r || void 0,
+		inert: r || void 0,
+		className: n(e("flex h-9 w-full items-center shadow-xs", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md", "outline-hidden focus-within:border-basalt-ring", "has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2", "has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2", "has-[[data-slot=input-group-suffix]]:[&_input]:flex-none", "has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]", "has-[[data-slot=input-group-suffix]]:[&_input]:pr-0", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t)),
+		onClick: (e) => {
+			i?.(e), !(e.defaultPrevented || r) && (e.target.closest("input, textarea, button, a") || e.currentTarget.querySelector("input")?.focus());
+		},
+		...c,
+		children: s
+	})
+}));
+s.displayName = "InputGroup";
+var c = i.forwardRef(({ className: t, disabled: n, ...s }, c) => {
+	let l = i.useContext(o);
+	return /* @__PURE__ */ a(r, {
+		ref: c,
+		disabled: n || l,
+		className: e("h-full min-w-0 w-auto! flex-1 rounded-none border-0 bg-transparent px-3 py-0 shadow-none", "outline-hidden focus-visible:border-transparent focus-visible:ring-0", t),
+		...s
+	});
+});
+c.displayName = "InputGroup.Input";
+function l({ align: t = "start", className: n, children: r, ...i }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": t === "end" ? "input-group-addon-end" : "input-group-addon-start",
+		className: e("pointer-events-none flex shrink-0 items-center text-basalt-muted-foreground *:pointer-events-auto [&_svg]:size-4", t === "start" ? "-order-1 pl-3" : "order-1 pr-3", n),
+		...i,
+		children: r
+	});
+}
+l.displayName = "InputGroup.Addon";
+function u({ className: t, children: n, ...r }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-group-suffix",
+		className: e("pointer-events-none flex min-w-0 flex-1 items-center pr-3 text-basalt-muted-foreground select-none", t),
+		...r,
+		children: /* @__PURE__ */ a("span", {
+			className: "truncate",
+			children: n
+		})
+	});
+}
+u.displayName = "InputGroup.Suffix";
+var d = i.forwardRef(({ className: n, variant: r = "ghost", size: s = "icon", disabled: c, ...l }, u) => {
+	let d = i.useContext(o);
+	return /* @__PURE__ */ a(t, {
+		ref: u,
+		variant: r,
+		size: s,
+		disabled: c || d,
+		className: e("h-7 w-7 shrink-0 rounded-basalt-sm", n),
+		...l
+	});
+});
+d.displayName = "InputGroup.Button";
+var f = Object.assign(s, {
+	Input: c,
+	Addon: l,
+	Suffix: u,
+	Button: d
+});
+//#endregion
+export { f as InputGroup };
+
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input } from \"./input\";\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Disable the input and nested actions.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nconst InputGroupDisabled = React.createContext(false);\n\nconst InputGroupRoot = React.forwardRef<HTMLDivElement, InputGroupProps>(\n\t({ className, disabled, onClick, children, ...props }, ref) => (\n\t\t<InputGroupDisabled.Provider value={Boolean(disabled)}>\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"input-group\"\n\t\t\t\tdata-disabled={disabled ? \"\" : undefined}\n\t\t\t\taria-disabled={disabled || undefined}\n\t\t\t\tinert={disabled || undefined}\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\tcn(\n\t\t\t\t\t\t\"flex h-9 w-full items-center shadow-xs\",\n\t\t\t\t\t\t\"[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md\",\n\t\t\t\t\t\t\"outline-hidden focus-within:border-basalt-ring\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:flex-none\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]\",\n\t\t\t\t\t\t\"has-[[data-slot=input-group-suffix]]:[&_input]:pr-0\",\n\t\t\t\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented || disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\t\tif (target.closest(\"input, textarea, button, a\")) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tevent.currentTarget.querySelector(\"input\")?.focus();\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</InputGroupDisabled.Provider>\n\t),\n);\nInputGroupRoot.displayName = \"InputGroup\";\n\nexport type InputGroupInputProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof Input>,\n\t\"type\" | \"size\" | \"passwordManagerIgnore\"\n> & {\n\t/**\n\t * The type of input control to render.\n\t */\n\ttype?: React.HTMLInputTypeAttribute;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n\t({ className, disabled, ...props }, ref) => {\n\t\tconst groupDisabled = React.useContext(InputGroupDisabled);\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled || groupDisabled}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"h-full min-w-0 w-auto! flex-1 rounded-none border-0 bg-transparent px-3 py-0 shadow-none\",\n\t\t\t\t\t\"outline-hidden focus-visible:border-transparent focus-visible:ring-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputGroupInput.displayName = \"InputGroup.Input\";\n\nexport type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Place the addon at the start or end of the group.\n\t * @default start\n\t */\n\talign?: \"start\" | \"end\";\n};\n\nfunction InputGroupAddon({ align = \"start\", className, children, ...props }: InputGroupAddonProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot={align === \"end\" ? \"input-group-addon-end\" : \"input-group-addon-start\"}\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none flex shrink-0 items-center text-basalt-muted-foreground *:pointer-events-auto [&_svg]:size-4\",\n\t\t\t\talign === \"start\" ? \"-order-1 pl-3\" : \"order-1 pr-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\nInputGroupAddon.displayName = \"InputGroup.Addon\";\n\nexport type InputGroupSuffixProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction InputGroupSuffix({ className, children, ...props }: InputGroupSuffixProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-group-suffix\"\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none flex min-w-0 flex-1 items-center pr-3 text-basalt-muted-foreground select-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"truncate\">{children}</span>\n\t\t</div>\n\t);\n}\nInputGroupSuffix.displayName = \"InputGroup.Suffix\";\n\nexport interface InputGroupButtonProps\n\textends Omit<ButtonProps, \"variant\" | \"size\" | \"asChild\" | \"loading\" | \"icon\"> {\n\t/**\n\t * Visual style for the nested action.\n\t * @default ghost\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\t/**\n\t * Size for the nested action.\n\t * @default icon\n\t */\n\tsize?: ButtonProps[\"size\"];\n\t/**\n\t * Render the nested action through its child element.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Show a spinner and disable the nested action.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Icon rendered before the nested action label.\n\t */\n\ticon?: React.ReactNode;\n}\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n\t({ className, variant = \"ghost\", size = \"icon\", disabled, ...props }, ref) => {\n\t\tconst groupDisabled = React.useContext(InputGroupDisabled);\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\tvariant={variant}\n\t\t\t\tsize={size}\n\t\t\t\tdisabled={disabled || groupDisabled}\n\t\t\t\tclassName={cn(\"h-7 w-7 shrink-0 rounded-basalt-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputGroupButton.displayName = \"InputGroup.Button\";\n\nexport const InputGroup = Object.assign(InputGroupRoot, {\n\tInput: InputGroupInput,\n\tAddon: InputGroupAddon,\n\tSuffix: InputGroupSuffix,\n\tButton: InputGroupButton,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,IAAqB,EAAM,cAAc,EAAK,GAE9C,IAAiB,EAAM,YAC3B,EAAE,cAAW,aAAU,YAAS,aAAU,GAAG,KAAS,MACtD,kBAAC,EAAmB,UAApB;CAA6B,OAAO,EAAQ;CAC3C,UAAA,kBAAC,OAAD;EACM;EACL,aAAU;EACV,iBAAe,IAAW,KAAK,KAAA;EAC/B,iBAAe,KAAY,KAAA;EAC3B,OAAO,KAAY,KAAA;EACnB,WAAW,EACV,EACC,0CACA,4EACA,kDACA,4DACA,0DACA,4DACA,yEACA,uDACA,kEACA,CACD,CACD;EACA,UAAU,MAAU;GACnB,IAAU,CAAK,GACX,IAAM,oBAAoB,OAGf,EAAM,OACV,QAAQ,4BAA4B,KAG/C,EAAM,cAAc,cAAc,OAAO,CAAC,EAAE,MAAM;EACnD;EACA,GAAI;EAEH;CACG,CAAA;AACuB,CAAA,CAE/B;AACA,EAAe,cAAc;AAY7B,IAAM,IAAkB,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC3C,IAAM,IAAgB,EAAM,WAAW,CAAkB;CACzD,OACC,kBAAC,GAAD;EACM;EACL,UAAU,KAAY;EACtB,WAAW,EACV,4FACA,wEACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH,CACD;AACA,EAAgB,cAAc;AAU9B,SAAS,EAAgB,EAAE,WAAQ,SAAS,cAAW,aAAU,GAAG,KAA+B;CAClG,OACC,kBAAC,OAAD;EACC,aAAW,MAAU,QAAQ,0BAA0B;EACvD,WAAW,EACV,oHACA,MAAU,UAAU,kBAAkB,gBACtC,CACD;EACA,GAAI;EAEH;CACG,CAAA;AAEP;AACA,EAAgB,cAAc;AAI9B,SAAS,EAAiB,EAAE,cAAW,aAAU,GAAG,KAAgC;CACnF,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAW,EACV,sGACA,CACD;EACA,GAAI;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA;CACvC,CAAA;AAEP;AACA,EAAiB,cAAc;AA8B/B,IAAM,IAAmB,EAAM,YAC7B,EAAE,cAAW,aAAU,SAAS,UAAO,QAAQ,aAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAgB,EAAM,WAAW,CAAkB;CACzD,OACC,kBAAC,GAAD;EACM;EACI;EACH;EACN,UAAU,KAAY;EACtB,WAAW,EAAG,sCAAsC,CAAS;EAC7D,GAAI;CACJ,CAAA;AAEH,CACD;AACA,EAAiB,cAAc;AAE/B,IAAa,IAAa,OAAO,OAAO,GAAgB;CACvD,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;AACT,CAAC"}

package/dist/components/input.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export type InputSize = "sm" | "default" | "lg";
+export type InputProps = Omit<React.ComponentProps<"input">, "type" | "size"> & {
+    /**
+     * The type of input control to render.
+     */
+    type?: React.HTMLInputTypeAttribute;
+    /**
+     * The visual size of the input.
+     * @default default
+     */
+    size?: InputSize;
+    /**
+     * Ignore password managers on this field.
+     * @default false
+     */
+    passwordManagerIgnore?: boolean;
+};
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;