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

package/src/components/sections/ToastShowcase.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ComponentDocs,
+  Button,
+  ShowcaseWrapper,
+  Toast,
+  ToastStack,
+} from "@/components/ui";
+
+const toasts = [
+  {
+    id: 1,
+    status: "info" as const,
+    title: "New deploy",
+    text: "Warehouse sync node rotated without downtime.",
+  },
+  {
+    id: 2,
+    status: "success" as const,
+    title: "Exports healthy",
+    text: "Snowflake incremental finished in 41s.",
+  },
+  {
+    id: 3,
+    status: "warning" as const,
+    title: "Approaching quota",
+    text: "Session replay capture at 92% monthly allocation.",
+  },
+  {
+    id: 4,
+    status: "danger" as const,
+    title: "Batch failed",
+    text: "Stripe connector returned HTTP 524 — backing off.",
+  },
+];
+
+export default function ToastShowcase() {
+  const [visible, setVisible] = useState<number[]>(toasts.map((t) => t.id));
+
+  const code = `import { Button, Toast, ToastStack } from "the-old-ui";
+
+<div className="ph-panel">
+  <div className="mb-4 flex items-center justify-between">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Snack stack demo</h3>
+    <Button variant="ghost" size="sm" onClick={() => setVisible(toasts.map((t) => t.id))}>
+      Restore all
+    </Button>
+  </div>
+  <ToastStack className="max-w-xl">
+    {toasts.map((toast) => {
+      if (!visible.includes(toast.id)) return null;
+      return (
+        <Toast
+          key={toast.id}
+          status={toast.status}
+          title={toast.title}
+          description={toast.text}
+          onDismiss={() => setVisible((v) => v.filter((x) => x !== toast.id))}
+        />
+      );
+    })}
+  </ToastStack>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Toasts"
+      description="Snack stack notifications with semantic colour variants and dismiss actions."
+      code={code}
+      filename="ToastExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "status", type: "info | success | warning | danger", defaultValue: "info", description: "Controls icon and colour treatment." },
+            { name: "title", type: "string", description: "Required toast heading." },
+            { name: "description", type: "string", description: "Optional supporting copy." },
+            { name: "onDismiss", type: "() => void", description: "Shows a close button when provided." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Snack stack demo</h3>
+          <Button variant="ghost" size="sm" onClick={() => setVisible(toasts.map((t) => t.id))}>
+            Restore all
+          </Button>
+        </div>
+        <ToastStack className="max-w-xl">
+          {toasts.map((toast) => {
+            if (!visible.includes(toast.id)) return null;
+            return (
+              <Toast
+                key={toast.id}
+                status={toast.status}
+                title={toast.title}
+                description={toast.text}
+                onDismiss={() => setVisible((v) => v.filter((x) => x !== toast.id))}
+              />
+            );
+          })}
+        </ToastStack>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/TooltipShowcase.tsx

@@ -0,0 +1,44 @@
+import { Button, ShowcaseWrapper } from "@/components/ui";
+
+export default function TooltipShowcase() {
+  const code = `import { Button } 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">
+      <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>
+
+    <span className="ph-tip cursor-help" title="Native title tooltip for zero-JS parity">
+      Dashed chrome (title attribute)
+    </span>
+  </div>
+</div>`;
+
+  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."
+      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">
+            <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>
+
+          <span className="ph-tip cursor-help" title="Native title tooltip for zero-JS parity">
+            Dashed chrome (title attribute)
+          </span>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/UtilityShowcase.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Breadcrumbs, ComponentDocs, Pagination, ShowcaseWrapper } from "@/components/ui";
+
+const breadcrumbTrail = [
+  { label: "Project", href: "#" },
+  { label: "Product analytics", href: "#" },
+  { label: "Trends", current: true },
+];
+
+const longBreadcrumbTrail = [
+  { label: "Organisation", href: "#" },
+  { label: "Data pipeline", href: "#" },
+  { label: "Warehouse", href: "#" },
+  { label: "Sources", href: "#" },
+  { label: "Stripe sync", current: true },
+];
+
+export default function UtilityShowcase() {
+  const code = `import { Breadcrumbs, Pagination } from "the-old-ui";
+
+<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+  <div className="ph-panel space-y-6">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Breadcrumbs</h3>
+
+    <Breadcrumbs items={breadcrumbTrail} />
+    <Breadcrumbs items={longBreadcrumbTrail} label="Long breadcrumb" />
+  </div>
+
+  <div className="ph-panel space-y-6">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Pagination</h3>
+
+    <Pagination page={1} totalPages={12} label="Table pagination" />
+    <Pagination page={5} totalPages={8} compact label="Compact pagination" />
+
+    <p className="text-xs text-ph-mutedtext">
+      Pair with table footers. Active page state and disabled arrows are handled by props.
+    </p>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Navigation utilities"
+      description="Breadcrumb and pagination primitives with accessibility and default styling built in."
+      code={code}
+      filename="UtilityExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "Breadcrumbs.items", type: "{ label; href?; current? }[]", description: "Trail entries rendered with separators and current page state." },
+            { name: "Pagination.page", type: "number", description: "Current page." },
+            { name: "Pagination.totalPages", type: "number", description: "Total page count." },
+            { name: "Pagination.compact", type: "boolean", defaultValue: "false", description: "Uses a narrower visible page window." },
+            { name: "Pagination.onPageChange", type: "(page: number) => void", description: "Called by page and arrow buttons." },
+          ]}
+        />
+      }
+    >
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        <div className="ph-panel space-y-6">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Breadcrumbs</h3>
+
+          <Breadcrumbs items={breadcrumbTrail} />
+          <Breadcrumbs items={longBreadcrumbTrail} label="Long breadcrumb" />
+        </div>
+
+        <div className="ph-panel space-y-6">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Pagination</h3>
+
+          <Pagination page={1} totalPages={12} label="Table pagination" />
+          <Pagination page={5} totalPages={8} compact label="Compact pagination" />
+
+          <p className="text-xs text-ph-mutedtext">
+            Pair with table footers. Active page state and disabled arrows are handled by props.
+          </p>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/ui/Accordion.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/cn";
+import { IconChevronDown } from "@/components/icons";
+
+interface AccordionItem {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultOpen?: string[];
+  className?: string;
+}
+
+export function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  className,
+}: AccordionProps) {
+  const [openItems, setOpenItems] = useState<Set<string>>(new Set(defaultOpen));
+
+  const toggleItem = (id: string) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (!allowMultiple) {
+          next.clear();
+        }
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className={cn("divide-y divide-ph-border rounded-xl border border-ph-border bg-ph-surface", className)}>
+      {items.map((item) => {
+        const isOpen = openItems.has(item.id);
+        return (
+          <div key={item.id} className="first:rounded-t-xl last:rounded-b-xl">
+            <button
+              type="button"
+              onClick={() => toggleItem(item.id)}
+              className="flex w-full items-center justify-between px-5 py-4 text-left transition hover:bg-ph-muted"
+            >
+              <span className="font-semibold text-ph-ink">{item.title}</span>
+              <IconChevronDown
+                className={cn(
+                  "h-5 w-5 text-ph-mutedtext transition-transform duration-200",
+                  isOpen && "rotate-180"
+                )}
+              />
+            </button>
+            <div
+              className={cn(
+                "grid transition-all duration-200",
+                isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              )}
+            >
+              <div className="overflow-hidden">
+                <div className="px-5 pb-4 text-ph-subtle">{item.content}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/Alert.tsx

@@ -0,0 +1,77 @@
+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 extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  status?: AlertStatus;
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  onDismiss?: () => void;
+  live?: AriaAttributes["aria-live"];
+  dismissLabel?: string;
+}
+
+const statusConfig: Record<AlertStatus, { icon: typeof IconInfo } > = {
+  info: { icon: IconInfo },
+  success: { icon: IconCheckCircle },
+  warning: { icon: IconExclamation },
+  danger: { icon: IconCancel },
+};
+
+const statusClassMap: Record<AlertStatus, string > = {
+  info: "ph-alert-info",
+  success: "ph-alert-success",
+  warning: "ph-alert-warning",
+  danger: "ph-alert-danger",
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({
+  status = "info",
+  title,
+  description,
+  icon,
+  children,
+  className,
+  onDismiss,
+  live,
+  dismissLabel = "Dismiss notification",
+  role,
+  ...props
+}, ref) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <div
+      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="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}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="ph-alert-dismiss"
+          aria-label={dismissLabel}
+        >
+          <IconClose className="h-4 w-4" aria-hidden />
+        </button>
+      )}
+    </div>
+  );
+});
+
+Alert.displayName = "Alert";

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

