@olwiba/ui 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -13,6 +13,7 @@ type UIMode = 'default' | 'playful' | 'smooth';
 interface OlwibaUIContextValue {
     isMobile: boolean;
     mode: UIMode;
+    setMode: (mode: UIMode) => void;
 }
 interface OlwibaUIProviderProps {
     children: React.ReactNode;
@@ -31,7 +32,7 @@ interface OlwibaUIProviderProps {
      */
     mode?: UIMode;
 }
-declare function OlwibaUIProvider({ children, isMobile: isMobileProp, mode }: OlwibaUIProviderProps): react_jsx_runtime.JSX.Element;
+declare function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode }: OlwibaUIProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOlwibaUI(): OlwibaUIContextValue;
 /** Returns just the current UI mode from context. */
 declare function useUIMode(): UIMode;
@@ -541,10 +542,11 @@ interface NavbarProps {
             href: string;
         };
     };
-    showThemeToggle?: boolean;
+    /** Icon-button controls rendered right-of-nav, left-of-CTA. Pass e.g. ModeSwitchMinimal, ThemeSwitchMinimal. */
+    controls?: React.ReactNode[];
     renderLink?: AppShellRenderLink;
 }
-declare function Navbar({ brand, navLinks, cta, showThemeToggle, renderLink, }: NavbarProps): react_jsx_runtime.JSX.Element;
+declare function Navbar({ brand, navLinks, cta, controls, renderLink, }: NavbarProps): react_jsx_runtime.JSX.Element;
 
 interface FooterProps {
     brand: {
@@ -884,6 +886,8 @@ declare function Suspensed({ children, fallback }: SuspensedProps): react_jsx_ru
 
 declare function ThemeSwitchMinimal(): react_jsx_runtime.JSX.Element;
 
+declare function ModeSwitchMinimal(): react_jsx_runtime.JSX.Element;
+
 interface ThemeColorUpdaterProps {
     colorTheme?: string;
 }
@@ -923,9 +927,9 @@ declare function RegisterHotkeys({ hotkeys }: RegisterHotkeysProps): null;
 
 interface RootErrorFallbackProps {
     error: Error;
-    resetErrorBoundary?: () => void;
+    reset: () => void;
 }
-declare function RootErrorFallback({ error, resetErrorBoundary }: RootErrorFallbackProps): react_jsx_runtime.JSX.Element;
+declare function RootErrorFallback({ error, reset }: RootErrorFallbackProps): react_jsx_runtime.JSX.Element;
 
 interface PostCardProps {
     title: string;
@@ -1020,4 +1024,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-export { AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, ChangelogCard, type ChangelogCardProps, ChangelogList, type ChangelogListProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, FeaturesSection, type FeaturesSectionProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, Suspensed, Switch, type SwitchProps, TeamSection, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, ChangelogCard, type ChangelogCardProps, ChangelogList, type ChangelogListProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, FeaturesSection, type FeaturesSectionProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, Suspensed, Switch, type SwitchProps, TeamSection, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };

package/dist/index.js

@@ -5,17 +5,20 @@ import { useState, useEffect } from 'react';
 import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Spinner, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@olwiba/cn';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Compass, ArrowLeft, X, ArrowRight, Sparkles, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, Phone, MapPin, MessageSquare, Send, Sun, Moon, Menu, Search, TrendingUp, TrendingDown, ChevronRight, ChevronLeft, AlertTriangle, Loader2, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+import { Compass, ArrowLeft, X, ArrowRight, Sparkles, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, Phone, MapPin, MessageSquare, Send, Menu, Search, TrendingUp, TrendingDown, ChevronRight, ChevronLeft, Sun, Moon, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
 
 var OlwibaUIContext = React25.createContext({
   isMobile: false,
-  mode: "default"
+  mode: "default",
+  setMode: () => {
+  }
 });
-function OlwibaUIProvider({ children, isMobile: isMobileProp, mode = "default" }) {
+function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
+  const [mode, setMode] = React25.useState(initialMode);
   const variant = mode !== "default" ? mode : void 0;
-  return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
+  return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode, setMode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
 }
 function useOlwibaUI() {
   return React25.useContext(OlwibaUIContext);
@@ -1569,38 +1572,17 @@ function ContactSection({
     ] }) })
   ] }) });
 }
