tembro 3.0.0 → 3.1.1

package/dist/src/components/ui/dropdown-menu/index.js

@@ -0,0 +1,161 @@
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { CheckIcon as n, ChevronRightIcon as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Menu as o } from "@base-ui/react/menu";
+//#region src/components/ui/dropdown-menu/index.tsx
+var s = "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm text-popover-foreground outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:border-[color:color-mix(in_oklch,var(--destructive),transparent_70%)] data-[variant=destructive]:data-[highlighted]:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] data-[variant=destructive]:data-[highlighted]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+function c({ ...e }) {
+	return /* @__PURE__ */ i(o.Root, {
+		"data-slot": "dropdown-menu",
+		...e
+	});
+}
+function l({ ...e }) {
+	return /* @__PURE__ */ i(o.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...e
+	});
+}
+function u({ ...e }) {
+	if (!("render" in e) && t.isValidElement(e.children)) {
+		let { children: t, ...n } = e;
+		return /* @__PURE__ */ i(o.Trigger, {
+			"data-slot": "dropdown-menu-trigger",
+			render: t,
+			...n
+		});
+	}
+	return /* @__PURE__ */ i(o.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...e
+	});
+}
+function d({ align: t = "start", alignOffset: n = 0, side: r = "bottom", sideOffset: a = 4, className: s, ...c }) {
+	return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.Positioner, {
+		className: "isolate z-50 outline-none",
+		align: t,
+		alignOffset: n,
+		side: r,
+		sideOffset: a,
+		children: /* @__PURE__ */ i(o.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: e("z-50 max-h-(--available-height) w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-2 text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", s),
+			...c
+		})
+	}) });
+}
+function f({ ...e }) {
+	return /* @__PURE__ */ i(o.Group, {
+		"data-slot": "dropdown-menu-group",
+		...e
+	});
+}
+function p({ className: t, inset: n, ...r }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": n,
+		className: e("px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90 data-inset:pl-8", t),
+		...r
+	});
+}
+function m({ className: t, inset: n, variant: r = "default", closeOnSelect: a = !0, onSelect: c, ...l }) {
+	return /* @__PURE__ */ i(o.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": n,
+		"data-variant": r,
+		className: e("group/dropdown-menu-item data-inset:pl-8", s, t),
+		onSelect: (e) => {
+			a || e.preventDefault(), c?.(e);
+		},
+		...l
+	});
+}
+function h({ ...e }) {
+	return /* @__PURE__ */ i(o.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...e
+	});
+}
+function g({ className: t, inset: n, children: c, ...l }) {
+	return /* @__PURE__ */ a(o.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": n,
+		className: e("group/dropdown-menu-item data-inset:pl-8", s, t),
+		...l,
+		children: [c, /* @__PURE__ */ i(r, { className: "ml-auto text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground" })]
+	});
+}
+function _({ align: t = "start", alignOffset: n = -3, side: r = "right", sideOffset: a = 0, className: o, ...s }) {
+	return /* @__PURE__ */ i(d, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: e("w-auto min-w-[128px] rounded-[var(--aui-card-radius,var(--radius-xl))] p-2 text-popover-foreground duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", o),
+		align: t,
+		alignOffset: n,
+		side: r,
+		sideOffset: a,
+		...s
+	});
+}
+function v({ className: t, children: r, checked: c, inset: l, closeOnSelect: u = !0, onSelect: d, ...f }) {
+	return /* @__PURE__ */ a(o.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": l,
+		className: e("group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium", s, t),
+		checked: c,
+		onSelect: (e) => {
+			u || e.preventDefault(), d?.(e);
+		},
+		...f,
+		children: [/* @__PURE__ */ i("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ i(o.CheckboxItemIndicator, { children: /* @__PURE__ */ i(n, {}) })
+		}), r]
+	});
+}
+function y({ ...e }) {
+	return /* @__PURE__ */ i(o.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...e
+	});
+}
+function b({ className: t, children: r, inset: c, closeOnSelect: l = !0, onSelect: u, ...d }) {
+	return /* @__PURE__ */ a(o.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": c,
+		className: e("group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium", s, t),
+		onSelect: (e) => {
+			l || e.preventDefault(), u?.(e);
+		},
+		...d,
+		children: [/* @__PURE__ */ i("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ i(o.RadioItemIndicator, { children: /* @__PURE__ */ i(n, {}) })
+		}), r]
+	});
+}
+function x({ className: t, ...n }) {
+	return /* @__PURE__ */ i(o.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: e("-mx-1 my-1.5 h-px bg-border/80", t),
+		...n
+	});
+}
+function S({ className: t, ...n }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: e("ml-auto rounded bg-muted/70 px-1.5 py-0.5 text-[11px] font-medium tracking-[0.08em] text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground", t),
+		...n
+	});
+}
+function C({ className: t, ...n }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "dropdown-menu-item-description",
+		className: e("block text-xs leading-5 text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground/70", t),
+		...n
+	});
+}
+//#endregion
+export { c as DropdownMenu, v as DropdownMenuCheckboxItem, d as DropdownMenuContent, f as DropdownMenuGroup, m as DropdownMenuItem, C as DropdownMenuItemDescription, p as DropdownMenuLabel, l as DropdownMenuPortal, y as DropdownMenuRadioGroup, b as DropdownMenuRadioItem, x as DropdownMenuSeparator, S as DropdownMenuShortcut, h as DropdownMenuSub, _ as DropdownMenuSubContent, g as DropdownMenuSubTrigger, u as DropdownMenuTrigger };

