tembro 1.0.0

package/dist/components/inputs/clearable-input.js

@@ -0,0 +1,47 @@
+import { stopInteractivePropagation as e } from "../../lib/utils.js";
+import { InputDecorator as t } from "./input-decorator.js";
+import { createInputChangeHandler as n, getInputValue as r } from "./input-value.js";
+import * as i from "react";
+import { XIcon as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inputs/clearable-input.tsx
+var l = i.forwardRef(({ value: l, onChange: u, onValueChange: d, onClear: f, clearable: p = !0, clearLabel: m = "Clear", clearOnEscape: h = !0, focusAfterClear: g = !0, replaceTrailingWhenClear: _ = !0, leadingIcon: v, trailing: y, trailingAction: b, disabled: x, onKeyDown: S, ...C }, w) => {
+	let T = i.useRef(null), E = r(l), D = p && E.length > 0 && !x && !C.readOnly, O = n({
+		onChange: u,
+		onValueChange: d
+	});
+	i.useImperativeHandle(w, () => T.current);
+	let k = () => {
+		D && (d?.(""), f?.(), g && T.current?.focus());
+	}, A = (t) => {
+		e(t), k();
+	}, j = (t) => {
+		e(t);
+	};
+	return /* @__PURE__ */ s(t, {
+		"data-slot": "clearable-input",
+		ref: T,
+		value: E,
+		disabled: x,
+		onChange: O,
+		onKeyDown: (e) => {
+			S?.(e), !e.defaultPrevented && h && e.key === "Escape" && D && (e.preventDefault(), k());
+		},
+		leading: v,
+		trailing: D && _ ? null : y,
+		trailingAction: /* @__PURE__ */ c(o, { children: [b, D && /* @__PURE__ */ s("button", {
+			type: "button",
+			"data-slot": "clearable-input-clear",
+			"aria-label": m,
+			className: "inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+			onClick: A,
+			onMouseDown: j,
+			onDoubleClick: j,
+			children: /* @__PURE__ */ s(a, { className: "size-4" })
+		})] }),
+		...C
+	});
+});
+l.displayName = "ClearableInput";
+//#endregion
+export { l as ClearableInput };

package/dist/components/inputs/color-input.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/input/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({value:e,defaultValue:a=`#000000`,onValueChange:o,label:s,description:c,swatchClassName:l,className:u,disabled:d,...f}){let[p,m]=r.useState(a),h=e??p,g=t=>{e===void 0&&m(t),o?.(t)};return(0,i.jsxs)(`div`,{"data-slot":`color-input`,className:t.cn(`grid gap-2`,u),children:[(s||c)&&(0,i.jsxs)(`div`,{className:`grid gap-0.5`,children:[s&&(0,i.jsx)(`label`,{className:`text-sm font-medium text-foreground`,children:s}),c&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:c})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`input`,{type:`color`,value:h,disabled:d,className:t.cn(`size-9 cursor-pointer rounded-md border bg-background p-1 disabled:cursor-not-allowed disabled:opacity-50`,l),onChange:e=>g(e.currentTarget.value),...f}),(0,i.jsx)(n.Input,{value:h,disabled:d,onChange:e=>g(e.currentTarget.value),className:`font-mono`})]})]})}exports.ColorInput=a;

package/dist/components/inputs/color-input.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type ColorInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    swatchClassName?: string;
+};
+declare function ColorInput({ value, defaultValue, onValueChange, label, description, swatchClassName, className, disabled, ...props }: ColorInputProps): React.JSX.Element;
+export { ColorInput };

package/dist/components/inputs/color-input.js

@@ -0,0 +1,41 @@
+import { cn as e } from "../../lib/utils.js";
+import { Input as t } from "../ui/input/index.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/inputs/color-input.tsx
+function a({ value: a, defaultValue: o = "#000000", onValueChange: s, label: c, description: l, swatchClassName: u, className: d, disabled: f, ...p }) {
+	let [m, h] = n.useState(o), g = a ?? m, _ = (e) => {
+		a === void 0 && h(e), s?.(e);
+	};
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "color-input",
+		className: e("grid gap-2", d),
+		children: [(c || l) && /* @__PURE__ */ i("div", {
+			className: "grid gap-0.5",
+			children: [c && /* @__PURE__ */ r("label", {
+				className: "text-sm font-medium text-foreground",
+				children: c
+			}), l && /* @__PURE__ */ r("div", {
+				className: "text-xs text-muted-foreground",
+				children: l
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ r("input", {
+				type: "color",
+				value: g,
+				disabled: f,
+				className: e("size-9 cursor-pointer rounded-md border bg-background p-1 disabled:cursor-not-allowed disabled:opacity-50", u),
+				onChange: (e) => _(e.currentTarget.value),
+				...p
+			}), /* @__PURE__ */ r(t, {
+				value: g,
+				disabled: f,
+				onChange: (e) => _(e.currentTarget.value),
+				className: "font-mono"
+			})]
+		})]
+	});
+}
+//#endregion
+export { a as ColorInput };

