tembro 2.1.13 → 3.1.1

package/dist/src/components/filters/filter-bar.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Button as n } from "../ui/button/index.js";
+import { Badge as r } from "../ui/badge/index.js";
+import * as i from "react";
+import { SlidersHorizontalIcon as a, XIcon as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/filters/filter-bar.tsx
+var u = {
+	default: "secondary",
+	success: "secondary",
+	warning: "outline",
+	danger: "destructive",
+	info: "outline",
+	muted: "outline"
+};
+function d({ className: d, search: f, filters: p, actions: m, chips: h, activeCount: g, activeLabel: _ = (e) => `${e} active`, resetLabel: v = "Reset", clearChipLabel: y, onReset: b, onRemoveChip: x, collapsible: S = !1, defaultExpanded: C = !1, emptyChips: w, chipLimit: T, chipOverflowLabel: E = (e) => `+${e} more`, children: D, ...O }) {
+	let [k, A] = i.useState(C), j = h?.filter((e) => !e.hidden) ?? [], M = T && T > 0 ? j.slice(0, T) : j, N = Math.max(j.length - M.length, 0), P = g ?? j.length, F = !!(p || D), I = !!h, L = !S || k, R = j.length > 0 || I && w;
+	return /* @__PURE__ */ l("div", {
+		"data-slot": "filter-bar",
+		className: e("flex flex-col gap-3 rounded-lg border bg-card p-3", d),
+		...O,
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center",
+					children: [f && /* @__PURE__ */ c("div", {
+						className: "min-w-0 flex-1",
+						children: f
+					}), S && F && /* @__PURE__ */ l(n, {
+						type: "button",
+						variant: k ? "secondary" : "outline",
+						size: "sm",
+						onClick: () => A((e) => !e),
+						children: [
+							/* @__PURE__ */ c(a, { "data-icon": "inline-start" }),
+							"Filters",
+							P > 0 && /* @__PURE__ */ c("span", {
+								className: "ml-1 rounded-full bg-background px-1.5 text-xs",
+								children: P
+							})
+						]
+					})]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: [
+						P > 0 && /* @__PURE__ */ c("span", {
+							className: "text-sm text-muted-foreground",
+							children: _(P)
+						}),
+						P > 0 && b && /* @__PURE__ */ l(n, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							onClick: b,
+							children: [/* @__PURE__ */ c(o, { "data-icon": "inline-start" }), v]
+						}),
+						m
+					]
+				})]
+			}),
+			F && L && /* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center",
+				children: [p, D]
+			}),
+			R && /* @__PURE__ */ c("div", {
+				"data-slot": "filter-bar-chips",
+				className: "flex flex-wrap items-center gap-2",
+				children: j.length > 0 ? /* @__PURE__ */ l(s, { children: [M.map((n) => /* @__PURE__ */ l(r, {
+					variant: u[n.tone ?? "default"],
+					className: e("gap-1.5", n.disabled && "opacity-60"),
+					children: [
+						/* @__PURE__ */ c("span", { children: n.label }),
+						n.value !== void 0 && /* @__PURE__ */ c("span", {
+							className: "text-muted-foreground",
+							children: n.value
+						}),
+						x && !n.disabled && /* @__PURE__ */ c("button", {
+							type: "button",
+							"aria-label": typeof y == "string" ? y : "Remove filter",
+							className: "rounded-full p-0.5 hover:bg-muted",
+							onClick: (e) => {
+								t(e), x(n.key);
+							},
+							onMouseDown: t,
+							onDoubleClick: t,
+							children: /* @__PURE__ */ c(o, { className: "size-3" })
+						})
+					]
+				}, n.key)), N > 0 ? /* @__PURE__ */ c(r, {
+					variant: "outline",
+					children: E(N)
+				}) : null] }) : /* @__PURE__ */ c("span", {
+					className: "text-sm text-muted-foreground",
+					children: w
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { d as FilterBar };

package/dist/src/components/filters/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./filter-bar.cjs"),t=require("./saved-filter-select.cjs");exports.FilterBar=e.FilterBar,exports.SavedFilterSelect=t.SavedFilterSelect;

package/dist/src/components/filters/index.js

@@ -0,0 +1,3 @@
+import { FilterBar as e } from "./filter-bar.js";
+import { SavedFilterSelect as t } from "./saved-filter-select.js";
+export { e as FilterBar, t as SavedFilterSelect };

package/dist/src/components/filters/saved-filter-select.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function c({value:e,onValueChange:c,filters:l,onSave:u,onDelete:d,placeholder:f=`Views`,saveLabel:p=`Save current view`,savePlaceholder:m=`Name this view`,emptyMessage:h=`No saved views`,saveValue:g,onSaveValueChange:_,className:v,...y}){let[b,x]=a.useState(!1),[S,C]=a.useState(``),w=l.find(t=>t.value===e),T=g??S;function E(e){g===void 0&&C(e),_?.(e)}function D(){let e=T.trim();!e||!u||(u(e),E(``),x(!1))}return(0,s.jsx)(`div`,{"data-slot":`saved-filter-select`,className:v,...y,children:(0,s.jsxs)(i.Popover,{open:b,onOpenChange:x,children:[(0,s.jsxs)(n.Button,{render:(0,s.jsx)(i.PopoverTrigger,{}),variant:`outline`,role:`combobox`,"aria-expanded":b,className:`w-[200px] justify-between`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2 truncate`,children:[(0,s.jsx)(o.BookmarkIcon,{className:`size-4 shrink-0 opacity-50`}),(0,s.jsx)(`span`,{className:`truncate`,children:w?w.label:f})]}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 shrink-0 opacity-50`})]}),(0,s.jsxs)(i.PopoverContent,{className:`w-[250px] p-0`,align:`start`,children:[(0,s.jsx)(`div`,{className:`max-h-[300px] overflow-y-auto p-1`,children:l.length===0?(0,s.jsx)(`div`,{className:`py-6 text-center text-sm text-muted-foreground`,children:h}):(0,s.jsx)(`div`,{className:`grid gap-1`,children:l.map(r=>{let i=e===r.value;return(0,s.jsxs)(`div`,{className:t.cn(`group relative flex items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground`,i&&`bg-accent text-accent-foreground`),children:[(0,s.jsxs)(`button`,{className:`flex min-w-0 flex-1 items-center gap-2 text-left`,onClick:()=>{c?.(i?void 0:r.value),x(!1)},children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:i&&(0,s.jsx)(o.CheckIcon,{className:`size-4`})}),(0,s.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,s.jsx)(`span`,{className:`truncate font-medium`,children:r.label}),r.description&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:r.description})]})]}),d&&(0,s.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`size-6 shrink-0 opacity-0 group-hover:opacity-100 hover:text-destructive`,onClick:e=>{t.stopInteractivePropagation(e),d(r.value)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,s.jsx)(o.Trash2Icon,{className:`size-3`})})]},r.value)})})}),u&&(0,s.jsxs)(`div`,{className:`grid gap-2 border-t p-2`,children:[(0,s.jsx)(r.Input,{value:T,placeholder:m,onChange:e=>E(e.target.value),onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),D())}}),(0,s.jsxs)(n.Button,{variant:`outline`,className:`w-full justify-center text-sm font-medium`,disabled:!T.trim(),onClick:D,children:[(0,s.jsx)(o.SaveIcon,{className:`mr-2 size-4`}),p]})]})]})]})})}exports.SavedFilterSelect=c;

