@hilum/ui 0.1.1

package/src/components/combobox.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  statusColor?: string;
+  avatar?: string;
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  className?: string;
+}
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found.",
+  className,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const selectedOption = options.find((o) => o.value === value);
+
+  const filtered =
+    query === ""
+      ? options
+      : options.filter(
+          (o) =>
+            o.label.toLowerCase().includes(query.toLowerCase()) ||
+            o.description?.toLowerCase().includes(query.toLowerCase()),
+        );
+
+  // Close on outside click
+  React.useEffect(() => {
+    function onMouseDown(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, []);
+
+  // Close on Escape
+  React.useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className={cn("relative", className)}>
+      {/* Trigger */}
+      <div className="relative flex items-center">
+        {selectedOption?.avatar && !open && (
+          <div className="pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-taupe-200 caption-xs font-semibold text-taupe-700 shrink-0">
+            {selectedOption.avatar}
+          </div>
+        )}
+        {selectedOption?.statusColor && !open && (
+          <div
+            className="pointer-events-none absolute left-3 size-2 rounded-full shrink-0"
+            style={{ backgroundColor: selectedOption.statusColor }}
+          />
+        )}
+        <input
+          ref={inputRef}
+          type="text"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "flex h-9 w-full rounded-lg border border-taupe-200 bg-white pr-8 body text-taupe-900",
+            "placeholder:text-taupe-400",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/30 focus-visible:border-taupe-400",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            selectedOption?.avatar && !open
+              ? "pl-8"
+              : selectedOption?.statusColor && !open
+                ? "pl-7"
+                : "pl-3",
+          )}
+          placeholder={open ? searchPlaceholder : (selectedOption?.label ?? placeholder)}
+          value={open ? query : (selectedOption?.label ?? "")}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            if (!open) setOpen(true);
+          }}
+          onFocus={() => {
+            setOpen(true);
+            setQuery("");
+          }}
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          className="absolute inset-y-0 right-0 flex items-center px-2 text-taupe-400 hover:text-taupe-700 transition-colors"
+          onClick={() => {
+            if (open) {
+              setOpen(false);
+              setQuery("");
+            } else {
+              setOpen(true);
+              inputRef.current?.focus();
+            }
+          }}
+        >
+          <ChevronsUpDown size={14} />
+        </button>
+      </div>
+
+      {/* Dropdown */}
+      {open && (
+        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-elevated">
+          <ul role="listbox" className="max-h-60 overflow-auto py-1">
+            {filtered.length === 0 ? (
+              <li className="px-3 py-2 body text-taupe-400">{emptyText}</li>
+            ) : (
+              filtered.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  <li
+                    key={option.value}
+                    role="option"
+                    aria-selected={isSelected}
+                    className={cn(
+                      "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
+                      isSelected
+                        ? "bg-brand-primary text-white"
+                        : "text-taupe-900 hover:bg-taupe-50",
+                    )}
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => {
+                      onValueChange?.(option.value);
+                      setQuery("");
+                      setOpen(false);
+                    }}
+                  >
+                    {/* Avatar */}
+                    {option.avatar && (
+                      <div
+                        className={cn(
+                          "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
+                          isSelected ? "bg-white/20 text-white" : "bg-taupe-200 text-taupe-700",
+                        )}
+                      >
+                        {option.avatar}
+                      </div>
+                    )}
+                    {/* Status dot */}
+                    {option.statusColor && !option.avatar && (
+                      <div
+                        className="size-2 shrink-0 rounded-full"
+                        style={{ backgroundColor: option.statusColor }}
+                      />
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <p className={cn("truncate", isSelected && "font-semibold")}>
+                        {option.label}
+                      </p>
+                      {option.description && (
+                        <p
+                          className={cn(
+                            "caption truncate",
+                            isSelected ? "text-white/70" : "text-taupe-400",
+                          )}
+                        >
+                          {option.description}
+                        </p>
+                      )}
+                    </div>
+                    {isSelected && <Check size={14} className="shrink-0" />}
+                  </li>
+                );
+              })
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Combobox };

package/src/components/command-palette.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+import { Search, ArrowRight } from "lucide-react";
+import { Dialog, DialogContent } from "./dialog";
+
+export interface CommandPaletteItem {
+  id?: string | number;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  category?: string;
+  href?: string;
+  onSelect?: () => void;
+}
+
+interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  items: CommandPaletteItem[];
+  placeholder?: string;
+  emptyText?: string;
+}
+
+function CommandPalette({
+  open,
+  onClose,
+  items,
+  placeholder = "Search...",
+  emptyText = "No results found.",
+}: CommandPaletteProps) {
+  const [query, setQuery] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Focus input when opened
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      setQuery("");
+    }
+  }, [open]);
+
+  const filtered =
+    query === ""
+      ? items
+      : items.filter(
+          (item) =>
+            item.label.toLowerCase().includes(query.toLowerCase()) ||
+            item.description?.toLowerCase().includes(query.toLowerCase()) ||
+            item.category?.toLowerCase().includes(query.toLowerCase()),
+        );
+
+  // Group by category
+  const grouped = filtered.reduce<Record<string, CommandPaletteItem[]>>((acc, item) => {
+    const cat = item.category ?? "";
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(item);
+    return acc;
+  }, {});
+
+  const categories = Object.keys(grouped);
+
+  function handleSelect(item: CommandPaletteItem) {
+    if (item.href) {
+      window.location.href = item.href;
+    } else {
+      item.onSelect?.();
+    }
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-xl">
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-taupe-100 px-4">
+          <Search size={16} className="shrink-0 text-taupe-400" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="h-12 flex-1 bg-transparent body text-taupe-900 placeholder:text-taupe-400 focus:outline-none"
+            placeholder={placeholder}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") onClose();
+              if (e.key === "Enter" && filtered.length > 0) handleSelect(filtered[0]);
+            }}
+          />
+          <kbd className="hidden items-center gap-0.5 sm:flex">
+            <span className="caption-xs font-medium text-taupe-400 rounded border border-taupe-200 px-1.5 py-0.5">
+              esc
+            </span>
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-80 overflow-y-auto">
+          {filtered.length === 0 ? (
+            <p className="px-4 py-8 text-center body text-taupe-400">{emptyText}</p>
+          ) : (
+            <ul role="list" className="py-2">
+              {categories.map((cat) => (
+                <li key={cat}>
+                  {cat && <p className="label px-4 py-2 text-taupe-400">{cat}</p>}
+                  {grouped[cat].map((item, i) => (
+                    <button
+                      key={item.id ?? i}
+                      type="button"
+                      className="flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-taupe-50 focus-visible:bg-taupe-50 focus-visible:outline-none"
+                      onClick={() => handleSelect(item)}
+                    >
+                      {item.icon && (
+                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-taupe-200 bg-white text-taupe-500">
+                          {item.icon}
+                        </span>
+                      )}
+                      <div className="min-w-0 flex-1">
+                        <p className="font-medium text-taupe-900 truncate">{item.label}</p>
+                        {item.description && (
+                          <p className="caption text-taupe-400 truncate">{item.description}</p>
+                        )}
+                      </div>
+                      <ArrowRight size={13} className="shrink-0 text-taupe-300" />
+                    </button>
+                  ))}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { CommandPalette };

package/src/components/command.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import * as React from "react";
+import { Search } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface CommandContextValue {
+  query: string;
+  setQuery: React.Dispatch<React.SetStateAction<string>>;
+  onSelect?: (value: string) => void;
+  reportVisible: (id: string, visible: boolean) => void;
+}
+
+const CommandCtx = React.createContext<CommandContextValue>({
+  query: "",
+  setQuery: () => {},
+  reportVisible: () => {},
+});
+
+const CommandVisibleCtx = React.createContext(0);
+
+interface CommandProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  onSelect?: (value: string) => void;
+}
+
+function Command({ className, children, onSelect, ...props }: CommandProps) {
+  const [query, setQuery] = React.useState("");
+  const visibleIds = React.useRef(new Set<string>());
+  const [visibleCount, setVisibleCount] = React.useState(0);
+
+  const reportVisible = React.useCallback((id: string, visible: boolean) => {
+    const had = visibleIds.current.has(id);
+    if (visible && !had) {
+      visibleIds.current.add(id);
+      setVisibleCount(visibleIds.current.size);
+    } else if (!visible && had) {
+      visibleIds.current.delete(id);
+      setVisibleCount(visibleIds.current.size);
+    }
+  }, []);
+
+  return (
+    <CommandCtx.Provider value={{ query, setQuery, onSelect, reportVisible }}>
+      <CommandVisibleCtx.Provider value={visibleCount}>
+        <div
+          className={cn(
+            "flex flex-col overflow-hidden rounded-xl border border-taupe-200 bg-white",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </CommandVisibleCtx.Provider>
+    </CommandCtx.Provider>
+  );
+}
+
+const CommandInput = React.forwardRef<
+  HTMLInputElement,
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">
+>(({ className, ...props }, ref) => {
+  const { query, setQuery } = React.useContext(CommandCtx);
+  return (
+    <div className="flex items-center gap-2 border-b border-taupe-100 px-3">
+      <Search size={14} className="shrink-0 text-taupe-400" />
+      <input
+        ref={ref}
+        type="text"
+        autoComplete="off"
+        autoCorrect="off"
+        spellCheck={false}
+        className={cn(
+          "flex h-10 w-full bg-transparent body text-taupe-900",
+          "placeholder:text-taupe-400 focus:outline-none",
+          className,
+        )}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        {...props}
+      />
+    </div>
+  );
+});
+CommandInput.displayName = "CommandInput";
+
+const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const listRef = React.useRef<HTMLDivElement | null>(null);
+
+    const combinedRef = React.useCallback(
+      (el: HTMLDivElement | null) => {
+        listRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      },
+      [ref],
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (!["ArrowDown", "ArrowUp"].includes(e.key)) return;
+      e.preventDefault();
+      const el = listRef.current;
+      if (!el) return;
+      const items = Array.from(
+        el.querySelectorAll<HTMLElement>("[data-cmd-item]:not([aria-disabled='true'])"),
+      );
+      if (!items.length) return;
+      const focused = el.querySelector<HTMLElement>("[data-cmd-item]:focus");
+      const idx = focused ? items.indexOf(focused) : -1;
+      const next =
+        e.key === "ArrowDown"
+          ? items[Math.min(idx + 1, items.length - 1)]
+          : items[Math.max(idx - 1, 0)];
+      next?.focus();
+    };
+
+    return (
+      <div
+        ref={combinedRef}
+        role="listbox"
+        onKeyDown={handleKeyDown}
+        className={cn("max-h-[300px] overflow-y-auto py-1", className)}
+        {...props}
+      />
+    );
+  },
+);
+CommandList.displayName = "CommandList";
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children = "No results found.", ...props }, ref) => {
+    const visibleCount = React.useContext(CommandVisibleCtx);
+    if (visibleCount > 0) return null;
+    return (
+      <div
+        ref={ref}
+        className={cn("py-6 text-center caption text-taupe-400", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+CommandEmpty.displayName = "CommandEmpty";
+
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  heading?: string;
+}
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
+  ({ className, heading, children, ...props }, ref) => (
+    <div ref={ref} role="group" className={cn("py-1", className)} {...props}>
+      {heading && <p className="px-3 pb-1 pt-0.5 label text-taupe-400">{heading}</p>}
+      {children}
+    </div>
+  ),
+);
+CommandGroup.displayName = "CommandGroup";
+
+interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  value?: string;
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+}
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
+  ({ className, value = "", keywords, disabled, onSelect, children, ...props }, ref) => {
+    const { query, onSelect: ctxOnSelect, reportVisible } = React.useContext(CommandCtx);
+    const id = React.useId();
+
+    const searchText = (keywords ?? [value]).join(" ").toLowerCase();
+    const isVisible = !query || searchText.includes(query.toLowerCase());
+
+    React.useLayoutEffect(() => {
+      reportVisible(id, isVisible && !disabled);
+      return () => reportVisible(id, false);
+    }, [id, isVisible, disabled, reportVisible]);
+
+    if (!isVisible) return null;
+
+    const handleSelect = () => {
+      if (disabled) return;
+      onSelect?.(value);
+      ctxOnSelect?.(value);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="option"
+        aria-selected={false}
+        aria-disabled={disabled || undefined}
+        data-cmd-item
+        tabIndex={disabled ? undefined : 0}
+        className={cn(
+          "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
+          "body text-taupe-700 outline-none transition-colors",
+          "hover:bg-taupe-50 hover:text-taupe-900",
+          "focus:bg-taupe-50 focus:text-taupe-900",
+          disabled && "pointer-events-none opacity-40",
+          className,
+        )}
+        onClick={handleSelect}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleSelect();
+          }
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+CommandItem.displayName = "CommandItem";
+
+const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("my-1 h-px bg-taupe-100", className)} {...props} />
+  ),
+);
+CommandSeparator.displayName = "CommandSeparator";
+
+function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn("ml-auto caption text-taupe-300 tracking-widest font-medium", className)}
+      {...props}
+    />
+  );
+}
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+};