@gv-tech/design-system 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Garcia Ventures react design system",
   "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "license": "MIT",
@@ -83,7 +83,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "4",
+    "@tailwindcss/postcss": "4.1.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -91,10 +91,10 @@
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.563.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "^9.13.0",
+    "react-day-picker": "^9.13.2",
     "react-hook-form": "^7.71.1",
     "react-icons": "^5.5.0",
-    "react-resizable-panels": "^4.6.0",
+    "react-resizable-panels": "^4.6.2",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
@@ -102,17 +102,17 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eng618/prettier-config": "^2.6.0",
+    "@eng618/prettier-config": "^2.7.0",
     "@gv-tech/eslint-config": "^0.1.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.13",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
     "@vitejs/plugin-react-swc": "^4.2.3",
     "axe-core": "^4.11.1",
     "eslint": "^10.0.0",
@@ -129,7 +129,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-is": "^19.2.4",
-    "tailwindcss": "4",
+    "tailwindcss": "4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "7.3.1",

package/release-please-config.json

@@ -0,0 +1,36 @@
+{
+  "packages": {
+    ".": {
+      "release-type": "node",
+      "changelog-sections": [
+        {
+          "type": "feat",
+          "section": "Features"
+        },
+        {
+          "type": "fix",
+          "section": "Bug Fixes"
+        },
+        {
+          "type": "docs",
+          "section": "Documentation",
+          "hidden": false
+        },
+        {
+          "type": "perf",
+          "section": "Performance Improvements"
+        },
+        {
+          "type": "refactor",
+          "section": "Code Refactoring",
+          "hidden": true
+        },
+        {
+          "type": "chore",
+          "section": "Miscellaneous Chores",
+          "hidden": true
+        }
+      ]
+    }
+  }
+}

package/src/App.tsx

@@ -11,6 +11,15 @@ import {
   BreadcrumbSeparator,
 } from './components/ui/breadcrumb';
 import { ScrollArea } from './components/ui/scroll-area';
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Search,
+  SearchTrigger,
+} from './components/ui/search';
 import { Toaster as SonnerToaster } from './components/ui/sonner';
 import { ThemeToggle } from './components/ui/theme-toggle';
 import { Toaster } from './components/ui/toaster';
