@qtalo/qt-ui-library 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
@@ -142,13 +142,13 @@ function Button({ className: r, children: M, ...N }) {
 	});
 }
 function Checkbox({ checked: r, defaultChecked: M, icon: N, indeterminate: P, indeterminateIcon: F, onChange: I, disabled: L, children: R, className: z }) {
-	let V = useRef(null), [H, U] = useState(M ?? !1), K = r ?? H;
+	let V = useRef(null), [H, G] = useState(M ?? !1), q = r ?? H;
 	useEffect(() => {
 		V.current && (V.current.indeterminate = !!P);
 	}, [P]);
 	function J(M) {
 		let N = M.target.checked;
-		r === void 0 && U(N), I?.(N);
+		r === void 0 && G(N), I?.(N);
 	}
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("relative inline-flex w-fit cursor-pointer items-center gap-2 select-none", L && "pointer-events-none opacity-50", z),
@@ -163,12 +163,12 @@ function Checkbox({ checked: r, defaultChecked: M, icon: N, indeterminate: P, in
 			}),
 			/* @__PURE__ */ jsx("span", {
 				role: "checkbox",
-				"aria-checked": P ? "mixed" : K,
+				"aria-checked": P ? "mixed" : q,
 				tabIndex: -1,
-				"data-state": P ? "indeterminate" : K ? "checked" : "unchecked",
+				"data-state": P ? "indeterminate" : q ? "checked" : "unchecked",
 				className: "checkbox-box inline-flex items-center justify-center",
 				children: /* @__PURE__ */ jsx("span", {
-					className: cn("checkbox-icon", !(K || P) && "opacity-0"),
+					className: cn("checkbox-icon", !(q || P) && "opacity-0"),
 					children: P ? F ?? "—" : N ?? "✓"
 				})
 			}),
@@ -186,16 +186,16 @@ function useDropdown() {
 	return r;
 }
 function Dropdown({ trigger: r, children: M, align: N = "start", disabled: P = !1 }) {
-	let [F, I] = useState(!1), L = useRef(null), R = useRef(null), z = useRef(null), [V, U] = useState(null);
+	let [F, I] = useState(!1), L = useRef(null), R = useRef(null), z = useRef(null), [H, G] = useState(null);
 	useLayoutEffect(() => {
 		if (!F || !L.current || !R.current) return;
 		let r = L.current.getBoundingClientRect(), M = R.current.getBoundingClientRect(), P = r.left;
-		N === "end" && (P = r.right - M.width), U({
+		N === "end" && (P = r.right - M.width), G({
 			top: r.bottom,
 			left: P
 		});
 	}, [F, N]);
-	function K() {
+	function J() {
 		z.current &&= (clearTimeout(z.current), null), I(!0);
 	}
 	function Y() {
@@ -215,20 +215,22 @@ function Dropdown({ trigger: r, children: M, align: N = "start", disabled: P = !
 		value: { close: () => I(!1) },
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: L,
-			className: "inline-block",
-			onMouseEnter: K,
+			className: "inline-flex",
+			onMouseEnter: J,
 			onMouseLeave: Y,
 			onClick: () => I((r) => !r),
+			"aria-haspopup": "menu",
+			"aria-expanded": F,
 			children: r
 		}), F && !P && createPortal(/* @__PURE__ */ jsx("div", {
 			ref: R,
-			onMouseEnter: K,
+			onMouseEnter: J,
 			onMouseLeave: Y,
 			style: {
 				position: "fixed",
-				top: V?.top ?? 0,
-				left: V?.left ?? 0,
-				visibility: V ? "visible" : "hidden",
+				top: H?.top ?? 0,
+				left: H?.left ?? 0,
+				visibility: H ? "visible" : "hidden",
 				zIndex: 1e3
 			},
 			children: M
@@ -367,12 +369,12 @@ function getVerticalAlign(r, M, N) {
 	return N === "start" ? r.top : N === "end" ? r.bottom - M.height : r.top + r.height / 2 - M.height / 2;
 }
 function Tooltip({ children: r, content: M, position: N = "top", delay: P = 120, className: F }) {
-	let I = useRef(null), L = useRef(null), R = useRef(null), [z, V] = useState(!1), [U, Y] = useState(null), X = () => {
+	let I = useRef(null), L = useRef(null), R = useRef(null), [z, H] = useState(!1), [J, Y] = useState(null), X = () => {
 		R.current &&= (clearTimeout(R.current), null), R.current = window.setTimeout(() => {
-			V(!0);
+			H(!0);
 		}, P);
 	}, Z = () => {
-		R.current &&= (clearTimeout(R.current), null), V(!1);
+		R.current &&= (clearTimeout(R.current), null), H(!1);
 	};
 	return useLayoutEffect(() => {
 		if (!z || !I.current || !L.current) return;
@@ -396,9 +398,9 @@ function Tooltip({ children: r, content: M, position: N = "top", delay: P = 120,
 		role: "tooltip",
 		style: {
 			position: "fixed",
-			top: U?.top ?? 0,
-			left: U?.left ?? 0,
-			visibility: U ? "visible" : "hidden",
+			top: J?.top ?? 0,
+			left: J?.left ?? 0,
+			visibility: J ? "visible" : "hidden",
 			zIndex: 1e3
 		},
 		className: cn(F),
@@ -644,7 +646,7 @@ function GoogleCalendarIcon(r) {
 	});
 }
 function JiraIcon(r) {
-	let M = useId(), N = `jira-gradient-0-${M}`, P = `jira-gradient-1-${M}`;
+	let M = "jira-gradient-0", N = "jira-gradient-1";
 	return /* @__PURE__ */ jsxs(Icon, {
 		viewBox: "0 0 20 20",
 		...r,
@@ -655,14 +657,14 @@ function JiraIcon(r) {
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M13.08 6.36H6.34C6.34 8.04 7.7 9.4 9.38 9.4H10.62V10.6C10.62 12.28 11.98 13.64 13.66 13.64V6.94C13.66 6.62 13.4 6.36 13.08 6.36Z",
-				fill: `url(#${N})`
+				fill: `url(#${M})`
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: "M9.74 9.72H3C3 11.4 4.36 12.76 6.04 12.76H7.28V13.96C7.28 15.64 8.64 17 10.32 17V10.3C10.32 9.98 10.06 9.72 9.74 9.72Z",
-				fill: `url(#${P})`
+				fill: `url(#${N})`
 			}),
 			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
-				id: N,
+				id: M,
 				x1: "16.73",
 				y1: "3.02",
 				x2: "11.22",
@@ -676,7 +678,7 @@ function JiraIcon(r) {
 					stopColor: "#2684FF"
 				})]
 			}), /* @__PURE__ */ jsxs("linearGradient", {
-				id: P,
+				id: N,
 				x1: "10.37",
 				y1: "9.75",
 				x2: "7.06",
@@ -1499,9 +1501,10 @@ function SystemIcon(r) {
 		}) })
 	});
 }
-function Badge({ icon: r, label: M, action: N, className: P }) {
+function Badge({ icon: r, label: M, action: N, className: P, ...F }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("w-fit", P),
+		...F,
 		children: [
 			r,
 			M,
@@ -1673,7 +1676,7 @@ function Avatar({ name: r, size: M = "sm", className: N }) {
 }
 var statusBadgeStyles = tv({
 	slots: {
-		root: "flex items-center gap-1 rounded-full border py-1 pr-2.5 pl-2",
+		root: "relative flex items-center gap-1 rounded-full border",
 		text: "truncate text-xs font-semibold whitespace-nowrap"
 	},
 	variants: { status: {
@@ -1694,40 +1697,45 @@ var statusBadgeStyles = tv({
 	fire: {
 		icon: FireIcon,
 		label: "Fire",
-		action: !0
+		compact: "icon-action",
+		normal: "icon-label-action"
 	},
 	insight: {
 		icon: InsightIcon,
 		label: "Insight",
-		action: !1
+		compact: "label-only",
+		normal: "icon-label"
 	},
 	done: {
-		icon: FireIcon,
+		icon: CheckCircleIcon,
 		label: "Done",
-		action: !0
+		compact: "icon-action",
+		normal: "icon-label-action"
 	}
 };
-function StatusBadge({ className: r, label: M, status: N, onAction: P }) {
-	let F = STATUS_CONFIG[N], I = F.icon, L = statusBadgeStyles({ status: N });
+function StatusBadge({ className: r, label: M, status: N, onAction: P, density: F = "normal" }) {
+	let [I, L] = useState(!1), R = F === "compact", z = STATUS_CONFIG[N], B = R ? z.compact : z.normal, V = statusBadgeStyles({ status: N }), H = B.includes("icon"), U = B.includes("label"), G = B.includes("action") && P;
 	return /* @__PURE__ */ jsx(Badge, {
-		className: cn(L.root(), r),
-		icon: /* @__PURE__ */ jsx(I, {
+		className: cn(V.root(), R ? "h-6 w-6" : "py-1 pr-2.5 pl-2", r),
+		icon: H ? /* @__PURE__ */ jsx(z.icon, {
 			size: 16,
-			className: L.text()
-		}),
-		label: /* @__PURE__ */ jsx("span", {
-			className: L.text(),
-			children: "label" in F ? M ?? F.label : M
-		}),
-		action: F.action && P ? /* @__PURE__ */ jsx(Button, {
+			className: cn(V.text(), R && G && "absolute inset-0 m-auto", R && G && I && "opacity-0")
+		}) : void 0,
+		label: U ? /* @__PURE__ */ jsx("span", {
+			className: cn(V.text(), R && "absolute inset-0 flex items-center justify-center text-center text-[10px]"),
+			children: M ?? z.label
+		}) : void 0,
+		action: G ? /* @__PURE__ */ jsx(Button, {
 			onClick: P,
 			"aria-label": "Dismiss status",
-			className: "group",
+			className: cn("group", R ? cn("absolute inset-0 m-auto transition-opacity", I ? "opacity-100" : "opacity-0") : void 0),
 			children: /* @__PURE__ */ jsx(CloseIcon, {
 				size: 16,
-				className: cn("group-hover:scale-90", L.text())
+				className: cn(V.text(), "group-hover:scale-90")
 			})
-		}) : void 0
+		}) : void 0,
+		onMouseEnter: R ? () => L(!0) : void 0,
+		onMouseLeave: R ? () => L(!1) : void 0
 	});
 }
 function IconButton({ icon: r, ...M }) {
@@ -1747,7 +1755,7 @@ function InfoTooltip({ className: r, ...M }) {
 	});
 }
 function BulkActions({ totalItems: r = 0, selectedItems: M = 0, onSelectAll: N, actions: P, defaultDensity: F = "normal", onDensityChange: I, className: L }) {
-	let R = r > 0, z = R && M === r, B = R && M > 0 && M < r, V = z ? `All (${r})` : B ? `${M}/${r} selected` : `Select all (${r})`, [H, U] = useState(F ?? "normal"), W = () => {
+	let R = r > 0, z = R && M === r, B = R && M > 0 && M < r, V = z ? `All (${r})` : B ? `${M}/${r} selected` : `Select all (${r})`, [H, U] = useState(F ?? "normal"), q = () => {
 		N(!z);
 	};
 	function J(r) {
@@ -1822,7 +1830,7 @@ function BulkActions({ totalItems: r = 0, selectedItems: M = 0, onSelectAll: N,
 				children: /* @__PURE__ */ jsx(Checkbox, {
 					checked: z,
 					indeterminate: B,
-					onChange: W,
+					onChange: q,
 					icon: /* @__PURE__ */ jsx(CheckboxIcon, {
 						size: 16,
 						className: "text-white-variant-7"
@@ -2064,7 +2072,7 @@ function ActionMenu({ trigger: r, children: M, className: N, ...P }) {
 	});
 }
 function CalendarPanel({ mode: r, selectedDate: M, selectedRange: N, onDateSelect: P, onRangeSelect: F }) {
-	let { close: I } = useDropdown(), L = useMemo(() => /* @__PURE__ */ new Date(), []), [R, z] = useState(null), V = useRef(M), H = useRef(N), [K, J] = useState(() => {
+	let { close: I } = useDropdown(), L = useMemo(() => /* @__PURE__ */ new Date(), []), [R, z] = useState(null), V = useRef(M), G = useRef(N), [q, J] = useState(() => {
 		let P = r === "single" ? M ?? L : N.startDate ?? N.endDate ?? L;
 		return {
 			year: P.getFullYear(),
@@ -2072,7 +2080,7 @@ function CalendarPanel({ mode: r, selectedDate: M, selectedRange: N, onDateSelec
 		};
 	});
 	useEffect(() => {
-		(r === "single" && M && (!V.current || M.getTime() !== V.current.getTime()) || r === "range" && (N.startDate?.getTime() !== H.current.startDate?.getTime() || N.endDate?.getTime() !== H.current.endDate?.getTime())) && queueMicrotask(() => {
+		(r === "single" && M && (!V.current || M.getTime() !== V.current.getTime()) || r === "range" && (N.startDate?.getTime() !== G.current.startDate?.getTime() || N.endDate?.getTime() !== G.current.endDate?.getTime())) && queueMicrotask(() => {
 			if (r === "single" && M) J({
 				year: M.getFullYear(),
 				month: M.getMonth()
@@ -2084,16 +2092,16 @@ function CalendarPanel({ mode: r, selectedDate: M, selectedRange: N, onDateSelec
 					month: r.getMonth()
 				});
 			}
-		}), V.current = M, H.current = N;
+		}), V.current = M, G.current = N;
 	}, [
 		r,
 		M,
 		N
 	]);
-	let Y = useMemo(() => generateCalendarDays(K.year, K.month), [K.year, K.month]);
+	let Y = useMemo(() => generateCalendarDays(q.year, q.month), [q.year, q.month]);
 	function X(M) {
 		let L = M.getMonth(), R = M.getFullYear();
-		if ((L !== K.month || R !== K.year) && J({
+		if ((L !== q.month || R !== q.year) && J({
 			year: R,
 			month: L
 		}), r === "single") P(M), I();
@@ -2145,9 +2153,9 @@ function CalendarPanel({ mode: r, selectedDate: M, selectedRange: N, onDateSelec
 					/* @__PURE__ */ jsxs("div", {
 						className: "text-[10px] font-bold text-neutral-900",
 						children: [
-							getMonthName(K.month),
+							getMonthName(q.month),
 							" ",
-							K.year
+							q.year
 						]
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
@@ -2249,14 +2257,14 @@ function DatePicker({ mode: r = "single", value: M, defaultValue: N, onChange: P
 		startDate: null,
 		endDate: null
 	};
-	function W(M) {
+	function K(M) {
 		r === "single" && (V || R(M), P?.(M));
 	}
 	function q(M) {
 		r === "range" && (V || B(M), P?.(M));
 	}
 	function J() {
-		r === "single" ? W(null) : q({
+		r === "single" ? K(null) : q({
 			startDate: null,
 			endDate: null
 		});
@@ -2273,7 +2281,7 @@ function DatePicker({ mode: r = "single", value: M, defaultValue: N, onChange: P
 			mode: r,
 			selectedDate: H,
 			selectedRange: U,
-			onDateSelect: W,
+			onDateSelect: K,
 			onRangeSelect: q
 		})
 	}) });
@@ -2357,6 +2365,10 @@ function IntegrationBar({ orientation: r = "vertical", children: M, onAddMore: N
 		})
 	});
 }
+const PREVIEW_CARD_HEIGHT_SIZE = {
+	normal: 165,
+	compact: 60
+};
 var PREVIEW_ACTION_CONFIG = {
 	fire: {
 		className: "group",
@@ -2386,23 +2398,55 @@ var PREVIEW_ACTION_CONFIG = {
 		})
 	}
 };
-function PreviewCard({ icon: r, sender: M, title: N, content: P, timestamp: F, workspace: I, read: L = !1, selected: R = !1, onSelect: z, checked: B = !1, onCheckedChange: V, statuses: H = {}, actions: U = {} }) {
+function PreviewCheckbox({ checked: r, onCheckedChange: M }) {
+	return /* @__PURE__ */ jsx(StopPropagation, { children: /* @__PURE__ */ jsx(Checkbox, {
+		checked: r,
+		onChange: M,
+		icon: /* @__PURE__ */ jsx(CheckboxIcon, {
+			size: 16,
+			className: "text-white-variant-7"
+		}),
+		className: cn("[&_.checkbox-box]:rounded", "[&_.checkbox-box]:border", "[&_.checkbox-box]:border-neutral-600", "[&_.checkbox-box]:bg-white", "[&_.checkbox-box[data-state=checked]]:border-primary-500", "[&_.checkbox-box[data-state=checked]]:bg-primary-500", "[&_.checkbox-box[data-state=indeterminate]]:h-[18px]", "[&_.checkbox-box[data-state=indeterminate]]:w-[18px]", "[&_.checkbox-label]:flex", "[&_.checkbox-label]:items-center", "[&_.checkbox-label]:gap-1", "[&_.checkbox-label]:text-xs", "[&_.checkbox-label]:font-medium", "[&_.checkbox-label]:text-neutral-900")
+	}) });
+}
+function PreviewStatusesList({ statuses: r, density: M }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex gap-2",
+		children: /* @__PURE__ */ jsx(StopPropagation, { children: Object.keys(r).map((N) => {
+			let P = r[N];
+			return P ? /* @__PURE__ */ jsx(StatusBadge, {
+				status: N,
+				label: P.label,
+				onAction: P.onAction,
+				density: M
+			}, N) : null;
+		}) })
+	});
+}
+function PreviewActionsList({ actions: r }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex gap-2",
+		children: /* @__PURE__ */ jsx(StopPropagation, { children: Object.keys(r).map((M) => {
+			let N = r[M];
+			return N ? /* @__PURE__ */ jsx(IconButton, {
+				...PREVIEW_ACTION_CONFIG[M],
+				onClick: N.onClick
+			}, M) : null;
+		}) })
+	});
+}
+function PreviewCard({ icon: r, sender: M, title: N, content: P, timestamp: F, workspace: I, read: L = !1, selected: R = !1, onSelect: z, checked: B = !1, onCheckedChange: V, statuses: H = {}, actions: U = {}, density: W = "normal" }) {
 	return /* @__PURE__ */ jsx(Card, {
 		as: Pressable,
 		onPress: z,
-		className: cn("rounded-lg border-[1.5px] border-primary-400 bg-white-variant-5 p-4 hover:bg-primary-light", L && "border-neutral-400", R && "border-primary-500 bg-primary-light"),
-		children: /* @__PURE__ */ jsxs(CardLayout, {
+		className: cn("w-full rounded-lg border-[1.5px] border-primary-400 bg-white-variant-5 p-4 hover:bg-primary-light", L && "border-neutral-400", R && "border-primary-500 bg-primary-light", W === "normal" ? `h-[${PREVIEW_CARD_HEIGHT_SIZE.normal}px]` : `h-[${PREVIEW_CARD_HEIGHT_SIZE.compact}px]`),
+		children: W === "normal" ? /* @__PURE__ */ jsxs(CardLayout, {
 			className: "gap-x-2 gap-y-1",
 			children: [
-				/* @__PURE__ */ jsx(CardSidebar, { children: /* @__PURE__ */ jsx(StopPropagation, { children: /* @__PURE__ */ jsx(Checkbox, {
+				/* @__PURE__ */ jsx(CardSidebar, { children: /* @__PURE__ */ jsx(PreviewCheckbox, {
 					checked: B,
-					onChange: V,
-					icon: /* @__PURE__ */ jsx(CheckboxIcon, {
-						size: 16,
-						className: "text-white-variant-7"
-					}),
-					className: cn("[&_.checkbox-box]:rounded", "[&_.checkbox-box]:border", "[&_.checkbox-box]:border-neutral-600", "[&_.checkbox-box]:bg-white", "[&_.checkbox-box[data-state=checked]]:border-primary-500", "[&_.checkbox-box[data-state=checked]]:bg-primary-500", "[&_.checkbox-box[data-state=indeterminate]]:h-[18px]", "[&_.checkbox-box[data-state=indeterminate]]:w-[18px]", "[&_.checkbox-label]:flex", "[&_.checkbox-label]:items-center", "[&_.checkbox-label]:gap-1", "[&_.checkbox-label]:text-xs", "[&_.checkbox-label]:font-medium", "[&_.checkbox-label]:text-neutral-900")
-				}) }) }),
+					onCheckedChange: V
+				}) }),
 				/* @__PURE__ */ jsxs(CardHeader, {
 					className: "grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-2",
 					children: [
@@ -2431,30 +2475,50 @@ function PreviewCard({ icon: r, sender: M, title: N, content: P, timestamp: F, w
 				}),
 				/* @__PURE__ */ jsxs(CardFooter, {
 					className: "mt-3 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1",
-					children: [H && /* @__PURE__ */ jsx("div", {
-						className: "flex gap-2",
-						children: /* @__PURE__ */ jsx(StopPropagation, { children: Object.keys(H).map((r) => {
-							let M = H[r];
-							return M ? /* @__PURE__ */ jsx(StatusBadge, {
-								status: r,
-								label: M.label,
-								onAction: M.onAction
-							}, r) : null;
-						}) })
-					}), U && /* @__PURE__ */ jsx("div", {
-						className: "flex gap-2",
-						children: /* @__PURE__ */ jsx(StopPropagation, { children: Object.keys(U).map((r) => {
-							let M = U[r];
-							if (!M) return null;
-							let N = PREVIEW_ACTION_CONFIG[r];
-							return /* @__PURE__ */ jsx(IconButton, {
-								...N,
-								onClick: M.onClick
-							}, r);
-						}) })
-					})]
+					children: [/* @__PURE__ */ jsx(PreviewStatusesList, { statuses: H }), /* @__PURE__ */ jsx(PreviewActionsList, { actions: U })]
 				})
 			]
+		}) : /* @__PURE__ */ jsxs(CardLayout, {
+			className: "grid grid-cols-[auto_1fr] grid-rows-1 gap-x-2",
+			children: [/* @__PURE__ */ jsx(CardSidebar, {
+				className: "flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(PreviewCheckbox, {
+					checked: B,
+					onCheckedChange: V
+				})
+			}), /* @__PURE__ */ jsxs(CardHeader, {
+				className: "grid grid-cols-[auto_auto_minmax(0,1fr)_auto_auto_auto] items-center gap-2",
+				children: [
+					r,
+					/* @__PURE__ */ jsx(PreviewStatusesList, {
+						statuses: H,
+						density: W
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 items-center gap-2 text-sm font-bold whitespace-nowrap text-neutral-900", L && "font-medium"),
+						children: [
+							M,
+							/* @__PURE__ */ jsx("span", {
+								className: "shrink-0 text-sm text-neutral-500",
+								children: "•"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: N
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(PreviewActionsList, { actions: U }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs leading-tight font-semibold tracking-wide whitespace-nowrap text-neutral-800",
+						children: F
+					}),
+					/* @__PURE__ */ jsx(InfoTooltip, {
+						content: I,
+						children: /* @__PURE__ */ jsx(Avatar, { name: I })
+					})
+				]
+			})]
 		})
 	});
 }
@@ -2463,7 +2527,7 @@ function SearchInput({ value: r, defaultValue: M, placeholder: N = "Search...",
 	function U(r) {
 		B || z(r), P?.(r);
 	}
-	function W() {
+	function G() {
 		B || z(""), P?.(""), F?.();
 	}
 	return /* @__PURE__ */ jsxs("fieldset", {
@@ -2488,13 +2552,13 @@ function SearchInput({ value: r, defaultValue: M, placeholder: N = "Search...",
 					size: 16,
 					className: "text-neutral-700"
 				}),
-				onClick: W,
+				onClick: G,
 				"aria-label": "Clear search",
 				className: "rounded p-0 transition-opacity hover:opacity-70"
 			})
 		]
 	});
 }
-export { AVATAR_COLOR, AVATAR_COLOR_KEYS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountIcon, ActionMenu, ActionMenuItem, AddIcon, AirtableIcon, ArrowIcon, AsanaIcon, Avatar, Badge, BulkActions, Button, CalendarIcon, Card, CardContent, CardFooter, CardHeader, CardLayout, CardSidebar, CardTitle, CheckCircleEmptyIcon, CheckCircleIcon, Checkbox, CheckboxIcon, ClickUpIcon, CloseIcon, CompactDensityIcon, CopyIcon, DarkIcon, DatePicker, Divider, Dropdown, DropdownContext, DropdownMenu, DropdownMenuItem, ExternalLinkIcon, FilterBar, FilterButton, FireIcon, GmailIcon, GoogleCalendarIcon, Icon, IconButton, IconCountButton, InfoTooltip, Input, InsightIcon, IntegrationBar, JiraIcon, LightIcon, LogoIcon, MinusIcon, MoreIcon, NormalDensityIcon, NotFireIcon, OutlookCalendarIcon, OutlookIcon, Pressable, PreviewCard, ReadIcon, SearchIcon, SearchInput, SlackIcon, StatusBadge, StopPropagation, SummaryIcon, SystemIcon, TeamsIcon, Toaster, Tooltip, UnreadIcon, capitalize, cn, colors, formatDate, formatDateRange, generateCalendarDays, getDaysInMonth, getFirstDayOfMonth, getInitials, getMonthName, getWeekdays, isDateBefore, isDateInRange, isSameDay, isToday, parseDate, pickColorFromPalette, stringHash, toMondayBased, toast, toastStore, useAccordion, useDropdown, useLongPress };
+export { AVATAR_COLOR, AVATAR_COLOR_KEYS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountIcon, ActionMenu, ActionMenuItem, AddIcon, AirtableIcon, ArrowIcon, AsanaIcon, Avatar, Badge, BulkActions, Button, CalendarIcon, Card, CardContent, CardFooter, CardHeader, CardLayout, CardSidebar, CardTitle, CheckCircleEmptyIcon, CheckCircleIcon, Checkbox, CheckboxIcon, ClickUpIcon, CloseIcon, CompactDensityIcon, CopyIcon, DarkIcon, DatePicker, Divider, Dropdown, DropdownContext, DropdownMenu, DropdownMenuItem, ExternalLinkIcon, FilterBar, FilterButton, FireIcon, GmailIcon, GoogleCalendarIcon, Icon, IconButton, IconCountButton, InfoTooltip, Input, InsightIcon, IntegrationBar, JiraIcon, LightIcon, LogoIcon, MinusIcon, MoreIcon, NormalDensityIcon, NotFireIcon, OutlookCalendarIcon, OutlookIcon, PREVIEW_CARD_HEIGHT_SIZE, Pressable, PreviewCard, ReadIcon, SearchIcon, SearchInput, SlackIcon, StatusBadge, StopPropagation, SummaryIcon, SystemIcon, TeamsIcon, Toaster, Tooltip, UnreadIcon, capitalize, cn, colors, formatDate, formatDateRange, generateCalendarDays, getDaysInMonth, getFirstDayOfMonth, getInitials, getMonthName, getWeekdays, isDateBefore, isDateInRange, isSameDay, isToday, parseDate, pickColorFromPalette, stringHash, toMondayBased, toast, toastStore, useAccordion, useDropdown, useLongPress };
 
 //# sourceMappingURL=index.js.map