tembro 2.0.6 → 2.1.1

package/dist/components/ui/right-click-menu/index.js

@@ -2,42 +2,96 @@ import { cn as e } from "../../../lib/utils.js";
 import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/ui/right-click-menu/index.tsx
-function i({ items: i, children: a, className: o, ...s }) {
-	let [c, l] = t.useState(!1), [u, d] = t.useState({
+function i(e, t, n = 224, r) {
+	return typeof window > "u" ? {
+		x: e,
+		y: t
+	} : {
+		x: Math.min(Math.max(8, e), Math.max(8, window.innerWidth - n - 8)),
+		y: Math.min(Math.max(8, t), Math.max(8, window.innerHeight - r - 8))
+	};
+}
+function a({ items: a, children: o, className: s, label: c = "Context menu", ...l }) {
+	let [u, d] = t.useState(!1), [f, p] = t.useState({
 		x: 0,
 		y: 0
-	});
-	return t.useEffect(() => {
-		if (!c) return;
-		let e = () => l(!1);
-		return window.addEventListener("click", e), () => window.removeEventListener("click", e);
-	}, [c]), /* @__PURE__ */ r("div", {
+	}), [m, h] = t.useState(0), g = t.useRef(null), _ = t.useRef([]), v = t.useMemo(() => a.map((e, t) => ({
+		item: e,
+		index: t
+	})).filter(({ item: e }) => !e.disabled), [a]), y = t.useCallback((e, t) => {
+		p(i(e, t, 224, Math.max(44, a.length * 42 + 12))), h(v[0]?.index ?? 0), d(!0);
+	}, [v, a.length]);
+	t.useEffect(() => {
+		if (!u) return;
+		let e = () => d(!1), t = (e) => {
+			e.key === "Escape" && d(!1);
+		};
+		return window.addEventListener("pointerdown", e), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), window.addEventListener("keydown", t), () => {
+			window.removeEventListener("pointerdown", e), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0), window.removeEventListener("keydown", t);
+		};
+	}, [u]), t.useEffect(() => {
+		u && _.current[m]?.focus();
+	}, [m, u]);
+	let b = (e) => {
+		if (v.length === 0) return;
+		let t = v[(v.findIndex(({ index: e }) => e === m) + e + v.length) % v.length];
+		h(t.index);
+	};
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "right-click-menu",
-		className: e("contents", o),
+		ref: g,
+		tabIndex: 0,
+		className: e("contents focus:outline-none", s),
 		onContextMenu: (e) => {
-			e.preventDefault(), d({
-				x: e.clientX,
-				y: e.clientY
-			}), l(!0);
+			e.preventDefault(), y(e.clientX, e.clientY);
+		},
+		onKeyDown: (e) => {
+			if (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") {
+				e.preventDefault();
+				let t = g.current?.getBoundingClientRect();
+				y(t ? t.left + 12 : 12, t ? t.top + 12 : 12);
+			}
 		},
-		...s,
-		children: [a, c ? /* @__PURE__ */ n("div", {
-			className: "fixed z-50 min-w-40 rounded-xl border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-xl",
+		...l,
+		children: [o, u ? /* @__PURE__ */ n("div", {
+			"data-slot": "right-click-menu-content",
+			role: "menu",
+			"aria-label": c,
+			className: "fixed z-50 min-w-56 max-w-[calc(100vw-1rem)] 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-1.5 text-sm text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] outline-none",
 			style: {
-				left: u.x,
-				top: u.y
+				left: f.x,
+				top: f.y
 			},
-			children: i.map((e, t) => /* @__PURE__ */ n("button", {
+			onPointerDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "ArrowDown" && (e.preventDefault(), b(1)), e.key === "ArrowUp" && (e.preventDefault(), b(-1)), e.key === "Home" && (e.preventDefault(), h(v[0]?.index ?? m)), e.key === "End" && (e.preventDefault(), h(v.at(-1)?.index ?? m));
+			},
+			children: a.map((e, t) => /* @__PURE__ */ r("button", {
+				ref: (e) => {
+					_.current[t] = e;
+				},
 				type: "button",
+				role: "menuitem",
 				disabled: e.disabled,
-				className: "block w-full rounded-lg px-3 py-2 text-left hover:bg-accent disabled:pointer-events-none disabled:opacity-50",
+				"data-variant": e.variant ?? "default",
+				className: "group flex min-h-9 w-full items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-2 text-left text-popover-foreground outline-none transition-[background-color,color] hover:bg-accent focus-visible:bg-accent data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] data-[variant=destructive]:focus-visible:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
 				onClick: () => {
-					e.onSelect?.(), l(!1);
+					e.disabled || (e.onSelect?.(), d(!1));
 				},
-				children: e.label
+				children: [
+					e.icon,
+					/* @__PURE__ */ n("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: e.label
+					}),
+					e.shortcut ? /* @__PURE__ */ n("span", {
+						className: "ml-3 text-[11px] font-medium tracking-[0.08em] text-muted-foreground group-hover:text-foreground group-focus-visible:text-foreground",
+						children: e.shortcut
+					}) : null
+				]
 			}, t))
 		}) : null]
 	});
 }
 //#endregion
-export { i as RightClickMenu };
+export { a as RightClickMenu };

package/dist/components/ui/segmented-control/index.cjs

@@ -1 +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");var i={sm:`min-h-8 px-2.5 text-xs`,md:`min-h-9 px-3.5 text-sm`,lg:`min-h-10 px-4 text-sm`};function a({value:e,defaultValue:a,onValueChange:o,options:s,size:c=`md`,fullWidth:l=!1,className:u,...d}){let[f,p]=n.useState(a??s[0]?.value),m=e??f,h=t=>{e===void 0&&p(t),o?.(t)};return(0,r.jsx)(`div`,{"data-slot":`segmented-control`,role:`radiogroup`,className:t.cn(`inline-flex gap-1 rounded-[var(--radius-2xl)] border border-border/80 bg-muted/72 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_10px_26px_rgba(15,23,42,0.05)] backdrop-blur`,l&&`flex w-full`,u),...d,children:s.map(e=>{let n=e.value===m;return(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":n,disabled:e.disabled,"data-selected":n||void 0,className:t.cn(`inline-flex items-center justify-center gap-1.5 rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)]`,i[c],l&&`flex-1`),onClick:()=>h(e.value),children:[e.icon,e.label]},e.value)})})}exports.SegmentedControl=a;
+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");var i={sm:`min-h-8 px-2.5 text-xs`,md:`min-h-9 px-3.5 text-sm`,lg:`min-h-10 px-4 text-sm`};function a({value:e,defaultValue:a,onValueChange:o,options:s,size:c=`md`,fullWidth:l=!1,equalWidth:u=!1,className:d,...f}){let[p,m]=n.useState(a??s[0]?.value),h=e??p,g=n.useRef([]),_=t=>{e===void 0&&m(t),o?.(t)},v=(e,t)=>{let n=s.map((e,t)=>({option:e,index:t})).filter(({option:e})=>!e.disabled),r=n[(n.findIndex(({index:t})=>t===e)+t+n.length)%n.length];g.current[r?.index??e]?.focus()};return(0,r.jsx)(`div`,{"data-slot":`segmented-control`,role:`radiogroup`,className:t.cn(`inline-flex gap-1 rounded-[var(--radius-2xl)] border border-border/80 bg-muted/72 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_10px_26px_rgba(15,23,42,0.05)] backdrop-blur`,l&&`flex w-full`,u&&`grid auto-cols-fr grid-flow-col`,d),...f,children:s.map((e,n)=>{let a=e.value===h;return(0,r.jsxs)(`button`,{ref:e=>{g.current[n]=e},type:`button`,role:`radio`,"aria-checked":a,disabled:e.disabled,"data-selected":a||void 0,className:t.cn(`inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)] [&_svg]:size-4 [&_svg]:shrink-0`,i[c],(l||u)&&`w-full`),onClick:()=>_(e.value),onKeyDown:e=>{(e.key===`ArrowRight`||e.key===`ArrowDown`)&&(e.preventDefault(),v(n,1)),(e.key===`ArrowLeft`||e.key===`ArrowUp`)&&(e.preventDefault(),v(n,-1))},children:[e.icon,e.label]},e.value)})})}exports.SegmentedControl=a;

