@knymbus/voxel-ui 1.0.15 → 1.0.19

package/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
   "stories": [
@@ -12,6 +13,14 @@ const config: StorybookConfig = {
     "@storybook/addon-docs",
     "@storybook/addon-mcp"
   ],
-  "framework": "@storybook/react-vite"
+  "framework": "@storybook/react-vite",
+  async viteFinal(config) {
+    // Dynamically import Tailwind to avoid any execution in the main app
+    const { default: tailwindcss } = await import('@tailwindcss/vite');
+
+    return mergeConfig(config, {
+      plugins: [tailwindcss()],
+    });
+  },
 };
 export default config;

package/.storybook/preview.ts

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 import type { Preview } from '@storybook/react-vite'
-import '../src/index.css';
+import './tailwind.css';
 
 const preview: Preview = {
   parameters: {

package/.storybook/tailwind.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+/* 🎛️ Tailwind v4 Theme Extension Configuration Panel */
+@theme {
+  --color-vsc-bg: #ffffff;
+  --color-vsc-sidebar: #f3f3f3;
+  --color-vsc-border: #e4e4e7;
+  --color-vsc-accent: #007acc;
+  --color-vsc-accent-hover: #0062a3;
+  --color-vsc-hover: #e8e8e8;
+  --color-vsc-text: #333333;
+  
+  --color-vsc-button-text: #ffffff;
+  --color-vsc-muted: #6a737d;
+  --color-vsc-bg-input: #f6f8fa;
+}
+
+/* ==========================================================================
+   DARK MODE OVERRIDES (Triggers when parent layout has the ".dark" class)
+   ========================================================================== */
+@layer base {
+  .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: #cccccc;
+
+    --color-vsc-muted: #8b949e;
+    --color-vsc-bg-input: #1f1f1f;
+  }
+}

package/dist/chunks/{search-COxH7vvi.js → search-DSDSn6PK.js}

@@ -1,36 +1,20 @@
 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", {
+import { t } from "./types-DmQVfNPh.js";
+import { t as n } from "./Button-BgQwvn3C.js";
+import { E as r, S as i } from "./icons-BpfDVwCQ.js";
+import { useEffect as a, useRef as o, useState as s } from "react";
+//#region src/components/search/SearchMenu.tsx
+var c = e();
+function l({ isOpen: e, value: n, menuResults: r, onResultClick: i, onViewMoreClick: a, onCloseMenu: o }) {
+	let [l, u] = s(null), [d, f] = s(!1);
+	return !e || !n ? 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}`,
+			backgroundColor: t.colors.sidebarBg,
+			border: `1px solid ${t.colors.border}`,
 			borderRadius: "4px",
 			boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
 			zIndex: 50,
@@ -44,25 +28,25 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 				overflowY: "auto",
 				flex: 1
 			},
-			children: n.length === 0 ? /* @__PURE__ */ (0, c.jsx)("div", {
+			children: r.length === 0 ? /* @__PURE__ */ (0, c.jsx)("div", {
 				style: {
 					padding: "16px",
 					textAlign: "center",
 					fontSize: "11px",
-					color: s.colors.muted,
+					color: t.colors.muted,
 					fontStyle: "italic"
 				},
 				children: "No indexed record entities match your text query constraints."
-			}) : n.map((e) => /* @__PURE__ */ (0, c.jsxs)("div", {
+			}) : r.map((e) => /* @__PURE__ */ (0, c.jsxs)("div", {
 				onMouseEnter: () => u(e.id),
 				onMouseLeave: () => u(null),
 				onClick: () => {
-					r && r(e), a();
+					i && i(e), o();
 				},
 				style: {
 					width: "100%",
 					padding: "8px",
-					backgroundColor: l === e.id ? s.colors.hoverBg : "transparent",
+					backgroundColor: l === e.id ? t.colors.hoverBg : "transparent",
 					borderRadius: "2px",
 					cursor: "pointer",
 					display: "flex",
@@ -74,7 +58,7 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 				children: [/* @__PURE__ */ (0, c.jsxs)("div", {
 					style: {
 						fontWeight: 600,
-						color: s.colors.text,
+						color: t.colors.text,
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
@@ -93,9 +77,9 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 							fontSize: "9px",
 							fontFamily: "monospace",
 							fontWeight: "bold",
-							backgroundColor: s.colors.accentBgLight,
+							backgroundColor: t.colors.accentBgLight,
 							border: "1px solid rgba(0, 122, 204, 0.2)",
-							color: s.colors.borderAccent,
+							color: t.colors.borderAccent,
 							padding: "2px 4px",
 							borderRadius: "2px",
 							textTransform: "uppercase",
@@ -107,7 +91,7 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 				}), e.subtitle && /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
 						fontSize: "10px",
-						color: s.colors.muted,
+						color: t.colors.muted,
 						whiteSpace: "nowrap",
 						overflow: "hidden",
 						textOverflow: "ellipsis"
@@ -115,22 +99,22 @@ function l({ isOpen: e, value: t, menuResults: n, onResultClick: r, onViewMoreCl
 					children: e.subtitle
 				})]
 			}, e.id))
-		}), n.length > 0 && i && /* @__PURE__ */ (0, c.jsx)("button", {
+		}), r.length > 0 && a && /* @__PURE__ */ (0, c.jsx)("button", {
 			onMouseEnter: () => f(!0),
 			onMouseLeave: () => f(!1),
 			onClick: () => {
-				i(), a();
+				a(), o();
 			},
 			style: {
 				width: "100%",
 				border: "none",
-				borderTop: `1px solid ${s.colors.border}`,
-				backgroundColor: d ? s.colors.hoverBg : "transparent",
+				borderTop: `1px solid ${t.colors.border}`,
+				backgroundColor: d ? t.colors.hoverBg : "transparent",
 				padding: "8px",
 				textAlign: "center",
 				fontSize: "10px",
 				fontWeight: "bold",
-				color: s.colors.borderAccent,
+				color: t.colors.borderAccent,
 				letterSpacing: "0.5px",
 				textTransform: "uppercase",
 				transition: "background-color 150ms",
@@ -144,8 +128,8 @@ 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, 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 [x, S] = s(!1), [C, w] = s(!1), [T, E] = s(!1), [D, O] = s(!1), k = o(null), A = o(null);
+	a(() => {
 		let t = (t) => {
 			k.current && !k.current.contains(t.target) && (w(!1), e === "float" && u === "" && S(!1));
 		};
@@ -159,7 +143,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		position: "relative",
 		display: "flex",
 		flexDirection: "column",
-		fontFamily: s.typography.sans,
+		fontFamily: t.typography.sans,
 		fontSize: "12px",
 		userSelect: "none",
 		boxSizing: "border-box"
@@ -167,26 +151,26 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		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}`,
+		backgroundColor: t.colors.bgInput,
+		border: `1px solid ${D || e === "float" && x ? t.colors.borderAccent : T ? t.colors.borderAccentHover : t.colors.border}`,
 		borderRadius: "6px",
 		height: "32px",
-		transition: s.transitions.smooth,
+		transition: t.transitions.smooth,
 		boxSizing: "border-box"
 	}, F = {
 		width: "100%",
 		height: "100%",
 		backgroundColor: "transparent",
-		color: s.colors.text,
+		color: t.colors.text,
 		border: "none",
 		outline: "none",
 		padding: "0 32px",
 		fontSize: "12px",
-		fontFamily: s.typography.sans,
+		fontFamily: t.typography.sans,
 		boxSizing: "border-box"
 	};
 	if (e === "simple") {
-		let e = u.length > 0, i = m > 0;
+		let e = u.length > 0, a = m > 0;
 		return /* @__PURE__ */ (0, c.jsxs)("div", {
 			style: N,
 			className: v,
@@ -201,9 +185,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							left: "10px",
 							display: "flex",
 							alignItems: "center",
-							color: T ? s.colors.text : s.colors.muted
+							color: T ? t.colors.text : t.colors.muted
 						},
-						children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
+						children: /* @__PURE__ */ (0, c.jsx)(i, { size: 14 })
 					}),
 					/* @__PURE__ */ (0, c.jsx)("input", {
 						ref: A,
@@ -224,8 +208,8 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							display: "flex",
 							alignItems: "center"
 						},
-						children: /* @__PURE__ */ (0, c.jsx)(t, {
-							icon: n,
+						children: /* @__PURE__ */ (0, c.jsx)(n, {
+							icon: r,
 							color: "ghost",
 							iconOnly: !0,
 							onClick: j,
@@ -240,27 +224,27 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					right: 0,
 					top: "32px",
 					zIndex: 10,
-					transition: s.transitions.smooth,
-					height: i || e ? "auto" : "0px",
-					opacity: i || e ? 1 : 0,
-					transform: i || e ? "translateY(0px)" : "translateY(-4px)",
+					transition: t.transitions.smooth,
+					height: e ? "auto" : "0px",
+					opacity: +!!e,
+					transform: e ? "translateY(4px)" : "translateY(-4px)",
 					pointerEvents: "none"
 				},
 				children: /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
-						backgroundColor: s.colors.sidebarBg,
-						border: `0px solid ${s.colors.border}`,
+						backgroundColor: t.colors.sidebarBg,
+						border: `0px solid ${t.colors.border}`,
 						borderTop: "none",
 						padding: "4px 6px",
-						borderRadius: "0 0 6px 6px",
+						borderRadius: "6px",
 						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
 					},
-					children: e && b ? b : e && !b && i ? /* @__PURE__ */ (0, c.jsxs)("p", {
+					children: e && b ? b : e && !b && a ? /* @__PURE__ */ (0, c.jsxs)("p", {
 						style: {
 							margin: 0,
 							fontSize: "10px",
-							fontFamily: s.typography.mono,
-							color: s.colors.muted,
+							fontFamily: t.typography.mono,
+							color: t.colors.muted,
 							whiteSpace: "nowrap",
 							overflow: "hidden",
 							textOverflow: "ellipsis"
@@ -269,26 +253,26 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 							"Showing ",
 							/* @__PURE__ */ (0, c.jsx)("span", {
 								style: {
-									color: s.colors.borderAccent,
+									color: t.colors.borderAccent,
 									fontWeight: "bold"
 								},
 								children: m
 							}),
 							" matching database metrics records"
 						]
-					}) : e && !b && !i ? /* @__PURE__ */ (0, c.jsxs)("p", {
+					}) : e && !b && !a ? /* @__PURE__ */ (0, c.jsxs)("p", {
 						style: {
 							margin: 0,
 							fontSize: "10px",
-							fontFamily: s.typography.mono,
-							color: s.colors.borderAccent,
+							fontFamily: t.typography.mono,
+							color: t.colors.borderAccent,
 							whiteSpace: "nowrap",
 							overflow: "hidden",
 							textOverflow: "ellipsis"
 						},
 						children: ["No matching  records found for your query: ", /* @__PURE__ */ (0, c.jsx)("span", {
 							style: {
-								color: s.colors.text,
+								color: t.colors.text,
 								fontWeight: "bold"
 							},
 							children: u
@@ -299,12 +283,12 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 		});
 	}
 	if (e === "float") {
-		let e = y && m > 0 && u.length > 0, i = x || u.length > 0, a = b || /* @__PURE__ */ (0, c.jsxs)("p", {
+		let e = y && m > 0 && u.length > 0, a = x || u.length > 0, o = b || /* @__PURE__ */ (0, c.jsxs)("p", {
 			style: {
 				margin: 0,
 				fontSize: "9px",
-				fontFamily: s.typography.mono,
-				color: s.colors.borderAccent,
+				fontFamily: t.typography.mono,
+				color: t.colors.borderAccent,
 				whiteSpace: "nowrap",
 				overflow: "hidden",
 				textOverflow: "ellipsis"
@@ -324,13 +308,13 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 				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"
+					width: a ? "256px" : "32px",
+					justifyContent: a ? "flex-start" : "center",
+					backgroundColor: a ? t.colors.bgInput : "transparent",
+					borderColor: a ? t.colors.borderAccent : "transparent",
+					padding: a ? "0 8px" : "0"
 				},
-				children: i ? /* @__PURE__ */ (0, c.jsxs)("div", {
+				children: a ? /* @__PURE__ */ (0, c.jsxs)("div", {
 					style: {
 						position: "relative",
 						display: "flex",
@@ -339,10 +323,10 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						height: "100%"
 					},
 					children: [
-						/* @__PURE__ */ (0, c.jsx)(r, {
+						/* @__PURE__ */ (0, c.jsx)(i, {
 							size: 14,
 							style: {
-								color: s.colors.text,
+								color: t.colors.text,
 								flexShrink: 0
 							}
 						}),
@@ -366,22 +350,22 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 								display: "flex",
 								alignItems: "center"
 							},
-							children: /* @__PURE__ */ (0, c.jsx)(t, {
+							children: /* @__PURE__ */ (0, c.jsx)(n, {
 								iconOnly: !0,
 								color: "ghost",
-								icon: n,
+								icon: r,
 								onClick: j,
 								size: "xs"
 							})
 						})
 					]
-				}) : /* @__PURE__ */ (0, c.jsx)(t, {
+				}) : /* @__PURE__ */ (0, c.jsx)(n, {
 					iconOnly: !0,
 					size: "sm",
-					icon: r,
+					icon: i,
 					onClick: M,
 					color: "ghost",
-					style: { color: s.colors.muted },
+					style: { color: t.colors.muted },
 					title: "Open Expandable Search"
 				})
 			}), /* @__PURE__ */ (0, c.jsx)("div", {
@@ -391,7 +375,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					width: "256px",
 					zIndex: 10,
 					overflow: "hidden",
-					transition: s.transitions.smooth,
+					transition: t.transitions.smooth,
 					height: e ? "24px" : "0px",
 					opacity: +!!e,
 					transform: e ? "translateY(0px)" : "translateY(-4px)",
@@ -399,14 +383,14 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 				},
 				children: /* @__PURE__ */ (0, c.jsx)("div", {
 					style: {
-						backgroundColor: s.colors.sidebarBg,
-						border: `1px solid ${s.colors.border}`,
+						backgroundColor: t.colors.sidebarBg,
+						border: `1px solid ${t.colors.border}`,
 						borderTop: "none",
 						padding: "4px",
 						borderRadius: "0 0 2px 2px",
 						boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)"
 					},
-					children: a
+					children: o
 				})
 			})]
 		});
@@ -426,9 +410,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						left: "10px",
 						display: "flex",
 						alignItems: "center",
-						color: s.colors.muted
+						color: t.colors.muted
 					},
-					children: /* @__PURE__ */ (0, c.jsx)(r, { size: 14 })
+					children: /* @__PURE__ */ (0, c.jsx)(i, { size: 14 })
 				}),
 				/* @__PURE__ */ (0, c.jsx)("input", {
 					ref: A,
@@ -450,9 +434,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						display: "flex",
 						alignItems: "center"
 					},
-					children: /* @__PURE__ */ (0, c.jsx)(t, {
+					children: /* @__PURE__ */ (0, c.jsx)(n, {
 						iconOnly: !0,
-						icon: n,
+						icon: r,
 						color: "ghost",
 						onClick: j,
 						size: "xs"
@@ -470,4 +454,4 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 	});
 }
 //#endregion
-export { s as n, u as t };
+export { u as t };

package/dist/chunks/tabs-DkmFedCI.js

@@ -0,0 +1,182 @@
+import { t as e } from "./jsx-runtime-Boo2vksn.js";
+import { t } from "./types-DmQVfNPh.js";
+import { createContext as n, useContext as r, useEffect as i, useState as a } from "react";
+import { create as o } from "zustand";
+//#region src/components/tabs/useTab.ts
+var s = o((e) => ({
+	activeTabs: {},
+	setActiveTab: (t, n) => e((e) => ({ activeTabs: {
+		...e.activeTabs,
+		[t]: n
+	} })),
+	initializeTab: (t, n) => e((e) => e.activeTabs[t] ? {} : { activeTabs: {
+		...e.activeTabs,
+		[t]: n
+	} })
+}));
+function c(e) {
+	let t = s((t) => t.activeTabs[e]), n = s((e) => e.setActiveTab), r = s((e) => e.initializeTab);
+	return {
+		activeTab: t,
+		changeTab: (t) => n(e, t),
+		registerDefault: (t) => r(e, t)
+	};
+}
+//#endregion
+//#region src/components/tabs/TabPanelList.tsx
+var l = e(), u = n({ activeTabId: void 0 }), d = () => r(u);
+function f({ children: e, targetScopeName: n, defaultValue: r }) {
+	let { activeTab: a, registerDefault: o } = c(n);
+	i(() => {
+		o(r);
+	}, [r, o]);
+	let s = a || r, d = {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		minHeight: 0,
+		flex: "1 1 0%",
+		overflow: "hidden",
+		backgroundColor: t.colors.bgInput,
+		fontFamily: t.typography.sans,
+		boxSizing: "border-box"
+	};
+	return /* @__PURE__ */ (0, l.jsx)(u.Provider, {
+		value: { activeTabId: s },
+		children: /* @__PURE__ */ (0, l.jsx)("div", {
+			style: d,
+			children: e
+		})
+	});
+}
+//#endregion
+//#region src/components/tabs/TabPanel.tsx
+function p({ children: e, id: t, persist: n = !1 }) {
+	let { activeTabId: r } = d(), o = r === t, [s, c] = a(!1);
+	return i(() => {
+		o && !s && c(!0);
+	}, [o, s]), !s || !n && !o ? null : /* @__PURE__ */ (0, l.jsx)("div", {
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			width: "100%",
+			height: "100%",
+			backgroundColor: "transparent",
+			transition: "opacity 250ms ease-out, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+			boxSizing: "border-box",
+			opacity: +!!o,
+			transform: o ? "scale(1)" : "scale(0.995)",
+			zIndex: o ? 10 : 0,
+			pointerEvents: o ? "auto" : "none",
+			visibility: o ? "visible" : "hidden"
+		},
+		children: /* @__PURE__ */ (0, l.jsx)("div", {
+			style: {
+				width: "100%",
+				height: "100%",
+				boxSizing: "border-box"
+			},
+			children: e
+		})
+	});
+}
+//#endregion
+//#region src/components/tabs/TabButton.tsx
+function m({ id: e, scopeName: n, children: r, variant: i = "underline", startIcon: o, endIcon: s }) {
+	let { activeTab: u, changeTab: d } = c(n), [f, p] = a(!1), m = u === e, h = {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "6px",
+		backgroundColor: "transparent",
+		border: "none",
+		outline: "none",
+		fontFamily: t.typography.sans,
+		fontSize: "12px",
+		userSelect: "none",
+		cursor: "pointer",
+		height: "100%",
+		transition: "all 150ms ease",
+		boxSizing: "border-box",
+		position: "relative",
+		zIndex: 10
+	}, g = {
+		underline: {
+			padding: "4px 12px 8px 12px",
+			fontWeight: m ? 600 : 500,
+			color: m || f ? t.colors.text : t.colors.muted,
+			borderBottom: `2px solid ${m ? t.colors.borderAccent : "transparent"}`
+		},
+		"sliding-underline": {
+			padding: "8px 16px",
+			fontWeight: m ? 700 : 500,
+			color: m || f ? t.colors.text : t.colors.muted
+		},
+		pill: {
+			padding: "6px 14px",
+			fontWeight: 700,
+			borderRadius: "9999px",
+			backgroundColor: m ? t.colors.borderAccent : f ? t.colors.hoverBg : "transparent",
+			color: m ? "#ffffff" : f ? t.colors.text : t.colors.muted,
+			transform: m ? "scale(1.02)" : "scale(1)",
+			boxShadow: m ? "0 1px 3px rgba(0,0,0,0.1)" : "none"
+		},
+		vscode: {
+			padding: "0 16px",
+			fontWeight: 500,
+			color: m || f ? t.colors.text : t.colors.muted,
+			backgroundColor: m ? t.colors.bgInput : f ? "rgba(0,0,0,0.02)" : t.colors.sidebarBg,
+			borderRight: `1px solid ${t.colors.border}`,
+			borderTop: m ? `2px solid ${t.colors.borderAccent}` : "2px solid transparent",
+			marginTop: m ? "-1px" : "0"
+		},
+		ghost: {
+			padding: "6px 12px",
+			fontWeight: m ? 700 : 500,
+			borderRadius: "2px",
+			backgroundColor: m ? t.colors.hoverBg : f ? "rgba(0,0,0,0.04)" : "transparent",
+			color: m || f ? t.colors.text : t.colors.muted
+		}
+	};
+	return /* @__PURE__ */ (0, l.jsxs)("button", {
+		"data-id": e,
+		onClick: () => d(e),
+		onMouseEnter: () => p(!0),
+		onMouseLeave: () => p(!1),
+		style: {
+			...h,
+			...g[i]
+		},
+		children: [
+			o && /* @__PURE__ */ (0, l.jsx)("span", {
+				style: {
+					display: "inline-flex",
+					flexShrink: 0,
+					opacity: m || f ? 1 : .7
+				},
+				children: o
+			}),
+			/* @__PURE__ */ (0, l.jsx)("span", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: r
+			}),
+			s && /* @__PURE__ */ (0, l.jsx)("span", {
+				style: {
+					display: "inline-flex",
+					flexShrink: 0,
+					opacity: m || f ? 1 : .6
+				},
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { c as i, p as n, f as r, m as t };

package/dist/chunks/types-DmQVfNPh.js

@@ -0,0 +1,21 @@
+//#region src/components/types.ts
+var e = {
+	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)" }
+};
+//#endregion
+export { e as t };