@xenide-io/the-old-ui-theme 0.5.4 → 0.6.0

package/src/components/ui/AlertDialog.tsx

@@ -1,62 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

@@ -1,106 +0,0 @@
-"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

@@ -1,63 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/ChatBubble.tsx

@@ -1,71 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export type ChatBubbleVariant = "from" | "self";
-
-export interface ChatBubbleProps extends ComponentPropsWithoutRef<"div"> {
-  /** Message content */
-  children?: ReactNode;
-  /** Avatar or icon */
-  avatar?: ReactNode;
-  /** Sender name */
-  name?: string;
-  /** Timestamp */
-  time?: string;
-  /** "from" = left/grey, "self" = right/brand */
-  variant?: ChatBubbleVariant;
-  /** Footer text (e.g. "Synced with...") */
-  footer?: ReactNode;
-}
-
-export function ChatBubble({
-  children,
-  avatar,
-  name,
-  time,
-  variant = "from",
-  footer,
-  className,
-  ...props
-}: ChatBubbleProps) {
-  const isSelf = variant === "self";
-
-  return (
-    <div
-      className={cn(
-        "flex gap-3",
-        isSelf && "flex-row-reverse",
-        className,
-      )}
-      {...props}
-    >
-      {avatar && (
-        <div className="shrink-0">{avatar}</div>
-      )}
-      <div className={cn("min-w-0 flex-1", isSelf && "text-right")}>
-        {(name || time) && (
-          <header
-            className={cn(
-              "flex gap-2 text-xs text-ph-mutedtext",
-              isSelf && "flex-row-reverse justify-end",
-            )}
-          >
-            {name && <span className="font-semibold text-ph-ink">{name}</span>}
-            {time && <span>{time}</span>}
-          </header>
-        )}
-        <div
-          className={cn(
-            "mt-2 inline-block text-left shadow-ph",
-            isSelf ? "ph-chat-self" : "ph-chat-from",
-          )}
-        >
-          {children}
-        </div>
-        {footer && (
-          <footer className="mt-2 text-[11px] text-ph-mutedtext">{footer}</footer>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/ui/Collapsible.tsx

@@ -1,46 +0,0 @@
-"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

@@ -1,119 +0,0 @@
-"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

@@ -1,81 +0,0 @@
-"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";