@olwiba/ui 0.2.25 → 0.2.26

package/site/demos/faq-section.tsx

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

package/site/demos/feature-card.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { FeatureCard } from '@olwiba/ui';
+import { BarChart2, Shield, Zap } from 'lucide-react';
+
+export default function Demo() {
+  return (
+    <div className="grid gap-4 p-6 sm:grid-cols-3">
+      <FeatureCard icon={Zap} title="Fast by default" description="Built on optimised primitives. Nothing ships that slows you down." />
+      <FeatureCard icon={Shield} title="Secure" description="Authentication and access control baked in from day one." />
+      <FeatureCard icon={BarChart2} title="Analytics" description="Understand usage with built-in telemetry and reporting tools." href="#" />
+    </div>
+  );
+}

package/site/demos/features-section.tsx

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

package/site/demos/file-upload.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { FileUpload } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="mx-auto max-w-md p-8">
+      <FileUpload
+        multiple
+        accept="image/png,image/jpeg"
+        maxSizeMb={5}
+        maxFiles={4}
+        hint="PNG or JPG, up to 5MB each"
+      />
+    </div>
+  );
+}

package/site/demos/footer.tsx

@@ -0,0 +1,42 @@
+import { Footer } from '@olwiba/ui';
+import { Zap } from 'lucide-react';
+
+const navLinks = [
+  { label: 'Features', href: '#' },
+  { label: 'Pricing', href: '#' },
+  { label: 'About', href: '#' },
+  { label: 'Blog', href: '#' },
+  { label: 'Privacy', href: '#' },
+  { label: 'Terms', href: '#' },
+];
+
+const socialLinks = [
+  {
+    label: 'GitHub',
+    href: '#',
+    icon: (
+      <svg viewBox="0 0 24 24" aria-hidden="true" className="size-5 fill-current">
+        <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  {
+    label: 'X',
+    href: '#',
+    icon: (
+      <svg viewBox="0 0 24 24" aria-hidden="true" className="size-5 fill-current">
+        <path d="M13.6823 10.6218L20.2391 3h-1.5961l-5.7041 6.6168L8.5419 3H3.4482l6.8893 10.0168L3.4482 21h1.5962l6.0213-6.9902L15.4581 21h5.0937L13.6823 10.6218zm-2.1315 2.4768l-.6978-.9985L5.5792 4.1579h2.3908l4.4832 6.4168.6978.9985 5.8267 8.3358h-2.3908l-4.7561-6.8122z" />
+      </svg>
+    ),
+  },
+];
+
+export default function Demo() {
+  return (
+    <Footer
+      brand={{ name: 'Nexus Inc', logo: <Zap className="size-4" /> }}
+      navLinks={navLinks}
+      socialLinks={socialLinks}
+    />
+  );
+}

package/site/demos/full-page-spinner.tsx

@@ -0,0 +1,9 @@
+import { FullPageSpinner } from '@olwiba/ui';
+
+export default function FullPageSpinnerDemo() {
+  return (
+    <div className="relative h-40 w-full max-w-sm rounded-lg border border-dashed overflow-hidden">
+      <FullPageSpinner message="Loading..." />
+    </div>
+  );
+}

package/site/demos/glass-card.tsx

@@ -0,0 +1,14 @@
+'use client';
+import { GlassCard } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="relative flex items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 via-blue-500 to-cyan-400 p-12">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/20 to-transparent" />
+      <GlassCard blur="md" className="max-w-xs p-6">
+        <h3 className="font-semibold">Glass card</h3>
+        <p className="mt-1 text-sm text-muted-foreground">Frosted glass effect with configurable blur and transparency.</p>
+      </GlassCard>
+    </div>
+  );
+}

package/site/demos/glow-effect.tsx

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

package/site/demos/gradient-background.tsx

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

package/site/demos/grid-pattern.tsx

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

package/site/demos/hero-section.tsx

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

package/site/demos/image-card.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { ImageCard } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="grid gap-4 p-6 sm:grid-cols-2">
+      <ImageCard src="https://picsum.photos/seed/mountain/640/360" alt="Mountain landscape" overlay="subtle">
+        <h3 className="font-semibold text-lg">Mountain escape</h3>
+        <p className="text-sm text-white/80">Swiss Alps</p>
+      </ImageCard>
+      <ImageCard src="https://picsum.photos/seed/city/640/360" alt="City skyline" overlay="strong">
+        <h3 className="font-semibold text-lg">City lights</h3>
+        <p className="text-sm text-white/80">New York</p>
+      </ImageCard>
+    </div>
+  );
+}

package/site/demos/login-block.tsx

@@ -0,0 +1,9 @@
+import { AuthSection } from '@olwiba/ui';
+
+export default function LoginBlockDemo() {
+  return (
+    <div className="w-full max-w-5xl">
+      <AuthSection layout="centered" />
+    </div>
+  );
+}

