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

package/dist/ui.mjs

@@ -0,0 +1,139 @@
+import {
+  Accordion,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumbs,
+  Button,
+  ButtonChrome,
+  Calendar,
+  Caption,
+  Card,
+  ChatBubble,
+  Checkbox,
+  CodeBlock,
+  CollapsibleSection,
+  CommandPalette,
+  ComponentDocs,
+  Display,
+  Drawer,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+  EmptyState,
+  FileUpload,
+  FilterChips,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  HoverCard,
+  IconBase,
+  IconByName,
+  Indicator,
+  Input,
+  Kbd,
+  Label,
+  Lead,
+  Modal,
+  Mono,
+  Overline,
+  P,
+  Pagination,
+  Panel,
+  Progress,
+  Radio,
+  Range,
+  Rating,
+  SearchGroup,
+  SearchInput,
+  SegmentedControl,
+  Select,
+  ShowcaseWrapper,
+  Small,
+  Stat,
+  Stepper,
+  Table,
+  Tabs,
+  Terminal,
+  Textarea,
+  ThemeDomSync,
+  ThemeManager,
+  ThemeSwitcher,
+  Timeline,
+  Toast,
+  ToastStack,
+  Toggle
+} from "./chunk-SHF57J7U.mjs";
+import "./chunk-FWCSY2DS.mjs";
+export {
+  Accordion,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumbs,
+  Button,
+  ButtonChrome,
+  Calendar,
+  Caption,
+  Card,
+  ChatBubble,
+  Checkbox,
+  CodeBlock,
+  CollapsibleSection,
+  CommandPalette,
+  ComponentDocs,
+  Display,
+  Drawer,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+  EmptyState,
+  FileUpload,
+  FilterChips,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  HoverCard,
+  IconBase as Icon,
+  IconByName,
+  Indicator,
+  Input,
+  Kbd,
+  Label,
+  Lead,
+  Modal,
+  Mono,
+  Overline,
+  P,
+  Pagination,
+  Panel,
+  Progress,
+  Radio,
+  Range,
+  Rating,
+  SearchGroup,
+  SearchInput,
+  SegmentedControl,
+  Select,
+  ShowcaseWrapper,
+  Small,
+  Stat,
+  Stepper,
+  Table,
+  Tabs,
+  Terminal,
+  Textarea,
+  ThemeDomSync,
+  ThemeManager,
+  ThemeSwitcher,
+  Timeline,
+  Toast,
+  ToastStack,
+  Toggle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",
@@ -22,7 +22,8 @@
     "node": ">=18.0.0"
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "src/lib/chart/register-chartjs.ts"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -36,6 +37,12 @@
     },
     "./styles.css": "./src/app/globals.css",
     "./themes.css": "./src/styles/themes.css",
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.mjs",
+      "require": "./dist/ui.js",
+      "default": "./dist/ui.mjs"
+    },
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.mjs",
@@ -46,13 +53,14 @@
   "files": [
     "dist",
     "src/app/globals.css",
+    "src/components",
     "src/styles",
     "tailwind-preset.ts"
   ],
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:lib": "tsup --entry.index src/index.ts --entry.tailwind-preset tailwind-preset.ts --format cjs,esm --dts --external react,react-dom,next --clean --tsconfig ./tsconfig.lib.json",
+    "build:lib": "tsup --entry.index src/index.ts --entry.ui src/components/ui/index.ts --entry.tailwind-preset tailwind-preset.ts --format cjs,esm --dts --external react,react-dom,next --clean --tsconfig ./tsconfig.lib.json",
     "start": "next start",
     "lint": "next lint",
     "test": "tsc --noEmit",

package/src/components/charts/index.ts

@@ -0,0 +1,8 @@
+export {
+  HogTrendLineChart,
+  InsightDoughnutChart,
+  InsightHorizontalBarChart,
+  InsightPolarAreaChart,
+  InsightStackedBarChart,
+  InsightVerticalBarChart,
+} from "@/components/charts/ph-insight-charts";

