@olwiba/ui 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/components/ModeSwitchMinimal.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { LayoutGrid, Sparkles, Layers } from 'lucide-react';
+import { Button } from '@olwiba/cn';
+import { useOlwibaUI, type UIMode } from '../context/OlwibaUIContext';
+
+const MODES: UIMode[] = ['default', 'playful', 'smooth'];
+
+const MODE_ICONS: Record<UIMode, React.ReactNode> = {
+  default: <LayoutGrid className="size-4" />,
+  playful: <Sparkles className="size-4" />,
+  smooth: <Layers className="size-4" />,
+};
+
+const MODE_LABELS: Record<UIMode, string> = {
+  default: 'Default mode',
+  playful: 'Playful mode',
+  smooth: 'Smooth mode',
+};
+
+export function ModeSwitchMinimal() {
+  const { mode, setMode } = useOlwibaUI();
+
+  const cycle = () => {
+    const idx = MODES.indexOf(mode);
+    setMode(MODES[(idx + 1) % MODES.length]);
+  };
+
+  return (
+    <Button variant="ghost" size="icon" onClick={cycle} className="size-8" aria-label={MODE_LABELS[mode]}>
+      <span
+        key={mode}
+        className="inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 duration-200 motion-reduce:animate-none"
+      >
+        {MODE_ICONS[mode]}
+      </span>
+    </Button>
+  );
+}

package/src/context/OlwibaUIContext.tsx

@@ -8,11 +8,13 @@ export type UIMode = 'default' | 'playful' | 'smooth';
 interface OlwibaUIContextValue {
   isMobile: boolean;
   mode: UIMode;
+  setMode: (mode: UIMode) => void;
 }
 
 const OlwibaUIContext = React.createContext<OlwibaUIContextValue>({
   isMobile: false,
   mode: 'default',
+  setMode: () => {},
 });
 
 export interface OlwibaUIProviderProps {
@@ -33,14 +35,15 @@ export interface OlwibaUIProviderProps {
   mode?: UIMode;
 }
 
-export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode = 'default' }: OlwibaUIProviderProps) {
+export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = 'default' }: OlwibaUIProviderProps) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
+  const [mode, setMode] = React.useState<UIMode>(initialMode);
 
   const variant = mode !== 'default' ? (mode as UIVariant) : undefined;
 
   return (
-    <OlwibaUIContext.Provider value={{ isMobile, mode }}>
+    <OlwibaUIContext.Provider value={{ isMobile, mode, setMode }}>
       <UIVariantProvider mode={variant}>
         {children}
       </UIVariantProvider>

package/src/index.ts

@@ -101,6 +101,7 @@ 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 { ModeSwitchMinimal } from './components/ModeSwitchMinimal';
 export { ThemeColorUpdater } from './components/ThemeColorUpdater';
 export { VersionBanner } from './components/VersionBanner';
 export { DevBanner, type DevBannerProps } from './components/DevBanner';

package/src/marketing/Navbar.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { Menu, X } from 'lucide-react';
 import { Button, Separator, Sheet, SheetContent, SheetTrigger } from '@olwiba/cn';
 import type { AppShellRenderLink } from '../app/AppShell';
-import { ThemeSwitchMinimal } from '../components/ThemeSwitchMinimal';
 
 export interface NavbarProps {
   brand: { name: string; logo?: React.ReactNode; href?: string };
@@ -13,7 +12,8 @@ export interface NavbarProps {
     primary?: { label: string; href: string };
     secondary?: { label: string; href: string };
   };
-  showThemeToggle?: boolean;
+  /** Icon-button controls rendered right-of-nav, left-of-CTA. Pass e.g. ModeSwitchMinimal, ThemeSwitchMinimal. */
+  controls?: React.ReactNode[];
   renderLink?: AppShellRenderLink;
 }
 
@@ -25,11 +25,12 @@ export function Navbar({
   brand,
   navLinks,
   cta,
-  showThemeToggle = false,
+  controls,
   renderLink = defaultRenderLink,
 }: NavbarProps) {
   const [open, setOpen] = React.useState(false);
   const brandHref = brand.href ?? '/';
+  const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
 
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
@@ -49,8 +50,8 @@ export function Navbar({
           ),
         })}
 
-        {/* Desktop nav links — center column, truly centered */}
-        <div className="hidden items-center gap-1 md:flex">
+        {/* Desktop nav links — center column when right content exists, else shift right */}
+        <div className={`hidden items-center gap-1 md:flex ${!hasRightContent ? 'col-span-2 justify-end' : ''}`}>
           {navLinks.map((link) => (
             <span key={link.label}>
               {renderLink({
@@ -62,20 +63,27 @@ export function Navbar({
           ))}
         </div>
 
-        {/* Desktop CTAs — right column, right-aligned */}
-        <div className="hidden items-center justify-end gap-3 md:flex">
-          {cta?.secondary &&
-            renderLink({
-              href: cta.secondary.href,
-              children: <Button variant="ghost" size="sm">{cta.secondary.label}</Button>,
-            })}
-          {cta?.primary &&
-            renderLink({
-              href: cta.primary.href,
-              children: <Button size="sm">{cta.primary.label}</Button>,
-            })}
-          {showThemeToggle && <ThemeSwitchMinimal />}
-        </div>
+        {/* Desktop right — controls + CTA */}
+        {hasRightContent && (
+          <div className="hidden items-center justify-end gap-2 md:flex">
+            {controls?.map((control, i) => (
+              <React.Fragment key={i}>{control}</React.Fragment>
+            ))}
+            {(cta?.secondary || cta?.primary) && controls?.length ? (
+              <div className="mx-1 h-4 w-px bg-border" />
+            ) : null}
+            {cta?.secondary &&
+              renderLink({
+                href: cta.secondary.href,
+                children: <Button variant="ghost" size="sm">{cta.secondary.label}</Button>,
+              })}
+            {cta?.primary &&
+              renderLink({
+                href: cta.primary.href,
+                children: <Button size="sm">{cta.primary.label}</Button>,
+              })}
+          </div>
+        )}
 
         {/* Mobile drawer — right column on small screens */}
         <Sheet open={open} onOpenChange={setOpen}>
@@ -103,7 +111,9 @@ export function Navbar({
                 })}
               </span>
               <div className="flex items-center gap-1">
-                {showThemeToggle && <ThemeSwitchMinimal />}
+                {controls?.map((control, i) => (
+                  <React.Fragment key={i}>{control}</React.Fragment>
+                ))}
                 <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
                   <X className="size-4" />
                   <span className="sr-only">Close menu</span>