@olwiba/ui 0.0.28

package/src/components/GlassCard.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface GlassCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  blur?: 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}
+
+const blurClass = {
+  sm: 'backdrop-blur-sm',
+  md: 'backdrop-blur-md',
+  lg: 'backdrop-blur-lg',
+};
+
+export function GlassCard({ blur = 'md', className, children, ...props }: GlassCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border border-white/20 bg-background/50 shadow-sm',
+        blurClass[blur],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/ImageCard.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface ImageCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+  alt?: string;
+  overlay?: 'none' | 'subtle' | 'strong';
+  aspectRatio?: 'video' | 'square' | 'portrait' | 'auto';
+  children?: React.ReactNode;
+}
+
+const overlayClass = {
+  none: '',
+  subtle: 'bg-gradient-to-t from-black/60 via-black/10 to-transparent',
+  strong: 'bg-gradient-to-t from-black/80 via-black/30 to-black/10',
+};
+
+const aspectClass = {
+  video: 'aspect-video',
+  square: 'aspect-square',
+  portrait: 'aspect-[3/4]',
+  auto: '',
+};
+
+export function ImageCard({
+  src,
+  alt = '',
+  overlay = 'subtle',
+  aspectRatio = 'video',
+  children,
+  className,
+  ...props
+}: ImageCardProps) {
+  return (
+    <div
+      className={cn(
+        'group relative overflow-hidden rounded-2xl bg-muted',
+        aspectClass[aspectRatio],
+        className,
+      )}
+      {...props}
+    >
+      <img
+        src={src}
+        alt={alt}
+        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+      {overlay !== 'none' && (
+        <div className={cn('absolute inset-0', overlayClass[overlay])} />
+      )}
+      {children && (
+        <div className="absolute inset-0 flex flex-col justify-end p-5 text-white">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/PageHeader.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../lib/utils';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface PageHeaderBreadcrumb {
+  label: string;
+  href?: string;
+}
+
+export interface PageHeaderBackButton {
+  label?: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+  breadcrumbs?: PageHeaderBreadcrumb[];
+  backButton?: PageHeaderBackButton;
+  renderLink?: AppShellRenderLink;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function PageHeader({
+  title,
+  description,
+  breadcrumbs,
+  backButton,
+  renderLink = defaultRenderLink,
+  className,
+  children,
+}: PageHeaderProps) {
+  return (
+    <div className={cn('flex flex-col gap-1 pb-6', className)}>
+      {breadcrumbs && breadcrumbs.length > 0 && (
+        <nav aria-label="Breadcrumb" className="mb-2 flex items-center gap-1 text-sm text-muted-foreground">
+          {breadcrumbs.map((crumb, i) => {
+            const isLast = i === breadcrumbs.length - 1;
+            return (
+              <React.Fragment key={i}>
+                {i > 0 && <ChevronRight className="size-3.5 shrink-0" />}
+                {isLast || !crumb.href ? (
+                  <span className={cn(isLast && 'text-foreground font-medium')}>{crumb.label}</span>
+                ) : (
+                  renderLink({
+                    href: crumb.href,
+                    children: crumb.label,
+                    className: 'hover:text-foreground transition-colors',
+                  })
+                )}
+              </React.Fragment>
+            );
+          })}
+        </nav>
+      )}
+
+      {backButton && (
+        <div className="mb-2">
+          {backButton.href ? (
+            renderLink({
+              href: backButton.href,
+              children: (
+                <>
+                  <ChevronLeft className="size-4" />
+                  <span>{backButton.label ?? 'Back'}</span>
+                </>
+              ),
+              className: 'inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors',
+            })
+          ) : (
+            <button
+              type="button"
+              onClick={backButton.onClick}
+              className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ChevronLeft className="size-4" />
+              <span>{backButton.label ?? 'Back'}</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-start justify-between gap-4">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {children && <div className="flex shrink-0 items-center gap-2">{children}</div>}
+      </div>
+      {description && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+    </div>
+  );
+}

package/src/components/PricingCard.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import * as React from 'react';
+import { Check, Minus } from 'lucide-react';
+import { Badge, Button, cn, Separator } from '@olwiba/cn';
+
+export interface PricingFeature {
+  label: string;
+  included: boolean;
+}
+
+export interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  price: string;
+  period?: string;
+  description: string;
+  features: PricingFeature[];
+  cta: string;
+  highlighted?: boolean;
+  badge?: string;
+  onSelect?: () => void;
+}
+
+export function PricingCard({
+  name,
+  price,
+  period = '/mo',
+  description,
+  features,
+  cta,
+  highlighted = false,
+  badge,
+  onSelect,
+  className,
+  ...props
+}: PricingCardProps) {
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col rounded-2xl border p-6',
+        highlighted ? 'border-primary bg-primary/5 shadow-sm' : 'bg-card',
+        className,
+      )}
+      {...props}
+    >
+      {badge && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge>{badge}</Badge>
+        </div>
+      )}
+
+      <div className="space-y-1">
+        <div className="text-sm font-medium text-muted-foreground">{name}</div>
+        <div className="flex items-end gap-1">
+          <span className="text-4xl font-bold tracking-tight">{price}</span>
+          <span className="mb-1 text-sm text-muted-foreground">{period}</span>
+        </div>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+
+      <Button
+        variant={highlighted ? 'default' : 'outline'}
+        className="mt-6 w-full"
+        onClick={onSelect}
+      >
+        {cta}
+      </Button>
+
+      <Separator className="my-6" />
+
+      <ul className="space-y-3 text-sm">
+        {features.map((feat) => (
+          <li key={feat.label} className="flex items-center gap-2">
+            {feat.included ? (
+              <>
+                <Check className="size-4 shrink-0 text-primary" />
+                <span>{feat.label}</span>
+              </>
+            ) : (
+              <>
+                <Minus className="size-4 shrink-0 text-muted-foreground/40" />
+                <span className="text-muted-foreground/40">{feat.label}</span>
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/components/RegisterHotkeys.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+
+export interface Hotkey {
+  key: string;
+  ctrl?: boolean;
+  meta?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  handler: () => void;
+  description?: string;
+}
+
+interface RegisterHotkeysProps {
+  hotkeys: Hotkey[];
+}
+
+export function RegisterHotkeys({ hotkeys }: RegisterHotkeysProps) {
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      for (const hotkey of hotkeys) {
+        const matches =
+          event.key.toLowerCase() === hotkey.key.toLowerCase() &&
+          !!event.ctrlKey === !!hotkey.ctrl &&
+          !!event.metaKey === !!hotkey.meta &&
+          !!event.shiftKey === !!hotkey.shift &&
+          !!event.altKey === !!hotkey.alt;
+
+        if (matches) {
+          event.preventDefault();
+          hotkey.handler();
+          break;
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [hotkeys]);
+
+  return null;
+}

package/src/components/RootErrorFallback.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Button } from '@olwiba/cn';
+
+interface RootErrorFallbackProps {
+  error: Error;
+  resetErrorBoundary?: () => void;
+}
+
+export function RootErrorFallback({ error, resetErrorBoundary }: RootErrorFallbackProps) {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 p-8 text-center">
+      <div className="flex flex-col items-center gap-3">
+        <AlertTriangle className="size-12 text-destructive" />
+        <h2 className="text-xl font-semibold">Something went wrong</h2>
+        <p className="max-w-md text-sm text-muted-foreground">
+          {error.message || 'An unexpected error occurred.'}
+        </p>
+      </div>
+      {resetErrorBoundary && (
+        <Button onClick={resetErrorBoundary} variant="outline">
+          Try again
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,14 @@
+import { Spinner } from '@olwiba/cn';
+
+interface FullPageSpinnerProps {
+  message?: string;
+}
+
+export function FullPageSpinner({ message }: FullPageSpinnerProps) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4">
+      <Spinner className="size-8" />
+      {message && <p className="text-muted-foreground text-sm">{message}</p>}
+    </div>
+  );
+}

package/src/components/Spotlight.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+import { Search } from 'lucide-react';
+import {
+  Badge,
+  Button,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  cn,
+} from '@olwiba/cn';
+
+export interface SpotlightItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  onSelect: () => void;
+}
+
+export interface SpotlightGroup {
+  heading: string;
+  items: SpotlightItem[];
+}
+
+export interface SpotlightProps {
+  groups: SpotlightGroup[];
+  placeholder?: string;
+  trigger?: React.ReactNode;
+  triggerClassName?: string;
+  shortcut?: string;
+}
+
+export function Spotlight({
+  groups,
+  placeholder = 'Search anything...',
+  trigger,
+  triggerClassName,
+  shortcut = '⌘K',
+}: SpotlightProps) {
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((v) => !v);
+      }
+    };
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, []);
+
+  return (
+    <>
+      {trigger ? (
+        <div onClick={() => setOpen(true)}>{trigger}</div>
+      ) : (
+        <Button
+          variant="outline"
+          onClick={() => setOpen(true)}
+          className={cn('w-64 justify-between text-muted-foreground', triggerClassName)}
+        >
+          <span className="flex items-center gap-2">
+            <Search className="size-4" />
+            {placeholder}
+          </span>
+          <Badge variant="secondary" className="font-mono text-xs">{shortcut}</Badge>
+        </Button>
+      )}
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder={placeholder} />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {groups.map((group, i) => (
+            <React.Fragment key={group.heading}>
+              {i > 0 && <CommandSeparator />}
+              <CommandGroup heading={group.heading}>
+                {group.items.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    onSelect={() => { item.onSelect(); setOpen(false); }}
+                  >
+                    {item.icon && <span className="mr-2">{item.icon}</span>}
+                    <span>{item.label}</span>
+                    {item.description && (
+                      <span className="ml-2 text-xs text-muted-foreground">{item.description}</span>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </React.Fragment>
+          ))}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

package/src/components/StatCard.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  label: string;
+  delta?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  description?: string;
+}
+
+export function StatCard({ value, label, delta, trend = 'neutral', description, className, ...props }: StatCardProps) {
+  return (
+    <div
+      className={cn('rounded-2xl border bg-card p-5', className)}
+      {...props}
+    >
+      <div className="text-sm text-muted-foreground">{label}</div>
+      <div className="mt-2 flex items-end justify-between gap-3">
+        <div className="text-3xl font-bold tracking-tight">{value}</div>
+        {delta && (
+          <div
+            className={cn(
+              'flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
+              trend === 'up' && 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+              trend === 'down' && 'bg-red-500/10 text-red-600 dark:text-red-400',
+              trend === 'neutral' && 'bg-muted text-muted-foreground',
+            )}
+          >
+            {trend === 'up' && <TrendingUp className="size-3" />}
+            {trend === 'down' && <TrendingDown className="size-3" />}
+            {delta}
+          </div>
+        )}
+      </div>
+      {description && (
+        <p className="mt-1.5 text-xs text-muted-foreground">{description}</p>
+      )}
+    </div>
+  );
+}

package/src/components/Suspensed.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { Spinner } from '@olwiba/cn';
+
+interface SuspensedProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function Suspensed({ children, fallback }: SuspensedProps) {
+  return (
+    <React.Suspense fallback={fallback ?? <Spinner />}>
+      {children}
+    </React.Suspense>
+  );
+}

package/src/components/TestimonialCard.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import { Quote, Star } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage, cn } from '@olwiba/cn';
+
+export interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  quote: string;
+  name: string;
+  role: string;
+  company?: string;
+  avatar?: string;
+  initials?: string;
+  rating?: number;
+}
+
+export function TestimonialCard({
+  quote,
+  name,
+  role,
+  company,
+  avatar,
+  initials,
+  rating,
+  className,
+  ...props
+}: TestimonialCardProps) {
+  return (
+    <div
+      className={cn('flex flex-col gap-4 rounded-2xl border bg-card p-6', className)}
+      {...props}
+    >
+      <Quote className="size-4 text-muted-foreground/40" />
+      {rating != null && (
+        <div className="flex gap-0.5">
+          {Array.from({ length: 5 }, (_, i) => (
+            <Star
+              key={i}
+              className={cn(
+                'size-4',
+                i < rating
+                  ? 'fill-current text-amber-400'
+                  : 'text-muted-foreground/30',
+              )}
+            />
+          ))}
+        </div>
+      )}
+      <p className="flex-1 text-sm leading-relaxed">{quote}</p>
+      <div className="flex items-center gap-3">
+        <Avatar className="size-9 rounded-xl">
+          <AvatarImage src={avatar} alt={name} />
+          <AvatarFallback className="rounded-xl text-xs">{initials ?? name.slice(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        <div>
+          <div className="text-sm font-medium leading-tight">{name}</div>
+          <div className="text-xs text-muted-foreground">
+            {role}{company ? ` · ${company}` : ''}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ThemeColorUpdater.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as React from 'react';
+
+interface ThemeColorUpdaterProps {
+  colorTheme?: string;
+}
+
+/**
+ * Applies a data-theme attribute to the document root when a color theme is selected.
+ * Use CSS selectors like `[data-theme="blue"] { --primary: ... }` to apply theme colors.
+ */
+export function ThemeColorUpdater({ colorTheme }: ThemeColorUpdaterProps) {
+  React.useEffect(() => {
+    if (colorTheme) {
+      document.documentElement.setAttribute('data-theme', colorTheme);
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  }, [colorTheme]);
+
+  return null;
+}

package/src/components/ThemeSwitchMinimal.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@olwiba/cn';
+
+export function ThemeSwitchMinimal() {
+  const [theme, setThemeState] = React.useState<'light' | 'dark'>('dark');
+
+  React.useEffect(() => {
+    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null;
+    const resolved = stored ?? (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    setThemeState(resolved);
+  }, []);
+
+  const toggle = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setThemeState(next);
+    localStorage.setItem('theme', next);
+    document.documentElement.classList.toggle('dark', next === 'dark');
+  };
+
+  return (
+    <Button variant="ghost" size="icon" onClick={toggle} className="size-8" aria-label="Toggle theme">
+      {theme === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
+    </Button>
+  );
+}