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

package/src/components/sections/NavigationShowcase.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { IconBell, IconPerson } from "@/components/icons";
+import { Button, DropdownItem, DropdownMenu, SearchInput, ShowcaseWrapper } from "@/components/ui";
+
+export default function NavigationShowcase() {
+  const code = `import { IconBell, IconPerson } from "the-old-ui";
+import { Button, DropdownItem, DropdownMenu, SearchInput } from "the-old-ui";
+
+<div className="space-y-8">
+  <div className="ph-panel">
+    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
+    <div className="ph-navbar-demo justify-between gap-4">
+      <span className="text-lg font-bold text-ph-brand">posthog</span>
+      <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
+        <SearchInput
+          label="Jump to"
+          hideLabel
+          shortcut="Cmd K"
+          placeholder="Jump to…"
+          density="compact"
+        />
+        <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
+          <IconBell className="h-5 w-5 text-ph-mutedtext" />
+          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
+        </Button>
+        <DropdownMenu
+          align="end"
+          aria-label="Account menu"
+          trigger={
+            <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
+              <IconPerson className="h-5 w-5" aria-hidden />
+            </span>
+          }
+        >
+          <DropdownItem>Personal API keys</DropdownItem>
+          <DropdownItem>Organisation settings</DropdownItem>
+        </DropdownMenu>
+      </div>
+    </div>
+  </div>
+
+  <div className="ph-panel flex gap-10">
+    <div>
+      <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
+      <ul className="w-52 space-y-1 text-sm font-medium">
+        <li>
+          <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
+            Data pipeline
+          </a>
+        </li>
+        <li>
+          <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
+            <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
+            <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
+              <li>
+                <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                  Sources
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                  Views
+                </a>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+    </div>
+
+    <div className="flex-1">
+      <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
+      <ol className="ph-steps">
+        <li className="flex flex-col items-center gap-2">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
+            1
+          </span>
+          <span>Install snippet</span>
+        </li>
+        <li className="flex flex-col items-center gap-2 opacity-60">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+            2
+          </span>
+          <span>Send test event</span>
+        </li>
+        <li className="flex flex-col items-center gap-2 opacity-60">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+            3
+          </span>
+          <span>Invite team</span>
+        </li>
+      </ol>
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Navigation chrome" code={code} filename="NavigationExample.tsx">
+      <div className="space-y-8">
+        <div className="ph-panel">
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
+          <div className="ph-navbar-demo justify-between gap-4">
+            <span className="text-lg font-bold text-ph-brand">posthog</span>
+            <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
+              <SearchInput
+                label="Jump to"
+                hideLabel
+                shortcut="Cmd K"
+                placeholder="Jump to…"
+                density="compact"
+              />
+              <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
+                <IconBell className="h-5 w-5 text-ph-mutedtext" />
+                <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
+              </Button>
+              <DropdownMenu
+                align="end"
+                aria-label="Account menu"
+                trigger={
+                  <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
+                    <IconPerson className="h-5 w-5" aria-hidden />
+                  </span>
+                }
+              >
+                <DropdownItem>Personal API keys</DropdownItem>
+                <DropdownItem>Organisation settings</DropdownItem>
+              </DropdownMenu>
+            </div>
+          </div>
+        </div>
+
+        <div className="ph-panel flex gap-10">
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
+            <ul className="w-52 space-y-1 text-sm font-medium">
+              <li>
+                <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
+                  Data pipeline
+                </a>
+              </li>
+              <li>
+                <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
+                  <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
+                  <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
+                    <li>
+                      <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                        Sources
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                        Views
+                      </a>
+                    </li>
+                  </ul>
+                </details>
+              </li>
+            </ul>
+          </div>
+
+          <div className="flex-1">
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
+            <ol className="ph-steps">
+              <li className="flex flex-col items-center gap-2">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
+                  1
+                </span>
+                <span>Install snippet</span>
+              </li>
+              <li className="flex flex-col items-center gap-2 opacity-60">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+                  2
+                </span>
+                <span>Send test event</span>
+              </li>
+              <li className="flex flex-col items-center gap-2 opacity-60">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+                  3
+                </span>
+                <span>Invite team</span>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/ProgressShowcase.tsx

@@ -0,0 +1,85 @@
+import { IconSpinner } from "@/components/icons";
+import { ComponentDocs, Progress, ShowcaseWrapper } from "@/components/ui";
+
+export default function ProgressShowcase() {
+  const code = `import { Progress } from "the-old-ui";
+
+<div className="space-y-8">
+  <div className="ph-panel space-y-6">
+    <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
+    <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
+    <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
+  </div>
+
+  <div className="ph-panel flex flex-wrap items-center gap-10">
+    <Progress value={72} color="bg-ph-brand" size="lg" className="w-48" />
+    <Progress value={45} color="bg-ph-blue" size="lg" className="w-48" />
+  </div>
+
+  <div className="ph-panel flex flex-wrap items-center gap-8">
+    <span className="ph-loading" role="status" aria-label="Loading" />
+    <IconSpinner className="h-6 w-6 text-ph-brand" role="status" aria-label="Loading" />
+    <div className="ph-loading-dots" role="status" aria-label="Loading">
+      <span />
+      <span />
+      <span />
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Progress & loading"
+      description="Linear progress bars, spinners, and skeleton placeholders with semantic colour support."
+      code={code}
+      filename="ProgressExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "value", type: "number", description: "Current value." },
+            { name: "max", type: "number", defaultValue: "100", description: "Maximum value." },
+            { name: "color", type: "string", defaultValue: "bg-ph-brand", description: "Tailwind colour class for the bar." },
+            { name: "label", type: "string", description: "Label shown above the bar." },
+            { name: "showPercentage", type: "boolean", defaultValue: "false", description: "Show percentage text." },
+            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Bar height." },
+          ]}
+        />
+      }
+    >
+      <div className="space-y-8">
+        <div className="ph-panel space-y-6">
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Linear bars</h3>
+          <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
+          <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
+          <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
+        </div>
+
+        <div className="ph-panel flex flex-wrap items-center gap-10">
+          <div className="w-full">
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Large bars</h3>
+            <div className="flex gap-10">
+              <Progress value={72} color="bg-ph-brand" size="lg" className="w-48" />
+              <Progress value={45} color="bg-ph-blue" size="lg" className="w-48" />
+            </div>
+          </div>
+        </div>
+
+        <div className="ph-panel flex flex-wrap items-center gap-8">
+          <div className="flex items-center gap-3 text-ph-subtle">
+            <span className="ph-loading" role="status" aria-label="Loading" />
+            <code className="ph-kbd">ph-loading</code> — CSS spinner
+          </div>
+          <div className="flex items-center gap-3 text-ph-subtle">
+            <IconSpinner className="h-6 w-6 text-ph-brand" role="status" aria-label="Loading" />
+            <code className="ph-kbd">IconSpinner</code> — Animated icon
+          </div>
+          <div className="ph-loading-dots" role="status" aria-label="Loading">
+            <span />
+            <span />
+            <span />
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/SegmentedControlShowcase.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { ComponentDocs, SegmentedControl, ShowcaseWrapper } from "@/components/ui";
+import { IconGridView, IconListView } from "@/components/icons";
+
+export default function SegmentedControlShowcase() {
+  const [view, setView] = useState("grid");
+
+  const options = [
+    { value: "grid", label: "Grid", icon: <IconGridView className="h-4 w-4" /> },
+    { value: "list", label: "List", icon: <IconListView className="h-4 w-4" /> },
+  ];
+
+  const code = `import { SegmentedControl } from "the-old-ui";
+import { IconGridView, IconListView } from "the-old-ui";
+
+<div className="ph-panel">
+  <SegmentedControl options={options} value={view} onChange={setView} />
+  <div className="mt-4 rounded-lg bg-ph-muted p-4 text-sm text-ph-subtle">
+    Selected: <span className="font-semibold text-ph-ink">{view}</span>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Segmented Control"
+      description="Compact controlled switch for mutually exclusive display modes."
+      code={code}
+      filename="SegmentedControlExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "options", type: "{ value; label; icon? }[]", description: "Segments to render." },
+            { name: "value", type: "string", description: "Currently selected value." },
+            { name: "onChange", type: "(value: string) => void", description: "Called when a segment is selected." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel">
+        <SegmentedControl options={options} value={view} onChange={setView} />
+        <div className="mt-4 rounded-lg bg-ph-muted p-4 text-sm text-ph-subtle">
+          Selected: <span className="font-semibold text-ph-ink">{view}</span>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/SetupThemeShowcase.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { CodeBlock, H3, P, Panel, ThemeSwitcher } from "@/components/ui";
+import { THEMES } from "@/themes";
+
+const themePairs = [
+  { name: "HedgeHog", light: "hedgehog-light", dark: "hedgehog-dark" },
+  { name: "Sheets", light: "sheets", dark: "sheets-dark" },
+  { name: "Note", light: "note", dark: "note-dark" },
+  { name: "Presentation", light: "presentation", dark: "presentation-dark" },
+  { name: "Socials", light: "socials", dark: "socials-dark" },
+  { name: "Chats", light: "chats-light", dark: "chats-dark" },
+  { name: "Catppuccin", light: "catppuccin-light", dark: "catppuccin-dark" },
+  { name: "Xenide", light: "xenide-light", dark: "xenide-dark" },
+  { name: "GitHub", light: "github-light", dark: "github-dark" },
+  { name: "Rose Pine", light: "rosepine-light", dark: "rosepine-dark" },
+  { name: "TurtleTime", light: "turtletime", dark: "turtletime-dark" },
+  { name: "Bikini Bottom", light: "bikini-bottom", dark: "bikini-bottom-dark" },
+  { name: "Notion", light: "notion", dark: "notion-dark" },
+] as const;
+
+const guideTokens = [
+  { label: "canvas", token: "--ph-canvas", text: "text-ph-ink" },
+  { label: "surface", token: "--ph-surface", text: "text-ph-ink" },
+  { label: "muted", token: "--ph-muted", text: "text-ph-ink" },
+  { label: "toolbar", token: "--ph-toolbar", text: "text-ph-ink" },
+  { label: "border", token: "--ph-border", text: "text-ph-ink" },
+  { label: "accent", token: "--ph-accent", text: "text-white" },
+  { label: "blue", token: "--ph-blue", text: "text-white" },
+  { label: "purple", token: "--ph-purple", text: "text-white" },
+  { label: "success", token: "--ph-success", text: "text-white" },
+  { label: "warning", token: "--ph-warning", text: "text-white" },
+  { label: "danger", token: "--ph-danger", text: "text-white" },
+  { label: "info", token: "--ph-info", text: "text-white" },
+] as const;
+
+const dataTokens = [1, 2, 3, 4, 5, 6, 7].map((item) => ({
+  label: `data ${item}`,
+  token: `--ph-data-${item}`,
+  text: "text-white",
+}));
+
+const installCode = `bun add the-old-ui
+# or
+npm install the-old-ui`;
+
+const layoutCode = `// app/layout.tsx
+import "the-old-ui/styles.css";
+import { THEME_INIT_SCRIPT, ThemeManager } from "the-old-ui";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" data-theme="hedgehog-light" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+      </head>
+      <body>
+        <ThemeManager>{children}</ThemeManager>
+      </body>
+    </html>
+  );
+}`;
+
+const tailwindCode = `// tailwind.config.ts
+import theOldUiPreset from "the-old-ui/tailwind-preset";
+
+export default {
+  presets: [theOldUiPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./node_modules/the-old-ui/dist/**/*.{js,mjs}",
+  ],
+};`;
+
+const switchCode = `import { ThemeSwitcher, persistTheme } from "the-old-ui";
+
+<ThemeSwitcher />
+
+// Or switch manually
+persistTheme("sheets-dark");`;
+
+const customThemeCode = `/* app/globals.css */
+@import "the-old-ui/styles.css";
+
+[data-theme="my-theme-light"] {
+  color-scheme: light;
+
+  --ph-canvas: #f8f5ef;
+  --ph-surface: #ffffff;
+  --ph-muted: #eee8dd;
+  --ph-toolbar: #e5dccd;
+  --ph-border: #d7cbb8;
+  --ph-border-strong: #a99b87;
+
+  --ph-text-primary: #15110c;
+  --ph-text-secondary: #4d4337;
+  --ph-text-tertiary: #796f63;
+
+  --ph-accent: #f97316;
+  --ph-accent-hover: #ea580c;
+  --ph-blue: #2563eb;
+  --ph-purple: #7c3aed;
+  --ph-success: #15803d;
+  --ph-warning: #b45309;
+  --ph-danger: #dc2626;
+  --ph-info: #2563eb;
+}
+
+[data-theme="my-theme-dark"] {
+  color-scheme: dark;
+
+  --ph-canvas: #11100e;
+  --ph-surface: #191713;
+  --ph-muted: #242018;
+  --ph-toolbar: #2e281f;
+  --ph-border: #443a2b;
+  --ph-border-strong: #7a6a54;
+
+  --ph-text-primary: #fff7ed;
+  --ph-text-secondary: #d8c8b6;
+  --ph-text-tertiary: #a89985;
+
+  --ph-accent: #fb923c;
+  --ph-accent-hover: #fdba74;
+  --ph-blue: #60a5fa;
+  --ph-purple: #a78bfa;
+  --ph-success: #4ade80;
+  --ph-warning: #facc15;
+  --ph-danger: #f87171;
+  --ph-info: #60a5fa;
+}`;
+
+const registryCode = `// Add to src/themes/registry.ts if this repo should show it in ThemeSwitcher
+{
+  id: "my-theme-light",
+  name: "My Theme Light",
+  description: "Custom light palette.",
+  colorScheme: "light",
+  group: "Custom",
+},
+{
+  id: "my-theme-dark",
+  name: "My Theme Dark",
+  description: "Custom dark palette.",
+  colorScheme: "dark",
+  group: "Custom",
+}`;
+
+export default function SetupThemeShowcase() {
+  const [activeTheme, setActiveTheme] = useState("hedgehog-light");
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const update = () => setActiveTheme(root.getAttribute("data-theme") || "hedgehog-light");
+    update();
+
+    const observer = new MutationObserver(update);
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const activeThemeCode = useMemo(() => {
+    const theme = THEMES.find((item) => item.id === activeTheme);
+    return `// Current selected theme in this demo\n${JSON.stringify({
+      id: activeTheme,
+      name: theme?.name ?? activeTheme,
+      colorScheme: theme?.colorScheme ?? "light",
+      group: theme?.group ?? "Custom",
+    }, null, 2)}`;
+  }, [activeTheme]);
+
+  const themeListCode = useMemo(() => {
+    return `export const themePairs = ${JSON.stringify(themePairs, null, 2)} as const;`;
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <Panel className="space-y-4">
+        <H3>Setup</H3>
+        <P tone="subtle">
+          This demo is also the docs. A consuming app imports the package CSS once, adds the Tailwind preset, then switches palettes through <code className="ph-kbd">html[data-theme]</code>.
+        </P>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <CodeBlock code={installCode} filename="install.sh" language="bash" />
+          <CodeBlock code={tailwindCode} filename="tailwind.config.ts" />
+        </div>
+        <CodeBlock code={layoutCode} filename="app/layout.tsx" />
+      </Panel>
+
+      <Panel className="space-y-4">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <H3>Theme Switching</H3>
+            <P tone="subtle">Each default palette is a light/dark pair. Pick one below and copy the active theme ID.</P>
+          </div>
+          <ThemeSwitcher />
+        </div>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <CodeBlock code={activeThemeCode} filename="current-theme.ts" />
+          <CodeBlock code={switchCode} filename="ThemeSwitch.tsx" />
+        </div>
+      </Panel>
+
+      <Panel className="space-y-4">
+        <H3>Default Theme Pairs</H3>
+        <P tone="subtle">Use these IDs with <code className="ph-kbd">data-theme</code> or <code className="ph-kbd">persistTheme()</code>.</P>
+        <CodeBlock code={themeListCode} filename="theme-pairs.ts" />
+      </Panel>
+
+      <Panel className="space-y-5">
+        <div>
+          <H3>Theme Color Guide</H3>
+          <P tone="subtle">
+            Every built-in theme is rendered below with its own <code className="ph-kbd">data-theme</code> attribute. These swatches are the guide for what each token becomes in that theme.
+          </P>
+        </div>
+        <div className="grid gap-4 lg:grid-cols-2">
+          {THEMES.map((theme) => (
+            <div
+              key={theme.id}
+              data-theme={theme.id}
+              className="rounded-xl border border-ph-border bg-ph-canvas p-4 shadow-ph"
+            >
+              <div className="mb-3 flex items-baseline justify-between gap-3">
+                <div>
+                  <h4 className="font-semibold text-ph-ink">{theme.name}</h4>
+                  <p className="text-xs text-ph-mutedtext">{theme.id}</p>
+                </div>
+                <span className="rounded-full border border-ph-border bg-ph-surface px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-ph-mutedtext">
+                  {theme.colorScheme}
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+                {[...guideTokens, ...dataTokens].map((item) => (
+                  <div
+                    key={item.token}
+                    className={`rounded-lg border border-ph-border p-2 ${item.text}`}
+                    style={{ background: `var(${item.token})` }}
+                  >
+                    <div className="text-[10px] font-bold uppercase tracking-wide">{item.label}</div>
+                    <div className="mt-1 truncate font-mono text-[9px] opacity-80">{item.token}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Panel>
+
+      <Panel className="space-y-4">
+        <H3>Custom Light & Dark Theme</H3>
+        <P tone="subtle">Custom themes are DaisyUI-style: define one light token block and one dark token block. Components read semantic tokens, not hardcoded colours.</P>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <CodeBlock code={customThemeCode} filename="custom-theme.css" language="css" />
+          <CodeBlock code={registryCode} filename="registry.ts" />
+        </div>
+      </Panel>
+    </div>
+  );
+}

package/src/components/sections/StackShowcase.tsx

@@ -0,0 +1,33 @@
+import { ShowcaseWrapper } from "@/components/ui";
+
+export default function StackShowcase() {
+  const code = `
+
+<div className="rounded-xl border border-ph-border bg-ph-muted p-10">
+  <div className="relative mx-auto h-44 w-48">
+    <div className="absolute inset-3 translate-x-4 translate-y-4 rounded-xl border border-ph-border bg-ph-toolbar shadow-ph ring-8 ring-ph-muted" />
+    <div className="absolute inset-y-7 left-8 right-[-1rem] translate-x-1 rounded-xl border border-ph-border bg-ph-blue text-center text-xs font-semibold uppercase leading-[4.75rem] text-white shadow-ph ring-8 ring-ph-muted">
+      Replay
+    </div>
+    <div className="absolute inset-x-5 top-0 flex h-[5.75rem] items-center justify-center rounded-xl border border-ph-border bg-ph-surface shadow-ph-md ring-8 ring-ph-muted">
+      <span className="text-sm font-bold text-ph-brand">Trends insight</span>
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Stacked surfaces" code={code} filename="StackExample.tsx">
+      <div className="rounded-xl border border-ph-border bg-ph-muted p-10">
+        <div className="relative mx-auto h-44 w-48">
+          <div className="absolute inset-3 translate-x-4 translate-y-4 rounded-xl border border-ph-border bg-ph-toolbar shadow-ph ring-8 ring-ph-muted" />
+          <div className="absolute inset-y-7 left-8 right-[-1rem] translate-x-1 rounded-xl border border-ph-border bg-ph-blue text-center text-xs font-semibold uppercase leading-[4.75rem] text-white shadow-ph ring-8 ring-ph-muted">
+            Replay
+          </div>
+          <div className="absolute inset-x-5 top-0 flex h-[5.75rem] items-center justify-center rounded-xl border border-ph-border bg-ph-surface shadow-ph-md ring-8 ring-ph-muted">
+            <span className="text-sm font-bold text-ph-brand">Trends insight</span>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}