package/dist/components/inputs/combobox.cjs

@@ -0,0 +1 @@
+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");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({value:e,options:s,onValueChange:c,placeholder:l=`Select option`,searchPlaceholder:u=`Search...`,emptyLabel:d=`No option found`,disabled:f=!1,invalid:p,className:m,...h}){let[g,_]=i.useState(!1),[v,y]=i.useState(``),b=s.find(t=>t.value===e),x=v.trim().toLowerCase(),S=s.filter(e=>e.hidden?!1:x?String(e.searchValue??e.label).toLowerCase().includes(x):!0);return(0,o.jsxs)(`div`,{"data-slot":`combobox`,className:t.cn(`relative grid gap-2`,m),...h,children:[(0,o.jsxs)(n.Button,{type:`button`,variant:`outline`,disabled:f,"aria-invalid":p||void 0,className:`w-full justify-between`,onClick:()=>_(e=>!e),children:[(0,o.jsx)(`span`,{className:t.cn(`truncate`,!b&&`text-muted-foreground`),children:b?.label??l}),(0,o.jsx)(a.ChevronDownIcon,{className:`size-4 opacity-60`})]}),g&&(0,o.jsxs)(`div`,{className:`absolute top-full z-30 mt-2 w-full rounded-md border bg-popover p-2 text-popover-foreground shadow-md`,children:[(0,o.jsxs)(`div`,{className:`relative mb-2`,children:[(0,o.jsx)(a.SearchIcon,{className:`pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,o.jsx)(r.Input,{value:v,onChange:e=>y(e.target.value),placeholder:u,className:`h-9 pl-8`})]}),(0,o.jsx)(`div`,{className:`max-h-64 overflow-y-auto`,children:S.length?S.map(n=>{let r=n.value===e;return(0,o.jsxs)(`button`,{type:`button`,disabled:n.disabled,className:t.cn(`flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50`,r&&`bg-muted`),onClick:()=>{c?.(n.value,n),_(!1)},children:[(0,o.jsx)(`span`,{className:`mt-0.5 flex size-4 shrink-0 items-center justify-center`,children:r&&(0,o.jsx)(a.CheckIcon,{className:`size-4`})}),(0,o.jsxs)(`span`,{className:`min-w-0`,children:[(0,o.jsx)(`span`,{className:`block truncate font-medium`,children:n.label}),n.description&&(0,o.jsx)(`span`,{className:`block text-xs text-muted-foreground`,children:n.description})]})]},n.value)}):(0,o.jsx)(`div`,{className:`px-2 py-6 text-center text-sm text-muted-foreground`,children:d})})]})]})}exports.Combobox=s;

package/dist/components/inputs/combobox.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type ComboboxOption<TValue extends string = string> = {
+    value: TValue;
+    label: React.ReactNode;
+    searchValue?: string;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+    value?: TValue;
+    options: ComboboxOption<TValue>[];
+    onValueChange?: (value: TValue | undefined, option?: ComboboxOption<TValue>) => void;
+    placeholder?: React.ReactNode;
+    searchPlaceholder?: string;
+    emptyLabel?: React.ReactNode;
+    disabled?: boolean;
+    invalid?: boolean;
+};
+declare function Combobox<TValue extends string = string>({ value, options, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, invalid, className, ...props }: ComboboxProps<TValue>): React.JSX.Element;
+export { Combobox };

package/dist/components/inputs/combobox.js

