@knymbus/voxel-ui 1.0.13 → 1.0.14

package/dist/chunks/{search-BCvuXqOX.js → search-CIhA-ti4.js}

@@ -15,6 +15,10 @@ var s = {
 		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 }) {
@@ -139,37 +143,37 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 }
 //#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 }) {
-	let [b, x] = o(!1), [S, C] = o(!1), [w, T] = o(!1), [E, D] = o(!1), O = a(null), k = a(null);
+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) => {
-			O.current && !O.current.contains(t.target) && (C(!1), e === "float" && u === "" && x(!1));
+			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 A = (e) => {
-		e.stopPropagation(), d(""), f && f(), k.current && k.current.focus();
-	}, j = () => {
-		x(!0), setTimeout(() => k.current?.focus(), 50);
-	}, M = {
+	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: "sans-serif",
+		fontFamily: s.typography.sans,
 		fontSize: "12px",
 		userSelect: "none",
 		boxSizing: "border-box"
-	}, N = {
+	}, P = {
 		position: "relative",
 		display: "flex",
 		alignItems: "center",
 		backgroundColor: s.colors.bgInput,
-		border: `1px solid ${E || e === "float" && b ? s.colors.borderAccent : w ? s.colors.borderAccentHover : s.colors.border}`,
-		borderRadius: "2px",
+		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"
-	}, P = {
+	}, F = {
 		width: "100%",
 		height: "100%",
 		backgroundColor: "transparent",
@@ -178,17 +182,39 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		outline: "none",
 		padding: "0 32px",
 		fontSize: "12px",
+		fontFamily: s.typography.sans,
 		boxSizing: "border-box"
 	};
 	if (e === "simple") {
-		let e = m > 0 && u.length > 0;
+		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: M,
+			style: N,
 			className: v,
 			children: [/* @__PURE__ */ (0, c.jsxs)("div", {
-				style: N,
-				onMouseEnter: () => T(!0),
-				onMouseLeave: () => T(!1),
+				style: P,
+				onMouseEnter: () => E(!0),
+				onMouseLeave: () => E(!1),
 				children: [
 					/* @__PURE__ */ (0, c.jsx)("div", {
 						style: {
@@ -196,19 +222,19 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							left: "10px",
 							display: "flex",
 							alignItems: "center",
-							color: w ? s.colors.text : s.colors.muted
+							color: T ? s.colors.text : s.colors.muted
 						},
 						children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
 					}),
 					/* @__PURE__ */ (0, c.jsx)("input", {
-						ref: k,
+						ref: A,
 						type: "text",
 						value: u,
 						onChange: (e) => d(e.target.value),
-						onFocus: () => D(!0),
-						onBlur: () => D(!1),
+						onFocus: () => O(!0),
+						onBlur: () => O(!1),
 						placeholder: p,
-						style: P
+						style: F
 					}),
 					u && /* @__PURE__ */ (0, c.jsx)("div", {
 						style: {
@@ -223,7 +249,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							icon: n,
 							color: "ghost",
 							iconOnly: !0,
-							onClick: A,
+							onClick: j,
 							size: "xs"
 						})
 					})
@@ -248,46 +274,40 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						border: `1px solid ${s.colors.border}`,
 						borderTop: "none",
 						padding: "4px 6px",
-						borderRadius: "0 0 2px 2px",
+						borderRadius: "0 0 6px 6px",
 						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
 					},
-					children: /* @__PURE__ */ (0, c.jsxs)("p", {
-						style: {
-							margin: 0,
-							fontSize: "10px",
-							fontFamily: "monospace",
-							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"
-						]
-					})
+					children: i
 				})
 			})]
 		});
 	}
 	if (e === "float") {
-		let e = y && m > 0 && u.length > 0, i = b || u.length > 0;
+		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: O,
-			style: M,
+			ref: k,
+			style: N,
 			className: v,
 			children: [/* @__PURE__ */ (0, c.jsx)("div", {
-				onMouseEnter: () => T(!0),
-				onMouseLeave: () => T(!1),
+				onMouseEnter: () => E(!0),
+				onMouseLeave: () => E(!1),
 				style: {
-					...N,
+					...P,
 					width: i ? "256px" : "32px",
 					justifyContent: i ? "flex-start" : "center",
 					backgroundColor: i ? s.colors.bgInput : "transparent",
@@ -311,13 +331,13 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							}
 						}),
 						/* @__PURE__ */ (0, c.jsx)("input", {
-							ref: k,
+							ref: A,
 							type: "text",
 							value: u,
 							onChange: (e) => d(e.target.value),
 							placeholder: p,
 							style: {
-								...P,
+								...F,
 								padding: "0 24px 0 8px"
 							}
 						}),
@@ -334,7 +354,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 								iconOnly: !0,
 								color: "ghost",
 								icon: n,
-								onClick: A,
+								onClick: j,
 								size: "xs"
 							})
 						})
