@xenide-io/the-old-ui-theme 0.2.6 → 0.2.9

package/src/components/ui/Card.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type CardVariant = "default" | "outlined" | "elevated" | "highlighted";
+
+export interface CardProps {
+  children?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  media?: ReactNode;
+  variant?: CardVariant;
+  className?: string;
+  bodyClassName?: string;
+}
+
+const variantMap: Record<CardVariant, string> = {
+  default: "bg-ph-surface",
+  outlined: "border-2 border-ph-border bg-ph-surface",
+  elevated: "bg-ph-surface shadow-ph-md",
+  highlighted: "border border-ph-brand/35 bg-orange-50/40 shadow-ph",
+};
+
+export function Card({
+  children,
+  title,
+  description,
+  actions,
+  footer,
+  media,
+  variant = "default",
+  className,
+  bodyClassName,
+}: CardProps) {
+  return (
+    <div
+      className={cn(
+        "ph-card",
+        variantMap[variant],
+        className
+      )}
+    >
+      {media && <div className="-mx-6 -mt-6 mb-4">{media}</div>}
+      <div className={cn("ph-card-body", bodyClassName)}>
+        {title && (
+          <h3 className="ph-card-title">{title}</h3>
+        )}
+        {description && (
+          <p className="text-sm text-ph-subtle">{description}</p>
+        )}
+        {children}
+        {actions && <div className="ph-card-actions">{actions}</div>}
+      </div>
+      {footer && (
+        <div className="border-t border-ph-border px-6 py-4 text-xs text-ph-subtle">{footer}</div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/ChatBubble.tsx

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/cn";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  filename?: string;
+  className?: string;
+}
+
+export function CodeBlock({ code, language = "tsx", filename, className }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={cn("overflow-hidden rounded-lg border border-ph-border bg-[#1a1a2e]", className)}>
+      {(filename || language) && (
+        <div className="flex items-center justify-between border-b border-white/10 px-4 py-2">
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1.5">
+              <div className="h-3 w-3 rounded-full bg-red-400" />
+              <div className="h-3 w-3 rounded-full bg-amber-400" />
+              <div className="h-3 w-3 rounded-full bg-emerald-400" />
+            </div>
+            {filename && <span className="ml-2 text-xs text-white/60">{filename}</span>}
+          </div>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="text-xs text-white/60 transition hover:text-white"
+          >
+            {copied ? "Copied!" : "Copy"}
+          </button>
+        </div>
+      )}
+      <pre className="overflow-x-auto p-4 text-sm leading-relaxed">
+        <code className="font-mono text-[#e4e4e7]">{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/components/ui/CollapsibleSection.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/cn";
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  id?: string;
+}
+
+export function CollapsibleSection({ title, children, defaultOpen = true, id }: CollapsibleSectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <section id={id} className="scroll-mt-20">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="mb-6 flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-muted px-5 py-4 text-left transition hover:bg-ph-muted/80"
+      >
+        <span className="text-lg font-bold text-ph-ink">{title}</span>
+        <svg
+          className={cn(
+            "h-5 w-5 text-ph-subtle transition-transform duration-200",
+            isOpen && "rotate-180"
+          )}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      <div
+        className={cn(
+          "overflow-hidden transition-all duration-300",
+          isOpen ? "max-h-[50000px] opacity-100" : "max-h-0 opacity-0"
+        )}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/components/ui/CommandPalette.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { cn } from "@/lib/cn";
+import { IconSearch } from "@/components/icons";
+
+interface CommandItem {
+  id: string;
+  label: string;
+  shortcut?: string;
+  icon?: React.ReactNode;
+  onSelect: () => void;
+}
+
+interface CommandPaletteProps {
+  items: CommandItem[];
+  isOpen: boolean;
+  onClose: () => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function CommandPalette({
+  items,
+  isOpen,
+  onClose,
+  placeholder = "Type a command or search...",
+  className,
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filtered = items.filter((item) =>
+    item.label.toLowerCase().includes(query.toLowerCase())
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery("");
+      setSelectedIndex(0);
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => (i + 1) % filtered.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
+          break;
+        case "Enter":
+          e.preventDefault();
+          filtered[selectedIndex]?.onSelect();
+          onClose();
+          break;
+        case "Escape":
+          onClose();
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, filtered, selectedIndex, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm">
+      <div
+        className={cn(
+          "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
+          className
+        )}
+      >
+        <div className="flex items-center gap-3 border-b border-ph-border px-4 py-3">
+          <IconSearch className="h-5 w-5 text-ph-mutedtext" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setSelectedIndex(0);
+            }}
+            placeholder={placeholder}
+            className="flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
+          />
+          <kbd className="rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext">
+            ESC
+          </kbd>
+        </div>
+        <div className="max-h-[50vh] overflow-y-auto py-2">
+          {filtered.length === 0 ? (
+            <div className="px-4 py-8 text-center text-sm text-ph-mutedtext">
+              No results found.
+            </div>
+          ) : (
+            filtered.map((item, index) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => {
+                  item.onSelect();
+                  onClose();
+                }}
+                onMouseEnter={() => setSelectedIndex(index)}
+                className={cn(
+                  "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+                  index === selectedIndex
+                    ? "bg-ph-muted text-ph-ink"
+                    : "text-ph-subtle"
+                )}
+              >
+                {item.icon && <span className="h-5 w-5">{item.icon}</span>}
+                <span className="flex-1">{item.label}</span>
+                {item.shortcut && (
+                  <kbd className="rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext">
+                    {item.shortcut}
+                  </kbd>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/ComponentDocs.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface ComponentPropRow {
+  name: string;
+  type: string;
+  defaultValue?: string;
+  description: ReactNode;
+}
+
+export interface ComponentDocsProps {
+  title?: string;
+  rows: ComponentPropRow[];
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false, className }: ComponentDocsProps) {
+  return (
+    <details className={cn("ph-panel group overflow-hidden p-0", className)} open={defaultOpen}>
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-4 border-b border-ph-border px-4 py-3 transition hover:bg-ph-muted/60 [&::-webkit-details-marker]:hidden">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">{title}</h3>
+        <span className="rounded-full border border-ph-border bg-ph-surface px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext transition group-open:bg-ph-brand group-open:text-white">
+          <span className="group-open:hidden">Show</span>
+          <span className="hidden group-open:inline">Hide</span>
+        </span>
+      </summary>
+      <div className="overflow-x-auto border-t border-ph-border">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-ph-muted text-xs uppercase tracking-wider text-ph-mutedtext">
+            <tr>
+              <th className="px-4 py-2 font-semibold">Prop</th>
+              <th className="px-4 py-2 font-semibold">Type</th>
+              <th className="px-4 py-2 font-semibold">Default</th>
+              <th className="px-4 py-2 font-semibold">Use</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-ph-border">
+            {rows.map((row) => (
+              <tr key={row.name}>
+                <td className="px-4 py-3 align-top font-mono text-xs text-ph-ink">{row.name}</td>
+                <td className="px-4 py-3 align-top font-mono text-xs text-ph-subtle">{row.type}</td>
+                <td className="px-4 py-3 align-top font-mono text-xs text-ph-subtle">{row.defaultValue ?? "-"}</td>
+                <td className="px-4 py-3 align-top text-ph-subtle">{row.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </details>
+  );
+}

package/src/components/ui/Drawer.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { IconClose } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { Button } from "@/components/ui/Button";
+
+export type DrawerSide = "left" | "right";
+export type DrawerSize = "sm" | "md" | "lg";
+
+export interface DrawerProps {
+  open?: boolean;
+  onClose?: () => void;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  side?: DrawerSide;
+  size?: DrawerSize;
+  className?: string;
+  showCloseButton?: boolean;
+}
+
+const sideMap: Record<DrawerSide, string> = {
+  left: "left-0 border-r",
+  right: "right-0 border-l",
+};
+
+const sizeMap: Record<DrawerSize, string> = {
+  sm: "w-[min(100%,18rem)]",
+  md: "w-[min(100%,22rem)]",
+  lg: "w-[min(100%,30rem)]",
+};
+
+export function Drawer({
+  open = false,
+  onClose,
+  title,
+  children,
+  footer,
+  side = "right",
+  size = "md",
+  className,
+  showCloseButton = true,
+}: DrawerProps) {
+  if (!open) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[120] bg-black/45 backdrop-blur-[2px]" role="presentation" onClick={onClose} />
+      <aside
+        className={cn(
+          "fixed inset-y-0 z-[130] flex flex-col overflow-y-auto border-ph-border bg-ph-surface shadow-ph-md",
+          sideMap[side],
+          sizeMap[size],
+          className
+        )}
+      >
+        {(title || showCloseButton) && (
+          <header className="flex items-center justify-between border-b border-ph-border px-4 py-3">
+            <span className="text-sm font-bold text-ph-ink">{title}</span>
+            {showCloseButton && onClose && (
+              <Button variant="ghost" className="ph-btn-circle" onClick={onClose} aria-label="Close drawer">
+                <IconClose className="h-5 w-5" />
+              </Button>
+            )}
+          </header>
+        )}
+        <div className="flex-1">{children}</div>
+        {footer && <footer className="border-t border-ph-border px-4 py-3">{footer}</footer>}
+      </aside>
+    </>
+  );
+}

package/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,138 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { IconChevronDown } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { ButtonChrome } from "@/components/ui/ButtonChrome";
+import type { ButtonSize } from "@/components/ui/Button";
+
+export type DropdownAlign = "start" | "end";
+
+export interface DropdownMenuProps extends HTMLAttributes<HTMLDetailsElement> {
+  /** Custom trigger node (avatar, icon chip, etc.) */
+  trigger: ReactNode;
+  /** Accessible name when trigger has no visible text */
+  "aria-label": string;
+  children: ReactNode;
+  align?: DropdownAlign;
+  panelClassName?: string;
+}
+
+export interface DropdownButtonProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "children"> {
+  /** Visible button label */
+  label: string;
+  variant?: "primary" | "secondary" | "accent";
+  outline?: boolean;
+  size?: ButtonSize;
+  /** Split control (Run ▾) — divider before trailing chevron */
+  split?: boolean;
+  icon?: ReactNode;
+  /** Defaults to chevron when omitted */
+  sideIcon?: ReactNode;
+  children: ReactNode;
+  align?: DropdownAlign;
+  panelClassName?: string;
+  /** Overrides accessible name; defaults to `label` */
+  "aria-label"?: string;
+}
+
+const sizeClass: Record<ButtonSize, string> = {
+  xs: "ph-btn-xs",
+  sm: "ph-btn-sm",
+  md: "",
+  lg: "ph-btn-lg",
+};
+
+const variantClass = {
+  primary: "ph-btn-primary",
+  secondary: "ph-btn-secondary",
+  accent: "ph-btn-accent",
+} as const;
+
+function dropdownPanelClass(align: DropdownAlign, panelClassName?: string) {
+  return cn(
+    "ph-dropdown-panel absolute top-full z-50 mt-0",
+    align === "end" ? "right-0" : "left-0",
+    panelClassName,
+  );
+}
+
+/** Generic `<details>` menu — pass any trigger (avatar, icon chip, etc.). */
+export function DropdownMenu({
+  trigger,
+  children,
+  align = "start",
+  className,
+  panelClassName,
+  "aria-label": ariaLabel,
+  ...props
+}: DropdownMenuProps) {
+  return (
+    <details className={cn("relative", className)} {...props}>
+      <summary
+        className="cursor-pointer list-none [&::-webkit-details-marker]:hidden"
+        aria-label={ariaLabel}
+      >
+        {trigger}
+      </summary>
+      <div className={dropdownPanelClass(align, panelClassName)}>{children}</div>
+    </details>
+  );
+}
+
+/** Lemon-styled dropdown trigger (primary / secondary / accent) with labelled chrome. */
+export function DropdownButton({
+  label,
+  variant = "secondary",
+  outline = false,
+  size = "md",
+  split = false,
+  icon,
+  sideIcon,
+  children,
+  align = "start",
+  className,
+  panelClassName,
+  "aria-label": ariaLabel,
+  ...props
+}: DropdownButtonProps) {
+  const usesLemonChrome = variant === "primary" || variant === "secondary";
+  const chevron = <IconChevronDown className="h-4 w-4" aria-hidden />;
+  const trailing = sideIcon ?? chevron;
+
+  return (
+    <details className={cn("relative", className)} {...props}>
+      <summary
+        className={cn(
+          "ph-btn cursor-pointer list-none [&::-webkit-details-marker]:hidden",
+          variantClass[variant],
+          outline && "ph-btn-outline",
+          sizeClass[size],
+          split && "ph-btn-split",
+        )}
+        aria-label={ariaLabel ?? label}
+      >
+        {usesLemonChrome ? (
+          <ButtonChrome label={label} icon={icon} sideIcon={trailing} split={split} />
+        ) : (
+          <>
+            {icon != null ? <span className="ph-btn-icon">{icon}</span> : null}
+            <span className="ph-btn-label">{label}</span>
+            <span className="ph-btn-side-icon">{trailing}</span>
+          </>
+        )}
+      </summary>
+      <div className={dropdownPanelClass(align, panelClassName)}>{children}</div>
+    </details>
+  );
+}
+
+export function DropdownItem({
+  className,
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type="button" className={cn("ph-dropdown-item w-full text-left", className)} {...props}>
+      {children}
+    </button>
+  );
+}

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+
+interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center rounded-xl border border-dashed border-ph-border bg-ph-muted/50 px-8 py-16 text-center",
+        className
+      )}
+    >
+      {icon && (
+        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-ph-muted text-ph-mutedtext">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-base font-semibold text-ph-ink">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-ph-subtle">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}