@olwiba/ui 0.2.25 → 0.2.27

package/site/demos/overlay.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { Overlay, type OverlayVariant } from '@olwiba/ui';
+import { DemoControls, useUsageCode } from '~/components/ComponentPreview';
+import { Button, Badge } from '@olwiba/cn';
+
+const variants: OverlayVariant[] = ['dim', 'scrim', 'loading'];
+
+function MockContent() {
+  return (
+    <div className="relative z-10 flex w-full flex-col gap-4 p-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-xs text-muted-foreground">Total revenue</p>
+          <p className="text-2xl font-semibold">$48,295</p>
+        </div>
+        <Badge variant="secondary">+12.4%</Badge>
+      </div>
+      <div className="flex gap-3">
+        {['Mon', 'Tue', 'Wed', 'Thu', 'Fri'].map((d, i) => (
+          <div key={d} className="flex flex-1 flex-col items-center gap-1">
+            <div
+              className="w-full rounded bg-primary/20"
+              style={{ height: `${[40, 65, 50, 80, 55][i]}px` }}
+            />
+            <span className="text-[10px] text-muted-foreground">{d}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function OverlayDemo() {
+  const [variant, setVariant] = React.useState<OverlayVariant>('loading');
+
+  useUsageCode(
+    `<div className="relative overflow-hidden rounded-xl">\n  {/* content */}\n  <Overlay variant="${variant}"${variant === 'loading' ? ' label="Loading..."' : ''} />\n</div>`,
+  );
+
+  return (
+    <>
+      <div className="relative w-full overflow-hidden bg-card">
+        <MockContent />
+        <Overlay
+          key={variant}
+          variant={variant}
+          {...(variant === 'loading' ? { label: 'Loading...' } : {})}
+        />
+      </div>
+
+      <DemoControls>
+        <div className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">Variant</span>
+          <div className="flex flex-wrap gap-1.5">
+            {variants.map((v) => (
+              <Button
+                key={v}
+                variant={variant === v ? 'default' : 'secondary'}
+                size="sm"
+                onClick={() => setVariant(v)}
+              >
+                {v}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </DemoControls>
+    </>
+  );
+}

package/site/demos/page-header.tsx

@@ -0,0 +1,15 @@
+import { PageHeader, Button } from '@olwiba/ui';
+
+export default function PageHeaderDemo() {
+  return (
+    <div className="w-full max-w-lg rounded-lg border border-dashed p-6">
+      <PageHeader
+        title="Dashboard"
+        description="Manage your projects and settings."
+      >
+        <Button size="sm">New Project</Button>
+      </PageHeader>
+      <div className="h-8 rounded bg-muted" />
+    </div>
+  );
+}

package/site/demos/page-transition.tsx

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import { PageTransition } from '@olwiba/ui';
+import { Button } from '@olwiba/cn';
+
+const variants = ['fade', 'slide-up', 'slide-down'] as const;
+type Variant = typeof variants[number];
+
+export default function Demo() {
+  const [key, setKey] = React.useState(0);
+  const [variant, setVariant] = React.useState<Variant>('slide-up');
+
+  function play(v: Variant) {
+    setVariant(v);
+    setKey((k) => k + 1);
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-6 p-8">
+      <div className="flex flex-wrap justify-center gap-2">
+        {variants.map((v) => (
+          <Button key={v} size="sm" variant={variant === v ? 'default' : 'outline'} onClick={() => play(v)}>
+            {v}
+          </Button>
+        ))}
+      </div>
+      <PageTransition key={key} variant={variant} duration={400} className="w-full max-w-xs rounded-2xl border bg-card p-6 text-center">
+        <p className="font-semibold">Animated content</p>
+        <p className="mt-1 text-sm text-muted-foreground">Using <strong>{variant}</strong></p>
+      </PageTransition>
+      <Button variant="ghost" size="sm" onClick={() => setKey((k) => k + 1)}>↺ Replay</Button>
+    </div>
+  );
+}

package/site/demos/post-list.tsx

@@ -0,0 +1,24 @@
+import { PostList } from '@olwiba/ui';
+
+const posts = [
+  {
+    title: 'A calmer path from idea to release',
+    description:
+      'How a small set of product conventions helps teams ship without redesigning every page.',
+    date: '2026-08-24',
+    slug: 'calmer-path-to-release',
+    tags: ['Product'],
+  },
+  {
+    title: 'Designing useful defaults',
+    description:
+      'Why good component defaults remove decisions while preserving deliberate escape hatches.',
+    date: '2026-08-12',
+    slug: 'designing-useful-defaults',
+    tags: ['Design systems'],
+  },
+];
+
+export default function Demo() {
+  return <PostList posts={posts} />;
+}

package/site/demos/pricing-card.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { PricingCard } from '@olwiba/ui';
+
+const free = [
+  { label: '3 projects', included: true },
+  { label: 'Basic analytics', included: true },
+  { label: 'Community support', included: true },
+  { label: 'Custom domains', included: false },
+  { label: 'Priority support', included: false },
+];
+
+const pro = [
+  { label: 'Unlimited projects', included: true },
+  { label: 'Advanced analytics', included: true },
+  { label: 'Priority support', included: true },
+  { label: 'Custom domains', included: true },
+  { label: 'SLA guarantee', included: true },
+];
+
+export default function Demo() {
+  return (
+    <div className="grid gap-4 p-6 sm:grid-cols-2">
+      <PricingCard name="Starter" price="Free" period="" description="For personal projects and exploration." features={free} cta="Get started" />
+      <PricingCard name="Pro" price="£15" description="For teams shipping production apps." features={pro} cta="Upgrade to Pro" highlighted badge="Most popular" onSelect={() => {}} />
+    </div>
+  );
+}

package/site/demos/pricing-section.tsx

@@ -0,0 +1,6 @@
+import { PricingSection } from '@olwiba/ui';
+import { demoPlans } from './marketing-demo-data';
+
+export default function Demo() {
+  return <PricingSection plans={demoPlans} />;
+}

package/site/demos/register-hotkeys.tsx

@@ -0,0 +1,39 @@
+import { RegisterHotkeys } from '@olwiba/ui';
+import type { Hotkey } from '@olwiba/ui';
+import * as React from 'react';
+
+export default function RegisterHotkeysDemo() {
+  const [lastKey, setLastKey] = React.useState<string | null>(null);
+
+  const hotkeys: Hotkey[] = [
+    { key: 'k', meta: true, handler: () => setLastKey('⌘K — Open search'), description: 'Open search' },
+    { key: 'Escape', handler: () => setLastKey('Esc — Close'), description: 'Close' },
+    { key: '?', shift: true, handler: () => setLastKey('Shift+? — Show help'), description: 'Show help' },
+  ];
+
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      <RegisterHotkeys hotkeys={hotkeys} />
+      <p className="text-sm text-muted-foreground">
+        Focus this area and try:
+      </p>
+      <div className="flex gap-2 flex-wrap justify-center">
+        {[
+          { label: '⌘K', desc: 'Search' },
+          { label: 'Esc', desc: 'Close' },
+          { label: 'Shift+?', desc: 'Help' },
+        ].map(({ label, desc }) => (
+          <div key={label} className="flex flex-col items-center gap-1">
+            <kbd className="rounded bg-muted px-2 py-1 font-mono text-xs">{label}</kbd>
+            <span className="text-xs text-muted-foreground">{desc}</span>
+          </div>
+        ))}
+      </div>
+      {lastKey && (
+        <div className="rounded-lg bg-muted px-4 py-2 text-sm font-mono">
+          {lastKey}
+        </div>
+      )}
+    </div>
+  );
+}

package/site/demos/root-error-fallback.tsx

@@ -0,0 +1,28 @@
+import { RootErrorFallback } from '@olwiba/ui';
+import * as React from 'react';
+
+export default function RootErrorFallbackDemo() {
+  const [triggered, setTriggered] = React.useState(false);
+
+  const error = new Error('Something went wrong while loading the page.');
+
+  return (
+    <div className="w-full max-w-lg rounded-lg border overflow-hidden">
+      {triggered ? (
+        <RootErrorFallback
+          error={error}
+          resetErrorBoundary={() => setTriggered(false)}
+        />
+      ) : (
+        <div className="flex items-center justify-center py-8">
+          <button
+            onClick={() => setTriggered(true)}
+            className="rounded-md bg-destructive px-4 py-2 text-sm text-destructive-foreground"
+          >
+            Simulate error
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/site/demos/settings-layout-block.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div className="p-8 text-muted-foreground text-sm">SettingsLayoutBlock — coming soon</div>;
+}

package/site/demos/settings-section.tsx

@@ -0,0 +1,22 @@
+'use client';
+import { SettingsSection } from '@olwiba/ui';
+import { Button, Input, Label } from '@olwiba/cn';
+
+export default function Demo() {
+  return (
+    <div className="mx-auto max-w-2xl divide-y divide-border p-8">
+      <SettingsSection title="Profile" description="This appears on your public Nexus profile.">
+        <form className="max-w-sm space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="settings-name">Full name</Label>
+            <Input id="settings-name" defaultValue="Kiwiana Ngata" />
+          </div>
+          <Button type="submit" size="sm">Save</Button>
+        </form>
+      </SettingsSection>
+      <SettingsSection title="Delete workspace" description="Once deleted, all projects and data are gone for good." danger>
+        <Button variant="destructive" size="sm">Delete workspace</Button>
+      </SettingsSection>
+    </div>
+  );
+}

package/site/demos/sign-in-page.tsx

@@ -0,0 +1,10 @@
+import { Navbar, AuthSection } from '@olwiba/ui';
+
+export default function SignInPageDemo() {
+  return (
+    <div className="w-full max-w-6xl space-y-4">
+      <Navbar />
+      <AuthSection layout="split" />
+    </div>
+  );
+}

package/site/demos/sortable.tsx

@@ -0,0 +1,30 @@
+'use client';
+import * as React from 'react';
+import { Sortable } from '@olwiba/ui';
+import { GripVertical } from 'lucide-react';
+
+const initialTasks = [
+  { id: 'design', title: 'Design the billing page', tag: 'Design' },
+  { id: 'api', title: 'Wire up usage metering API', tag: 'Backend' },
+  { id: 'emails', title: 'Dunning email sequence', tag: 'Growth' },
+  { id: 'qa', title: 'QA pass on checkout flow', tag: 'QA' },
+];
+
+export default function Demo() {
+  const [order, setOrder] = React.useState(initialTasks.map((t) => t.id));
+  const tasks = order.map((id) => initialTasks.find((t) => t.id === id)!);
+
+  return (
+    <div className="mx-auto max-w-md p-8">
+      <Sortable items={order} onReorder={setOrder}>
+        {tasks.map((task) => (
+          <div key={task.id} className="flex items-center gap-3 rounded-lg border bg-card px-3 py-2.5">
+            <GripVertical className="size-4 shrink-0 text-muted-foreground" />
+            <p className="flex-1 text-sm font-medium">{task.title}</p>
+            <span className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">{task.tag}</span>
+          </div>
+        ))}
+      </Sortable>
+    </div>
+  );
+}

package/site/demos/spotlight.tsx

@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import { Spotlight } from '@olwiba/ui';
+import { FileText, LayoutDashboard, Settings, Users } from 'lucide-react';
+
+const groups = [
+  {
+    heading: 'Pages',
+    items: [
+      { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className="size-4" />, onSelect: () => {} },
+      { id: 'team', label: 'Team', icon: <Users className="size-4" />, onSelect: () => {} },
+      { id: 'docs', label: 'Documents', icon: <FileText className="size-4" />, onSelect: () => {} },
+    ],
+  },
+  {
+    heading: 'Settings',
+    items: [
+      { id: 'settings', label: 'Settings', icon: <Settings className="size-4" />, description: 'Manage your account', onSelect: () => {} },
+    ],
+  },
+];
+
+export default function Demo() {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <Spotlight groups={groups} placeholder="Search pages..." />
+    </div>
+  );
+}

package/site/demos/stagger-children.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { StaggerChildren } from '@olwiba/ui';
+
+const items = ['Dashboard', 'Analytics', 'Projects', 'Team', 'Settings'];
+
+export default function Demo() {
+  return (
+    <StaggerChildren className="flex flex-col gap-2 p-6" stagger={80}>
+      {items.map((item) => (
+        <div key={item} className="rounded-xl border bg-card px-4 py-3 text-sm font-medium">
+          {item}
+        </div>
+      ))}
+    </StaggerChildren>
+  );
+}

package/site/demos/stat-card.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { StatCard } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="grid gap-4 p-6 sm:grid-cols-3">
+      <StatCard label="Monthly revenue" value="£24,200" delta="+12%" trend="up" description="vs last month" />
+      <StatCard label="Active users" value="3,841" delta="+4%" trend="up" description="past 30 days" />
+      <StatCard label="Churn rate" value="1.8%" delta="+0.3%" trend="down" description="rolling 90 days" />
+    </div>
+  );
+}

package/site/demos/stats-section.tsx

@@ -0,0 +1,6 @@
+import { StatsSection } from '@olwiba/ui';
+import { demoStats } from './marketing-demo-data';
+
+export default function Demo() {
+  return <StatsSection stats={demoStats} />;
+}

package/site/demos/steps-section.tsx

@@ -0,0 +1,66 @@
+import { StepsSection } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="space-y-6">
+      <StepsSection
+        variant="timeline"
+        badge="How it works"
+        title="Up and running in minutes"
+        description="Numbered timeline with a fading accent line, chainable step groups, and rich step content."
+        groups={[
+          {
+            steps: [
+              {
+                title: 'Create your account',
+                description: 'Sign up with your email to get started. Free while in beta.',
+              },
+              {
+                title: 'Connect your channel',
+                description: (
+                  <>
+                    Add the bot to a group chat or DM, then send{' '}
+                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-primary">!bot start</code>{' '}
+                    to activate.
+                  </>
+                ),
+              },
+              {
+                title: 'Add your first monitor',
+                description: 'Paste a search URL and the bot checks for new results every few minutes.',
+              },
+            ],
+            after: (
+              <div className="rounded-lg border border-primary/30 bg-muted/40 p-6">
+                <h3 className="mb-1 text-lg font-semibold text-primary">Ready to get started?</h3>
+                <p className="text-sm text-muted-foreground">Set up your first alert — free.</p>
+              </div>
+            ),
+          },
+          {
+            steps: [
+              {
+                title: 'Found what you needed?',
+                description: 'Cancel anytime — one command removes every monitor.',
+              },
+              {
+                title: 'Share it forward 💖',
+                description: 'Know someone searching? Send them an invite.',
+              },
+            ],
+          },
+        ]}
+      />
+
+      <StepsSection
+        badge="Default variant"
+        title="The original horizontal layout"
+        steps={[
+          { emoji: '✍️', title: 'Sign up', description: 'Create an account in seconds.' },
+          { emoji: '🔌', title: 'Connect', description: 'Link your tools and data.' },
+          { emoji: '🚀', title: 'Ship', description: 'Go live with confidence.' },
+        ]}
+      />
+    </div>
+  );
+}

package/site/demos/suspensed.tsx

@@ -0,0 +1,31 @@
+import { Suspensed } from '@olwiba/ui';
+import { Spinner } from '@olwiba/cn';
+import * as React from 'react';
+
+const DelayedContent = React.lazy(
+  () =>
+    new Promise<{ default: React.FC }>((resolve) => {
+      setTimeout(
+        () => resolve({ default: () => <p className="text-sm text-muted-foreground">Content loaded!</p> }),
+        1500
+      );
+    })
+);
+
+export default function SuspensedDemo() {
+  const [key, setKey] = React.useState(0);
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <Suspensed key={key} fallback={<Spinner size="sm" />}>
+        <DelayedContent />
+      </Suspensed>
+      <button
+        onClick={() => setKey((k) => k + 1)}
+        className="text-xs text-muted-foreground underline"
+      >
+        Replay
+      </button>
+    </div>
+  );
+}

package/site/demos/team-members-panel.tsx

@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { TeamMembersPanel, type TeamMemberRecord } from '@olwiba/ui';
+
+const initialMembers: TeamMemberRecord[] = [
+  { id: '1', name: 'Kiwiana Ngata', email: 'kiwiana@nexus.dev', role: 'Owner' },
+  { id: '2', name: 'Olwiba Rangi', email: 'olwiba@nexus.dev', role: 'Admin' },
+  { id: '3', name: 'Genesis Tane', email: 'genesis@nexus.dev', role: 'Member' },
+];
+
+export default function Demo() {
+  const [members, setMembers] = React.useState(initialMembers);
+
+  return (
+    <div className="mx-auto max-w-3xl p-8">
+      <TeamMembersPanel
+        members={members}
+        onInvite={(email, role) =>
+          setMembers((prev) => [...prev, { id: crypto.randomUUID(), name: email.split('@')[0], email, role }])
+        }
+        onRoleChange={(id, role) => setMembers((prev) => prev.map((m) => (m.id === id ? { ...m, role } : m)))}
+        onRemove={(id) => setMembers((prev) => prev.filter((m) => m.id !== id))}
+      />
+    </div>
+  );
+}

package/site/demos/team-section.tsx

@@ -0,0 +1,2 @@
+import { TeamSection } from '@olwiba/ui';
+export default function Demo() { return <TeamSection />; }

package/site/demos/testimonial-card.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { TestimonialCard } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <TestimonialCard
+        quote="The component library cut our design system setup time in half. Everything just fits together."
+        name="Sarah Chen"
+        role="Product Engineer"
+        company="Vercel"
+        initials="SC"
+        rating={5}
+      />
+    </div>
+  );
+}

package/site/demos/testimonials-section.tsx

@@ -0,0 +1,6 @@
+import { TestimonialsSection } from '@olwiba/ui';
+import { demoTestimonials } from './marketing-demo-data';
+
+export default function Demo() {
+  return <TestimonialsSection testimonials={demoTestimonials} />;
+}

package/site/demos/theme-color-updater.tsx

@@ -0,0 +1,32 @@
+import { ThemeColorUpdater } from '@olwiba/ui';
+import * as React from 'react';
+
+const themes = ['blue', 'green', 'red', 'orange', 'purple'];
+
+export default function ThemeColorUpdaterDemo() {
+  const [color, setColor] = React.useState('blue');
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <ThemeColorUpdater colorTheme={color} />
+      <div className="flex flex-wrap gap-2 justify-center">
+        {themes.map((c) => (
+          <button
+            key={c}
+            onClick={() => setColor(c)}
+            className={`rounded-md px-3 py-1.5 text-sm capitalize transition-colors ${
+              color === c
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground hover:bg-muted/80'
+            }`}
+          >
+            {c}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground font-mono">
+        document.documentElement[data-theme="{color}"]
+      </p>
+    </div>
+  );
+}

package/site/demos/theme-switch-minimal.tsx

@@ -0,0 +1,10 @@
+import { ThemeSwitchMinimal } from '@olwiba/ui';
+
+export default function ThemeSwitchMinimalDemo() {
+  return (
+    <div className="flex items-center gap-4">
+      <ThemeSwitchMinimal />
+      <span className="text-sm text-muted-foreground">Click to toggle dark / light mode</span>
+    </div>
+  );
+}