package/site/demos/marketing-cta-block.tsx

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

package/site/demos/marketing-demo-data.tsx

@@ -0,0 +1,114 @@
+import { Bell, Blocks, Rocket } from 'lucide-react';
+
+export const demoHero = {
+  badge: 'Launch kit',
+  heading: 'Ship polished product pages without rebuilding the same sections',
+  description:
+    'Composable marketing blocks, app shells, and interaction patterns built on the Olwiba design system.',
+  primaryCta: { label: 'Explore blocks', href: '#features' },
+  secondaryCta: { label: 'View docs', href: '/docs' },
+  media: 'image' as const,
+  heroImage: (
+    <div className="grid aspect-[4/3] place-items-center bg-gradient-to-br from-primary/20 via-background to-muted p-8">
+      <div className="rounded-3xl border bg-background/80 p-6 text-center shadow-xl backdrop-blur">
+        <Rocket className="mx-auto mb-3 size-10 text-primary" />
+        <p className="text-sm font-medium text-muted-foreground">Preview-ready UI blocks</p>
+      </div>
+    </div>
+  ),
+};
+
+export const demoFeatures = [
+  {
+    icon: Blocks,
+    title: 'Composable sections',
+    description: 'Hero, CTA, pricing, FAQ, and feature blocks that can be assembled quickly.',
+  },
+  {
+    icon: Bell,
+    title: 'Product patterns',
+    description: 'App-ready components for dashboards, notifications, and settings screens.',
+  },
+  {
+    icon: Rocket,
+    title: 'Launch focused',
+    description: 'Sensible defaults keep demos useful before a product adds custom copy.',
+  },
+];
+
+export const demoStats = [
+  { value: '40+', label: 'Blocks', description: 'Reusable sections, shells, and app patterns.' },
+  { value: '3', label: 'Layers', description: 'CN primitives, UI blocks, and Pro compositions.' },
+  { value: '100%', label: 'Composable', description: 'Bring your router, copy, and product logic.' },
+  { value: '0', label: 'Blank demos', description: 'Required props are supplied in the docs site.' },
+];
+
+export const demoTestimonials = [
+  {
+    quote: 'The defaults are polished enough to preview, but still flexible once product copy lands.',
+    name: 'Ollie',
+    role: 'Founder',
+    company: 'Olwiba',
+    initials: 'O',
+    rating: 5,
+  },
+  {
+    quote: 'A shared block system means the next product starts from a stronger baseline.',
+    name: 'Nexus',
+    role: 'Factory layer',
+    company: 'Olwiba',
+    initials: 'N',
+    rating: 5,
+  },
+];
+
+export const demoPlans = [
+  {
+    name: 'Starter',
+    monthly: 0,
+    annual: 0,
+    description: 'For trying the component surface in a small product.',
+    cta: 'Start free',
+    features: [
+      { label: 'Core marketing sections', included: true },
+      { label: 'App shell patterns', included: true },
+      { label: 'Premium compositions', included: false },
+    ],
+  },
+  {
+    name: 'Pro',
+    monthly: 29,
+    annual: 290,
+    description: 'For products that need richer launch and app surfaces.',
+    cta: 'Upgrade',
+    highlighted: true,
+    features: [
+      { label: 'Everything in Starter', included: true },
+      { label: 'Advanced app blocks', included: true },
+      { label: 'Private Pro components', included: true },
+    ],
+  },
+];
+
+export const demoCta = {
+  heading: 'Start with the blocks, then make them yours',
+  description: 'Use the defaults to prototype quickly, then pass product-specific copy and actions.',
+  primaryCta: { label: 'Browse components', href: '/docs' },
+  secondaryCta: { label: 'See features', href: '#features' },
+  footnote: 'Built on @olwiba/cn tokens and primitives.',
+};
+
+export const demoFaqItems = [
+  {
+    question: 'Can these blocks be used in a real app?',
+    answer: 'Yes. They are published package components, not one-off docs examples.',
+  },
+  {
+    question: 'Do I need to provide props?',
+    answer: 'Required content props keep production pages explicit while demos supply safe sample data.',
+  },
+  {
+    question: 'Can links use a router?',
+    answer: 'Yes. Components accept renderLink where routing needs to be framework-specific.',
+  },
+];

package/site/demos/marketing-faq-block.tsx

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

package/site/demos/marketing-features-block.tsx

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

package/site/demos/marketing-footer-block.tsx

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

package/site/demos/marketing-hero-block.tsx

@@ -0,0 +1,10 @@
+import { HeroSection } from '@olwiba/ui';
+import { demoHero } from './marketing-demo-data';
+
+export default function MarketingHeroBlockDemo() {
+  return (
+    <div className="w-full max-w-6xl">
+      <HeroSection {...demoHero} />
+    </div>
+  );
+}

