@olwiba/ui 0.0.28

package/src/components/VersionBanner.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface VersionBannerProps {
+  version: string;
+  message?: string;
+  className?: string;
+  onDismiss?: () => void;
+}
+
+export function VersionBanner({ version, message, className, onDismiss }: VersionBannerProps) {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) return null;
+
+  return (
+    <div className={cn('flex items-center justify-between gap-4 bg-primary/10 px-4 py-2 text-sm', className)}>
+      <div className="flex items-center gap-2">
+        <span className="rounded bg-primary/20 px-1.5 py-0.5 font-mono text-xs font-semibold text-primary">
+          v{version}
+        </span>
+        {message && <span className="text-muted-foreground">{message}</span>}
+      </div>
+      {onDismiss && (
+        <button
+          onClick={() => { setDismissed(true); onDismiss(); }}
+          className="text-muted-foreground transition-colors hover:text-foreground"
+          aria-label="Dismiss"
+        >
+          <X className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/context/OlwibaUIContext.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useIsMobile, UIVariantProvider, type UIVariant } from '@olwiba/cn';
+
+export type UIMode = 'default' | 'playful' | 'smooth';
+
+interface OlwibaUIContextValue {
+  isMobile: boolean;
+  mode: UIMode;
+}
+
+const OlwibaUIContext = React.createContext<OlwibaUIContextValue>({
+  isMobile: false,
+  mode: 'default',
+});
+
+export interface OlwibaUIProviderProps {
+  children: React.ReactNode;
+  /**
+   * Override the mobile detection. If omitted, uses useIsMobile() from @olwiba/cn
+   * which detects based on a 768px viewport breakpoint.
+   */
+  isMobile?: boolean;
+  /**
+   * Global component mode. Primitives imported from @olwiba/ui will automatically
+   * apply this mode unless overridden at the component level.
+   *
+   * - `'default'`  — standard square shadcn/Radix appearance
+   * - `'playful'`  — slight rotation + offset drop shadow backdrop
+   * - `'smooth'`   — softer, larger border-radius across all components
+   */
+  mode?: UIMode;
+}
+
+export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode = 'default' }: OlwibaUIProviderProps) {
+  const detectedMobile = useIsMobile();
+  const isMobile = isMobileProp ?? detectedMobile;
+
+  const variant = mode !== 'default' ? (mode as UIVariant) : undefined;
+
+  return (
+    <OlwibaUIContext.Provider value={{ isMobile, mode }}>
+      <UIVariantProvider mode={variant}>
+        {children}
+      </UIVariantProvider>
+    </OlwibaUIContext.Provider>
+  );
+}
+
+export function useOlwibaUI() {
+  return React.useContext(OlwibaUIContext);
+}
+
+/** Returns just the current UI mode from context. */
+export function useUIMode(): UIMode {
+  return React.useContext(OlwibaUIContext).mode;
+}

