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

package/src/components/sections/DropdownShowcase.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } from "@/components/icons";
-import { DropdownButton, DropdownItem, ShowcaseWrapper } from "@/components/ui";
-
-export default function DropdownShowcase() {
-  const code = `import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } from "@xenide-io/the-old-ui-theme";
-import { DropdownButton, DropdownItem } from "@xenide-io/the-old-ui-theme";
-
-<div className="ph-panel space-y-6">
-  <p className="text-sm text-ph-subtle">
-    Use <code className="ph-kbd">DropdownButton</code> from{" "}
-    <code className="ph-kbd">the-old-ui</code> — labelled Lemon triggers +{" "}
-    <code className="ph-kbd">DropdownItem</code> menu rows.
-  </p>
-
-  <div className="flex flex-wrap items-start gap-6">
-    <DropdownButton label="Actions" variant="primary">
-      <DropdownItem>Refresh cache</DropdownItem>
-      <DropdownItem>Export HogQL</DropdownItem>
-      <DropdownItem>Jump to inspector</DropdownItem>
-    </DropdownButton>
-
-    <DropdownButton label="Account" variant="secondary">
-      <DropdownItem>
-        <IconPerson className="h-4 w-4" aria-hidden /> Profile
-      </DropdownItem>
-      <DropdownItem>
-        <IconTuning className="h-4 w-4" aria-hidden /> Project settings
-      </DropdownItem>
-      <DropdownItem>
-        <IconLogout className="h-4 w-4" aria-hidden /> Sign out
-      </DropdownItem>
-    </DropdownButton>
-
-    <DropdownButton label="Row menu" variant="accent" outline>
-      <DropdownItem>
-        <IconEdit className="h-4 w-4" aria-hidden /> Rename
-      </DropdownItem>
-      <DropdownItem>
-        <IconCopy className="h-4 w-4" aria-hidden /> Duplicate key
-      </DropdownItem>
-      <div className="my-1 h-px bg-ph-border" />
-      <DropdownItem className="text-ph-danger">
-        <IconTrash className="h-4 w-4" aria-hidden /> Delete
-      </DropdownItem>
-    </DropdownButton>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Dropdowns"
-      description="Accessible menu buttons with keyboard navigation and automatic viewport-aware side flipping and alignment shifting."
-      code={code}
-      filename="DropdownExample.tsx"
-    >
-      <div className="ph-panel space-y-6">
-        <p className="text-sm text-ph-subtle">
-          Menus prefer the requested side, then flip above or sideways and shift start/end alignment to remain visible.
-        </p>
-
-        <div className="flex flex-wrap items-start gap-6">
-          <DropdownButton label="Actions" variant="primary">
-            <DropdownItem>Refresh cache</DropdownItem>
-            <DropdownItem>Export HogQL</DropdownItem>
-            <DropdownItem>Jump to inspector</DropdownItem>
-          </DropdownButton>
-
-          <DropdownButton label="Account" variant="secondary">
-            <DropdownItem>
-              <IconPerson className="h-4 w-4" aria-hidden /> Profile
-            </DropdownItem>
-            <DropdownItem>
-              <IconTuning className="h-4 w-4" aria-hidden /> Project settings
-            </DropdownItem>
-            <DropdownItem>
-              <IconLogout className="h-4 w-4" aria-hidden /> Sign out
-            </DropdownItem>
-          </DropdownButton>
-
-          <DropdownButton label="Row menu" variant="accent" outline>
-            <DropdownItem>
-              <IconEdit className="h-4 w-4" aria-hidden /> Rename
-            </DropdownItem>
-            <DropdownItem>
-              <IconCopy className="h-4 w-4" aria-hidden /> Duplicate key
-            </DropdownItem>
-            <div className="my-1 h-px bg-ph-border" />
-            <DropdownItem className="text-ph-danger">
-              <IconTrash className="h-4 w-4" aria-hidden /> Delete
-            </DropdownItem>
-          </DropdownButton>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/EmptyStateShowcase.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { Button, ComponentDocs, EmptyState, ShowcaseWrapper } from "@/components/ui";
-import { IconBox, IconPlus } from "@/components/icons";
-
-export default function EmptyStateShowcase() {
-  const code = `import { Button, EmptyState } from "the-old-ui";
-import { IconBox, IconPlus } from "the-old-ui";
-
-<EmptyState
-  icon={<IconBox className="h-7 w-7" />}
-  title="No projects yet"
-  description="Get started by creating your first project to organize your analytics."
-  action={
-    <Button icon={<IconPlus className="h-4 w-4" />}>
-      Create Project
-    </Button>
-  }
-/>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Empty State"
-      description="Reusable blank-state component for zero data, filtered results, or onboarding prompts."
-      code={code}
-      filename="EmptyStateExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "icon", type: "ReactNode", description: "Optional visual icon." },
-            { name: "title", type: "string", description: "Primary message." },
-            { name: "description", type: "string", description: "Supporting copy." },
-            { name: "action", type: "ReactNode", description: "Primary CTA slot." },
-          ]}
-        />
-      }
-    >
-      <EmptyState
-        icon={<IconBox className="h-7 w-7" />}
-        title="No projects yet"
-        description="Get started by creating your first project to organize your analytics."
-        action={
-          <Button icon={<IconPlus className="h-4 w-4" />}>
-            Create Project
-          </Button>
-        }
-      />
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/FilterChipsShowcase.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import { useState } from "react";
-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 [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 remove = (id: string) => {
-    if (id === "status") setStatus("all");
-    if (id === "owner") setOwner("anyone");
-  };
-
-  const code = `import { FilterControls, FilterMenu, SortMenu } from "@xenide-io/the-old-ui-theme";
-
-<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
-      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="FilterBarExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { 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." },
-          ]}
-        />
-      }
-    >
-      <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

@@ -1,127 +0,0 @@
-import {
-  ComponentDocs,
-  Checkbox,
-  FileUpload,
-  Input,
-  Panel,
-  Radio,
-  Range,
-  Rating,
-  SearchGroup,
-  Select,
-  Textarea,
-  Toggle,
-  ShowcaseWrapper,
-} from "@/components/ui";
-
-export default function FormShowcase() {
-  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">
-    <Input label="Default" placeholder="Filter events..." />
-    <Input label="Error" placeholder="hogql query" error="Malformed identifier near line 12" />
-    <Input label="Ghost toolbar field" type="search" placeholder="Search..." variant="ghost" />
-    <Input label="Disabled" placeholder="Unavailable" disabled />
-  </Panel>
-
-  <Panel title="Select & textarea" className="space-y-6">
-    <Select label="Environment" defaultValue="prod">
-      <option value="prod">Production</option>
-      <option value="staging">Staging</option>
-      <option value="dev">Development</option>
-    </Select>
-
-    <Textarea label="Description" placeholder="Explain the rollout..." />
-
-    <Checkbox label="Autocapture pageviews" defaultChecked />
-    <Checkbox label="Record console logs (disabled product)" disabled />
-
-    <div className="flex flex-col gap-2">
-      <Radio name="cohort" label="Dynamic cohort" defaultChecked />
-      <Radio name="cohort" label="Static upload" />
-    </div>
-
-    <Toggle label="Session replay" defaultChecked />
-    <Toggle label="Error tracking (disabled)" disabled />
-  </Panel>
-
-  <Panel title="Range, rating, uploads" className="space-y-6 lg:col-span-2">
-    <Range label="Sample rate" min={0} max={100} defaultValue={42} minLabel="Off" valueLabel="42%" maxLabel="Full" wrapperClassName="max-w-xl" />
-
-    <Rating label="Satisfaction" value={4} />
-
-    <FileUpload label="Source map archive" prompt="Drop tarball or browse" wrapperClassName="max-w-xl" />
-
-    <SearchGroup label="Grouped search" submitLabel="Search records" />
-  </Panel>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Inputs & Forms"
-      description="Actual exported input components with built-in labels, error states, helper text, disabled state, and size/variant props."
-      code={code}
-      filename="FormExample.tsx"
-      docs={
-        <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." },
-            { name: "Checkbox", type: "checkbox", description: "Checkbox with label and native input props." },
-            { name: "Radio", type: "radio", description: "Radio item with label and native input props." },
-            { name: "Toggle", type: "switch", description: "Switch-style checkbox with row layout." },
-            { name: "Range", type: "range", description: "Range slider with optional min/value/max labels." },
-            { name: "Rating", type: "rating", description: "Star rating display/control with value, max, and onChange props." },
-            { name: "FileUpload", type: "file", description: "Dropzone-style file input wrapper." },
-            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Shared density prop for Input, Select, and Textarea." },
-            { name: "variant", type: "default | ghost", defaultValue: "default", description: "Input visual variant. Ghost is useful in toolbar/search contexts." },
-          ]}
-        />
-      }
-    >
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <Panel title="Text inputs" className="space-y-6">
-          <Input label="Default" placeholder="Filter events..." />
-          <Input label="Error" placeholder="hogql query" error="Malformed identifier near line 12" />
-          <Input label="Ghost toolbar field" type="search" placeholder="Search..." variant="ghost" />
-          <Input label="Disabled" placeholder="Unavailable" disabled />
-        </Panel>
-
-        <Panel title="Select & textarea" className="space-y-6">
-          <Select label="Environment" defaultValue="prod">
-            <option value="prod">Production</option>
-            <option value="staging">Staging</option>
-            <option value="dev">Development</option>
-          </Select>
-
-          <Textarea label="Description" placeholder="Explain the rollout..." />
-
-          <Checkbox label="Autocapture pageviews" defaultChecked />
-          <Checkbox label="Record console logs (disabled product)" disabled />
-
-          <div className="flex flex-col gap-2">
-            <Radio name="cohort" label="Dynamic cohort" defaultChecked />
-            <Radio name="cohort" label="Static upload" />
-          </div>
-
-          <Toggle label="Session replay" defaultChecked />
-          <Toggle label="Error tracking (disabled)" disabled />
-        </Panel>
-
-        <Panel title="Range, rating, uploads" className="space-y-6 lg:col-span-2">
-          <Range label="Sample rate" min={0} max={100} defaultValue={42} minLabel="Off" valueLabel="42%" maxLabel="Full" wrapperClassName="max-w-xl" />
-
-          <Rating label="Satisfaction" value={4} />
-
-          <FileUpload label="Source map archive" prompt="Drop tarball or browse" wrapperClassName="max-w-xl" />
-
-          <SearchGroup label="Grouped search" submitLabel="Search records" />
-        </Panel>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/HoverCardShowcase.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { Badge, Button, ComponentDocs, HoverCard, ShowcaseWrapper } from "@/components/ui";
-
-export default function HoverCardShowcase() {
-  const code = `import { Badge, Button, HoverCard } from "the-old-ui";
-
-<div className="ph-panel flex justify-center py-12">
-  <HoverCard trigger={<Button>Hover me</Button>}>
-    <div className="space-y-2">
-      <h4 className="font-semibold text-ph-ink">User Profile</h4>
-      <p className="text-sm text-ph-subtle">This is a hover card with rich content that appears on hover.</p>
-      <div className="flex gap-2 pt-2">
-        <Badge variant="brand">Admin</Badge>
-        <Badge variant="neutral">Pro</Badge>
-      </div>
-    </div>
-  </HoverCard>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Hover Card"
-      description="Rich hover disclosure for contextual details."
-      code={code}
-      filename="HoverCardExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "trigger", type: "ReactNode", description: "Element users hover or focus." },
-            { name: "children", type: "ReactNode", description: "Content shown in the card." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel flex justify-center py-12">
-        <HoverCard trigger={<Button>Hover me</Button>}>
-          <div className="space-y-2">
-            <h4 className="font-semibold text-ph-ink">User Profile</h4>
-            <p className="text-sm text-ph-subtle">This is a hover card with rich content that appears on hover.</p>
-            <div className="flex gap-2 pt-2">
-              <Badge variant="brand">Admin</Badge>
-              <Badge variant="neutral">Pro</Badge>
-            </div>
-          </div>
-        </HoverCard>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/IconShowcase.tsx

@@ -1,121 +0,0 @@
-import type { ComponentType, CSSProperties } from "react";
-import {
-  CANONICAL_ICONS,
-  OLD_UI_ICONS,
-  IconAreaChart, IconDatabase, IconFlag, IconFlask, IconGridView, IconRecording, IconSurveys,
-  type CanonicalIconName,
-  type IconProps,
-} from "@/components/icons";
-import { Kbd, ShowcaseWrapper } from "@/components/ui";
-
-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 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 {
-  IconCommandCursor,
-  IconDataReel,
-  IconInsightBoard,
-  IconOldWindow,
-} from "@xenide-io/the-old-ui-theme";
-
-<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="A canonical filled SVG registry with clearly identified Old UI originals and the new suite icon system."
-      code={code}
-      filename="IconExample.tsx"
-    >
-      <div className="space-y-8">
-        <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 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>
-        </section>
-
-        <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">
-            {productTiles.map(({ label, Icon, color }) => (
-              <div
-                key={label}
-                className="ph-icon-tile ph-product-icon-tile"
-                style={{ "--ph-icon-tile-color": `var(${color})` } as CSSProperties}
-              >
-                <Icon className="mb-1" size={28} />
-                <span className="max-w-full px-1 text-center normal-case tracking-normal">{label}</span>
-              </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/IndicatorShowcase.tsx

@@ -1,52 +0,0 @@
-import { IconBell, IconMail, IconShoppingCart, IconSurveys } from "@/components/icons";
-import { ComponentDocs, Indicator, ShowcaseWrapper } from "@/components/ui";
-
-const indicators = [
-  { icon: IconBell, label: "Notifications", count: "8", hue: "bg-ph-brand" },
-  { icon: IconMail, label: "Messages", count: "99+", hue: "bg-ph-blue" },
-  { icon: IconSurveys, label: "Comments", count: "3", hue: "bg-emerald-600" },
-  { icon: IconShoppingCart, label: "Cart", count: "!", hue: "bg-ph-danger" },
-] as const;
-
-export default function IndicatorShowcase() {
-  const code = `import { Indicator } from "the-old-ui";
-
-<Indicator badge="8" color="bg-ph-brand">
-  <Button variant="ghost" shape="circle">
-    <IconBell className="h-6 w-6" />
-  </Button>
-</Indicator>
-
-<Indicator dot color="bg-ph-brand">
-  <Avatar label="JD" />
-</Indicator>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Badge hotspots"
-      description="Indicator badges and dots for notifications, status, and counts."
-      code={code}
-      filename="IndicatorExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "badge", type: "ReactNode", description: "Badge content (number, text, !)." },
-            { name: "color", type: "string", defaultValue: "bg-ph-brand", description: "Tailwind colour class." },
-            { name: "position", type: "top-right | top-left | bottom-right | bottom-left", defaultValue: "top-right", description: "Indicator position." },
-            { name: "dot", type: "boolean", defaultValue: "false", description: "Show a simple dot instead of badge." },
-          ]}
-        />
-      }
-    >
-      <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted px-10 py-8">
-        {indicators.map(({ icon: Icon, label, count, hue }) => (
-          <Indicator key={label} badge={count} color={hue}>
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-ph-surface shadow-ph">
-              <Icon className="h-6 w-6 text-ph-mutedtext" />
-            </div>
-          </Indicator>
-        ))}
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/KbdShowcase.tsx

@@ -1,57 +0,0 @@
-import { ComponentDocs, Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
-
-export default function KbdShowcase() {
-  const code = `import { Kbd, Panel } from "@xenide-io/the-old-ui-theme";
-
-<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"
-      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>
-  );
-}