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

package/src/components/ui/Button.tsx

@@ -0,0 +1,120 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { ButtonChrome } from "@/components/ui/ButtonChrome";
+import { cn } from "@/lib/cn";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "signal"
+  | "accent"
+  | "neutral"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+  | "ghost"
+  | "link";
+
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export type ButtonShape = "default" | "circle" | "square" | "wide";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  outline?: boolean;
+  /** Toolbar split control (Run ▾) — adds divider before trailing icon slot */
+  split?: boolean;
+  icon?: ReactNode;
+  sideIcon?: ReactNode;
+  children?: ReactNode;
+  loading?: boolean;
+  loadingLabel?: ReactNode;
+}
+
+const variantClass: Record<ButtonVariant, string> = {
+  primary: "ph-btn-primary",
+  secondary: "ph-btn-secondary",
+  tertiary: "ph-btn-tertiary",
+  signal: "ph-btn-signal",
+  accent: "ph-btn-accent",
+  neutral: "ph-btn-neutral",
+  info: "ph-btn-info",
+  success: "ph-btn-success",
+  warning: "ph-btn-warning",
+  danger: "ph-btn-danger",
+  ghost: "ph-btn-ghost",
+  link: "ph-btn-link",
+};
+
+const sizeClass: Record<ButtonSize, string> = {
+  xs: "ph-btn-xs",
+  sm: "ph-btn-sm",
+  md: "",
+  lg: "ph-btn-lg",
+};
+
+const shapeClass: Record<ButtonShape, string> = {
+  default: "",
+  circle: "ph-btn-circle",
+  square: "ph-btn-square",
+  wide: "ph-btn-wide",
+};
+
+/** Filled variants keep a stationary depth plate while the face and content move together. */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
+  variant = "secondary",
+  size = "md",
+  shape = "default",
+  outline = false,
+  split = false,
+  icon,
+  sideIcon,
+  loading = false,
+  loadingLabel,
+  className,
+  children,
+  type = "button",
+  disabled,
+  ...props
+}, ref) {
+  const usesLemonChrome = !["tertiary", "ghost", "link"].includes(variant);
+  const label = loadingLabel ?? children;
+  const leadingIcon = loading ? <span className="ph-btn-spinner" aria-hidden /> : icon;
+
+  const content = usesLemonChrome ? (
+    <ButtonChrome label={label} icon={leadingIcon} sideIcon={sideIcon} split={split} />
+  ) : (
+    <>
+      {leadingIcon != null ? <span className="ph-btn-icon">{leadingIcon}</span> : null}
+      {label != null ? <span className="ph-btn-label">{label}</span> : null}
+      {split ? <span className="ph-btn-split-divider" aria-hidden /> : null}
+      {sideIcon != null ? <span className="ph-btn-side-icon">{sideIcon}</span> : null}
+    </>
+  );
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      className={cn(
+        "ph-btn",
+        usesLemonChrome && "ph-btn-raised",
+        outline && "ph-btn-outline",
+        variantClass[variant],
+        sizeClass[size],
+        shapeClass[shape],
+        split && "ph-btn-split",
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </button>
+  );
+});
+
+Button.displayName = "Button";

package/src/components/ui/ButtonChrome.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export interface ButtonChromeProps {
+  label?: ReactNode;
+  icon?: ReactNode;
+  sideIcon?: ReactNode;
+  split?: boolean;
+}
+
+/** Content layer for tactile variants; CSS moves it with the independently rendered face. */
+export function ButtonChrome({ label, icon, sideIcon, split }: ButtonChromeProps) {
+  return (
+    <span className="ph-btn-chrome">
+      {icon != null ? <span className="ph-btn-icon">{icon}</span> : null}
+      {label != null ? <span className="ph-btn-label">{label}</span> : null}
+      {split ? <span className="ph-btn-split-divider" aria-hidden /> : null}
+      {sideIcon != null ? <span className="ph-btn-side-icon">{sideIcon}</span> : null}
+    </span>
+  );
+}