package/src/hooks/use-confirm.ts

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+
+export interface ConfirmOptions {
+  title?: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export interface UseConfirmReturn {
+  confirm: (options?: ConfirmOptions) => Promise<boolean>;
+  isOpen: boolean;
+  options: ConfirmOptions;
+  handleConfirm: () => void;
+  handleCancel: () => void;
+}
+
+/**
+ * Headless confirmation hook. Returns state and handlers for building a confirm dialog.
+ *
+ * @example
+ * const { confirm, isOpen, options, handleConfirm, handleCancel } = useConfirm();
+ *
+ * // Trigger confirmation
+ * const ok = await confirm({ title: 'Delete item?', description: 'This cannot be undone.' });
+ *
+ * // Wire up your dialog
+ * <AlertDialog open={isOpen}>
+ *   <AlertDialogContent>
+ *     <AlertDialogTitle>{options.title}</AlertDialogTitle>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel onClick={handleCancel} />
+ *       <AlertDialogAction onClick={handleConfirm} />
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ */
+export function useConfirm(): UseConfirmReturn {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [options, setOptions] = React.useState<ConfirmOptions>({});
+  const resolveRef = React.useRef<((value: boolean) => void) | null>(null);
+
+  const confirm = React.useCallback((opts: ConfirmOptions = {}): Promise<boolean> => {
+    setOptions(opts);
+    setIsOpen(true);
+    return new Promise<boolean>((resolve) => {
+      resolveRef.current = resolve;
+    });
+  }, []);
+
+  const handleConfirm = React.useCallback(() => {
+    resolveRef.current?.(true);
+    setIsOpen(false);
+  }, []);
+
+  const handleCancel = React.useCallback(() => {
+    resolveRef.current?.(false);
+    setIsOpen(false);
+  }, []);
+
+  return { confirm, isOpen, options, handleConfirm, handleCancel };
+}

package/src/hooks/use-controlled-open.ts

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+
+export interface UseControlledOpenReturn {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+/**
+ * Simple open/close state hook for modals, drawers, dropdowns, and any toggleable UI.
+ *
+ * @example
+ * const { isOpen, open, close } = useControlledOpen();
+ * return (
+ *   <>
+ *     <Button onClick={open}>Open</Button>
+ *     <Dialog open={isOpen} onOpenChange={setIsOpen}>...</Dialog>
+ *   </>
+ * );
+ */
+export function useControlledOpen(defaultOpen = false): UseControlledOpenReturn {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  const open = React.useCallback(() => setIsOpen(true), []);
+  const close = React.useCallback(() => setIsOpen(false), []);
+  const toggle = React.useCallback(() => setIsOpen((prev) => !prev), []);
+
+  return { isOpen, open, close, toggle, setIsOpen };
+}

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+
+export function useCopyToClipboard(): [boolean, (text: string) => void] {
+  const [copied, setCopied] = React.useState(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const copy = React.useCallback((text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    });
+  }, []);
+
+  React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+  return [copied, copy];
+}

package/src/hooks/use-debounce.ts

@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = React.useState(value);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debounced;
+}

package/src/hooks/use-intersection-observer.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import * as React from 'react';
+
+export function useIntersectionObserver(
+  options?: IntersectionObserverInit,
+): [React.RefObject<Element | null>, boolean] {
+  const ref = React.useRef<Element | null>(null);
+  const [isIntersecting, setIsIntersecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, options);
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [ref, isIntersecting];
+}

package/src/hooks/use-local-storage.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
+  const [storedValue, setStoredValue] = React.useState<T>(() => {
+    if (typeof window === 'undefined') return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = React.useCallback(
+    (value: T) => {
+      try {
+        setStoredValue(value);
+        if (typeof window !== 'undefined') {
+          window.localStorage.setItem(key, JSON.stringify(value));
+        }
+      } catch {
+        // Silently ignore — private browsing may block localStorage writes
+      }
+    },
+    [key],
+  );
+
+  return [storedValue, setValue];
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = React.useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  });
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}

package/src/hooks/use-mounted.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export function useMounted() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+}

package/src/hooks/use-pagination.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+
+export interface UsePaginationReturn {
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  offset: number;
+  hasPrev: boolean;
+  hasNext: boolean;
+  goTo: (page: number) => void;
+  next: () => void;
+  prev: () => void;
+}
+
+export function usePagination(total: number, pageSize: number): UsePaginationReturn {
+  const [page, setPage] = React.useState(1);
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const offset = (page - 1) * pageSize;
+
+  const goTo = React.useCallback(
+    (p: number) => setPage(Math.min(Math.max(1, p), totalPages)),
+    [totalPages],
+  );
+
+  const next = React.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React.useCallback(() => goTo(page - 1), [page, goTo]);
+
+  return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
+}

package/src/hooks/use-scrolled-past.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * Returns true when the page has scrolled past a given Y threshold in pixels.
+ * Useful for showing/hiding sticky headers, back-to-top buttons, etc.
+ *
+ * @example
+ * const scrolledPast = useScrolledPast(100);
+ * return <header className={scrolledPast ? 'shadow-md' : ''}>...</header>;
+ */
+export function useScrolledPast(threshold: number): boolean {
+  const [scrolledPast, setScrolledPast] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setScrolledPast(window.scrollY > threshold);
+    };
+
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [threshold]);
+
+  return scrolledPast;
+}

