tembro 2.0.5 → 2.0.6

package/dist/components/ui/input/index.js

@@ -18,7 +18,10 @@ import { jsx as b, jsxs as x } from "react/jsx-runtime";
 function S(e) {
 	return typeof e == "string" ? e.length : typeof e == "number" ? String(e).length : Array.isArray(e) ? e.join("").length : 0;
 }
-var C = y.forwardRef((n, r) => {
+function C(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 w = y.forwardRef((n, r) => {
 	let i = n.kind ?? "text";
 	if (i === "search") return /* @__PURE__ */ b(v, {
 		ref: r,
@@ -57,39 +60,69 @@ var C = y.forwardRef((n, r) => {
 		ref: r,
 		...n
 	});
-	let { value: a, defaultValue: o, leading: s, trailing: C, trailingAction: w, clearable: T = !1, onValueChange: E, onClear: D, clearLabel: O, clearOnEscape: k, focusAfterClear: A, replaceTrailingWhenClear: j, helperText: M, errorText: N, showCharacterCount: P = !1, countFormatter: F, wrapperClassName: I, inputClassName: L, helperClassName: R, leadingPointerEvents: z = !1, trailingPointerEvents: B = !0, onChange: V, maxLength: H, className: U, ...W } = n, G = a !== void 0, [K, q] = y.useState(() => S(o)), J = G ? S(a) : K, Y = N ?? M, X = N ? "text-destructive" : "text-muted-foreground", Z = (e) => {
+	let a = n;
+	if (C(a)) {
+		let { leading: t, searchIcon: n, helperText: i, errorText: o, showCharacterCount: s, countFormatter: c, helperClassName: l, inputClassName: u, ...d } = a, f = Array.isArray(a.value) ? a.value.join(" ") : a.value == null || typeof a.value == "string" || typeof a.value == "number" ? a.value : String(a.value), p = Array.isArray(a.defaultValue) ? a.defaultValue.join(" ") : a.defaultValue == null || typeof a.defaultValue == "string" || typeof a.defaultValue == "number" ? a.defaultValue : String(a.defaultValue), m = /* @__PURE__ */ b(v, {
+			ref: r,
+			searchIcon: n ?? t,
+			inputClassName: u,
+			...d,
+			value: f,
+			defaultValue: p
+		});
+		if (!i && !o && !s) return m;
+		let h = S(a.value ?? a.defaultValue);
+		return /* @__PURE__ */ x("div", {
+			"data-slot": "input-field",
+			className: "grid gap-1.5",
+			children: [m, /* @__PURE__ */ x("div", {
+				"data-slot": "input-meta",
+				className: "flex items-start justify-between gap-3 px-1",
+				children: [/* @__PURE__ */ b("div", {
+					"data-slot": "input-helper",
+					className: e("min-w-0 text-xs leading-5", o ? "text-destructive" : "text-muted-foreground", l),
+					children: o ?? i
+				}), s ? /* @__PURE__ */ b("div", {
+					"data-slot": "input-count",
+					className: e("shrink-0 text-[11px] font-medium tabular-nums", o ? "text-destructive" : "text-muted-foreground"),
+					children: c?.(h, a.maxLength) ?? (typeof a.maxLength == "number" ? `${h}/${a.maxLength}` : h)
+				}) : null]
+			})]
+		});
+	}
+	let { value: o, defaultValue: s, leading: w, trailing: T, trailingAction: E, clearable: D = !1, onValueChange: O, onClear: ee, clearLabel: k, clearOnEscape: A, focusAfterClear: j, replaceTrailingWhenClear: M, helperText: N, errorText: P, showCharacterCount: F = !1, countFormatter: te, wrapperClassName: I, inputClassName: L, helperClassName: R, leadingPointerEvents: z = !1, trailingPointerEvents: B = !0, onChange: V, maxLength: H, className: U, ...W } = a, G = o !== void 0, [K, q] = y.useState(() => S(s)), J = G ? S(o) : K, Y = P ?? N, X = P ? "text-destructive" : "text-muted-foreground", Z = (e) => {
 		G || q(e.target.value.length), V?.(e);
 	}, Q = (e) => {
-		Z(e), E?.(e.target.value);
-	}, $ = T ? /* @__PURE__ */ b(l, {
+		Z(e), O?.(e.target.value);
+	}, $ = D ? /* @__PURE__ */ b(l, {
 		ref: r,
-		value: a,
-		defaultValue: a === void 0 ? o : void 0,
+		value: o,
+		defaultValue: o === void 0 ? s : void 0,
 		type: W.type ?? "text",
-		leadingIcon: s,
-		trailing: C,
-		trailingAction: w,
-		clearable: T,
+		leadingIcon: w,
+		trailing: T,
+		trailingAction: E,
+		clearable: D,
 		onChange: Z,
-		onValueChange: E,
-		onClear: D,
-		clearLabel: O,
-		clearOnEscape: k,
-		focusAfterClear: A,
-		replaceTrailingWhenClear: j,
+		onValueChange: O,
+		onClear: ee,
+		clearLabel: k,
+		clearOnEscape: A,
+		focusAfterClear: j,
+		replaceTrailingWhenClear: M,
 		wrapperClassName: I,
 		inputClassName: L,
 		className: U,
 		maxLength: H,
 		...W
-	}) : s || C || w ? /* @__PURE__ */ b(c, {
+	}) : w || T || E ? /* @__PURE__ */ b(c, {
 		ref: r,
-		value: a ?? void 0,
-		defaultValue: a === void 0 ? o : void 0,
+		value: o ?? void 0,
+		defaultValue: o === void 0 ? s : void 0,
 		type: W.type ?? "text",
-		leading: s,
-		trailing: C,
-		trailingAction: w,
+		leading: w,
+		trailing: T,
+		trailingAction: E,
 		leadingPointerEvents: z,
 		trailingPointerEvents: B,
 		wrapperClassName: I,
@@ -100,15 +133,15 @@ var C = y.forwardRef((n, r) => {
 		...W
 	}) : /* @__PURE__ */ b(t, {
 		ref: r,
-		value: a ?? void 0,
-		defaultValue: a === void 0 ? o : void 0,
+		value: o ?? void 0,
+		defaultValue: o === void 0 ? s : void 0,
 		type: W.type ?? "text",
 		className: e(L, U),
 		onChange: Q,
 		maxLength: H,
 		...W
 	});
-	return !Y && !P ? $ : /* @__PURE__ */ x("div", {
+	return !Y && !F ? $ : /* @__PURE__ */ x("div", {
 		"data-slot": "input-field",
 		className: "grid gap-1.5",
 		children: [$, /* @__PURE__ */ x("div", {
@@ -118,14 +151,14 @@ var C = y.forwardRef((n, r) => {
 				"data-slot": "input-helper",
 				className: e("min-w-0 text-xs leading-5", X, R),
 				children: Y
-			}), P ? /* @__PURE__ */ b("div", {
+			}), F ? /* @__PURE__ */ b("div", {
 				"data-slot": "input-count",
-				className: e("shrink-0 text-[11px] font-medium tabular-nums", N ? "text-destructive" : "text-muted-foreground"),
-				children: F?.(J, H) ?? (typeof H == "number" ? `${J}/${H}` : J)
+				className: e("shrink-0 text-[11px] font-medium tabular-nums", P ? "text-destructive" : "text-muted-foreground"),
+				children: te?.(J, H) ?? (typeof H == "number" ? `${J}/${H}` : J)
 			}) : null]
 		})]
 	});
 });
-C.displayName = "Input";
+w.displayName = "Input";
 //#endregion
-export { C as Input, n as InputGroup, r as InputGroupAddon, i as InputGroupButton, a as InputGroupInput, o as InputGroupText, s as InputGroupTextarea };
+export { w as Input, n as InputGroup, r as InputGroupAddon, i as InputGroupButton, a as InputGroupInput, o as InputGroupText, s as InputGroupTextarea };

package/dist/components/ui/select/index.cjs

@@ -1 +1 @@
-"use client";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"),a=require("@base-ui/react/select");var o=a.Select.Root;function s({className:e,...n}){return(0,i.jsx)(a.Select.Group,{"data-slot":`select-group`,className:t.cn(`scroll-my-1 p-1`,e),...n})}function c({className:e,...n}){return(0,i.jsx)(a.Select.Value,{"data-slot":`select-value`,className:t.cn(`flex flex-1 text-left`,e),...n})}function l({className:e,size:n=`default`,children:o,...s}){return(0,i.jsxs)(a.Select.Trigger,{"data-slot":`select-trigger`,"data-size":n,className:t.cn(`flex w-full min-w-0 items-center justify-between gap-2 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))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-11 data-[size=lg]:h-12 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,e),...s,children:[o,(0,i.jsx)(a.Select.Icon,{render:(0,i.jsx)(r.ChevronDownIcon,{className:`pointer-events-none size-4 text-muted-foreground`})})]})}function u({className:e,children:n,side:r=`bottom`,sideOffset:o=4,align:s=`center`,alignOffset:c=0,alignItemWithTrigger:l=!0,...u}){return(0,i.jsx)(a.Select.Portal,{children:(0,i.jsx)(a.Select.Positioner,{side:r,sideOffset:o,align:s,alignOffset:c,alignItemWithTrigger:l,className:`isolate z-50`,children:(0,i.jsxs)(a.Select.Popup,{"data-slot":`select-content`,"data-align-trigger":l,className:t.cn(`relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95`,e),...u,children:[(0,i.jsx)(m,{}),(0,i.jsx)(a.Select.List,{children:n}),(0,i.jsx)(h,{})]})})})}function d({className:e,...n}){return(0,i.jsx)(a.Select.GroupLabel,{"data-slot":`select-label`,className:t.cn(`px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90`,e),...n})}function f({className:e,children:n,...o}){return(0,i.jsxs)(a.Select.Item,{"data-slot":`select-item`,className:t.cn(`relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] 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-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2`,e),...o,children:[(0,i.jsx)(a.Select.ItemText,{className:`flex flex-1 shrink-0 gap-2 whitespace-nowrap`,children:n}),(0,i.jsx)(a.Select.ItemIndicator,{render:(0,i.jsx)(`span`,{className:`pointer-events-none absolute right-2 flex size-4 items-center justify-center`}),children:(0,i.jsx)(r.CheckIcon,{className:`pointer-events-none`})})]})}function p({className:e,...n}){return(0,i.jsx)(a.Select.Separator,{"data-slot":`select-separator`,className:t.cn(`pointer-events-none -mx-1 my-1.5 h-px bg-border/80`,e),...n})}function m({className:e,...n}){return(0,i.jsx)(a.Select.ScrollUpArrow,{"data-slot":`select-scroll-up-button`,className:t.cn(`top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4`,e),...n,children:(0,i.jsx)(r.ChevronUpIcon,{})})}function h({className:e,...n}){return(0,i.jsx)(a.Select.ScrollDownArrow,{"data-slot":`select-scroll-down-button`,className:t.cn(`bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4`,e),...n,children:(0,i.jsx)(r.ChevronDownIcon,{})})}exports.Select=o,exports.SelectContent=u,exports.SelectGroup=s,exports.SelectItem=f,exports.SelectLabel=d,exports.SelectScrollDownButton=h,exports.SelectScrollUpButton=m,exports.SelectSeparator=p,exports.SelectTrigger=l,exports.SelectValue=c;
+"use client";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"),a=require("@base-ui/react/select");var o=a.Select.Root;function s(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 c({value:e,defaultValue:a,onValueChange:c,options:l,placeholder:p=`Select`,searchPlaceholder:h=`Search options...`,emptyLabel:g=`No options found`,clearLabel:_=`Clear selection`,size:v=`default`,clearable:y=!1,searchable:b=!1,loading:x=!1,loadingLabel:S=`Loading options...`,disabled:C=!1,showSelectedDescription:w=!0,triggerClassName:T,contentClassName:E,itemClassName:D,searchClassName:O,renderOption:k,invalid:A,children:j,onOpenChange:M,...N}){if(!l)return(0,i.jsx)(o,{value:e??void 0,defaultValue:a??void 0,onValueChange:e=>c?.(e??void 0),onOpenChange:M,disabled:C,...N,children:j});let[P,F]=n.useState(``),I=l.find(t=>t.value===e),L=l.filter(e=>s(e,P));return(0,i.jsxs)(o,{value:e??void 0,defaultValue:a??void 0,onValueChange:e=>c?.(e??void 0),disabled:C||x,onOpenChange:(e,t)=>{e||F(``),M?.(e,t)},...N,children:[(0,i.jsxs)(d,{size:v,"aria-invalid":A||void 0,className:t.cn(`w-full`,T),children:[(0,i.jsx)(u,{placeholder:p,children:I?(0,i.jsxs)(`span`,{className:`flex min-w-0 flex-col items-start`,children:[(0,i.jsx)(`span`,{className:`truncate`,children:I.label}),w&&I.description?(0,i.jsx)(`span`,{className:`truncate text-[11px] font-medium text-muted-foreground`,children:I.description}):null]}):null}),x?(0,i.jsx)(r.LoaderCircleIcon,{className:`size-4 animate-spin text-muted-foreground`}):null,y&&e&&!C&&!x?(0,i.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":_,className:`ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>{e.preventDefault(),t.stopInteractivePropagation(e),c?.(void 0)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),c?.(void 0))},children:(0,i.jsx)(r.XIcon,{className:`size-3.5`})}):null]}),(0,i.jsxs)(f,{className:t.cn(`w-(--anchor-width)`,E),children:[b?(0,i.jsxs)(`div`,{"data-slot":`select-search`,className:`sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm`,children:[(0,i.jsx)(r.SearchIcon,{className:`size-4 text-muted-foreground`}),(0,i.jsx)(`input`,{value:P,onChange:e=>F(e.target.value),placeholder:h,className:t.cn(`min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground`,O)})]}):null,x?(0,i.jsxs)(`div`,{"data-slot":`select-state`,className:`flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground`,children:[(0,i.jsx)(r.LoaderCircleIcon,{className:`size-4 animate-spin`}),S]}):L.length===0?(0,i.jsx)(`div`,{"data-slot":`select-state`,className:`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground`,children:g}):L.map(n=>{let a=n.value===e;return(0,i.jsx)(m,{value:n.value,disabled:n.disabled,className:t.cn(`rounded-[var(--radius-md)]`,D),children:k?k(n,{selected:a}):(0,i.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,i.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,i.jsx)(`span`,{className:`truncate`,children:n.label}),a?(0,i.jsx)(r.CheckIcon,{className:`ml-auto size-3.5 text-primary`}):null]}),n.description?(0,i.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:n.description}):null]})},n.value)})]})]})}function l({className:e,...n}){return(0,i.jsx)(a.Select.Group,{"data-slot":`select-group`,className:t.cn(`scroll-my-1 p-1`,e),...n})}function u({className:e,...n}){return(0,i.jsx)(a.Select.Value,{"data-slot":`select-value`,className:t.cn(`flex flex-1 text-left`,e),...n})}function d({className:e,size:n=`default`,children:o,...s}){return(0,i.jsxs)(a.Select.Trigger,{"data-slot":`select-trigger`,"data-size":n,className:t.cn(`flex w-full min-w-0 items-center justify-between gap-2 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))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-11 data-[size=lg]:h-12 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,e),...s,children:[o,(0,i.jsx)(a.Select.Icon,{render:(0,i.jsx)(r.ChevronDownIcon,{className:`pointer-events-none size-4 text-muted-foreground`})})]})}function f({className:e,children:n,side:r=`bottom`,sideOffset:o=4,align:s=`center`,alignOffset:c=0,alignItemWithTrigger:l=!0,...u}){return(0,i.jsx)(a.Select.Portal,{children:(0,i.jsx)(a.Select.Positioner,{side:r,sideOffset:o,align:s,alignOffset:c,alignItemWithTrigger:l,className:`isolate z-50`,children:(0,i.jsxs)(a.Select.Popup,{"data-slot":`select-content`,"data-align-trigger":l,className:t.cn(`relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95`,e),...u,children:[(0,i.jsx)(g,{}),(0,i.jsx)(a.Select.List,{children:n}),(0,i.jsx)(_,{})]})})})}function p({className:e,...n}){return(0,i.jsx)(a.Select.GroupLabel,{"data-slot":`select-label`,className:t.cn(`px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90`,e),...n})}function m({className:e,children:n,...o}){return(0,i.jsxs)(a.Select.Item,{"data-slot":`select-item`,className:t.cn(`relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] 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-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2`,e),...o,children:[(0,i.jsx)(a.Select.ItemText,{className:`flex flex-1 shrink-0 gap-2 whitespace-nowrap`,children:n}),(0,i.jsx)(a.Select.ItemIndicator,{render:(0,i.jsx)(`span`,{className:`pointer-events-none absolute right-2 flex size-4 items-center justify-center`}),children:(0,i.jsx)(r.CheckIcon,{className:`pointer-events-none`})})]})}function h({className:e,...n}){return(0,i.jsx)(a.Select.Separator,{"data-slot":`select-separator`,className:t.cn(`pointer-events-none -mx-1 my-1.5 h-px bg-border/80`,e),...n})}function g({className:e,...n}){return(0,i.jsx)(a.Select.ScrollUpArrow,{"data-slot":`select-scroll-up-button`,className:t.cn(`top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4`,e),...n,children:(0,i.jsx)(r.ChevronUpIcon,{})})}function _({className:e,...n}){return(0,i.jsx)(a.Select.ScrollDownArrow,{"data-slot":`select-scroll-down-button`,className:t.cn(`bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4`,e),...n,children:(0,i.jsx)(r.ChevronDownIcon,{})})}exports.Select=c,exports.SelectContent=f,exports.SelectGroup=l,exports.SelectItem=m,exports.SelectLabel=p,exports.SelectScrollDownButton=_,exports.SelectScrollUpButton=g,exports.SelectSeparator=h,exports.SelectTrigger=d,exports.SelectValue=u;

package/dist/components/ui/select/index.d.ts

@@ -12,7 +12,39 @@ export type SelectItemProps = SelectPrimitive.Item.Props;
 export type SelectSeparatorProps = SelectPrimitive.Separator.Props;
 export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
 export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
-declare const Select: typeof SelectPrimitive.Root;
+export type SelectOption = {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    description?: React.ReactNode;
+    keywords?: string[];
+};
+export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onValueChange"> & {
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | undefined) => void;
+    options?: SelectOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: React.ReactNode;
+    clearLabel?: string;
+    size?: "sm" | "default" | "lg";
+    clearable?: boolean;
+    searchable?: boolean;
+    loading?: boolean;
+    loadingLabel?: React.ReactNode;
+    disabled?: boolean;
+    showSelectedDescription?: boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
+    itemClassName?: string;
+    searchClassName?: string;
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    invalid?: boolean;
+};
+declare function Select({ value, defaultValue, onValueChange, options, placeholder, searchPlaceholder, emptyLabel, clearLabel, size, clearable, searchable, loading, loadingLabel, disabled, showSelectedDescription, triggerClassName, contentClassName, itemClassName, searchClassName, renderOption, invalid, children, onOpenChange, ...props }: SelectProps): React.JSX.Element;
 declare function SelectGroup({ className, ...props }: SelectGroupProps): React.JSX.Element;
 declare function SelectValue({ className, ...props }: SelectValueProps): React.JSX.Element;
 declare function SelectTrigger({ className, size, children, ...props }: SelectTriggerProps): React.JSX.Element;

package/dist/components/ui/select/index.js

@@ -1,98 +1,204 @@
 "use client";
-import { cn as e } from "../../../lib/utils.js";
-import "react";
-import { CheckIcon as t, ChevronDownIcon as n, ChevronUpIcon as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Select as o } from "@base-ui/react/select";
+import { cn as e, stopInteractivePropagation as t } from "../../../lib/utils.js";
+import * as n from "react";
+import { CheckIcon as r, ChevronDownIcon as i, ChevronUpIcon as a, LoaderCircleIcon as o, SearchIcon as s, XIcon as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Select as d } from "@base-ui/react/select";
 //#region src/components/ui/select/index.tsx
-var s = o.Root;
-function c({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Group, {
+var f = d.Root;
+function p(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 m({ value: i, defaultValue: a, onValueChange: d, options: m, placeholder: h = "Select", searchPlaceholder: y = "Search options...", emptyLabel: x = "No options found", clearLabel: S = "Clear selection", size: C = "default", clearable: w = !1, searchable: T = !1, loading: E = !1, loadingLabel: D = "Loading options...", disabled: O = !1, showSelectedDescription: k = !0, triggerClassName: A, contentClassName: j, itemClassName: M, searchClassName: N, renderOption: P, invalid: F, children: I, onOpenChange: L, ...R }) {
+	if (!m) return /* @__PURE__ */ l(f, {
+		value: i ?? void 0,
+		defaultValue: a ?? void 0,
+		onValueChange: (e) => d?.(e ?? void 0),
+		onOpenChange: L,
+		disabled: O,
+		...R,
+		children: I
+	});
+	let [z, B] = n.useState(""), V = m.find((e) => e.value === i), H = m.filter((e) => p(e, z));
+	return /* @__PURE__ */ u(f, {
+		value: i ?? void 0,
+		defaultValue: a ?? void 0,
+		onValueChange: (e) => d?.(e ?? void 0),
+		disabled: O || E,
+		onOpenChange: (e, t) => {
+			e || B(""), L?.(e, t);
+		},
+		...R,
+		children: [/* @__PURE__ */ u(_, {
+			size: C,
+			"aria-invalid": F || void 0,
+			className: e("w-full", A),
+			children: [
+				/* @__PURE__ */ l(g, {
+					placeholder: h,
+					children: V ? /* @__PURE__ */ u("span", {
+						className: "flex min-w-0 flex-col items-start",
+						children: [/* @__PURE__ */ l("span", {
+							className: "truncate",
+							children: V.label
+						}), k && V.description ? /* @__PURE__ */ l("span", {
+							className: "truncate text-[11px] font-medium text-muted-foreground",
+							children: V.description
+						}) : null]
+					}) : null
+				}),
+				E ? /* @__PURE__ */ l(o, { className: "size-4 animate-spin text-muted-foreground" }) : null,
+				w && i && !O && !E ? /* @__PURE__ */ l("span", {
+					role: "button",
+					tabIndex: 0,
+					"aria-label": S,
+					className: "ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					onClick: (e) => {
+						e.preventDefault(), t(e), d?.(void 0);
+					},
+					onMouseDown: t,
+					onDoubleClick: t,
+					onKeyDown: (e) => {
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), d?.(void 0));
+					},
+					children: /* @__PURE__ */ l(c, { className: "size-3.5" })
+				}) : null
+			]
+		}), /* @__PURE__ */ u(v, {
+			className: e("w-(--anchor-width)", j),
+			children: [T ? /* @__PURE__ */ u("div", {
+				"data-slot": "select-search",
+				className: "sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm",
+				children: [/* @__PURE__ */ l(s, { className: "size-4 text-muted-foreground" }), /* @__PURE__ */ l("input", {
+					value: z,
+					onChange: (e) => B(e.target.value),
+					placeholder: y,
+					className: e("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", N)
+				})]
+			}) : null, E ? /* @__PURE__ */ u("div", {
+				"data-slot": "select-state",
+				className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ l(o, { className: "size-4 animate-spin" }), D]
+			}) : H.length === 0 ? /* @__PURE__ */ l("div", {
+				"data-slot": "select-state",
+				className: "rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground",
+				children: x
+			}) : H.map((t) => {
+				let n = t.value === i;
+				return /* @__PURE__ */ l(b, {
+					value: t.value,
+					disabled: t.disabled,
+					className: e("rounded-[var(--radius-md)]", M),
+					children: P ? P(t, { selected: n }) : /* @__PURE__ */ u("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ u("span", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ l("span", {
+								className: "truncate",
+								children: t.label
+							}), n ? /* @__PURE__ */ l(r, { className: "ml-auto size-3.5 text-primary" }) : null]
+						}), t.description ? /* @__PURE__ */ l("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: t.description
+						}) : null]
+					})
+				}, t.value);
+			})]
+		})]
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ l(d.Group, {
 		"data-slot": "select-group",
 		className: e("scroll-my-1 p-1", t),
 		...n
 	});
 }
