@olwiba/ui 0.0.28

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@olwiba/ui",
+  "version": "0.0.28",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "description": "App shells, marketing sections, interactive components, and hooks built on @olwiba/cn",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "dev:link:ecosystem": "pwsh -NoProfile -Command '& { $ErrorActionPreference = \"Stop\"; function Invoke-Link([string]$RepoPath,[string[]]$CommandArgs){ Write-Host (\"[link-ecosystem] bun \" + ($CommandArgs -join \" \") + \" (\" + $RepoPath + \")\"); Push-Location $RepoPath; try { & bun @CommandArgs } finally { Pop-Location } }; Invoke-Link \"..\\\\olwibaCN\" @(\"link\"); Invoke-Link \"..\\\\olwibaDOCS\" @(\"link\"); Invoke-Link \".\" @(\"link\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\"); Invoke-Link \"..\\\\olwibaDOCS\" @(\"link\",\"@olwiba/cn\"); Invoke-Link \".\" @(\"link\",\"@olwiba/cn\"); Invoke-Link \".\" @(\"link\",\"@olwiba/docs\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/cn\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/docs\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/ui\"); Write-Host \"[link-ecosystem] Local Bun links are in place. CI and build servers will still use published package versions.\" }'",
+    "dev:link:ecosystem:check": "pwsh -NoProfile -Command '& { $ErrorActionPreference = \"Stop\"; function Show-Link([string]$RepoPath,[string[]]$CommandArgs){ Write-Host (\"[link-ecosystem] bun \" + ($CommandArgs -join \" \") + \" (\" + $RepoPath + \")\") }; Show-Link \"..\\\\olwibaCN\" @(\"link\"); Show-Link \"..\\\\olwibaDOCS\" @(\"link\"); Show-Link \".\" @(\"link\"); Show-Link \"..\\\\genesis-render\" @(\"link\"); Show-Link \"..\\\\olwibaDOCS\" @(\"link\",\"@olwiba/cn\"); Show-Link \".\" @(\"link\",\"@olwiba/cn\"); Show-Link \".\" @(\"link\",\"@olwiba/docs\"); Show-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/cn\"); Show-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/docs\"); Show-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/ui\"); Write-Host \"[link-ecosystem] Skipped directories without package.json: genesis, genesis-start, genesis-sync\"; Write-Host \"[link-ecosystem] Dry run complete. No links were changed.\" }'",
+    "web:build": "fumadocs-mdx && vite build",
+    "web:dev": "fumadocs-mdx && vite dev",
+    "start": "bun run server.ts",
+    "types:check": "fumadocs-mdx && tsc --noEmit",
+    "iso:generate": "bun scripts/generate-iso-previews.ts"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@olwiba/docs": "^0.1.25",
+    "@olwiba/dx": "^0.0.10",
+    "@tanstack/react-table": "^8.21.3",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "@olwiba/cn": ">=0.1.2",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@olwiba/cn": "^0.1.15",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-router": "1.154.8",
+    "@tanstack/react-router-devtools": "1.154.8",
+    "@tanstack/react-start": "1.154.8",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.6.0",
+    "fumadocs-core": "^16.4.7",
+    "fumadocs-mdx": "^14.2.6",
+    "fumadocs-ui": "^16.4.7",
+    "next-themes": "^0.4.6",
+    "puppeteer-core": "^24.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-resizable-panels": "^4.4.1",
+    "rehype-pretty-code": "^0.14.0",
+    "shiki": "^3.0.0",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.4.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.7.2",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Olwiba/olwibaUI"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "author": "Olwiba",
+  "license": "MIT"
+}

package/src/app/AppShell.tsx