package/src/index.ts

@@ -0,0 +1,113 @@
+// @olwiba/ui — App-level components, sections, and hooks built on @olwiba/cn
+
+export { cn } from './lib/utils';
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+export {
+  OlwibaUIProvider,
+  useOlwibaUI,
+  useUIMode,
+  type OlwibaUIProviderProps,
+  type UIMode,
+} from './context/OlwibaUIContext';
+
+// ─── Primitives — mode-aware re-exports of @olwiba/cn components ─────────────
+export * from './primitives';
+
+// ─── App — shells, auth, feedback ────────────────────────────────────────────
+export {
+  AppShell,
+  type AppShellProps,
+  type AppShellBrand,
+  type AppShellUser,
+  type AppShellAction,
+  type AppShellRenderLink,
+  type AppNavItem,
+} from './app/AppShell';
+
+export {
+  AuthSection,
+  type AuthSectionProps,
+  type AuthFormProps,
+} from './app/AuthSection';
+
+export {
+  EmptyState,
+  type EmptyStateProps,
+} from './app/EmptyState';
+
+export {
+  ErrorPage,
+  type ErrorPageProps,
+} from './app/ErrorPage';
+
+export {
+  UpgradePrompt,
+  type UpgradePromptProps,
+  type UpgradeComparisonRow,
+} from './app/UpgradePrompt';
+
+// ─── Marketing — page sections ────────────────────────────────────────────────
+export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
+export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
+export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
+export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';
+export { PricingSection, type PricingSectionProps, type PricingPlan } from './marketing/PricingSection';
+export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/TestimonialsSection';
+export { TeamSection } from './marketing/TeamSection';
+export { FaqSection, type FaqSectionProps } from './marketing/FaqSection';
+export { StatsSection, type StatsSectionProps } from './marketing/StatsSection';
+export { NewsletterSection } from './marketing/NewsletterSection';
+export { ContactSection } from './marketing/ContactSection';
+
+// ─── Marketing — elements ─────────────────────────────────────────────────────
+export { Navbar, type NavbarProps } from './marketing/Navbar';
+export { Footer, type FooterProps } from './marketing/Footer';
+export { LogoStrip, type LogoStripProps } from './marketing/LogoStrip';
+
+// ─── Layering ─────────────────────────────────────────────────────────────────
+export { Underlay, type UnderlayProps, type UnderlayVariant } from './overlays/Underlay';
+export { Overlay, type OverlayProps, type OverlayVariant } from './overlays/Overlay';
+
+// ─── Motion ───────────────────────────────────────────────────────────────────
+export { FadeIn, type FadeInProps } from './motion/FadeIn';
+export { StaggerChildren, type StaggerChildrenProps } from './motion/StaggerChildren';
+export { CountUp, type CountUpProps } from './motion/CountUp';
+export { PageTransition, type PageTransitionProps } from './motion/PageTransition';
+
+// ─── Components — interactive ────────────────────────────────────────────────
+export { Spotlight, type SpotlightProps, type SpotlightGroup, type SpotlightItem } from './components/Spotlight';
+export { Dock, type DockProps, type DockItem } from './components/Dock';
+export { ContextMenu, type ContextMenuProps, type ContextMenuDef } from './components/ContextMenu';
+export { ConfirmDialog, type ConfirmDialogProps } from './components/ConfirmDialog';
+
+// ─── Components — cards ───────────────────────────────────────────────────────
+export { GlassCard, type GlassCardProps } from './components/GlassCard';
+export { FeatureCard, type FeatureCardProps } from './components/FeatureCard';
+export { StatCard, type StatCardProps } from './components/StatCard';
+export { TestimonialCard, type TestimonialCardProps } from './components/TestimonialCard';
+export { PricingCard, type PricingCardProps, type PricingFeature } from './components/PricingCard';
+export { ImageCard, type ImageCardProps } from './components/ImageCard';
+
+// ─── Components — utility ────────────────────────────────────────────────────
+export { FullPageSpinner } from './components/Spinner';
+export { PageHeader, type PageHeaderProps, type PageHeaderBreadcrumb, type PageHeaderBackButton } from './components/PageHeader';
+export { Suspensed } from './components/Suspensed';
+export { ThemeSwitchMinimal } from './components/ThemeSwitchMinimal';
+export { ThemeColorUpdater } from './components/ThemeColorUpdater';
+export { VersionBanner } from './components/VersionBanner';
+export { DevBanner, type DevBannerProps } from './components/DevBanner';
+export { RegisterHotkeys, type Hotkey } from './components/RegisterHotkeys';
+export { RootErrorFallback } from './components/RootErrorFallback';
+
+// ─── Hooks ────────────────────────────────────────────────────────────────────
+export { useMounted } from './hooks/use-mounted';
+export { useConfirm, type ConfirmOptions, type UseConfirmReturn } from './hooks/use-confirm';
+export { useControlledOpen, type UseControlledOpenReturn } from './hooks/use-controlled-open';
+export { useScrolledPast } from './hooks/use-scrolled-past';
+export { useCopyToClipboard } from './hooks/use-copy-to-clipboard';
+export { useDebounce } from './hooks/use-debounce';
+export { useIntersectionObserver } from './hooks/use-intersection-observer';
+export { useLocalStorage } from './hooks/use-local-storage';
+export { useMediaQuery } from './hooks/use-media-query';
+export { usePagination, type UsePaginationReturn } from './hooks/use-pagination';

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/marketing/ContactSection.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import * as React from 'react';
+import { Mail, MapPin, MessageSquare, Phone, Send } from 'lucide-react';
+import { Badge, Button, Input, Label, Separator, Textarea } from '@olwiba/cn';
+
+const contactInfo = [
+  { Icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
+  { Icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
+  { Icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
+];
+
+export function ContactSection() {
+  const [submitted, setSubmitted] = React.useState(false);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitted(true);
+  }
+
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <div className="grid lg:grid-cols-[1fr_1.4fr]">
+        {/* Left panel */}
+        <div className="relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" />
+          <div className="relative space-y-6">
+            <div>
+              <Badge variant="secondary" className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20">
+                Contact us
+              </Badge>
+              <h2 className="text-2xl font-semibold">Let's talk</h2>
+              <p className="mt-2 text-sm text-primary-foreground/70">
+                Have a question or want to work together? Fill in the form and we'll get back to you within one business day.
+              </p>
+            </div>
+
+            <Separator className="bg-primary-foreground/20" />
+
+            <div className="space-y-4">
+              {contactInfo.map(({ Icon, label, value }) => (
+                <div key={label} className="flex items-center gap-3">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10">
+                    <Icon className="size-4" />
+                  </div>
+                  <div>
+                    <div className="text-xs text-primary-foreground/60">{label}</div>
+                    <div className="text-sm font-medium">{value}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Form */}
+        <div className="p-8">
+          {submitted ? (
+            <div className="flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <MessageSquare className="size-6" />
+              </div>
+              <div>
+                <h3 className="font-semibold">Message sent</h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Thanks for reaching out. We'll get back to you within one business day.
+                </p>
+              </div>
+              <Button variant="outline" onClick={() => setSubmitted(false)}>Send another</Button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label htmlFor="contact-first">First name</Label>
+                  <Input id="contact-first" placeholder="Olivia" required />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="contact-last">Last name</Label>
+                  <Input id="contact-last" placeholder="Reed" required />
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="contact-email">Email</Label>
+                <Input id="contact-email" type="email" placeholder="olivia@company.com" required />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="contact-subject">Subject</Label>
+                <Input id="contact-subject" placeholder="How can we help?" required />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="contact-message">Message</Label>
+                <Textarea
+                  id="contact-message"
+                  placeholder="Tell us what you're working on..."
+                  className="min-h-28 resize-none"
+                  required
+                />
+              </div>
+              <Button type="submit" className="w-full">
+                Send message
+                <Send className="ml-2 size-4" />
+              </Button>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}