package/dist/src/components/ui/hover-card.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"),i=require("@base-ui/react/preview-card");function a({trigger:e,content:n,side:a=`bottom`,align:o=`center`,sideOffset:s=10,alignOffset:c=0,collisionPadding:l=12,delay:u=450,closeDelay:d=180,disabled:f=!1,contentClassName:p,className:m,...h}){return f?(0,r.jsx)(`span`,{"data-slot":`hover-card`,className:t.cn(`inline-flex`,m),...h,children:e}):(0,r.jsxs)(i.PreviewCard.Root,{children:[(0,r.jsx)(i.PreviewCard.Trigger,{"data-slot":`hover-card-trigger`,delay:u,closeDelay:d,render:(0,r.jsx)(`span`,{"data-slot":`hover-card`,className:t.cn(`inline-flex`,m),...h}),children:e}),(0,r.jsx)(i.PreviewCard.Portal,{children:(0,r.jsx)(i.PreviewCard.Positioner,{className:`isolate z-50`,side:a,align:o,sideOffset:s,alignOffset:c,collisionPadding:l,children:(0,r.jsx)(i.PreviewCard.Popup,{"data-slot":`hover-card-content`,className:t.cn(`z-50 min-w-60 max-w-[min(24rem,calc(100vw-1rem))] origin-(--transform-origin) rounded-[var(--aui-card-radius,var(--radius-xl))] border border-border/80 bg-popover/98 p-4 text-sm text-popover-foreground shadow-[0_18px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/8 outline-hidden backdrop-blur duration-150 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95`,p),children:n})})})]})}exports.HoverCard=a;

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

@@ -0,0 +1,37 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { PreviewCard as r } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.tsx
+function i({ trigger: i, content: a, side: o = "bottom", align: s = "center", sideOffset: c = 10, alignOffset: l = 0, collisionPadding: u = 12, delay: d = 450, closeDelay: f = 180, disabled: p = !1, contentClassName: m, className: h, ...g }) {
+	return p ? /* @__PURE__ */ t("span", {
+		"data-slot": "hover-card",
+		className: e("inline-flex", h),
+		...g,
+		children: i
+	}) : /* @__PURE__ */ n(r.Root, { children: [/* @__PURE__ */ t(r.Trigger, {
+		"data-slot": "hover-card-trigger",
+		delay: d,
+		closeDelay: f,
+		render: /* @__PURE__ */ t("span", {
+			"data-slot": "hover-card",
+			className: e("inline-flex", h),
+			...g
+		}),
+		children: i
+	}), /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(r.Positioner, {
+		className: "isolate z-50",
+		side: o,
+		align: s,
+		sideOffset: c,
+		alignOffset: l,
+		collisionPadding: u,
+		children: /* @__PURE__ */ t(r.Popup, {
+			"data-slot": "hover-card-content",
+			className: e("z-50 min-w-60 max-w-[min(24rem,calc(100vw-1rem))] origin-(--transform-origin) rounded-[var(--aui-card-radius,var(--radius-xl))] border border-border/80 bg-popover/98 p-4 text-sm text-popover-foreground shadow-[0_18px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/8 outline-hidden backdrop-blur duration-150 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", m),
+			children: a
+		})
+	}) })] });
+}
+//#endregion
+export { i as HoverCard };