-function ThemeSwitchMinimal() {
-  const [theme, setThemeState] = React25.useState("dark");
-  React25.useEffect(() => {
-    const stored = localStorage.getItem("theme");
-    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 /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 spin-in-90 duration-200 motion-reduce:animate-none",
-      children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
-    },
-    theme
-  ) });
-}
 var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({
   brand,
   navLinks,
   cta,
-  showThemeToggle = false,
+  controls,
   renderLink = defaultRenderLink7
 }) {
   const [open, setOpen] = React25.useState(false);
   const brandHref = brand.href ?? "/";
+  const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("nav", { className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center px-6", children: [
     renderLink({
       href: brandHref,
@@ -1609,12 +1591,14 @@ function Navbar({
         /* @__PURE__ */ jsx("span", { children: brand.name })
       ] })
     }),
-    /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-1 md:flex", children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { children: renderLink({
+    /* @__PURE__ */ jsx("div", { className: `hidden items-center gap-1 md:flex ${!hasRightContent ? "col-span-2 justify-end" : ""}`, children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { children: renderLink({
       href: link.href,
       className: "rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
       children: link.label
     }) }, link.label)) }),
-    /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-3 md:flex", children: [
+    hasRightContent && /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-2 md:flex", children: [
+      controls?.map((control, i) => /* @__PURE__ */ jsx(React25.Fragment, { children: control }, i)),
+      (cta?.secondary || cta?.primary) && controls?.length ? /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-border" }) : null,
       cta?.secondary && renderLink({
         href: cta.secondary.href,
         children: /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "sm", children: cta.secondary.label })
@@ -1622,8 +1606,7 @@ function Navbar({
       cta?.primary && renderLink({
         href: cta.primary.href,
         children: /* @__PURE__ */ jsx(Button$1, { size: "sm", children: cta.primary.label })
-      }),
-      showThemeToggle && /* @__PURE__ */ jsx(ThemeSwitchMinimal, {})
+      })
     ] }),
     /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "justify-self-end md:hidden", children: [
@@ -1640,7 +1623,7 @@ function Navbar({
             ] })
           }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            showThemeToggle && /* @__PURE__ */ jsx(ThemeSwitchMinimal, {}),
+            controls?.map((control, i) => /* @__PURE__ */ jsx(React25.Fragment, { children: control }, i)),
             /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", onClick: () => setOpen(false), children: [
               /* @__PURE__ */ jsx(X, { className: "size-4" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close menu" })
@@ -2255,6 +2238,54 @@ function PageHeader({
 function Suspensed({ children, fallback }) {
   return /* @__PURE__ */ jsx(React25.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
 }
+function ThemeSwitchMinimal() {
+  const [theme, setThemeState] = React25.useState("dark");
+  React25.useEffect(() => {
+    const stored = localStorage.getItem("theme");
+    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 /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 spin-in-90 duration-200 motion-reduce:animate-none",
+      children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
+    },
+    theme
+  ) });
+}
+var MODES = ["default", "playful", "smooth"];
+var MODE_ICONS = {
+  default: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }),
+  playful: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+  smooth: /* @__PURE__ */ jsx(Layers, { className: "size-4" })
+};
+var MODE_LABELS = {
+  default: "Default mode",
+  playful: "Playful mode",
+  smooth: "Smooth mode"
+};
+function ModeSwitchMinimal() {
+  const { mode, setMode } = useOlwibaUI();
+  const cycle = () => {
+    const idx = MODES.indexOf(mode);
+    setMode(MODES[(idx + 1) % MODES.length]);
+  };
+  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: cycle, className: "size-8", "aria-label": MODE_LABELS[mode], children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 duration-200 motion-reduce:animate-none",
+      children: MODE_ICONS[mode]
+    },
+    mode
+  ) });
+}
 function ThemeColorUpdater({ colorTheme }) {
   React25.useEffect(() => {
     if (colorTheme) {
@@ -2322,14 +2353,14 @@ function RegisterHotkeys({ hotkeys }) {
   }, [hotkeys]);
   return null;
 }
-function RootErrorFallback({ error, resetErrorBoundary }) {
+function RootErrorFallback({ error, reset }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col items-center justify-center gap-6 p-8 text-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
       /* @__PURE__ */ jsx(AlertTriangle, { className: "size-12 text-destructive" }),
       /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: "Something went wrong" }),
       /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: error.message || "An unexpected error occurred." })
     ] }),
-    resetErrorBoundary && /* @__PURE__ */ jsx(Button$1, { onClick: resetErrorBoundary, variant: "outline", children: "Try again" })
+    /* @__PURE__ */ jsx(Button$1, { onClick: reset, variant: "outline", children: "Try again" })
   ] });
 }
 function formatDate(dateStr) {
@@ -2552,6 +2583,6 @@ function usePagination(total, pageSize) {
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, Button, Card, ChangelogCard, ChangelogList, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, Grid, GridItem, HeroSection, ImageCard, Input, LogoStrip, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, Button, Card, ChangelogCard, ChangelogList, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, Grid, GridItem, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map