@@ -343,7 +363,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					iconOnly: !0,
 					size: "sm",
 					icon: r,
-					onClick: j,
+					onClick: M,
 					color: "ghost",
 					style: { color: s.colors.muted },
 					title: "Open Expandable Search"
@@ -370,34 +390,19 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						borderRadius: "0 0 2px 2px",
 						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
 					},
-					children: /* @__PURE__ */ (0, c.jsxs)("p", {
-						style: {
-							margin: 0,
-							fontSize: "9px",
-							fontFamily: "monospace",
-							color: s.colors.borderAccent,
-							whiteSpace: "nowrap",
-							overflow: "hidden",
-							textOverflow: "ellipsis"
-						},
-						children: [
-							"Quick Peek: Found ",
-							m,
-							" rows"
-						]
-					})
+					children: a
 				})
 			})]
 		});
 	}
 	return /* @__PURE__ */ (0, c.jsxs)("div", {
-		ref: O,
-		style: M,
+		ref: k,
+		style: N,
 		className: v,
 		children: [/* @__PURE__ */ (0, c.jsxs)("div", {
-			style: N,
-			onMouseEnter: () => T(!0),
-			onMouseLeave: () => T(!1),
+			style: P,
+			onMouseEnter: () => E(!0),
+			onMouseLeave: () => E(!1),
 			children: [
 				/* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
@@ -410,15 +415,15 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
 				}),
 				/* @__PURE__ */ (0, c.jsx)("input", {
-					ref: k,
+					ref: A,
 					type: "text",
 					value: u,
 					onChange: (e) => {
-						d(e.target.value), C(!0);
+						d(e.target.value), w(!0);
 					},
-					onFocus: () => C(!0),
+					onFocus: () => w(!0),
 					placeholder: p,
-					style: P
+					style: F
 				}),
 				u && /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
@@ -433,18 +438,18 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						iconOnly: !0,
 						icon: n,
 						color: "ghost",
-						onClick: A,
+						onClick: j,
 						size: "xs"
 					})
 				})
 			]
 		}), /* @__PURE__ */ (0, c.jsx)(l, {
-			isOpen: S,
+			isOpen: C,
 			value: u,
 			menuResults: h,
 			onResultClick: g,
 			onViewMoreClick: _,
-			onCloseMenu: () => C(!1)
+			onCloseMenu: () => w(!1)
 		})]
 	});
 }

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

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { SearchInputProps } from './types';
-export default function SearchInput({ variant, value, onChange, onClear, placeholder, resultsCount, menuResults, onResultClick, onViewMoreClick, className, showFloatPeek }: SearchInputProps): React.JSX.Element;
+export default function SearchInput({ variant, value, onChange, onClear, placeholder, resultsCount, menuResults, onResultClick, onViewMoreClick, className, showFloatPeek, peekContent }: SearchInputProps): React.JSX.Element;