@@ -50,6 +59,7 @@ import {
   RadioGroupDocs,
   ResizableDocs,
   ScrollAreaDocs,
+  SearchDocs,
   SelectDocs,
   SeparatorDocs,
   SheetDocs,
@@ -69,6 +79,7 @@ import {
 
 function App() {
   const [activeItem, setActiveItem] = React.useState('getting-started');
+  const [searchOpen, setSearchOpen] = React.useState(false);
 
   const renderContent = () => {
     switch (activeItem) {
@@ -167,6 +178,8 @@ function App() {
         return <ContextMenuDocs />;
       case 'command':
         return <CommandDocs />;
+      case 'search':
+        return <SearchDocs />;
       case 'sheet':
         return <SheetDocs />;
       case 'drawer':
@@ -218,6 +231,26 @@ function App() {
                 </BreadcrumbList>
               </Breadcrumb>
               <div className="flex items-center gap-2">
+                <Search open={searchOpen} onOpenChange={setSearchOpen}>
+                  <CommandInput placeholder="Type a command or search..." />
+                  <CommandList>
+                    <CommandEmpty>No results found.</CommandEmpty>
+                    <CommandGroup heading="Components">
+                      {navItems.map((item) => (
+                        <CommandItem
+                          key={item.id}
+                          onSelect={() => {
+                            setActiveItem(item.id);
+                            setSearchOpen(false);
+                          }}
+                        >
+                          {item.label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Search>
+                <SearchTrigger onClick={() => setSearchOpen(true)} />
                 <ThemeToggle variant="ternary" />
               </div>
             </header>

package/src/components/docs/Sidebar.tsx

@@ -93,6 +93,7 @@ export const navItems: NavItem[] = [
   { id: 'dropdown-menu', label: 'Dropdown Menu', category: 'overlay' },
   { id: 'context-menu', label: 'Context Menu', category: 'overlay' },
   { id: 'command', label: 'Command', category: 'overlay' },
+  { id: 'search', label: 'Search', category: 'overlay' },
   { id: 'sheet', label: 'Sheet', category: 'overlay' },
   { id: 'drawer', label: 'Drawer', category: 'overlay' },
 
@@ -107,6 +108,15 @@ export const navItems: NavItem[] = [
 
 export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
   const categories = Object.keys(categoryConfig) as ComponentCategory[];
+  const [expandedCategories, setExpandedCategories] = React.useState<string[]>(['getting-started', 'forms']);
+
+  // Ensure the category of the active item is expanded
+  React.useEffect(() => {
+    const activeNavItem = navItems.find((item) => item.id === activeItem);
+    if (activeNavItem && !expandedCategories.includes(activeNavItem.category)) {
+      setExpandedCategories((prev) => [...prev, activeNavItem.category]);
+    }
+  }, [activeItem, expandedCategories]);
 
   return (
     <div className="w-64 border-r bg-muted/50 flex flex-col h-full">
@@ -116,7 +126,12 @@ export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
       </div>
       <ScrollArea className="flex-1">
         <nav className="p-2">
-          <Accordion type="multiple" defaultValue={['getting-started', 'forms']} className="w-full space-y-1">
+          <Accordion
+            type="multiple"
+            value={expandedCategories}
+            onValueChange={setExpandedCategories}
+            className="w-full space-y-1"
+          >
             {categories.map((category) => {
               const config = categoryConfig[category];
               const items = navItems.filter((item) => item.category === category);

package/src/components/ui/search.test.tsx

@@ -0,0 +1,75 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Search, SearchTrigger } from './search';
+
+// Mock CommandDialog since it uses Radix Dialog which might need a portal
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) => (open ? <div>{children}</div> : null),
+  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogPortal: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogOverlay: () => null,
+}));
+
+describe('Search', () => {
+  it('renders search trigger', () => {
+    render(<SearchTrigger />);
+    expect(screen.getByText('Search docs...')).toBeInTheDocument();
+  });
+
+  it('opens search dialog when trigger is clicked (controlled)', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Search open={false} onOpenChange={onOpenChange}>
+        <CommandInput placeholder="Search..." />
+      </Search>,
+    );
+
+    // The dialog should be closed initially
+    expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
+  });
+
+  it('responds to keyboard shortcuts', () => {
+    render(
+      <Search>
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandItem>Result 1</CommandItem>
+        </CommandList>
+      </Search>,
+    );
+
+    // Simulate Cmd+K
+    fireEvent.keyDown(document, { key: 'k', metaKey: true });
+
+    // Check if dialog content is visible
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('filters results correctly', () => {
+    render(
+      <Search open={true}>
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandGroup heading="Components">
+            <SearchItem>Button</SearchItem>
+            <SearchItem>Input</SearchItem>
+          </CommandGroup>
+        </CommandList>
+      </Search>,
+    );
+
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.change(input, { target: { value: 'But' } });
+
+    expect(screen.getByText('Button')).toBeInTheDocument();
+    // cmdk removes non-matching items from the DOM
+    expect(screen.queryByText('Input')).not.toBeInTheDocument();
+  });
+});
+
+// Helper component for testing
+function SearchItem({ children }: { children: React.ReactNode }) {
+  return <CommandItem>{children}</CommandItem>;
+}

package/src/components/ui/search.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+import { Search as SearchIcon } from 'lucide-react';
+import * as React from 'react';
+
+export interface SearchProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function Search({ children, open: customOpen, onOpenChange }: SearchProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const isControlled = customOpen !== undefined;
+  const isOpen = isControlled ? customOpen : open;
+
+  const setIsOpen = React.useCallback(
+    (value: boolean | ((prev: boolean) => boolean)) => {
+      if (isControlled) {
+        const nextValue = typeof value === 'function' ? value(isOpen) : value;
+        onOpenChange?.(nextValue);
+      } else {
+        setOpen(value);
+      }
+    },
+    [isControlled, isOpen, onOpenChange],
+  );
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, [setIsOpen]);
+
+  return (
+    <CommandDialog open={isOpen} onOpenChange={setIsOpen}>
+      {children}
+    </CommandDialog>
+  );
+}
+
+export interface SearchTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  placeholder?: string;
+  variant?: 'default' | 'compact';
+}
+
+export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerProps>(
+  ({ className, placeholder = 'Search docs...', variant = 'default', ...props }, ref) => {
+    return (
+      <Button
+        variant="outline"
+        className={cn(
+          'relative h-9 text-sm text-muted-foreground transition-all transition-colors',
+          variant === 'default'
+            ? 'w-full justify-start sm:pr-12 md:w-40 lg:w-64'
+            : 'w-9 justify-center px-0 sm:w-24 sm:justify-start sm:px-3 sm:pr-12',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        <span className="inline-flex items-center gap-2">
+          <SearchIcon className="h-4 w-4 shrink-0" />
+          {variant === 'default' && <span className="truncate">{placeholder}</span>}
+        </span>
+        <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </Button>
+    );
+  },
+);
+SearchTrigger.displayName = 'SearchTrigger';
+
+export { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };

package/src/components/ui/theme-toggle.tsx

@@ -72,7 +72,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className={cn('h-9 w-9', className)}>
+          <Button variant="ghost" size="icon" className={cn('relative h-9 w-9', className)}>
             <IconToggle />
           </Button>
         </DropdownMenuTrigger>
@@ -98,7 +98,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
     <Button
       variant="ghost"
       size="icon"
-      className={cn('h-9 w-9', className)}
+      className={cn('relative h-9 w-9', className)}
       onClick={() => handleThemeChange(currentTheme === 'dark' ? 'light' : 'dark')}
       aria-label="Toggle theme"
     >

package/src/pages/components/SearchDocs.tsx

@@ -0,0 +1,194 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Search,
+  SearchTrigger,
+} from '@/components/ui/search';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+export function SearchDocs() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <ComponentSection title="Search" description="A searchable command palette for navigation and actions.">
+      <ComponentShowcase
+        title="Quick Search"
+        description="A shortcut-ready search trigger for headers. Press Cmd+K or Ctrl+K to open."
+        code={`<Search>
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search Emoji</CommandItem>
+      <CommandItem>Calculator</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Search>
+<SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />`}
+      >
+        <div className="flex items-center gap-4">
+          <Search open={open} onOpenChange={setOpen}>
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                <CommandItem
+                  onSelect={() => {
+                    toast.success('Selected Calendar');
+                    setOpen(false);
+                  }}
+                >
+                  Calendar
+                </CommandItem>
+                <CommandItem
+                  onSelect={() => {
+                    toast.success('Selected Search Emoji');
+                    setOpen(false);
+                  }}
+                >
+                  Search Emoji
+                </CommandItem>
+                <CommandItem
+                  onSelect={() => {
+                    toast.success('Selected Calculator');
+                    setOpen(false);
+                  }}
+                >
+                  Calculator
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Search>
+          <SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />
+          <p className="text-sm text-muted-foreground">Try clicking the trigger or pressing ⌘K</p>
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Compact Variant"
+        description="A smaller version of the trigger, ideal for dense headers or mobile-first layouts."
+        code={`<SearchTrigger variant="compact" />`}
+      >
+        <div className="flex items-center gap-4">
+          <SearchTrigger variant="compact" onClick={() => setOpen(true)} />
+          <p className="text-sm text-muted-foreground">Compact trigger showing only icon and shortcut</p>
+        </div>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Search Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'open',
+              type: 'boolean',
+              required: false,
+              description: 'Whether the search dialog is open.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              required: false,
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'children',
+              type: 'ReactNode',
+              required: false,
+              description: 'The search content (CommandInput, CommandList, etc.).',
+            },
+          ]}
+        />
+      </div>
+
+      <div className="mt-8 space-y-4">
+        <h3 className="text-xl font-semibold">SearchTrigger Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              required: false,
+              description: 'Additional CSS classes to apply.',
+            },
+            {
+              name: 'onClick',
+              type: 'MouseEventHandler',
+              required: false,
+              description: 'Click event handler to trigger the search.',
+            },
+            {
+              name: 'placeholder',
+              type: 'string',
+              defaultValue: '"Search docs..."',
+              required: false,
+              description: 'The placeholder text to display in the trigger.',
+            },
+            {
+              name: 'variant',
+              type: '"default" | "compact"',
+              defaultValue: '"default"',
+              required: false,
+              description: 'The visual style of the trigger.',
+            },
+          ]}
+        />
+      </div>
+
+      <div className="mt-12 space-y-6">
+        <div>
+          <h3 className="text-xl font-semibold">Integrations</h3>
+          <p className="mt-2 text-muted-foreground">
+            The Search component is designed to be highly composable, making it easy to integrate with external search
+            providers like Algolia, ElasticSearch, or custom APIs.
+          </p>
+        </div>
+
+        <div className="rounded-lg border bg-muted/50 p-6">
+          <h4 className="font-medium">External Provider Pattern</h4>
+          <p className="mt-1 text-sm text-muted-foreground">
+            You can use the `onValueChange` prop of `CommandInput` to trigger external searches and dynamically render
+            `CommandGroup` and `CommandItem` components with the results.
+          </p>
+          <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
+            <code>{`const [results, setResults] = React.useState([]);
+
+const handleSearch = async (query) => {
+  const data = await algoliaIndex.search(query);
+  setResults(data.hits);
+};
+
+return (
+  <Search>
+    <CommandInput 
+      placeholder="Search docs..." 
+      onValueChange={handleSearch} 
+    />
+    <CommandList>
+      {results.length > 0 ? (
+        <CommandGroup heading="Results">
+          {results.map((hit) => (
+            <CommandItem key={hit.objectID}>
+              {hit.title}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      ) : (
+        <CommandEmpty>No results found.</CommandEmpty>
+      )}
+    </CommandList>
+  </Search>
+);`}</code>
+          </pre>
+        </div>
+      </div>
+    </ComponentSection>
+  );
+}

package/src/pages/components/ThemeToggleDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { useState } from 'react';
 
@@ -45,6 +46,77 @@ export function ThemeToggleDocs() {
           <p className="text-sm font-medium">Current Selection: {customTheme}</p>
         </div>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">ThemeToggle Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'variant',
+              type: '"binary" | "ternary"',
+              defaultValue: '"binary"',
+              required: false,
+              description:
+                "The toggle behavior. 'binary' switches between light/dark, while 'ternary' includes system.",
+            },
+            {
+              name: 'onThemeChange',
+              type: '(theme: string) => void',
+              required: false,
+              description: 'Optional callback for custom theme management logic.',
+            },
+            {
+              name: 'customTheme',
+              type: 'string',
+              required: false,
+              description: 'Overrides the internal theme detection (useful for previews or external control).',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              required: false,
+              description: 'Additional CSS classes for the toggle button.',
+            },
+          ]}
+        />
+      </div>
+
+      <div className="mt-12 space-y-6">
+        <div>
+          <h3 className="text-xl font-semibold">Integration</h3>
+          <p className="mt-2 text-muted-foreground">
+            The `ThemeToggle` component is built to be flexible and works seamlessly with `next-themes` by default, but
+            it can also be used in a fully controlled manner with any theme provider or custom state.
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <div className="rounded-lg border bg-muted/50 p-6">
+            <h4 className="font-medium text-foreground">With next-themes</h4>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Simply drop the component anywhere. It will automatically detect the `ThemeProvider` and handle switching.
+            </p>
+            <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
+              <code>{`<ThemeProvider attribute="class">
+  <ThemeToggle />
+</ThemeProvider>`}</code>
+            </pre>
+          </div>
+
+          <div className="rounded-lg border bg-muted/50 p-6">
+            <h4 className="font-medium text-foreground">Custom Provider</h4>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Pass your own theme state and change handler to integrate with custom logic or external storage.
+            </p>
+            <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
+              <code>{`<ThemeToggle 
+  customTheme={myTheme} 
+  onThemeChange={(t) => updateMyTheme(t)} 
+/>`}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/index.ts

@@ -34,6 +34,7 @@ export { ProgressDocs } from './components/ProgressDocs';
 export { RadioGroupDocs } from './components/RadioGroupDocs';
 export { ResizableDocs } from './components/ResizableDocs';
 export { ScrollAreaDocs } from './components/ScrollAreaDocs';
+export { SearchDocs } from './components/SearchDocs';
 export { SelectDocs } from './components/SelectDocs';
 export { SeparatorDocs } from './components/SeparatorDocs';
 export { SheetDocs } from './components/SheetDocs';