-function l({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Value, {
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ l(d.Value, {
 		"data-slot": "select-value",
 		className: e("flex flex-1 text-left", t),
 		...n
 	});
 }
-function u({ className: t, size: r = "default", children: s, ...c }) {
-	return /* @__PURE__ */ a(o.Trigger, {
+function _({ className: t, size: n = "default", children: r, ...a }) {
+	return /* @__PURE__ */ u(d.Trigger, {
 		"data-slot": "select-trigger",
-		"data-size": r,
+		"data-size": n,
 		className: e("flex w-full min-w-0 items-center justify-between gap-2 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))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-11 data-[size=lg]:h-12 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
-		...c,
-		children: [s, /* @__PURE__ */ i(o.Icon, { render: /* @__PURE__ */ i(n, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
+		...a,
+		children: [r, /* @__PURE__ */ l(d.Icon, { render: /* @__PURE__ */ l(i, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
 	});
 }
-function d({ className: t, children: n, side: r = "bottom", sideOffset: s = 4, align: c = "center", alignOffset: l = 0, alignItemWithTrigger: u = !0, ...d }) {
-	return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.Positioner, {
+function v({ className: t, children: n, side: r = "bottom", sideOffset: i = 4, align: a = "center", alignOffset: o = 0, alignItemWithTrigger: s = !0, ...c }) {
+	return /* @__PURE__ */ l(d.Portal, { children: /* @__PURE__ */ l(d.Positioner, {
 		side: r,
-		sideOffset: s,
-		align: c,
-		alignOffset: l,
-		alignItemWithTrigger: u,
+		sideOffset: i,
+		align: a,
+		alignOffset: o,
+		alignItemWithTrigger: s,
 		className: "isolate z-50",
-		children: /* @__PURE__ */ a(o.Popup, {
+		children: /* @__PURE__ */ u(d.Popup, {
 			"data-slot": "select-content",
-			"data-align-trigger": u,
+			"data-align-trigger": s,
 			className: e("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95", t),
-			...d,
+			...c,
 			children: [
-				/* @__PURE__ */ i(h, {}),
-				/* @__PURE__ */ i(o.List, { children: n }),
-				/* @__PURE__ */ i(g, {})
+				/* @__PURE__ */ l(S, {}),
+				/* @__PURE__ */ l(d.List, { children: n }),
+				/* @__PURE__ */ l(C, {})
 			]
 		})
 	}) });
 }
-function f({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.GroupLabel, {
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ l(d.GroupLabel, {
 		"data-slot": "select-label",
 		className: e("px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90", t),
 		...n
 	});
 }
-function p({ className: n, children: r, ...s }) {
-	return /* @__PURE__ */ a(o.Item, {
+function b({ className: t, children: n, ...i }) {
+	return /* @__PURE__ */ u(d.Item, {
 		"data-slot": "select-item",
-		className: e("relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] 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-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2", n),
-		...s,
-		children: [/* @__PURE__ */ i(o.ItemText, {
+		className: e("relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] 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-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2", t),
+		...i,
+		children: [/* @__PURE__ */ l(d.ItemText, {
 			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
-			children: r
-		}), /* @__PURE__ */ i(o.ItemIndicator, {
-			render: /* @__PURE__ */ i("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
-			children: /* @__PURE__ */ i(t, { className: "pointer-events-none" })
+			children: n
+		}), /* @__PURE__ */ l(d.ItemIndicator, {
+			render: /* @__PURE__ */ l("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ l(r, { className: "pointer-events-none" })
 		})]
 	});
 }
-function m({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Separator, {
+function x({ className: t, ...n }) {
+	return /* @__PURE__ */ l(d.Separator, {
 		"data-slot": "select-separator",
 		className: e("pointer-events-none -mx-1 my-1.5 h-px bg-border/80", t),
 		...n
 	});
 }
-function h({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.ScrollUpArrow, {
+function S({ className: t, ...n }) {
+	return /* @__PURE__ */ l(d.ScrollUpArrow, {
 		"data-slot": "select-scroll-up-button",
 		className: e("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4", t),
 		...n,
-		children: /* @__PURE__ */ i(r, {})
+		children: /* @__PURE__ */ l(a, {})
 	});
 }
-function g({ className: t, ...r }) {
-	return /* @__PURE__ */ i(o.ScrollDownArrow, {
+function C({ className: t, ...n }) {
+	return /* @__PURE__ */ l(d.ScrollDownArrow, {
 		"data-slot": "select-scroll-down-button",
 		className: e("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4", t),
-		...r,
-		children: /* @__PURE__ */ i(n, {})
+		...n,
+		children: /* @__PURE__ */ l(i, {})
 	});
 }
 //#endregion
-export { s as Select, d as SelectContent, c as SelectGroup, p as SelectItem, f as SelectLabel, g as SelectScrollDownButton, h as SelectScrollUpButton, m as SelectSeparator, u as SelectTrigger, l as SelectValue };
+export { m as Select, v as SelectContent, h as SelectGroup, b as SelectItem, y as SelectLabel, C as SelectScrollDownButton, S as SelectScrollUpButton, x as SelectSeparator, _ as SelectTrigger, g as SelectValue };

package/dist/showcase/create-demo.cjs

@@ -1,8 +1,9 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./render-registry-preview.cjs");let t=require("react/jsx-runtime");function n(e,t,n,r,i=t){let a=m(e);return{slug:e,title:a,component:t,kind:n,summary:r,importName:i,highlights:[`${a} renders with realistic dashboard data instead of an empty shell.`,`${t} stays isolated so copy, install and preview remain component-scoped.`,u(n)],scenarios:[{title:`Use when`,description:d(n,r)},{title:`Implementation`,description:f(e,i)}]}}function r(e){return Object.fromEntries(e.map(e=>[e.slug,{mock:i(e),Showcase:n=>(0,t.jsx)(l,{definition:e,...n})}]))}function i(e){return{cliCommand:`npx tembro add ${e.slug}`,code:a(e),highlights:e.highlights,scenarios:e.scenarios,capabilityNotes:c(e)}}function a(e){return o[e.slug]??s(e)}var o={"search-input":`import { SearchInput } from "tembro"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./render-registry-preview.cjs");let t=require("react/jsx-runtime");function n(e,t,n,r,i=t){let a=m(e);return{slug:e,title:a,component:t,kind:n,summary:r,importName:i,highlights:[`${a} renders with realistic dashboard data instead of an empty shell.`,`${t} stays isolated so copy, install and preview remain component-scoped.`,u(n)],scenarios:[{title:`Use when`,description:d(n,r)},{title:`Implementation`,description:f(e,i)}]}}function r(e){return Object.fromEntries(e.map(e=>[e.slug,{mock:i(e),Showcase:n=>(0,t.jsx)(l,{definition:e,...n})}]))}function i(e){return{cliCommand:`npx tembro add ${e.slug}`,code:a(e),highlights:e.highlights,scenarios:e.scenarios,capabilityNotes:c(e)}}function a(e){return o[e.slug]??s(e)}var o={"search-input":`import { Input } from "tembro"
 
 export function Demo() {
   return (
-    <SearchInput
+    <Input
+      type="search"
       value="invoice"
       onValueChange={(value) => console.log(value)}
       placeholder="Search invoices..."
@@ -61,12 +62,12 @@ export function Demo() {
       ]}
     />
   )
-}`,"filter-bar":`import { Button, FilterBar, SearchInput } from "tembro"
+}`,"filter-bar":`import { Button, FilterBar, Input } from "tembro"
 
 export function Demo() {
   return (
     <FilterBar
-      search={<SearchInput value="" placeholder="Search rows..." readOnly />}
+      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
       chips={[
         { key: "status", label: "Status", value: "Active", tone: "success" },
         { key: "owner", label: "Owner", value: "Azamat" },

package/dist/showcase/create-demo.js

@@ -46,14 +46,14 @@ function o(e) {
 	return s[e.slug] ?? c(e);
 }
 var s = {
-	"search-input": "import { SearchInput } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <SearchInput\n      value=\"invoice\"\n      onValueChange={(value) => console.log(value)}\n      placeholder=\"Search invoices...\"\n      resultCount={12}\n      shortcut=\"Ctrl K\"\n    />\n  )\n}",
+	"search-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <Input\n      type=\"search\"\n      value=\"invoice\"\n      onValueChange={(value) => console.log(value)}\n      placeholder=\"Search invoices...\"\n      resultCount={12}\n      shortcut=\"Ctrl K\"\n    />\n  )\n}",
 	"password-input": "import { PasswordInput } from \"tembro\"\n\nexport function Demo() {\n  return <PasswordInput placeholder=\"Enter secure token\" autoComplete=\"current-password\" />\n}",
 	"clearable-input": "import { Input } from \"tembro\"\n\nexport function Demo() {\n  return <Input defaultValue=\"Azamat UI\" placeholder=\"Search customer\" clearable />\n}",
 	"tag-input": "import { TagInput } from \"tembro\"\n\nexport function Demo() {\n  return <TagInput defaultValue={[\"dashboard\", \"billing\"]} placeholder=\"Add tag\" />\n}",
 	"action-menu": "import { ActionMenu, Button } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ActionMenu\n      label=\"Row actions\"\n      actions={[\n        { key: \"open\", label: \"Open\" },\n        { key: \"duplicate\", label: \"Duplicate\" },\n        { key: \"archive\", label: \"Archive\", destructive: true },\n      ]}\n      trigger={<Button variant=\"outline\">Actions</Button>}\n    />\n  )\n}",
 	"button-group": "import { ButtonGroup } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <ButtonGroup\n      items={[\n        { key: \"day\", label: \"Day\" },\n        { key: \"week\", label: \"Week\" },\n        { key: \"month\", label: \"Month\" },\n      ]}\n    />\n  )\n}",
 	"quick-action-grid": "import { QuickActionGrid } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <QuickActionGrid\n      columns={3}\n      items={[\n        { key: \"new\", label: \"New invoice\", description: \"Create a billing row.\" },\n        { key: \"import\", label: \"Import CSV\", description: \"Upload operational data.\" },\n        { key: \"share\", label: \"Share\", description: \"Invite a teammate.\" },\n      ]}\n    />\n  )\n}",
-	"filter-bar": "import { Button, FilterBar, SearchInput } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <FilterBar\n      search={<SearchInput value=\"\" placeholder=\"Search rows...\" readOnly />}\n      chips={[\n        { key: \"status\", label: \"Status\", value: \"Active\", tone: \"success\" },\n        { key: \"owner\", label: \"Owner\", value: \"Azamat\" },\n      ]}\n      filters={<Button variant=\"outline\">Status</Button>}\n      actions={<Button>Export</Button>}\n      onReset={() => undefined}\n    />\n  )\n}",
+	"filter-bar": "import { Button, FilterBar, Input } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <FilterBar\n      search={<Input type=\"search\" value=\"\" placeholder=\"Search rows...\" readOnly />}\n      chips={[\n        { key: \"status\", label: \"Status\", value: \"Active\", tone: \"success\" },\n        { key: \"owner\", label: \"Owner\", value: \"Azamat\" },\n      ]}\n      filters={<Button variant=\"outline\">Status</Button>}\n      actions={<Button>Export</Button>}\n      onReset={() => undefined}\n    />\n  )\n}",
 	"description-list": "import { DescriptionList } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <DescriptionList\n      title=\"Invoice details\"\n      items={[\n        { key: \"id\", label: \"Invoice\", value: \"#4821\" },\n        { key: \"amount\", label: \"Amount\", value: \"$12,420\" },\n        { key: \"status\", label: \"Status\", value: \"Paid\" },\n      ]}\n    />\n  )\n}",
 	"stat-card": "import { StatCard } from \"tembro\"\n\nexport function Demo() {\n  return (\n    <StatCard\n      title=\"Revenue\"\n      value=\"$84.2k\"\n      description=\"Compared with last month\"\n      trend={{ value: \"+12.4%\", tone: \"success\" }}\n      helperText=\"Updated just now\"\n    />\n  )\n}",
 	pagination: "import { Pagination } from \"tembro\"\n\nexport function Demo() {\n  return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />\n}",

package/dist/showcase/premium/data-table/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/inputs/simple-select.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),o=require("../../../components/data-table/data-table.cjs"),s=require("../../../components/data-table/data-table-sortable-header.cjs"),c=require("../../../components/data-table/data-table-select-column.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{invoice:`INV-4821`,customer:`Acme Studio`,owner:`Azamat`,amount:`$12,420`,status:`Paid`,updatedAt:`2m ago`},{invoice:`INV-4822`,customer:`Northwind`,owner:`Madina`,amount:`$8,120`,status:`Review`,updatedAt:`10m ago`},{invoice:`INV-4823`,customer:`Globex`,owner:`Jasur`,amount:`$4,880`,status:`Draft`,updatedAt:`22m ago`},{invoice:`INV-4824`,customer:`Pixel Union`,owner:`Azamat`,amount:`$17,300`,status:`Paid`,updatedAt:`44m ago`},{invoice:`INV-4825`,customer:`Meridian Labs`,owner:`Madina`,amount:`$2,180`,status:`Review`,updatedAt:`1h ago`},{invoice:`INV-4826`,customer:`Orbit Cloud`,owner:`Jasur`,amount:`$9,040`,status:`Draft`,updatedAt:`3h ago`}];function f(){let[e,f]=l.useState(``),[p,m]=l.useState(`all`),[h,g]=l.useState(`all`),[_,v]=l.useState({}),y=d.filter(t=>{let n=e.trim().toLowerCase(),r=!n||`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n),i=p===`all`||t.status===p,a=h===`all`||t.owner===h;return r&&i&&a}),b=Object.values(_).filter(Boolean).length,x=l.useMemo(()=>[c.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,u.jsx)(n.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Amount`})},{accessorKey:`updatedAt`,header:`Updated`},i.createDataTableActionsColumn({getActions:()=>[{key:`open`,label:`Open detail`,onSelect:()=>void 0},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>void 0}]})],[]);return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,u.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,u.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:y.length})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:b})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e||p!==`all`||h!==`all`?`Filtered`:`Live`})]})]})]}),(0,u.jsx)(o.DataTable,{columns:x,data:y,getRowId:e=>e.invoice,enableRowSelection:!0,rowSelection:_,title:`Invoices`,description:`Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface.`,features:{search:!0,columnVisibility:!0,bulkActions:!0},search:{value:e,onValueChange:f,placeholder:`Search invoice, customer...`,clearable:!0},filters:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.SimpleSelect,{value:p,onValueChange:e=>m(e??`all`),options:[{value:`all`,label:`All statuses`},{value:`Paid`,label:`Paid`},{value:`Review`,label:`Review`},{value:`Draft`,label:`Draft`}],triggerClassName:`min-w-40`}),(0,u.jsx)(r.SimpleSelect,{value:h,onValueChange:e=>g(e??`all`),options:[{value:`all`,label:`All owners`},{value:`Azamat`,label:`Azamat`},{value:`Madina`,label:`Madina`},{value:`Jasur`,label:`Jasur`}],triggerClassName:`min-w-36`})]}),summary:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.Badge,{variant:`outline`,children:[y.length,` rows`]}),(0,u.jsxs)(n.Badge,{variant:`outline`,children:[b,` selected`]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e||p!==`all`||h!==`all`?`Filtered view`:`Live view`})]}),toolbarActions:({table:e})=>(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,u.jsx)(a.DataTableColumnVisibilityMenu,{table:e}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`})]}),bulkActions:[{key:`export`,label:`Export selected`,onSelect:()=>void 0},{key:`archive`,label:`Archive selected`,destructive:!0,onSelect:()=>void 0}],onRowSelectionChange:e=>{v(t=>typeof e==`function`?e(t):e)},onRowClick:()=>void 0,renderMobileCard:e=>(0,u.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,u.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:y.length,pageCount:Math.max(Math.ceil(y.length/5),1),pageSizeOptions:[5,10],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=f;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/select/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),o=require("../../../components/data-table/data-table.cjs"),s=require("../../../components/data-table/data-table-sortable-header.cjs"),c=require("../../../components/data-table/data-table-select-column.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{invoice:`INV-4821`,customer:`Acme Studio`,owner:`Azamat`,amount:`$12,420`,status:`Paid`,updatedAt:`2m ago`},{invoice:`INV-4822`,customer:`Northwind`,owner:`Madina`,amount:`$8,120`,status:`Review`,updatedAt:`10m ago`},{invoice:`INV-4823`,customer:`Globex`,owner:`Jasur`,amount:`$4,880`,status:`Draft`,updatedAt:`22m ago`},{invoice:`INV-4824`,customer:`Pixel Union`,owner:`Azamat`,amount:`$17,300`,status:`Paid`,updatedAt:`44m ago`},{invoice:`INV-4825`,customer:`Meridian Labs`,owner:`Madina`,amount:`$2,180`,status:`Review`,updatedAt:`1h ago`},{invoice:`INV-4826`,customer:`Orbit Cloud`,owner:`Jasur`,amount:`$9,040`,status:`Draft`,updatedAt:`3h ago`}];function f(){let[e,f]=l.useState(``),[p,m]=l.useState(`all`),[h,g]=l.useState(`all`),[_,v]=l.useState({}),y=d.filter(t=>{let n=e.trim().toLowerCase(),r=!n||`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n),i=p===`all`||t.status===p,a=h===`all`||t.owner===h;return r&&i&&a}),b=Object.values(_).filter(Boolean).length,x=l.useMemo(()=>[c.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,u.jsx)(n.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,u.jsx)(s.DataTableSortableHeader,{column:e,children:`Amount`})},{accessorKey:`updatedAt`,header:`Updated`},i.createDataTableActionsColumn({getActions:()=>[{key:`open`,label:`Open detail`,onSelect:()=>void 0},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>void 0}]})],[]);return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,u.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,u.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:y.length})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:b})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e||p!==`all`||h!==`all`?`Filtered`:`Live`})]})]})]}),(0,u.jsx)(o.DataTable,{columns:x,data:y,getRowId:e=>e.invoice,enableRowSelection:!0,rowSelection:_,title:`Invoices`,description:`Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface.`,features:{search:!0,columnVisibility:!0,bulkActions:!0},search:{value:e,onValueChange:f,placeholder:`Search invoice, customer...`,clearable:!0},filters:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.Select,{value:p,onValueChange:e=>m(e??`all`),options:[{value:`all`,label:`All statuses`},{value:`Paid`,label:`Paid`},{value:`Review`,label:`Review`},{value:`Draft`,label:`Draft`}],triggerClassName:`min-w-40`}),(0,u.jsx)(r.Select,{value:h,onValueChange:e=>g(e??`all`),options:[{value:`all`,label:`All owners`},{value:`Azamat`,label:`Azamat`},{value:`Madina`,label:`Madina`},{value:`Jasur`,label:`Jasur`}],triggerClassName:`min-w-36`})]}),summary:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.Badge,{variant:`outline`,children:[y.length,` rows`]}),(0,u.jsxs)(n.Badge,{variant:`outline`,children:[b,` selected`]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e||p!==`all`||h!==`all`?`Filtered view`:`Live view`})]}),toolbarActions:({table:e})=>(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,u.jsx)(a.DataTableColumnVisibilityMenu,{table:e}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`})]}),bulkActions:[{key:`export`,label:`Export selected`,onSelect:()=>void 0},{key:`archive`,label:`Archive selected`,destructive:!0,onSelect:()=>void 0}],onRowSelectionChange:e=>{v(t=>typeof e==`function`?e(t):e)},onRowClick:()=>void 0,renderMobileCard:e=>(0,u.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,u.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:y.length,pageCount:Math.max(Math.ceil(y.length/5),1),pageSizeOptions:[5,10],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=f;

package/dist/showcase/premium/data-table/showcase.js

@@ -1,6 +1,6 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
-import { SimpleSelect as n } from "../../../components/inputs/simple-select.js";
+import { Select as n } from "../../../components/ui/select/index.js";
 import { createDataTableActionsColumn as r } from "../../../components/data-table/data-table-actions-column.js";
 import { DataTableColumnVisibilityMenu as i } from "../../../components/data-table/data-table-column-visibility-menu.js";
 import { DataTable as a } from "../../../components/data-table/data-table.js";

package/dist/showcase/premium/data-table-parts/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/inputs/search-input.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-bulk-actions.cjs"),o=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),s=require("../../../components/data-table/data-table.cjs"),c=require("../../../components/data-table/data-table-sortable-header.cjs"),l=require("../../../components/data-table/data-table-view-presets.cjs"),u=require("../../../components/data-table/data-table-saved-filters.cjs"),d=require("../../../components/data-table/data-table-select-column.cjs"),f=require("./data.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=f.buildDataTableDemoRows(6);function g(e){return[d.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,m.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Amount`})},i.createDataTableActionsColumn({getActions:(t,n)=>[{key:`open`,label:`Open detail`,onSelect:()=>e(`${n.invoice} opened from row action`)},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>e(`${n.invoice} sent to archive`)}]})]}function _({slug:e}){let[i,c]=p.useState(``),[d,_]=p.useState(`all`),[v,y]=p.useState({}),[b,x]=p.useState({}),[S,C]=p.useState(`Ready`),[w,T]=p.useState(0),E=p.useMemo(()=>{let e=i.trim().toLowerCase(),t=h;return d===`finance`&&(t=t.filter(e=>e.status===`Paid`||e.status===`Review`)),d===`at-risk`&&(t=t.filter(e=>e.status===`Draft`||e.status===`Overdue`)),e?t.filter(t=>[t.invoice,t.customer,t.owner,t.channel,t.amount].join(` `).toLowerCase().includes(e)):t},[i,d]),D=p.useMemo(()=>E.filter((e,t)=>v[t]),[E,v]),O=p.useMemo(()=>g(C),[]),k={"data-table-pagination":`Pagination route`,"data-table-toolbar":`Toolbar route`,"data-table-row-actions":`Row actions route`,"data-table-actions-column":`Actions column route`,"data-table-select-column":`Select column route`,"data-table-saved-filters":`Saved filters route`};return(0,m.jsxs)(`div`,{className:`space-y-4`,children:[(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:k[e]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[E.length,` rows`]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[D.length,` selected`]})]}),(0,m.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:k[e]}),(0,m.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:{"data-table-pagination":`Pagination should be readable in isolation, but still feel like part of a production table shell.`,"data-table-toolbar":`Toolbar route should prove search, visibility and action layout without needing the whole docs page around it.`,"data-table-row-actions":`Row action interactions should stay isolated from row click and selection behavior.`,"data-table-actions-column":`Actions column should show how the helper sits inside a real DataTable definition.`,"data-table-select-column":`Select column route should prove bulk selection and row state separation.`,"data-table-saved-filters":`Saved filters should restore named views and stay aligned with other table controls.`}[e]})]}),e===`data-table-saved-filters`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsx)(u.DataTableSavedFilters,{savedFilters:[{id:`all`,name:`All invoices`,filters:{}},{id:`finance`,name:`Finance review`,filters:{}},{id:`risk`,name:`At risk`,filters:{}}],activeFilterId:d===`all`?`all`:d===`finance`?`finance`:`risk`,onSelectFilter:e=>_(e===`finance`?`finance`:e===`risk`?`at-risk`:`all`),onSaveFilter:e=>C(`Saved filter created: ${e}`),onDeleteFilter:e=>C(`Saved filter deleted: ${e}`),onClearFilters:()=>_(`all`)})}):null,e===`data-table-toolbar`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(l.DataTableViewPresets,{value:d,onValueChange:e=>_(e??`all`),presets:f.dataTableDemoPresets,size:`sm`}),(0,m.jsx)(`div`,{className:`w-full max-w-[320px]`,children:(0,m.jsx)(n.SearchInput,{value:i,onValueChange:c,placeholder:`Search invoice, customer...`})})]})}):null,(0,m.jsx)(s.DataTable,{columns:O,data:E,getRowId:e=>e.invoice,rowSelection:v,onRowSelectionChange:y,columnVisibility:b,onColumnVisibilityChange:x,enableRowSelection:!0,striped:!0,bordered:!0,stickyHeader:!0,toolbarProps:e=>({title:`Invoices`,description:`Premium subroute preview for reusable DataTable parts.`,search:(0,m.jsx)(n.SearchInput,{value:i,onValueChange:c,placeholder:`Search rows...`}),actions:(0,m.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,m.jsx)(o.DataTableColumnVisibilityMenu,{table:e}),(0,m.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>C(`Toolbar export prepared`),children:`Export`})]}),selectionActions:(0,m.jsx)(a.DataTableBulkActions,{rows:e.getSelectedRowModel().rows.map(e=>e.original),actions:[{key:`export`,label:`Export selected`,onSelect:e=>C(`${e.length} rows exported`)}],onClearSelection:()=>y({})})}),pagination:{manual:!0,pageIndex:w,pageSize:5,rowCount:E.length,pageCount:Math.max(Math.ceil(E.length/5),1),pageSizeOptions:[5,10],onPageChange:T,onPageSizeChange:()=>void 0}}),(0,m.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Focused feature`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:k[e]})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Interaction proof`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:S})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Selection`}),(0,m.jsxs)(`p`,{className:`mt-2 aui-text-muted`,children:[D.length,` active rows`]})]})]})]})}exports.DataTablePartShowcase=_;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/input/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-bulk-actions.cjs"),o=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),s=require("../../../components/data-table/data-table.cjs"),c=require("../../../components/data-table/data-table-sortable-header.cjs"),l=require("../../../components/data-table/data-table-view-presets.cjs"),u=require("../../../components/data-table/data-table-saved-filters.cjs"),d=require("../../../components/data-table/data-table-select-column.cjs"),f=require("./data.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=f.buildDataTableDemoRows(6);function g(e){return[d.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,m.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,m.jsx)(c.DataTableSortableHeader,{column:e,children:`Amount`})},i.createDataTableActionsColumn({getActions:(t,n)=>[{key:`open`,label:`Open detail`,onSelect:()=>e(`${n.invoice} opened from row action`)},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>e(`${n.invoice} sent to archive`)}]})]}function _({slug:e}){let[i,c]=p.useState(``),[d,_]=p.useState(`all`),[v,y]=p.useState({}),[b,x]=p.useState({}),[S,C]=p.useState(`Ready`),[w,T]=p.useState(0),E=p.useMemo(()=>{let e=i.trim().toLowerCase(),t=h;return d===`finance`&&(t=t.filter(e=>e.status===`Paid`||e.status===`Review`)),d===`at-risk`&&(t=t.filter(e=>e.status===`Draft`||e.status===`Overdue`)),e?t.filter(t=>[t.invoice,t.customer,t.owner,t.channel,t.amount].join(` `).toLowerCase().includes(e)):t},[i,d]),D=p.useMemo(()=>E.filter((e,t)=>v[t]),[E,v]),O=p.useMemo(()=>g(C),[]),k={"data-table-pagination":`Pagination route`,"data-table-toolbar":`Toolbar route`,"data-table-row-actions":`Row actions route`,"data-table-actions-column":`Actions column route`,"data-table-select-column":`Select column route`,"data-table-saved-filters":`Saved filters route`};return(0,m.jsxs)(`div`,{className:`space-y-4`,children:[(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:k[e]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[E.length,` rows`]}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[D.length,` selected`]})]}),(0,m.jsx)(`p`,{className:`mt-3 text-sm font-medium aui-text-strong`,children:k[e]}),(0,m.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:{"data-table-pagination":`Pagination should be readable in isolation, but still feel like part of a production table shell.`,"data-table-toolbar":`Toolbar route should prove search, visibility and action layout without needing the whole docs page around it.`,"data-table-row-actions":`Row action interactions should stay isolated from row click and selection behavior.`,"data-table-actions-column":`Actions column should show how the helper sits inside a real DataTable definition.`,"data-table-select-column":`Select column route should prove bulk selection and row state separation.`,"data-table-saved-filters":`Saved filters should restore named views and stay aligned with other table controls.`}[e]})]}),e===`data-table-saved-filters`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsx)(u.DataTableSavedFilters,{savedFilters:[{id:`all`,name:`All invoices`,filters:{}},{id:`finance`,name:`Finance review`,filters:{}},{id:`risk`,name:`At risk`,filters:{}}],activeFilterId:d===`all`?`all`:d===`finance`?`finance`:`risk`,onSelectFilter:e=>_(e===`finance`?`finance`:e===`risk`?`at-risk`:`all`),onSaveFilter:e=>C(`Saved filter created: ${e}`),onDeleteFilter:e=>C(`Saved filter deleted: ${e}`),onClearFilters:()=>_(`all`)})}):null,e===`data-table-toolbar`?(0,m.jsx)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4`,children:(0,m.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,m.jsx)(l.DataTableViewPresets,{value:d,onValueChange:e=>_(e??`all`),presets:f.dataTableDemoPresets,size:`sm`}),(0,m.jsx)(`div`,{className:`w-full max-w-[320px]`,children:(0,m.jsx)(n.Input,{type:`search`,value:i,onValueChange:c,placeholder:`Search invoice, customer...`})})]})}):null,(0,m.jsx)(s.DataTable,{columns:O,data:E,getRowId:e=>e.invoice,rowSelection:v,onRowSelectionChange:y,columnVisibility:b,onColumnVisibilityChange:x,enableRowSelection:!0,striped:!0,bordered:!0,stickyHeader:!0,toolbarProps:e=>({title:`Invoices`,description:`Premium subroute preview for reusable DataTable parts.`,search:(0,m.jsx)(n.Input,{type:`search`,value:i,onValueChange:c,placeholder:`Search rows...`}),actions:(0,m.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,m.jsx)(o.DataTableColumnVisibilityMenu,{table:e}),(0,m.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>C(`Toolbar export prepared`),children:`Export`})]}),selectionActions:(0,m.jsx)(a.DataTableBulkActions,{rows:e.getSelectedRowModel().rows.map(e=>e.original),actions:[{key:`export`,label:`Export selected`,onSelect:e=>C(`${e.length} rows exported`)}],onClearSelection:()=>y({})})}),pagination:{manual:!0,pageIndex:w,pageSize:5,rowCount:E.length,pageCount:Math.max(Math.ceil(E.length/5),1),pageSizeOptions:[5,10],onPageChange:T,onPageSizeChange:()=>void 0}}),(0,m.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Focused feature`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:k[e]})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Interaction proof`}),(0,m.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:S})]}),(0,m.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,m.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Selection`}),(0,m.jsxs)(`p`,{className:`mt-2 aui-text-muted`,children:[D.length,` active rows`]})]})]})]})}exports.DataTablePartShowcase=_;