@olwiba/ui 0.0.28

package/src/app/ErrorPage.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { ArrowLeft, Compass } from 'lucide-react';
+import { Button } from '../primitives/Button';
+import type { AppShellRenderLink } from './AppShell';
+
+export interface ErrorPageProps {
+  statusCode?: string;
+  title?: string;
+  description?: string;
+  action?: { label: string; href: string };
+  backAction?: { label: string; href?: string; onClick?: () => void };
+  renderLink?: AppShellRenderLink;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function ErrorPage({
+  statusCode = '404',
+  title = 'Page not found',
+  description = "The page you're looking for doesn't exist or has been moved. Check the URL or head back home.",
+  action = { label: 'Take me home', href: '/' },
+  backAction = { label: 'Go back' },
+  renderLink = defaultRenderLink,
+}: ErrorPageProps) {
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <div className="relative flex min-h-[560px] flex-col items-center justify-center px-6 py-16 text-center">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,hsl(var(--muted)/0.8),transparent_70%)]" />
+        <div className="relative space-y-6">
+          <div className="flex justify-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl border bg-muted">
+              <Compass className="size-8 text-muted-foreground" />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="text-8xl font-bold tracking-tight text-muted-foreground/20">{statusCode}</div>
+            <h1 className="-mt-4 text-2xl font-semibold tracking-tight">{title}</h1>
+            <p className="mx-auto max-w-sm text-sm text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            {backAction && (
+              backAction.href ? (
+                renderLink({
+                  href: backAction.href,
+                  children: (
+                    <Button variant="outline">
+                      <ArrowLeft className="mr-2 size-4" />
+                      {backAction.label}
+                    </Button>
+                  ),
+                })
+              ) : (
+                <Button variant="outline" onClick={backAction.onClick}>
+                  <ArrowLeft className="mr-2 size-4" />
+                  {backAction.label}
+                </Button>
+              )
+            )}
+            {action && (
+              renderLink({
+                href: action.href,
+                children: <Button>{action.label}</Button>,
+              })
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/UpgradePrompt.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+} from '@olwiba/cn';
+
+export interface UpgradeComparisonRow {
+  key?: React.Key;
+  label: React.ReactNode;
+  currentValue: React.ReactNode;
+  upgradedValue: React.ReactNode;
+}
+
+export interface UpgradePromptProps {
+  /** Layout variant. `banner` is an inline strip; `comparison` is a full feature-table block. */
+  variant: 'banner' | 'comparison';
+  /** Primary heading shown in both variants. */
+  title: React.ReactNode;
+  /** Supporting copy shown below the title. */
+  description: React.ReactNode;
+  /** Label for the primary upgrade CTA. Include pricing here if relevant. */
+  primaryActionLabel: React.ReactNode;
+  /** Called when the primary upgrade CTA is clicked. */
+  onPrimaryAction: () => void;
+  /** Optional secondary action label, typically for "maybe later" or dismiss behavior. */
+  secondaryActionLabel?: React.ReactNode;
+  /** Called when the optional secondary action is clicked. */
+  onSecondaryAction?: () => void;
+  /** Small eyebrow label shown above the title in the comparison variant. */
+  eyebrow?: React.ReactNode;
+  /** Feature comparison rows for the comparison variant. */
+  rows?: UpgradeComparisonRow[];
+  /** Column header for the current plan. Defaults to "Current". */
+  currentPlanLabel?: React.ReactNode;
+  /** Column header for the upgraded plan. Defaults to "Upgrade". */
+  upgradedPlanLabel?: React.ReactNode;
+  /** Small body text shown below the comparison table, before the action buttons. */
+  footer?: React.ReactNode;
+  /** Optional close icon action for the comparison variant. */
+  onClose?: () => void;
+  /** Accessible label for the comparison close icon. Defaults to "Close". */
+  closeLabel?: string;
+  className?: string;
+}
+
+export function UpgradePrompt({
+  variant,
+  title,
+  description,
+  primaryActionLabel,
+  onPrimaryAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  eyebrow,
+  rows,
+  currentPlanLabel = 'Current',
+  upgradedPlanLabel = 'Upgrade',
+  footer,
+  onClose,
+  closeLabel = 'Close',
+  className,
+}: UpgradePromptProps) {
+  const hasSecondaryAction = Boolean(secondaryActionLabel && onSecondaryAction);
+
+  if (variant === 'banner') {
+    return (
+      <section
+        className={cn(
+          'rounded-xl border border-dashed bg-card/40 p-5 sm:p-6',
+          className,
+        )}
+      >
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h3 className="text-xl font-semibold">{title}</h3>
+            <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {hasSecondaryAction ? (
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={onSecondaryAction}
+                className="border"
+              >
+                {secondaryActionLabel}
+              </Button>
+            ) : null}
+            <Button type="button" onClick={onPrimaryAction}>
+              {primaryActionLabel}
+            </Button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      className={cn(
+        'w-full max-w-3xl rounded-2xl border bg-card p-6 shadow-sm sm:p-7',
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          {eyebrow ? (
+            <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-primary">
+              {eyebrow}
+            </div>
+          ) : null}
+          <h3
+            className={cn(
+              'text-2xl font-semibold sm:text-[1.75rem]',
+              eyebrow ? 'mt-3' : '',
+            )}
+          >
+            {title}
+          </h3>
+          <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
+            {description}
+          </p>
+        </div>
+
+        {onClose ? (
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border transition-colors hover:bg-muted"
+            aria-label={closeLabel}
+          >
+            <X className="size-4" />
+          </button>
+        ) : null}
+      </div>
+
+      {rows && rows.length > 0 ? (
+        <div className="mt-6 overflow-hidden rounded-xl border bg-muted/30">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead />
+                <TableHead className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
+                  {currentPlanLabel}
+                </TableHead>
+                <TableHead className="font-mono text-xs uppercase tracking-wider text-primary">
+                  {upgradedPlanLabel}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((row, index) => (
+                <TableRow key={row.key ?? index}>
+                  <TableCell className="font-medium">{row.label}</TableCell>
+                  <TableCell className="font-mono text-muted-foreground">
+                    {row.currentValue}
+                  </TableCell>
+                  <TableCell className="font-mono">{row.upgradedValue}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : null}
+
+      <div
+        className={cn(
+          'mt-6 flex flex-col gap-3 sm:flex-row sm:items-center',
+          footer || hasSecondaryAction ? 'sm:justify-between' : 'sm:justify-end',
+        )}
+      >
+        {footer ? <p className="text-sm text-muted-foreground">{footer}</p> : null}
+        <div className="flex flex-wrap gap-2">
+          {hasSecondaryAction ? (
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onSecondaryAction}
+              className="border"
+            >
+              {secondaryActionLabel}
+            </Button>
+          ) : null}
+          <Button type="button" onClick={onPrimaryAction}>
+            {primaryActionLabel}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/blog/PostCard.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+import { Badge, cn } from '@olwiba/cn';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface PostCardProps {
+  title: string;
+  description?: string;
+  date: string;
+  slug: string;
+  image?: string;
+  tags?: string[];
+  renderLink?: AppShellRenderLink;
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export function PostCard({ title, description, date, slug, image, tags, renderLink }: PostCardProps) {
+  const href = `/blog/${slug}`;
+
+  const LinkWrapper = ({ children, className }: { children: React.ReactNode; className?: string }) =>
+    renderLink ? renderLink({ href, children, className }) : <a href={href} className={className}>{children}</a>;
+
+  return (
+    <article className="group flex flex-col gap-3">
+      {image && (
+        <LinkWrapper className="block overflow-hidden rounded-xl">
+          <img
+            src={image}
+            alt={title}
+            className="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        </LinkWrapper>
+      )}
+      <div className="flex flex-col gap-2">
+        {tags && tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+        <h2 className="text-lg font-semibold leading-snug tracking-tight">
+          <LinkWrapper className="hover:text-primary transition-colors">
+            {title}
+          </LinkWrapper>
+        </h2>
+        {description && (
+          <p className="line-clamp-2 text-sm text-muted-foreground">{description}</p>
+        )}
+        <time dateTime={date} className="text-xs text-muted-foreground">
+          {formatDate(date)}
+        </time>
+      </div>
+    </article>
+  );
+}

package/src/blog/PostList.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { PostCard, type PostCardProps } from './PostCard';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface PostListProps {
+  posts: PostCardProps[];
+  renderLink?: AppShellRenderLink;
+  emptyMessage?: string;
+}
+
+export function PostList({ posts, renderLink, emptyMessage = 'No posts published yet.' }: PostListProps) {
+  if (posts.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground italic">{emptyMessage}</p>
+    );
+  }
+
+  return (
+    <div className="grid gap-8 sm:grid-cols-2">
+      {posts.map((post) => (
+        <PostCard key={post.slug} {...post} renderLink={renderLink} />
+      ))}
+    </div>
+  );
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@olwiba/cn';
+import type { UseConfirmReturn } from '../hooks/use-confirm';
+
+export interface ConfirmDialogProps extends Pick<UseConfirmReturn, 'isOpen' | 'options' | 'handleConfirm' | 'handleCancel'> {
+  destructive?: boolean;
+}
+
+export function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructive = false }: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={(open) => { if (!open) handleCancel(); }}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{options.title ?? 'Are you sure?'}</AlertDialogTitle>
+          {options.description && (
+            <AlertDialogDescription>{options.description}</AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={handleCancel}>
+            {options.cancelLabel ?? 'Cancel'}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className={destructive ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90' : undefined}
+          >
+            {options.confirmLabel ?? 'Confirm'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/ContextMenu.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  ContextMenu as RadixContextMenu,
+} from '@olwiba/cn';
+
+export interface ContextMenuAction {
+  type: 'item';
+  label: string;
+  shortcut?: string;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface ContextMenuSeparatorDef {
+  type: 'separator';
+}
+
+export interface ContextMenuLabelDef {
+  type: 'label';
+  label: string;
+}
+
+export interface ContextMenuSubDef {
+  type: 'sub';
+  label: string;
+  items: ContextMenuDef[];
+}
+
+export type ContextMenuDef = ContextMenuAction | ContextMenuSeparatorDef | ContextMenuLabelDef | ContextMenuSubDef;
+
+export interface ContextMenuProps {
+  items: ContextMenuDef[];
+  children: React.ReactNode;
+}
+
+function renderItems(items: ContextMenuDef[]) {
+  return items.map((item, i) => {
+    if (item.type === 'separator') return <ContextMenuSeparator key={i} />;
+    if (item.type === 'label') return <ContextMenuLabel key={i}>{item.label}</ContextMenuLabel>;
+    if (item.type === 'sub') {
+      return (
+        <ContextMenuSub key={i}>
+          <ContextMenuSubTrigger>{item.label}</ContextMenuSubTrigger>
+          <ContextMenuSubContent>{renderItems(item.items)}</ContextMenuSubContent>
+        </ContextMenuSub>
+      );
+    }
+    return (
+      <ContextMenuItem key={i} disabled={item.disabled} onSelect={item.onSelect}>
+        {item.label}
+        {item.shortcut && <ContextMenuShortcut>{item.shortcut}</ContextMenuShortcut>}
+      </ContextMenuItem>
+    );
+  });
+}
+
+export function ContextMenu({ items, children }: ContextMenuProps) {
+  return (
+    <RadixContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        {renderItems(items)}
+      </ContextMenuContent>
+    </RadixContextMenu>
+  );
+}
+
+export {
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+};

package/src/components/DevBanner.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { cn } from '../lib/utils';
+
+export interface DevBannerProps {
+  environment?: string;
+  className?: string;
+}
+
+export function DevBanner({ environment = 'development', className }: DevBannerProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-2 bg-amber-500/15 px-4 py-1 text-xs font-medium text-amber-700 dark:text-amber-400',
+        className,
+      )}
+    >
+      <span className="size-1.5 rounded-full bg-amber-500" />
+      <span>{environment}</span>
+    </div>
+  );
+}

package/src/components/Dock.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from '@olwiba/cn';
+
+export interface DockItem {
+  icon: LucideIcon;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface DockProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: DockItem[];
+  iconSize?: number;
+  magnification?: number;
+}
+
+const BASE = 40;
+const MAGNIFY_RADIUS = 80;
+
+export function Dock({ items, iconSize = BASE, magnification = 1.7, className, ...props }: DockProps) {
+  const [mouseX, setMouseX] = React.useState<number | null>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  function getScale(index: number): number {
+    if (mouseX === null || !containerRef.current) return 1;
+    const container = containerRef.current;
+    const buttons = container.querySelectorAll<HTMLElement>('[data-dock-item]');
+    const btn = buttons[index];
+    if (!btn) return 1;
+    const rect = btn.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const distance = Math.abs(mouseX - centerX);
+    if (distance > MAGNIFY_RADIUS) return 1;
+    const t = 1 - distance / MAGNIFY_RADIUS;
+    return 1 + (magnification - 1) * t;
+  }
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <div
+        ref={containerRef}
+        onMouseMove={(e) => setMouseX(e.clientX)}
+        onMouseLeave={() => setMouseX(null)}
+        className={cn(
+          'inline-flex items-end gap-2 rounded-2xl border bg-background/80 px-4 py-3 shadow-lg backdrop-blur-md',
+          className,
+        )}
+        {...props}
+      >
+        {items.map((item, i) => {
+          const scale = getScale(i);
+          const size = iconSize * scale;
+
+          const button = (
+            <Tooltip key={item.label}>
+              <TooltipTrigger asChild>
+                <button
+                  data-dock-item
+                  onClick={item.onClick}
+                  className="flex items-center justify-center rounded-xl bg-muted text-foreground transition-colors hover:bg-accent"
+                  style={{
+                    width: size,
+                    height: size,
+                    transition: 'width 100ms ease, height 100ms ease',
+                    transformOrigin: 'bottom center',
+                  }}
+                  aria-label={item.label}
+                >
+                  <item.icon style={{ width: size * 0.5, height: size * 0.5 }} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={8}>
+                <p>{item.label}</p>
+              </TooltipContent>
+            </Tooltip>
+          );
+
+          if (item.href) {
+            return (
+              <a key={item.label} href={item.href}>
+                {button}
+              </a>
+            );
+          }
+
+          return button;
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}

package/src/components/FeatureCard.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+
+export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  href?: string;
+}
+
+export function FeatureCard({ icon: Icon, title, description, href, className, ...props }: FeatureCardProps) {
+  const content = (
+    <div
+      className={cn(
+        'group relative flex flex-col gap-4 rounded-2xl border bg-card p-6 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+        href && 'cursor-pointer',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+        <Icon className="size-5" />
+      </div>
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="font-semibold leading-tight">{title}</h3>
+          {href && (
+            <ArrowRight className="size-4 shrink-0 text-muted-foreground opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" />
+          )}
+        </div>
+        <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+
+  if (href) {
+    return <a href={href} className="block">{content}</a>;
+  }
+
+  return content;
+}