package/src/components/charts/ph-insight-charts.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import "@/lib/chart/register-chartjs";
+import { Bar, Doughnut, PolarArea } from "react-chartjs-2";
+
+import {
+  buildDoughnutDemo,
+  buildHorizontalBarDemo,
+  buildPolarAreaDemo,
+  buildStackedBarDemo,
+  buildVerticalBarDemo,
+} from "@/lib/chart/ph-chart-options";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { buildHogChartTheme } from "@/lib/hog-charts-lite/build-theme";
+import { CanvasTrendLineChart } from "@/lib/hog-charts-lite/CanvasTrendLineChart";
+
+const DEMO_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+function useClientMounted(): boolean {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return mounted;
+}
+
+interface ChartSkeletonProps {
+  className?: string;
+}
+
+function ChartSkeleton({ className = "h-[280px]" }: ChartSkeletonProps) {
+  return (
+    <div
+      className={`w-full animate-pulse rounded-lemon bg-ph-muted ${className}`}
+      aria-hidden
+    />
+  );
+}
+
+export function HogTrendLineChart() {
+  const mounted = useClientMounted();
+  const tokens = useChartTokens();
+  const theme = useMemo(() => buildHogChartTheme(tokens), [tokens]);
+
+  const series = useMemo(
+    () => [
+      {
+        key: "pageview",
+        label: "$pageview",
+        data: [4200, 5100, 4800, 6200, 5900, 3100, 2800],
+        color: tokens.series[0],
+        fill: { opacity: 0.35 },
+      },
+      {
+        key: "signup",
+        label: "signup_completed",
+        data: [920, 990, 940, 1040, 1012, 540, 510],
+        color: tokens.series[1],
+        stroke: { pattern: [5, 5] as number[] },
+      },
+    ],
+    [tokens.series],
+  );
+
+  if (!mounted) {
+    return <ChartSkeleton />;
+  }
+
+  return (
+    <div className="relative h-[280px] w-full min-h-[220px]">
+      <CanvasTrendLineChart
+        labels={DEMO_LABELS}
+        series={series}
+        theme={theme}
+        showGrid
+        showCrosshair
+        className="h-full min-h-[220px]"
+      />
+    </div>
+  );
+}
+
+export function InsightVerticalBarChart() {
+  const mounted = useClientMounted();
+  const tokens = useChartTokens();
+  const config = useMemo(() => buildVerticalBarDemo(tokens), [tokens]);
+
+  if (!mounted) {
+    return <ChartSkeleton />;
+  }
+
+  return (
+    <div className="relative h-[280px] w-full min-h-[220px]">
+      <Bar data={config.data} options={config.options} redraw={false} />
+    </div>
+  );
+}
+
+export function InsightHorizontalBarChart() {
+  const mounted = useClientMounted();
+  const tokens = useChartTokens();
+  const config = useMemo(() => buildHorizontalBarDemo(tokens), [tokens]);
+
+  if (!mounted) {
+    return <ChartSkeleton className="h-[320px]" />;
+  }
+
+  return (
+    <div className="relative h-[320px] w-full min-h-[260px]">
+      <Bar data={config.data} options={config.options} redraw={false} />
+    </div>
+  );
+}
+
+export function InsightStackedBarChart() {
+  const mounted = useClientMounted();
+  const tokens = useChartTokens();
+  const config = useMemo(() => buildStackedBarDemo(tokens), [tokens]);
+
+  if (!mounted) {
+    return <ChartSkeleton className="h-[300px]" />;
+  }
+
+  return (
+    <div className="relative h-[300px] w-full min-h-[240px]">
+      <Bar data={config.data} options={config.options} redraw={false} />
+    </div>
+  );
+}
+
+export function InsightDoughnutChart() {
+  const mounted = useClientMounted();
+  const tokens = useChartTokens();
+  const config = useMemo(() => buildDoughnutDemo(tokens), [tokens]);
+
+  if (!mounted) {
+    return <ChartSkeleton className="h-[260px]" />;
+  }
+
+  return (
+    <div className="relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]">
+      <Doughnut data={config.data} options={config.options} redraw={false} />
+    </div>
+  );
+}
+
+export function InsightPolarAreaChart() {
+  const mounted = useClientMounted();
+  const tokens = useChartTokens();
+  const config = useMemo(() => buildPolarAreaDemo(tokens), [tokens]);
+
+  if (!mounted) {
+    return <ChartSkeleton className="h-[280px]" />;
+  }
+
+  return (
+    <div className="relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]">
+      <PolarArea data={config.data} options={config.options} redraw={false} />
+    </div>
+  );
+}

