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

package/src/components/sections/ProductLayoutsShowcase.tsx

@@ -1,137 +1,77 @@
-import {
-  AuthCard,
-  AuthDivider,
-  AuthLayout,
-  Badge,
-  Button,
-  Checkbox,
-  Input,
-  LoadingState,
-  Panel,
-  SettingsLayout,
-  SettingsNav,
-  ShowcaseWrapper,
-  Toggle,
-} from "@/components/ui";
-import { IconDataReel, IconMail, IconPerson, IconTuning } from "@/components/icons";
+"use client";
 
-const settingsGroups = [
-  {
-    label: "Workspace",
-    items: [
-      { id: "general", label: "General", href: "#settings", icon: <IconTuning className="h-4 w-4" aria-hidden />, active: true },
-      { id: "members", label: "Members", href: "#settings", icon: <IconPerson className="h-4 w-4" aria-hidden />, badge: "12" },
-    ],
-  },
-  {
-    label: "Data",
-    items: [
-      { id: "sources", label: "Sources", href: "#settings", icon: <IconDataReel className="h-4 w-4" aria-hidden /> },
-      { id: "email", label: "Email reports", href: "#settings", icon: <IconMail className="h-4 w-4" aria-hidden /> },
-    ],
-  },
-] as const;
+import { AuthLayout, AuthCard, SettingsLayout, ShowcaseWrapper, Button } from "@/components/ui";
 
 export default function ProductLayoutsShowcase() {
-  const authCode = `import { AuthCard, AuthDivider, AuthLayout, Button, Input } from "@xenide-io/the-old-ui-theme";
-
-<AuthLayout brand="Acme Analytics" footer="Privacy · Terms">
-  <AuthCard title="Welcome back" description="Sign in to your workspace">
-    <Input label="Work email" type="email" autoComplete="email" />
-    <Input label="Password" type="password" autoComplete="current-password" />
-    <Button variant="primary" className="w-full">Sign in</Button>
-    <AuthDivider />
-    <Button variant="secondary" className="w-full">Continue with SSO</Button>
-  </AuthCard>
-</AuthLayout>`;
-
-  const settingsCode = `import { SettingsLayout, SettingsNav } from "@xenide-io/the-old-ui-theme";
-
-<SettingsLayout
-  title="Workspace settings"
-  navigation={<SettingsNav groups={settingsGroups} />}
->
-  {/* Route-specific settings panels */}
-</SettingsLayout>`;
-
   return (
     <>
       <ShowcaseWrapper
         id="auth"
-        title="Authentication layouts"
-        description="Focused sign-in, verification, recovery, and loading shells. Authentication state and provider logic stay application-owned."
-        code={authCode}
-        filename="SignInPage.tsx"
+        title="Auth Layout"
+        description="Split-panel authentication shell with brand aside and form column."
+        code={`import { AuthLayout, AuthCard } from "@xenide-io/the-old-ui-theme";
+
+<AuthLayout>
+  <AuthCard title="Sign in" description="Welcome back">
+    <input className="ph-input" placeholder="Email" />
+    <input className="ph-input" type="password" placeholder="Password" />
+    <Button variant="primary">Sign in</Button>
+  </AuthCard>
+</AuthLayout>`}
       >
-        <div className="grid gap-5 xl:grid-cols-[1.35fr,0.65fr]">
-          <AuthLayout
-            className="min-h-[34rem]"
-            brand={<span>The Old UI</span>}
-            aside={
-              <div className="flex h-full flex-col justify-between">
-                <strong className="text-xl">Understand every product decision.</strong>
-                <p className="max-w-xs text-sm opacity-80">One focused authentication step at a time, with room for product context.</p>
-              </div>
-            }
-            footer={<>Privacy · Terms · Status</>}
-          >
-            <AuthCard
-              title="Welcome back"
-              description="Sign in to your workspace"
-              footer={<>New to the workspace? <a href="#auth" className="font-medium text-ph-brand">Create an account</a></>}
-            >
-              <Input label="Work email" type="email" autoComplete="email" placeholder="you@company.com" />
-              <Input label="Password" type="password" autoComplete="current-password" />
-              <div className="flex items-center justify-between gap-3">
-                <Checkbox label="Remember me" />
-                <a href="#auth" className="text-xs font-medium text-ph-brand">Forgot password?</a>
+        <div className="max-h-[32rem] overflow-hidden rounded-xl border border-ph-border">
+          <AuthLayout>
+            <AuthCard title="Sign in" description="Welcome back to your workspace.">
+              <div className="space-y-3">
+                <input className="ph-input" placeholder="Email" />
+                <input className="ph-input" type="password" placeholder="Password" />
+                <Button variant="primary" className="w-full">Sign in</Button>
               </div>
-              <Button variant="primary" className="w-full">Sign in</Button>
-              <AuthDivider />
-              <Button variant="secondary" className="w-full">Continue with SSO</Button>
             </AuthCard>
           </AuthLayout>
-
-          <div className="grid gap-5">
-            <AuthCard title="Check your inbox" description="We sent a six-digit code to alex@company.com">
-              <Input label="Verification code" inputMode="numeric" autoComplete="one-time-code" placeholder="000000" />
-              <Button variant="primary" className="w-full">Verify email</Button>
-            </AuthCard>
-            <AuthCard title="Preparing workspace" description="Authentication completed successfully.">
-              <LoadingState
-                label="Preparing your workspace"
-                title="Loading your workspace"
-                description="Connecting data sources and restoring your last view."
-                variant="dots"
-              />
-            </AuthCard>
-          </div>
         </div>
       </ShowcaseWrapper>
 
       <ShowcaseWrapper
         id="settings"
-        title="Settings layout"
-        description="Route-friendly grouped navigation, mobile disclosure menu, page actions, and flexible settings content."
-        code={settingsCode}
-        filename="SettingsPage.tsx"
+        title="Settings Layout"
+        description="Sidebar navigation and content area for settings pages."
+        code={`import { SettingsLayout, SettingsNav } from "@xenide-io/the-old-ui-theme";
+
+<SettingsLayout
+  title="Settings"
+  navigation={<SettingsNav groups={groups} activeId="general" />}
+>
+  <p>Settings content</p>
+</SettingsLayout>`}
       >
-        <SettingsLayout
-          title="Workspace settings"
-          description="Manage identity, data collection, and workspace defaults."
-          actions={<Button variant="primary" size="sm">Save changes</Button>}
-          navigation={<SettingsNav groups={settingsGroups} />}
-        >
-          <Panel title="Workspace identity" description="Shown in navigation, reports, and invitations." className="space-y-4">
-            <Input label="Workspace name" defaultValue="Acme Analytics" />
-            <Input label="Workspace URL" defaultValue="app.example.com/acme" />
-          </Panel>
-          <Panel title="Collection defaults" className="space-y-4">
-            <Toggle label="Capture page views automatically" defaultChecked />
-            <Toggle label="Mask sensitive text inputs" defaultChecked />
-            <div><Badge variant="warning">Restart required</Badge></div>
-          </Panel>
-        </SettingsLayout>
+        <div className="max-h-[28rem] overflow-hidden rounded-xl border border-ph-border">
+          <SettingsLayout
+            title="Project Settings"
+            description="Manage your workspace preferences"
+            navigation={
+              <div className="ph-settings-nav space-y-5">
+                <div>
+                  <h3 className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">General</h3>
+                  <div className="space-y-0.5">
+                    <a className="ph-settings-nav__item ph-settings-nav__item--active">Overview</a>
+                    <a className="ph-settings-nav__item">Display</a>
+                    <a className="ph-settings-nav__item">Notifications</a>
+                  </div>
+                </div>
+                <div>
+                  <h3 className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">Team</h3>
+                  <div className="space-y-0.5">
+                    <a className="ph-settings-nav__item">Members</a>
+                    <a className="ph-settings-nav__item">Roles</a>
+                  </div>
+                </div>
+              </div>
+            }
+          >
+            <p className="text-sm text-ph-subtle">General settings content goes here.</p>
+          </SettingsLayout>
+        </div>
       </ShowcaseWrapper>
     </>
   );

package/src/components/sections/QuillChartShowcase.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ShowcaseWrapper } from "@/components/ui";
+import { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart, InsightShell } from "@/components/charts/quill";
+
+const lineCode = 'import { TimeSeriesLineChart } from "@xenide-io/the-old-ui-theme";\n\n<TimeSeriesLineChart\n  labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}\n  series={[\n    { key: "views", label: "Pageviews", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] },\n    { key: "signups", label: "Signups", data: [920, 990, 940, 1040, 1012, 540, 510] },\n  ]}\n/>';
+
+const barCode = 'import { BarChart } from "@xenide-io/the-old-ui-theme";\n\n<BarChart\n  labels={["A","B","C","D"]}\n  series={[\n    { key: "s1", label: "Series 1", data: [30, 45, 25, 60] },\n    { key: "s2", label: "Series 2", data: [20, 35, 40, 30] },\n  ]}\n/>';
+
+const pieCode = 'import { PieChart } from "@xenide-io/the-old-ui-theme";\n\n<PieChart\n  slices={[\n    { key: "a", label: "Direct", value: 40 },\n    { key: "b", label: "Organic", value: 30 },\n    { key: "c", label: "Referral", value: 20 },\n    { key: "d", label: "Social", value: 10 },\n  ]}\n/>';
+
+const metricCode = 'import { MetricCard, Sparkline } from "@xenide-io/the-old-ui-theme";\n\n<MetricCard\n  value="89.2k"\n  label="Page Views"\n  change={{ value: 12 }}\n  sparklineData={[65, 72, 68, 80, 95, 88, 92]}\n/>';
+
+export default function QuillChartShowcase() {
+  return (
+    <>
+      <ShowcaseWrapper
+        id="quill-timeline"
+        title="Quill TimeSeriesLineChart"
+        description="Canvas-based trend line chart with optional grid and crosshair."
+        code={lineCode}
+      >
+        <TimeSeriesLineChart
+          labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
+          series={[
+            { key: "views", label: "Pageviews", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] },
+            { key: "signups", label: "Signups", data: [920, 990, 940, 1040, 1012, 540, 510] },
+          ]}
+        />
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-barchart"
+        title="Quill BarChart"
+        description="Vertical bar chart with multi-series support."
+        code={barCode}
+      >
+        <BarChart
+          labels={["A","B","C","D"]}
+          series={[
+            { key: "s1", label: "Series 1", data: [30, 45, 25, 60] },
+            { key: "s2", label: "Series 2", data: [20, 35, 40, 30] },
+          ]}
+        />
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-piechart"
+        title="Quill PieChart"
+        description="Donut chart with slice labels and legend."
+        code={pieCode}
+      >
+        <PieChart
+          slices={[
+            { key: "a", label: "Direct", value: 40 },
+            { key: "b", label: "Organic", value: 30 },
+            { key: "c", label: "Referral", value: 20 },
+            { key: "d", label: "Social", value: 10 },
+          ]}
+        />
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-metriccard"
+        title="Quill MetricCard and Sparkline"
+        description="Metric stat card with sparkline trend."
+        code={metricCode}
+      >
+        <div className="grid gap-4 sm:grid-cols-3">
+          <MetricCard
+            value="89.2k"
+            label="Page Views"
+            change={{ value: 12 }}
+            sparklineData={[65, 72, 68, 80, 95, 88, 92]}
+          />
+          <MetricCard
+            value="2,847"
+            label="Active Users"
+            change={{ value: 3 }}
+            sparklineData={[42, 48, 45, 52, 50, 48, 55]}
+          />
+          <MetricCard
+            value="23.1%"
+            label="Conversion Rate"
+            change={{ value: -1.2, positive: false }}
+            sparklineData={[24, 23, 23.5, 22.8, 23.2, 22.5, 23.1]}
+          />
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/QuillDashboardShowcase.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { ShowcaseWrapper } from "@/components/ui";
+import { InsightShell, MetricCard } from "@/components/charts/quill";
+import { TimeSeriesLineChart, BarChart, PieChart, FunnelChart, Sparkline } from "@/components/charts/quill";
+
+export default function QuillDashboardShowcase() {
+  return (
+    <>
+      <ShowcaseWrapper
+        id="quill-dashboard"
+        title="Quill Dashboard Shells"
+        description="InsightShell panels for wrapping Quill charts."
+        code={`import { InsightShell } from "@xenide-io/the-old-ui-theme";
+import { TimeSeriesLineChart } from "@xenide-io/the-old-ui-theme";`}
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <InsightShell title="Weekly Active Users" subtitle="Last 14 days" ribbonColor="var(--ph-data-1)">
+            <TimeSeriesLineChart
+              labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
+              series={[{ key: "wau", label: "WAU", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] }]}
+              height={180}
+            />
+          </InsightShell>
+          <InsightShell title="Conversion Funnel" subtitle="Step-by-step dropoff" ribbonColor="var(--ph-data-2)">
+            <FunnelChart
+              steps={[
+                { label: "Page Visit", count: 12000 },
+                { label: "Sign Up", count: 5400 },
+                { label: "Onboarding", count: 3200 },
+                { label: "Active Use", count: 1800 },
+              ]}
+            />
+          </InsightShell>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-funnel"
+        title="Quill Funnel Chart"
+        description="Conversion funnel with dropoff percentages."
+        code={`import { FunnelChart } from "@xenide-io/the-old-ui-theme";
+
+<FunnelChart
+  steps={[
+    { label: "Visitors", count: 12000 },
+    { label: "Signups", count: 5400 },
+    { label: "Activated", count: 1800 },
+  ]}
+/>`}
+      >
+        <div className="max-w-md">
+          <FunnelChart
+            steps={[
+              { label: "Website Visits", count: 45000 },
+              { label: "Product Page", count: 28000 },
+              { label: "Added to Cart", count: 12000 },
+              { label: "Checkout Started", count: 6500 },
+              { label: "Purchase Complete", count: 4200 },
+            ]}
+          />
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-metrics-grid"
+        title="Quill Metrics Grid"
+        description="Metric cards with sparklines for dashboard KPIs."
+        code={`import { MetricCard } from "@xenide-io/the-old-ui-theme";`}
+      >
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <MetricCard
+            value="$128.4k"
+            label="Revenue"
+            change={{ value: 12.5 }}
+            sparklineData={[80, 95, 88, 102, 110, 108, 128]}
+          />
+          <MetricCard
+            value="4,847"
+            label="Active Users"
+            change={{ value: 8.3 }}
+            sparklineData={[42, 48, 45, 52, 50, 48, 55]}
+          />
+          <MetricCard
+            value="32.1%"
+            label="Conversion"
+            change={{ value: -2.1, positive: false }}
+            sparklineData={[34, 33, 33.5, 32.8, 32.2, 31.5, 32.1]}
+          />
+          <MetricCard
+            value="2.4s"
+            label="Avg. Load Time"
+            change={{ value: -15, positive: true }}
+            sparklineData={[3.2, 2.8, 2.9, 2.6, 2.5, 2.4, 2.4]}
+          />
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-charts-overview"
+        title="Quill Charts Overview"
+        description="All Quill chart types in one place."
+        code={`import { BarChart, PieChart, Sparkline } from "@xenide-io/the-old-ui-theme";`}
+      >
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <InsightShell title="Bar Chart" subtitle="Multi-series bars">
+            <BarChart
+              labels={["A","B","C","D"]}
+              series={[
+                { key: "s1", label: "S1", data: [30, 45, 25, 60] },
+                { key: "s2", label: "S2", data: [20, 35, 40, 30] },
+              ]}
+              height={180}
+            />
+          </InsightShell>
+          <InsightShell title="Pie Chart" subtitle="Distribution">
+            <div className="flex justify-center">
+              <PieChart
+                slices={[
+                  { key: "a", label: "Direct", value: 40 },
+                  { key: "b", label: "Organic", value: 30 },
+                  { key: "c", label: "Referral", value: 20 },
+                  { key: "d", label: "Social", value: 10 },
+                ]}
+                size={180}
+              />
+            </div>
+          </InsightShell>
+          <InsightShell title="Sparklines" subtitle="Inline mini-trends">
+            <div className="space-y-4">
+              {[
+                { label: "Page Views", data: [65, 72, 68, 80, 95, 88, 92], color: "var(--ph-data-1)" },
+                { label: "Signups", data: [20, 25, 22, 30, 28, 35, 40], color: "var(--ph-data-2)" },
+                { label: "Revenue", data: [80, 95, 88, 102, 110, 108, 128], color: "var(--ph-data-3)" },
+              ].map((s) => (
+                <div key={s.label} className="flex items-center gap-3">
+                  <Sparkline data={s.data} color={s.color} width={80} height={24} />
+                  <div className="min-w-0">
+                    <p className="text-xs font-medium text-ph-ink">{s.label}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </InsightShell>
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/SidebarShowcase.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState } from "react";
+import { AppLayout, Sidebar, ShowcaseWrapper, Badge, Button } from "@/components/ui";
+import { Home, Bell, Flag, User, Search, Zap } from "lucide-react";
+
+const sampleGroups = [
+  {
+    label: "Main",
+    items: [
+      { label: "Home", icon: <Home className="h-4 w-4" />, active: true },
+      { label: "Activity", icon: <Bell className="h-4 w-4" />, badge: <Badge variant="danger" size="sm">3</Badge> },
+      { label: "Explore", icon: <Search className="h-4 w-4" /> },
+    ],
+  },
+  {
+    label: "Workspace",
+    items: [
+      { label: "Projects", icon: <Flag className="h-4 w-4" /> },
+      { label: "People", icon: <User className="h-4 w-4" /> },
+      { label: "Automations", icon: <Zap className="h-4 w-4" /> },
+    ],
+  },
+];
+
+export default function SidebarShowcase() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <>
+      <ShowcaseWrapper
+        id="sidebar-demo"
+        title="Sidebar + AppLayout"
+        description="Full sidebar and content layout with grouped navigation, icons, badges, and collapse support."
+        code={`import { AppLayout, Sidebar } from "@xenide-io/the-old-ui-theme";
+
+<AppLayout
+  sidebar={
+    <Sidebar
+      groups={[
+        { label: "Main", items: [
+          { label: "Home", icon: <Home className="h-4 w-4" />, active: true },
+          { label: "Activity", icon: <Bell className="h-4 w-4" />, badge: <Badge>3</Badge> },
+        ]},
+      ]}
+      header={<div className="font-bold">My App</div>}
+      footer={<span className="text-xs text-ph-mutedtext">v1.0</span>}
+    />
+  }
+>
+  <div className="p-6">
+    <h1>Main content area</h1>
+  </div>
+</AppLayout>`}
+      >
+        <div className="space-y-4">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          </Button>
+          <div className="overflow-hidden rounded-lg border border-ph-border" style={{ height: 360 }}>
+            <AppLayout
+              sidebarWidth={collapsed ? 56 : 220}
+              sidebar={
+                <Sidebar
+                  groups={sampleGroups}
+                  collapsed={collapsed}
+                  header={
+                    <div className="flex items-center gap-2">
+                      <div className="h-6 w-6 rounded bg-ph-brand flex items-center justify-center text-xs font-bold text-[var(--ph-on-accent)]">T</div>
+                      {!collapsed && <span className="text-sm font-bold text-ph-ink">The Old UI</span>}
+                    </div>
+                  }
+                  footer={
+                    !collapsed ? <span className="text-xs text-ph-mutedtext px-2">v0.3.2</span> : null
+                  }
+                />
+              }
+            >
+              <div className="flex h-full items-center justify-center bg-ph-canvas">
+                <p className="text-sm text-ph-mutedtext">Content area — click sidebar items</p>
+              </div>
+            </AppLayout>
+          </div>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="sidebar-props"
+        title="Sidebar Props"
+        description="Sidebar component API reference."
+        code={`// SidebarGroup
+interface SidebarGroup {
+  label: string;
+  items: SidebarItemDef[];
+}
+
+// SidebarItemDef
+interface SidebarItemDef {
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  badge?: ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+// SidebarProps
+interface SidebarProps {
+  groups: SidebarGroup[];
+  className?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+}
+
+// AppLayoutProps
+interface AppLayoutProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+  sidebarWidth?: number;
+  className?: string;
+}`}
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="ph-panel space-y-2">
+            <h3 className="text-sm font-semibold text-ph-ink">AppLayout</h3>
+            <p className="text-xs text-ph-subtle">CSS grid wrapper with fixed sidebar + fluid content.</p>
+            <ul className="space-y-1 text-xs text-ph-subtle">
+              <li><span className="font-medium text-ph-ink">sidebar</span> — ReactNode for left column</li>
+              <li><span className="font-medium text-ph-ink">sidebarWidth</span> — px width (default 240)</li>
+              <li><span className="font-medium text-ph-ink">children</span> — main content area</li>
+            </ul>
+          </div>
+          <div className="ph-panel space-y-2">
+            <h3 className="text-sm font-semibold text-ph-ink">Sidebar</h3>
+            <p className="text-xs text-ph-subtle">Grouped navigation with icons, badges, collapse.</p>
+            <ul className="space-y-1 text-xs text-ph-subtle">
+              <li><span className="font-medium text-ph-ink">groups</span> — labeled sections with items</li>
+              <li><span className="font-medium text-ph-ink">collapsed</span> — icon-only mode</li>
+              <li><span className="font-medium text-ph-ink">header/footer</span> — top/bottom slots</li>
+            </ul>
+          </div>
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/TableShowcase.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CSSProperties } from "react";
 import { Badge, ComponentDocs, ShowcaseWrapper, Table, type TableColumn } from "@/components/ui";
 

package/src/components/sections/TooltipShowcase.tsx

@@ -1,44 +1,38 @@
-import { Button, ShowcaseWrapper } from "@/components/ui";
+import { Button, ShowcaseWrapper, Tooltip, TooltipProvider } from "@/components/ui";
 
 export default function TooltipShowcase() {
-  const code = `import { Button } from "the-old-ui";
+  const code = `import { Button, Tooltip, TooltipProvider } 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">
+<TooltipProvider delayDuration={300}>
+  <div className="ph-panel flex flex-wrap items-center gap-10">
+    <Tooltip content="Run a HogQL query (Command + /)" side="top">
       <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>
+    </Tooltip>
 
-    <span className="ph-tip cursor-help" title="Native title tooltip for zero-JS parity">
-      Dashed chrome (title attribute)
-    </span>
+    <Tooltip content="Available on hover and keyboard focus" side="bottom">
+      <button type="button" className="ph-tip cursor-help">Dashed chrome</button>
+    </Tooltip>
   </div>
-</div>`;
+</TooltipProvider>`;
 
   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."
+      description="Accessible supporting text on an adaptive inverse surface. Tooltips open on hover or focus, avoid viewport collisions, and dismiss with Escape."
       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">
+      <TooltipProvider delayDuration={300}>
+        <div className="ph-panel flex flex-wrap items-center gap-10">
+          <Tooltip content="Run a HogQL query (Command + /)" side="top">
             <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>
+          </Tooltip>
 
-          <span className="ph-tip cursor-help" title="Native title tooltip for zero-JS parity">
-            Dashed chrome (title attribute)
-          </span>
+          <Tooltip content="Available on hover and keyboard focus" side="bottom">
+            <button type="button" className="ph-tip cursor-help">Dashed chrome</button>
+          </Tooltip>
         </div>
-      </div>
+      </TooltipProvider>
     </ShowcaseWrapper>
   );
 }