package/dist/components/search/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/search-BCvuXqOX.js";
+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;
@@ -17,6 +18,7 @@ export interface SearchInputProps {
     onViewMoreClick?: () => void;
     className?: string;
     showFloatPeek?: boolean;
+    peekContent?: React.ReactNode;
 }
 export declare const searchTokens: {
     colors: {
@@ -30,6 +32,10 @@ export declare const searchTokens: {
         hoverBg: string;
         accentBgLight: string;
     };
+    typography: {
+        sans: string;
+        mono: string;
+    };
     transitions: {
         smooth: string;
     };

package/dist/index.js

@@ -3,5 +3,5 @@ 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 { n as P, t as F } from "./chunks/search-BCvuXqOX.js";
+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.13",
+  "version": "1.0.14",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/search/SearchInput.tsx

@@ -15,7 +15,8 @@ export default function SearchInput({
     onResultClick,
     onViewMoreClick,
     className = '',
-    showFloatPeek = false
+    showFloatPeek = false,
+    peekContent
 }: SearchInputProps) {
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
@@ -54,7 +55,7 @@ export default function SearchInput({
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
-        fontFamily: 'sans-serif',
+        fontFamily: searchTokens.typography.sans, // ⚡ Applied global Tailwind fonts variables
         fontSize: '12px',
         userSelect: 'none',
         boxSizing: 'border-box'
@@ -66,12 +67,12 @@ export default function SearchInput({
         alignItems: 'center',
         backgroundColor: searchTokens.colors.bgInput,
         border: `1px solid ${isInputFocused || (variant === 'float' && isExpanded)
-                ? searchTokens.colors.borderAccent
-                : isInputHovered
-                    ? searchTokens.colors.borderAccentHover
-                    : searchTokens.colors.border
+            ? searchTokens.colors.borderAccent
+            : isInputHovered
+                ? searchTokens.colors.borderAccentHover
+                : searchTokens.colors.border
             }`,
-        borderRadius: '2px',
+        borderRadius: '6px',
         height: '32px',
         transition: searchTokens.transitions.smooth,
         boxSizing: 'border-box'
@@ -86,6 +87,7 @@ export default function SearchInput({
         outline: 'none',
         padding: '0 32px',
         fontSize: '12px',
+        fontFamily: searchTokens.typography.sans,
         boxSizing: 'border-box'
     };
 
@@ -93,6 +95,13 @@ export default function SearchInput({
     if (variant === 'simple') {
         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 style={baseWrapperStyles} className={className}>
                 <div
@@ -135,10 +144,8 @@ export default function SearchInput({
                         pointerEvents: 'none'
                     }}
                 >
-                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `1px solid ${searchTokens.colors.border}`, borderTop: 'none', padding: '4px 6px', borderRadius: '0 0 2px 2px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
-                        <p style={{ margin: 0, fontSize: '10px', fontFamily: 'monospace', 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>
+                    <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>
@@ -150,6 +157,12 @@ export default function SearchInput({
         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} style={baseWrapperStyles} className={className}>
                 <div
@@ -209,9 +222,7 @@ export default function SearchInput({
                     }}
                 >
                     <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)' }}>
-                        <p style={{ margin: 0, fontSize: '9px', fontFamily: 'monospace', color: searchTokens.colors.borderAccent, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                            Quick Peek: Found {resultsCount} rows
-                        </p>
+                        {renderedFloatPeek}
                     </div>
                 </div>
             </div>
@@ -258,4 +269,4 @@ export default function SearchInput({
             />
         </div>
     );
-}
+}

package/src/components/search/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export type SearchVariant = 'simple' | 'float' | 'menu';
 
 export interface SearchResultItem {
@@ -19,6 +21,8 @@ export interface SearchInputProps {
   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 = {
@@ -33,6 +37,11 @@ export const searchTokens = {
     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)'
   }