@knymbus/voxel-ui 1.0.15 → 1.0.17

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-WFmasN49.js}

@@ -241,9 +241,9 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 					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)",
+					height: e ? "auto" : "0px",
+					opacity: +!!e,
+					transform: e ? "translateY(4px)" : "translateY(-4px)",
 					pointerEvents: "none"
 				},
 				children: /* @__PURE__ */ (0, c.jsx)("div", {
@@ -252,7 +252,7 @@ function u({ variant: e = "simple", value: u, onChange: d, onClear: f, placehold
 						border: `0px solid ${s.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", {

package/dist/components/search/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/search-COxH7vvi.js";
+import { n as e, t } from "../../chunks/search-WFmasN49.js";
 export { t as SearchInput, e as searchTokens };

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-COxH7vvi.js";
+import { n as P, t as F } from "./chunks/search-WFmasN49.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.15",
+  "version": "1.0.17",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/search/SearchInput.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import SearchInput from './SearchInput';
 import { SearchResultItem } from './types';
@@ -45,10 +45,10 @@ const MultiSearchWorkspace = () => {
     }
 
     return (
-        <div style={{ fontFamily: 'var(--font-sans)', minWidth: '450px', backgroundColor: 'var(--color-vsc-sidebar)', border: '1px solid var(--color-vsc-border)', borderRadius: '6px', padding: '32px' }}>
+        <div className="p-8 bg-vsc-sidebar border border-vsc-border rounded-md space-y-8 min-w-112.5 text-vsc-text" >
 
             {/* 1. Simple Variant Bracket */}
-            <div className="space-y-1.5" style={{ height: 'auto', width: '350px',}}>
+            <div className="space-y-1.5" >
                 <p className="text-[10px] font-bold text-vsc-muted uppercase tracking-wider">1. Simple Matrix Variant with Count Log</p>
                 <SearchInput
                     variant="simple"
@@ -56,7 +56,7 @@ const MultiSearchWorkspace = () => {
                     onChange={setSimpleQuery}
                     resultsCount={filteredSimpleResults.length}
                     placeholder="Type track ID to evaluate records count..."
-                    // peekContent={<ResultPanel />}
+                    peekContent={<ResultPanel />}
                 />
             </div>
 

package/src/components/search/SearchInput.tsx

@@ -159,13 +159,13 @@ export default function SearchInput({
                         zIndex: 10,
                         // overflow: 'hidden',
                         transition: searchTokens.transitions.smooth,
-                        height: hasResults || hasQuery ? 'auto' : '0px',
-                        opacity: hasResults || hasQuery ? 1 : 0,
-                        transform: hasResults || hasQuery ? 'translateY(0px)' : 'translateY(-4px)',
+                        height: hasQuery ? 'auto' : '0px',
+                        opacity: hasQuery ? 1 : 0,
+                        transform: hasQuery ? 'translateY(4px)' : 'translateY(-4px)',
                         pointerEvents: 'none'
                     }}
                 >
-                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `0px 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)' }}>
+                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `0px solid ${searchTokens.colors.border}`, borderTop: 'none', padding: '4px 6px', borderRadius: '6px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
                         {renderedPeek()}
                     </div>
                 </div>

package/src/index.css

@@ -36,4 +36,12 @@
     --color-vsc-muted: #8b949e;
     --color-vsc-bg-input: #1f1f1f;
   }
+}
+
+.p-8{
+  padding:32px;
+}
+
+.voxel:bg-amber-500{
+  background-color:var(--color-vsc-accent);
 }

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

@@ -8,12 +8,11 @@ import { fileURLToPath } from 'node:url';
 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';
+
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   plugins: [
-    tailwindcss(),
     react(),
     // Auto-generates independent TypeScript type declaration files (.d.ts) matching paths
     dts({

package/dist/assets/voxel-ui.css

@@ -1,3 +0,0 @@
-/*! 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*/