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

package/src/components/sections/AvatarShowcase.tsx

@@ -0,0 +1,80 @@
+import { Avatar, AvatarGroup, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
+
+export default function AvatarShowcase() {
+  const code = `import { Avatar, AvatarGroup } from "the-old-ui";
+
+<div className="grid gap-8 lg:grid-cols-2">
+  <div className="ph-panel space-y-4">
+    <h3>Sizes</h3>
+    <Avatar label="XL" size="xl" color="bg-ph-brand text-white" />
+    <Avatar label="LG" size="lg" color="bg-ph-blue text-white" />
+    <Avatar label="MD" size="md" color="bg-ph-purple text-white" />
+    <Avatar label="SM" size="sm" color="bg-ph-toolbar text-ph-ink" />
+  </div>
+
+  <div className="ph-panel space-y-5">
+    <h3>Stacked collaborators</h3>
+    <AvatarGroup>
+      <Avatar label="MJ" color="bg-orange-400 text-orange-950" />
+      <Avatar label="AR" color="bg-sky-500 text-white" />
+      <Avatar label="CK" color="bg-violet-600 text-white" />
+    </AvatarGroup>
+
+    <div className="flex gap-4">
+      <Avatar label="ON" color="bg-emerald-200 text-emerald-950" status="online" />
+      <Avatar label="JD" color="bg-ph-muted text-ph-ink" status="offline" />
+      <Avatar label="CP" color="bg-amber-200 text-amber-950" badge="12" />
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Avatars"
+      description="Reusable avatar component with sizes, status indicators, badges, and group stacking."
+      code={code}
+      filename="AvatarExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "label", type: "string", description: "Text initials or label." },
+            { name: "size", type: "xs | sm | md | lg | xl", defaultValue: "md", description: "Avatar size." },
+            { name: "color", type: "string", defaultValue: "bg-ph-brand text-white", description: "Tailwind colour classes." },
+            { name: "status", type: "online | offline | away | busy", description: "Status indicator dot." },
+            { name: "badge", type: "string", description: "Badge count/text." },
+            { name: "icon", type: "ReactNode", description: "Optional icon or image." },
+          ]}
+        />
+      }
+    >
+      <div className="grid gap-8 lg:grid-cols-2">
+        <div className="ph-panel space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes</h3>
+          <div className="flex flex-wrap items-end gap-5">
+            <Avatar label="XL" size="xl" color="bg-ph-brand text-white" />
+            <Avatar label="LG" size="lg" color="bg-ph-blue text-white" />
+            <Avatar label="MD" size="md" color="bg-ph-purple text-white" />
+            <Avatar label="SM" size="sm" color="bg-ph-toolbar text-ph-ink" />
+            <Avatar label="XS" size="xs" color="bg-ph-muted text-ph-ink" />
+          </div>
+        </div>
+
+        <div className="ph-panel space-y-5">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Stacked collaborators</h3>
+          <AvatarGroup max={3}>
+            <Avatar label="MJ" color="bg-orange-400 text-orange-950" />
+            <Avatar label="AR" color="bg-sky-500 text-white" />
+            <Avatar label="CK" color="bg-violet-600 text-white" />
+            <Avatar label="+9" color="bg-ph-toolbar text-ph-subtle" />
+          </AvatarGroup>
+
+          <div className="flex gap-4">
+            <Avatar label="ON" color="bg-emerald-200 text-emerald-950" status="online" />
+            <Avatar label="JD" color="bg-ph-muted text-ph-ink" status="offline" />
+            <Avatar label="CP" color="bg-amber-200 text-amber-950" badge="12" />
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/BadgeShowcase.tsx

@@ -0,0 +1,65 @@
+import { Badge, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
+
+export default function BadgeShowcase() {
+  const code = `import { Badge } from "@xenide-io/the-old-ui-theme";
+
+<div className="ph-panel space-y-6">
+  <div>
+    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic</h3>
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="brand">Beta</Badge>
+      <Badge variant="neutral">Archived</Badge>
+      <Badge variant="success">Live</Badge>
+      <Badge variant="warning">Queued</Badge>
+      <Badge variant="danger">Failed</Badge>
+      <Badge variant="info">Docs</Badge>
+    </div>
+  </div>
+  <div>
+    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Outline</h3>
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="outline">Feature flag</Badge>
+      <Badge variant="outline">Experiment</Badge>
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Badges"
+      description="Use badges for compact status, category, and product metadata. Defaults work without classes; use props for variants."
+      code={code}
+      filename="BadgeExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "variant", type: "brand | neutral | success | warning | danger | info | outline", defaultValue: "neutral", description: "Controls semantic colour and border treatment." },
+            { name: "size", type: "sm | md", defaultValue: "md", description: "Use sm for dense tables or compact nav." },
+            { name: "className", type: "string", description: "Optional escape hatch for layout-only overrides." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel space-y-6">
+        <div>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic</h3>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="brand">Beta</Badge>
+            <Badge variant="neutral">Archived</Badge>
+            <Badge variant="success">Live</Badge>
+            <Badge variant="warning">Queued</Badge>
+            <Badge variant="danger">Failed</Badge>
+            <Badge variant="info">Docs</Badge>
+          </div>
+        </div>
+        <div>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Outline</h3>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline">Feature flag</Badge>
+            <Badge variant="outline">Experiment</Badge>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/ButtonShowcase.tsx

@@ -0,0 +1,308 @@
+import {
+  IconDownload,
+  IconPlayCircle,
+  IconPlus,
+  IconSave,
+  IconSubArrowRight,
+  IconTrash,
+  IconUpload,
+} from "@/components/icons";
+import { Button, ComponentDocs, DropdownButton, DropdownItem, Panel, ShowcaseWrapper } from "@/components/ui";
+
+export default function ButtonShowcase() {
+  const code = `import { Button, DropdownButton, DropdownItem, IconDownload, IconPlayCircle, IconPlus, IconSave, IconSubArrowRight, IconTrash, IconUpload, Panel } from "@xenide-io/the-old-ui-theme";
+
+<div className="space-y-8">
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Toolbar (like HogQL / insights)</h3>
+    <div className="flex flex-wrap items-center gap-2 rounded-lemon border border-ph-border bg-ph-surface p-3 shadow-elevation-3000">
+      <DropdownButton
+        label="Run"
+        variant="primary"
+        split
+        icon={<IconPlayCircle className="h-4 w-4" aria-hidden />}
+      >
+        <DropdownItem>Run now</DropdownItem>
+        <DropdownItem>Run as new insight…</DropdownItem>
+      </DropdownButton>
+      <DropdownButton
+        label="Variables"
+        variant="secondary"
+        icon={
+          <span className="font-mono text-sm leading-none" aria-hidden>
+            {"{}"}
+          </span>
+        }
+      >
+        <DropdownItem>Manage variables…</DropdownItem>
+        <DropdownItem>Insert column…</DropdownItem>
+      </DropdownButton>
+      <DropdownButton label="Filters" variant="secondary" panelClassName="min-w-[13rem]">
+        <DropdownItem>Add filter group</DropdownItem>
+        <DropdownItem>Clear all filters</DropdownItem>
+        <DropdownItem className="text-ph-mutedtext">Save as cohort…</DropdownItem>
+      </DropdownButton>
+      <Button variant="secondary" size="sm" shape="square" aria-label="Layout">
+        <span className="flex gap-0.5" aria-hidden>
+          <span className="h-4 w-1.5 rounded-sm bg-current" />
+          <span className="h-4 w-1.5 rounded-sm bg-current opacity-40" />
+        </span>
+      </Button>
+    </div>
+  </Panel>
+
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon 3000 primary & secondary</h3>
+    <div className="flex flex-wrap gap-3">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="primary" outline>
+        Primary outline
+      </Button>
+      <Button variant="secondary" outline>
+        Secondary outline
+      </Button>
+    </div>
+  </Panel>
+
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Marketing signal vs in-app</h3>
+    <div className="flex flex-wrap gap-3">
+      <Button variant="primary">App primary (3000)</Button>
+      <Button variant="signal">Marketing signal</Button>
+    </div>
+  </Panel>
+
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic solids</h3>
+    <div className="flex flex-wrap gap-3">
+      <Button variant="accent">Accent</Button>
+      <Button variant="neutral">Neutral</Button>
+      <Button variant="info">Info</Button>
+      <Button variant="success">Success</Button>
+      <Button variant="warning">Warning</Button>
+      <Button variant="danger">Danger</Button>
+    </div>
+  </Panel>
+
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">With icons</h3>
+    <div className="flex flex-wrap gap-3">
+      <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />}>
+        New project
+      </Button>
+      <Button variant="primary" sideIcon={<IconSubArrowRight className="h-4 w-4" aria-hidden />}>
+        Continue
+      </Button>
+      <Button variant="secondary" icon={<IconDownload className="h-4 w-4" aria-hidden />}>
+        Export
+      </Button>
+      <Button variant="success" icon={<IconSave className="h-4 w-4" aria-hidden />}>
+        Save
+      </Button>
+      <Button variant="danger" icon={<IconTrash className="h-4 w-4" aria-hidden />}>
+        Delete
+      </Button>
+      <Button variant="ghost" icon={<IconUpload className="h-4 w-4" aria-hidden />}>
+        Upload
+      </Button>
+    </div>
+  </Panel>
+
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes & shapes</h3>
+    <div className="flex flex-wrap items-end gap-3">
+      <Button variant="primary" size="xs">
+        XS
+      </Button>
+      <Button variant="primary" size="sm">
+        SM
+      </Button>
+      <Button variant="primary">MD</Button>
+      <Button variant="primary" size="lg">
+        LG
+      </Button>
+      <Button variant="primary" shape="circle" aria-label="Add">
+        <IconPlus className="h-5 w-5" />
+      </Button>
+      <Button variant="primary" shape="square" aria-label="Add">
+        <IconPlus className="h-5 w-5" />
+      </Button>
+      <Button variant="secondary" shape="wide">
+        Wide
+      </Button>
+    </div>
+  </Panel>
+
+  <Panel className="space-y-4">
+    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ghost, link & states</h3>
+    <div className="flex flex-wrap items-center gap-4">
+      <Button variant="ghost">Tertiary</Button>
+      <Button variant="link">Text link button</Button>
+      <Button variant="primary" disabled>
+        Disabled
+      </Button>
+      <Button variant="primary" loading>Loading</Button>
+    </div>
+  </Panel>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Buttons"
+      description="Every filled variant shares the same bordered face, lower frame, hover lift, and pressed depth. Ghost and link actions stay flat."
+      code={code}
+      filename="ButtonExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "variant", type: "primary | secondary | tertiary | signal | accent | neutral | info | success | warning | danger | ghost | link", defaultValue: "secondary", description: "Controls semantic colour and Lemon chrome treatment." },
+            { name: "size", type: "xs | sm | md | lg", defaultValue: "md", description: "Controls density without extra classes." },
+            { name: "shape", type: "default | circle | square | wide", defaultValue: "default", description: "Applies common button shapes without className." },
+            { name: "outline", type: "boolean", defaultValue: "false", description: "Converts solid variants to outline treatment." },
+            { name: "icon", type: "ReactNode", description: "Leading icon slot." },
+            { name: "sideIcon", type: "ReactNode", description: "Trailing icon slot." },
+            { name: "split", type: "boolean", defaultValue: "false", description: "Adds split divider before the trailing slot." },
+            { name: "loading", type: "boolean", defaultValue: "false", description: "Disables the action, exposes aria-busy, and replaces the leading icon with a spinner." },
+            { name: "loadingLabel", type: "ReactNode", description: "Optional label shown while loading; the normal label stays in place by default." },
+          ]}
+        />
+      }
+    >
+      <div className="space-y-8">
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Toolbar (like HogQL / insights)</h3>
+          <div className="flex flex-wrap items-center gap-2 rounded-lemon border border-ph-border bg-ph-surface p-3 shadow-elevation-3000">
+            <DropdownButton
+              label="Run"
+              variant="primary"
+              split
+              icon={<IconPlayCircle className="h-4 w-4" aria-hidden />}
+            >
+              <DropdownItem>Run now</DropdownItem>
+              <DropdownItem>Run as new insight…</DropdownItem>
+            </DropdownButton>
+            <DropdownButton
+              label="Variables"
+              variant="secondary"
+              icon={
+                <span className="font-mono text-sm leading-none" aria-hidden>
+                  {"{}"}
+                </span>
+              }
+            >
+              <DropdownItem>Manage variables…</DropdownItem>
+              <DropdownItem>Insert column…</DropdownItem>
+            </DropdownButton>
+            <DropdownButton label="Filters" variant="secondary" panelClassName="min-w-[13rem]">
+              <DropdownItem>Add filter group</DropdownItem>
+              <DropdownItem>Clear all filters</DropdownItem>
+              <DropdownItem className="text-ph-mutedtext">Save as cohort…</DropdownItem>
+            </DropdownButton>
+            <Button variant="secondary" size="sm" shape="square" aria-label="Layout">
+              <span className="flex gap-0.5" aria-hidden>
+                <span className="h-4 w-1.5 rounded-sm bg-current" />
+                <span className="h-4 w-1.5 rounded-sm bg-current opacity-40" />
+              </span>
+            </Button>
+          </div>
+        </Panel>
+
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon 3000 primary & secondary</h3>
+          <div className="flex flex-wrap gap-3">
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="primary" outline>
+              Primary outline
+            </Button>
+            <Button variant="secondary" outline>
+              Secondary outline
+            </Button>
+          </div>
+        </Panel>
+
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Marketing signal vs in-app</h3>
+          <div className="flex flex-wrap gap-3">
+            <Button variant="primary">App primary (3000)</Button>
+            <Button variant="signal">Marketing signal</Button>
+          </div>
+        </Panel>
+
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic solids</h3>
+          <div className="flex flex-wrap gap-3">
+            <Button variant="accent">Accent</Button>
+            <Button variant="neutral">Neutral</Button>
+            <Button variant="info">Info</Button>
+            <Button variant="success">Success</Button>
+            <Button variant="warning">Warning</Button>
+            <Button variant="danger">Danger</Button>
+          </div>
+        </Panel>
+
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">With icons</h3>
+          <div className="flex flex-wrap gap-3">
+            <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />}>
+              New project
+            </Button>
+            <Button variant="primary" sideIcon={<IconSubArrowRight className="h-4 w-4" aria-hidden />}>
+              Continue
+            </Button>
+            <Button variant="secondary" icon={<IconDownload className="h-4 w-4" aria-hidden />}>
+              Export
+            </Button>
+            <Button variant="success" icon={<IconSave className="h-4 w-4" aria-hidden />}>
+              Save
+            </Button>
+            <Button variant="danger" icon={<IconTrash className="h-4 w-4" aria-hidden />}>
+              Delete
+            </Button>
+            <Button variant="ghost" icon={<IconUpload className="h-4 w-4" aria-hidden />}>
+              Upload
+            </Button>
+          </div>
+        </Panel>
+
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes & shapes</h3>
+          <div className="flex flex-wrap items-end gap-3">
+            <Button variant="primary" size="xs">
+              XS
+            </Button>
+            <Button variant="primary" size="sm">
+              SM
+            </Button>
+            <Button variant="primary">MD</Button>
+            <Button variant="primary" size="lg">
+              LG
+            </Button>
+            <Button variant="primary" shape="circle" aria-label="Add">
+              <IconPlus className="h-5 w-5" />
+            </Button>
+            <Button variant="primary" shape="square" aria-label="Add">
+              <IconPlus className="h-5 w-5" />
+            </Button>
+            <Button variant="secondary" shape="wide">
+              Wide
+            </Button>
+          </div>
+        </Panel>
+
+        <Panel className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ghost, link & states</h3>
+          <div className="flex flex-wrap items-center gap-4">
+            <Button variant="ghost">Tertiary</Button>
+            <Button variant="link">Text link button</Button>
+            <Button variant="primary" disabled>
+              Disabled
+            </Button>
+            <Button variant="primary" loading>Loading</Button>
+          </div>
+        </Panel>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/CalendarShowcase.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from "react";
+import { Calendar, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
+
+export default function CalendarShowcase() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  const code = `import { Calendar } from "the-old-ui";
+
+const [date, setDate] = useState(new Date());
+
+<Calendar value={date} onChange={setDate} />`;
+
+  return (
+    <ShowcaseWrapper
+      title="Calendar"
+      description="Controlled date picker with theme-aware styling and navigation."
+      code={code}
+      filename="CalendarExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "value", type: "Date | undefined", description: "Selected date." },
+            { name: "onChange", type: "(date?: Date) => void", description: "Called when a date is selected." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel flex justify-center">
+        <Calendar value={date} onChange={setDate} />
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/CardShowcase.tsx

@@ -0,0 +1,159 @@
+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>
+  );
+}