package/src/components/dashboard/DashboardFiltersBar.tsx

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+/**
+ * Raised strip reminiscent of dashboard date-range / cohort / breakdown controls.
+ * Pass pills or selects as children.
+ */
+export function DashboardFiltersBar({ className, ...props }: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-2 rounded-[var(--ph-radius-app)] border border-solid bg-ph-surface px-3 py-2 text-sm text-ph-subtle [border-color:var(--ph-border-control)]",
+        "[box-shadow:var(--ph-chrome-inset-face-top),var(--ph-chrome-inset-face-bottom),var(--ph-shadow-elevation-3000)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/dashboard/DashboardGrid.tsx

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DashboardGridProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Preset breakpoints: 1 col → md:2 cols → xl:3 (matches common insight grids).
+   * Override with your own `className` if you need 4-up or single column.
+   */
+  preset?: "insights" | "dense";
+}
+
+const presetClass: Record<NonNullable<DashboardGridProps["preset"]>, string> = {
+  insights: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
+  dense: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+};
+
+export function DashboardGrid({
+  preset = "insights",
+  className,
+  ...props
+}: DashboardGridProps) {
+  return <div className={cn(presetClass[preset], className)} {...props} />;
+}

package/src/components/dashboard/DashboardInsightPlaceholder.tsx

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DashboardInsightPlaceholderProps extends ComponentPropsWithoutRef<"button"> {
+  /** Accessible name when `children` does not include visible text. */
+  label?: string;
+}
+
+/**
+ * Mimics PostHog’s empty dashboard slot (“add insight”).
+ * Renders `<button>` so you can wire `onClick` → palette / modal.
+ *
+ * **`onClick` and other event props:** use this inside a Client Component (or a wrapper
+ * marked `'use client'`). Server Components cannot serialise function props.
+ */
+export function DashboardInsightPlaceholder({
+  label = "Add insight",
+  className,
+  children,
+  type = "button",
+  ...props
+}: DashboardInsightPlaceholderProps) {
+  return (
+    <button
+      type={type}
+      aria-label={label}
+      className={cn(
+        "ph-dashboard-placeholder group text-left outline-none transition",
+        "focus-visible:ring-2 focus-visible:ring-ph-brand focus-visible:ring-offset-2",
+        className,
+      )}
+      {...props}
+    >
+      {children != null ? children : <span className="font-medium text-ph-subtle group-hover:text-ph-ink">{label}</span>}
+    </button>
+  );
+}

package/src/components/dashboard/DashboardKpiCard.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DashboardKpiCardProps extends ComponentPropsWithoutRef<"article"> {
+  /** Upper label (tabular small caps styling via `.ph-stat-label`). */
+  label: ReactNode;
+  /** Main KPI value. */
+  value: ReactNode;
+  /** Supporting line beneath the value (Δ %, qualifier, etc.). */
+  footer?: ReactNode;
+  /** Optional decorative icon aligned with headline stats across the PostHog app. */
+  icon?: ReactNode;
+}
+
+export function DashboardKpiCard({ label, value, footer, icon, className, children, ...props }: DashboardKpiCardProps) {
+  return (
+    <article className={cn("ph-stat", className)} {...props}>
+      {icon != null ? <div className="mb-2 [&>svg]:h-7 [&>svg]:w-7">{icon}</div> : null}
+      <div className="ph-stat-label">{label}</div>
+      <div className="ph-stat-val">{value}</div>
+      {footer != null ? <p className="mt-1 text-xs text-ph-subtle">{footer}</p> : null}
+      {children}
+    </article>
+  );
+}

