tembro 1.0.0

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

@@ -0,0 +1,24 @@
+export * from "./async-select";
+export * from "./combobox";
+export * from "./simple-select";
+export * from "./clearable-input";
+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 "./slider";
+export * from "./tag-input";
+export * from "./inline-editable";
+export * from "./cascader";
+export * from "./json-input";
+export * from "./mention-input";
+export * from "./time-picker";

package/dist/components/inputs/public.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/quantity-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/button/index.cjs"),r=require("../ui/input/primitive.cjs"),i=require("./input-value.cjs"),a=require("./input-chrome.cjs"),o=require("./numeric-value.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");function u(e,t,n){return o.clampNumericValue(e,t,n)}function d({value:e,onChange:s,onValueChange:d,min:f,max:p,step:m=1,showControls:h=!0,wrapperClassName:g,inputClassName:_,className:v,inputMode:y=`decimal`,...b}){let x=typeof e!=`number`||typeof f!=`number`||e>f,S=typeof e!=`number`||typeof p!=`number`||e<p,C=e=>{d?.(e)},w=e=>{s?.(e);let t=o.parseDecimalInput(e.target.value);if(t==null){C(null);return}C(u(t,f,p))},T=t=>{C(u((typeof e==`number`?e:f??0)+m*t,f,p))};return(0,l.jsx)(a.InputChrome,{"data-slot":`quantity-input`,className:t.cn(`overflow-hidden`,g),start:h?(0,l.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,className:`h-full rounded-none`,disabled:!x||b.disabled||b.readOnly,onClick:()=>T(-1),children:(0,l.jsx)(c.MinusIcon,{})}):null,end:h?(0,l.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,className:`h-full rounded-none`,disabled:!S||b.disabled||b.readOnly,onClick:()=>T(1),children:(0,l.jsx)(c.PlusIcon,{})}):null,children:(0,l.jsx)(r.InputPrimitive,{value:i.getInputValue(e),onChange:w,inputMode:y,className:t.cn(`h-full border-0 bg-transparent text-center shadow-none focus-visible:border-0 focus-visible:ring-0`,_,v),...b})})}exports.QuantityInput=d,exports.clampQuantity=u;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type QuantityInputProps = Omit<React.ComponentProps<"input">, "value" | "onChange" | "type"> & {
+    value?: number | null;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    showControls?: boolean;
+    wrapperClassName?: string;
+    inputClassName?: string;
+};
+declare function clampQuantity(value: number, min?: number, max?: number): number;
+declare function QuantityInput({ value, onChange, onValueChange, min, max, step, showControls, wrapperClassName, inputClassName, className, inputMode, ...props }: QuantityInputProps): React.JSX.Element;
+export { QuantityInput, clampQuantity };

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

@@ -0,0 +1,59 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import { InputPrimitive as n } from "../ui/input/primitive.js";
+import { getInputValue as r } from "./input-value.js";
+import { InputChrome as i } from "./input-chrome.js";
+import { clampNumericValue as a, parseDecimalInput as o } from "./numeric-value.js";
+import "react";
+import { MinusIcon as s, PlusIcon as c } from "lucide-react";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/components/inputs/quantity-input.tsx
+function u(e, t, n) {
+	return a(e, t, n);
+}
+function d({ value: a, onChange: d, onValueChange: f, min: p, max: m, step: h = 1, showControls: g = !0, wrapperClassName: _, inputClassName: v, className: y, inputMode: b = "decimal", ...x }) {
+	let S = typeof a != "number" || typeof p != "number" || a > p, C = typeof a != "number" || typeof m != "number" || a < m, w = (e) => {
+		f?.(e);
+	}, T = (e) => {
+		d?.(e);
+		let t = o(e.target.value);
+		if (t == null) {
+			w(null);
+			return;
+		}
+		w(u(t, p, m));
+	}, E = (e) => {
+		w(u((typeof a == "number" ? a : p ?? 0) + h * e, p, m));
+	};
+	return /* @__PURE__ */ l(i, {
+		"data-slot": "quantity-input",
+		className: e("overflow-hidden", _),
+		start: g ? /* @__PURE__ */ l(t, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: "h-full rounded-none",
+			disabled: !S || x.disabled || x.readOnly,
+			onClick: () => E(-1),
+			children: /* @__PURE__ */ l(s, {})
+		}) : null,
+		end: g ? /* @__PURE__ */ l(t, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: "h-full rounded-none",
+			disabled: !C || x.disabled || x.readOnly,
+			onClick: () => E(1),
+			children: /* @__PURE__ */ l(c, {})
+		}) : null,
+		children: /* @__PURE__ */ l(n, {
+			value: r(a),
+			onChange: T,
+			inputMode: b,
+			className: e("h-full border-0 bg-transparent text-center shadow-none focus-visible:border-0 focus-visible:ring-0", v, y),
+			...x
+		})
+	});
+}
+//#endregion
+export { d as QuantityInput, u as clampQuantity };

