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

package/src/components/sections/ProductLayoutsShowcase.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { AuthLayout, AuthCard, SettingsLayout, ShowcaseWrapper, Button } from "@/components/ui";
-
-export default function ProductLayoutsShowcase() {
-  return (
-    <>
-      <ShowcaseWrapper
-        id="auth"
-        title="Auth Layout"
-        description="Split-panel authentication shell with brand aside and form column."
-        code={`import { AuthLayout, AuthCard } from "@xenide-io/the-old-ui-theme";
-
-<AuthLayout>
-  <AuthCard title="Sign in" description="Welcome back">
-    <input className="ph-input" placeholder="Email" />
-    <input className="ph-input" type="password" placeholder="Password" />
-    <Button variant="primary">Sign in</Button>
-  </AuthCard>
-</AuthLayout>`}
-      >
-        <div className="max-h-[32rem] overflow-hidden rounded-xl border border-ph-border">
-          <AuthLayout>
-            <AuthCard title="Sign in" description="Welcome back to your workspace.">
-              <div className="space-y-3">
-                <input className="ph-input" placeholder="Email" />
-                <input className="ph-input" type="password" placeholder="Password" />
-                <Button variant="primary" className="w-full">Sign in</Button>
-              </div>
-            </AuthCard>
-          </AuthLayout>
-        </div>
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="settings"
-        title="Settings Layout"
-        description="Sidebar navigation and content area for settings pages."
-        code={`import { SettingsLayout, SettingsNav } from "@xenide-io/the-old-ui-theme";
-
-<SettingsLayout
-  title="Settings"
-  navigation={<SettingsNav groups={groups} activeId="general" />}
->
-  <p>Settings content</p>
-</SettingsLayout>`}
-      >
-        <div className="max-h-[28rem] overflow-hidden rounded-xl border border-ph-border">
-          <SettingsLayout
-            title="Project Settings"
-            description="Manage your workspace preferences"
-            navigation={
-              <div className="ph-settings-nav space-y-5">
-                <div>
-                  <h3 className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">General</h3>
-                  <div className="space-y-0.5">
-                    <a className="ph-settings-nav__item ph-settings-nav__item--active">Overview</a>
-                    <a className="ph-settings-nav__item">Display</a>
-                    <a className="ph-settings-nav__item">Notifications</a>
-                  </div>
-                </div>
-                <div>
-                  <h3 className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">Team</h3>
-                  <div className="space-y-0.5">
-                    <a className="ph-settings-nav__item">Members</a>
-                    <a className="ph-settings-nav__item">Roles</a>
-                  </div>
-                </div>
-              </div>
-            }
-          >
-            <p className="text-sm text-ph-subtle">General settings content goes here.</p>
-          </SettingsLayout>
-        </div>
-      </ShowcaseWrapper>
-    </>
-  );
-}

package/src/components/sections/ProgressShowcase.tsx

