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

package/src/components/sections/SwapShowcase.tsx

@@ -9,15 +9,17 @@ function IconSwapToggle({
   onIcon: OnIcon,
   offClassName,
   onClassName,
+  label,
 }: {
   offIcon: typeof IconBellOff;
   onIcon: typeof IconBell;
   offClassName?: string;
   onClassName?: string;
+  label: string;
 }) {
   return (
-    <label className="group relative inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-ph-surface shadow-ph">
-      <input type="checkbox" className="sr-only" />
+    <label className="group relative inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-ph-surface shadow-ph focus-within:ring-2 focus-within:ring-ph-focus focus-within:ring-offset-2">
+      <input type="checkbox" className="sr-only" aria-label={label} />
       <span className="ph-icon-swap h-7 w-7" aria-hidden>
         <OffIcon
           className={cn(
@@ -37,10 +39,11 @@ function IconSwapToggle({
 }
 
 export default function SwapShowcase() {
-  const code = `import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "the-old-ui";
+  const code = `import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "@xenide-io/the-old-ui-theme";
 
 <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
   <IconSwapToggle
+    label="Mute audio"
     offIcon={IconVolume}
     onIcon={IconVolumeOff}
     offClassName="text-ph-brand"
@@ -48,6 +51,7 @@ export default function SwapShowcase() {
   />
 
   <IconSwapToggle
+    label="Mute notifications"
     offIcon={IconBell}
     onIcon={IconBellOff}
     offClassName="rotate-[-8deg] text-ph-mutedtext"
@@ -55,10 +59,11 @@ export default function SwapShowcase() {
   />
 
   <IconSwapToggle
+    label="Use light appearance"
     offIcon={IconMoon}
     onIcon={IconSun}
     offClassName="text-ph-mutedtext"
-    onClassName="text-amber-500"
+    onClassName="text-ph-warning"
   />
 </div>`;
 
@@ -66,6 +71,7 @@ export default function SwapShowcase() {
     <ShowcaseWrapper title="Icon swap" code={code} filename="SwapExample.tsx">
       <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
         <IconSwapToggle
+          label="Mute audio"
           offIcon={IconVolume}
           onIcon={IconVolumeOff}
           offClassName="text-ph-brand"
@@ -73,6 +79,7 @@ export default function SwapShowcase() {
         />
 
         <IconSwapToggle
+          label="Mute notifications"
           offIcon={IconBell}
           onIcon={IconBellOff}
           offClassName="rotate-[-8deg] text-ph-mutedtext"
@@ -80,10 +87,11 @@ export default function SwapShowcase() {
         />
 
         <IconSwapToggle
+          label="Use light appearance"
           offIcon={IconMoon}
           onIcon={IconSun}
           offClassName="text-ph-mutedtext"
-          onClassName="text-amber-500"
+          onClassName="text-ph-warning"
         />
       </div>
     </ShowcaseWrapper>

package/src/components/sections/TableShowcase.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CSSProperties } from "react";
 import { Badge, ComponentDocs, ShowcaseWrapper, Table, type TableColumn } from "@/components/ui";
 

package/src/components/sections/TooltipShowcase.tsx

@@ -1,44 +1,38 @@
-import { Button, ShowcaseWrapper } from "@/components/ui";
+import { Button, ShowcaseWrapper, Tooltip, TooltipProvider } from "@/components/ui";
 
 export default function TooltipShowcase() {
-  const code = `import { Button } from "the-old-ui";
+  const code = `import { Button, Tooltip, TooltipProvider } from "the-old-ui";
 
-<div className="ph-panel space-y-8">
-  <div className="flex flex-wrap items-center gap-10">
-    <div className="group relative inline-block">
+<TooltipProvider delayDuration={300}>
+  <div className="ph-panel flex flex-wrap items-center gap-10">
+    <Tooltip content="Run a HogQL query (Command + /)" side="top">
       <Button variant="secondary">Hover me</Button>
-      <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-neutral-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
-        HogQL <span className="ph-shortcut border-neutral-700 bg-neutral-800 text-neutral-100">⌘ /</span>
-      </span>
-    </div>
+    </Tooltip>
 
-    <span className="ph-tip cursor-help" title="Native title tooltip for zero-JS parity">
-      Dashed chrome (title attribute)
-    </span>
+    <Tooltip content="Available on hover and keyboard focus" side="bottom">
+      <button type="button" className="ph-tip cursor-help">Dashed chrome</button>
+    </Tooltip>
   </div>
-</div>`;
+</TooltipProvider>`;
 
   return (
     <ShowcaseWrapper
       title="Tooltips"
-      description="PostHog tooltips lean on muted inverse surfaces. Here we fake the vibe with charcoal chips + blur for contrast on light canvas."
+      description="Accessible supporting text on an adaptive inverse surface. Tooltips open on hover or focus, avoid viewport collisions, and dismiss with Escape."
       code={code}
       filename="TooltipExample.tsx"
     >
-      <div className="ph-panel space-y-8">
-        <div className="flex flex-wrap items-center gap-10">
-          <div className="group relative inline-block">
+      <TooltipProvider delayDuration={300}>
+        <div className="ph-panel flex flex-wrap items-center gap-10">
+          <Tooltip content="Run a HogQL query (Command + /)" side="top">
             <Button variant="secondary">Hover me</Button>
-            <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-neutral-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
-              HogQL <span className="ph-shortcut border-neutral-700 bg-neutral-800 text-neutral-100">⌘ /</span>
-            </span>
-          </div>
+          </Tooltip>
 
-          <span className="ph-tip cursor-help" title="Native title tooltip for zero-JS parity">
-            Dashed chrome (title attribute)
-          </span>
+          <Tooltip content="Available on hover and keyboard focus" side="bottom">
+            <button type="button" className="ph-tip cursor-help">Dashed chrome</button>
+          </Tooltip>
         </div>
-      </div>
+      </TooltipProvider>
     </ShowcaseWrapper>
   );
 }

package/src/components/ui/Alert.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
-import { IconCancel, IconCheckCircle, IconErrorOutline, IconExclamation } from "@/components/icons";
+import { forwardRef, type AriaAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { IconCancel, IconCheckCircle, IconClose, IconExclamation, IconInfo } from "@/components/icons";
 import { cn } from "@/lib/cn";
 
 export type AlertStatus = "info" | "success" | "warning" | "danger";
 
-export interface AlertProps {
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   status?: AlertStatus;
   title?: string;
   description?: string;
@@ -12,13 +12,15 @@ export interface AlertProps {
   children?: ReactNode;
   className?: string;
   onDismiss?: () => void;
+  live?: AriaAttributes["aria-live"];
+  dismissLabel?: string;
 }
 
-const statusConfig: Record<AlertStatus, { icon: typeof IconErrorOutline; color: string } > = {
-  info: { icon: IconErrorOutline, color: "text-ph-info" },
-  success: { icon: IconCheckCircle, color: "text-ph-success" },
-  warning: { icon: IconExclamation, color: "text-ph-warning" },
-  danger: { icon: IconCancel, color: "text-ph-danger" },
+const statusConfig: Record<AlertStatus, { icon: typeof IconInfo } > = {
+  info: { icon: IconInfo },
+  success: { icon: IconCheckCircle },
+  warning: { icon: IconExclamation },
+  danger: { icon: IconCancel },
 };
 
 const statusClassMap: Record<AlertStatus, string > = {
@@ -28,7 +30,7 @@ const statusClassMap: Record<AlertStatus, string > = {
   danger: "ph-alert-danger",
 };
 
-export function Alert({
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({
   status = "info",
   title,
   description,
@@ -36,17 +38,24 @@ export function Alert({
   children,
   className,
   onDismiss,
-}: AlertProps) {
+  live,
+  dismissLabel = "Dismiss notification",
+  role,
+  ...props
+}, ref) {
   const config = statusConfig[status];
   const Icon = config.icon;
 
   return (
     <div
-      role="alert"
+      ref={ref}
+      role={role ?? (live === "assertive" ? "alert" : live === "polite" ? "status" : undefined)}
+      aria-live={live}
       className={cn("ph-alert", statusClassMap[status], className)}
+      {...props}
     >
-      {icon ?? <Icon className={cn("mt-0.5 h-5 w-5 shrink-0", config.color)} />}
-      <div className="flex-1">
+      {icon ?? <Icon className="ph-alert-icon mt-0.5 h-5 w-5 shrink-0" aria-hidden />}
+      <div className="min-w-0 flex-1">
         {title && <p className="font-semibold">{title}</p>}
         {description && <p className="mt-1 text-sm text-ph-subtle">{description}</p>}
         {children}
@@ -55,14 +64,14 @@ export function Alert({
         <button
           type="button"
           onClick={onDismiss}
-          className="shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink"
-          aria-label="Dismiss"
+          className="ph-alert-dismiss"
+          aria-label={dismissLabel}
         >
-          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
+          <IconClose className="h-4 w-4" aria-hidden />
         </button>
       )}
     </div>
   );
-}
+});
+
+Alert.displayName = "Alert";

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

@@ -0,0 +1,58 @@
+import { useId, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface AuthLayoutProps extends ComponentPropsWithoutRef<"div"> {
+  brand?: ReactNode;
+  footer?: ReactNode;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+export interface AuthCardProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}
+
+export interface AuthDividerProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+
+export function AuthLayout({ brand, footer, aside, children, className, ...props }: AuthLayoutProps) {
+  return (
+    <div className={cn("ph-auth-layout", aside != null && "ph-auth-layout--split", className)} {...props}>
+      {aside ? <aside className="ph-auth-layout__aside">{aside}</aside> : null}
+      <div className="ph-auth-layout__main">
+        <div className="ph-auth-layout__column">
+          {brand ? <div className="ph-auth-layout__brand">{brand}</div> : null}
+          {children}
+          {footer ? <footer className="ph-auth-layout__footer">{footer}</footer> : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function AuthCard({ title, description, footer, children, className, ...props }: AuthCardProps) {
+  const titleId = useId();
+
+  return (
+    <section className={cn("ph-auth-card", className)} aria-labelledby={titleId} {...props}>
+      <header className="ph-auth-card__header">
+        <h1 id={titleId}>{title}</h1>
+        {description ? <p>{description}</p> : null}
+      </header>
+      <div className="ph-auth-card__body">{children}</div>
+      {footer ? <footer className="ph-auth-card__footer">{footer}</footer> : null}
+    </section>
+  );
+}
+
+export function AuthDivider({ children = "or continue with", className, ...props }: AuthDividerProps) {
+  return (
+    <div className={cn("ph-auth-divider", className)} {...props}>
+      <span>{children}</span>
+    </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/Badge.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type BadgeVariant =
@@ -12,7 +12,7 @@ export type BadgeVariant =
 
 export type BadgeSize = "sm" | "md";
 
-export interface BadgeProps {
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   variant?: BadgeVariant;
   size?: BadgeSize;
   children?: ReactNode;
@@ -34,22 +34,27 @@ const sizeMap: Record<BadgeSize, string> = {
   md: "",
 };
 
-export function Badge({
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
   variant = "neutral",
   size = "md",
   children,
   className,
-}: BadgeProps) {
+  ...props
+}, ref) {
   return (
     <span
+      ref={ref}
       className={cn(
         "ph-badge",
         variantMap[variant],
         sizeMap[size],
         className
       )}
+      {...props}
     >
       {children}
     </span>
   );
-}
+});
+
+Badge.displayName = "Badge";

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