package/dist/components/inputs/quantity-stepper.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,defaultValue:s=0,onValueChange:c,min:l=0,max:u,step:d=1,disabled:f=!1,className:p,...m}){let[h,g]=i.useState(s),_=e??h,v=t=>{let n=Math.max(l,Math.min(u??t,Number.isFinite(t)?t:l));e===void 0&&g(n),c?.(n)};return(0,o.jsxs)(`div`,{"data-slot":`quantity-stepper`,className:t.cn(`inline-flex items-center rounded-lg border bg-background`,p),...m,children:[(0,o.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,disabled:f||_<=l,onClick:()=>v(_-d),children:[(0,o.jsx)(a.MinusIcon,{}),(0,o.jsx)(`span`,{className:`sr-only`,children:`Decrease`})]}),(0,o.jsx)(r.Input,{value:_,disabled:f,inputMode:`numeric`,className:`h-8 w-14 border-0 text-center shadow-none focus-visible:ring-0`,onChange:e=>v(Number(e.currentTarget.value))}),(0,o.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,disabled:f||u!==void 0&&_>=u,onClick:()=>v(_+d),children:[(0,o.jsx)(a.PlusIcon,{}),(0,o.jsx)(`span`,{className:`sr-only`,children:`Increase`})]})]})}exports.QuantityStepper=s;

package/dist/components/inputs/quantity-stepper.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type QuantityStepperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+};
+declare function QuantityStepper({ value, defaultValue, onValueChange, min, max, step, disabled, className, ...props }: QuantityStepperProps): React.JSX.Element;
+export { QuantityStepper };

package/dist/components/inputs/quantity-stepper.js

