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

package/src/components/sections/FilterChipsShowcase.tsx

@@ -1,50 +1,98 @@
 "use client";
 
 import { useState } from "react";
-import { ComponentDocs, FilterChips, ShowcaseWrapper } from "@/components/ui";
+import {
+  ComponentDocs,
+  FilterControls,
+  FilterMenu,
+  ShowcaseWrapper,
+  SortMenu,
+} from "@/components/ui";
+
+const statusOptions = [
+  { value: "all", label: "Any status" },
+  { value: "active", label: "Active" },
+  { value: "draft", label: "Draft" },
+  { value: "archived", label: "Archived" },
+] as const;
+
+const ownerOptions = [
+  { value: "anyone", label: "Anyone" },
+  { value: "me", label: "Owned by me" },
+  { value: "team", label: "My team" },
+] as const;
+
+const sortOptions = [
+  { value: "updated", label: "Recently updated" },
+  { value: "created", label: "Recently created" },
+  { value: "name", label: "Name A-Z" },
+] as const;
 
 export default function FilterChipsShowcase() {
-  const [chips, setChips] = useState([
-    { id: "1", label: "Active", active: true },
-    { id: "2", label: "Archived", active: false },
-    { id: "3", label: "Draft", active: false },
-    { id: "4", label: "Pending", active: true },
-    { id: "5", label: "Failed", active: false },
-  ]);
-
-  const toggleChip = (id: string) => {
-    setChips((prev) => prev.map((chip) => (chip.id === id ? { ...chip, active: !chip.active } : chip)));
+  const [status, setStatus] = useState("active");
+  const [owner, setOwner] = useState("me");
+  const [sort, setSort] = useState("updated");
+
+  const applied = [
+    ...(status !== "all"
+      ? [{ id: "status", label: "Status", value: statusOptions.find((option) => option.value === status)?.label, active: true }]
+      : []),
+    ...(owner !== "anyone"
+      ? [{ id: "owner", label: "Owner", value: ownerOptions.find((option) => option.value === owner)?.label, active: true }]
+      : []),
+  ];
+
+  const clear = () => {
+    setStatus("all");
+    setOwner("anyone");
+    setSort("updated");
   };
 
-  const removeChip = (id: string) => {
-    setChips((prev) => prev.filter((chip) => chip.id !== id));
+  const remove = (id: string) => {
+    if (id === "status") setStatus("all");
+    if (id === "owner") setOwner("anyone");
   };
 
-  const code = `import { FilterChips } from "the-old-ui";
+  const code = `import { FilterControls, FilterMenu, SortMenu } from "@xenide-io/the-old-ui-theme";
 
-<div className="ph-panel">
-  <FilterChips chips={chips} onToggle={toggleChip} onRemove={removeChip} />
-</div>`;
+<FilterControls
+  barProps={{ onClear: clearFilters, resultCount: "24 insights" }}
+  chipsProps={{ chips: appliedFilters, onRemove: removeFilter }}
+  emptyState={<span>No filters applied</span>}
+>
+  <FilterMenu label="Status" value={status} options={statusOptions} onValueChange={setStatus} />
+  <FilterMenu label="Owner" value={owner} options={ownerOptions} onValueChange={setOwner} />
+  <SortMenu label="Sort" value={sort} options={sortOptions} onValueChange={setSort} />
+</FilterControls>`;
 
   return (
     <ShowcaseWrapper
-      title="Filter Chips"
-      description="Controlled chips for active filters, facets, and quick toggles."
+      id="filters"
+      title="Filter and sort"
+      description="Controlled, URL-ready filter menus, applied chips, sorting, clear-all, and result feedback. Menus flip and shift at viewport edges."
       code={code}
-      filename="FilterChipsExample.tsx"
+      filename="FilterBarExample.tsx"
       docs={
         <ComponentDocs
           rows={[
-            { name: "chips", type: "{ id; label; active }[]", description: "Chips to render." },
-            { name: "onToggle", type: "(id: string) => void", description: "Called when a chip is clicked." },
-            { name: "onRemove", type: "(id: string) => void", description: "Shows remove control when provided." },
+            { name: "FilterControls", type: "FilterControlsProps", description: "Combined filter bar and applied-chip composition without owning state." },
+            { name: "FilterBar", type: "FilterBarProps", description: "Lower-level responsive group for filter, sort, clear, and result controls." },
+            { name: "FilterMenu", type: "FilterMenuProps", description: "Single-choice filter using an adaptive radio menu." },
+            { name: "SortMenu", type: "SortMenuProps", description: "Dedicated sort control kept separate from filter state." },
+            { name: "FilterChips", type: "FilterChipsProps", description: "Applied or toggleable chips with independent keyboard-accessible removal." },
           ]}
         />
       }
     >
-      <div className="ph-panel">
-        <FilterChips chips={chips} onToggle={toggleChip} onRemove={removeChip} />
-      </div>
+      <FilterControls
+        barProps={{ onClear: clear, resultCount: "24 insights" }}
+        chipsProps={{ chips: applied, onRemove: remove }}
+        emptyState={<p className="text-xs text-ph-mutedtext">No filters applied</p>}
+      >
+          <FilterMenu label="Status" value={status} options={statusOptions} onValueChange={setStatus} />
+          <FilterMenu label="Owner" value={owner} options={ownerOptions} onValueChange={setOwner} />
+          <SortMenu label="Sort" value={sort} options={sortOptions} onValueChange={setSort} />
+      </FilterControls>
     </ShowcaseWrapper>
   );
 }

package/src/components/sections/FormShowcase.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/components/ui";
 
 export default function FormShowcase() {
-  const code = `import { Checkbox, FileUpload, Input, Panel, Radio, Range, Rating, SearchGroup, Select, Textarea, Toggle } from "the-old-ui";
+  const code = `import { Checkbox, FileUpload, Input, Panel, Radio, Range, Rating, SearchGroup, Select, Textarea, Toggle } from "@xenide-io/the-old-ui-theme";
 
 <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
   <Panel title="Text inputs" className="space-y-6">
@@ -67,6 +67,7 @@ export default function FormShowcase() {
         <ComponentDocs
           title="Input components"
           rows={[
+            { name: "FormField", type: "component", description: "Shared label, description, error, required-state, and generated-ID composition for custom controls." },
             { name: "Input", type: "text | search | email | password", description: "Labelled input with error, helperText, size, and variant props." },
             { name: "Select", type: "select", description: "Labelled select with error, helperText, size, and disabled props." },
             { name: "Textarea", type: "textarea", description: "Labelled multiline input with the same state props as Input." },

package/src/components/sections/IconShowcase.tsx

@@ -1,247 +1,127 @@
-/**
- * Bespoke Lemon glyphs from PostHog open source — filled Material / product paths,
- * not Lucide stroke icons.
- */
+import type { ComponentType, CSSProperties } from "react";
 import {
-  IconActivity,
+  CANONICAL_ICONS,
+  OLD_UI_ICONS,
   IconAreaChart,
-  IconArrowDown,
-  IconArrowUp,
-  IconBell,
-  IconBellOff,
-  IconBolt,
-  IconBox,
-  IconCancel,
-  IconCheck,
-  IconCheckCircle,
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconClipboardEdit,
-  IconClose,
-  IconCohort,
-  IconCopy,
-  IconCumulativeChart,
   IconDatabase,
-  IconDownload,
-  IconEdit,
-  IconErrorOutline,
-  IconExclamation,
   IconFlag,
-  IconFlare,
   IconFlask,
-  IconGift,
   IconGridView,
-  IconHandClick,
-  IconHome,
-  IconLayers,
-  IconListView,
-  IconLogout,
-  IconMail,
-  IconMoon,
-  IconPanelRight,
-  IconPerson,
-  IconPlayCircle,
-  IconPlus,
-  IconPremium,
-  IconQueryEditor,
-  IconRadar,
   IconRecording,
-  IconRobot,
-  IconRocket,
-  IconSave,
-  IconSearch,
-  IconSelectEvents,
-  IconStar,
-  IconSubArrowRight,
-  IconSun,
   IconSurveys,
-  IconSync,
-  IconTableChart,
-  IconTerminal,
-  IconToggle,
-  IconTrash,
-  IconTuning,
-  IconUpload,
-  IconVolume,
-  IconVolumeOff,
-  PH_ICONS,
-  type IconName,
+  type CanonicalIconName,
+  type IconProps,
 } from "@/components/icons";
-import { ShowcaseWrapper } from "@/components/ui";
+import { Kbd, ShowcaseWrapper } from "@/components/ui";
 
-const iconCells: { name: IconName; Icon: (typeof PH_ICONS)[IconName] }[] = [
-  { name: "activity", Icon: IconActivity },
-  { name: "areaChart", Icon: IconAreaChart },
-  { name: "arrowUp", Icon: IconArrowUp },
-  { name: "arrowDown", Icon: IconArrowDown },
-  { name: "bell", Icon: IconBell },
-  { name: "bellOff", Icon: IconBellOff },
-  { name: "bolt", Icon: IconBolt },
-  { name: "box", Icon: IconBox },
-  { name: "cancel", Icon: IconCancel },
-  { name: "check", Icon: IconCheck },
-  { name: "checkCircle", Icon: IconCheckCircle },
-  { name: "chevronDown", Icon: IconChevronDown },
-  { name: "chevronLeft", Icon: IconChevronLeft },
-  { name: "chevronRight", Icon: IconChevronRight },
-  { name: "clipboard", Icon: IconClipboardEdit },
-  { name: "close", Icon: IconClose },
-  { name: "cohort", Icon: IconCohort },
-  { name: "copy", Icon: IconCopy },
-  { name: "cumulativeChart", Icon: IconCumulativeChart },
-  { name: "database", Icon: IconDatabase },
-  { name: "download", Icon: IconDownload },
-  { name: "edit", Icon: IconEdit },
-  { name: "errorOutline", Icon: IconErrorOutline },
-  { name: "exclamation", Icon: IconExclamation },
-  { name: "flag", Icon: IconFlag },
-  { name: "flare", Icon: IconFlare },
-  { name: "flask", Icon: IconFlask },
-  { name: "gift", Icon: IconGift },
-  { name: "grid", Icon: IconGridView },
-  { name: "handClick", Icon: IconHandClick },
-  { name: "home", Icon: IconHome },
-  { name: "layers", Icon: IconLayers },
-  { name: "list", Icon: IconListView },
-  { name: "logout", Icon: IconLogout },
-  { name: "mail", Icon: IconMail },
-  { name: "moon", Icon: IconMoon },
-  { name: "panelRight", Icon: IconPanelRight },
-  { name: "person", Icon: IconPerson },
-  { name: "play", Icon: IconPlayCircle },
-  { name: "plus", Icon: IconPlus },
-  { name: "premium", Icon: IconPremium },
-  { name: "queryEditor", Icon: IconQueryEditor },
-  { name: "radar", Icon: IconRadar },
-  { name: "recording", Icon: IconRecording },
-  { name: "robot", Icon: IconRobot },
-  { name: "rocket", Icon: IconRocket },
-  { name: "save", Icon: IconSave },
-  { name: "search", Icon: IconSearch },
-  { name: "selectEvents", Icon: IconSelectEvents },
-  { name: "settings", Icon: IconTuning },
-  { name: "star", Icon: IconStar },
-  { name: "subArrowRight", Icon: IconSubArrowRight },
-  { name: "sun", Icon: IconSun },
-  { name: "surveys", Icon: IconSurveys },
-  { name: "sync", Icon: IconSync },
-  { name: "tableChart", Icon: IconTableChart },
-  { name: "terminal", Icon: IconTerminal },
-  { name: "toggle", Icon: IconToggle },
-  { name: "trash", Icon: IconTrash },
-  { name: "upload", Icon: IconUpload },
-  { name: "volume", Icon: IconVolume },
-  { name: "volumeOff", Icon: IconVolumeOff },
-];
+const iconCells = Object.entries(CANONICAL_ICONS) as Array<[
+  CanonicalIconName,
+  ComponentType<IconProps>,
+]>;
+
+const originalIcons = Object.entries(OLD_UI_ICONS) as Array<[
+  keyof typeof OLD_UI_ICONS,
+  ComponentType<IconProps>,
+]>;
 
-const colourTiles = [
-  { label: "Session replay", Icon: IconRecording, fg: "--ph-product-session-replay" as const },
-  { label: "Product analytics", Icon: IconAreaChart, fg: "--ph-product-product-analytics" as const },
-  { label: "Data pipeline", Icon: IconGridView, fg: "--ph-product-data-pipeline" as const },
-  { label: "Feature flags", Icon: IconFlag, fg: "--ph-product-feature-flags" as const },
-  { label: "Experiments", Icon: IconFlask, fg: "--ph-product-experiments" as const },
-  { label: "Data warehouse", Icon: IconDatabase, fg: "--ph-product-data-warehouse" as const },
-  { label: "Surveys", Icon: IconSurveys, fg: "--ph-product-surveys" as const },
+const productTiles = [
+  { label: "Session replay", Icon: IconRecording, color: "--ph-product-session-replay" },
+  { label: "Product analytics", Icon: IconAreaChart, color: "--ph-product-product-analytics" },
+  { label: "Data pipeline", Icon: IconGridView, color: "--ph-product-data-pipeline" },
+  { label: "Feature flags", Icon: IconFlag, color: "--ph-product-feature-flags" },
+  { label: "Experiments", Icon: IconFlask, color: "--ph-product-experiments" },
+  { label: "Data warehouse", Icon: IconDatabase, color: "--ph-product-data-warehouse" },
+  { label: "Surveys", Icon: IconSurveys, color: "--ph-product-surveys" },
 ];
 
 export default function IconShowcase() {
-  const code = `import { IconActivity, IconAreaChart, IconArrowDown, IconArrowUp, IconBell, IconBellOff, IconBolt, IconBox, IconCancel, IconCheck, IconCheckCircle, IconChevronDown, IconChevronLeft, IconChevronRight, IconClipboardEdit, IconClose, IconCohort, IconCopy, IconCumulativeChart, IconDatabase, IconDownload, IconEdit, IconErrorOutline, IconExclamation, IconFlag, IconFlare, IconFlask, IconGift, IconGridView, IconHandClick, IconHome, IconLayers, IconListView, IconLogout, IconMail, IconMoon, IconPanelRight, IconPerson, IconPlayCircle, IconPlus, IconPremium, IconQueryEditor, IconRadar, IconRecording, IconRobot, IconRocket, IconSave, IconSearch, IconSelectEvents, IconStar, IconSubArrowRight, IconSun, IconSurveys, IconSync, IconTableChart, IconTerminal, IconToggle, IconTrash, IconTuning, IconUpload, IconVolume, IconVolumeOff, PH_ICONS, type IconName } from "the-old-ui";
-
-<div className="space-y-8">
-  <div className="ph-panel space-y-4">
-    <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Bespoke Lemon glyphs</h3>
-    <p className="text-sm leading-relaxed text-ph-subtle">
-      Paths mirror PostHog&apos;s Lemon UI — filled{" "}
-      <code className="ph-kbd">currentColor</code> SVGs at <code className="ph-kbd">1em</code>, vendored in{" "}
-      <code className="ph-kbd">the-old-ui</code> (no Lucide).
-    </p>
-
-    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
-      {iconCells.map(({ name, Icon }) => (
-        <div
-          key={name}
-          className="flex flex-col items-center gap-2 rounded-[var(--ph-radius-app)] border border-ph-border bg-ph-surface p-4 text-center"
-          style={{ boxShadow: "var(--ph-shadow-elevation-3000)" }}
-        >
-          <Icon className="h-6 w-6 text-ph-ink" />
-          <span className="text-[10px] font-medium uppercase tracking-wide text-ph-mutedtext">{name}</span>
-        </div>
-      ))}
-    </div>
-  </div>
+  const code = `import {
+  IconCommandCursor,
+  IconDataReel,
+  IconInsightBoard,
+  IconOldWindow,
+} from "@xenide-io/the-old-ui-theme";
 
-  <div className="ph-panel space-y-4">
-    <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product rail hues</h3>
-    <p className="text-sm leading-relaxed text-ph-subtle">
-      In-app nav tiles use saturated backgrounds with light glyphs — tokens map to{" "}
-      <code className="ph-kbd">--ph-product-*</code> in <code className="ph-kbd">globals.css</code>.
-    </p>
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
-      {colourTiles.map(({ label, Icon, fg }) => (
-        <div
-          key={label}
-          className="ph-icon-tile border-white/15 text-white"
-          style={{ backgroundColor: \`var(\${fg})\` }}
-        >
-          <Icon className="mb-1 h-7 w-7 drop-shadow-sm" />
-          <span className="max-w-full truncate px-1 text-center normal-case tracking-normal">{label}</span>
-        </div>
-      ))}
-    </div>
-  </div>
+<div className="flex items-center gap-4 text-ph-ink">
+  <IconOldWindow size={16} />
+  <IconCommandCursor size={20} />
+  <IconDataReel size={24} />
+  <IconInsightBoard size={24} aria-label="Insights" />
 </div>`;
 
   return (
     <ShowcaseWrapper
       title="Icons"
-      description="Bespoke Lemon glyphs from PostHog open source — filled Material / product paths, not Lucide stroke icons."
+      description="A canonical filled SVG registry with PostHog/Material foundations and clearly identified Old UI originals."
       code={code}
       filename="IconExample.tsx"
     >
       <div className="space-y-8">
-        <div className="ph-panel space-y-4">
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Bespoke Lemon glyphs</h3>
-          <p className="text-sm leading-relaxed text-ph-subtle">
-            Paths mirror PostHog&apos;s Lemon UI — filled{" "}
-            <code className="ph-kbd">currentColor</code> SVGs at <code className="ph-kbd">1em</code>, vendored in{" "}
-            <code className="ph-kbd">the-old-ui</code> (no Lucide).
-          </p>
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Old UI originals</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Authored 24px glyphs for retro interface and analytics concepts. Each uses <Kbd variant="token">currentColor</Kbd>, a filled silhouette, and enough negative space to survive at 16px.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+            {originalIcons.map(([name, Icon]) => (
+              <div key={name} className="flex flex-col items-center gap-3 rounded-lg border border-ph-border-subtle bg-ph-raised p-4 text-center">
+                <div className="flex h-9 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-xs font-medium text-ph-subtle">{formatName(name)}</span>
+              </div>
+            ))}
+          </div>
+        </section>
 
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Canonical registry</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Documentation is generated from <Kbd variant="token">CANONICAL_ICONS</Kbd>. Compatibility aliases remain available through <Kbd variant="token">PH_ICONS</Kbd> without duplicating this inventory.
+            </p>
+          </div>
           <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
-            {iconCells.map(({ name, Icon }) => (
-              <div
-                key={name}
-                className="flex flex-col items-center gap-2 rounded-[var(--ph-radius-app)] border border-ph-border bg-ph-surface p-4 text-center"
-                style={{ boxShadow: "var(--ph-shadow-elevation-3000)" }}
-              >
-                <Icon className="h-6 w-6 text-ph-ink" />
-                <span className="text-[10px] font-medium uppercase tracking-wide text-ph-mutedtext">{name}</span>
+            {iconCells.map(([name, Icon]) => (
+              <div key={name} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
+                <div className="flex h-8 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{name}</span>
               </div>
             ))}
           </div>
-        </div>
+        </section>
 
-        <div className="ph-panel space-y-4">
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product rail hues</h3>
-          <p className="text-sm leading-relaxed text-ph-subtle">
-            In-app nav tiles use saturated backgrounds with light glyphs — tokens map to{" "}
-            <code className="ph-kbd">--ph-product-*</code> in <code className="ph-kbd">globals.css</code>.
-          </p>
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product hues</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Product color is used as a subtle tint and icon accent instead of assuming white foregrounds on every theme.
+            </p>
+          </div>
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
-            {colourTiles.map(({ label, Icon, fg }) => (
+            {productTiles.map(({ label, Icon, color }) => (
               <div
                 key={label}
-                className="ph-icon-tile border-white/15 text-white"
-                style={{ backgroundColor: `var(${fg})` }}
+                className="ph-icon-tile ph-product-icon-tile"
+                style={{ "--ph-icon-tile-color": `var(${color})` } as CSSProperties}
               >
-                <Icon className="mb-1 h-7 w-7 drop-shadow-sm" />
-                <span className="max-w-full truncate px-1 text-center normal-case tracking-normal">{label}</span>
+                <Icon className="mb-1" size={28} />
+                <span className="max-w-full px-1 text-center normal-case tracking-normal">{label}</span>
               </div>
             ))}
           </div>
-        </div>
+        </section>
       </div>
     </ShowcaseWrapper>
   );
 }
+
+function formatName(name: string) {
+  return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (letter) => letter.toUpperCase());
+}

package/src/components/sections/KbdShowcase.tsx

@@ -1,30 +1,56 @@
-import { Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
+import { ComponentDocs, Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
 
 export default function KbdShowcase() {
-  const code = `import { Kbd, Panel } from "the-old-ui";
+  const code = `import { Kbd, Panel } from "@xenide-io/the-old-ui-theme";
 
-<Panel className="flex flex-wrap items-center gap-3 text-ph-subtle">
-  <Kbd keys={["⌘", "K"]} />
-  <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-  <Kbd keys={["⌥", "⇧", "E"]} />
-  <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-  <Kbd variant="token">HogQL</Kbd>
-  <p className="w-full pt-5 text-xs text-ph-mutedtext">
-    Keyboard hints and code tokens are rendered through the same reusable component.
-  </p>
+<Panel className="space-y-5">
+  <div className="flex flex-wrap items-center gap-4">
+    <Kbd keys={["Command", "K"]} platform="mac" />
+    <Kbd keys={["Control", "K"]} platform="windows" />
+    <Kbd keys={["Control", "K"]} />
+  </div>
+  <div className="flex flex-wrap items-center gap-3">
+    <Kbd variant="key">Escape</Kbd>
+    <Kbd variant="key">↵</Kbd>
+    <Kbd variant="token">HogQL</Kbd>
+  </div>
 </Panel>`;
 
   return (
-    <ShowcaseWrapper title="Keyboard glyphs" code={code} filename="KbdExample.tsx">
-      <Panel className="flex flex-wrap items-center gap-3 text-ph-subtle">
-        <Kbd keys={["⌘", "K"]} />
-        <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-        <Kbd keys={["⌥", "⇧", "E"]} />
-        <span className="text-xs font-semibold text-ph-mutedtext">/</span>
-        <Kbd variant="token">HogQL</Kbd>
-        <p className="w-full pt-5 text-xs text-ph-mutedtext">
-          Keyboard hints and code tokens are rendered through the same reusable component.
-        </p>
+    <ShowcaseWrapper
+      title="Keyboard glyphs"
+      description="PostHog-style joined shortcut caps with crisp lower borders, monospace type, and separate inline code tokens."
+      code={code}
+      filename="KbdExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "variant", type: "shortcut | key | token", defaultValue: "shortcut", description: "Chooses a shortcut group, single physical key, or inline code token." },
+            { name: "keys", type: "readonly ReactNode[]", description: "Joins a shortcut chord inside one compact cap without stringifying React nodes." },
+            { name: "platform", type: "text | mac | windows", defaultValue: "text", description: "Converts named modifier keys only when explicitly requested." },
+            { name: "separator", type: "ReactNode", description: "Optional visual separator inside the joined shortcut cap." },
+            { name: "aria-label", type: "string", description: "Optional spoken shortcut override; textual keys generate one automatically." },
+          ]}
+        />
+      }
+    >
+      <Panel className="space-y-5">
+        <div>
+          <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Platform shortcuts</h3>
+          <div className="flex flex-wrap items-center gap-4">
+            <Kbd keys={["Command", "K"]} platform="mac" />
+            <Kbd keys={["Control", "K"]} platform="windows" />
+            <Kbd keys={["Control", "K"]} />
+          </div>
+        </div>
+        <div>
+          <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Keys and tokens</h3>
+          <div className="flex flex-wrap items-center gap-3">
+            <Kbd variant="key">Escape</Kbd>
+            <Kbd variant="key">↵</Kbd>
+            <Kbd variant="token">HogQL</Kbd>
+          </div>
+        </div>
       </Panel>
     </ShowcaseWrapper>
   );

package/src/components/sections/ModalShowcase.tsx

@@ -9,8 +9,7 @@ export default function ModalShowcase() {
 
   const close = () => setOpenModal(null);
 
-  const code = `import { IconCheck, IconClose, IconPlus } from "the-old-ui";
-import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
+  const code = `import { Button, IconCheck, IconClose, IconPlus, Input, Modal, Select, Textarea } from "@xenide-io/the-old-ui-theme";
 
 <div className="ph-panel space-y-4">
   <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
@@ -45,7 +44,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
     footer={<Button variant="success" onClick={close}>Continue</Button>}
   >
     <div className="flex items-start gap-3">
-      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-ph-success">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
         <IconCheck className="h-5 w-5" />
       </div>
       <div>
@@ -67,7 +66,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
     }
   >
     <div className="flex items-start gap-3">
-      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-red-100 text-ph-danger">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
         <IconClose className="h-5 w-5" />
       </div>
       <div>
@@ -114,6 +113,8 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
             { name: "size", type: "sm | md | lg | xl | full", defaultValue: "md", description: "Controls panel max width." },
             { name: "title", type: "string", description: "Accessible dialog heading." },
             { name: "footer", type: "ReactNode", description: "Renders action row with consistent spacing." },
+            { name: "closeOnOutsideClick", type: "boolean", defaultValue: "true", description: "Controls pointer dismissal outside the dialog." },
+            { name: "closeOnEscape", type: "boolean", defaultValue: "true", description: "Controls Escape-key dismissal." },
           ]}
         />
       }
@@ -151,7 +152,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
           footer={<Button variant="success" onClick={close}>Continue</Button>}
         >
           <div className="flex items-start gap-3">
-            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-ph-success">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
               <IconCheck className="h-5 w-5" />
             </div>
             <div>
@@ -173,7 +174,7 @@ import { Button, Input, Modal, Select, Textarea } from "the-old-ui";
           }
         >
           <div className="flex items-start gap-3">
-            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-red-100 text-ph-danger">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
               <IconClose className="h-5 w-5" />
             </div>
             <div>