package/src/components/ui/Calendar.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { IconChevronLeft, IconChevronRight } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+interface CalendarProps {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  className?: string;
+}
+
+export function Calendar({ value, onChange, className }: CalendarProps) {
+  const [currentMonth, setCurrentMonth] = useState(value || new Date());
+  const today = new Date();
+
+  const year = currentMonth.getFullYear();
+  const month = currentMonth.getMonth();
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
+  const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
+
+  const monthNames = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December",
+  ];
+
+  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+  const isSelected = (day: number) => {
+    if (!value) return false;
+    return (
+      value.getDate() === day &&
+      value.getMonth() === month &&
+      value.getFullYear() === year
+    );
+  };
+
+  const isToday = (day: number) => {
+    return (
+      today.getDate() === day &&
+      today.getMonth() === month &&
+      today.getFullYear() === year
+    );
+  };
+
+  const handleSelect = (day: number) => {
+    onChange?.(new Date(year, month, day));
+  };
+
+  const days = [];
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null);
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(i);
+  }
+
+  return (
+    <div className={cn("w-[280px] rounded-xl border border-ph-border bg-ph-surface p-4 shadow-ph", className)}>
+      <div className="mb-4 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={prevMonth}
+          aria-label="Previous month"
+          className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
+        >
+          <IconChevronLeft className="h-5 w-5" aria-hidden />
+        </button>
+        <span className="text-sm font-semibold text-ph-ink">
+          {monthNames[month]} {year}
+        </span>
+        <button
+          type="button"
+          onClick={nextMonth}
+          aria-label="Next month"
+          className="rounded-lg p-1 text-ph-subtle transition hover:bg-ph-muted hover:text-ph-ink"
+        >
+          <IconChevronRight className="h-5 w-5" aria-hidden />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1">
+        {weekDays.map((day) => (
+          <div key={day} className="py-1 text-center text-xs font-medium text-ph-mutedtext">
+            {day}
+          </div>
+        ))}
+        {days.map((day, index) => (
+          <div key={index} className="aspect-square">
+            {day && (
+              <button
+                type="button"
+                onClick={() => handleSelect(day)}
+                className={cn(
+                  "flex h-full w-full items-center justify-center rounded-lg text-sm transition-colors",
+                  isSelected(day)
+                    ? "bg-ph-brand font-semibold text-[var(--ph-on-accent)] shadow-ph"
+                    : isToday(day)
+                    ? "bg-ph-muted font-semibold text-ph-brand ring-1 ring-ph-brand/30"
+                    : "text-ph-ink hover:bg-ph-muted"
+                )}
+              >
+                {day}
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Card.tsx

@@ -0,0 +1,70 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type CardVariant = "default" | "outlined" | "elevated" | "highlighted";
+
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  children?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  media?: ReactNode;
+  variant?: CardVariant;
+  className?: string;
+  bodyClassName?: string;
+  interactive?: boolean;
+  titleAs?: "h2" | "h3" | "h4";
+}
+
+const variantMap: Record<CardVariant, string> = {
+  default: "",
+  outlined: "border-2 border-ph-border",
+  elevated: "ph-card-elevated",
+  highlighted: "ph-card-highlighted",
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
+  children,
+  title,
+  description,
+  actions,
+  footer,
+  media,
+  variant = "default",
+  className,
+  bodyClassName,
+  interactive = false,
+  titleAs: Title = "h3",
+  ...props
+}, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ph-card",
+        variantMap[variant],
+        interactive && "ph-card-interactive",
+        className
+      )}
+      {...props}
+    >
+      {media && <div className="ph-card-media">{media}</div>}
+      <div className={cn("ph-card-body", bodyClassName)}>
+        {title && (
+          <Title className="ph-card-title">{title}</Title>
+        )}
+        {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>
+  );
+});
+
+Card.displayName = "Card";

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 { useId, useState } from "react";
+import { IconChevronDown } from "@/components/icons";
+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);
+  const generatedId = useId();
+  const contentId = `${id ?? generatedId}-content`;
+
+  return (
+    <section id={id} className="scroll-mt-20">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-controls={contentId}
+        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>
+        <IconChevronDown
+          className={cn(
+            "h-5 w-5 text-ph-subtle transition-transform duration-200",
+            isOpen && "rotate-180"
+          )}
+          aria-hidden
+        />
+      </button>
+      <div
+        id={contentId}
+        aria-hidden={!isOpen}
+        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>
+  );
+}