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

package/src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { ButtonChrome } from "@/components/ui/ButtonChrome";
 import { cn } from "@/lib/cn";
 
@@ -29,6 +29,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
   sideIcon?: ReactNode;
   children?: ReactNode;
+  loading?: boolean;
+  loadingLabel?: ReactNode;
 }
 
 const variantClass: Record<ButtonVariant, string> = {
@@ -60,11 +62,8 @@ const shapeClass: Record<ButtonShape, string> = {
   wide: "ph-btn-wide",
 };
 
-/**
- * PostHog LemonButton parity — primary/secondary use ::before border ring + ::after face/ridge
- * (see PostHog `LemonButton.scss`). Prefer this over raw `<button className="ph-btn …">`.
- */
-export function Button({
+/** 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",
@@ -72,19 +71,24 @@ export function Button({
   split = false,
   icon,
   sideIcon,
+  loading = false,
+  loadingLabel,
   className,
   children,
   type = "button",
+  disabled,
   ...props
-}: ButtonProps) {
-  const usesLemonChrome = variant === "primary" || variant === "secondary";
+}, 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={children} icon={icon} sideIcon={sideIcon} split={split} />
+    <ButtonChrome label={label} icon={leadingIcon} sideIcon={sideIcon} split={split} />
   ) : (
     <>
-      {icon != null ? <span className="ph-btn-icon">{icon}</span> : null}
-      {children != null ? <span className="ph-btn-label">{children}</span> : null}
+      {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}
     </>
@@ -92,9 +96,13 @@ export function Button({
 
   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],
@@ -107,4 +115,6 @@ export function Button({
       {content}
     </button>
   );
-}
+});
+
+Button.displayName = "Button";

package/src/components/ui/ButtonChrome.tsx

@@ -7,7 +7,7 @@ export interface ButtonChromeProps {
   split?: boolean;
 }
 
-/** Inner face for Lemon primary/secondary — keeps labels above ::after ridge. */
+/** 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">

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/Calendar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { IconChevronLeft, IconChevronRight } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
 interface CalendarProps {
@@ -64,11 +65,10 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
         <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"
         >
-          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M15 18l-6-6 6-6" />
-          </svg>
+          <IconChevronLeft className="h-5 w-5" aria-hidden />
         </button>
         <span className="text-sm font-semibold text-ph-ink">
           {monthNames[month]} {year}
@@ -76,11 +76,10 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
         <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"
         >
-          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M9 18l6-6-6-6" />
-          </svg>
+          <IconChevronRight className="h-5 w-5" aria-hidden />
         </button>
       </div>
 
@@ -99,7 +98,7 @@ export function Calendar({ value, onChange, className }: CalendarProps) {
                 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-white shadow-ph"
+                    ? "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"

package/src/components/ui/Card.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from "react";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type CardVariant = "default" | "outlined" | "elevated" | "highlighted";
 
-export interface CardProps {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   children?: ReactNode;
   title?: ReactNode;
   description?: ReactNode;
@@ -13,16 +13,18 @@ export interface CardProps {
   variant?: CardVariant;
   className?: string;
   bodyClassName?: string;
+  interactive?: boolean;
+  titleAs?: "h2" | "h3" | "h4";
 }
 
 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",
+  default: "",
+  outlined: "border-2 border-ph-border",
+  elevated: "ph-card-elevated",
+  highlighted: "ph-card-highlighted",
 };
 
-export function Card({
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
   children,
   title,
   description,
@@ -32,19 +34,25 @@ export function Card({
   variant = "default",
   className,
   bodyClassName,
-}: CardProps) {
+  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="-mx-6 -mt-6 mb-4">{media}</div>}
+      {media && <div className="ph-card-media">{media}</div>}
       <div className={cn("ph-card-body", bodyClassName)}>
         {title && (
-          <h3 className="ph-card-title">{title}</h3>
+          <Title className="ph-card-title">{title}</Title>
         )}
         {description && (
           <p className="text-sm text-ph-subtle">{description}</p>
@@ -57,4 +65,6 @@ export function Card({
       )}
     </div>
   );
-}
+});
+
+Card.displayName = "Card";

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/CollapsibleSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
+import { IconChevronDown } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
 interface CollapsibleSectionProps {
@@ -12,31 +13,30 @@ interface CollapsibleSectionProps {
 
 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>
-        <svg
+        <IconChevronDown
           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>
+          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"

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";