@knymbus/voxel-ui 1.0.11 → 1.0.14

package/dist/chunks/search-CIhA-ti4.js

@@ -0,0 +1,457 @@
+import { t as e } from "./jsx-runtime-Boo2vksn.js";
+import { t } from "./Button-BgQwvn3C.js";
+import { E as n, S as r } from "./icons-BpfDVwCQ.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+//#region src/components/search/types.ts
+var s = {
+	colors: {
+		bgInput: "var(--color-vsc-bg-input, #f6f8fa)",
+		border: "var(--color-vsc-border, #e4e4e7)",
+		borderAccent: "var(--color-vsc-accent, #007acc)",
+		borderAccentHover: "var(--color-vsc-accent-hover, #0062a3)",
+		text: "var(--color-vsc-text, #333333)",
+		muted: "var(--color-vsc-muted, #6a737d)",
+		sidebarBg: "var(--color-vsc-sidebar, #f3f3f3)",
+		hoverBg: "var(--color-vsc-hover, #e8e8e8)",
+		accentBgLight: "rgba(0, 122, 204, 0.1)"
+	},
+	typography: {
+		sans: "var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)",
+		mono: "var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)"
+	},
+	transitions: { smooth: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)" }
+}, c = e();
+function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreClick: i, onCloseMenu: a }) {
+	let [l, u] = o(null), [d, f] = o(!1);
+	return !e || !t ? null : /* @__PURE__ */ (0, c.jsxs)("div", {
+		style: {
+			position: "absolute",
+			top: "36px",
+			left: 0,
+			width: "100%",
+			backgroundColor: s.colors.sidebarBg,
+			border: `1px solid ${s.colors.border}`,
+			borderRadius: "4px",
+			boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
+			zIndex: 50,
+			padding: "4px",
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: "256px"
+		},
+		children: [/* @__PURE__ */ (0, c.jsx)("div", {
+			style: {
+				overflowY: "auto",
+				flex: 1
+			},
+			children: n.length === 0 ? /* @__PURE__ */ (0, c.jsx)("div", {
+				style: {
+					padding: "16px",
+					textAlign: "center",
+					fontSize: "11px",
+					color: s.colors.muted,
+					fontStyle: "italic"
+				},
+				children: "No indexed record entities match your text query constraints."
+			}) : n.map((e) => /* @__PURE__ */ (0, c.jsxs)("div", {
+				onMouseEnter: () => u(e.id),
+				onMouseLeave: () => u(null),
+				onClick: () => {
+					r && r(e), a();
+				},
+				style: {
+					width: "100%",
+					padding: "8px",
+					backgroundColor: l === e.id ? s.colors.hoverBg : "transparent",
+					borderRadius: "2px",
+					cursor: "pointer",
+					display: "flex",
+					flexDirection: "column",
+					gap: "2px",
+					transition: "background-color 100ms",
+					boxSizing: "border-box"
+				},
+				children: [/* @__PURE__ */ (0, c.jsxs)("div", {
+					style: {
+						fontWeight: 600,
+						color: s.colors.text,
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						width: "100%"
+					},
+					children: [/* @__PURE__ */ (0, c.jsx)("span", {
+						style: {
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							flex: 1
+						},
+						children: e.title
+					}), e.category && /* @__PURE__ */ (0, c.jsx)("span", {
+						style: {
+							fontSize: "9px",
+							fontFamily: "monospace",
+							fontWeight: "bold",
+							backgroundColor: s.colors.accentBgLight,
+							border: "1px solid rgba(0, 122, 204, 0.2)",
+							color: s.colors.borderAccent,
+							padding: "2px 4px",
+							borderRadius: "2px",
+							textTransform: "uppercase",
+							marginLeft: "8px",
+							flexShrink: 0
+						},
+						children: e.category
+					})]
+				}), e.subtitle && /* @__PURE__ */ (0, c.jsx)("div", {
+					style: {
+						fontSize: "10px",
+						color: s.colors.muted,
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: e.subtitle
+				})]
+			}, e.id))
+		}), n.length > 0 && i && /* @__PURE__ */ (0, c.jsx)("button", {
+			onMouseEnter: () => f(!0),
+			onMouseLeave: () => f(!1),
+			onClick: () => {
+				i(), a();
+			},
+			style: {
+				width: "100%",
+				border: "none",
+				borderTop: `1px solid ${s.colors.border}`,
+				backgroundColor: d ? s.colors.hoverBg : "transparent",
+				padding: "8px",
+				textAlign: "center",
+				fontSize: "10px",
+				fontWeight: "bold",
+				color: s.colors.borderAccent,
+				letterSpacing: "0.5px",
+				textTransform: "uppercase",
+				transition: "background-color 150ms",
+				borderRadius: "0 0 2px 2px",
+				cursor: "pointer"
+			},
+			children: "View All Matching Search Metrics Records →"
+		})]
+	});
+}
+//#endregion
+//#region src/components/search/SearchInput.tsx
+function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placeholder: p = "Search manifests or tracking codes...", resultsCount: m = 0, menuResults: h = [], onResultClick: g, onViewMoreClick: _, className: v = "", showFloatPeek: y = !1, peekContent: b }) {
+	let [x, S] = o(!1), [C, w] = o(!1), [T, E] = o(!1), [D, O] = o(!1), k = a(null), A = a(null);
+	i(() => {
+		let t = (t) => {
+			k.current && !k.current.contains(t.target) && (w(!1), e === "float" && u === "" && S(!1));
+		};
+		return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
+	}, [e, u]);
+	let j = (e) => {
+		e.stopPropagation(), d(""), f && f(), A.current && A.current.focus();
+	}, M = () => {
+		S(!0), setTimeout(() => A.current?.focus(), 50);
+	}, N = {
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		fontFamily: s.typography.sans,
+		fontSize: "12px",
+		userSelect: "none",
+		boxSizing: "border-box"
+	}, P = {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		backgroundColor: s.colors.bgInput,
+		border: `1px solid ${D || e === "float" && x ? s.colors.borderAccent : T ? s.colors.borderAccentHover : s.colors.border}`,
+		borderRadius: "6px",
+		height: "32px",
+		transition: s.transitions.smooth,
+		boxSizing: "border-box"
+	}, F = {
+		width: "100%",
+		height: "100%",
+		backgroundColor: "transparent",
+		color: s.colors.text,
+		border: "none",
+		outline: "none",
+		padding: "0 32px",
+		fontSize: "12px",
+		fontFamily: s.typography.sans,
+		boxSizing: "border-box"
+	};
+	if (e === "simple") {
+		let e = m > 0 && u.length > 0, i = b || /* @__PURE__ */ (0, c.jsxs)("p", {
+			style: {
+				margin: 0,
+				fontSize: "10px",
+				fontFamily: s.typography.mono,
+				color: s.colors.muted,
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			},
+			children: [
+				"Showing ",
+				/* @__PURE__ */ (0, c.jsx)("span", {
+					style: {
+						color: s.colors.borderAccent,
+						fontWeight: "bold"
+					},
+					children: m
+				}),
+				" matching database metrics records"
+			]
+		});
+		return /* @__PURE__ */ (0, c.jsxs)("div", {
+			style: N,
+			className: v,
+			children: [/* @__PURE__ */ (0, c.jsxs)("div", {
+				style: P,
+				onMouseEnter: () => E(!0),
+				onMouseLeave: () => E(!1),
+				children: [
+					/* @__PURE__ */ (0, c.jsx)("div", {
+						style: {
+							position: "absolute",
+							left: "10px",
+							display: "flex",
+							alignItems: "center",
+							color: T ? s.colors.text : s.colors.muted
+						},
+						children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
+					}),
+					/* @__PURE__ */ (0, c.jsx)("input", {
+						ref: A,
+						type: "text",
+						value: u,
+						onChange: (e) => d(e.target.value),
+						onFocus: () => O(!0),
+						onBlur: () => O(!1),
+						placeholder: p,
+						style: F
+					}),
+					u && /* @__PURE__ */ (0, c.jsx)("div", {
+						style: {
+							position: "absolute",
+							right: "4px",
+							top: "50%",
+							transform: "translateY(-50%)",
+							display: "flex",
+							alignItems: "center"
+						},
+						children: /* @__PURE__ */ (0, c.jsx)(t, {
+							icon: n,
+							color: "ghost",
+							iconOnly: !0,
+							onClick: j,
+							size: "xs"
+						})
+					})
+				]
+			}), /* @__PURE__ */ (0, c.jsx)("div", {
+				style: {
+					position: "absolute",
+					left: 0,
+					right: 0,
+					top: "32px",
+					zIndex: 10,
+					overflow: "hidden",
+					transition: s.transitions.smooth,
+					height: e ? "24px" : "0px",
+					opacity: +!!e,
+					transform: e ? "translateY(0px)" : "translateY(-4px)",
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ (0, c.jsx)("div", {
+					style: {
+						backgroundColor: s.colors.sidebarBg,
+						border: `1px solid ${s.colors.border}`,
+						borderTop: "none",
+						padding: "4px 6px",
+						borderRadius: "0 0 6px 6px",
+						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
+					},
+					children: i
+				})
+			})]
+		});
+	}
+	if (e === "float") {
+		let e = y && m > 0 && u.length > 0, i = x || u.length > 0, a = b || /* @__PURE__ */ (0, c.jsxs)("p", {
+			style: {
+				margin: 0,
+				fontSize: "9px",
+				fontFamily: s.typography.mono,
+				color: s.colors.borderAccent,
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			},
+			children: [
+				"Quick Peek: Found ",
+				m,
+				" rows"
+			]
+		});
+		return /* @__PURE__ */ (0, c.jsxs)("div", {
+			ref: k,
+			style: N,
+			className: v,
+			children: [/* @__PURE__ */ (0, c.jsx)("div", {
+				onMouseEnter: () => E(!0),
+				onMouseLeave: () => E(!1),
+				style: {
+					...P,
+					width: i ? "256px" : "32px",
+					justifyContent: i ? "flex-start" : "center",
+					backgroundColor: i ? s.colors.bgInput : "transparent",
+					borderColor: i ? s.colors.borderAccent : "transparent",
+					padding: i ? "0 8px" : "0"
+				},
+				children: i ? /* @__PURE__ */ (0, c.jsxs)("div", {
+					style: {
+						position: "relative",
+						display: "flex",
+						alignItems: "center",
+						width: "100%",
+						height: "100%"
+					},
+					children: [
+						/* @__PURE__ */ (0, c.jsx)(r, {
+							size: 14,
+							style: {
+								color: s.colors.text,
+								flexShrink: 0
+							}
+						}),
+						/* @__PURE__ */ (0, c.jsx)("input", {
+							ref: A,
+							type: "text",
+							value: u,
+							onChange: (e) => d(e.target.value),
+							placeholder: p,
+							style: {
+								...F,
+								padding: "0 24px 0 8px"
+							}
+						}),
+						u && /* @__PURE__ */ (0, c.jsx)("div", {
+							style: {
+								position: "absolute",
+								right: 0,
+								top: "50%",
+								transform: "translateY(-50%)",
+								display: "flex",
+								alignItems: "center"
+							},
+							children: /* @__PURE__ */ (0, c.jsx)(t, {
+								iconOnly: !0,
+								color: "ghost",
+								icon: n,
+								onClick: j,
+								size: "xs"
+							})
+						})
+					]
+				}) : /* @__PURE__ */ (0, c.jsx)(t, {
+					iconOnly: !0,
+					size: "sm",
+					icon: r,
+					onClick: M,
+					color: "ghost",
+					style: { color: s.colors.muted },
+					title: "Open Expandable Search"
+				})
+			}), /* @__PURE__ */ (0, c.jsx)("div", {
+				style: {
+					position: "absolute",
+					top: "32px",
+					width: "256px",
+					zIndex: 10,
+					overflow: "hidden",
+					transition: s.transitions.smooth,
+					height: e ? "24px" : "0px",
+					opacity: +!!e,
+					transform: e ? "translateY(0px)" : "translateY(-4px)",
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ (0, c.jsx)("div", {
+					style: {
+						backgroundColor: s.colors.sidebarBg,
+						border: `1px solid ${s.colors.border}`,
+						borderTop: "none",
+						padding: "4px",
+						borderRadius: "0 0 2px 2px",
+						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
+					},
+					children: a
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ (0, c.jsxs)("div", {
+		ref: k,
+		style: N,
+		className: v,
+		children: [/* @__PURE__ */ (0, c.jsxs)("div", {
+			style: P,
+			onMouseEnter: () => E(!0),
+			onMouseLeave: () => E(!1),
+			children: [
+				/* @__PURE__ */ (0, c.jsx)("div", {
+					style: {
+						position: "absolute",
+						left: "10px",
+						display: "flex",
+						alignItems: "center",
+						color: s.colors.muted
+					},
+					children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
+				}),
+				/* @__PURE__ */ (0, c.jsx)("input", {
+					ref: A,
+					type: "text",
+					value: u,
+					onChange: (e) => {
+						d(e.target.value), w(!0);
+					},
+					onFocus: () => w(!0),
+					placeholder: p,
+					style: F
+				}),
+				u && /* @__PURE__ */ (0, c.jsx)("div", {
+					style: {
+						position: "absolute",
+						right: "4px",
+						top: "50%",
+						transform: "translateY(-50%)",
+						display: "flex",
+						alignItems: "center"
+					},
+					children: /* @__PURE__ */ (0, c.jsx)(t, {
+						iconOnly: !0,
+						icon: n,
+						color: "ghost",
+						onClick: j,
+						size: "xs"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, c.jsx)(l, {
+			isOpen: C,
+			value: u,
+			menuResults: h,
+			onResultClick: g,
+			onViewMoreClick: _,
+			onCloseMenu: () => w(!1)
+		})]
+	});
+}
+//#endregion
+export { s as n, u as t };

package/dist/components/search/SearchInput.d.ts

@@ -1,10 +1,3 @@
-import { default as React, ReactNode } from 'react';
+import { default as React } from 'react';
 import { SearchInputProps } from './types';
-interface AdvancedSearchInputProps extends Omit<SearchInputProps, 'variant'> {
-    variant?: 'simple' | 'float' | 'menu';
-    showFloatPeek?: boolean;
-    resultIndicatorPanel?: string | ReactNode;
-}
-export default function SearchInput({ variant, value, onChange, onClear, placeholder, resultsCount, menuResults, onResultClick, onViewMoreClick, className, showFloatPeek, // Optional feature flag default boundary
-resultIndicatorPanel }: AdvancedSearchInputProps): React.JSX.Element;
-export {};
+export default function SearchInput({ variant, value, onChange, onClear, placeholder, resultsCount, menuResults, onResultClick, onViewMoreClick, className, showFloatPeek, peekContent }: SearchInputProps): React.JSX.Element;

package/dist/components/search/SearchMenu.d.ts

@@ -0,0 +1,11 @@
+import { SearchResultItem } from './types';
+interface SearchMenuProps {
+    isOpen: boolean;
+    value: string;
+    menuResults: SearchResultItem[];
+    onResultClick?: (item: SearchResultItem) => void;
+    onViewMoreClick?: () => void;
+    onCloseMenu: () => void;
+}
+export default function SearchMenu({ isOpen, value, menuResults, onResultClick, onViewMoreClick, onCloseMenu }: SearchMenuProps): import("react").JSX.Element | null;
+export {};

package/dist/components/search/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/search-BnD-97mv.js";
-export { e as SearchInput };
+import { n as e, t } from "../../chunks/search-CIhA-ti4.js";
+export { t as SearchInput, e as searchTokens };

package/dist/components/search/types.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export type SearchVariant = 'simple' | 'float' | 'menu';
 export interface SearchResultItem {
     id: string;
@@ -16,4 +17,26 @@ export interface SearchInputProps {
     onResultClick?: (item: SearchResultItem) => void;
     onViewMoreClick?: () => void;
     className?: string;
+    showFloatPeek?: boolean;
+    peekContent?: React.ReactNode;
 }
+export declare const searchTokens: {
+    colors: {
+        bgInput: string;
+        border: string;
+        borderAccent: string;
+        borderAccentHover: string;
+        text: string;
+        muted: string;
+        sidebarBg: string;
+        hoverBg: string;
+        accentBgLight: string;
+    };
+    typography: {
+        sans: string;
+        mono: string;
+    };
+    transitions: {
+        smooth: string;
+    };
+};

package/dist/index.js

@@ -1,8 +1,7 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--voxel-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--voxel-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--voxel-default-font-family:var(--voxel-font-sans);--voxel-default-mono-font-family:var(--voxel-font-mono)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--voxel-default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--voxel-default-font-feature-settings,normal);font-variation-settings:var(--voxel-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--voxel-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--voxel-default-mono-font-feature-settings,normal);font-variation-settings:var(--voxel-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.dark{--color-vsc-bg:#1e1e1e;--color-vsc-sidebar:#252526;--color-vsc-border:#3c3c3c;--color-vsc-accent:#007acc;--color-vsc-accent-hover:#0062a3;--color-vsc-hover:#2a2d2e;--color-vsc-text:#ccc;--color-vsc-muted:#8b949e;--color-vsc-bg-input:#1f1f1f}}@layer components,utilities;/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
 import { t as e } from "./chunks/resizable-ImB8dfG_.js";
 import { i as t, n, r, t as i } from "./chunks/tabs-MaVN00hJ.js";
 import { t as a } from "./chunks/Button-BgQwvn3C.js";
 import { n as o, t as s } from "./chunks/button-dHcpTNIG.js";
 import { C as c, E as l, S as u, T as d, _ as f, a as p, b as m, c as h, d as g, f as _, g as v, h as y, i as b, l as x, m as S, n as C, o as w, p as T, r as E, s as D, t as O, u as k, v as A, w as j, x as M, y as N } from "./chunks/icons-BpfDVwCQ.js";
-import { t as P } from "./chunks/search-BnD-97mv.js";
-export { A as Add, S as BlankDoc, a as Button, o as ButtonGroup, _ as Chat, N as ChevronDown, l as Close, x as Comment, k as DeleteChat, j as Document, v as Expand, c as Folder, C as Group, y as Minimize, f as Minus, w as More, D as OpenFolder, b as Person, g as PlusChat, h as PlusComment, T as PlusDoc, O as PlusDocBadge, E as PlusPerson, M as Refresh, e as ResizablePanel, u as Search, P as SearchInput, s as SplitActionButton, i as TabButton, n as TabPanel, r as TabPanelList, d as Terminal, m as Trash, p as Truck, t as useTab };
+import { n as P, t as F } from "./chunks/search-CIhA-ti4.js";
+export { A as Add, S as BlankDoc, a as Button, o as ButtonGroup, _ as Chat, N as ChevronDown, l as Close, x as Comment, k as DeleteChat, j as Document, v as Expand, c as Folder, C as Group, y as Minimize, f as Minus, w as More, D as OpenFolder, b as Person, g as PlusChat, h as PlusComment, T as PlusDoc, O as PlusDocBadge, E as PlusPerson, M as Refresh, e as ResizablePanel, u as Search, F as SearchInput, s as SplitActionButton, i as TabButton, n as TabPanel, r as TabPanelList, d as Terminal, m as Trash, p as Truck, P as searchTokens, t as useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knymbus/voxel-ui",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/search/SearchInput.tsx

@@ -1,14 +1,8 @@
-import React, { useState, useRef, useEffect, ReactNode } from 'react';
-import { SearchInputProps } from './types';
+import React, { useState, useRef, useEffect } from 'react';
+import { SearchInputProps, searchTokens } from './types';
 import { Search, Close } from '../icons';
 import { Button } from '../button/Button';
-
-// Extend your props declaration interface locally to support the new feature flags
-interface AdvancedSearchInputProps extends Omit<SearchInputProps, 'variant'> {
-    variant?: 'simple' | 'float' | 'menu';
-    showFloatPeek?: boolean; // When true, float variant slides down a results indicator bar
-    resultIndicatorPanel?: string | ReactNode
-}
+import SearchMenu from './SearchMenu';
 
 export default function SearchInput({
     variant = 'simple',
@@ -21,15 +15,17 @@ export default function SearchInput({
     onResultClick,
     onViewMoreClick,
     className = '',
-    showFloatPeek = false, // Optional feature flag default boundary
-    resultIndicatorPanel
-}: AdvancedSearchInputProps) {
+    showFloatPeek = false,
+    peekContent
+}: SearchInputProps) {
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+    const [isInputHovered, setIsInputHovered] = useState<boolean>(false);
+    const [isInputFocused, setIsInputFocused] = useState<boolean>(false);
+
     const containerRef = useRef<HTMLDivElement | null>(null);
     const inputRef = useRef<HTMLInputElement | null>(null);
 
-    // Auto-close overlay dropdowns if the user clicks completely out of the component framework bounding box
     useEffect(() => {
         const handleOutsideClick = (e: MouseEvent) => {
             if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
@@ -55,67 +51,101 @@ export default function SearchInput({
         setTimeout(() => inputRef.current?.focus(), 50);
     };
 
-    const baseWrapper = "relative flex flex-col font-sans text-xs select-none";
+    const baseWrapperStyles: React.CSSProperties = {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: searchTokens.typography.sans, // ⚡ Applied global Tailwind fonts variables
+        fontSize: '12px',
+        userSelect: 'none',
+        boxSizing: 'border-box'
+    };
+
+    const inputContainerBaseStyles: React.CSSProperties = {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: searchTokens.colors.bgInput,
+        border: `1px solid ${isInputFocused || (variant === 'float' && isExpanded)
+            ? searchTokens.colors.borderAccent
+            : isInputHovered
+                ? searchTokens.colors.borderAccentHover
+                : searchTokens.colors.border
+            }`,
+        borderRadius: '6px',
+        height: '32px',
+        transition: searchTokens.transitions.smooth,
+        boxSizing: 'border-box'
+    };
+
+    const rawInputStyles: React.CSSProperties = {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        color: searchTokens.colors.text,
+        border: 'none',
+        outline: 'none',
+        padding: '0 32px',
+        fontSize: '12px',
+        fontFamily: searchTokens.typography.sans,
+        boxSizing: 'border-box'
+    };
 
-    // --- 1. SIMPLE VARIANT PANEL ---
+    // --- 1. SIMPLE VARIANT ---
     if (variant === 'simple') {
-        const hasResults = value.length > 0;
+        const hasResults = resultsCount > 0 && value.length > 0;
+
+        // ⚡ Fallback logic: check if the dev supplied a custom peek content block component
+        const renderedPeek = peekContent || (
+            <p style={{ margin: 0, fontSize: '10px', fontFamily: searchTokens.typography.mono, color: searchTokens.colors.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                Showing <span style={{ color: searchTokens.colors.borderAccent, fontWeight: 'bold' }}>{resultsCount}</span> matching database metrics records
+            </p>
+        );
 
         return (
-            <div className={`${baseWrapper} ${className}`.trim()}>
-                {/* Core Input Box Frame */}
-                <div className="relative flex items-center bg-vsc-bg-input border border-vsc-border rounded-sm h-8 group hover:border-vsc-accent transition-colors z-20">
-                    <Search size={14} className="absolute left-2.5 text-vsc-muted group-hover:text-vsc-text" />
+            <div style={baseWrapperStyles} className={className}>
+                <div
+                    style={inputContainerBaseStyles}
+                    onMouseEnter={() => setIsInputHovered(true)}
+                    onMouseLeave={() => setIsInputHovered(false)}
+                >
+                    <div style={{ position: 'absolute', left: '10px', display: 'flex', alignItems: 'center', color: isInputHovered ? searchTokens.colors.text : searchTokens.colors.muted }}>
+                        <Search size={14} />
+                    </div>
                     <input
                         ref={inputRef}
                         type="text"
                         value={value}
                         onChange={(e) => onChange(e.target.value)}
+                        onFocus={() => setIsInputFocused(true)}
+                        onBlur={() => setIsInputFocused(false)}
                         placeholder={placeholder}
-                        className="w-full h-full pl-8 pr-10 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
+                        style={rawInputStyles}
                     />
                     {value && (
-                        <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center">
-                            <Button
-                                icon={Close}
-                                color="ghost"
-                                iconOnly={true}
-                                onClick={handleClearTrigger}
-                                size="xs"
-                            />
+                        <div style={{ position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' }}>
+                            <Button icon={Close} color="ghost" iconOnly={true} onClick={handleClearTrigger} size="xs" />
                         </div>
                     )}
                 </div>
 
-                {/* 
-          🎛️ HIGH-FIDELITY FLOATING SLIDE-DOWN INDICATOR PANEL
-          - Uses 'absolute' so it zero-impacts the parent height layout block.
-          - Utilizes hardware-accelerated transforms (translateY) for a smooth glide effect.
-        */}
                 <div
-                    className={`absolute left-0 right-0 top-8 z-50 overflow-hidden transition-all duration-200 cubic-bezier(0.34, 1.56, 0.64, 1) ${!hasResults ? 'pointer-events-none' : ''}`}
                     style={{
-                        height: hasResults ? 'auto' : '0px',
+                        position: 'absolute',
+                        left: 0,
+                        right: 0,
+                        top: '32px',
+                        zIndex: 10,
+                        overflow: 'hidden',
+                        transition: searchTokens.transitions.smooth,
+                        height: hasResults ? '24px' : '0px',
                         opacity: hasResults ? 1 : 0,
-                        transform: hasResults ? 'translateY(0px)' : 'translateY(-4px)'
+                        transform: hasResults ? 'translateY(0px)' : 'translateY(-4px)',
+                        pointerEvents: 'none'
                     }}
                 >
-                    <div className="bg-vsc-sidebar shadow-sm p-1.5 pt-1 ">
-                        {
-                            resultsCount === 0 ? (
-                                <div className="pl-1 text-start text-[11px] text-vsc-muted italic">
-                                    No record match your search query constraints.
-                                </div>
-                            ) : (
-
-                                resultIndicatorPanel ? resultIndicatorPanel : (
-                                    <p className="text-[10px] font-mono text-vsc-muted pl-1 truncate">
-                                        Showing <span className="text-vsc-accent font-bold">{resultsCount}</span> matching database metrics records
-                                    </p>
-                                )
-
-                            )
-                        }
+                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `1px solid ${searchTokens.colors.border}`, borderTop: 'none', padding: '4px 6px', borderRadius: '0 0 6px 6px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
+                        {renderedPeek}
                     </div>
                 </div>
             </div>
@@ -125,32 +155,42 @@ export default function SearchInput({
     // --- 2. FLOAT EXPANDABLE VARIANT ---
     if (variant === 'float') {
         const showPeekIndicator = showFloatPeek && resultsCount > 0 && value.length > 0;
+        const isOpened = isExpanded || value.length > 0;
+
+        const renderedFloatPeek = peekContent || (
+            <p style={{ margin: 0, fontSize: '9px', fontFamily: searchTokens.typography.mono, color: searchTokens.colors.borderAccent, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                Quick Peek: Found {resultsCount} rows
+            </p>
+        );
+
         return (
-            <div ref={containerRef} className={`${baseWrapper} ${className}`.trim()}>
+            <div ref={containerRef} style={baseWrapperStyles} className={className}>
                 <div
-                    className={`flex items-center bg-vsc-bg-input border rounded-sm h-8 transition-all duration-300 ease-in-out overflow-hidden ${isExpanded || value ? 'w-64 border-vsc-accent px-2' : 'w-8 border-transparent bg-transparent justify-center'
-                        }`}
+                    onMouseEnter={() => setIsInputHovered(true)}
+                    onMouseLeave={() => setIsInputHovered(false)}
+                    style={{
+                        ...inputContainerBaseStyles,
+                        width: isOpened ? '256px' : '32px',
+                        justifyContent: isOpened ? 'flex-start' : 'center',
+                        backgroundColor: isOpened ? searchTokens.colors.bgInput : 'transparent',
+                        borderColor: isOpened ? searchTokens.colors.borderAccent : 'transparent',
+                        padding: isOpened ? '0 8px' : '0'
+                    }}
                 >
-                    {isExpanded || value ? (
-                        <div className="relative flex items-center w-full h-full">
-                            <Search size={14} className="text-vsc-text shrink-0" />
+                    {isOpened ? (
+                        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', width: '100%', height: '100%' }}>
+                            <Search size={14} style={{ color: searchTokens.colors.text, flexShrink: 0 }} />
                             <input
                                 ref={inputRef}
                                 type="text"
                                 value={value}
                                 onChange={(e) => onChange(e.target.value)}
                                 placeholder={placeholder}
-                                className="w-full h-full pl-2 pr-6 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
+                                style={{ ...rawInputStyles, padding: '0 24px 0 8px' }}
                             />
                             {value && (
-                                <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center">
-                                    <Button
-                                        iconOnly={true}
-                                        color="ghost"
-                                        icon={Close}
-                                        onClick={handleClearTrigger}
-                                        size="xs"
-                                    />
+                                <div style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' }}>
+                                    <Button iconOnly={true} color="ghost" icon={Close} onClick={handleClearTrigger} size="xs" />
                                 </div>
                             )}
                         </div>
@@ -161,33 +201,45 @@ export default function SearchInput({
                             icon={Search}
                             onClick={handleFloatActivation}
                             color="ghost"
-                            className="text-vsc-muted hover:text-vsc-text transition-colors"
+                            style={{ color: searchTokens.colors.muted }}
                             title="Open Expandable Search"
                         />
                     )}
                 </div>
 
-                {/* Optional dynamic slider line badge dropdown block */}
                 <div
-                    className="overflow-hidden transition-all duration-200 ease-out w-64 absolute top-8"
                     style={{
-                        height: showPeekIndicator ? '20px' : '0px',
-                        opacity: showPeekIndicator ? 1 : 0
+                        position: 'absolute',
+                        top: '32px',
+                        width: '256px',
+                        zIndex: 10,
+                        overflow: 'hidden',
+                        transition: searchTokens.transitions.smooth,
+                        height: showPeekIndicator ? '24px' : '0px',
+                        opacity: showPeekIndicator ? 1 : 0,
+                        transform: showPeekIndicator ? 'translateY(0px)' : 'translateY(-4px)',
+                        pointerEvents: 'none'
                     }}
                 >
-                    <p className="text-[9px] font-mono text-vsc-accent pt-1 pl-1 truncate bg-vsc-sidebar border border-t-0 border-vsc-border p-1 rounded-b shadow-sm">
-                        Quick Peek: Found {resultsCount} rows
-                    </p>
+                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `1px solid ${searchTokens.colors.border}`, borderTop: 'none', padding: '4px', borderRadius: '0 0 2px 2px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
+                        {renderedFloatPeek}
+                    </div>
                 </div>
             </div>
         );
     }
 
-    // --- 3. MENU STYLE SEARCH DROPDOWN ---
+    // --- 3. MENU DROPDOWN VARIANT ---
     return (
-        <div ref={containerRef} className={`${baseWrapper} ${className}`.trim()}>
-            <div className="relative flex items-center bg-vsc-bg-input border border-vsc-border rounded-sm h-8 focus-within:border-vsc-accent">
-                <Search size={14} className="absolute left-2.5 text-vsc-muted" />
+        <div ref={containerRef} style={baseWrapperStyles} className={className}>
+            <div
+                style={inputContainerBaseStyles}
+                onMouseEnter={() => setIsInputHovered(true)}
+                onMouseLeave={() => setIsInputHovered(false)}
+            >
+                <div style={{ position: 'absolute', left: '10px', display: 'flex', alignItems: 'center', color: searchTokens.colors.muted }}>
+                    <Search size={14} />
+                </div>
                 <input
                     ref={inputRef}
                     type="text"
@@ -198,65 +250,23 @@ export default function SearchInput({
                     }}
                     onFocus={() => setIsMenuOpen(true)}
                     placeholder={placeholder}
-                    className="w-full h-full pl-8 pr-10 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
+                    style={rawInputStyles}
                 />
                 {value && (
-                    <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center">
-                        <Button
-                            iconOnly={true}
-                            icon={Close}
-                            color="ghost"
-                            onClick={handleClearTrigger}
-                            size="xs"
-                        />
+                    <div style={{ position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' }}>
+                        <Button iconOnly={true} icon={Close} color="ghost" onClick={handleClearTrigger} size="xs" />
                     </div>
                 )}
             </div>
 
-            {isMenuOpen && value && (
-                <div className="absolute top-9 left-0 w-full bg-vsc-sidebar border border-vsc-border rounded shadow-xl z-50 p-1 flex flex-col max-h-64 animate-in fade-in slide-in-from-top-1 duration-150">
-                    <div className="overflow-y-auto flex-1">
-                        {menuResults.length === 0 ? (
-                            <div className="p-4 text-center text-[11px] text-vsc-muted italic">
-                                No indexed record entities match your text query constraints.
-                            </div>
-                        ) : (
-                            menuResults.map((item) => (
-                                <div
-                                    key={item.id}
-                                    onClick={() => {
-                                        if (onResultClick) onResultClick(item);
-                                        setIsMenuOpen(false);
-                                    }}
-                                    className="w-full p-2 hover:bg-vsc-hover text-left rounded-sm cursor-pointer flex flex-col space-y-0.5 transition-colors"
-                                >
-                                    <div className="font-semibold text-vsc-text flex justify-between items-center">
-                                        <span className="truncate">{item.title}</span>
-                                        {item.category && (
-                                            <span className="text-[9px] font-mono font-bold bg-vsc-accent/10 border border-vsc-accent/20 text-vsc-accent px-1 rounded-sm uppercase tracking-wide">
-                                                {item.category}
-                                            </span>
-                                        )}
-                                    </div>
-                                    {item.subtitle && <div className="text-[10px] text-vsc-muted truncate">{item.subtitle}</div>}
-                                </div>
-                            ))
-                        )}
-                    </div>
-
-                    {menuResults.length > 0 && onViewMoreClick && (
-                        <button
-                            onClick={() => {
-                                onViewMoreClick();
-                                setIsMenuOpen(false);
-                            }}
-                            className="w-full border-t border-vsc-border bg-vsc-bg hover:bg-vsc-hover/60 p-2 text-center text-[10px] font-bold text-vsc-accent tracking-wide uppercase transition-colors rounded-b-sm border-none cursor-pointer"
-                        >
-                            View All Matching Search Metrics Records →
-                        </button>
-                    )}
-                </div>
-            )}
+            <SearchMenu
+                isOpen={isMenuOpen}
+                value={value}
+                menuResults={menuResults}
+                onResultClick={onResultClick}
+                onViewMoreClick={onViewMoreClick}
+                onCloseMenu={() => setIsMenuOpen(false)}
+            />
         </div>
     );
-}
+}

package/src/components/search/SearchMenu.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import { SearchResultItem, searchTokens } from './types';
+
+interface SearchMenuProps {
+  isOpen: boolean;
+  value: string;
+  menuResults: SearchResultItem[];
+  onResultClick?: (item: SearchResultItem) => void;
+  onViewMoreClick?: () => void;
+  onCloseMenu: () => void;
+}
+
+export default function SearchMenu({
+  isOpen,
+  value,
+  menuResults,
+  onResultClick,
+  onViewMoreClick,
+  onCloseMenu
+}: SearchMenuProps) {
+  const [hoveredResultId, setHoveredResultId] = useState<string | null>(null);
+  const [isViewMoreHovered, setIsViewMoreHovered] = useState<boolean>(false);
+
+  if (!isOpen || !value) return null;
+
+  return (
+    <div 
+      style={{
+        position: 'absolute',
+        top: '36px',
+        left: 0,
+        width: '100%',
+        backgroundColor: searchTokens.colors.sidebarBg,
+        border: `1px solid ${searchTokens.colors.border}`,
+        borderRadius: '4px',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.2)',
+        zIndex: 50,
+        padding: '4px',
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '256px'
+      }}
+    >
+      <div style={{ overflowY: 'auto', flex: 1 }}>
+        {menuResults.length === 0 ? (
+          <div style={{ padding: '16px', textAlign: 'center', fontSize: '11px', color: searchTokens.colors.muted, fontStyle: 'italic' }}>
+            No indexed record entities match your text query constraints.
+          </div>
+        ) : (
+          menuResults.map((item) => {
+            const isItemHovered = hoveredResultId === item.id;
+            return (
+              <div
+                key={item.id}
+                onMouseEnter={() => setHoveredResultId(item.id)}
+                onMouseLeave={() => setHoveredResultId(null)}
+                onClick={() => {
+                  if (onResultClick) onResultClick(item);
+                  onCloseMenu();
+                }}
+                style={{
+                  width: '100%',
+                  padding: '8px',
+                  backgroundColor: isItemHovered ? searchTokens.colors.hoverBg : 'transparent',
+                  borderRadius: '2px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '2px',
+                  transition: 'background-color 100ms',
+                  boxSizing: 'border-box'
+                }}
+              >
+                <div style={{ fontWeight: 600, color: searchTokens.colors.text, display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+                  <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{item.title}</span>
+                  {item.category && (
+                    <span style={{ fontSize: '9px', fontFamily: 'monospace', fontWeight: 'bold', backgroundColor: searchTokens.colors.accentBgLight, border: `1px solid rgba(0, 122, 204, 0.2)`, color: searchTokens.colors.borderAccent, padding: '2px 4px', borderRadius: '2px', textTransform: 'uppercase', marginLeft: '8px', flexShrink: 0 }}>
+                      {item.category}
+                    </span>
+                  )}
+                </div>
+                {item.subtitle && <div style={{ fontSize: '10px', color: searchTokens.colors.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.subtitle}</div>}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {menuResults.length > 0 && onViewMoreClick && (
+        <button
+          onMouseEnter={() => setIsViewMoreHovered(true)}
+          onMouseLeave={() => setIsViewMoreHovered(false)}
+          onClick={() => {
+            onViewMoreClick();
+            onCloseMenu();
+          }}
+          style={{
+            width: '100%',
+            border: 'none',
+            borderTop: `1px solid ${searchTokens.colors.border}`,
+            backgroundColor: isViewMoreHovered ? searchTokens.colors.hoverBg : 'transparent',
+            padding: '8px',
+            textAlign: 'center',
+            fontSize: '10px',
+            fontWeight: 'bold',
+            color: searchTokens.colors.borderAccent,
+            letterSpacing: '0.5px',
+            textTransform: 'uppercase',
+            transition: 'background-color 150ms',
+            borderRadius: '0 0 2px 2px',
+            cursor: 'pointer'
+          }}
+        >
+          View All Matching Search Metrics Records →
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/search/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export type SearchVariant = 'simple' | 'float' | 'menu';
 
 export interface SearchResultItem {
@@ -13,9 +15,34 @@ export interface SearchInputProps {
   onChange: (value: string) => void;
   onClear?: () => void;
   placeholder?: string;
-  resultsCount?: number;           // Mandatory for 'simple' variant display logs
-  menuResults?: SearchResultItem[]; // Array datasets parsed directly to the 'menu' view dropdown
+  resultsCount?: number;
+  menuResults?: SearchResultItem[];
   onResultClick?: (item: SearchResultItem) => void;
   onViewMoreClick?: () => void;
   className?: string;
+  showFloatPeek?: boolean;
+  // ⚡ Accepts either a plain text string label or a fully rendered sub-component node
+  peekContent?: React.ReactNode; 
 }
+
+export const searchTokens = {
+  colors: {
+    bgInput: 'var(--color-vsc-bg-input, #f6f8fa)',
+    border: 'var(--color-vsc-border, #e4e4e7)',
+    borderAccent: 'var(--color-vsc-accent, #007acc)',
+    borderAccentHover: 'var(--color-vsc-accent-hover, #0062a3)',
+    text: 'var(--color-vsc-text, #333333)',
+    muted: 'var(--color-vsc-muted, #6a737d)',
+    sidebarBg: 'var(--color-vsc-sidebar, #f3f3f3)',
+    hoverBg: 'var(--color-vsc-hover, #e8e8e8)',
+    accentBgLight: 'rgba(0, 122, 204, 0.1)'
+  },
+  typography: {
+    /* ⚡ Pulls Tailwind's native font configuration maps from your global layout shell App context */
+    sans: 'var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)',
+    mono: 'var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)'
+  },
+  transitions: {
+    smooth: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)'
+  }
+};

package/src/index.ts

@@ -1,4 +1,3 @@
-import './index.css';
 export * from './components/resizable';
 export * from './components/tabs';
 export * from './components/button';

package/vite.config.mts

@@ -9,13 +9,11 @@ import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 import { playwright } from '@vitest/browser-playwright';
 const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 import tailwindcss from '@tailwindcss/vite';
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   plugins: [
     tailwindcss(),
-    cssInjectedByJsPlugin(),
     react(),
     // Auto-generates independent TypeScript type declaration files (.d.ts) matching paths
     dts({
@@ -33,8 +31,6 @@ export default defineConfig({
         'components/icons/index': resolve(__dirname, 'src/components/icons/index.ts'),
 
       },
-      name: "voxelUi",
-      fileName: (format) => `index.${format}.js`,
       formats: ['es'] // Output strictly as modern ES Modules for dead-code elimination (tree-shaking)
     },
     rollupOptions: {

package/dist/chunks/search-BnD-97mv.js

@@ -1,205 +0,0 @@
-import { t as e } from "./jsx-runtime-Boo2vksn.js";
-import { t } from "./Button-BgQwvn3C.js";
-import { E as n, S as r } from "./icons-BpfDVwCQ.js";
-import { useEffect as i, useRef as a, useState as o } from "react";
-//#region src/components/search/SearchInput.tsx
-var s = e();
-function c({ variant: e = "simple", value: c, onChange: l, onClear: u, placeholder: d = "Search manifests or tracking codes...", resultsCount: f = 0, menuResults: p = [], onResultClick: m, onViewMoreClick: h, className: g = "", showFloatPeek: _ = !1, resultIndicatorPanel: v }) {
-	let [y, b] = o(!1), [x, S] = o(!1), C = a(null), w = a(null);
-	i(() => {
-		let t = (t) => {
-			C.current && !C.current.contains(t.target) && (S(!1), e === "float" && c === "" && b(!1));
-		};
-		return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
-	}, [e, c]);
-	let T = (e) => {
-		e.stopPropagation(), l(""), u && u(), w.current && w.current.focus();
-	}, E = () => {
-		b(!0), setTimeout(() => w.current?.focus(), 50);
-	}, D = "relative flex flex-col font-sans text-xs select-none";
-	if (e === "simple") {
-		let e = c.length > 0;
-		return /* @__PURE__ */ (0, s.jsxs)("div", {
-			className: `${D} ${g}`.trim(),
-			children: [/* @__PURE__ */ (0, s.jsxs)("div", {
-				className: "relative flex items-center bg-vsc-bg-input border border-vsc-border rounded-sm h-8 group hover:border-vsc-accent transition-colors z-20",
-				children: [
-					/* @__PURE__ */ (0, s.jsx)(r, {
-						size: 14,
-						className: "absolute left-2.5 text-vsc-muted group-hover:text-vsc-text"
-					}),
-					/* @__PURE__ */ (0, s.jsx)("input", {
-						ref: w,
-						type: "text",
-						value: c,
-						onChange: (e) => l(e.target.value),
-						placeholder: d,
-						className: "w-full h-full pl-8 pr-10 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
-					}),
-					c && /* @__PURE__ */ (0, s.jsx)("div", {
-						className: "absolute right-1 top-1/2 -translate-y-1/2 flex items-center",
-						children: /* @__PURE__ */ (0, s.jsx)(t, {
-							icon: n,
-							color: "ghost",
-							iconOnly: !0,
-							onClick: T,
-							size: "xs"
-						})
-					})
-				]
-			}), /* @__PURE__ */ (0, s.jsx)("div", {
-				className: `absolute left-0 right-0 top-8 z-50 overflow-hidden transition-all duration-200 cubic-bezier(0.34, 1.56, 0.64, 1) ${e ? "" : "pointer-events-none"}`,
-				style: {
-					height: e ? "auto" : "0px",
-					opacity: +!!e,
-					transform: e ? "translateY(0px)" : "translateY(-4px)"
-				},
-				children: /* @__PURE__ */ (0, s.jsx)("div", {
-					className: "bg-vsc-sidebar shadow-sm p-1.5 pt-1 ",
-					children: f === 0 ? /* @__PURE__ */ (0, s.jsx)("div", {
-						className: "pl-1 text-start text-[11px] text-vsc-muted italic",
-						children: "No record match your search query constraints."
-					}) : v || /* @__PURE__ */ (0, s.jsxs)("p", {
-						className: "text-[10px] font-mono text-vsc-muted pl-1 truncate",
-						children: [
-							"Showing ",
-							/* @__PURE__ */ (0, s.jsx)("span", {
-								className: "text-vsc-accent font-bold",
-								children: f
-							}),
-							" matching database metrics records"
-						]
-					})
-				})
-			})]
-		});
-	}
-	if (e === "float") {
-		let e = _ && f > 0 && c.length > 0;
-		return /* @__PURE__ */ (0, s.jsxs)("div", {
-			ref: C,
-			className: `${D} ${g}`.trim(),
-			children: [/* @__PURE__ */ (0, s.jsx)("div", {
-				className: `flex items-center bg-vsc-bg-input border rounded-sm h-8 transition-all duration-300 ease-in-out overflow-hidden ${y || c ? "w-64 border-vsc-accent px-2" : "w-8 border-transparent bg-transparent justify-center"}`,
-				children: y || c ? /* @__PURE__ */ (0, s.jsxs)("div", {
-					className: "relative flex items-center w-full h-full",
-					children: [
-						/* @__PURE__ */ (0, s.jsx)(r, {
-							size: 14,
-							className: "text-vsc-text shrink-0"
-						}),
-						/* @__PURE__ */ (0, s.jsx)("input", {
-							ref: w,
-							type: "text",
-							value: c,
-							onChange: (e) => l(e.target.value),
-							placeholder: d,
-							className: "w-full h-full pl-2 pr-6 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
-						}),
-						c && /* @__PURE__ */ (0, s.jsx)("div", {
-							className: "absolute right-0 top-1/2 -translate-y-1/2 flex items-center",
-							children: /* @__PURE__ */ (0, s.jsx)(t, {
-								iconOnly: !0,
-								color: "ghost",
-								icon: n,
-								onClick: T,
-								size: "xs"
-							})
-						})
-					]
-				}) : /* @__PURE__ */ (0, s.jsx)(t, {
-					iconOnly: !0,
-					size: "sm",
-					icon: r,
-					onClick: E,
-					color: "ghost",
-					className: "text-vsc-muted hover:text-vsc-text transition-colors",
-					title: "Open Expandable Search"
-				})
-			}), /* @__PURE__ */ (0, s.jsx)("div", {
-				className: "overflow-hidden transition-all duration-200 ease-out w-64 absolute top-8",
-				style: {
-					height: e ? "20px" : "0px",
-					opacity: +!!e
-				},
-				children: /* @__PURE__ */ (0, s.jsxs)("p", {
-					className: "text-[9px] font-mono text-vsc-accent pt-1 pl-1 truncate bg-vsc-sidebar border border-t-0 border-vsc-border p-1 rounded-b shadow-sm",
-					children: [
-						"Quick Peek: Found ",
-						f,
-						" rows"
-					]
-				})
-			})]
-		});
-	}
-	return /* @__PURE__ */ (0, s.jsxs)("div", {
-		ref: C,
-		className: `${D} ${g}`.trim(),
-		children: [/* @__PURE__ */ (0, s.jsxs)("div", {
-			className: "relative flex items-center bg-vsc-bg-input border border-vsc-border rounded-sm h-8 focus-within:border-vsc-accent",
-			children: [
-				/* @__PURE__ */ (0, s.jsx)(r, {
-					size: 14,
-					className: "absolute left-2.5 text-vsc-muted"
-				}),
-				/* @__PURE__ */ (0, s.jsx)("input", {
-					ref: w,
-					type: "text",
-					value: c,
-					onChange: (e) => {
-						l(e.target.value), S(!0);
-					},
-					onFocus: () => S(!0),
-					placeholder: d,
-					className: "w-full h-full pl-8 pr-10 bg-transparent text-vsc-text border-none outline-none focus:outline-none placeholder-vsc-muted"
-				}),
-				c && /* @__PURE__ */ (0, s.jsx)("div", {
-					className: "absolute right-1 top-1/2 -translate-y-1/2 flex items-center",
-					children: /* @__PURE__ */ (0, s.jsx)(t, {
-						iconOnly: !0,
-						icon: n,
-						color: "ghost",
-						onClick: T,
-						size: "xs"
-					})
-				})
-			]
-		}), x && c && /* @__PURE__ */ (0, s.jsxs)("div", {
-			className: "absolute top-9 left-0 w-full bg-vsc-sidebar border border-vsc-border rounded shadow-xl z-50 p-1 flex flex-col max-h-64 animate-in fade-in slide-in-from-top-1 duration-150",
-			children: [/* @__PURE__ */ (0, s.jsx)("div", {
-				className: "overflow-y-auto flex-1",
-				children: p.length === 0 ? /* @__PURE__ */ (0, s.jsx)("div", {
-					className: "p-4 text-center text-[11px] text-vsc-muted italic",
-					children: "No indexed record entities match your text query constraints."
-				}) : p.map((e) => /* @__PURE__ */ (0, s.jsxs)("div", {
-					onClick: () => {
-						m && m(e), S(!1);
-					},
-					className: "w-full p-2 hover:bg-vsc-hover text-left rounded-sm cursor-pointer flex flex-col space-y-0.5 transition-colors",
-					children: [/* @__PURE__ */ (0, s.jsxs)("div", {
-						className: "font-semibold text-vsc-text flex justify-between items-center",
-						children: [/* @__PURE__ */ (0, s.jsx)("span", {
-							className: "truncate",
-							children: e.title
-						}), e.category && /* @__PURE__ */ (0, s.jsx)("span", {
-							className: "text-[9px] font-mono font-bold bg-vsc-accent/10 border border-vsc-accent/20 text-vsc-accent px-1 rounded-sm uppercase tracking-wide",
-							children: e.category
-						})]
-					}), e.subtitle && /* @__PURE__ */ (0, s.jsx)("div", {
-						className: "text-[10px] text-vsc-muted truncate",
-						children: e.subtitle
-					})]
-				}, e.id))
-			}), p.length > 0 && h && /* @__PURE__ */ (0, s.jsx)("button", {
-				onClick: () => {
-					h(), S(!1);
-				},
-				className: "w-full border-t border-vsc-border bg-vsc-bg hover:bg-vsc-hover/60 p-2 text-center text-[10px] font-bold text-vsc-accent tracking-wide uppercase transition-colors rounded-b-sm border-none cursor-pointer",
-				children: "View All Matching Search Metrics Records →"
-			})]
-		})]
-	});
-}
-//#endregion
-export { c as t };