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

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,68 @@
+import type { ReactNode } from "react";
+import { IconCancel, IconCheckCircle, IconErrorOutline, IconExclamation } from "@/components/icons";
+import { cn } from "@/lib/cn";
+
+export type AlertStatus = "info" | "success" | "warning" | "danger";
+
+export interface AlertProps {
+  status?: AlertStatus;
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  onDismiss?: () => void;
+}
+
+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 statusClassMap: Record<AlertStatus, string > = {
+  info: "ph-alert-info",
+  success: "ph-alert-success",
+  warning: "ph-alert-warning",
+  danger: "ph-alert-danger",
+};
+
+export function Alert({
+  status = "info",
+  title,
+  description,
+  icon,
+  children,
+  className,
+  onDismiss,
+}: AlertProps) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <div
+      role="alert"
+      className={cn("ph-alert", statusClassMap[status], className)}
+    >
+      {icon ?? <Icon className={cn("mt-0.5 h-5 w-5 shrink-0", config.color)} />}
+      <div className="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="shrink-0 rounded-md p-1 text-ph-subtle hover:bg-black/5 hover:text-ph-ink"
+          aria-label="Dismiss"
+        >
+          <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>
+        </button>
+      )}
+    </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,55 @@
+import 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 {
+  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 function Badge({
+  variant = "neutral",
+  size = "md",
+  children,
+  className,
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "ph-badge",
+        variantMap[variant],
+        sizeMap[size],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/ui/Button.tsx

@@ -0,0 +1,110 @@
+import type { ButtonHTMLAttributes, 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;
+}
+
+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",
+};
+
+/**
+ * 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({
+  variant = "secondary",
+  size = "md",
+  shape = "default",
+  outline = false,
+  split = false,
+  icon,
+  sideIcon,
+  className,
+  children,
+  type = "button",
+  ...props
+}: ButtonProps) {
+  const usesLemonChrome = variant === "primary" || variant === "secondary";
+
+  const content = usesLemonChrome ? (
+    <ButtonChrome label={children} icon={icon} sideIcon={sideIcon} split={split} />
+  ) : (
+    <>
+      {icon != null ? <span className="ph-btn-icon">{icon}</span> : null}
+      {children != null ? <span className="ph-btn-label">{children}</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
+      type={type}
+      className={cn(
+        "ph-btn",
+        outline && "ph-btn-outline",
+        variantClass[variant],
+        sizeClass[size],
+        shapeClass[shape],
+        split && "ph-btn-split",
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </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;
+}
+
+/** Inner face for Lemon primary/secondary — keeps labels above ::after ridge. */
+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,116 @@
+"use client";
+
+import { useState } from "react";
+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}
+          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>
+        </button>
+        <span className="text-sm font-semibold text-ph-ink">
+          {monthNames[month]} {year}
+        </span>
+        <button
+          type="button"
+          onClick={nextMonth}
+          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>
+        </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-white 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>
+  );
+}