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

package/src/components/sections/CommandPaletteShowcase.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, CommandPalette, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-import { IconSearch, IconBolt, IconTuning, IconHome, IconPerson } from "@/components/icons";
-
-export default function CommandPaletteShowcase() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const items = [
-    { id: "1", label: "Go to Dashboard", shortcut: "Cmd+D", icon: <IconHome className="h-5 w-5" />, onSelect: () => {} },
-    { id: "2", label: "Search Events", shortcut: "Cmd+K", icon: <IconSearch className="h-5 w-5" />, onSelect: () => {} },
-    { id: "3", label: "Run Query", shortcut: "Cmd+R", icon: <IconBolt className="h-5 w-5" />, onSelect: () => {} },
-    { id: "4", label: "Settings", shortcut: "Cmd+,", icon: <IconTuning className="h-5 w-5" />, onSelect: () => {} },
-    { id: "5", label: "Profile", icon: <IconPerson className="h-5 w-5" />, onSelect: () => {} },
-  ];
-
-  const code = `import { Button, CommandPalette } from "the-old-ui";
-import { IconSearch, IconBolt, IconTuning, IconHome, IconPerson } from "the-old-ui";
-
-<div className="ph-panel">
-  <Button onClick={() => setIsOpen(true)}>Open Command Palette</Button>
-  <CommandPalette items={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Command Palette"
-      description="Application command launcher with controlled open state and typed item actions."
-      code={code}
-      filename="CommandPaletteExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "items", type: "{ id; label; shortcut?; icon?; onSelect }[]", description: "Commands shown in the palette." },
-            { name: "isOpen", type: "boolean", description: "Controls palette visibility." },
-            { name: "onClose", type: "() => void", description: "Called by escape, backdrop, or selection." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <Button onClick={() => setIsOpen(true)}>Open Command Palette</Button>
-        <CommandPalette items={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CountdownShowcase.tsx

@@ -1,43 +0,0 @@
-import { ShowcaseWrapper } from "@/components/ui";
-
-export default function CountdownShowcase() {
-  const code = `
-
-<div className="ph-panel">
-  <p className="mb-6 text-sm text-ph-subtle">Static split — swap for synced timers once you plug in real experiment deadlines.</p>
-  <div className="flex flex-wrap justify-center gap-3 text-ph-ink sm:justify-start">
-    {[
-      { v: "04", label: "Days" },
-      { v: "12", label: "Hrs" },
-      { v: "33", label: "Min" },
-      { v: "09", label: "Sec" },
-    ].map(({ v, label }) => (
-      <div key={label} className="flex min-w-[4.75rem] flex-col items-center rounded-xl border border-ph-border bg-ph-surface px-4 py-3 shadow-ph">
-        <span className="text-3xl font-bold tabular-nums">{v}</span>
-        <span className="text-[11px] font-semibold uppercase tracking-wider text-ph-mutedtext">{label}</span>
-      </div>
-    ))}
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper title="Countdown motif" code={code} filename="CountdownExample.tsx">
-      <div className="ph-panel">
-        <p className="mb-6 text-sm text-ph-subtle">Static split — swap for synced timers once you plug in real experiment deadlines.</p>
-        <div className="flex flex-wrap justify-center gap-3 text-ph-ink sm:justify-start">
-          {[
-            { v: "04", label: "Days" },
-            { v: "12", label: "Hrs" },
-            { v: "33", label: "Min" },
-            { v: "09", label: "Sec" },
-          ].map(({ v, label }) => (
-            <div key={label} className="flex min-w-[4.75rem] flex-col items-center rounded-xl border border-ph-border bg-ph-surface px-4 py-3 shadow-ph">
-              <span className="text-3xl font-bold tabular-nums">{v}</span>
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-ph-mutedtext">{label}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/DiffShowcase.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ShowcaseWrapper } from "@/components/ui";
-
-/** Lightweight before/after — PostHog product diffs screenshots in Visual Review Playwright suites. */
-
-export default function DiffShowcase() {
-  const [pct, setPct] = useState(50);
-
-  const code = `
-
-<div className="ph-panel max-w-3xl">
-  <label className="mb-6 flex items-center gap-4 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">
-    Position
-    <input type="range" min={0} max={100} value={pct} onChange={(e) => setPct(Number(e.target.value))} className="flex-1" />
-    <span className="tabular-nums text-ph-ink">{pct}%</span>
-  </label>
-  <div className="relative aspect-video overflow-hidden rounded-xl border border-ph-border shadow-ph-md">
-    <div className="absolute inset-0 grid place-content-center bg-ph-toolbar text-xs font-semibold uppercase text-ph-mutedtext">
-      After · lightened neutral surfaces
-    </div>
-    <div
-      className="absolute inset-y-0 left-0 overflow-hidden bg-ph-muted"
-      style={{
-        clipPath: \`inset(0 \${100 - pct}% 0 0)\`,
-      }}
-    >
-      <div className="grid h-full place-content-center text-xs font-semibold uppercase text-ph-ink">
-        Before · richer contrast rails
-      </div>
-    </div>
-    <span
-      className="pointer-events-none absolute inset-y-0 w-px bg-ph-surface"
-      style={{ left: \`\${pct}%\`, boxShadow: "0 0 0 1px hsl(0deg 0% 0% / .15)" }}
-    />
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper title="Diff slider" code={code} filename="DiffExample.tsx">
-      <div className="ph-panel max-w-3xl">
-        <label className="mb-6 flex items-center gap-4 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">
-          Position
-          <input type="range" min={0} max={100} value={pct} onChange={(e) => setPct(Number(e.target.value))} className="flex-1" />
-          <span className="tabular-nums text-ph-ink">{pct}%</span>
-        </label>
-        <div className="relative aspect-video overflow-hidden rounded-xl border border-ph-border shadow-ph-md">
-          <div className="absolute inset-0 grid place-content-center bg-ph-toolbar text-xs font-semibold uppercase text-ph-mutedtext">
-            After · lightened neutral surfaces
-          </div>
-          <div
-            className="absolute inset-y-0 left-0 overflow-hidden bg-ph-muted"
-            style={{
-              clipPath: `inset(0 ${100 - pct}% 0 0)`,
-            }}
-          >
-            <div className="grid h-full place-content-center text-xs font-semibold uppercase text-ph-ink">
-              Before · richer contrast rails
-            </div>
-          </div>
-          <span
-            className="pointer-events-none absolute inset-y-0 w-px bg-ph-surface"
-            style={{ left: `${pct}%`, boxShadow: "0 0 0 1px hsl(0deg 0% 0% / .15)" }}
-          />
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/DrawerShowcase.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  IconCohort,
-  IconCumulativeChart,
-  IconFlag,
-  IconFlask,
-  IconHome,
-  IconPanelRight,
-  IconTuning,
-} from "@/components/icons";
-import { Button, ComponentDocs, Drawer, ShowcaseWrapper } from "@/components/ui";
-
-const navItems = [
-  { icon: IconHome, label: "Dashboard" },
-  { icon: IconCumulativeChart, label: "Insights" },
-  { icon: IconCohort, label: "Persons" },
-  { icon: IconFlag, label: "Feature flags" },
-  { icon: IconFlask, label: "Experiments" },
-  { icon: IconTuning, label: "Settings" },
-];
-
-export default function DrawerShowcase() {
-  const [open, setOpen] = useState(false);
-
-  const code = `import { IconCohort, IconCumulativeChart, IconFlag, IconFlask, IconHome, IconPanelRight, IconTuning } from "the-old-ui";
-import { Button, Drawer } from "the-old-ui";
-
-<div className="ph-panel">
-  <Button
-    variant="primary"
-    icon={<IconPanelRight className="h-4 w-4" aria-hidden />}
-    onClick={() => setOpen(true)}
-  >
-    Inspect graph
-  </Button>
-
-  <Drawer open={open} onClose={() => setOpen(false)} title="Insight controls">
-    <nav className="flex flex-col gap-1 px-3 py-4">
-      {navItems.map((item) => {
-        const Icon = item.icon;
-        return (
-          <button key={item.label} type="button" className="flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium text-ph-subtle transition hover:bg-ph-muted">
-            <Icon className="h-4 w-4 shrink-0" />
-            {item.label}
-          </button>
-        );
-      })}
-    </nav>
-  </Drawer>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Drawers"
-      description="Slide-out panels with overlay backdrop — useful for secondary navigation, detail views, or configuration panels."
-      code={code}
-      filename="DrawerExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "open", type: "boolean", defaultValue: "false", description: "Controls drawer visibility." },
-            { name: "onClose", type: "() => void", description: "Called by backdrop and close button." },
-            { name: "side", type: "left | right", defaultValue: "right", description: "Which side the drawer enters from." },
-            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Controls drawer width." },
-            { name: "title", type: "ReactNode", description: "Optional header title." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <Button
-          variant="primary"
-          icon={<IconPanelRight className="h-4 w-4" aria-hidden />}
-          onClick={() => setOpen(true)}
-        >
-          Inspect graph
-        </Button>
-
-        <Drawer open={open} onClose={() => setOpen(false)} title="Insight controls">
-          <nav className="flex flex-col gap-1 px-3 py-4">
-            {navItems.map((item) => {
-              const Icon = item.icon;
-              return (
-                <button key={item.label} type="button" className="flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium text-ph-subtle transition hover:bg-ph-muted">
-                  <Icon className="h-4 w-4 shrink-0" />
-                  {item.label}
-                </button>
-              );
-            })}
-          </nav>
-        </Drawer>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

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>
-  );
-}