@knymbus/voxel-ui 1.0.0

package/src/components/resizable/ResizablePanel.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+type PullPlacement = 'right' | 'left' | 'top' | 'bottom';
+
+interface ResizablePanelProps {
+  children: React.ReactNode;
+  placement?: PullPlacement;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number; // Optional limit: if omitted, goes 100% of parent container width/height
+}
+
+export default function ResizablePanel({
+  children,
+  placement = 'right',
+  defaultSize = 240,
+  minSize = 150,
+  maxSize
+}: ResizablePanelProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const [panelSize, setPanelSize] = useState<number>(defaultSize);
+  const [isResizing, setIsResizing] = useState<boolean>(false);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
+  const isHorizontal = placement === 'right' || placement === 'left';
+  const cursorStyle = isHorizontal ? 'ew-resize' : 'ns-resize';
+
+  const CLOSE_SNAP_THRESHOLD = 60; 
+  const MAX_SNAP_THRESHOLD = 60;   
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const handleDoubleClickReset = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsCollapsed(false);
+    setPanelSize(defaultSize);
+  }, [defaultSize]);
+
+  const resize = useCallback((e: MouseEvent) => {
+    if (!isResizing || !panelRef.current || !panelRef.current.parentElement) return;
+
+    const parentBounds = panelRef.current.parentElement.getBoundingClientRect();
+    const parentWidth = parentBounds.width;
+    const parentHeight = parentBounds.height;
+
+    let calculatedSize = defaultSize;
+    let absoluteParentLimit = isHorizontal ? parentWidth : parentHeight;
+    
+    // Fallback Routing: Use the user's custom maxSize if defined, otherwise go full parent boundary length
+    let dynamicMaxLimit = maxSize !== undefined ? Math.min(maxSize, absoluteParentLimit) : absoluteParentLimit;
+
+    switch (placement) {
+      case 'right': 
+        calculatedSize = e.clientX - parentBounds.left;
+        break;
+      case 'left': 
+        calculatedSize = parentBounds.right - e.clientX;
+        break;
+      case 'bottom': 
+        calculatedSize = e.clientY - parentBounds.top;
+        break;
+      case 'top': 
+        calculatedSize = parentBounds.bottom - e.clientY;
+        break;
+    }
+
+    // 1. Lower Close Snap-Zone Audit
+    if (calculatedSize < CLOSE_SNAP_THRESHOLD) {
+      setPanelSize(0);
+      setIsCollapsed(true);
+      return;
+    }
+
+    // 2. Upper Max Snap-Zone Audit
+    if (calculatedSize > dynamicMaxLimit - MAX_SNAP_THRESHOLD) {
+      setPanelSize(dynamicMaxLimit);
+      setIsCollapsed(false);
+      return;
+    }
+
+    // 3. Guardrails Path Routing
+    setIsCollapsed(false);
+    if (calculatedSize < minSize) {
+      setPanelSize(minSize);
+    } else if (calculatedSize > dynamicMaxLimit) {
+      setPanelSize(dynamicMaxLimit);
+    } else {
+      setPanelSize(calculatedSize);
+    }
+  }, [isResizing, placement, minSize, maxSize, defaultSize, isHorizontal]);
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', resize);
+      window.addEventListener('mouseup', stopResizing);
+      document.body.style.cursor = cursorStyle;
+      document.body.style.userSelect = 'none';
+    } else {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResizing);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isResizing, resize, stopResizing, cursorStyle]);
+
+  const currentRenderSize = isCollapsed ? 0 : panelSize;
+  
+  // FIXED SYNC: Stripped the Tailwind transition utility class line to make sizing responsive instantly
+  const sizeStyle = isHorizontal 
+    ? { width: `${currentRenderSize}px` } 
+    : { height: `${currentRenderSize}px` };
+
+  const getHandleInlineStyles = (): React.CSSProperties => {
+    const trackBoxPaddingSize = 12; 
+    const centerOffset = -(trackBoxPaddingSize / 2);
+
+    const baseStyles: React.CSSProperties = {
+      position: 'absolute',
+      zIndex: 50,
+      cursor: cursorStyle,
+      pointerEvents: 'all',
+      backgroundColor: 'transparent',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      userSelect: 'none'
+    };
+
+    if (placement === 'right') {
+      return { ...baseStyles, top: 0, bottom: 0, width: `${trackBoxPaddingSize}px`, left: `${currentRenderSize + centerOffset}px` };
+    }
+    if (placement === 'left') {
+      return { ...baseStyles, top: 0, bottom: 0, width: `${trackBoxPaddingSize}px`, left: `${centerOffset}px` };
+    }
+    if (placement === 'bottom') {
+      return { ...baseStyles, left: 0, right: 0, height: `${trackBoxPaddingSize}px`, top: `${currentRenderSize + centerOffset}px`, flexDirection: 'column' };
+    }
+    return { ...baseStyles, left: 0, right: 0, height: `${trackBoxPaddingSize}px`, top: `${centerOffset}px`, flexDirection: 'column' };
+  };
+
+  const lineClasses = isHorizontal 
+    ? `w-[2px] h-full ${isResizing || isHovered ? 'bg-vsc-accent' : 'bg-vsc-border'}`
+    : `h-[2px] w-full ${isResizing || isHovered ? 'bg-vsc-accent' : 'bg-vsc-border'}`;
+
+  return (
+    <div 
+      ref={panelRef}
+      className="relative shrink-0"
+      style={sizeStyle}
+    >
+      {!isCollapsed && (
+        <div className="w-full h-full overflow-hidden">
+          {children}
+        </div>
+      )}
+
+      {/* Draggable Handle Track Rail */}
+      <div
+        onMouseDown={startResizing}
+        onDoubleClick={handleDoubleClickReset}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={getHandleInlineStyles()}
+      >
+        <div className={lineClasses} />
+      </div>
+    </div>
+  );
+}