@@ -1,82 +0,0 @@
-import {
-  ComponentDocs,
-  Loader,
-  LoadingState,
-  Progress,
-  ShowcaseWrapper,
-  Skeleton,
-} from "@/components/ui";
-
-export default function ProgressShowcase() {
-  const code = `import { Loader, LoadingState, Progress, Skeleton } from "@xenide-io/the-old-ui-theme";
-
-<Progress label="Ingest backlog" value={72} showPercentage />
-<Loader variant="spinner" label="Refreshing insight" />
-<Loader variant="dots" label="Loading events" />
-<Loader variant="pulse" label="Connecting" />
-<LoadingState title="Loading dashboard" description="Restoring the latest results." />
-<div role="status" aria-label="Loading account">
-  <Skeleton shape="title" />
-  <Skeleton shape="text" />
-  <Skeleton shape="short-text" />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Progress & loading"
-      description="Determinate progress, compact action loaders, full-region loading states, and structure-matching cold-load skeletons."
-      code={code}
-      filename="LoadingExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "Loader.variant", type: "spinner | dots | pulse", defaultValue: "spinner", description: "Indeterminate treatment for compact asynchronous work." },
-            { name: "Loader.size", type: "sm | md | lg", defaultValue: "md", description: "Visual loader size." },
-            { name: "LoadingState", type: "LoadingStateProps", description: "Centered region state with one accessible status message." },
-            { name: "Skeleton.shape", type: "title | text | short-text | avatar | button | block", defaultValue: "text", description: "Decorative skeleton matching expected content geometry." },
-            { name: "Progress.value", type: "number", description: "Real determinate progress value." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-6">
-        <div className="ph-panel space-y-6">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Determinate progress</h3>
-          <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
-          <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
-          <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
-        </div>
-
-        <div className="grid gap-4 md:grid-cols-3">
-          {(["spinner", "dots", "pulse"] as const).map((variant) => (
-            <div key={variant} className="ph-panel flex min-h-28 flex-col items-center justify-center gap-3">
-              <Loader variant={variant} size="lg" label={`${variant} loader`} />
-              <code className="ph-kbd">{variant}</code>
-            </div>
-          ))}
-        </div>
-
-        <div className="grid gap-4 lg:grid-cols-2">
-          <div className="ph-panel p-0">
-            <LoadingState
-              label="Loading dashboard"
-              title="Loading dashboard"
-              description="Restoring the latest results without pretending progress is measurable."
-            />
-          </div>
-          <div className="ph-panel" role="status" aria-label="Loading account summary">
-            <div className="mb-5 flex items-center gap-3">
-              <Skeleton shape="avatar" />
-              <div className="min-w-0 flex-1">
-                <Skeleton shape="title" className="mb-2 w-1/2" />
-                <Skeleton shape="short-text" className="w-2/3" />
-              </div>
-            </div>
-            <Skeleton shape="block" className="mb-4" />
-            <div className="flex justify-end"><Skeleton shape="button" /></div>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/QuillChartShowcase.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import { ShowcaseWrapper } from "@/components/ui";
-import { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart, InsightShell } from "@/components/charts/quill";
-
-const lineCode = 'import { TimeSeriesLineChart } from "@xenide-io/the-old-ui-theme";\n\n<TimeSeriesLineChart\n  labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}\n  series={[\n    { key: "views", label: "Pageviews", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] },\n    { key: "signups", label: "Signups", data: [920, 990, 940, 1040, 1012, 540, 510] },\n  ]}\n/>';
-
-const barCode = 'import { BarChart } from "@xenide-io/the-old-ui-theme";\n\n<BarChart\n  labels={["A","B","C","D"]}\n  series={[\n    { key: "s1", label: "Series 1", data: [30, 45, 25, 60] },\n    { key: "s2", label: "Series 2", data: [20, 35, 40, 30] },\n  ]}\n/>';
-
-const pieCode = 'import { PieChart } from "@xenide-io/the-old-ui-theme";\n\n<PieChart\n  slices={[\n    { key: "a", label: "Direct", value: 40 },\n    { key: "b", label: "Organic", value: 30 },\n    { key: "c", label: "Referral", value: 20 },\n    { key: "d", label: "Social", value: 10 },\n  ]}\n/>';
-
-const metricCode = 'import { MetricCard, Sparkline } from "@xenide-io/the-old-ui-theme";\n\n<MetricCard\n  value="89.2k"\n  label="Page Views"\n  change={{ value: 12 }}\n  sparklineData={[65, 72, 68, 80, 95, 88, 92]}\n/>';
-
-export default function QuillChartShowcase() {
-  return (
-    <>
-      <ShowcaseWrapper
-        id="quill-timeline"
-        title="Quill TimeSeriesLineChart"
-        description="Canvas-based trend line chart with optional grid and crosshair."
-        code={lineCode}
-      >
-        <TimeSeriesLineChart
-          labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
-          series={[
-            { key: "views", label: "Pageviews", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] },
-            { key: "signups", label: "Signups", data: [920, 990, 940, 1040, 1012, 540, 510] },
-          ]}
-        />
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="quill-barchart"
-        title="Quill BarChart"
-        description="Vertical bar chart with multi-series support."
-        code={barCode}
-      >
-        <BarChart
-          labels={["A","B","C","D"]}
-          series={[
-            { key: "s1", label: "Series 1", data: [30, 45, 25, 60] },
-            { key: "s2", label: "Series 2", data: [20, 35, 40, 30] },
-          ]}
-        />
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="quill-piechart"
-        title="Quill PieChart"
-        description="Donut chart with slice labels and legend."
-        code={pieCode}
-      >
-        <PieChart
-          slices={[
-            { key: "a", label: "Direct", value: 40 },
-            { key: "b", label: "Organic", value: 30 },
-            { key: "c", label: "Referral", value: 20 },
-            { key: "d", label: "Social", value: 10 },
-          ]}
-        />
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="quill-metriccard"
-        title="Quill MetricCard and Sparkline"
-        description="Metric stat card with sparkline trend."
-        code={metricCode}
-      >
-        <div className="grid gap-4 sm:grid-cols-3">
-          <MetricCard
-            value="89.2k"
-            label="Page Views"
-            change={{ value: 12 }}
-            sparklineData={[65, 72, 68, 80, 95, 88, 92]}
-          />
-          <MetricCard
-            value="2,847"
-            label="Active Users"
-            change={{ value: 3 }}
-            sparklineData={[42, 48, 45, 52, 50, 48, 55]}
-          />
-          <MetricCard
-            value="23.1%"
-            label="Conversion Rate"
-            change={{ value: -1.2, positive: false }}
-            sparklineData={[24, 23, 23.5, 22.8, 23.2, 22.5, 23.1]}
-          />
-        </div>
-      </ShowcaseWrapper>
-    </>
-  );
-}

package/src/components/sections/QuillDashboardShowcase.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import { ShowcaseWrapper } from "@/components/ui";
-import { InsightShell, MetricCard } from "@/components/charts/quill";
-import { TimeSeriesLineChart, BarChart, PieChart, FunnelChart, Sparkline } from "@/components/charts/quill";
-
-export default function QuillDashboardShowcase() {
-  return (
-    <>
-      <ShowcaseWrapper
-        id="quill-dashboard"
-        title="Quill Dashboard Shells"
-        description="InsightShell panels for wrapping Quill charts."
-        code={`import { InsightShell } from "@xenide-io/the-old-ui-theme";
-import { TimeSeriesLineChart } from "@xenide-io/the-old-ui-theme";`}
-      >
-        <div className="grid gap-4 sm:grid-cols-2">
-          <InsightShell title="Weekly Active Users" subtitle="Last 14 days" ribbonColor="var(--ph-data-1)">
-            <TimeSeriesLineChart
-              labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
-              series={[{ key: "wau", label: "WAU", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] }]}
-              height={180}
-            />
-          </InsightShell>
-          <InsightShell title="Conversion Funnel" subtitle="Step-by-step dropoff" ribbonColor="var(--ph-data-2)">
-            <FunnelChart
-              steps={[
-                { label: "Page Visit", count: 12000 },
-                { label: "Sign Up", count: 5400 },
-                { label: "Onboarding", count: 3200 },
-                { label: "Active Use", count: 1800 },
-              ]}
-            />
-          </InsightShell>
-        </div>
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="quill-funnel"
-        title="Quill Funnel Chart"
-        description="Conversion funnel with dropoff percentages."
-        code={`import { FunnelChart } from "@xenide-io/the-old-ui-theme";
-
-<FunnelChart
-  steps={[
-    { label: "Visitors", count: 12000 },
-    { label: "Signups", count: 5400 },
-    { label: "Activated", count: 1800 },
-  ]}
-/>`}
-      >
-        <div className="max-w-md">
-          <FunnelChart
-            steps={[
-              { label: "Website Visits", count: 45000 },
-              { label: "Product Page", count: 28000 },
-              { label: "Added to Cart", count: 12000 },
-              { label: "Checkout Started", count: 6500 },
-              { label: "Purchase Complete", count: 4200 },
-            ]}
-          />
-        </div>
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="quill-metrics-grid"
-        title="Quill Metrics Grid"
-        description="Metric cards with sparklines for dashboard KPIs."
-        code={`import { MetricCard } from "@xenide-io/the-old-ui-theme";`}
-      >
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <MetricCard
-            value="$128.4k"
-            label="Revenue"
-            change={{ value: 12.5 }}
-            sparklineData={[80, 95, 88, 102, 110, 108, 128]}
-          />
-          <MetricCard
-            value="4,847"
-            label="Active Users"
-            change={{ value: 8.3 }}
-            sparklineData={[42, 48, 45, 52, 50, 48, 55]}
-          />
-          <MetricCard
-            value="32.1%"
-            label="Conversion"
-            change={{ value: -2.1, positive: false }}
-            sparklineData={[34, 33, 33.5, 32.8, 32.2, 31.5, 32.1]}
-          />
-          <MetricCard
-            value="2.4s"
-            label="Avg. Load Time"
-            change={{ value: -15, positive: true }}
-            sparklineData={[3.2, 2.8, 2.9, 2.6, 2.5, 2.4, 2.4]}
-          />
-        </div>
-      </ShowcaseWrapper>
-
-      <ShowcaseWrapper
-        id="quill-charts-overview"
-        title="Quill Charts Overview"
-        description="All Quill chart types in one place."
-        code={`import { BarChart, PieChart, Sparkline } from "@xenide-io/the-old-ui-theme";`}
-      >
-        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <InsightShell title="Bar Chart" subtitle="Multi-series bars">
-            <BarChart
-              labels={["A","B","C","D"]}
-              series={[
-                { key: "s1", label: "S1", data: [30, 45, 25, 60] },
-                { key: "s2", label: "S2", data: [20, 35, 40, 30] },
-              ]}
-              height={180}
-            />
-          </InsightShell>
-          <InsightShell title="Pie Chart" subtitle="Distribution">
-            <div className="flex justify-center">
-              <PieChart
-                slices={[
-                  { key: "a", label: "Direct", value: 40 },
-                  { key: "b", label: "Organic", value: 30 },
-                  { key: "c", label: "Referral", value: 20 },
-                  { key: "d", label: "Social", value: 10 },
-                ]}
-                size={180}
-              />
-            </div>
-          </InsightShell>
-          <InsightShell title="Sparklines" subtitle="Inline mini-trends">
-            <div className="space-y-4">
-              {[
-                { label: "Page Views", data: [65, 72, 68, 80, 95, 88, 92], color: "var(--ph-data-1)" },
-                { label: "Signups", data: [20, 25, 22, 30, 28, 35, 40], color: "var(--ph-data-2)" },
-                { label: "Revenue", data: [80, 95, 88, 102, 110, 108, 128], color: "var(--ph-data-3)" },
-              ].map((s) => (
-                <div key={s.label} className="flex items-center gap-3">
-                  <Sparkline data={s.data} color={s.color} width={80} height={24} />
-                  <div className="min-w-0">
-                    <p className="text-xs font-medium text-ph-ink">{s.label}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </InsightShell>
-        </div>
-      </ShowcaseWrapper>
-    </>
-  );
-}

package/src/components/sections/SegmentedControlShowcase.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ComponentDocs, SegmentedControl, ShowcaseWrapper } from "@/components/ui";
-import { IconGridView, IconListView } from "@/components/icons";
-
-export default function SegmentedControlShowcase() {
-  const [view, setView] = useState("grid");
-
-  const options = [
-    { value: "grid", label: "Grid", icon: <IconGridView className="h-4 w-4" /> },
-    { value: "list", label: "List", icon: <IconListView className="h-4 w-4" /> },
-  ];
-
-  const code = `import { SegmentedControl } from "the-old-ui";
-import { IconGridView, IconListView } from "the-old-ui";
-
-<div className="ph-panel">
-  <SegmentedControl options={options} value={view} onChange={setView} />
-  <div className="mt-4 rounded-lg bg-ph-muted p-4 text-sm text-ph-subtle">
-    Selected: <span className="font-semibold text-ph-ink">{view}</span>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Segmented Control"
-      description="Compact controlled switch for mutually exclusive display modes."
-      code={code}
-      filename="SegmentedControlExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "options", type: "{ value; label; icon? }[]", description: "Segments to render." },
-            { name: "value", type: "string", description: "Currently selected value." },
-            { name: "onChange", type: "(value: string) => void", description: "Called when a segment is selected." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <SegmentedControl options={options} value={view} onChange={setView} />
-        <div className="mt-4 rounded-lg bg-ph-muted p-4 text-sm text-ph-subtle">
-          Selected: <span className="font-semibold text-ph-ink">{view}</span>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}