@@ -0,0 +1,97 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "offline" | "away" | "busy";
+
+export interface AvatarProps extends ComponentPropsWithoutRef<"div"> {
+  /** Text initials or label (e.g. "JD") */
+  label?: string;
+  /** Optional icon or image */
+  icon?: ReactNode;
+  /** Size preset */
+  size?: AvatarSize;
+  /** Background colour class */
+  color?: string;
+  /** Status indicator dot */
+  status?: AvatarStatus;
+  /** Badge count or text */
+  badge?: string;
+}
+
+const sizeMap: Record<AvatarSize, string> = {
+  xs: "h-8 w-8 text-[10px]",
+  sm: "h-10 w-10 text-xs",
+  md: "h-12 w-12 text-base",
+  lg: "h-16 w-16 text-xl",
+  xl: "h-24 w-24 text-3xl",
+};
+
+const statusMap: Record<AvatarStatus, string> = {
+  online: "bg-emerald-500",
+  offline: "bg-ph-mutedtext",
+  away: "bg-amber-400",
+  busy: "bg-ph-danger",
+};
+
+export function Avatar({
+  label,
+  icon,
+  size = "md",
+  color = "bg-ph-brand text-white",
+  status,
+  badge,
+  className,
+  ...props
+}: AvatarProps) {
+  return (
+    <div className={cn("relative inline-flex shrink-0", className)} {...props}>
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-full border border-ph-border font-bold shadow-ph",
+          sizeMap[size],
+          color,
+        )}
+      >
+        {icon || label}
+      </div>
+      {status && (
+        <span
+          className={cn(
+            "absolute bottom-0 right-1 h-2.5 w-2.5 rounded-full border-2 border-white",
+            statusMap[status],
+          )}
+        />
+      )}
+      {badge && (
+        <span className="absolute -bottom-1 -right-1 flex min-w-[22px] items-center justify-center rounded-full bg-ph-brand px-1.5 py-px text-[10px] font-bold text-white">
+          {badge}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export interface AvatarGroupProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+  max?: number;
+}
+
+export function AvatarGroup({ children, max, className, ...props }: AvatarGroupProps) {
+  const items = Array.isArray(children) ? children : [children];
+  const visible = max ? items.slice(0, max) : items;
+  const remaining = max ? items.length - max : 0;
+
+  return (
+    <div className={cn("-space-x-3 flex rtl:space-x-reverse", className)} {...props}>
+      {visible}
+      {remaining > 0 && (
+        <Avatar
+          label={`+${remaining}`}
+          size="md"
+          color="bg-ph-toolbar text-ph-subtle"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type BadgeVariant =
+  | "brand"
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "outline";
+
+export type BadgeSize = "sm" | "md";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children?: ReactNode;
+  className?: string;
+}
+
+const variantMap: Record<BadgeVariant, string> = {
+  brand: "ph-badge-brand",
+  neutral: "ph-badge-neutral",
+  success: "ph-badge-success",
+  warning: "ph-badge-warning",
+  danger: "ph-badge-danger",
+  info: "ph-badge-info",
+  outline: "ph-badge-outline",
+};
+
+const sizeMap: Record<BadgeSize, string> = {
+  sm: "text-[10px] px-1.5 py-0.5",
+  md: "",
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge({
+  variant = "neutral",
+  size = "md",
+  children,
+  className,
+  ...props
+}, ref) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        "ph-badge",
+        variantMap[variant],
+        sizeMap[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+});
+
+Badge.displayName = "Badge";