@thangnqdev/ui 0.1.2 → 0.2.0

package/src/navigation/CommandPalette.tsx

@@ -1,142 +1,142 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Search } from 'lucide-react';
-import { Portal } from '../overlays/Portal';
-import { FocusTrap } from '../overlays/FocusTrap';
-import { Kbd } from '../typography/Kbd';
-import { cn } from '../utils/cn';
-
-export interface CommandItem {
-  id: string;
-  title: string;
-  category?: string;
-  icon?: React.ReactNode;
-  shortcut?: string;
-  onSelect: () => void;
-}
-
-export interface CommandPaletteProps {
-  isOpen: boolean;
-  onClose: () => void;
-  items: CommandItem[];
-  placeholder?: string;
-}
-
-export function CommandPalette({
-  isOpen,
-  onClose,
-  items,
-  placeholder = 'Type a command or search...',
-}: CommandPaletteProps) {
-  const [query, setQuery] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const filteredItems = items.filter((item) =>
-    item.title.toLowerCase().includes(query.toLowerCase()) ||
-    item.category?.toLowerCase().includes(query.toLowerCase())
-  );
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [query]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      setQuery('');
-      setSelectedIndex(0);
-      return;
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setSelectedIndex((prev) => (prev < filteredItems.length - 1 ? prev + 1 : 0));
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : filteredItems.length - 1));
-      } else if (e.key === 'Enter') {
-        e.preventDefault();
-        if (filteredItems[selectedIndex]) {
-          filteredItems[selectedIndex].onSelect();
-          onClose();
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, filteredItems, selectedIndex, onClose]);
-
-  if (!isOpen) return null;
-
-  return (
-    <Portal>
-      <FocusTrap active={isOpen}>
-        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 p-4 sm:p-6">
-          {/* Backdrop */}
-          <div
-            aria-hidden="true"
-            onClick={onClose}
-            className="fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
-          />
-
-          {/* Palette Box */}
-          <div className="relative w-full max-w-xl rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-2xl overflow-hidden z-10 animate-in zoom-in-95 duration-150">
-            {/* Search Bar */}
-            <div className="flex items-center px-4 py-3 border-b border-[var(--ui-border-subtle)] gap-3">
-              <Search className="w-5 h-5 text-[var(--ui-text-muted)]" />
-              <input
-                type="text"
-                autoFocus
-                placeholder={placeholder}
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                className="flex-1 bg-transparent text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] focus:outline-none"
-              />
-              <Kbd>ESC</Kbd>
-            </div>
-
-            {/* List items */}
-            <div className="max-h-80 overflow-y-auto p-2">
-              {filteredItems.length === 0 ? (
-                <div className="py-8 text-center text-xs text-[var(--ui-text-muted)]">
-                  No commands found matching "{query}".
-                </div>
-              ) : (
-                filteredItems.map((item, idx) => {
-                  const isSelected = idx === selectedIndex;
-                  return (
-                    <div
-                      key={item.id}
-                      onClick={() => {
-                        item.onSelect();
-                        onClose();
-                      }}
-                      onMouseEnter={() => setSelectedIndex(idx)}
-                      className={cn(
-                        'flex items-center gap-3 px-3 py-2.5 rounded-[var(--ui-radius-md)] cursor-pointer text-xs font-medium transition-colors',
-                        isSelected
-                          ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]'
-                          : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
-                      )}
-                    >
-                      {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
-                      <span className="flex-1 truncate">{item.title}</span>
-                      {item.category && (
-                        <span className={cn('text-[10px] uppercase font-semibold tracking-wider opacity-70', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')}>
-                          {item.category}
-                        </span>
-                      )}
-                      {item.shortcut && <Kbd>{item.shortcut}</Kbd>}
-                    </div>
-                  );
-                })
-              )}
-            </div>
-          </div>
-        </div>
-      </FocusTrap>
-    </Portal>
-  );
-}
+import React, { useState, useEffect, useRef } from 'react';
+import { Search } from 'lucide-react';
+import { Portal } from '../overlays/Portal';
+import { FocusTrap } from '../overlays/FocusTrap';
+import { Kbd } from '../typography/Kbd';
+import { cn } from '../utils/cn';
+
+export interface CommandItem {
+  id: string;
+  title: string;
+  category?: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect: () => void;
+}
+
+export interface CommandPaletteProps {
+  isOpen: boolean;
+  onClose: () => void;
+  items: CommandItem[];
+  placeholder?: string;
+}
+
+export function CommandPalette({
+  isOpen,
+  onClose,
+  items,
+  placeholder = 'Type a command or search...',
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const filteredItems = items.filter((item) =>
+    item.title.toLowerCase().includes(query.toLowerCase()) ||
+    item.category?.toLowerCase().includes(query.toLowerCase())
+  );
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setQuery('');
+      setSelectedIndex(0);
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev < filteredItems.length - 1 ? prev + 1 : 0));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : filteredItems.length - 1));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (filteredItems[selectedIndex]) {
+          filteredItems[selectedIndex].onSelect();
+          onClose();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, filteredItems, selectedIndex, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <Portal>
+      <FocusTrap active={isOpen}>
+        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 p-4 sm:p-6">
+          {/* Backdrop */}
+          <div
+            aria-hidden="true"
+            onClick={onClose}
+            className="fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
+          />
+
+          {/* Palette Box */}
+          <div className="relative w-full max-w-xl rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-2xl overflow-hidden z-10 animate-in zoom-in-95 duration-150">
+            {/* Search Bar */}
+            <div className="flex items-center px-4 py-3 border-b border-[var(--ui-border-subtle)] gap-3">
+              <Search className="w-5 h-5 text-[var(--ui-text-muted)]" />
+              <input
+                type="text"
+                autoFocus
+                placeholder={placeholder}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="flex-1 bg-transparent text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] focus:outline-none"
+              />
+              <Kbd>ESC</Kbd>
+            </div>
+
+            {/* List items */}
+            <div className="max-h-80 overflow-y-auto p-2">
+              {filteredItems.length === 0 ? (
+                <div className="py-8 text-center text-xs text-[var(--ui-text-muted)]">
+                  No commands found matching "{query}".
+                </div>
+              ) : (
+                filteredItems.map((item, idx) => {
+                  const isSelected = idx === selectedIndex;
+                  return (
+                    <div
+                      key={item.id}
+                      onClick={() => {
+                        item.onSelect();
+                        onClose();
+                      }}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                      className={cn(
+                        'flex items-center gap-3 px-3 py-2.5 rounded-[var(--ui-radius-md)] cursor-pointer text-xs font-medium transition-colors',
+                        isSelected
+                          ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]'
+                          : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
+                      )}
+                    >
+                      {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+                      <span className="flex-1 truncate">{item.title}</span>
+                      {item.category && (
+                        <span className={cn('text-[10px] uppercase font-semibold tracking-wider opacity-70', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')}>
+                          {item.category}
+                        </span>
+                      )}
+                      {item.shortcut && <Kbd>{item.shortcut}</Kbd>}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        </div>
+      </FocusTrap>
+    </Portal>
+  );
+}