@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

package/src/components/ui/AlertDialog.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Modal, type ModalProps } from "@/components/ui/Modal";
+import { Button, type ButtonProps } from "@/components/ui/Button";
+
+export interface AlertDialogProps extends Omit<ModalProps, "onClose"> {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onConfirm?: () => void | Promise<void>;
+  confirmText?: string;
+  cancelText?: string;
+  confirmProps?: Partial<ButtonProps>;
+  cancelProps?: Partial<ButtonProps>;
+  children?: ReactNode;
+}
+
+export function AlertDialog({
+  isOpen: openProp,
+  onClose,
+  onConfirm,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  confirmProps,
+  cancelProps,
+  children,
+  title,
+  ...modalProps
+}: AlertDialogProps) {
+  const [loading, setLoading] = useState(false);
+  const isOpen = openProp ?? true;
+
+  const handleConfirm = async () => {
+    if (!onConfirm) return;
+    setLoading(true);
+    try { await onConfirm(); } finally { setLoading(false); }
+    onClose?.();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={title}
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" {...cancelProps} onClick={onClose}>{cancelText}</Button>
+          {onConfirm && (
+            <Button variant="primary" loading={loading} {...confirmProps} onClick={handleConfirm}>
+              {confirmText}
+            </Button>
+          )}
+        </div>
+      }
+      {...modalProps}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+AlertDialog.displayName = "AlertDialog";

package/src/components/ui/AppLayout.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { type ReactNode, useState } from "react";
+import { cn } from "@/lib/cn";
+
+export interface AppLayoutProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+  sidebarWidth?: number;
+  className?: string;
+}
+
+export function AppLayout({ sidebar, children, sidebarWidth = 240, className }: AppLayoutProps) {
+  return (
+    <div
+      className={cn("ph-app-layout grid min-h-screen", className)}
+      style={{ gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` }}
+    >
+      <aside className="ph-app-layout__sidebar border-r border-ph-border bg-ph-surface overflow-y-auto">
+        {sidebar}
+      </aside>
+      <main className="ph-app-layout__content min-w-0 overflow-y-auto bg-ph-canvas">
+        {children}
+      </main>
+    </div>
+  );
+}

package/src/components/ui/Autocomplete.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState, useRef, useEffect, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface AutocompleteOption {
+  value: string;
+  label: string;
+}
+
+export interface AutocompleteProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onSelect"> {
+  options: AutocompleteOption[];
+  onSelect?: (option: AutocompleteOption) => void;
+}
+
+export function Autocomplete({
+  options,
+  onSelect,
+  className,
+  value: controlledValue,
+  onChange,
+  placeholder = "Type to search...",
+  ...inputProps
+}: AutocompleteProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = options.filter((o) =>
+    o.label.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleSelect = (opt: AutocompleteOption) => {
+    setSearch(opt.label);
+    setOpen(false);
+    onSelect?.(opt);
+  };
+
+  useEffect(() => {
+    if (!open) { setActiveIndex(-1); return; }
+    const handle = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "ArrowDown") { setActiveIndex((i) => Math.min(i + 1, filtered.length - 1)); e.preventDefault(); }
+      if (e.key === "ArrowUp") { setActiveIndex((i) => Math.max(i - 1, 0)); e.preventDefault(); }
+      if (e.key === "Enter" && activeIndex >= 0) { handleSelect(filtered[activeIndex]); e.preventDefault(); }
+      if (e.key === "Escape") { setOpen(false); }
+    };
+    document.addEventListener("mousedown", handle);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open, filtered, activeIndex]);
+
+  useEffect(() => {
+    if (activeIndex >= 0 && listRef.current) {
+      const el = listRef.current.children[activeIndex] as HTMLElement;
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+
+  return (
+    <div ref={containerRef} className={cn("ph-autocomplete relative", className)}>
+      <input
+        ref={inputRef}
+        type="text"
+        value={search}
+        onChange={(e) => { setSearch(e.target.value); setOpen(true); onChange?.(e); }}
+        onFocus={() => setOpen(true)}
+        placeholder={placeholder}
+        className="ph-input w-full"
+        {...inputProps}
+      />
+      {open && filtered.length > 0 && (
+        <div ref={listRef} className="ph-autocomplete__dropdown" role="listbox">
+          {filtered.map((opt, i) => (
+            <button
+              key={opt.value}
+              type="button"
+              role="option"
+              aria-selected={i === activeIndex}
+              onMouseDown={() => handleSelect(opt)}
+              onMouseEnter={() => setActiveIndex(i)}
+              className={cn(
+                "ph-autocomplete__option",
+                i === activeIndex && "ph-autocomplete__option--active"
+              )}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+Autocomplete.displayName = "Autocomplete";

package/src/components/ui/Banner.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type BannerType = "info" | "success" | "warning" | "danger" | "ai";
+
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+  type?: BannerType;
+  onClose?: () => void;
+  action?: ReactNode;
+  hideIcon?: boolean;
+  square?: boolean;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+const typeClass: Record<BannerType, string> = {
+  info: "ph-banner-info",
+  success: "ph-banner-success",
+  warning: "ph-banner-warning",
+  danger: "ph-banner-danger",
+  ai: "ph-banner-ai",
+};
+
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner({
+  type = "info",
+  onClose,
+  action,
+  hideIcon = false,
+  square = false,
+  icon,
+  className,
+  children,
+  ...props
+}, ref) {
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(
+        "ph-banner",
+        typeClass[type],
+        square && "ph-banner--square",
+        className
+      )}
+      {...props}
+    >
+      <div className="ph-banner__body">
+        {icon}
+        <div className="ph-banner__content">{children}</div>
+        {action && <div className="ph-banner__action">{action}</div>}
+        {onClose && (
+          <button type="button" onClick={onClose} className="ph-banner__close" aria-label="Dismiss">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M4 4l8 8M12 4l-8 8" />
+            </svg>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
+
+Banner.displayName = "Banner";

package/src/components/ui/ButtonGroup.tsx

@@ -0,0 +1,16 @@
+import { type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export function ButtonGroup({ children, className, ...props }: ButtonGroupProps) {
+  return (
+    <div className={cn("ph-btn-group", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+ButtonGroup.displayName = "ButtonGroup";

package/src/components/ui/Chip.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  onRemove?: () => void;
+  children: ReactNode;
+}
+
+export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip({
+  selected = false,
+  onRemove,
+  children,
+  className,
+  ...props
+}, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        "ph-chip",
+        selected && "ph-chip--selected",
+        className
+      )}
+      {...props}
+    >
+      <span className="ph-chip__text">{children}</span>
+      {onRemove && (
+        <span
+          role="button"
+          tabIndex={-1}
+          onClick={(e) => { e.stopPropagation(); onRemove(); }}
+          className="ph-chip__remove"
+          aria-label="Remove"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M2 2l6 6M8 2l-6 6" />
+          </svg>
+        </span>
+      )}
+    </button>
+  );
+});
+
+Chip.displayName = "Chip";

package/src/components/ui/Collapsible.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
+  trigger: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function Collapsible({
+  trigger,
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  className,
+  ...props
+}: CollapsibleProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+
+  return (
+    <div className={cn("ph-collapsible", className)} {...props}>
+      <button
+        type="button"
+        onClick={() => setOpen(!isOpen)}
+        className="ph-collapsible__trigger"
+        aria-expanded={isOpen}
+      >
+        <svg
+          className={cn("ph-collapsible__chevron", isOpen && "ph-collapsible__chevron--open")}
+          width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+        >
+          <path d="M4 5l3 3 3-3" />
+        </svg>
+        {trigger}
+      </button>
+      {isOpen && <div className="ph-collapsible__content">{children}</div>}
+    </div>
+  );
+}
+
+Collapsible.displayName = "Collapsible";

package/src/components/ui/Combobox.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function Combobox({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Search...",
+  className,
+  disabled,
+}: ComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const filtered = options.filter((o) =>
+    o.label.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const selectedSet = new Set(value);
+
+  const toggle = (val: string) => {
+    const next = selectedSet.has(val)
+      ? value.filter((v) => v !== val)
+      : [...value, val];
+    onChange?.(next);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const handle = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className={cn("ph-combobox relative", className)}>
+      <div className="ph-combobox__input-wrap">
+        {value.length > 0 && (
+          <div className="ph-combobox__chips">
+            {value.map((v) => {
+              const opt = options.find((o) => o.value === v);
+              return (
+                <span key={v} className="ph-combobox__chip">
+                  {opt?.label ?? v}
+                  <button
+                    type="button"
+                    onClick={() => toggle(v)}
+                    className="ph-combobox__chip-remove"
+                    aria-label={`Remove ${opt?.label ?? v}`}
+                  >
+                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                      <path d="M2 2l6 6M8 2l-6 6" />
+                    </svg>
+                  </button>
+                </span>
+              );
+            })}
+          </div>
+        )}
+        <input
+          ref={inputRef}
+          type="text"
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setOpen(true); }}
+          onFocus={() => setOpen(true)}
+          placeholder={value.length === 0 ? placeholder : ""}
+          disabled={disabled}
+          className="ph-combobox__input"
+        />
+      </div>
+      {open && filtered.length > 0 && (
+        <div className="ph-combobox__dropdown">
+          {filtered.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => toggle(opt.value)}
+              className={cn(
+                "ph-combobox__option",
+                selectedSet.has(opt.value) && "ph-combobox__option--selected"
+              )}
+            >
+              {selectedSet.has(opt.value) && (
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M2.5 6l2.5 2.5 4.5-5" />
+                </svg>
+              )}
+              <span>{opt.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+Combobox.displayName = "Combobox";

package/src/components/ui/ContextMenu.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ContextMenuItem {
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  separator?: boolean;
+  icon?: ReactNode;
+}
+
+export interface ContextMenuProps extends HTMLAttributes<HTMLDivElement> {
+  items: ContextMenuItem[];
+  children: ReactNode;
+}
+
+export function ContextMenu({ items, children, className, ...props }: ContextMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handle = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handle);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+
+  return (
+    <div
+      className={cn("ph-context-menu", className)}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        setPos({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+      }}
+      {...props}
+    >
+      {children}
+      {open && (
+        <div
+          ref={menuRef}
+          className="ph-context-menu__panel"
+          style={{ left: pos.x, top: pos.y }}
+        >
+          {items.map((item, i) =>
+            item.separator ? (
+              <div key={i} className="ph-context-menu__separator" />
+            ) : (
+              <button
+                key={i}
+                type="button"
+                disabled={item.disabled}
+                onClick={() => { item.onClick?.(); setOpen(false); }}
+                className="ph-context-menu__item"
+              >
+                {item.icon && <span className="ph-context-menu__icon">{item.icon}</span>}
+                <span>{item.label}</span>
+              </button>
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+ContextMenu.displayName = "ContextMenu";