package/dist/src/components/filters/saved-filter-select.js

@@ -0,0 +1,107 @@
+"use client";
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Button as n } from "../ui/button/index.js";
+import { Input as r } from "../ui/input/index.js";
+import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "../ui/popover/index.js";
+import * as s from "react";
+import { BookmarkIcon as c, CheckIcon as l, ChevronsUpDownIcon as u, SaveIcon as d, Trash2Icon as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/filters/saved-filter-select.tsx
+function h({ value: h, onValueChange: g, filters: _, onSave: v, onDelete: y, placeholder: b = "Views", saveLabel: x = "Save current view", savePlaceholder: S = "Name this view", emptyMessage: C = "No saved views", saveValue: w, onSaveValueChange: T, className: E, ...D }) {
+	let [O, k] = s.useState(!1), [A, j] = s.useState(""), M = _.find((e) => e.value === h), N = w ?? A;
+	function P(e) {
+		w === void 0 && j(e), T?.(e);
+	}
+	function F() {
+		let e = N.trim();
+		!e || !v || (v(e), P(""), k(!1));
+	}
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "saved-filter-select",
+		className: E,
+		...D,
+		children: /* @__PURE__ */ m(i, {
+			open: O,
+			onOpenChange: k,
+			children: [/* @__PURE__ */ m(n, {
+				render: /* @__PURE__ */ p(o, {}),
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": O,
+				className: "w-[200px] justify-between",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2 truncate",
+					children: [/* @__PURE__ */ p(c, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ p("span", {
+						className: "truncate",
+						children: M ? M.label : b
+					})]
+				}), /* @__PURE__ */ p(u, { className: "size-4 shrink-0 opacity-50" })]
+			}), /* @__PURE__ */ m(a, {
+				className: "w-[250px] p-0",
+				align: "start",
+				children: [/* @__PURE__ */ p("div", {
+					className: "max-h-[300px] overflow-y-auto p-1",
+					children: _.length === 0 ? /* @__PURE__ */ p("div", {
+						className: "py-6 text-center text-sm text-muted-foreground",
+						children: C
+					}) : /* @__PURE__ */ p("div", {
+						className: "grid gap-1",
+						children: _.map((r) => {
+							let i = h === r.value;
+							return /* @__PURE__ */ m("div", {
+								className: e("group relative flex items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground", i && "bg-accent text-accent-foreground"),
+								children: [/* @__PURE__ */ m("button", {
+									className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+									onClick: () => {
+										g?.(i ? void 0 : r.value), k(!1);
+									},
+									children: [/* @__PURE__ */ p("span", {
+										className: "flex size-4 shrink-0 items-center justify-center",
+										children: i && /* @__PURE__ */ p(l, { className: "size-4" })
+									}), /* @__PURE__ */ m("div", {
+										className: "grid gap-0.5",
+										children: [/* @__PURE__ */ p("span", {
+											className: "truncate font-medium",
+											children: r.label
+										}), r.description && /* @__PURE__ */ p("span", {
+											className: "truncate text-xs text-muted-foreground",
+											children: r.description
+										})]
+									})]
+								}), y && /* @__PURE__ */ p(n, {
+									variant: "ghost",
+									size: "icon",
+									className: "size-6 shrink-0 opacity-0 group-hover:opacity-100 hover:text-destructive",
+									onClick: (e) => {
+										t(e), y(r.value);
+									},
+									onMouseDown: t,
+									onDoubleClick: t,
+									children: /* @__PURE__ */ p(f, { className: "size-3" })
+								})]
+							}, r.value);
+						})
+					})
+				}), v && /* @__PURE__ */ m("div", {
+					className: "grid gap-2 border-t p-2",
+					children: [/* @__PURE__ */ p(r, {
+						value: N,
+						placeholder: S,
+						onChange: (e) => P(e.target.value),
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.preventDefault(), F());
+						}
+					}), /* @__PURE__ */ m(n, {
+						variant: "outline",
+						className: "w-full justify-center text-sm font-medium",
+						disabled: !N.trim(),
+						onClick: F,
+						children: [/* @__PURE__ */ p(d, { className: "mr-2 size-4" }), x]
+					})]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { h as SavedFilterSelect };

package/dist/src/components/form/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`form-input`,`FormInput`,`form`,`Form wrapper for the universal Input surface.`),e.component(`form-select`,`FormSelect`,`form`,`Form wrapper for controlled select fields.`),e.component(`form-textarea`,`FormTextarea`,`form`,`Textarea wrapper with validation slots.`),e.component(`form-switch`,`FormSwitch`,`form`,`Boolean form control with shell-level label and hint handling.`),e.component(`form-date-picker`,`FormDatePicker`,`form`,`Popover date picker wrapper with RHF integration.`),e.component(`form-date-range-picker`,`FormDateRangePicker`,`form`,`Range date picker wrapper with RHF integration.`)]);exports.formShowcaseDemoRegistry=t;

package/dist/src/components/form/demo.js

@@ -0,0 +1,12 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/form/demo.tsx
+var n = t([
+	e("form-input", "FormInput", "form", "Form wrapper for the universal Input surface."),
+	e("form-select", "FormSelect", "form", "Form wrapper for controlled select fields."),
+	e("form-textarea", "FormTextarea", "form", "Textarea wrapper with validation slots."),
+	e("form-switch", "FormSwitch", "form", "Boolean form control with shell-level label and hint handling."),
+	e("form-date-picker", "FormDatePicker", "form", "Popover date picker wrapper with RHF integration."),
+	e("form-date-range-picker", "FormDateRangePicker", "form", "Range date picker wrapper with RHF integration.")
+]);
+//#endregion
+export { n as formShowcaseDemoRegistry };

package/dist/src/components/form/form-date-picker.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-field-shell.cjs"),t=require("../calendar/date-picker.cjs");let n=require("react/jsx-runtime"),r=require("react-hook-form");function i({control:i,name:a,label:o,description:s,required:c,className:l,fieldClassName:u,emptyValue:d=``,onValueChange:f,...p}){return(0,n.jsx)(r.Controller,{control:i,name:a,render:({field:r,fieldState:i})=>(0,n.jsx)(e.FormFieldShell,{label:o,description:s,required:c,error:i.error?.message,className:l,children:(0,n.jsx)(t.DatePicker,{value:r.value??``,triggerClassName:u,onValueChange:e=>{r.onChange(e||d),f?.(e)},...p})})})}exports.FormDatePicker=i;

package/dist/src/components/form/form-date-picker.js

@@ -0,0 +1,28 @@
+import { FormFieldShell as e } from "./form-field-shell.js";
+import { DatePicker as t } from "../calendar/date-picker.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Controller as r } from "react-hook-form";
+//#region src/components/form/form-date-picker.tsx
+function i({ control: i, name: a, label: o, description: s, required: c, className: l, fieldClassName: u, emptyValue: d = "", onValueChange: f, ...p }) {
+	return /* @__PURE__ */ n(r, {
+		control: i,
+		name: a,
+		render: ({ field: r, fieldState: i }) => /* @__PURE__ */ n(e, {
+			label: o,
+			description: s,
+			required: c,
+			error: i.error?.message,
+			className: l,
+			children: /* @__PURE__ */ n(t, {
+				value: r.value ?? "",
+				triggerClassName: u,
+				onValueChange: (e) => {
+					r.onChange(e || d), f?.(e);
+				},
+				...p
+			})
+		})
+	});
+}
+//#endregion
+export { i as FormDatePicker };

package/dist/src/components/form/form-date-range-input.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ui/input/date-range.cjs"),t=require("./form-field-shell.cjs");let n=require("react/jsx-runtime"),r=require("react-hook-form");function i({control:i,fromName:a,toName:o,label:s,description:c,required:l,className:u,emptyValue:d=``,onValueChange:f,...p}){return(0,n.jsx)(r.Controller,{control:i,name:a,render:({field:a,fieldState:m})=>(0,n.jsx)(r.Controller,{control:i,name:o,render:({field:r,fieldState:i})=>(0,n.jsx)(t.FormFieldShell,{label:s,description:c,required:l,error:m.error?.message??i.error?.message,className:u,children:(0,n.jsx)(e.DateRangeInput,{value:{from:a.value??``,to:r.value??``},onValueChange:e=>{a.onChange(e.from||d),r.onChange(e.to||d),f?.(e)},...p})})})})}exports.FormDateRangeInput=i;

package/dist/src/components/form/form-date-range-input.js

@@ -0,0 +1,34 @@
+import { DateRangeInput as e } from "../ui/input/date-range.js";
+import { FormFieldShell as t } from "./form-field-shell.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Controller as r } from "react-hook-form";
+//#region src/components/form/form-date-range-input.tsx
+function i({ control: i, fromName: a, toName: o, label: s, description: c, required: l, className: u, emptyValue: d = "", onValueChange: f, ...p }) {
+	return /* @__PURE__ */ n(r, {
+		control: i,
+		name: a,
+		render: ({ field: a, fieldState: m }) => /* @__PURE__ */ n(r, {
+			control: i,
+			name: o,
+			render: ({ field: r, fieldState: i }) => /* @__PURE__ */ n(t, {
+				label: s,
+				description: c,
+				required: l,
+				error: m.error?.message ?? i.error?.message,
+				className: u,
+				children: /* @__PURE__ */ n(e, {
+					value: {
+						from: a.value ?? "",
+						to: r.value ?? ""
+					},
+					onValueChange: (e) => {
+						a.onChange(e.from || d), r.onChange(e.to || d), f?.(e);
+					},
+					...p
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { i as FormDateRangeInput };

package/dist/src/components/form/form-date-range-picker.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-field-shell.cjs"),t=require("../calendar/date-range-picker.cjs");let n=require("react/jsx-runtime"),r=require("react-hook-form");function i({control:i,fromName:a,toName:o,label:s,description:c,required:l,className:u,emptyValue:d=``,onValueChange:f,...p}){return(0,n.jsx)(r.Controller,{control:i,name:a,render:({field:a,fieldState:m})=>(0,n.jsx)(r.Controller,{control:i,name:o,render:({field:r,fieldState:i})=>(0,n.jsx)(e.FormFieldShell,{label:s,description:c,required:l,error:m.error?.message??i.error?.message,className:u,children:(0,n.jsx)(t.DateRangePicker,{value:{from:a.value??``,to:r.value??``},onValueChange:e=>{a.onChange(e.from||d),r.onChange(e.to||d),f?.({from:e.from||void 0,to:e.to||void 0})},...p})})})})}exports.FormDateRangePicker=i;

package/dist/src/components/form/form-date-range-picker.js

@@ -0,0 +1,37 @@
+import { FormFieldShell as e } from "./form-field-shell.js";
+import { DateRangePicker as t } from "../calendar/date-range-picker.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Controller as r } from "react-hook-form";
+//#region src/components/form/form-date-range-picker.tsx
+function i({ control: i, fromName: a, toName: o, label: s, description: c, required: l, className: u, emptyValue: d = "", onValueChange: f, ...p }) {
+	return /* @__PURE__ */ n(r, {
+		control: i,
+		name: a,
+		render: ({ field: a, fieldState: m }) => /* @__PURE__ */ n(r, {
+			control: i,
+			name: o,
+			render: ({ field: r, fieldState: i }) => /* @__PURE__ */ n(e, {
+				label: s,
+				description: c,
+				required: l,
+				error: m.error?.message ?? i.error?.message,
+				className: u,
+				children: /* @__PURE__ */ n(t, {
+					value: {
+						from: a.value ?? "",
+						to: r.value ?? ""
+					},
+					onValueChange: (e) => {
+						a.onChange(e.from || d), r.onChange(e.to || d), f?.({
+							from: e.from || void 0,
+							to: e.to || void 0
+						});
+					},
+					...p
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { i as FormDateRangePicker };

package/dist/src/components/form/form-field-shell.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a(e,t={}){let n=`${e}-label`,r=`${e}-description`,i=`${e}-error`;return{labelId:n,descriptionId:r,errorId:i,describedBy:[t.description?r:null,t.error?i:null].filter(Boolean).join(` `)||void 0}}var o={vertical:`grid gap-2`,horizontal:`grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5`,inline:`flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4`};function s({className:e,label:n,description:a,error:s,success:c,loading:l=!1,required:u=!1,htmlFor:d,labelId:f,descriptionId:p,errorId:m,layout:h=`vertical`,descriptionPosition:g=`top`,labelAction:_,requiredIndicator:v=(0,i.jsx)(`span`,{className:`ml-1 text-destructive`,children:`*`}),errorIcon:y,showErrorIcon:b=!0,disabled:x=!1,readOnly:S=!1,labelClassName:C,labelRowClassName:w,descriptionClassName:T,errorClassName:E,contentClassName:D,children:O,...k}){let A=!!(n||_),j=a&&g===`top`,M=a&&g===`bottom`,N=y??(0,i.jsx)(r.AlertCircleIcon,{className:`size-3.5`}),P=A?(0,i.jsxs)(`div`,{"data-slot":`form-field-label-row`,className:t.cn(`flex min-w-0 items-center justify-between gap-3`,h===`inline`&&`sm:w-auto`,w),children:[n?(0,i.jsxs)(`label`,{"data-slot":`form-field-label`,htmlFor:d,id:f,className:t.cn(`min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground`,x&&`cursor-not-allowed opacity-60`,S&&`opacity-80`,C),children:[n,u&&v]}):(0,i.jsx)(`span`,{}),_&&(0,i.jsx)(`div`,{"data-slot":`form-field-label-action`,className:`shrink-0 text-sm`,children:_})]}):null,F=a?(0,i.jsx)(`p`,{"data-slot":`form-field-description`,id:p,className:t.cn(`text-sm leading-6 text-muted-foreground`,x&&`opacity-60`,T),children:a}):null,I=(0,i.jsx)(`div`,{"data-slot":`form-field-content`,className:t.cn(`min-w-0 space-y-2`,D),children:O}),L=s?(0,i.jsxs)(`p`,{"data-slot":`form-field-error`,id:m,role:`alert`,"aria-live":`polite`,className:t.cn(`flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive`,E),children:[b&&(0,i.jsx)(`span`,{className:`mt-1 shrink-0`,children:N}),(0,i.jsx)(`span`,{className:`min-w-0`,children:s})]}):null,R=c&&!s?(0,i.jsx)(`p`,{"data-slot":`form-field-success`,className:`rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300`,children:c}):null,z=l?(0,i.jsx)(`p`,{"data-slot":`form-field-loading`,className:`text-sm leading-6 text-muted-foreground`,children:`Loading...`}):null;return(0,i.jsx)(`div`,{"data-slot":`form-field-shell`,"data-layout":h,"data-invalid":!!s||void 0,"data-success":!!(c&&!s)||void 0,"data-loading":l||void 0,"data-disabled":x||void 0,"data-readonly":S||void 0,"aria-disabled":x||void 0,className:t.cn(o[h],`rounded-[var(--radius-2xl)]`,e),...k,children:h===`horizontal`?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`div`,{className:`grid gap-2 sm:pt-2.5`,children:[P,j&&F]}),(0,i.jsxs)(`div`,{className:`grid min-w-0 gap-2`,children:[I,z,M&&F,R,L]})]}):h===`inline`?(0,i.jsxs)(i.Fragment,{children:[P,(0,i.jsxs)(`div`,{className:`grid min-w-0 flex-1 gap-2`,children:[j&&F,I,z,M&&F,R,L]})]}):(0,i.jsxs)(i.Fragment,{children:[P,j&&F,I,z,M&&F,R,L]})})}exports.FormFieldShell=s,exports.resolveFormFieldIds=a;

package/dist/src/components/form/form-field-shell.js

@@ -0,0 +1,114 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { AlertCircleIcon as t } from "lucide-react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/form/form-field-shell.tsx
+function a(e, t = {}) {
+	let n = `${e}-label`, r = `${e}-description`, i = `${e}-error`;
+	return {
+		labelId: n,
+		descriptionId: r,
+		errorId: i,
+		describedBy: [t.description ? r : null, t.error ? i : null].filter(Boolean).join(" ") || void 0
+	};
+}
+var o = {
+	vertical: "grid gap-2",
+	horizontal: "grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5",
+	inline: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4"
+};
+function s({ className: a, label: s, description: c, error: l, success: u, loading: d = !1, required: f = !1, htmlFor: p, labelId: m, descriptionId: h, errorId: g, layout: _ = "vertical", descriptionPosition: v = "top", labelAction: y, requiredIndicator: b = /* @__PURE__ */ r("span", {
+	className: "ml-1 text-destructive",
+	children: "*"
+}), errorIcon: x, showErrorIcon: S = !0, disabled: C = !1, readOnly: w = !1, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, children: A, ...j }) {
+	let M = !!(s || y), N = c && v === "top", P = c && v === "bottom", F = x ?? /* @__PURE__ */ r(t, { className: "size-3.5" }), I = M ? /* @__PURE__ */ i("div", {
+		"data-slot": "form-field-label-row",
+		className: e("flex min-w-0 items-center justify-between gap-3", _ === "inline" && "sm:w-auto", E),
+		children: [s ? /* @__PURE__ */ i("label", {
+			"data-slot": "form-field-label",
+			htmlFor: p,
+			id: m,
+			className: e("min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground", C && "cursor-not-allowed opacity-60", w && "opacity-80", T),
+			children: [s, f && b]
+		}) : /* @__PURE__ */ r("span", {}), y && /* @__PURE__ */ r("div", {
+			"data-slot": "form-field-label-action",
+			className: "shrink-0 text-sm",
+			children: y
+		})]
+	}) : null, L = c ? /* @__PURE__ */ r("p", {
+		"data-slot": "form-field-description",
+		id: h,
+		className: e("text-sm leading-6 text-muted-foreground", C && "opacity-60", D),
+		children: c
+	}) : null, R = /* @__PURE__ */ r("div", {
+		"data-slot": "form-field-content",
+		className: e("min-w-0 space-y-2", k),
+		children: A
+	}), z = l ? /* @__PURE__ */ i("p", {
+		"data-slot": "form-field-error",
+		id: g,
+		role: "alert",
+		"aria-live": "polite",
+		className: e("flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive", O),
+		children: [S && /* @__PURE__ */ r("span", {
+			className: "mt-1 shrink-0",
+			children: F
+		}), /* @__PURE__ */ r("span", {
+			className: "min-w-0",
+			children: l
+		})]
+	}) : null, B = u && !l ? /* @__PURE__ */ r("p", {
+		"data-slot": "form-field-success",
+		className: "rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300",
+		children: u
+	}) : null, V = d ? /* @__PURE__ */ r("p", {
+		"data-slot": "form-field-loading",
+		className: "text-sm leading-6 text-muted-foreground",
+		children: "Loading..."
+	}) : null;
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "form-field-shell",
+		"data-layout": _,
+		"data-invalid": !!l || void 0,
+		"data-success": !!(u && !l) || void 0,
+		"data-loading": d || void 0,
+		"data-disabled": C || void 0,
+		"data-readonly": w || void 0,
+		"aria-disabled": C || void 0,
+		className: e(o[_], "rounded-[var(--radius-2xl)]", a),
+		...j,
+		children: _ === "horizontal" ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("div", {
+			className: "grid gap-2 sm:pt-2.5",
+			children: [I, N && L]
+		}), /* @__PURE__ */ i("div", {
+			className: "grid min-w-0 gap-2",
+			children: [
+				R,
+				V,
+				P && L,
+				B,
+				z
+			]
+		})] }) : _ === "inline" ? /* @__PURE__ */ i(n, { children: [I, /* @__PURE__ */ i("div", {
+			className: "grid min-w-0 flex-1 gap-2",
+			children: [
+				N && L,
+				R,
+				V,
+				P && L,
+				B,
+				z
+			]
+		})] }) : /* @__PURE__ */ i(n, { children: [
+			I,
+			N && L,
+			R,
+			V,
+			P && L,
+			B,
+			z
+		] })
+	});
+}
+//#endregion
+export { s as FormFieldShell, a as resolveFormFieldIds };

package/dist/src/components/form/form-input.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../ui/input/date.cjs"),n=require("../ui/input/date-range.cjs"),r=require("../ui/input/masked.cjs"),i=require("../ui/input/money.cjs"),a=require("../ui/input/number.cjs"),o=require("../ui/input/phone.cjs"),s=require("../ui/input/quantity.cjs"),c=require("../ui/input/index.cjs"),l=require("./form-field-shell.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime"),f=require("react-hook-form");function p(e){return{label:e.label,description:e.description,success:e.success,loading:e.loading,required:e.required,className:e.className,htmlFor:e.id??e.name,layout:e.layout,descriptionPosition:e.descriptionPosition,labelAction:e.labelAction,requiredIndicator:e.requiredIndicator,errorIcon:e.errorIcon,showErrorIcon:e.showErrorIcon,disabled:e.disabled,readOnly:e.readOnly,labelClassName:e.labelClassName,labelRowClassName:e.labelRowClassName,descriptionClassName:e.descriptionClassName,errorClassName:e.errorClassName,contentClassName:e.contentClassName}}function m(e){let u=e.id??e.name,m=p(e),h=e.kind??`text`,g=e.fieldClassName??`w-full`;return(0,d.jsx)(f.Controller,{control:e.control,name:e.name,rules:e.rules,render:({field:f,fieldState:p})=>{let _=p.error?.message,v=l.resolveFormFieldIds(u,{description:e.description,error:_});if(h===`search`){let{control:t,name:n,label:r,description:i,required:a,className:o,layout:s,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,onValueChange:N,onBlur:P,...F}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(c.Input,{...F,type:`search`,id:j??u,name:f.name,ref:f.ref,value:f.value??``,disabled:C,readOnly:e.readOnly,inputClassName:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),P?.(e)},onValueChange:e=>{f.onChange(e),N?.(e)}})})}if(h===`password`){let{control:t,name:n,label:r,description:i,required:a,className:o,layout:s,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,onValueChange:N,onBlur:P,...F}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(c.Input,{...F,type:`password`,id:j??u,ref:f.ref,name:f.name,value:f.value??``,disabled:C,readOnly:e.readOnly,inputClassName:A??g,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),P?.(e)},onChange:e=>{let t=e.currentTarget.value;f.onChange(t),N?.(t)},"aria-invalid":p.invalid||void 0})})}if(h===`number`){let{control:t,name:n,label:r,description:i,required:o,className:s,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,emptyValue:N=null,onNumberChange:P,onBlur:F,...I}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(a.NumberInput,{...I,id:j??u,name:f.name,ref:f.ref,value:f.value??``,disabled:C,readOnly:e.readOnly,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),F?.(e)},onNumberChange:e=>{f.onChange(e??N),P?.(e)}})})}if(h===`phone`){let{control:t,name:n,label:r,description:i,required:a,className:s,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,valueMode:N=`raw`,countryCode:P=`+998`,maxDigits:F=12,onValueChange:I,onBlur:L,...R}=e,z=f.value==null?``:String(f.value),B=N===`raw`?o.formatPhoneDigits(z,P,F):z;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(o.PhoneInput,{...R,id:j??u,name:f.name,ref:f.ref,value:B,disabled:C,readOnly:e.readOnly,countryCode:P,maxDigits:F,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),L?.(e)},onValueChange:(e,t)=>{let n=N===`raw`?t:e;f.onChange(n),I?.(n,t,e)}})})}if(h===`date`){let{control:n,name:r,label:i,description:a,required:o,className:s,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,emptyValue:N=``,onValueChange:P,onBlur:F,...I}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(t.DateInput,{...I,id:j??u,name:f.name,ref:f.ref,value:f.value??``,disabled:C,readOnly:e.readOnly,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),F?.(e)},onValueChange:e=>{f.onChange(e||N),P?.(e)}})})}if(h===`clearable`){let{control:t,name:n,label:r,description:i,required:a,className:o,layout:s,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,emptyValue:N=``,onValueChange:P,onBlur:F,...I}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(c.Input,{...I,clearable:!0,id:j??u,name:f.name,ref:f.ref,value:f.value??``,disabled:C,readOnly:e.readOnly,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),F?.(e)},onValueChange:e=>{f.onChange(e||N),P?.(e)}})})}if(h===`masked`){let{control:t,name:n,label:i,description:a,required:o,className:s,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,valueMode:N=`raw`,onValueChange:P,onBlur:F,...I}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(r.MaskedInput,{...I,id:j??u,name:f.name,ref:f.ref,value:String(f.value??``),disabled:C,readOnly:e.readOnly,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),F?.(e)},onValueChange:(e,t)=>{let n=N===`raw`?t:e;f.onChange(n),P?.(e,t)}})})}if(h===`money`){let{control:t,name:n,label:r,description:a,required:o,className:s,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,emptyValue:N=null,onValueChange:P,onBlur:F,...I}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(i.MoneyInput,{...I,id:j??u,name:f.name,ref:f.ref,value:f.value??null,disabled:C,readOnly:e.readOnly,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),F?.(e)},onValueChange:(e,t)=>{f.onChange(e??N),P?.(e,t)}})})}if(h===`quantity`){let{control:t,name:n,label:r,description:i,required:a,className:o,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,id:j,kind:M,emptyValue:N=null,onValueChange:P,onBlur:F,...I}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:j??u,children:(0,d.jsx)(s.QuantityInput,{...I,id:j??u,name:f.name,ref:f.ref,value:f.value,disabled:C,readOnly:e.readOnly,className:A??g,"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,onBlur:e=>{f.onBlur(),F?.(e)},onValueChange:e=>{f.onChange(e??N),P?.(e)}})})}if(h===`date-range`){let{control:t,name:r,label:i,description:a,required:o,className:s,layout:c,descriptionPosition:h,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,labelClassName:w,labelRowClassName:T,descriptionClassName:E,errorClassName:D,contentClassName:O,fieldClassName:k,id:A,kind:j,onValueChange:M,onBlur:N,...P}=e,F=f.value;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:A??u,children:(0,d.jsx)(n.DateRangeInput,{...P,id:A??u,className:k??g,value:F&&typeof F==`object`?{from:F.from,to:F.to}:{from:``,to:``},fromInputProps:{...P.fromInputProps??{},disabled:C,readOnly:e.readOnly,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0},toInputProps:{...P.toInputProps??{},disabled:C,readOnly:e.readOnly,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0},onValueChange:e=>{f.onChange(e),M?.(e)},"aria-invalid":p.invalid||void 0,onBlur:e=>{f.onBlur(),N?.(e)}})})}let{control:y,name:b,label:x,description:S,required:C,className:w,layout:T,descriptionPosition:E,labelAction:D,requiredIndicator:O,errorIcon:k,showErrorIcon:A,disabled:j,readOnly:M,labelClassName:N,labelRowClassName:P,descriptionClassName:F,errorClassName:I,contentClassName:L,fieldClassName:R,transformIn:z,transformOut:B,id:V,kind:H,onChange:U,onBlur:W,...G}=e;return(0,d.jsx)(l.FormFieldShell,{...m,labelId:v.labelId,descriptionId:v.descriptionId,errorId:v.errorId,error:_,htmlFor:V??u,children:(0,d.jsx)(c.Input,{...G,id:V??u,ref:f.ref,name:f.name,value:z?z(f.value):f.value??``,disabled:j,readOnly:M,onBlur:e=>{f.onBlur(),W?.(e)},onChange:e=>{f.onChange(B?B(e):e.target.value),U?.(e)},"aria-invalid":p.invalid||void 0,"aria-describedby":v.describedBy,"aria-errormessage":_?v.errorId:void 0,className:R??g})})}})}exports.FormInput=m;