@@ -0,0 +1,69 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import { Input as n } from "../ui/input/index.js";
+import * as r from "react";
+import { CheckIcon as i, ChevronDownIcon as a, SearchIcon as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inputs/combobox.tsx
+function l({ value: l, options: u, onValueChange: d, placeholder: f = "Select option", searchPlaceholder: p = "Search...", emptyLabel: m = "No option found", disabled: h = !1, invalid: g, className: _, ...v }) {
+	let [y, b] = r.useState(!1), [x, S] = r.useState(""), C = u.find((e) => e.value === l), w = x.trim().toLowerCase(), T = u.filter((e) => e.hidden ? !1 : w ? String(e.searchValue ?? e.label).toLowerCase().includes(w) : !0);
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "combobox",
+		className: e("relative grid gap-2", _),
+		...v,
+		children: [/* @__PURE__ */ c(t, {
+			type: "button",
+			variant: "outline",
+			disabled: h,
+			"aria-invalid": g || void 0,
+			className: "w-full justify-between",
+			onClick: () => b((e) => !e),
+			children: [/* @__PURE__ */ s("span", {
+				className: e("truncate", !C && "text-muted-foreground"),
+				children: C?.label ?? f
+			}), /* @__PURE__ */ s(a, { className: "size-4 opacity-60" })]
+		}), y && /* @__PURE__ */ c("div", {
+			className: "absolute top-full z-30 mt-2 w-full rounded-md border bg-popover p-2 text-popover-foreground shadow-md",
+			children: [/* @__PURE__ */ c("div", {
+				className: "relative mb-2",
+				children: [/* @__PURE__ */ s(o, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ s(n, {
+					value: x,
+					onChange: (e) => S(e.target.value),
+					placeholder: p,
+					className: "h-9 pl-8"
+				})]
+			}), /* @__PURE__ */ s("div", {
+				className: "max-h-64 overflow-y-auto",
+				children: T.length ? T.map((t) => {
+					let n = t.value === l;
+					return /* @__PURE__ */ c("button", {
+						type: "button",
+						disabled: t.disabled,
+						className: e("flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50", n && "bg-muted"),
+						onClick: () => {
+							d?.(t.value, t), b(!1);
+						},
+						children: [/* @__PURE__ */ s("span", {
+							className: "mt-0.5 flex size-4 shrink-0 items-center justify-center",
+							children: n && /* @__PURE__ */ s(i, { className: "size-4" })
+						}), /* @__PURE__ */ c("span", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ s("span", {
+								className: "block truncate font-medium",
+								children: t.label
+							}), t.description && /* @__PURE__ */ s("span", {
+								className: "block text-xs text-muted-foreground",
+								children: t.description
+							})]
+						})]
+					}, t.value);
+				}) : /* @__PURE__ */ s("div", {
+					className: "px-2 py-6 text-center text-sm text-muted-foreground",
+					children: m
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { l as Combobox };

package/dist/components/inputs/date-input.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./input-decorator.cjs"),n=require("./input-value.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=r.forwardRef(({value:e,onChange:r,onValueChange:o,showIcon:s=!0,icon:c,leading:l,...u},d)=>{let f=n.createInputChangeHandler({onChange:r,onValueChange:o});return(0,a.jsx)(t.InputDecorator,{ref:d,type:`date`,value:n.getInputValue(e),leading:s?c??l??(0,a.jsx)(i.CalendarDaysIcon,{}):l,onChange:f,...u})});o.displayName=`DateInput`,exports.DateInput=o;

package/dist/components/inputs/date-input.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { InputDecorator } from "@/components/inputs/input-decorator";
+export type DateInputProps = Omit<React.ComponentProps<typeof InputDecorator>, "type" | "value" | "onChange"> & {
+    value?: string | null;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onValueChange?: (value: string) => void;
+    showIcon?: boolean;
+    icon?: React.ReactNode;
+};
+declare const DateInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { DateInput };

package/dist/components/inputs/date-input.js

@@ -0,0 +1,23 @@
+import { InputDecorator as e } from "./input-decorator.js";
+import { createInputChangeHandler as t, getInputValue as n } from "./input-value.js";
+import * as r from "react";
+import { CalendarDaysIcon as i } from "lucide-react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/inputs/date-input.tsx
+var o = r.forwardRef(({ value: r, onChange: o, onValueChange: s, showIcon: c = !0, icon: l, leading: u, ...d }, f) => {
+	let p = t({
+		onChange: o,
+		onValueChange: s
+	});
+	return /* @__PURE__ */ a(e, {
+		ref: f,
+		type: "date",
+		value: n(r),
+		leading: c ? l ?? u ?? /* @__PURE__ */ a(i, {}) : u,
+		onChange: p,
+		...d
+	});
+});
+o.displayName = "DateInput";
+//#endregion
+export { o as DateInput };

package/dist/components/inputs/date-range-input.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./date-input.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({className:e,value:r,onValueChange:a,fromPlaceholder:o=`From`,toPlaceholder:s=`To`,fromInputProps:c,toInputProps:l,separator:u=`—`,inputClassName:d,...f}){let p=e=>{a?.({from:r?.from??``,to:r?.to??``,...e})};return(0,i.jsxs)(`div`,{"data-slot":`date-range-input`,className:t.cn(`flex w-full flex-col gap-2 sm:flex-row sm:items-center`,e),...f,children:[(0,i.jsx)(n.DateInput,{value:r?.from??``,placeholder:o,className:d,onValueChange:e=>p({from:e}),...c}),(0,i.jsx)(`span`,{className:`hidden text-sm text-muted-foreground sm:inline-flex`,children:u}),(0,i.jsx)(n.DateInput,{value:r?.to??``,placeholder:s,className:d,onValueChange:e=>p({to:e}),...l})]})}exports.DateRangeInput=a;

package/dist/components/inputs/date-range-input.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type DateInputProps } from "@/components/inputs/date-input";
+export type DateRangeValue = {
+    from?: string;
+    to?: string;
+};
+export type DateRangeInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: DateRangeValue;
+    onValueChange?: (value: DateRangeValue) => void;
+    fromPlaceholder?: string;
+    toPlaceholder?: string;
+    fromInputProps?: Omit<DateInputProps, "value" | "onValueChange">;
+    toInputProps?: Omit<DateInputProps, "value" | "onValueChange">;
+    separator?: React.ReactNode;
+    inputClassName?: string;
+};
+declare function DateRangeInput({ className, value, onValueChange, fromPlaceholder, toPlaceholder, fromInputProps, toInputProps, separator, inputClassName, ...props }: DateRangeInputProps): React.JSX.Element;
+export { DateRangeInput };

package/dist/components/inputs/date-range-input.js

@@ -0,0 +1,41 @@
+import { cn as e } from "../../lib/utils.js";
+import { DateInput as t } from "./date-input.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/inputs/date-range-input.tsx
+function i({ className: i, value: a, onValueChange: o, fromPlaceholder: s = "From", toPlaceholder: c = "To", fromInputProps: l, toInputProps: u, separator: d = "—", inputClassName: f, ...p }) {
+	let m = (e) => {
+		o?.({
+			from: a?.from ?? "",
+			to: a?.to ?? "",
+			...e
+		});
+	};
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "date-range-input",
+		className: e("flex w-full flex-col gap-2 sm:flex-row sm:items-center", i),
+		...p,
+		children: [
+			/* @__PURE__ */ n(t, {
+				value: a?.from ?? "",
+				placeholder: s,
+				className: f,
+				onValueChange: (e) => m({ from: e }),
+				...l
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "hidden text-sm text-muted-foreground sm:inline-flex",
+				children: d
+			}),
+			/* @__PURE__ */ n(t, {
+				value: a?.to ?? "",
+				placeholder: c,
+				className: f,
+				onValueChange: (e) => m({ to: e }),
+				...u
+			})
+		]
+	});
+}
+//#endregion
+export { i as DateRangeInput };

package/dist/components/inputs/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(`password-input`,`PasswordInput`,`inputs`,`Password field with visibility toggle and secure autocomplete defaults.`),e.component(`number-input`,`NumberInput`,`inputs`,`Numeric entry surface for counts, thresholds and dashboard filters.`),e.component(`phone-input`,`PhoneInput`,`inputs`,`Masked phone entry that preserves stable value handling in forms.`),e.component(`money-input`,`MoneyInput`,`inputs`,`Currency-focused value entry for invoices, pricing and finance screens.`),e.component(`date-input`,`DateInput`,`inputs`,`Single-date entry with normalized string value handling.`),e.component(`date-range-input`,`DateRangeInput`,`inputs`,`Range-based date entry for reporting, booking and filter flows.`),e.component(`simple-select`,`SimpleSelect`,`inputs`,`Static select member for local option sets and lightweight filter panels.`),e.component(`async-select`,`AsyncSelect`,`inputs`,`Remote select member for server search, hydration and large datasets.`),e.component(`combobox`,`Combobox`,`inputs`,`Local searchable choice input for reassignment and command-like selection.`),e.component(`slider`,`Slider`,`inputs`,`Single value range control for density, threshold, and score tuning.`),e.component(`range-slider`,`RangeSlider`,`inputs`,`Two-handle slider for min/max filtering.`),e.component(`rating`,`Rating`,`inputs`,`Compact score input for feedback and review flows.`),e.component(`otp-input`,`OtpInput`,`inputs`,`One-time code entry with fixed-length slots.`),e.component(`color-input`,`ColorInput`,`inputs`,`Theme and accent color field with native color selection.`),e.component(`inline-editable`,`InlineEditable`,`inputs`,`Inline text editing for compact dashboards and settings tables.`),e.component(`tag-input`,`TagInput`,`inputs`,`Tokenized text input for labels, skills, and quick filters.`)]);exports.inputsShowcaseDemoRegistry=t;

package/dist/components/inputs/demo.d.ts

@@ -0,0 +1,6 @@
+export declare const inputsShowcaseDemoRegistry: {
+    [k: string]: {
+        mock: import("../../showcase").ShowcaseDemoMock;
+        Showcase: (props: import("../../showcase").ShowcaseDemoProps) => import("react").JSX.Element;
+    };
+};

package/dist/components/inputs/demo.js

@@ -0,0 +1,22 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/inputs/demo.tsx
+var n = t([
+	e("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
+	e("number-input", "NumberInput", "inputs", "Numeric entry surface for counts, thresholds and dashboard filters."),
+	e("phone-input", "PhoneInput", "inputs", "Masked phone entry that preserves stable value handling in forms."),
+	e("money-input", "MoneyInput", "inputs", "Currency-focused value entry for invoices, pricing and finance screens."),
+	e("date-input", "DateInput", "inputs", "Single-date entry with normalized string value handling."),
+	e("date-range-input", "DateRangeInput", "inputs", "Range-based date entry for reporting, booking and filter flows."),
+	e("simple-select", "SimpleSelect", "inputs", "Static select member for local option sets and lightweight filter panels."),
+	e("async-select", "AsyncSelect", "inputs", "Remote select member for server search, hydration and large datasets."),
+	e("combobox", "Combobox", "inputs", "Local searchable choice input for reassignment and command-like selection."),
+	e("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
+	e("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
+	e("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
+	e("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
+	e("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
+	e("inline-editable", "InlineEditable", "inputs", "Inline text editing for compact dashboards and settings tables."),
+	e("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters.")
+]);
+//#endregion
+export { n as inputsShowcaseDemoRegistry };

package/dist/components/inputs/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./clearable-input.cjs"),t=require("./date-input.cjs"),n=require("./date-range-input.cjs"),r=require("./money-input.cjs"),i=require("./masked-input.cjs"),a=require("./number-input.cjs"),o=require("./password-input.cjs"),s=require("./phone-input.cjs"),c=require("./quantity-input.cjs"),l=require("./search-input.cjs"),u=require("./async-select.cjs"),d=require("./combobox.cjs"),f=require("./simple-select.cjs"),p=require("./color-input.cjs"),m=require("./otp-input.cjs"),h=require("./quantity-stepper.cjs"),g=require("./rating.cjs"),_=require("./slider.cjs"),v=require("./tag-input.cjs"),y=require("./inline-editable.cjs"),b=require("./cascader.cjs"),x=require("./json-input.cjs"),S=require("./mention-input.cjs"),C=require("./time-picker.cjs");exports.AsyncMultiSelect=u.AsyncMultiSelect,exports.AsyncSelect=u.AsyncSelect,exports.Cascader=b.Cascader,exports.ClearableInput=e.ClearableInput,exports.ColorInput=p.ColorInput,exports.Combobox=d.Combobox,exports.DateInput=t.DateInput,exports.DateRangeInput=n.DateRangeInput,exports.DateTimePicker=C.DateTimePicker,exports.InlineEditable=y.InlineEditable,exports.JsonInput=x.JsonInput,exports.MaskedInput=i.MaskedInput,exports.MentionInput=S.MentionInput,exports.MoneyInput=r.MoneyInput,exports.NumberInput=a.NumberInput,exports.OtpInput=m.OtpInput,exports.PasswordInput=o.PasswordInput,exports.PhoneInput=s.PhoneInput,exports.QuantityInput=c.QuantityInput,exports.QuantityStepper=h.QuantityStepper,exports.RangeSlider=_.RangeSlider,exports.Rating=g.Rating,exports.SearchInput=l.SearchInput,exports.SimpleSelect=f.SimpleSelect,exports.Slider=_.Slider,exports.TagInput=v.TagInput,exports.TimePicker=C.TimePicker,exports.TimeRangePicker=C.TimeRangePicker,exports.clampNumber=a.clampNumber,exports.clampQuantity=c.clampQuantity,exports.formatPhoneDigits=s.formatPhoneDigits,exports.onlyDigits=s.onlyDigits,exports.parseMoneyInput=r.parseMoneyInput,exports.parseNumberInput=a.parseNumberInput;

package/dist/components/inputs/index.d.ts

@@ -0,0 +1,24 @@
+export * from "./async-select";
+export * from "./clearable-input";
+export * from "./combobox";
+export * from "./color-input";
+export * from "./date-input";
+export * from "./date-range-input";
+export * from "./masked-input";
+export * from "./money-input";
+export * from "./number-input";
+export * from "./otp-input";
+export * from "./password-input";
+export * from "./phone-input";
+export * from "./quantity-input";
+export * from "./quantity-stepper";
+export * from "./rating";
+export * from "./search-input";
+export * from "./simple-select";
+export * from "./cascader";
+export * from "./json-input";
+export * from "./mention-input";
+export * from "./time-picker";
+export * from "./slider";
+export * from "./tag-input";
+export * from "./inline-editable";

package/dist/components/inputs/index.js

@@ -0,0 +1,25 @@
+import { ClearableInput as e } from "./clearable-input.js";
+import { DateInput as t } from "./date-input.js";
+import { DateRangeInput as n } from "./date-range-input.js";
+import { MoneyInput as r, parseMoneyInput as i } from "./money-input.js";
+import { MaskedInput as a } from "./masked-input.js";
+import { NumberInput as o, clampNumber as s, parseNumberInput as c } from "./number-input.js";
+import { PasswordInput as l } from "./password-input.js";
+import { PhoneInput as u, formatPhoneDigits as d, onlyDigits as f } from "./phone-input.js";
+import { QuantityInput as p, clampQuantity as m } from "./quantity-input.js";
+import { SearchInput as h } from "./search-input.js";
+import { AsyncMultiSelect as g, AsyncSelect as _ } from "./async-select.js";
+import { Combobox as v } from "./combobox.js";
+import { SimpleSelect as y } from "./simple-select.js";
+import { ColorInput as b } from "./color-input.js";
+import { OtpInput as x } from "./otp-input.js";
+import { QuantityStepper as S } from "./quantity-stepper.js";
+import { Rating as C } from "./rating.js";
+import { RangeSlider as w, Slider as T } from "./slider.js";
+import { TagInput as E } from "./tag-input.js";
+import { InlineEditable as D } from "./inline-editable.js";
+import { Cascader as O } from "./cascader.js";
+import { JsonInput as k } from "./json-input.js";
+import { MentionInput as A } from "./mention-input.js";
+import { DateTimePicker as j, TimePicker as M, TimeRangePicker as N } from "./time-picker.js";
+export { g as AsyncMultiSelect, _ as AsyncSelect, O as Cascader, e as ClearableInput, b as ColorInput, v as Combobox, t as DateInput, n as DateRangeInput, j as DateTimePicker, D as InlineEditable, k as JsonInput, a as MaskedInput, A as MentionInput, r as MoneyInput, o as NumberInput, x as OtpInput, l as PasswordInput, u as PhoneInput, p as QuantityInput, S as QuantityStepper, w as RangeSlider, C as Rating, h as SearchInput, y as SimpleSelect, T as Slider, E as TagInput, M as TimePicker, N as TimeRangePicker, s as clampNumber, m as clampQuantity, d as formatPhoneDigits, f as onlyDigits, i as parseMoneyInput, c as parseNumberInput };

package/dist/components/inputs/inline-editable.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/input/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({value:e,onValueChange:a,placeholder:o=`Click to edit`,disabled:s,className:c,inputClassName:l,displayClassName:u,...d}){let[f,p]=r.useState(!1),[m,h]=r.useState(e),g=r.useRef(null);r.useEffect(()=>{h(e)},[e]),r.useEffect(()=>{f&&g.current?.focus()},[f]);let _=()=>{s||(a(m),p(!1))},v=()=>{h(e),p(!1)},y=e=>{e.key===`Enter`?(e.preventDefault(),_()):e.key===`Escape`&&(e.preventDefault(),v())};return f?(0,i.jsx)(`div`,{"data-slot":`inline-editable-input-mode`,className:t.cn(`flex items-center gap-1`,c),...d,children:(0,i.jsx)(n.Input,{ref:g,value:m,onChange:e=>h(e.target.value),onKeyDown:y,onBlur:_,disabled:s,placeholder:o,className:t.cn(`h-8 text-sm`,l)})}):(0,i.jsx)(`div`,{"data-slot":`inline-editable`,className:t.cn(`group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 py-1 -ml-1.5 transition-colors`,!s&&`cursor-pointer hover:bg-muted/50`,c),onClick:()=>{s||p(!0)},tabIndex:s?void 0:0,onKeyDown:e=>{!s&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p(!0))},...d,children:(0,i.jsx)(`span`,{className:t.cn(`truncate text-sm`,!e&&`text-muted-foreground italic`,s&&`opacity-50`,u),children:e||o})})}exports.InlineEditable=a;

package/dist/components/inputs/inline-editable.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type InlineEditableProps = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    inputClassName?: string;
+    displayClassName?: string;
+};
+declare function InlineEditable({ value, onValueChange, placeholder, disabled, className, inputClassName, displayClassName, ...props }: InlineEditableProps): React.JSX.Element;
+export { InlineEditable };

package/dist/components/inputs/inline-editable.js

@@ -0,0 +1,52 @@
+import { cn as e } from "../../lib/utils.js";
+import { Input as t } from "../ui/input/index.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/inputs/inline-editable.tsx
+function i({ value: i, onValueChange: a, placeholder: o = "Click to edit", disabled: s, className: c, inputClassName: l, displayClassName: u, ...d }) {
+	let [f, p] = n.useState(!1), [m, h] = n.useState(i), g = n.useRef(null);
+	n.useEffect(() => {
+		h(i);
+	}, [i]), n.useEffect(() => {
+		f && g.current?.focus();
+	}, [f]);
+	let _ = () => {
+		s || (a(m), p(!1));
+	}, v = () => {
+		h(i), p(!1);
+	}, y = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), _()) : e.key === "Escape" && (e.preventDefault(), v());
+	};
+	return f ? /* @__PURE__ */ r("div", {
+		"data-slot": "inline-editable-input-mode",
+		className: e("flex items-center gap-1", c),
+		...d,
+		children: /* @__PURE__ */ r(t, {
+			ref: g,
+			value: m,
+			onChange: (e) => h(e.target.value),
+			onKeyDown: y,
+			onBlur: _,
+			disabled: s,
+			placeholder: o,
+			className: e("h-8 text-sm", l)
+		})
+	}) : /* @__PURE__ */ r("div", {
+		"data-slot": "inline-editable",
+		className: e("group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 py-1 -ml-1.5 transition-colors", !s && "cursor-pointer hover:bg-muted/50", c),
+		onClick: () => {
+			s || p(!0);
+		},
+		tabIndex: s ? void 0 : 0,
+		onKeyDown: (e) => {
+			!s && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p(!0));
+		},
+		...d,
+		children: /* @__PURE__ */ r("span", {
+			className: e("truncate text-sm", !i && "text-muted-foreground italic", s && "opacity-50", u),
+			children: i || o
+		})
+	});
+}
+//#endregion
+export { i as InlineEditable };

package/dist/components/inputs/input-chrome.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("react/jsx-runtime");function i({start:e,end:n,startClassName:i,endClassName:a,className:o,children:s,...c}){return(0,r.jsxs)(`div`,{"data-slot":`input-chrome`,className:t.cn(`flex h-10 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]`,o),...c,children:[e&&(0,r.jsx)(`span`,{className:t.cn(`shrink-0`,i),children:e}),s,n&&(0,r.jsx)(`span`,{className:t.cn(`shrink-0`,a),children:n})]})}exports.InputChrome=i;

package/dist/components/inputs/input-chrome.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+type InputChromeProps = React.ComponentProps<"div"> & {
+    start?: React.ReactNode;
+    end?: React.ReactNode;
+    startClassName?: string;
+    endClassName?: string;
+};
+declare function InputChrome({ start, end, startClassName, endClassName, className, children, ...props }: InputChromeProps): React.JSX.Element;
+export { InputChrome };

package/dist/components/inputs/input-chrome.js

@@ -0,0 +1,24 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/inputs/input-chrome.tsx
+function r({ start: r, end: i, startClassName: a, endClassName: o, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "input-chrome",
+		className: e("flex h-10 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]", s),
+		...l,
+		children: [
+			r && /* @__PURE__ */ t("span", {
+				className: e("shrink-0", a),
+				children: r
+			}),
+			c,
+			i && /* @__PURE__ */ t("span", {
+				className: e("shrink-0", o),
+				children: i
+			})
+		]
+	});
+}
+//#endregion
+export { r as InputChrome };

package/dist/components/inputs/input-decorator.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/input/primitive.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("class-variance-authority"),a=require("react/jsx-runtime");var o=(0,i.cva)(`relative flex w-full items-center`,{variants:{density:{compact:`text-xs`,default:`text-sm`,comfortable:`text-base`},tone:{neutral:``,info:`[&_[data-slot=input]]:border-blue-500/30 [&_[data-slot=input]]:focus-visible:ring-blue-500/20`,success:`[&_[data-slot=input]]:border-emerald-500/30 [&_[data-slot=input]]:focus-visible:ring-emerald-500/20`,warning:`[&_[data-slot=input]]:border-amber-500/35 [&_[data-slot=input]]:focus-visible:ring-amber-500/20`,danger:`[&_[data-slot=input]]:border-destructive/40 [&_[data-slot=input]]:focus-visible:ring-destructive/20`}},defaultVariants:{density:`default`,tone:`neutral`}}),s=r.forwardRef(({className:e,value:r,leading:i,trailing:s,trailingAction:c,leadingPointerEvents:l=!1,trailingPointerEvents:u=!0,trailingActionPointerEvents:d=!0,wrapperClassName:f,inputClassName:p,leadingClassName:m,trailingClassName:h,trailingActionClassName:g,density:_,tone:v,...y},b)=>{let x=!!i,S=!!s,C=!!c,w=r==null?r===null?``:void 0:Array.isArray(r)?r:String(r);return(0,a.jsxs)(`div`,{"data-slot":`input-decorator`,"data-has-leading":x||void 0,"data-has-trailing":S||void 0,className:t.cn(o({density:_,tone:v}),f),children:[x&&(0,a.jsx)(`span`,{"data-slot":`input-leading`,className:t.cn(`absolute left-4 z-10 flex items-center text-muted-foreground/74 [&_svg]:size-4`,!l&&`pointer-events-none`,m),children:i}),(0,a.jsx)(n.InputPrimitive,{ref:b,value:w,className:t.cn(x&&`pl-11`,S&&C?`pr-28`:S||C?`pr-12`:void 0,p,e),...y}),S&&(0,a.jsx)(`span`,{"data-slot":`input-trailing`,className:t.cn(`absolute right-12 z-10 flex items-center gap-1.5 text-muted-foreground/74`,!u&&`pointer-events-none`,h),children:s}),C&&(0,a.jsx)(`span`,{"data-slot":`input-trailing-action`,className:t.cn(`absolute right-3 z-10 flex items-center gap-1.5 text-muted-foreground/74`,!d&&`pointer-events-none`,g),children:c})]})});s.displayName=`InputDecorator`,exports.InputDecorator=s,exports.inputDecoratorVariants=o;

package/dist/components/inputs/input-decorator.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { InputPrimitive } from "@/components/ui/input-primitive";
+declare const inputDecoratorVariants: (props?: ({
+    density?: "default" | "compact" | "comfortable" | null | undefined;
+    tone?: "warning" | "neutral" | "info" | "success" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputDecoratorProps = Omit<React.ComponentProps<typeof InputPrimitive>, "value"> & VariantProps<typeof inputDecoratorVariants> & {
+    value?: string | number | readonly string[] | null;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    trailingAction?: React.ReactNode;
+    leadingPointerEvents?: boolean;
+    trailingPointerEvents?: boolean;
+    trailingActionPointerEvents?: boolean;
+    wrapperClassName?: string;
+    inputClassName?: string;
+    leadingClassName?: string;
+    trailingClassName?: string;
+    trailingActionClassName?: string;
+};
+declare const InputDecorator: React.ForwardRefExoticComponent<Omit<InputDecoratorProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { InputDecorator, inputDecoratorVariants };

package/dist/components/inputs/input-decorator.js

@@ -0,0 +1,63 @@
+import { cn as e } from "../../lib/utils.js";
+import { InputPrimitive as t } from "../ui/input/primitive.js";
+import * as n from "react";
+import { cva as r } from "class-variance-authority";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/inputs/input-decorator.tsx
+var o = r("relative flex w-full items-center", {
+	variants: {
+		density: {
+			compact: "text-xs",
+			default: "text-sm",
+			comfortable: "text-base"
+		},
+		tone: {
+			neutral: "",
+			info: "[&_[data-slot=input]]:border-blue-500/30 [&_[data-slot=input]]:focus-visible:ring-blue-500/20",
+			success: "[&_[data-slot=input]]:border-emerald-500/30 [&_[data-slot=input]]:focus-visible:ring-emerald-500/20",
+			warning: "[&_[data-slot=input]]:border-amber-500/35 [&_[data-slot=input]]:focus-visible:ring-amber-500/20",
+			danger: "[&_[data-slot=input]]:border-destructive/40 [&_[data-slot=input]]:focus-visible:ring-destructive/20"
+		}
+	},
+	defaultVariants: {
+		density: "default",
+		tone: "neutral"
+	}
+}), s = n.forwardRef(({ className: n, value: r, leading: s, trailing: c, trailingAction: l, leadingPointerEvents: u = !1, trailingPointerEvents: d = !0, trailingActionPointerEvents: f = !0, wrapperClassName: p, inputClassName: m, leadingClassName: h, trailingClassName: g, trailingActionClassName: _, density: v, tone: y, ...b }, x) => {
+	let S = !!s, C = !!c, w = !!l, T = r == null ? r === null ? "" : void 0 : Array.isArray(r) ? r : String(r);
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-decorator",
+		"data-has-leading": S || void 0,
+		"data-has-trailing": C || void 0,
+		className: e(o({
+			density: v,
+			tone: y
+		}), p),
+		children: [
+			S && /* @__PURE__ */ i("span", {
+				"data-slot": "input-leading",
+				className: e("absolute left-4 z-10 flex items-center text-muted-foreground/74 [&_svg]:size-4", !u && "pointer-events-none", h),
+				children: s
+			}),
+			/* @__PURE__ */ i(t, {
+				ref: x,
+				value: T,
+				className: e(S && "pl-11", C && w ? "pr-28" : C || w ? "pr-12" : void 0, m, n),
+				...b
+			}),
+			C && /* @__PURE__ */ i("span", {
+				"data-slot": "input-trailing",
+				className: e("absolute right-12 z-10 flex items-center gap-1.5 text-muted-foreground/74", !d && "pointer-events-none", g),
+				children: c
+			}),
+			w && /* @__PURE__ */ i("span", {
+				"data-slot": "input-trailing-action",
+				className: e("absolute right-3 z-10 flex items-center gap-1.5 text-muted-foreground/74", !f && "pointer-events-none", _),
+				children: l
+			})
+		]
+	});
+});
+s.displayName = "InputDecorator";
+//#endregion
+export { s as InputDecorator, o as inputDecoratorVariants };

package/dist/components/inputs/input-value.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e==null?``:String(e)}function t(e,t){e.target.value=t,e.currentTarget.value=t}function n({onChange:e,onValueChange:t,mapValue:n}){return r=>{if(e?.(r),!t)return;let i=r.target.value;t(n?n(i,r):i)}}exports.createInputChangeHandler=n,exports.getInputValue=e,exports.setInputElementValue=t;