@@ -0,0 +1,51 @@
+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 { MinusIcon as i, PlusIcon as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/inputs/quantity-stepper.tsx
+function c({ value: c, defaultValue: l = 0, onValueChange: u, min: d = 0, max: f, step: p = 1, disabled: m = !1, className: h, ...g }) {
+	let [_, v] = r.useState(l), y = c ?? _, b = (e) => {
+		let t = Math.max(d, Math.min(f ?? e, Number.isFinite(e) ? e : d));
+		c === void 0 && v(t), u?.(t);
+	};
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "quantity-stepper",
+		className: e("inline-flex items-center rounded-lg border bg-background", h),
+		...g,
+		children: [
+			/* @__PURE__ */ s(t, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				disabled: m || y <= d,
+				onClick: () => b(y - p),
+				children: [/* @__PURE__ */ o(i, {}), /* @__PURE__ */ o("span", {
+					className: "sr-only",
+					children: "Decrease"
+				})]
+			}),
+			/* @__PURE__ */ o(n, {
+				value: y,
+				disabled: m,
+				inputMode: "numeric",
+				className: "h-8 w-14 border-0 text-center shadow-none focus-visible:ring-0",
+				onChange: (e) => b(Number(e.currentTarget.value))
+			}),
+			/* @__PURE__ */ s(t, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				disabled: m || f !== void 0 && y >= f,
+				onClick: () => b(y + p),
+				children: [/* @__PURE__ */ o(a, {}), /* @__PURE__ */ o("span", {
+					className: "sr-only",
+					children: "Increase"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { c as QuantityStepper };

package/dist/components/inputs/rating.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({value:e,defaultValue:a=0,onValueChange:o,count:s=5,allowClear:c=!0,disabled:l=!1,readOnly:u=!1,labels:d,icon:f,className:p,...m}){let[h,g]=n.useState(a),[_,v]=n.useState(null),y=e??h,b=_??y,x=!l&&!u,S=t=>{if(!x)return;let n=c&&t===y?0:t;e===void 0&&g(n),o?.(n)},C=(e,t)=>{x&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),S(t))};return(0,i.jsxs)(`div`,{"data-slot":`rating`,role:`radiogroup`,"aria-disabled":l||void 0,className:t.cn(`inline-flex min-h-11 items-center gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-2 py-1.5 shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,p),onMouseLeave:()=>v(null),...m,children:[Array.from({length:s},(e,n)=>{let a=n+1,o=a<=b;return(0,i.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":a===y,"aria-label":d?.rate?.(a)??`Rate ${a}`,disabled:l,tabIndex:u?-1:0,className:t.cn(`inline-flex size-8 items-center justify-center rounded-full text-[color:var(--aui-text-muted)] outline-none transition duration-150 focus-visible:ring-2 focus-visible:ring-[color:var(--aui-brand-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--aui-page-bg)] disabled:pointer-events-none disabled:opacity-50`,x&&`hover:bg-[color:var(--aui-control-bg)] hover:text-[color:var(--aui-brand-strong)]`,o&&`bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,transparent)] text-[color:var(--aui-brand-strong)]`),onMouseEnter:()=>x&&v(a),onClick:()=>S(a),onKeyDown:e=>C(e,a),children:f??(0,i.jsx)(r.StarIcon,{className:t.cn(`size-4.5`,o&&`fill-current`)})},a)}),c&&y>0&&x&&(0,i.jsx)(`button`,{type:`button`,className:`ml-1 inline-flex h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground`,onClick:()=>S(0),children:d?.clear??`Clear`})]})}exports.Rating=a;

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type RatingProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    allowClear?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    labels?: {
+        rate?: (value: number) => string;
+        clear?: string;
+    };
+    icon?: React.ReactNode;
+};
+declare function Rating({ value, defaultValue, onValueChange, count, allowClear, disabled, readOnly, labels, icon, className, ...props }: RatingProps): React.JSX.Element;
+export { Rating };

package/dist/components/inputs/rating.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { StarIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/inputs/rating.tsx
+function a({ value: a, defaultValue: o = 0, onValueChange: s, count: c = 5, allowClear: l = !0, disabled: u = !1, readOnly: d = !1, labels: f, icon: p, className: m, ...h }) {
+	let [g, _] = t.useState(o), [v, y] = t.useState(null), b = a ?? g, x = v ?? b, S = !u && !d, C = (e) => {
+		if (!S) return;
+		let t = l && e === b ? 0 : e;
+		a === void 0 && _(t), s?.(t);
+	}, w = (e, t) => {
+		S && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), C(t));
+	};
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "rating",
+		role: "radiogroup",
+		"aria-disabled": u || void 0,
+		className: e("inline-flex min-h-11 items-center gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-2 py-1.5 shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]", m),
+		onMouseLeave: () => y(null),
+		...h,
+		children: [Array.from({ length: c }, (t, i) => {
+			let a = i + 1, o = a <= x;
+			return /* @__PURE__ */ r("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": a === b,
+				"aria-label": f?.rate?.(a) ?? `Rate ${a}`,
+				disabled: u,
+				tabIndex: d ? -1 : 0,
+				className: e("inline-flex size-8 items-center justify-center rounded-full text-[color:var(--aui-text-muted)] outline-none transition duration-150 focus-visible:ring-2 focus-visible:ring-[color:var(--aui-brand-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--aui-page-bg)] disabled:pointer-events-none disabled:opacity-50", S && "hover:bg-[color:var(--aui-control-bg)] hover:text-[color:var(--aui-brand-strong)]", o && "bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,transparent)] text-[color:var(--aui-brand-strong)]"),
+				onMouseEnter: () => S && y(a),
+				onClick: () => C(a),
+				onKeyDown: (e) => w(e, a),
+				children: p ?? /* @__PURE__ */ r(n, { className: e("size-4.5", o && "fill-current") })
+			}, a);
+		}), l && b > 0 && S && /* @__PURE__ */ r("button", {
+			type: "button",
+			className: "ml-1 inline-flex h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground",
+			onClick: () => C(0),
+			children: f?.clear ?? "Clear"
+		})]
+	});
+}
+//#endregion
+export { a as Rating };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./clearable-input.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=n.forwardRef(({searchIcon:e,loading:a=!1,loadingLabel:o=`Searching`,resultCount:s,shortcut:c,debounceMs:l,value:u,onValueChange:d,onDebouncedValueChange:f,placeholder:p=`Search...`,inputMode:m=`search`,trailing:h,showMetaOnClear:g=!1,disabled:_,...v},y)=>{let b=u==null?``:String(u);return n.useEffect(()=>{if(l==null||!f)return;let e=window.setTimeout(()=>f(b),l);return()=>window.clearTimeout(e)},[l,f,b]),(0,i.jsx)(t.ClearableInput,{ref:y,type:`search`,inputMode:m,placeholder:p,value:u,disabled:_||a,leadingIcon:e??(0,i.jsx)(r.SearchIcon,{}),trailing:(0,i.jsxs)(`span`,{"data-slot":`search-input-meta`,className:`inline-flex shrink-0 items-center gap-2 text-xs text-muted-foreground`,children:[a?(0,i.jsxs)(`span`,{"aria-live":`polite`,className:`inline-flex items-center gap-1.5`,children:[(0,i.jsx)(r.LoaderCircleIcon,{className:`size-3.5 animate-spin`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:o})]}):null,typeof s==`number`?(0,i.jsx)(`span`,{children:s}):null,c?(0,i.jsx)(`span`,{className:`rounded-md border border-border/80 bg-muted/60 px-1.5 py-0.5 font-mono`,children:c}):null,h]}),replaceTrailingWhenClear:!g,onValueChange:d,...v})});a.displayName=`SearchInput`,exports.SearchInput=a;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type ClearableInputProps } from "@/components/inputs/clearable-input";
+export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type" | "onValueChange"> & {
+    searchIcon?: React.ReactNode;
+    loading?: boolean;
+    loadingLabel?: string;
+    resultCount?: number;
+    shortcut?: React.ReactNode;
+    debounceMs?: number;
+    showMetaOnClear?: boolean;
+    onValueChange?: (value: string) => void;
+    onDebouncedValueChange?: (value: string) => void;
+};
+declare const SearchInput: React.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { SearchInput };

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

@@ -0,0 +1,54 @@
+import { ClearableInput as e } from "./clearable-input.js";
+import * as t from "react";
+import { LoaderCircleIcon as n, SearchIcon as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/inputs/search-input.tsx
+var o = t.forwardRef(({ searchIcon: o, loading: s = !1, loadingLabel: c = "Searching", resultCount: l, shortcut: u, debounceMs: d, value: f, onValueChange: p, onDebouncedValueChange: m, placeholder: h = "Search...", inputMode: g = "search", trailing: _, showMetaOnClear: v = !1, disabled: y, ...b }, x) => {
+	let S = f == null ? "" : String(f);
+	return t.useEffect(() => {
+		if (d == null || !m) return;
+		let e = window.setTimeout(() => m(S), d);
+		return () => window.clearTimeout(e);
+	}, [
+		d,
+		m,
+		S
+	]), /* @__PURE__ */ i(e, {
+		ref: x,
+		type: "search",
+		inputMode: g,
+		placeholder: h,
+		value: f,
+		disabled: y || s,
+		leadingIcon: o ?? /* @__PURE__ */ i(r, {}),
+		trailing: /* @__PURE__ */ a("span", {
+			"data-slot": "search-input-meta",
+			className: "inline-flex shrink-0 items-center gap-2 text-xs text-muted-foreground",
+			children: [
+				s ? /* @__PURE__ */ a("span", {
+					"aria-live": "polite",
+					className: "inline-flex items-center gap-1.5",
+					children: [/* @__PURE__ */ i(n, {
+						className: "size-3.5 animate-spin",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ i("span", {
+						className: "sr-only",
+						children: c
+					})]
+				}) : null,
+				typeof l == "number" ? /* @__PURE__ */ i("span", { children: l }) : null,
+				u ? /* @__PURE__ */ i("span", {
+					className: "rounded-md border border-border/80 bg-muted/60 px-1.5 py-0.5 font-mono",
+					children: u
+				}) : null,
+				_
+			]
+		}),
+		replaceTrailingWhenClear: !v,
+		onValueChange: p,
+		...b
+	});
+});
+o.displayName = "SearchInput";
+//#endregion
+export { o as SearchInput };

package/dist/components/inputs/simple-select.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/select/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t){let n=t.trim().toLowerCase();return n?[typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value,e.value,...e.keywords??[]].join(` `).toLowerCase().includes(n):!0}function s({value:e,onValueChange:s,options:c,placeholder:l=`Select`,searchPlaceholder:u=`Search options...`,emptyLabel:d=`No options found`,clearLabel:f=`Clear selection`,size:p=`default`,clearable:m=!1,searchable:h=!1,loading:g=!1,loadingLabel:_=`Loading options...`,disabled:v=!1,triggerClassName:y,contentClassName:b,itemClassName:x,searchClassName:S,renderOption:C,invalid:w,...T}){let[E,D]=r.useState(``),O=c.find(t=>t.value===e),k=c.filter(e=>o(e,E));return(0,a.jsxs)(n.Select,{value:e,onValueChange:e=>s?.(e),disabled:v||g,...T,children:[(0,a.jsxs)(n.SelectTrigger,{size:p,"aria-invalid":w||void 0,className:t.cn(`w-full`,y),children:[(0,a.jsx)(n.SelectValue,{placeholder:l,children:O?.label}),g?(0,a.jsx)(i.LoaderCircleIcon,{className:`size-4 animate-spin text-muted-foreground`}):null,m&&e&&!v&&!g?(0,a.jsx)(`button`,{type:`button`,"aria-label":f,className:`ml-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>{e.preventDefault(),t.stopInteractivePropagation(e),s?.(void 0)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,a.jsx)(i.XIcon,{className:`size-3.5`})}):null]}),(0,a.jsxs)(n.SelectContent,{className:t.cn(`w-(--anchor-width)`,b),children:[h?(0,a.jsxs)(`div`,{"data-slot":`select-search`,className:`sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border px-2.5 py-2 text-sm`,children:[(0,a.jsx)(i.SearchIcon,{className:`size-4 text-muted-foreground`}),(0,a.jsx)(`input`,{value:E,onChange:e=>D(e.target.value),placeholder:u,className:t.cn(`min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground`,S)})]}):null,g?(0,a.jsxs)(`div`,{"data-slot":`select-state`,className:`flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground`,children:[(0,a.jsx)(i.LoaderCircleIcon,{className:`size-4 animate-spin`}),_]}):k.length===0?(0,a.jsx)(`div`,{"data-slot":`select-state`,className:`rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground`,children:d}):k.map(r=>{let o=r.value===e;return(0,a.jsx)(n.SelectItem,{value:r.value,disabled:r.disabled,className:t.cn(`rounded-[min(var(--radius-lg),14px)]`,x),children:C?C(r,{selected:o}):(0,a.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,a.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`truncate`,children:r.label}),o?(0,a.jsx)(i.CheckIcon,{className:`ml-auto size-3.5 text-primary`}):null]}),r.description&&(0,a.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:r.description})]})},r.value)})]})]})}exports.SimpleSelect=s;

