@xenide-io/the-old-ui-theme 0.4.4 → 0.4.6

package/src/components/sections/CardShowcase.tsx

@@ -1,159 +0,0 @@
-import { Badge, Button, Card, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function CardShowcase() {
-  const code = `import { Badge, Button, Card } from "@xenide-io/the-old-ui-theme";
-
-<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-  <Card
-    title="Insight saved"
-    description="A quiet, static surface. Depth is reserved for interactive or elevated content."
-    actions={
-      <>
-        <Button variant="secondary" outline>
-          Discard
-        </Button>
-        <Button variant="primary">Open</Button>
-      </>
-    }
-  />
-
-  <Card
-    title="With visual"
-    description="Media sits flush to the card edge with a semantic divider."
-    media={<div className="flex h-40 items-center justify-center bg-gradient-to-br from-orange-400 via-ph-brand to-ph-blue text-lg font-bold text-white">Hero stripe</div>}
-    actions={
-      <Button variant="primary" size="sm">
-        View funnel
-      </Button>
-    }
-  />
-
-  <Card
-    title={
-      <>
-        Releases <Badge variant="brand">NEW</Badge>
-      </>
-    }
-    description="Dense header row with badge + actions on the trailing edge."
-    actions={
-      <>
-        <Button variant="secondary" size="sm">
-          Docs
-        </Button>
-        <Button variant="primary" size="sm">
-          Enable
-        </Button>
-      </>
-    }
-  />
-
-  <Card
-    variant="highlighted"
-    title={<span className="text-ph-brand">Highlighted</span>}
-    description="Use tinted fill + accent border instead of generic neon glass cards."
-    actions={<Button variant="primary" size="sm">Acknowledge</Button>}
-  />
-
-  <Card
-    variant="outlined"
-    title="Panel inset"
-    description="Grey trays on canvas — mirrors secondary surfaces in-app."
-    actions={<Button variant="primary" outline>Inspect</Button>}
-  />
-
-  <Card
-    interactive
-    title="Interactive surface"
-    description="Hover depth is opt-in for cards containing an action."
-    actions={<Button variant="tertiary">Review</Button>}
-  />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Cards"
-      description="Static by default, with explicit elevated, highlighted, and interactive treatments."
-      code={code}
-      filename="CardExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "variant", type: "default | outlined | elevated | highlighted", defaultValue: "default", description: "Controls the default chrome without requiring classes." },
-            { name: "title", type: "ReactNode", description: "Optional header title." },
-            { name: "description", type: "ReactNode", description: "Optional supporting copy." },
-            { name: "actions", type: "ReactNode", description: "Button row rendered with card action spacing." },
-            { name: "media", type: "ReactNode", description: "Optional visual block rendered above the card body." },
-            { name: "interactive", type: "boolean", defaultValue: "false", description: "Adds hover and focus-within depth for a card containing an action." },
-            { name: "titleAs", type: "h2 | h3 | h4", defaultValue: "h3", description: "Selects the semantic heading level without changing the card style." },
-          ]}
-        />
-      }
-    >
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <Card
-          title="Insight saved"
-          description="A quiet, static surface. Depth is reserved for interactive or elevated content."
-          actions={
-            <>
-              <Button variant="secondary" outline>
-                Discard
-              </Button>
-              <Button variant="primary">Open</Button>
-            </>
-          }
-        />
-
-        <Card
-          title="With visual"
-          description="Media sits flush to the card edge with a semantic divider."
-          media={<div className="flex h-40 items-center justify-center bg-gradient-to-br from-orange-400 via-ph-brand to-ph-blue text-lg font-bold text-white">Hero stripe</div>}
-          actions={
-            <Button variant="primary" size="sm">
-              View funnel
-            </Button>
-          }
-        />
-
-        <Card
-          title={
-            <>
-              Releases <Badge variant="brand">NEW</Badge>
-            </>
-          }
-          description="Dense header row with badge + actions on the trailing edge."
-          actions={
-            <>
-              <Button variant="secondary" size="sm">
-                Docs
-              </Button>
-              <Button variant="primary" size="sm">
-                Enable
-              </Button>
-            </>
-          }
-        />
-
-        <Card
-          variant="highlighted"
-          title={<span className="text-ph-brand">Highlighted</span>}
-          description="Use tinted fill + accent border instead of generic neon glass cards."
-          actions={<Button variant="primary" size="sm">Acknowledge</Button>}
-        />
-
-        <Card
-          variant="outlined"
-          title="Panel inset"
-          description="Grey trays on canvas — mirrors secondary surfaces in-app."
-          actions={<Button variant="primary" outline>Inspect</Button>}
-        />
-
-        <Card
-          interactive
-          title="Interactive surface"
-          description="Hover depth is opt-in for cards containing an action."
-          actions={<Button variant="tertiary">Review</Button>}
-        />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CodeMockupShowcase.tsx

@@ -1,56 +0,0 @@
-import { IconQueryEditor } from "@/components/icons";
-import { ComponentDocs, ShowcaseWrapper, Terminal } from "@/components/ui";
-
-export default function CodeMockupShowcase() {
-  const code = `import { Terminal } from "the-old-ui";
-
-<Terminal
-  title="sandbox · posthog-wizard"
-  lines={[
-    { text: "❯ bun add posthog-js", color: "text-neutral-600" },
-    { text: "● added posthog-js@1...", color: "text-emerald-400" },
-    { text: "❯ POSTHOG_KEY=...", color: "text-neutral-600" },
-  ]}
-/>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Terminal capture"
-      description="Terminal and replay shells for documentation, demos, and embedded developer flows."
-      code={code}
-      filename="TerminalExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "title", type: "string", description: "Window title in the header." },
-            { name: "lines", type: "Array<{ text; color? }>", description: "Terminal lines to render." },
-            { name: "children", type: "ReactNode", description: "Custom content instead of lines." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-10">
-        <Terminal
-          title="sandbox · posthog-wizard"
-          lines={[
-            { text: "❯ bun add posthog-js", color: "text-neutral-600" },
-            { text: "● added posthog-js@1...", color: "text-emerald-400" },
-            { text: "❯ POSTHOG_KEY=...", color: "text-neutral-600" },
-          ]}
-        />
-
-        <div className="rounded-xl border border-ph-border shadow-ph-md">
-          <header className="relative flex items-center justify-center border-b border-ph-border px-10 py-3 text-[11px] font-semibold text-ph-mutedtext">
-            <span className="absolute left-5 top-4 h-px w-[88%] rounded-full bg-ph-border opacity-70" />
-            Replay preview
-          </header>
-          <div className="flex flex-col items-center gap-5 bg-ph-toolbar px-6 py-14 text-ph-subtle">
-            <IconQueryEditor className="h-14 w-14 opacity-50" />
-            <p className="text-center font-semibold text-ph-ink">Session snapshot shell</p>
-            <p className="max-w-xs text-center text-xs">Mirrors bordered frame around insight embeds rather than DaisyUI mocks.</p>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/ColorPalette.tsx

@@ -1,117 +0,0 @@
-import type { CSSProperties } from "react";
-import { ShowcaseWrapper } from "@/components/ui";
-
-const brandSurface: { label: string; token: string; style: CSSProperties; textClass: string }[] = [
-  { label: "Brand orange", token: "--ph-accent", style: { background: "var(--ph-accent)" }, textClass: "text-white" },
-  { label: "Brand blue", token: "--ph-blue", style: { background: "var(--ph-blue)" }, textClass: "text-white" },
-  { label: "Purple accent", token: "--ph-purple", style: { background: "var(--ph-purple)" }, textClass: "text-white" },
-  { label: "Canvas (3000-50)", token: "--ph-canvas", style: { background: "var(--ph-canvas)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
-  { label: "Muted surface", token: "--ph-muted", style: { background: "var(--ph-muted)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
-  { label: "White surface", token: "--ph-surface", style: { background: "var(--ph-surface)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
-  { label: "Border", token: "--ph-border", style: { background: "var(--ph-border)" }, textClass: "text-ph-ink" },
-  { label: "Success", token: "--ph-success", style: { background: "var(--ph-success)" }, textClass: "text-white" },
-  { label: "Warning", token: "--ph-warning", style: { background: "var(--ph-warning)" }, textClass: "text-white" },
-  { label: "Danger", token: "--ph-danger", style: { background: "var(--ph-danger)" }, textClass: "text-white" },
-  { label: "Info", token: "--ph-info", style: { background: "var(--ph-info)" }, textClass: "text-white" },
-];
-
-const dataSeries = [1, 2, 3, 4, 5, 6, 7].map((n) => ({
-  label: `Data ${n}`,
-  token: `--ph-data-${n}`,
-  style: { background: `var(--ph-data-${n})` } as CSSProperties,
-  textClass: "text-white",
-}));
-
-const productRail = [
-  { label: "Session replay", token: "--ph-product-session-replay", style: { background: "var(--ph-product-session-replay)" } as CSSProperties },
-  { label: "Product analytics", token: "--ph-product-product-analytics", style: { background: "var(--ph-product-product-analytics)" } as CSSProperties },
-  { label: "Data pipeline", token: "--ph-product-data-pipeline", style: { background: "var(--ph-product-data-pipeline)" } as CSSProperties },
-  { label: "Feature flags", token: "--ph-product-feature-flags", style: { background: "var(--ph-product-feature-flags)" } as CSSProperties },
-  { label: "Experiments", token: "--ph-product-experiments", style: { background: "var(--ph-product-experiments)" } as CSSProperties },
-  { label: "Data warehouse", token: "--ph-product-data-warehouse", style: { background: "var(--ph-product-data-warehouse)" } as CSSProperties },
-  { label: "Surveys", token: "--ph-product-surveys", style: { background: "var(--ph-product-surveys)" } as CSSProperties },
-].map((row) => ({ ...row, textClass: "text-white" }));
-
-function SwatchGrid({
-  title,
-  description,
-  items,
-}: {
-  title: string;
-  description: string;
-  items: { label: string; token: string; style: CSSProperties; textClass: string }[];
-}) {
-  return (
-    <div>
-      <h3 className="mb-1 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">{title}</h3>
-      <p className="mb-3 text-sm text-ph-subtle">{description}</p>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-        {items.map((c) => (
-          <div
-            key={c.token}
-            className={`rounded-[var(--ph-radius-app)] p-5 ${c.textClass}`}
-            style={{
-              ...c.style,
-              boxShadow: "var(--ph-shadow-elevation-3000)",
-            }}
-          >
-            <p className="text-sm font-semibold">{c.label}</p>
-            <p className="mt-1 font-mono text-[11px] opacity-90">{c.token}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default function ColorPalette() {
-  const code = `/* CSS variables update with the active theme */
-
-// Brand & surfaces
-background: var(--ph-accent);     // Brand orange
-background: var(--ph-canvas);     // Canvas
-background: var(--ph-surface);    // White surface
-border-color: var(--ph-border);   // Hairline borders
-
-// Semantic status
-color: var(--ph-success);         // Success green
-color: var(--ph-danger);          // Danger red
-color: var(--ph-warning);         // Warning amber
-color: var(--ph-info);            // Info blue
-
-// Data series (charts)
-background: var(--ph-data-1);     // Primary
-background: var(--ph-data-2);     // Secondary
-// ... up to ph-data-7
-
-// Product rail
-background: var(--ph-product-session-replay);
-background: var(--ph-product-product-analytics);`;
-
-  return (
-    <ShowcaseWrapper
-      title="Colour tokens"
-      description="Tokens update with the Theme select in the header — surfaces, accents, chart series, and product rail colours all swap together."
-      code={code}
-      filename="Tokens.css"
-    >
-      <div className="space-y-10">
-        <SwatchGrid
-          title="Brand & surfaces"
-          description="Core UI chrome and semantic status hues."
-          items={brandSurface}
-        />
-        <SwatchGrid
-          title="Insight data series"
-          description="Default trend / breakdown palette."
-          items={dataSeries}
-        />
-        <SwatchGrid
-          title="Product rail"
-          description="Saturated nav / marketing tiles."
-          items={productRail}
-        />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CommandPaletteShowcase.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, CommandPalette, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-import { IconSearch, IconBolt, IconTuning, IconHome, IconPerson } from "@/components/icons";
-
-export default function CommandPaletteShowcase() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const items = [
-    { id: "1", label: "Go to Dashboard", shortcut: "Cmd+D", icon: <IconHome className="h-5 w-5" />, onSelect: () => {} },
-    { id: "2", label: "Search Events", shortcut: "Cmd+K", icon: <IconSearch className="h-5 w-5" />, onSelect: () => {} },
-    { id: "3", label: "Run Query", shortcut: "Cmd+R", icon: <IconBolt className="h-5 w-5" />, onSelect: () => {} },
-    { id: "4", label: "Settings", shortcut: "Cmd+,", icon: <IconTuning className="h-5 w-5" />, onSelect: () => {} },
-    { id: "5", label: "Profile", icon: <IconPerson className="h-5 w-5" />, onSelect: () => {} },
-  ];
-
-  const code = `import { Button, CommandPalette } from "the-old-ui";
-import { IconSearch, IconBolt, IconTuning, IconHome, IconPerson } from "the-old-ui";
-
-<div className="ph-panel">
-  <Button onClick={() => setIsOpen(true)}>Open Command Palette</Button>
-  <CommandPalette items={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Command Palette"
-      description="Application command launcher with controlled open state and typed item actions."
-      code={code}
-      filename="CommandPaletteExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "items", type: "{ id; label; shortcut?; icon?; onSelect }[]", description: "Commands shown in the palette." },
-            { name: "isOpen", type: "boolean", description: "Controls palette visibility." },
-            { name: "onClose", type: "() => void", description: "Called by escape, backdrop, or selection." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <Button onClick={() => setIsOpen(true)}>Open Command Palette</Button>
-        <CommandPalette items={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CountdownShowcase.tsx

@@ -1,43 +0,0 @@
-import { ShowcaseWrapper } from "@/components/ui";
-
-export default function CountdownShowcase() {
-  const code = `
-
-<div className="ph-panel">
-  <p className="mb-6 text-sm text-ph-subtle">Static split — swap for synced timers once you plug in real experiment deadlines.</p>
-  <div className="flex flex-wrap justify-center gap-3 text-ph-ink sm:justify-start">
-    {[
-      { v: "04", label: "Days" },
-      { v: "12", label: "Hrs" },
-      { v: "33", label: "Min" },
-      { v: "09", label: "Sec" },
-    ].map(({ v, label }) => (
-      <div key={label} className="flex min-w-[4.75rem] flex-col items-center rounded-xl border border-ph-border bg-ph-surface px-4 py-3 shadow-ph">
-        <span className="text-3xl font-bold tabular-nums">{v}</span>
-        <span className="text-[11px] font-semibold uppercase tracking-wider text-ph-mutedtext">{label}</span>
-      </div>
-    ))}
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper title="Countdown motif" code={code} filename="CountdownExample.tsx">
-      <div className="ph-panel">
-        <p className="mb-6 text-sm text-ph-subtle">Static split — swap for synced timers once you plug in real experiment deadlines.</p>
-        <div className="flex flex-wrap justify-center gap-3 text-ph-ink sm:justify-start">
-          {[
-            { v: "04", label: "Days" },
-            { v: "12", label: "Hrs" },
-            { v: "33", label: "Min" },
-            { v: "09", label: "Sec" },
-          ].map(({ v, label }) => (
-            <div key={label} className="flex min-w-[4.75rem] flex-col items-center rounded-xl border border-ph-border bg-ph-surface px-4 py-3 shadow-ph">
-              <span className="text-3xl font-bold tabular-nums">{v}</span>
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-ph-mutedtext">{label}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/DiffShowcase.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ShowcaseWrapper } from "@/components/ui";
-
-/** Lightweight before/after — PostHog product diffs screenshots in Visual Review Playwright suites. */
-
-export default function DiffShowcase() {
-  const [pct, setPct] = useState(50);
-
-  const code = `
-
-<div className="ph-panel max-w-3xl">
-  <label className="mb-6 flex items-center gap-4 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">
-    Position
-    <input type="range" min={0} max={100} value={pct} onChange={(e) => setPct(Number(e.target.value))} className="flex-1" />
-    <span className="tabular-nums text-ph-ink">{pct}%</span>
-  </label>
-  <div className="relative aspect-video overflow-hidden rounded-xl border border-ph-border shadow-ph-md">
-    <div className="absolute inset-0 grid place-content-center bg-ph-toolbar text-xs font-semibold uppercase text-ph-mutedtext">
-      After · lightened neutral surfaces
-    </div>
-    <div
-      className="absolute inset-y-0 left-0 overflow-hidden bg-ph-muted"
-      style={{
-        clipPath: \`inset(0 \${100 - pct}% 0 0)\`,
-      }}
-    >
-      <div className="grid h-full place-content-center text-xs font-semibold uppercase text-ph-ink">
-        Before · richer contrast rails
-      </div>
-    </div>
-    <span
-      className="pointer-events-none absolute inset-y-0 w-px bg-ph-surface"
-      style={{ left: \`\${pct}%\`, boxShadow: "0 0 0 1px hsl(0deg 0% 0% / .15)" }}
-    />
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper title="Diff slider" code={code} filename="DiffExample.tsx">
-      <div className="ph-panel max-w-3xl">
-        <label className="mb-6 flex items-center gap-4 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">
-          Position
-          <input type="range" min={0} max={100} value={pct} onChange={(e) => setPct(Number(e.target.value))} className="flex-1" />
-          <span className="tabular-nums text-ph-ink">{pct}%</span>
-        </label>
-        <div className="relative aspect-video overflow-hidden rounded-xl border border-ph-border shadow-ph-md">
-          <div className="absolute inset-0 grid place-content-center bg-ph-toolbar text-xs font-semibold uppercase text-ph-mutedtext">
-            After · lightened neutral surfaces
-          </div>
-          <div
-            className="absolute inset-y-0 left-0 overflow-hidden bg-ph-muted"
-            style={{
-              clipPath: `inset(0 ${100 - pct}% 0 0)`,
-            }}
-          >
-            <div className="grid h-full place-content-center text-xs font-semibold uppercase text-ph-ink">
-              Before · richer contrast rails
-            </div>
-          </div>
-          <span
-            className="pointer-events-none absolute inset-y-0 w-px bg-ph-surface"
-            style={{ left: `${pct}%`, boxShadow: "0 0 0 1px hsl(0deg 0% 0% / .15)" }}
-          />
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/DrawerShowcase.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  IconCohort,
-  IconCumulativeChart,
-  IconFlag,
-  IconFlask,
-  IconHome,
-  IconPanelRight,
-  IconTuning,
-} from "@/components/icons";
-import { Button, ComponentDocs, Drawer, ShowcaseWrapper } from "@/components/ui";
-
-const navItems = [
-  { icon: IconHome, label: "Dashboard" },
-  { icon: IconCumulativeChart, label: "Insights" },
-  { icon: IconCohort, label: "Persons" },
-  { icon: IconFlag, label: "Feature flags" },
-  { icon: IconFlask, label: "Experiments" },
-  { icon: IconTuning, label: "Settings" },
-];
-
-export default function DrawerShowcase() {
-  const [open, setOpen] = useState(false);
-
-  const code = `import { IconCohort, IconCumulativeChart, IconFlag, IconFlask, IconHome, IconPanelRight, IconTuning } from "the-old-ui";
-import { Button, Drawer } from "the-old-ui";
-
-<div className="ph-panel">
-  <Button
-    variant="primary"
-    icon={<IconPanelRight className="h-4 w-4" aria-hidden />}
-    onClick={() => setOpen(true)}
-  >
-    Inspect graph
-  </Button>
-
-  <Drawer open={open} onClose={() => setOpen(false)} title="Insight controls">
-    <nav className="flex flex-col gap-1 px-3 py-4">
-      {navItems.map((item) => {
-        const Icon = item.icon;
-        return (
-          <button key={item.label} type="button" className="flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium text-ph-subtle transition hover:bg-ph-muted">
-            <Icon className="h-4 w-4 shrink-0" />
-            {item.label}
-          </button>
-        );
-      })}
-    </nav>
-  </Drawer>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Drawers"
-      description="Slide-out panels with overlay backdrop — useful for secondary navigation, detail views, or configuration panels."
-      code={code}
-      filename="DrawerExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "open", type: "boolean", defaultValue: "false", description: "Controls drawer visibility." },
-            { name: "onClose", type: "() => void", description: "Called by backdrop and close button." },
-            { name: "side", type: "left | right", defaultValue: "right", description: "Which side the drawer enters from." },
-            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Controls drawer width." },
-            { name: "title", type: "ReactNode", description: "Optional header title." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <Button
-          variant="primary"
-          icon={<IconPanelRight className="h-4 w-4" aria-hidden />}
-          onClick={() => setOpen(true)}
-        >
-          Inspect graph
-        </Button>
-
-        <Drawer open={open} onClose={() => setOpen(false)} title="Insight controls">
-          <nav className="flex flex-col gap-1 px-3 py-4">
-            {navItems.map((item) => {
-              const Icon = item.icon;
-              return (
-                <button key={item.label} type="button" className="flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium text-ph-subtle transition hover:bg-ph-muted">
-                  <Icon className="h-4 w-4 shrink-0" />
-                  {item.label}
-                </button>
-              );
-            })}
-          </nav>
-        </Drawer>
-      </div>
-    </ShowcaseWrapper>
-  );
-}