package/site/demos/marketing-nav-block.tsx

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

package/site/demos/marketing-newsletter-block.tsx

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

package/site/demos/marketing-page.tsx

@@ -0,0 +1,52 @@
+import {
+  CtaSection,
+  FaqSection,
+  FeaturesSection,
+  Footer,
+  HeroSection,
+  Navbar,
+  PricingSection,
+  StatsSection,
+  TestimonialsSection,
+} from '@olwiba/ui';
+import { demoBrandLogo, demoBrandName } from './demo-brand';
+import {
+  demoCta,
+  demoFaqItems,
+  demoFeatures,
+  demoHero,
+  demoPlans,
+  demoStats,
+  demoTestimonials,
+} from './marketing-demo-data';
+
+export default function Demo() {
+  return (
+    <div className="w-full max-w-6xl space-y-4">
+      <Navbar
+        brand={{ name: demoBrandName, logo: demoBrandLogo, href: '/' }}
+        navLinks={[
+          { label: 'features', href: '#features' },
+          { label: 'pricing', href: '#pricing' },
+          { label: 'faq', href: '#faq' },
+        ]}
+      />
+      <HeroSection {...demoHero} />
+      <FeaturesSection features={demoFeatures} />
+      <StatsSection stats={demoStats} />
+      <TestimonialsSection testimonials={demoTestimonials} />
+      <PricingSection plans={demoPlans} />
+      <CtaSection {...demoCta} />
+      <FaqSection items={demoFaqItems} />
+      <Footer
+        brand={{ name: demoBrandName, logo: demoBrandLogo, href: '/' }}
+        navLinks={[
+          { label: 'features', href: '#features' },
+          { label: 'pricing', href: '#pricing' },
+          { label: 'docs', href: '/docs' },
+        ]}
+        status={{ label: 'All systems operational' }}
+      />
+    </div>
+  );
+}

package/site/demos/marketing-pricing-block.tsx

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

package/site/demos/marketing-stats-block.tsx

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

package/site/demos/marketing-team-block.tsx

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

package/site/demos/marketing-testimonials-block.tsx

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

package/site/demos/navbar.tsx

@@ -0,0 +1,32 @@
+import { Navbar } from '@olwiba/ui';
+import { demoBrandLogo, demoBrandName } from './demo-brand';
+
+/**
+ * Every prop is supplied deliberately. `brand` and `navLinks` are required, and
+ * this demo previously rendered `<Navbar />` bare — which threw on `brand.href`
+ * before the component painted anything, so the page showed no preview at all.
+ *
+ * The lockup comes from `~/lib/demo-brand`, shared with the AppShell demo, so
+ * the marketing header and the app sidebar are showing the same badge rather
+ * than two copies that can drift apart.
+ *
+ * Lowercase throughout on purpose — a lowercase name has no cap-height and no
+ * descenders, which is the least forgiving case for the vertical alignment
+ * between the name and the logo badge beside it.
+ */
+export default function Demo() {
+  return (
+    <Navbar
+      brand={{ name: demoBrandName, logo: demoBrandLogo, href: '/' }}
+      navLinks={[
+        { label: 'features', href: '#features' },
+        { label: 'pricing', href: '#pricing' },
+        { label: 'docs', href: '#docs' },
+      ]}
+      cta={{
+        secondary: { label: 'sign in', href: '#sign-in' },
+        primary: { label: 'get started', href: '#get-started' },
+      }}
+    />
+  );
+}

package/site/demos/newsletter-section.tsx

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

package/site/demos/noise-overlay.tsx

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

package/site/demos/not-found-block.tsx

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

package/site/demos/notice-email.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { EmailFrame } from './email-frame';
+
+export default function Demo() {
+  return <EmailFrame id="notice-email" />;
+}

package/site/demos/notifications-popover.tsx

@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+import { NotificationsPopover, type NotificationItem } from '@olwiba/ui';
+import { GitPullRequest, Rocket, UserPlus } from 'lucide-react';
+
+const initial: NotificationItem[] = [
+  { id: '1', title: 'Deploy complete', description: 'v0.1.16 is live on production.', timestamp: '2m ago', icon: <Rocket className="size-4" /> },
+  { id: '2', title: 'Ana Sousa requested a review', description: 'feat: billing usage alerts (#482)', timestamp: '1h ago', avatar: 'https://ui.shadcn.com/avatars/01.png' },
+  { id: '3', title: 'New team member', description: 'Marcus Webb accepted your invite.', timestamp: 'Yesterday', icon: <UserPlus className="size-4" />, read: true },
+  { id: '4', title: 'PR merged', description: 'fix: onboarding wizard pending state (#479)', timestamp: '2d ago', icon: <GitPullRequest className="size-4" />, read: true },
+];
+
+export default function Demo() {
+  const [notifications, setNotifications] = React.useState(initial);
+
+  return (
+    <div className="flex min-h-[420px] items-start justify-end p-8">
+      <NotificationsPopover
+        notifications={notifications}
+        onMarkAllRead={() => setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))}
+        onNotificationClick={(clicked) =>
+          setNotifications((prev) => prev.map((n) => (n.id === clicked.id ? { ...n, read: true } : n)))
+        }
+      />
+    </div>
+  );
+}