package/src/components/resizable/index.ts

@@ -0,0 +1 @@
+export { default as ResizablePanel } from './ResizablePanel';

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

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import SearchInput from './SearchInput';
+import { SearchResultItem } from './types';
+import Button from '../button/Button';
+
+const meta: Meta<typeof SearchInput> = {
+    title: 'Inputs/VoxelSearchInputSuite',
+    component: SearchInput,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+
+const MOCK_DATASET: SearchResultItem[] = [
+    { id: '1', title: '#TRK-771239', subtitle: 'Consignee: Sarah Jenkins Logistics • Gross Wt: 24.5kg', category: 'In Transit' },
+    { id: '2', title: '#TRK-771242', subtitle: 'Consignee: Elena Rostova Import LLC • Gross Wt: 8.2kg', category: 'Delivered' },
+    { id: '3', title: '#TRK-661041', subtitle: 'Consignee: David Chang Distributions • Gross Wt: 114kg', category: 'Delayed' }
+];
+
+const MultiSearchWorkspace = () => {
+    const [simpleQuery, setSimpleQuery] = useState<string>('');
+    const [floatQuery, setSimpleFloatQuery] = useState<string>('');
+    const [menuQuery, setSimpleMenuQuery] = useState<string>('');
+
+    // Local matching array filtering down lines for the menu dropdown display logic loop
+    const filteredMenuResults = MOCK_DATASET.filter(item =>
+        item.title.toLowerCase().includes(menuQuery.toLowerCase()) ||
+        item.subtitle?.toLowerCase().includes(menuQuery.toLowerCase())
+    );
+
+
+    const ResultPanel = () => {
+        return (
+            <div className="flex flex-row items-center justify-between">
+                <div>Showing {filteredMenuResults.length} Manifest records</div>
+                <Button size='xs' color='primary' onClick={() => alert("Show more result clicked")}>View More</Button>
+            </div>
+        )
+    }
+
+    return (
+        <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">
+                <p className="text-[10px] font-bold text-vsc-muted uppercase tracking-wider">1. Simple Matrix Variant with Count Log</p>
+                <SearchInput
+                    variant="simple"
+                    value={simpleQuery}
+                    onChange={setSimpleQuery}
+                    resultsCount={simpleQuery ? 14 : 0}
+                    placeholder="Type track ID to evaluate records count..."
+                    resultIndicatorPanel={<ResultPanel />}
+                />
+            </div>
+
+            {/* 2. Float Expandable Bracket */}
+            <div className="space-y-1.5 flex flex-col items-start">
+                <p className="text-[10px] font-bold text-vsc-muted uppercase tracking-wider">2. Float Icon Variant (Expands on Click Header Line)</p>
+                <SearchInput
+                    variant="float"
+                    value={floatQuery}
+                    onChange={setSimpleFloatQuery}
+                    placeholder="Expandable terminal search..."
+                    showFloatPeek
+                    resultIndicatorPanel={<ResultPanel />}
+                />
+            </div>
+
+            {/* 3. Dropdown Menu Variant Bracket */}
+            <div className="space-y-1.5">
+                <p className="text-[10px] font-bold text-vsc-muted uppercase tracking-wider">3. Dropdown Menu Variant (Type '#TRK' to open overlay rows)</p>
+                <SearchInput
+                    variant="menu"
+                    value={menuQuery}
+                    onChange={setSimpleMenuQuery}
+                    menuResults={filteredMenuResults}
+                    onResultClick={(item) => alert(`Selected manifest tracking entity node: ${item.title}`)}
+                    onViewMoreClick={() => alert('View more clicked! Redirecting system scope path to Item Statuses grid tab board.')}
+                />
+            </div>
+
+        </div>
+    );
+};
+
+export const CompleteSearchSuiteDemo: StoryObj = {
+    render: () => <MultiSearchWorkspace />,
+};

package/src/components/search/SearchInput.tsx

@@ -0,0 +1,254 @@
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
+import { SearchInputProps } 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
+}
+
+export default function SearchInput({
+    variant = 'simple',
+    value,
+    onChange,
+    onClear,
+    placeholder = 'Search manifests or tracking codes...',
+    resultsCount = 0,
+    menuResults = [],
+    onResultClick,
+    onViewMoreClick,
+    className = '',
+    showFloatPeek = false, // Optional feature flag default boundary
+    resultIndicatorPanel
+}: AdvancedSearchInputProps) {
+    const [isExpanded, setIsExpanded] = useState<boolean>(false);
+    const [isMenuOpen, setIsMenuOpen] = 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)) {
+                setIsMenuOpen(false);
+                if (variant === 'float' && value === '') {
+                    setIsExpanded(false);
+                }
+            }
+        };
+        window.addEventListener('mousedown', handleOutsideClick);
+        return () => window.removeEventListener('mousedown', handleOutsideClick);
+    }, [variant, value]);
+
+    const handleClearTrigger = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange('');
+        if (onClear) onClear();
+        if (inputRef.current) inputRef.current.focus();
+    };
+
+    const handleFloatActivation = () => {
+        setIsExpanded(true);
+        setTimeout(() => inputRef.current?.focus(), 50);
+    };
+
+    const baseWrapper = "relative flex flex-col font-sans text-xs select-none";
+
+    // --- 1. SIMPLE VARIANT PANEL ---
+    if (variant === 'simple') {
+        const hasResults = resultsCount > 0 && value.length > 0;
+
+        return (
+            <div className={`relative ${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" />
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={value}
+                        onChange={(e) => onChange(e.target.value)}
+                        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"
+                    />
+                    {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>
+                    )}
+                </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-10 overflow-hidden transition-all duration-200 cubic-bezier(0.34, 1.56, 0.64, 1) ${!hasResults ? 'pointer-events-none' : ''}`}
+                    style={{
+                        height: hasResults ? 'auto' : '0px',
+                        opacity: hasResults ? 1 : 0,
+                        transform: hasResults ? 'translateY(0px)' : 'translateY(-4px)'
+                    }}
+                >
+                    <div className="bg-vsc-sidebar shadow-sm p-1.5 pt-1 ">
+                        {
+                            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>
+                </div>
+            </div>
+        );
+    }
+
+    // --- 2. FLOAT EXPANDABLE VARIANT ---
+    if (variant === 'float') {
+        const showPeekIndicator = showFloatPeek && resultsCount > 0 && value.length > 0;
+        return (
+            <div ref={containerRef} className={`${baseWrapper} ${className}`.trim()}>
+                <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'
+                        }`}
+                >
+                    {isExpanded || value ? (
+                        <div className="relative flex items-center w-full h-full">
+                            <Search size={14} className="text-vsc-text shrink-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"
+                            />
+                            {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>
+                            )}
+                        </div>
+                    ) : (
+                        <Button
+                            iconOnly={true}
+                            size="sm"
+                            icon={Search}
+                            onClick={handleFloatActivation}
+                            color="ghost"
+                            className="text-vsc-muted hover:text-vsc-text transition-colors"
+                            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
+                    }}
+                >
+                    <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>
+            </div>
+        );
+    }
+
+    // --- 3. MENU STYLE SEARCH DROPDOWN ---
+    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" />
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={value}
+                    onChange={(e) => {
+                        onChange(e.target.value);
+                        setIsMenuOpen(true);
+                    }}
+                    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"
+                />
+                {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>
+                )}
+            </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>
+            )}
+        </div>
+    );
+}

package/src/components/search/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchInput } from './SearchInput';
+export * from './types';

package/src/components/search/types.ts

@@ -0,0 +1,21 @@
+export type SearchVariant = 'simple' | 'float' | 'menu';
+
+export interface SearchResultItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  category?: string;
+}
+
+export interface SearchInputProps {
+  variant?: SearchVariant;
+  value: string;
+  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
+  onResultClick?: (item: SearchResultItem) => void;
+  onViewMoreClick?: () => void;
+  className?: string;
+}

package/src/components/tabs/TabButton.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTab } from './useTab';
+import { TabVariant } from './types';
+
+interface TabButtonProps {
+  id: string;
+  scopeName: string;
+  children: React.ReactNode;
+  variant?: TabVariant;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+}
+
+export default function TabButton({
+  id,
+  scopeName,
+  children,
+  variant = 'underline',
+  startIcon,
+  endIcon
+}: TabButtonProps) {
+  const { activeTab, changeTab } = useTab(scopeName);
+  const isCurrent = activeTab === id;
+
+  const baseStyles = "flex items-center justify-center gap-1.5 focus:outline-none border-none outline-none z-10 transition-colors select-none h-full";
+
+  const variantClasses: Record<TabVariant, string> = {
+    underline: `pb-2 pt-1 px-3 text-xs font-semibold cursor-pointer border-b-2 ${
+      isCurrent ? 'border-vsc-accent text-vsc-text' : 'border-transparent text-vsc-muted hover:text-vsc-text'
+    }`,
+    'sliding-underline': `py-2 px-4 text-xs font-semibold cursor-pointer transition-colors duration-200 ${
+      isCurrent ? 'text-vsc-text font-bold' : 'text-vsc-muted hover:text-vsc-text'
+    }`,
+    pill: `px-3.5 py-1.5 text-xs font-bold rounded-full cursor-pointer scale-100 ${
+      isCurrent ? 'bg-vsc-accent text-vsc-button-text shadow-sm' : 'bg-vsc-hover/40 text-vsc-muted hover:bg-vsc-hover'
+    }`,
+    vscode: `px-4 text-xs font-medium border-r border-vsc-border cursor-pointer ${
+      isCurrent ? 'bg-vsc-bg text-vsc-text border-t-2 border-t-vsc-accent -mt-[1px]' : 'bg-vsc-sidebar text-vsc-muted hover:bg-vsc-hover/50'
+    }`,
+    ghost: `px-3 py-1.5 text-xs font-semibold rounded cursor-pointer ${
+      isCurrent ? 'bg-vsc-hover text-vsc-text font-bold' : 'text-vsc-muted hover:bg-vsc-hover/30'
+    }`
+  };
+
+  return (
+    <button
+      data-id={id}
+      onClick={() => changeTab(id)}
+      className={`${baseStyles} ${variantClasses[variant]}`}
+    >
+      {startIcon && <span className="shrink-0 opacity-80">{startIcon}</span>}
+      <span className="truncate">{children}</span>
+      {endIcon && <span className="shrink-0 opacity-70">{endIcon}</span>}
+    </button>
+  );
+}