package/dist/components/inputs/simple-select.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Select } from "@/components/ui/select";
+export type SimpleSelectOption = {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    description?: React.ReactNode;
+    keywords?: string[];
+};
+export type SimpleSelectProps = Omit<React.ComponentProps<typeof Select>, "value" | "onValueChange"> & {
+    value?: string;
+    onValueChange?: (value: string | undefined) => void;
+    options: SimpleSelectOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: React.ReactNode;
+    clearLabel?: string;
+    size?: "sm" | "default";
+    clearable?: boolean;
+    searchable?: boolean;
+    loading?: boolean;
+    loadingLabel?: React.ReactNode;
+    disabled?: boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
+    itemClassName?: string;
+    searchClassName?: string;
+    renderOption?: (option: SimpleSelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    invalid?: boolean;
+};
+declare function SimpleSelect({ value, onValueChange, options, placeholder, searchPlaceholder, emptyLabel, clearLabel, size, clearable, searchable, loading, loadingLabel, disabled, triggerClassName, contentClassName, itemClassName, searchClassName, renderOption, invalid, ...props }: SimpleSelectProps): React.JSX.Element;
+export { SimpleSelect };

package/dist/components/inputs/simple-select.js

@@ -0,0 +1,88 @@
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../ui/select/index.js";
+import * as s from "react";
+import { CheckIcon as c, LoaderCircleIcon as l, SearchIcon as u, XIcon as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/inputs/simple-select.tsx
+function m(e, t) {
+	let n = t.trim().toLowerCase();
+	return n ? [
+		typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value,
+		e.value,
+		...e.keywords ?? []
+	].join(" ").toLowerCase().includes(n) : !0;
+}
+function h({ value: h, onValueChange: g, options: _, placeholder: v = "Select", searchPlaceholder: y = "Search options...", emptyLabel: b = "No options found", clearLabel: x = "Clear selection", size: S = "default", clearable: C = !1, searchable: w = !1, loading: T = !1, loadingLabel: E = "Loading options...", disabled: D = !1, triggerClassName: O, contentClassName: k, itemClassName: A, searchClassName: j, renderOption: M, invalid: N, ...P }) {
+	let [F, I] = s.useState(""), L = _.find((e) => e.value === h), R = _.filter((e) => m(e, F));
+	return /* @__PURE__ */ p(n, {
+		value: h,
+		onValueChange: (e) => g?.(e),
+		disabled: D || T,
+		...P,
+		children: [/* @__PURE__ */ p(a, {
+			size: S,
+			"aria-invalid": N || void 0,
+			className: e("w-full", O),
+			children: [
+				/* @__PURE__ */ f(o, {
+					placeholder: v,
+					children: L?.label
+				}),
+				T ? /* @__PURE__ */ f(l, { className: "size-4 animate-spin text-muted-foreground" }) : null,
+				C && h && !D && !T ? /* @__PURE__ */ f("button", {
+					type: "button",
+					"aria-label": x,
+					className: "ml-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					onClick: (e) => {
+						e.preventDefault(), t(e), g?.(void 0);
+					},
+					onMouseDown: t,
+					onDoubleClick: t,
+					children: /* @__PURE__ */ f(d, { className: "size-3.5" })
+				}) : null
+			]
+		}), /* @__PURE__ */ p(r, {
+			className: e("w-(--anchor-width)", k),
+			children: [w ? /* @__PURE__ */ p("div", {
+				"data-slot": "select-search",
+				className: "sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border px-2.5 py-2 text-sm",
+				children: [/* @__PURE__ */ f(u, { className: "size-4 text-muted-foreground" }), /* @__PURE__ */ f("input", {
+					value: F,
+					onChange: (e) => I(e.target.value),
+					placeholder: y,
+					className: e("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", j)
+				})]
+			}) : null, T ? /* @__PURE__ */ p("div", {
+				"data-slot": "select-state",
+				className: "flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ f(l, { className: "size-4 animate-spin" }), E]
+			}) : R.length === 0 ? /* @__PURE__ */ f("div", {
+				"data-slot": "select-state",
+				className: "rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground",
+				children: b
+			}) : R.map((t) => {
+				let n = t.value === h;
+				return /* @__PURE__ */ f(i, {
+					value: t.value,
+					disabled: t.disabled,
+					className: e("rounded-[min(var(--radius-lg),14px)]", A),
+					children: M ? M(t, { selected: n }) : /* @__PURE__ */ p("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ p("span", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ f("span", {
+								className: "truncate",
+								children: t.label
+							}), n ? /* @__PURE__ */ f(c, { className: "ml-auto size-3.5 text-primary" }) : null]
+						}), t.description && /* @__PURE__ */ f("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: t.description
+						})]
+					})
+				}, t.value);
+			})]
+		})]
+	});
+}
+//#endregion
+export { h as SimpleSelect };