package/dist/components/ui/segmented-control/index.d.ts

@@ -12,6 +12,7 @@ export type SegmentedControlProps<TValue extends string = string> = Omit<React.C
     options: SegmentedControlOption<TValue>[];
     size?: "sm" | "md" | "lg";
     fullWidth?: boolean;
+    equalWidth?: boolean;
 };
-declare function SegmentedControl<TValue extends string = string>({ value, defaultValue, onValueChange, options, size, fullWidth, className, ...props }: SegmentedControlProps<TValue>): React.JSX.Element;
+declare function SegmentedControl<TValue extends string = string>({ value, defaultValue, onValueChange, options, size, fullWidth, equalWidth, className, ...props }: SegmentedControlProps<TValue>): React.JSX.Element;
 export { SegmentedControl };

package/dist/components/ui/segmented-control/index.js

@@ -7,25 +7,37 @@ var i = {
 	md: "min-h-9 px-3.5 text-sm",
 	lg: "min-h-10 px-4 text-sm"
 };
-function a({ value: a, defaultValue: o, onValueChange: s, options: c, size: l = "md", fullWidth: u = !1, className: d, ...f }) {
-	let [p, m] = t.useState(o ?? c[0]?.value), h = a ?? p, g = (e) => {
-		a === void 0 && m(e), s?.(e);
+function a({ value: a, defaultValue: o, onValueChange: s, options: c, size: l = "md", fullWidth: u = !1, equalWidth: d = !1, className: f, ...p }) {
+	let [m, h] = t.useState(o ?? c[0]?.value), g = a ?? m, _ = t.useRef([]), v = (e) => {
+		a === void 0 && h(e), s?.(e);
+	}, y = (e, t) => {
+		let n = c.map((e, t) => ({
+			option: e,
+			index: t
+		})).filter(({ option: e }) => !e.disabled), r = n[(n.findIndex(({ index: t }) => t === e) + t + n.length) % n.length];
+		_.current[r?.index ?? e]?.focus();
 	};
 	return /* @__PURE__ */ n("div", {
 		"data-slot": "segmented-control",
 		role: "radiogroup",
-		className: e("inline-flex gap-1 rounded-[var(--radius-2xl)] border border-border/80 bg-muted/72 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_10px_26px_rgba(15,23,42,0.05)] backdrop-blur", u && "flex w-full", d),
-		...f,
-		children: c.map((t) => {
-			let n = t.value === h;
+		className: e("inline-flex gap-1 rounded-[var(--radius-2xl)] border border-border/80 bg-muted/72 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_10px_26px_rgba(15,23,42,0.05)] backdrop-blur", u && "flex w-full", d && "grid auto-cols-fr grid-flow-col", f),
+		...p,
+		children: c.map((t, n) => {
+			let a = t.value === g;
 			return /* @__PURE__ */ r("button", {
+				ref: (e) => {
+					_.current[n] = e;
+				},
 				type: "button",
 				role: "radio",
-				"aria-checked": n,
+				"aria-checked": a,
 				disabled: t.disabled,
-				"data-selected": n || void 0,
-				className: e("inline-flex items-center justify-center gap-1.5 rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)]", i[l], u && "flex-1"),
-				onClick: () => g(t.value),
+				"data-selected": a || void 0,
+				className: e("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)] [&_svg]:size-4 [&_svg]:shrink-0", i[l], (u || d) && "w-full"),
+				onClick: () => v(t.value),
+				onKeyDown: (e) => {
+					(e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), y(n, 1)), (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), y(n, -1));
+				},
 				children: [t.icon, t.label]
 			}, t.value);
 		})

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(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;
+"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:h,groups:g,placeholder:_=`Select`,searchPlaceholder:v=`Search options...`,emptyLabel:y=`No options found`,emptyMessage:b,clearLabel:x=`Clear selection`,size:S=`default`,clearable:C=!1,searchable:w=!1,loading:T=!1,loadingLabel:E=`Loading options...`,disabled:D=!1,showSelectedDescription:O=!0,triggerClassName:k,contentClassName:A,itemClassName:j,searchClassName:M,renderOption:N,invalid:P,children:F,onOpenChange:I,onSearchChange:L,...R}){if(!h&&!g)return(0,i.jsx)(o,{value:e??void 0,defaultValue:a??void 0,onValueChange:e=>c?.(e??void 0),onOpenChange:I,disabled:D,...R,children:F});let[z,B]=n.useState(``),V=n.useMemo(()=>g??[{options:h??[]}],[g,h]),H=n.useMemo(()=>V.flatMap(e=>e.options),[V]).find(t=>t.value===e),U=V.map(e=>({...e,options:e.options.filter(e=>s(e,z))})).filter(e=>e.options.length>0),W=U.reduce((e,t)=>e+t.options.length,0);return(0,i.jsxs)(o,{value:e??void 0,defaultValue:a??void 0,onValueChange:e=>c?.(e??void 0),disabled:D||T,onOpenChange:(e,t)=>{e||B(``),I?.(e,t)},...R,children:[(0,i.jsxs)(d,{size:S,"aria-invalid":P||void 0,className:t.cn(`w-full`,k),children:[(0,i.jsx)(u,{placeholder:_,children:H?(0,i.jsxs)(`span`,{className:`flex min-w-0 flex-col items-start`,children:[(0,i.jsx)(`span`,{className:`truncate`,children:H.label}),O&&H.description?(0,i.jsx)(`span`,{className:`truncate text-[11px] font-medium text-muted-foreground`,children:H.description}):null]}):null}),T?(0,i.jsx)(r.LoaderCircleIcon,{className:`size-4 animate-spin text-muted-foreground`}):null,C&&e&&!D&&!T?(0,i.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":x,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)`,A),children:[w?(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:z,onChange:e=>{B(e.target.value),L?.(e.target.value)},placeholder:v,className:t.cn(`min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground`,M)})]}):null,T?(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`}),E]}):W===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:b??y}):U.map((n,a)=>(0,i.jsxs)(l,{children:[n.label?(0,i.jsx)(p,{children:n.label}):null,n.options.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)]`,j),children:N?N(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)})]},a))]})]})}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

@@ -19,14 +19,20 @@ export type SelectOption = {
     description?: React.ReactNode;
     keywords?: string[];
 };
+export type SelectOptionGroup = {
+    label?: React.ReactNode;
+    options: SelectOption[];
+};
 export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onValueChange"> & {
     value?: string | null;
     defaultValue?: string | null;
     onValueChange?: (value: string | undefined) => void;
     options?: SelectOption[];
+    groups?: SelectOptionGroup[];
     placeholder?: string;
     searchPlaceholder?: string;
     emptyLabel?: React.ReactNode;
+    emptyMessage?: React.ReactNode;
     clearLabel?: string;
     size?: "sm" | "default" | "lg";
     clearable?: boolean;
@@ -43,8 +49,9 @@ export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onVa
         selected: boolean;
     }) => React.ReactNode;
     invalid?: boolean;
+    onSearchChange?: (value: string) => void;
 };
-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 Select({ value, defaultValue, onValueChange, options, groups, placeholder, searchPlaceholder, emptyLabel, emptyMessage, clearLabel, size, clearable, searchable, loading, loadingLabel, disabled, showSelectedDescription, triggerClassName, contentClassName, itemClassName, searchClassName, renderOption, invalid, children, onOpenChange, onSearchChange, ...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

@@ -14,49 +14,52 @@ function p(e, t) {
 		...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, {
+function m({ value: i, defaultValue: a, onValueChange: d, options: m, groups: x, placeholder: S = "Select", searchPlaceholder: C = "Search options...", emptyLabel: w = "No options found", emptyMessage: T, clearLabel: E = "Clear selection", size: D = "default", clearable: O = !1, searchable: k = !1, loading: A = !1, loadingLabel: j = "Loading options...", disabled: M = !1, showSelectedDescription: N = !0, triggerClassName: P, contentClassName: F, itemClassName: I, searchClassName: L, renderOption: R, invalid: z, children: B, onOpenChange: V, onSearchChange: H, ...U }) {
+	if (!m && !x) 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
+		onOpenChange: V,
+		disabled: M,
+		...U,
+		children: B
 	});
-	let [z, B] = n.useState(""), V = m.find((e) => e.value === i), H = m.filter((e) => p(e, z));
+	let [W, G] = n.useState(""), K = n.useMemo(() => x ?? [{ options: m ?? [] }], [x, m]), q = n.useMemo(() => K.flatMap((e) => e.options), [K]).find((e) => e.value === i), J = K.map((e) => ({
+		...e,
+		options: e.options.filter((e) => p(e, W))
+	})).filter((e) => e.options.length > 0), Y = J.reduce((e, t) => e + t.options.length, 0);
 	return /* @__PURE__ */ u(f, {
 		value: i ?? void 0,
 		defaultValue: a ?? void 0,
 		onValueChange: (e) => d?.(e ?? void 0),
-		disabled: O || E,
+		disabled: M || A,
 		onOpenChange: (e, t) => {
-			e || B(""), L?.(e, t);
+			e || G(""), V?.(e, t);
 		},
-		...R,
+		...U,
 		children: [/* @__PURE__ */ u(_, {
-			size: C,
-			"aria-invalid": F || void 0,
-			className: e("w-full", A),
+			size: D,
+			"aria-invalid": z || void 0,
+			className: e("w-full", P),
 			children: [
 				/* @__PURE__ */ l(g, {
-					placeholder: h,
-					children: V ? /* @__PURE__ */ u("span", {
+					placeholder: S,
+					children: q ? /* @__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", {
+							children: q.label
+						}), N && q.description ? /* @__PURE__ */ l("span", {
 							className: "truncate text-[11px] font-medium text-muted-foreground",
-							children: V.description
+							children: q.description
 						}) : null]
 					}) : null
 				}),
-				E ? /* @__PURE__ */ l(o, { className: "size-4 animate-spin text-muted-foreground" }) : null,
-				w && i && !O && !E ? /* @__PURE__ */ l("span", {
+				A ? /* @__PURE__ */ l(o, { className: "size-4 animate-spin text-muted-foreground" }) : null,
+				O && i && !M && !A ? /* @__PURE__ */ l("span", {
 					role: "button",
 					tabIndex: 0,
-					"aria-label": S,
+					"aria-label": E,
 					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);
@@ -70,31 +73,33 @@ function m({ value: i, defaultValue: a, onValueChange: d, options: m, placeholde
 				}) : null
 			]
 		}), /* @__PURE__ */ u(v, {
-			className: e("w-(--anchor-width)", j),
-			children: [T ? /* @__PURE__ */ u("div", {
+			className: e("w-(--anchor-width)", F),
+			children: [k ? /* @__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)
+					value: W,
+					onChange: (e) => {
+						G(e.target.value), H?.(e.target.value);
+					},
+					placeholder: C,
+					className: e("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", L)
 				})]
-			}) : null, E ? /* @__PURE__ */ u("div", {
+			}) : null, A ? /* @__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", {
+				children: [/* @__PURE__ */ l(o, { className: "size-4 animate-spin" }), j]
+			}) : Y === 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) => {
+				children: T ?? w
+			}) : J.map((t, n) => /* @__PURE__ */ u(h, { children: [t.label ? /* @__PURE__ */ l(y, { children: t.label }) : null, t.options.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: e("rounded-[var(--radius-md)]", I),
+					children: R ? R(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",
@@ -108,7 +113,7 @@ function m({ value: i, defaultValue: a, onValueChange: d, options: m, placeholde
 						}) : null]
 					})
 				}, t.value);
-			})]
+			})] }, n))]
 		})]
 	});
 }

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

@@ -1 +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");var i=n.forwardRef(({className:e,checked:i,defaultChecked:a=!1,onCheckedChange:o,disabled:s,onClick:c,...l},u)=>{let d=i!==void 0,[f,p]=n.useState(a),m=d?i:f;return(0,r.jsx)(`button`,{ref:u,type:`button`,role:`switch`,"aria-checked":m,"data-state":m?`checked`:`unchecked`,"data-slot":`switch`,disabled:s,className:t.cn(`peer inline-flex h-6.5 w-11.5 shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]`,e),onClick:e=>{let t=!m;d||p(t),o?.(t),c?.(e)},...l,children:(0,r.jsx)(`span`,{"data-slot":`switch-thumb`,"data-state":m?`checked`:`unchecked`,className:t.cn(`pointer-events-none block size-5 rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5 dark:bg-[rgba(255,255,255,0.96)]`)})})});i.displayName=`Switch`,exports.Switch=i;
+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");var a={sm:`h-5 w-9`,md:`h-6.5 w-11.5`,lg:`h-8 w-14`},o={sm:`size-4 data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5`,md:`size-5 data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5`,lg:`size-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1`},s=n.forwardRef(({className:e,checked:s,defaultChecked:c=!1,onCheckedChange:l,size:u=`md`,loading:d=!1,invalid:f=!1,label:p,description:m,labelPlacement:h=`end`,switchClassName:g,labelClassName:_,descriptionClassName:v,disabled:y,onClick:b,...x},S)=>{let C=s!==void 0,[w,T]=n.useState(c),E=C?s:w,D=y||d,O=(0,i.jsx)(`button`,{ref:S,type:`button`,role:`switch`,"aria-checked":E,"aria-invalid":f||void 0,"aria-busy":d||void 0,"data-state":E?`checked`:`unchecked`,"data-size":u,"data-slot":`switch`,disabled:D,className:t.cn(`peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]`,a[u],g,!p&&e),onClick:e=>{if(D)return;let t=!E;C||T(t),l?.(t),b?.(e)},...x,children:(0,i.jsx)(`span`,{"data-slot":`switch-thumb`,"data-state":E?`checked`:`unchecked`,className:t.cn(`pointer-events-none flex items-center justify-center rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform dark:bg-[rgba(255,255,255,0.96)]`,o[u]),children:d?(0,i.jsx)(r.Loader2Icon,{className:`size-3 animate-spin text-muted-foreground`}):null})});if(!p&&!m)return O;let k=(0,i.jsxs)(`span`,{className:`grid min-w-0 gap-0.5`,children:[p?(0,i.jsx)(`span`,{className:t.cn(`text-sm font-medium leading-5 text-foreground`,_),children:p}):null,m?(0,i.jsx)(`span`,{className:t.cn(`text-xs leading-5 text-muted-foreground`,v),children:m}):null]});return(0,i.jsx)(`label`,{"data-slot":`switch-field`,"data-label-placement":h,className:t.cn(`inline-flex min-w-0 gap-3`,h===`top`||h===`bottom`?`flex-col`:`items-start`,h===`start`&&`flex-row-reverse justify-end`,e),children:h===`bottom`?(0,i.jsxs)(i.Fragment,{children:[O,k]}):(0,i.jsxs)(i.Fragment,{children:[k,O]})})});s.displayName=`Switch`,exports.Switch=s;

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

@@ -3,10 +3,28 @@ export type SwitchProps = Omit<React.ComponentPropsWithoutRef<"button">, "onChan
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    invalid?: boolean;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+    switchClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
 };
 declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value" | "onChange"> & {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    invalid?: boolean;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+    switchClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };

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

@@ -1,30 +1,60 @@
 import { cn as e } from "../../../lib/utils.js";
 import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { Loader2Icon as n } from "lucide-react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/ui/switch/index.tsx
-var r = t.forwardRef(({ className: r, checked: i, defaultChecked: a = !1, onCheckedChange: o, disabled: s, onClick: c, ...l }, u) => {
-	let d = i !== void 0, [f, p] = t.useState(a), m = d ? i : f;
-	return /* @__PURE__ */ n("button", {
-		ref: u,
+var o = {
+	sm: "h-5 w-9",
+	md: "h-6.5 w-11.5",
+	lg: "h-8 w-14"
+}, s = {
+	sm: "size-4 data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5",
+	md: "size-5 data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5",
+	lg: "size-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1"
+}, c = t.forwardRef(({ className: c, checked: l, defaultChecked: u = !1, onCheckedChange: d, size: f = "md", loading: p = !1, invalid: m = !1, label: h, description: g, labelPlacement: _ = "end", switchClassName: v, labelClassName: y, descriptionClassName: b, disabled: x, onClick: S, ...C }, w) => {
+	let T = l !== void 0, [E, D] = t.useState(u), O = T ? l : E, k = x || p, A = /* @__PURE__ */ i("button", {
+		ref: w,
 		type: "button",
 		role: "switch",
-		"aria-checked": m,
-		"data-state": m ? "checked" : "unchecked",
+		"aria-checked": O,
+		"aria-invalid": m || void 0,
+		"aria-busy": p || void 0,
+		"data-state": O ? "checked" : "unchecked",
+		"data-size": f,
 		"data-slot": "switch",
-		disabled: s,
-		className: e("peer inline-flex h-6.5 w-11.5 shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]", r),
+		disabled: k,
+		className: e("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]", o[f], v, !h && c),
 		onClick: (e) => {
-			let t = !m;
-			d || p(t), o?.(t), c?.(e);
+			if (k) return;
+			let t = !O;
+			T || D(t), d?.(t), S?.(e);
 		},
-		...l,
-		children: /* @__PURE__ */ n("span", {
+		...C,
+		children: /* @__PURE__ */ i("span", {
 			"data-slot": "switch-thumb",
-			"data-state": m ? "checked" : "unchecked",
-			className: e("pointer-events-none block size-5 rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5 dark:bg-[rgba(255,255,255,0.96)]")
+			"data-state": O ? "checked" : "unchecked",
+			className: e("pointer-events-none flex items-center justify-center rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform dark:bg-[rgba(255,255,255,0.96)]", s[f]),
+			children: p ? /* @__PURE__ */ i(n, { className: "size-3 animate-spin text-muted-foreground" }) : null
 		})
 	});
+	if (!h && !g) return A;
+	let j = /* @__PURE__ */ a("span", {
+		className: "grid min-w-0 gap-0.5",
+		children: [h ? /* @__PURE__ */ i("span", {
+			className: e("text-sm font-medium leading-5 text-foreground", y),
+			children: h
+		}) : null, g ? /* @__PURE__ */ i("span", {
+			className: e("text-xs leading-5 text-muted-foreground", b),
+			children: g
+		}) : null]
+	});
+	return /* @__PURE__ */ i("label", {
+		"data-slot": "switch-field",
+		"data-label-placement": _,
+		className: e("inline-flex min-w-0 gap-3", _ === "top" || _ === "bottom" ? "flex-col" : "items-start", _ === "start" && "flex-row-reverse justify-end", c),
+		children: _ === "bottom" ? /* @__PURE__ */ a(r, { children: [A, j] }) : /* @__PURE__ */ a(r, { children: [j, A] })
+	});
 });
-r.displayName = "Switch";
+c.displayName = "Switch";
 //#endregion
-export { r as Switch };
+export { c as Switch };

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

@@ -1 +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/tabs");var a=i.Tabs.Root,o=n.forwardRef(({className:e,...n},a)=>(0,r.jsx)(i.Tabs.List,{ref:a,"data-slot":`tabs-list`,className:t.cn(`inline-flex min-h-11 items-center justify-center gap-1 rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:color-mix(in_oklch,var(--border),white_4%)] bg-[color:var(--aui-control-panel-bg,var(--muted))] p-1 text-muted-foreground shadow-[var(--aui-control-panel-shadow,var(--aui-control-shadow,none))] backdrop-blur`,e),...n}));o.displayName=`TabsList`;var s=n.forwardRef(({className:e,...n},a)=>(0,r.jsx)(i.Tabs.Tab,{ref:a,"data-slot":`tabs-trigger`,className:t.cn(`inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color] hover:bg-[color:color-mix(in_oklch,var(--background),transparent_18%)] hover:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] data-[selected]:bg-[color:var(--aui-control-surface,var(--background))] data-[selected]:text-foreground data-[selected]:shadow-[var(--aui-control-shadow,none)] aria-selected:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] aria-selected:bg-[color:var(--aui-control-surface,var(--background))] aria-selected:text-foreground aria-selected:shadow-[var(--aui-control-shadow,none)] focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:opacity-50`,e),...n}));s.displayName=`TabsTrigger`;var c=n.forwardRef(({className:e,...n},a)=>(0,r.jsx)(i.Tabs.Panel,{ref:a,"data-slot":`tabs-content`,className:t.cn(`mt-3 ring-offset-background focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]`,e),...n}));c.displayName=`TabsContent`,exports.Tabs=a,exports.TabsContent=c,exports.TabsList=o,exports.TabsTrigger=s;
+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/tabs");var a=i.Tabs.Root,o=n.forwardRef(({className:e,variant:n=`default`,overflow:a=`scroll`,...o},s)=>(0,r.jsx)(i.Tabs.List,{ref:s,"data-slot":`tabs-list`,"data-variant":n,"data-overflow":a,className:t.cn(`inline-flex max-w-full min-h-11 items-center justify-start gap-1 rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:color-mix(in_oklch,var(--border),white_4%)] bg-[color:var(--aui-control-panel-bg,var(--muted))] p-1 text-muted-foreground shadow-[var(--aui-control-panel-shadow,var(--aui-control-shadow,none))] backdrop-blur`,a===`scroll`&&`overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,a===`wrap`&&`flex-wrap`,n===`underline`&&`min-h-10 rounded-none border-x-0 border-t-0 bg-transparent p-0 shadow-none`,n===`compact`&&`min-h-9 rounded-[var(--radius-lg)] p-0.5`,n===`pills`&&`rounded-full`,e),...o}));o.displayName=`TabsList`;var s=n.forwardRef(({className:e,variant:n=`default`,...a},o)=>(0,r.jsx)(i.Tabs.Tab,{ref:o,"data-slot":`tabs-trigger`,"data-variant":n,className:t.cn(`inline-flex min-h-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color] hover:bg-[color:color-mix(in_oklch,var(--background),transparent_18%)] hover:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] data-[selected]:bg-[color:var(--aui-control-surface,var(--background))] data-[selected]:text-foreground data-[selected]:shadow-[var(--aui-control-shadow,none)] aria-selected:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] aria-selected:bg-[color:var(--aui-control-surface,var(--background))] aria-selected:text-foreground aria-selected:shadow-[var(--aui-control-shadow,none)] focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0`,n===`underline`&&`min-h-10 rounded-none border-b-2 px-2 shadow-none data-[selected]:border-b-primary data-[selected]:bg-transparent data-[selected]:shadow-none aria-selected:border-b-primary aria-selected:bg-transparent aria-selected:shadow-none`,n===`pills`&&`rounded-full`,n===`compact`&&`min-h-8 px-2.5 text-xs`,e),...a}));s.displayName=`TabsTrigger`;var c=n.forwardRef(({className:e,...n},a)=>(0,r.jsx)(i.Tabs.Panel,{ref:a,"data-slot":`tabs-content`,className:t.cn(`mt-3 ring-offset-background focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]`,e),...n}));c.displayName=`TabsContent`,exports.Tabs=a,exports.TabsContent=c,exports.TabsList=o,exports.TabsTrigger=s;

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

@@ -1,11 +1,21 @@
 import * as React from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 export type TabsRootProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Root>;
-export type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List>;
-export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>;
+export type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List> & {
+    variant?: "default" | "pills" | "underline" | "compact";
+    overflow?: "wrap" | "scroll";
+};
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab> & {
+    variant?: "default" | "pills" | "underline" | "compact";
+};
 export type TabsContentProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>;
 declare const Tabs: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: "default" | "pills" | "underline" | "compact";
+    overflow?: "wrap" | "scroll";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+    variant?: "default" | "pills" | "underline" | "compact";
+} & React.RefAttributes<HTMLElement>>;
 declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Tabs, TabsList, TabsTrigger, TabsContent };