package/dist/src/components/ui/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-11 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-md))] 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_4px_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/src/components/ui/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/ui/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-11 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-md))] 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_4px_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/src/components/ui/input/clearable.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("./decorator.cjs"),r=require("./value.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=i.forwardRef(({value:e,onChange:s,onValueChange:c,onClear:l,clearable:u=!0,clearLabel:d=`Clear`,clearOnEscape:f=!0,focusAfterClear:p=!0,replaceTrailingWhenClear:m=!0,leadingIcon:h,trailing:g,trailingAction:_,disabled:v,onKeyDown:y,...b},x)=>{let S=i.useRef(null),C=r.getInputValue(e),w=u&&C.length>0&&!v&&!b.readOnly,T=r.createInputChangeHandler({onChange:s,onValueChange:c});i.useImperativeHandle(x,()=>S.current);let E=()=>{w&&(c?.(``),l?.(),p&&S.current?.focus())},D=e=>{t.stopInteractivePropagation(e),E()},O=e=>{t.stopInteractivePropagation(e)};return(0,o.jsx)(n.InputDecorator,{"data-slot":`clearable-input`,ref:S,value:C,disabled:v,onChange:T,onKeyDown:e=>{y?.(e),!e.defaultPrevented&&f&&e.key===`Escape`&&w&&(e.preventDefault(),E())},leading:h,trailing:w&&m?null:g,trailingAction:(0,o.jsxs)(o.Fragment,{children:[_,w&&(0,o.jsx)(`button`,{type:`button`,"data-slot":`clearable-input-clear`,"aria-label":d,className:`inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)] 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:D,onMouseDown:O,onDoubleClick:O,children:(0,o.jsx)(a.XIcon,{className:`size-4`})})]}),...b})});s.displayName=`ClearableInput`,exports.ClearableInput=s;

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

@@ -0,0 +1,48 @@
+"use client";
+import { stopInteractivePropagation as e } from "../../../lib/utils.js";
+import { InputDecorator as t } from "./decorator.js";
+import { createInputChangeHandler as n, getInputValue as r } from "./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/ui/input/clearable.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-[var(--radius-sm)] 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/src/components/ui/input/date-range.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.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/src/components/ui/input/date-range.js

@@ -0,0 +1,41 @@
+import { cn as e } from "../../../lib/utils.js";
+import { DateInput as t } from "./date.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ui/input/date-range.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/src/components/ui/input/date.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("./decorator.cjs"),n=require("./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/src/components/ui/input/date.js

@@ -0,0 +1,23 @@
+import { InputDecorator as e } from "./decorator.js";
+import { createInputChangeHandler as t, getInputValue as n } from "./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/ui/input/date.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/src/components/ui/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("./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/src/components/ui/input/decorator.js

@@ -0,0 +1,63 @@
+import { cn as e } from "../../../lib/utils.js";
+import { InputPrimitive as t } from "./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/ui/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/src/components/ui/input/group.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("../button/index.cjs"),r=require("../textarea/index.cjs"),i=require("./primitive.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("class-variance-authority"),s=require("react/jsx-runtime");function c({className:e,...n}){return(0,s.jsx)(`div`,{"data-slot":`input-group`,role:`group`,className:t.cn(`group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5`,e),...n})}var l=(0,o.cva)(`flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4`,{variants:{align:{"inline-start":`order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]`,"inline-end":`order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]`,"block-start":`order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2`,"block-end":`order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2`}},defaultVariants:{align:`inline-start`}});function u({className:e,align:n=`inline-start`,...r}){return(0,s.jsx)(`div`,{role:`group`,"data-slot":`input-group-addon`,"data-align":n,className:t.cn(l({align:n}),e),onClick:e=>{e.target.closest(`button`)||(e.currentTarget.parentElement?.querySelector(`input, textarea`))?.focus()},...r})}var d=(0,o.cva)(`flex items-center gap-2 text-sm shadow-none`,{variants:{size:{xs:`h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5`,sm:``,"icon-xs":`size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0`,"icon-sm":`size-8 p-0 has-[>svg]:p-0`}},defaultVariants:{size:`xs`}});function f({className:e,type:r=`button`,variant:i=`ghost`,size:a=`xs`,...o}){return(0,s.jsx)(n.Button,{type:r,"data-size":a,variant:i,className:t.cn(d({size:a}),e),...o})}function p({className:e,...n}){return(0,s.jsx)(`span`,{className:t.cn(`flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4`,e),...n})}function m({className:e,...n}){return(0,s.jsx)(i.InputPrimitive,{"data-slot":`input-group-control`,className:t.cn(`flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent`,e),...n})}function h({className:e,...n}){return(0,s.jsx)(r.Textarea,{"data-slot":`input-group-control`,className:t.cn(`flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent`,e),...n})}exports.InputGroup=c,exports.InputGroupAddon=u,exports.InputGroupButton=f,exports.InputGroupInput=m,exports.InputGroupText=p,exports.InputGroupTextarea=h;

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

@@ -0,0 +1,78 @@
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { Button as t } from "../button/index.js";
+import { Textarea as n } from "../textarea/index.js";
+import { InputPrimitive as r } from "./primitive.js";
+import "react";
+import { cva as i } from "class-variance-authority";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/ui/input/group.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: e("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", t),
+		...n
+	});
+}
+var s = i("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function c({ className: t, align: n = "inline-start", ...r }) {
+	return /* @__PURE__ */ a("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": n,
+		className: e(s({ align: n }), t),
+		onClick: (e) => {
+			e.target.closest("button") || (e.currentTarget.parentElement?.querySelector("input, textarea"))?.focus();
+		},
+		...r
+	});
+}
+var l = i("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function u({ className: n, type: r = "button", variant: i = "ghost", size: o = "xs", ...s }) {
+	return /* @__PURE__ */ a(t, {
+		type: r,
+		"data-size": o,
+		variant: i,
+		className: e(l({ size: o }), n),
+		...s
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ a("span", {
+		className: e("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ a(r, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...n
+	});
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ a(n, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...r
+	});
+}
+//#endregion
+export { o as InputGroup, c as InputGroupAddon, u as InputGroupButton, f as InputGroupInput, d as InputGroupText, p as InputGroupTextarea };

package/dist/src/components/ui/input/index.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("./primitive.cjs"),r=require("./group.cjs"),i=require("./decorator.cjs"),a=require("./clearable.cjs"),o=require("./date.cjs"),s=require("./date-range.cjs"),c=require("./masked.cjs"),l=require("./money.cjs"),u=require("./number.cjs"),d=require("./password.cjs"),f=require("./phone.cjs"),p=require("./quantity.cjs"),m=require("./search.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");function _(e){return typeof e==`string`?e.length:typeof e==`number`?String(e).length:Array.isArray(e)?e.join(``).length:0}function v(e){return e.type===`search`||e.searchIcon!==void 0||e.loading!==void 0||e.loadingLabel!==void 0||e.resultCount!==void 0||e.shortcut!==void 0||e.debounceMs!==void 0||e.showMetaOnClear!==void 0||e.onDebouncedValueChange!==void 0}var y=h.forwardRef((e,r)=>{let y=e.kind??`text`,b=e.defaultValue,[x,ee]=h.useState(()=>_(b));if(y===`search`)return(0,g.jsx)(m.SearchInput,{ref:r,...e});if(y===`password`)return(0,g.jsx)(d.PasswordInput,{ref:r,...e});if(y===`number`)return(0,g.jsx)(u.NumberInput,{ref:r,...e});if(y===`phone`)return(0,g.jsx)(f.PhoneInput,{ref:r,...e});if(y===`money`)return(0,g.jsx)(l.MoneyInput,{ref:r,...e});if(y===`quantity`)return(0,g.jsx)(p.QuantityInput,{ref:r,...e});if(y===`masked`)return(0,g.jsx)(c.MaskedInput,{ref:r,...e});if(y===`date`)return(0,g.jsx)(o.DateInput,{ref:r,...e});if(y===`date-range`)return(0,g.jsx)(s.DateRangeInput,{...e});if(y===`clearable`)return(0,g.jsx)(a.ClearableInput,{ref:r,...e});let S=e;if(v(S)){let{leading:e,searchIcon:n,helperText:i,errorText:a,showCharacterCount:o,countFormatter:s,helperClassName:c,inputClassName:l,...u}=S,d=Array.isArray(S.value)?S.value.join(` `):S.value==null||typeof S.value==`string`||typeof S.value==`number`?S.value:String(S.value),f=Array.isArray(S.defaultValue)?S.defaultValue.join(` `):S.defaultValue==null||typeof S.defaultValue==`string`||typeof S.defaultValue==`number`?S.defaultValue:String(S.defaultValue),p=(0,g.jsx)(m.SearchInput,{ref:r,searchIcon:n??e,inputClassName:l,...u,value:d,defaultValue:f});if(!i&&!a&&!o)return p;let h=_(S.value??S.defaultValue);return(0,g.jsxs)(`div`,{"data-slot":`input-field`,className:`grid gap-1.5`,children:[p,(0,g.jsxs)(`div`,{"data-slot":`input-meta`,className:`flex items-start justify-between gap-3 px-1`,children:[(0,g.jsx)(`div`,{"data-slot":`input-helper`,className:t.cn(`min-w-0 text-xs leading-5`,a?`text-destructive`:`text-muted-foreground`,c),children:a??i}),o?(0,g.jsx)(`div`,{"data-slot":`input-count`,className:t.cn(`shrink-0 text-[11px] font-medium tabular-nums`,a?`text-destructive`:`text-muted-foreground`),children:s?.(h,S.maxLength)??(typeof S.maxLength==`number`?`${h}/${S.maxLength}`:h)}):null]})]})}let{value:C,defaultValue:w,leading:T,trailing:E,trailingAction:D,clearable:O=!1,onValueChange:k,onClear:A,clearLabel:j,clearOnEscape:M,focusAfterClear:N,replaceTrailingWhenClear:P,helperText:F,errorText:I,showCharacterCount:L=!1,countFormatter:R,wrapperClassName:z,inputClassName:B,helperClassName:V,leadingPointerEvents:H=!1,trailingPointerEvents:U=!0,onChange:W,maxLength:G,className:K,...q}=S,J=C!==void 0,Y=J?_(C):x,X=I??F,te=I?`text-destructive`:`text-muted-foreground`,Z=e=>{J||ee(e.target.value.length),W?.(e)},Q=e=>{Z(e),k?.(e.target.value)},$=O?(0,g.jsx)(a.ClearableInput,{ref:r,value:C,defaultValue:C===void 0?w:void 0,type:q.type??`text`,leadingIcon:T,trailing:E,trailingAction:D,clearable:O,onChange:Z,onValueChange:k,onClear:A,clearLabel:j,clearOnEscape:M,focusAfterClear:N,replaceTrailingWhenClear:P,wrapperClassName:z,inputClassName:B,className:K,maxLength:G,...q}):T||E||D?(0,g.jsx)(i.InputDecorator,{ref:r,value:C??void 0,defaultValue:C===void 0?w:void 0,type:q.type??`text`,leading:T,trailing:E,trailingAction:D,leadingPointerEvents:H,trailingPointerEvents:U,wrapperClassName:z,inputClassName:B,className:K,onChange:Q,maxLength:G,...q}):(0,g.jsx)(n.InputPrimitive,{ref:r,value:C??void 0,defaultValue:C===void 0?w:void 0,type:q.type??`text`,className:t.cn(B,K),onChange:Q,maxLength:G,...q});return!X&&!L?$:(0,g.jsxs)(`div`,{"data-slot":`input-field`,className:`grid gap-1.5`,children:[$,(0,g.jsxs)(`div`,{"data-slot":`input-meta`,className:`flex items-start justify-between gap-3 px-1`,children:[(0,g.jsx)(`div`,{"data-slot":`input-helper`,className:t.cn(`min-w-0 text-xs leading-5`,te,V),children:X}),L?(0,g.jsx)(`div`,{"data-slot":`input-count`,className:t.cn(`shrink-0 text-[11px] font-medium tabular-nums`,I?`text-destructive`:`text-muted-foreground`),children:R?.(Y,G)??(typeof G==`number`?`${Y}/${G}`:Y)}):null]})]})});y.displayName=`Input`,exports.Input=y,exports.InputGroup=r.InputGroup,exports.InputGroupAddon=r.InputGroupAddon,exports.InputGroupButton=r.InputGroupButton,exports.InputGroupInput=r.InputGroupInput,exports.InputGroupText=r.InputGroupText,exports.InputGroupTextarea=r.InputGroupTextarea;