package/site/demos/notify.tsx

@@ -0,0 +1,44 @@
+'use client';
+import { notify } from '@olwiba/ui';
+import { Button, Toaster } from '@olwiba/cn';
+
+export default function Demo() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3 p-8">
+      <Button
+        variant="outline"
+        onClick={() => notify({ variant: 'success', title: 'Deploy complete', description: 'nexus-genesis is live on production.' })}
+      >
+        Success toast
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          notify({
+            variant: 'message',
+            title: 'New comment',
+            description: 'Left a note on your latest deploy.',
+            action: { label: 'Reply', onClick: () => {} },
+          })
+        }
+      >
+        Message toast
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          notify({
+            variant: 'info',
+            title: 'Build queued',
+            description: 'Your project will start building shortly.',
+            action: { label: 'Undo', onClick: () => {} },
+            secondaryAction: { label: 'Dismiss', onClick: () => {} },
+          })
+        }
+      >
+        Action toast
+      </Button>
+      <Toaster />
+    </div>
+  );
+}

package/site/demos/olwiba-ui-context.tsx

@@ -0,0 +1,51 @@
+import { OlwibaUIProvider, useOlwibaUI } from '@olwiba/ui';
+import * as React from 'react';
+
+function DeviceInfo() {
+  const { isMobile } = useOlwibaUI();
+
+  return (
+    <div className="flex flex-col items-center gap-2 text-center">
+      <div className="rounded-lg bg-muted px-4 py-2 font-mono text-sm">
+        isMobile = <span className="text-primary">{String(isMobile)}</span>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {isMobile ? 'Rendering mobile layout' : 'Rendering desktop layout'}
+      </p>
+    </div>
+  );
+}
+
+export default function OlwibaUIContextDemo() {
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <OlwibaUIProvider isMobile={isMobile}>
+        <DeviceInfo />
+      </OlwibaUIProvider>
+      <div className="flex gap-2">
+        <button
+          onClick={() => setIsMobile(false)}
+          className={`rounded-md px-3 py-1.5 text-sm transition-colors ${
+            !isMobile
+              ? 'bg-primary text-primary-foreground'
+              : 'bg-muted text-muted-foreground hover:bg-muted/80'
+          }`}
+        >
+          Desktop
+        </button>
+        <button
+          onClick={() => setIsMobile(true)}
+          className={`rounded-md px-3 py-1.5 text-sm transition-colors ${
+            isMobile
+              ? 'bg-primary text-primary-foreground'
+              : 'bg-muted text-muted-foreground hover:bg-muted/80'
+          }`}
+        >
+          Mobile
+        </button>
+      </div>
+    </div>
+  );
+}

package/site/demos/onboarding-block.tsx

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

package/site/demos/onboarding-wizard.tsx

@@ -0,0 +1,43 @@
+'use client';
+import * as React from 'react';
+import { OnboardingWizard } from '@olwiba/ui';
+import { Input } from '@olwiba/cn';
+
+export default function Demo() {
+  const [workspaceName, setWorkspaceName] = React.useState('');
+  const [done, setDone] = React.useState(false);
+
+  if (done) {
+    return <p className="p-8 text-center text-sm text-muted-foreground">Workspace <strong>{workspaceName || 'Untitled'}</strong> is ready.</p>;
+  }
+
+  return (
+    <div className="mx-auto max-w-md p-8">
+      <OnboardingWizard
+        onComplete={() => setDone(true)}
+        steps={[
+          {
+            id: 'welcome',
+            title: 'Welcome to Nexus',
+            description: 'Let’s get your workspace set up in a couple of steps.',
+            content: <p className="text-sm text-muted-foreground">This will only take a minute.</p>,
+          },
+          {
+            id: 'workspace',
+            title: 'Name your workspace',
+            content: (
+              <Input value={workspaceName} onChange={(e) => setWorkspaceName(e.target.value)} placeholder="Acme Inc." />
+            ),
+            onNext: () => (workspaceName.trim() ? true : 'Give your workspace a name to continue.'),
+          },
+          {
+            id: 'invite',
+            title: 'Invite your team',
+            description: 'Optional — you can always invite people later.',
+            content: <Input placeholder="teammate@company.com" />,
+          },
+        ]}
+      />
+    </div>
+  );
+}