package/dist/components/inputs/slider.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(e,t,n){return Math.min(Math.max(e,t),n)}function a(e,t,n){return n<=t?0:(e-t)/(n-t)*100}function o(e,t,n){let r=a(i(e,t,n),t,n);return{background:`linear-gradient(90deg, var(--aui-brand-strong) 0%, var(--aui-brand-strong) ${r}%, var(--aui-control-bg) ${r}%, var(--aui-control-bg) 100%)`}}function s({value:e,defaultValue:i=0,onValueChange:a,min:s=0,max:c=100,step:l=1,label:u,description:d,showValue:f=!1,formatValue:p,className:m,disabled:h,...g}){let[_,v]=n.useState(i),y=e??_,b=p?.(y)??y,x=t=>{e===void 0&&v(t),a?.(t)};return(0,r.jsxs)(`div`,{"data-slot":`slider`,className:t.cn(`grid gap-3`,m),children:[(u||d||f)&&(0,r.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,r.jsxs)(`div`,{className:`grid gap-1`,children:[u&&(0,r.jsx)(`label`,{className:`text-sm font-semibold tracking-tight text-foreground`,children:u}),d&&(0,r.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:d})]}),f&&(0,r.jsx)(`div`,{className:`inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm`,children:b})]}),(0,r.jsx)(`input`,{"data-slot":`slider-input`,type:`range`,value:y,min:s,max:c,step:l,disabled:h,style:o(y,s,c),className:`h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]`,onChange:e=>x(e.currentTarget.valueAsNumber),...g})]})}function c(e,t,n){let r=a(i(e[0],t,n),t,n),o=a(i(e[1],t,n),t,n);return{left:`${r}%`,width:`${Math.max(o-r,0)}%`}}function l({value:e,defaultValue:i=[0,100],onValueChange:a,min:o=0,max:s=100,step:l=1,label:u,description:d,showValue:f=!1,formatValue:p,className:m,disabled:h,...g}){let[_,v]=n.useState(i),y=e??_,b=p?.(y)??`${y[0]} - ${y[1]}`,x=(t,n)=>{let r=t===0?[Math.min(n,y[1]),y[1]]:[y[0],Math.max(n,y[0])];e===void 0&&v(r),a?.(r)};return(0,r.jsxs)(`div`,{"data-slot":`range-slider`,className:t.cn(`grid gap-3`,m),children:[(u||d||f)&&(0,r.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,r.jsxs)(`div`,{className:`grid gap-1`,children:[u&&(0,r.jsx)(`label`,{className:`text-sm font-semibold tracking-tight text-foreground`,children:u}),d&&(0,r.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:d})]}),f&&(0,r.jsx)(`div`,{className:`inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm`,children:b})]}),(0,r.jsxs)(`div`,{className:`grid gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,children:[(0,r.jsxs)(`div`,{className:`relative h-6`,children:[(0,r.jsx)(`div`,{className:`absolute top-1/2 h-3 w-full -translate-y-1/2 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)]`}),(0,r.jsx)(`div`,{className:`absolute top-1/2 h-3 -translate-y-1/2 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_8px_24px_rgba(16,185,129,0.18)]`,style:c(y,o,s)})]}),(0,r.jsxs)(`div`,{className:`relative -mt-8 h-6`,children:[(0,r.jsx)(`input`,{type:`range`,value:y[0],min:o,max:s,step:l,disabled:h,className:`pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]`,onChange:e=>x(0,e.currentTarget.valueAsNumber),...g}),(0,r.jsx)(`input`,{type:`range`,value:y[1],min:o,max:s,step:l,disabled:h,className:`pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]`,onChange:e=>x(1,e.currentTarget.valueAsNumber),...g})]})]})]})}exports.RangeSlider=l,exports.Slider=s;

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type SliderProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    showValue?: boolean;
+    formatValue?: (value: number) => React.ReactNode;
+};
+declare function Slider({ value, defaultValue, onValueChange, min, max, step, label, description, showValue, formatValue, className, disabled, ...props }: SliderProps): React.JSX.Element;
+export type RangeSliderValue = [number, number];
+export type RangeSliderProps = Omit<SliderProps, "value" | "defaultValue" | "onValueChange" | "showValue" | "formatValue"> & {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    showValue?: boolean;
+    formatValue?: (value: RangeSliderValue) => React.ReactNode;
+};
+declare function RangeSlider({ value, defaultValue, onValueChange, min, max, step, label, description, showValue, formatValue, className, disabled, ...props }: RangeSliderProps): React.JSX.Element;
+export { RangeSlider, Slider };