package/src/components/dashboard/DashboardToolbar.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DashboardToolbarProps {
+  /** Dashboard / tab title (matches PostHog H3 weight on canvases). */
+  title: string;
+  description?: string;
+  /** Right-aligned actions slot (buttons, dropdown triggers, etc.). */
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function DashboardToolbar({ title, description, actions, className }: DashboardToolbarProps) {
+  return (
+    <div className={cn("flex flex-wrap items-baseline justify-between gap-4", className)}>
+      <div className="min-w-0">
+        <h3 className="text-lg font-bold text-ph-ink">{title}</h3>
+        {description ? <p className="mt-0.5 text-sm text-ph-mutedtext">{description}</p> : null}
+      </div>
+      {actions != null ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+    </div>
+  );
+}

package/src/components/dashboard/DashboardWell.tsx

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DashboardWellProps extends ComponentPropsWithoutRef<"div"> {
+  /** Passed through to inner div; merges with `.ph-dashboard-well` */
+}
+
+export function DashboardWell({ className, ...props }: DashboardWellProps) {
+  return <div className={cn("ph-dashboard-well", className)} {...props} />;
+}

package/src/components/dashboard/InsightMiniCard.tsx

@@ -0,0 +1,26 @@
+import type { InsightShellProps } from "./InsightShell";
+import { InsightShell } from "./InsightShell";
+import { InsightShellHeader } from "./InsightShellHeader";
+import { MiniTrendBars } from "./MiniTrendBars";
+
+export interface InsightMiniCardProps extends Omit<InsightShellProps, "children"> {
+  title: string;
+  subtitle?: string;
+  heights: readonly number[];
+}
+
+/** Opinionated insight tile: coloured ribbon + headline + subtitle + mini Hog-style bar sparkline. */
+export function InsightMiniCard({
+  title,
+  subtitle,
+  heights,
+  ribbonColour,
+  ...shellProps
+}: InsightMiniCardProps) {
+  return (
+    <InsightShell ribbonColour={ribbonColour} {...shellProps}>
+      <InsightShellHeader title={title} subtitle={subtitle} />
+      <MiniTrendBars heights={heights} />
+    </InsightShell>
+  );
+}

package/src/components/dashboard/InsightShell.tsx

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { RibbonColour } from "./types";
+import { cn } from "@/lib/cn";
+
+export interface InsightShellProps extends ComponentPropsWithoutRef<"article"> {
+  /**
+   * Left ribbon fill; omit or pass empty string for a flat card (no ribbon column).
+   * Prefer `var(--ph-product-*)` or `var(--ph-data-*)` tokens from `globals.css`.
+   */
+  ribbonColour?: RibbonColour | null;
+  /** Extra classes on the padded body column (e.g. `gap-4`). */
+  bodyClassName?: string;
+}
+
+export function InsightShell({
+  ribbonColour,
+  bodyClassName,
+  className,
+  children,
+  ...props
+}: InsightShellProps) {
+  const ribbon =
+    ribbonColour != null && String(ribbonColour).trim() !== "" ? String(ribbonColour).trim() : null;
+
+  return (
+    <article className={cn("ph-insight-shell flex-row", className)} {...props}>
+      {ribbon != null ? (
+        <div
+          className="ph-insight-shell__ribbon min-h-[7rem] shrink-0 self-stretch"
+          style={{ background: ribbon }}
+          aria-hidden
+        />
+      ) : null}
+      <div className={cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName)}>{children}</div>
+    </article>
+  );
+}

package/src/components/dashboard/InsightShellHeader.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface InsightShellHeaderProps {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** Trailing widgets (menus, fullscreen, cohort badge). */
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function InsightShellHeader({ title, subtitle, actions, className }: InsightShellHeaderProps) {
+  return (
+    <header className={cn("flex gap-3", actions != null ? "items-start justify-between" : "", className)}>
+      <div className="min-w-0 flex-1">
+        <h4 className="font-semibold leading-snug text-ph-ink">{title}</h4>
+        {subtitle != null ? <p className="mt-0.5 text-xs text-ph-mutedtext">{subtitle}</p> : null}
+      </div>
+      {actions != null ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
+    </header>
+  );
+}

package/src/components/dashboard/MiniTrendBars.tsx

@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+import { cn } from "@/lib/cn";
+
+const DEFAULT_SERIES_CYCLE = [1, 2, 3, 4, 5, 6, 7] as const;
+
+export interface MiniTrendBarsProps {
+  /** Normalised heights 0–100 for each bar (% of chart row). */
+  heights: readonly number[];
+  /** Tailwind height of the bars row (flex align-end). Default matches gallery `h-28`. */
+  rowClassName?: string;
+  /**
+   * Map bar index → CSS `--ph-data-*` token index (1–7).
+   * Default cycles through PostHog’s default trend palette.
+   */
+  seriesResolver?: (index: number, height: number) => number;
+  className?: string;
+}
+
+function clampPct(n: number): number {
+  if (!Number.isFinite(n)) {
+    return 0;
+  }
+  return Math.max(0, Math.min(100, n));
+}
+
+export function MiniTrendBars({
+  heights,
+  rowClassName = "h-28",
+  seriesResolver,
+  className,
+}: MiniTrendBarsProps) {
+  const resolveSeries =
+    seriesResolver ??
+    ((i: number) => DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length] ?? 1);
+
+  return (
+    <div className={cn("flex items-end gap-0.5", rowClassName, className)}>
+      {heights.map((raw, i) => {
+        const pct = clampPct(raw);
+        const series = resolveSeries(i, pct);
+        const style = {
+          height: `${pct}%`,
+          background: `var(--ph-data-${String(series)})`,
+          minHeight: pct > 0 ? 4 : 0,
+        } satisfies CSSProperties;
+
+        return <div key={`bar-${String(i)}`} className="min-h-0 flex-1 rounded-t-[3px]" style={style} />;
+      })}
+    </div>
+  );
+}

package/src/components/dashboard/index.ts

@@ -0,0 +1,31 @@
+export { cn } from "@/lib/cn";
+export type { RibbonColour, Slot } from "./types";
+
+export { DashboardWell } from "./DashboardWell";
+export type { DashboardWellProps } from "./DashboardWell";
+
+export { DashboardToolbar } from "./DashboardToolbar";
+export type { DashboardToolbarProps } from "./DashboardToolbar";
+
+export { DashboardGrid } from "./DashboardGrid";
+export type { DashboardGridProps } from "./DashboardGrid";
+
+export { DashboardFiltersBar } from "./DashboardFiltersBar";
+
+export { DashboardKpiCard } from "./DashboardKpiCard";
+export type { DashboardKpiCardProps } from "./DashboardKpiCard";
+
+export { DashboardInsightPlaceholder } from "./DashboardInsightPlaceholder";
+export type { DashboardInsightPlaceholderProps } from "./DashboardInsightPlaceholder";
+
+export { InsightShell } from "./InsightShell";
+export type { InsightShellProps } from "./InsightShell";
+
+export { InsightShellHeader } from "./InsightShellHeader";
+export type { InsightShellHeaderProps } from "./InsightShellHeader";
+
+export { MiniTrendBars } from "./MiniTrendBars";
+export type { MiniTrendBarsProps } from "./MiniTrendBars";
+
+export { InsightMiniCard } from "./InsightMiniCard";
+export type { InsightMiniCardProps } from "./InsightMiniCard";

package/src/components/dashboard/types.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+/**
+ * Any CSS `<color>` usable in `background`, e.g. `var(--ph-product-session-replay)` or `#1d4aff`.
+ */
+export type RibbonColour = string;
+
+/** Children slot pattern used across dashboard primitives */
+export type Slot = ReactNode;