@@ -0,0 +1,365 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+import {
+  BellIcon,
+  CreditCardIcon,
+  LogOutIcon,
+  MoreVerticalIcon,
+  PlusCircleIcon,
+} from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Separator,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from '@olwiba/cn';
+import { useUIMode } from '../context/OlwibaUIContext';
+
+// ─── Public types ─────────────────────────────────────────────────────────────
+
+export interface AppNavItem {
+  icon: LucideIcon;
+  label: string;
+  href: string;
+  isActive?: boolean;
+}
+
+export interface AppShellAction {
+  icon?: LucideIcon;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface AppShellUser {
+  email: string;
+  name?: string;
+  avatar?: string;
+  /** Displayed as a sub-label (e.g. plan tier). */
+  plan?: string;
+  onSignOut?: () => void;
+  onBilling?: () => void;
+}
+
+export interface AppShellBrand {
+  name: ReactNode;
+  logo?: ReactNode;
+  href?: string;
+}
+
+/**
+ * Render a navigation link. Override to integrate your router's Link component.
+ * @example renderLink={({ href, children }) => <Link to={href}>{children}</Link>}
+ */
+export type AppShellRenderLink = (props: {
+  href: string;
+  children: ReactNode;
+  className?: string;
+}) => ReactNode;
+
+export interface AppShellProps {
+  brand?: AppShellBrand;
+  navItems?: AppNavItem[];
+  /** Primary CTA rendered above nav (e.g. "New project", "Quick create") */
+  action?: AppShellAction;
+  user?: AppShellUser;
+  /** Text shown in the top header bar */
+  pageTitle?: string;
+  /** Override link rendering for SPA navigation. Defaults to a native <a>. */
+  renderLink?: AppShellRenderLink;
+  children?: ReactNode;
+  /**
+   * Sidebar collapse behaviour.
+   * - `"icon"` — collapses to a narrow icon rail (default, recommended for desktop)
+   * - `"offcanvas"` — slides off-screen as a drawer overlay
+   * - `"none"` — always fully visible
+   */
+  collapsible?: 'icon' | 'offcanvas' | 'none';
+  /**
+   * Layout scope.
+   * - `"viewport"` (default) — fills the full browser viewport; use for top-level app shells.
+   * - `"contained"` — fills its parent container; use in docs sandboxes, modals, or embedded previews.
+   */
+  sidebarPosition?: 'viewport' | 'contained';
+  /** Which side the sidebar sits on. @default "left" */
+  side?: 'left' | 'right';
+}
+
+// ─── Internal sub-components ──────────────────────────────────────────────────
+
+function NavUser({ user }: { user: AppShellUser }) {
+  const { isMobile } = useSidebar();
+  const uiMode = useUIMode();
+  const avatarMode = uiMode !== 'default' ? (uiMode as 'playful' | 'smooth') : undefined;
+  const initials = (user.name ?? user.email).slice(0, 2).toUpperCase();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar mode={avatarMode} size="sm" className="grayscale">
+                {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+                <AvatarFallback>{initials}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name ?? user.email}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.plan ? `${user.plan} plan` : user.email}
+                </span>
+              </div>
+              <MoreVerticalIcon className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar mode={avatarMode} size="sm">
+                  {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+                  <AvatarFallback>{initials}</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name ?? user.email}</span>
+                  <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              {user.onBilling && (
+                <DropdownMenuItem onClick={user.onBilling}>
+                  <CreditCardIcon />
+                  Billing
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem>
+                <BellIcon />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            {user.onSignOut && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={user.onSignOut}>
+                  <LogOutIcon />
+                  Sign out
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
+
+function ShellSidebar({
+  brand,
+  navItems,
+  action,
+  user,
+  renderLink,
+  collapsible,
+  side,
+  sidebarPosition,
+}: {
+  brand: AppShellBrand;
+  navItems: AppNavItem[];
+  action?: AppShellAction;
+  user: AppShellUser;
+  renderLink: AppShellRenderLink;
+  collapsible: 'icon' | 'offcanvas' | 'none';
+  side: 'left' | 'right';
+  sidebarPosition: 'viewport' | 'contained';
+}) {
+  return (
+    <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
+              {renderLink({
+                href: brand.href ?? '#',
+                children: (
+                  <>
+                    {brand.logo}
+                    <span className="text-base font-semibold">{brand.name}</span>
+                  </>
+                ),
+              })}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent className="flex flex-col gap-2">
+            {action && (
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  {action.href ? (
+                    <SidebarMenuButton
+                      asChild
+                      tooltip={action.label}
+                      className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
+                    >
+                      {renderLink({
+                        href: action.href,
+                        children: (
+                          <>
+                            {action.icon && <action.icon />}
+                            <span>{action.label}</span>
+                          </>
+                        ),
+                      })}
+                    </SidebarMenuButton>
+                  ) : (
+                    <SidebarMenuButton
+                      tooltip={action.label}
+                      onClick={action.onClick}
+                      className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
+                    >
+                      {action.icon && <action.icon />}
+                      <span>{action.label}</span>
+                    </SidebarMenuButton>
+                  )}
+                </SidebarMenuItem>
+              </SidebarMenu>
+            )}
+
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.label}>
+                  <SidebarMenuButton asChild tooltip={item.label} isActive={item.isActive}>
+                    {renderLink({
+                      href: item.href,
+                      children: (
+                        <>
+                          <item.icon />
+                          <span>{item.label}</span>
+                        </>
+                      ),
+                    })}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <NavUser user={user} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+function ShellHeader({ pageTitle }: { pageTitle: string }) {
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+        <h1 className="text-base font-medium">{pageTitle}</h1>
+      </div>
+    </header>
+  );
+}
+
+// ─── Default placeholder values (keeps the shell renderable without required props) ─
+
+const defaultBrand: AppShellBrand = {
+  name: 'App',
+  href: '#',
+};
+
+const defaultUser: AppShellUser = {
+  name: 'User',
+  email: 'user@example.com',
+};
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+// ─── Main export ──────────────────────────────────────────────────────────────
+
+export function AppShell({
+  brand = defaultBrand,
+  navItems = [],
+  action,
+  user = defaultUser,
+  pageTitle = 'Dashboard',
+  renderLink = defaultRenderLink,
+  collapsible = 'icon',
+  sidebarPosition = 'viewport',
+  side = 'left',
+  children,
+}: AppShellProps = {}) {
+  const isContained = sidebarPosition === 'contained';
+
+  const inner = (
+    <SidebarProvider
+      layout={isContained ? 'embedded' : 'viewport'}
+      className={isContained ? 'overflow-hidden' : 'h-svh overflow-hidden'}
+    >
+      <ShellSidebar
+        brand={brand}
+        navItems={navItems}
+        action={action}
+        user={user}
+        renderLink={renderLink}
+        collapsible={collapsible}
+        side={side}
+        sidebarPosition={sidebarPosition}
+      />
+      <SidebarInset className={isContained ? undefined : 'overflow-y-auto'}>
+        <ShellHeader pageTitle={pageTitle} />
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  );
+
+  if (isContained) {
+    return (
+      <div className="relative flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden">
+        {inner}
+      </div>
+    );
+  }
+
+  return inner;
+}

package/src/app/AuthSection.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import { GalleryVerticalEnd, Building2, ShieldCheck, Sparkles } from 'lucide-react';
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, cn } from '@olwiba/cn';
+
+// ─── Centered layout ──────────────────────────────────────────────────────────
+
+function CenteredAuth({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="flex h-full min-h-[720px] w-full flex-col items-center justify-center gap-6 rounded-2xl bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+// ─── Split layout ─────────────────────────────────────────────────────────────
+
+function SplitAuth({ children, panel }: { children: React.ReactNode; panel?: React.ReactNode }) {
+  const defaultPanel = (
+    <div className="flex flex-col gap-6">
+      <Badge variant="secondary" className="w-fit">Welcome</Badge>
+      <div className="space-y-3">
+        <h2 className="text-3xl font-semibold tracking-tight">Build better, ship faster</h2>
+        <p className="max-w-md text-muted-foreground">
+          Sign in to continue building with ready-made components and layouts.
+        </p>
+      </div>
+      <div className="space-y-3 text-sm text-muted-foreground">
+        <div className="flex items-center gap-2"><ShieldCheck className="size-4" /> Type-safe components</div>
+        <div className="flex items-center gap-2"><Sparkles className="size-4" /> Polished defaults</div>
+        <div className="flex items-center gap-2"><Building2 className="size-4" /> Plug-and-play shells</div>
+      </div>
+    </div>
+  );
+
+  return (
+    <section className="grid h-full min-h-[560px] overflow-hidden rounded-2xl border bg-card lg:grid-cols-2">
+      <div className="relative hidden p-8 pb-16 lg:flex lg:flex-col lg:justify-center">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-muted" />
+        <div className="relative z-10">{panel ?? defaultPanel}</div>
+      </div>
+      <div className="flex items-center justify-center p-6 lg:p-10">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+// ─── Shared form slot ─────────────────────────────────────────────────────────
+
+export interface AuthFormProps {
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+  onSso?: () => void;
+  signUpHref?: string;
+  forgotPasswordHref?: string;
+  brand?: React.ReactNode;
+}
+
+function DefaultForm({ onSubmit, onSso, signUpHref = '#', forgotPasswordHref = '#', brand }: AuthFormProps) {
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        {brand && <div className="mb-2">{brand}</div>}
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Enter your email and password to continue.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="auth-email">Email</Label>
+            <Input id="auth-email" type="email" placeholder="name@company.com" />
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="auth-password">Password</Label>
+              {forgotPasswordHref && (
+                <a className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground" href={forgotPasswordHref}>
+                  Forgot password?
+                </a>
+              )}
+            </div>
+            <Input id="auth-password" type="password" placeholder="••••••••" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Button type="submit" className="w-full">Continue</Button>
+            {onSso && (
+              <Button type="button" variant="outline" className="w-full" onClick={onSso}>Use SSO</Button>
+            )}
+          </div>
+        </form>
+        {signUpHref && (
+          <p className="text-center text-xs text-muted-foreground">
+            New here?{' '}
+            <a className="text-foreground underline underline-offset-4" href={signUpHref}>
+              Create an account
+            </a>
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+export interface AuthSectionProps extends AuthFormProps {
+  /** Visual layout of the auth screen */
+  layout?: 'centered' | 'split';
+  /** Custom form/card content. Defaults to the built-in sign-in form. */
+  children?: React.ReactNode;
+  /** (split layout only) Custom content for the left decorative panel */
+  panel?: React.ReactNode;
+  className?: string;
+}
+
+export function AuthSection({
+  layout = 'centered',
+  children,
+  panel,
+  className,
+  ...formProps
+}: AuthSectionProps) {
+  const form = children ?? <DefaultForm {...formProps} />;
+
+  if (layout === 'split') {
+    return (
+      <div className={cn('h-full', className)}>
+        <SplitAuth panel={panel}>{form}</SplitAuth>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('h-full', className)}>
+      <CenteredAuth>{form}</CenteredAuth>
+    </div>
+  );
+}

package/src/app/EmptyState.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps) {
+  return (
+    <div
+      className={cn('flex flex-col items-center justify-center gap-3 py-12 text-center', className)}
+      {...props}
+    >
+      {Icon && (
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border bg-muted">
+          <Icon className="size-6 text-muted-foreground" />
+        </div>
+      )}
+      <div className="space-y-1">
+        <h3 className="font-semibold">{title}</h3>
+        {description && (
+          <p className="max-w-xs text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {action}
+    </div>
+  );
+}