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

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

package/src/components/sections/ModalShowcase.tsx

@@ -1,211 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { IconCheck, IconClose, IconPlus } from "@/components/icons";
-import { Button, ComponentDocs, Input, Modal, Select, ShowcaseWrapper, Textarea } from "@/components/ui";
-
-export default function ModalShowcase() {
-  const [openModal, setOpenModal] = useState<string | null>(null);
-
-  const close = () => setOpenModal(null);
-
-  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>
-
-  <div className="flex flex-wrap gap-3">
-    <Button variant="secondary" onClick={() => setOpenModal("info")}>
-      Info
-    </Button>
-    <Button variant="success" onClick={() => setOpenModal("success")}>
-      Success
-    </Button>
-    <Button variant="danger" onClick={() => setOpenModal("error")}>
-      Error
-    </Button>
-    <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />} onClick={() => setOpenModal("form")}>
-      Form modal
-    </Button>
-  </div>
-
-  <Modal
-    open={openModal === "info"}
-    onClose={close}
-    title="Configure capture"
-    description="Lightweight overlay + white sheet — Lemon modals skew toward tight copy and decisive buttons."
-    footer={<Button variant="secondary" onClick={close}>Close</Button>}
-  />
-
-  <Modal
-    open={openModal === "success"}
-    onClose={close}
-    showCloseButton={false}
-    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-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
-        <IconCheck className="h-5 w-5" />
-      </div>
-      <div>
-        <h3 className="text-lg font-bold text-ph-success">Saved</h3>
-        <p className="mt-1 text-sm text-ph-subtle">Your dashboard layout synced to the team.</p>
-      </div>
-    </div>
-  </Modal>
-
-  <Modal
-    open={openModal === "error"}
-    onClose={close}
-    showCloseButton={false}
-    footer={
-      <>
-        <Button variant="ghost" onClick={close}>Cancel</Button>
-        <Button variant="danger" onClick={close}>View logs</Button>
-      </>
-    }
-  >
-    <div className="flex items-start gap-3">
-      <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>
-        <h3 className="text-lg font-bold text-ph-danger">Query failed</h3>
-        <p className="mt-1 text-sm text-ph-subtle">ClickHouse returned a timeout — retry or narrow the date range.</p>
-      </div>
-    </div>
-  </Modal>
-
-  <Modal
-    open={openModal === "form"}
-    onClose={close}
-    size="lg"
-    title="Create feature flag"
-    footer={
-      <>
-        <Button variant="ghost" onClick={close}>Cancel</Button>
-        <Button variant="primary" onClick={close}>Create</Button>
-      </>
-    }
-  >
-    <div className="space-y-4">
-      <Input label="Key" placeholder="billing-ui-v3" />
-      <Textarea label="Description" placeholder="Expose the rewritten billing funnel" className="h-28" />
-      <Select label="Rollout">
-        <option>10% staged</option>
-        <option>Everyone</option>
-      </Select>
-    </div>
-  </Modal>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Modals"
-      description="Accessible modal shell with open state, title, description, size, close button, and footer props."
-      code={code}
-      filename="ModalExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "open", type: "boolean", defaultValue: "false", description: "Controls modal visibility." },
-            { name: "onClose", type: "() => void", description: "Called by overlay and close button." },
-            { 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." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel space-y-4">
-        <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
-
-        <div className="flex flex-wrap gap-3">
-          <Button variant="secondary" onClick={() => setOpenModal("info")}>
-            Info
-          </Button>
-          <Button variant="success" onClick={() => setOpenModal("success")}>
-            Success
-          </Button>
-          <Button variant="danger" onClick={() => setOpenModal("error")}>
-            Error
-          </Button>
-          <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />} onClick={() => setOpenModal("form")}>
-            Form modal
-          </Button>
-        </div>
-
-        <Modal
-          open={openModal === "info"}
-          onClose={close}
-          title="Configure capture"
-          description="Lightweight overlay + white sheet — Lemon modals skew toward tight copy and decisive buttons."
-          footer={<Button variant="secondary" onClick={close}>Close</Button>}
-        />
-
-        <Modal
-          open={openModal === "success"}
-          onClose={close}
-          showCloseButton={false}
-          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-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
-              <IconCheck className="h-5 w-5" />
-            </div>
-            <div>
-              <h3 className="text-lg font-bold text-ph-success">Saved</h3>
-              <p className="mt-1 text-sm text-ph-subtle">Your dashboard layout synced to the team.</p>
-            </div>
-          </div>
-        </Modal>
-
-        <Modal
-          open={openModal === "error"}
-          onClose={close}
-          showCloseButton={false}
-          footer={
-            <>
-              <Button variant="ghost" onClick={close}>Cancel</Button>
-              <Button variant="danger" onClick={close}>View logs</Button>
-            </>
-          }
-        >
-          <div className="flex items-start gap-3">
-            <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>
-              <h3 className="text-lg font-bold text-ph-danger">Query failed</h3>
-              <p className="mt-1 text-sm text-ph-subtle">ClickHouse returned a timeout — retry or narrow the date range.</p>
-            </div>
-          </div>
-        </Modal>
-
-        <Modal
-          open={openModal === "form"}
-          onClose={close}
-          size="lg"
-          title="Create feature flag"
-          footer={
-            <>
-              <Button variant="ghost" onClick={close}>Cancel</Button>
-              <Button variant="primary" onClick={close}>Create</Button>
-            </>
-          }
-        >
-          <div className="space-y-4">
-            <Input label="Key" placeholder="billing-ui-v3" />
-            <Textarea label="Description" placeholder="Expose the rewritten billing funnel" className="h-28" />
-            <Select label="Rollout">
-              <option>10% staged</option>
-              <option>Everyone</option>
-            </Select>
-          </div>
-        </Modal>
-      </div>
-    </ShowcaseWrapper>
-  );
-}