@olwiba/ui 0.0.38 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.38",
+  "version": "0.0.42",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -9,7 +9,12 @@
   "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./email": {
+      "import": "./dist/email/index.js",
+      "types": "./dist/email/index.d.ts"
     }
   },
   "files": [
@@ -44,7 +49,7 @@
   },
   "peerDependencies": {
     "@content-collections/mdx": ">=0.2.0",
-    "@olwiba/cn": ">=0.1.2",
+    "@olwiba/cn": ">=0.1.16",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
@@ -55,7 +60,7 @@
   },
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
-    "@olwiba/cn": "^0.1.15",
+    "@olwiba/cn": "0.1.17",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AppShell.tsx

@@ -219,7 +219,11 @@ function ShellSidebar({
                 href: brand.href ?? '#',
                 children: (
                   <>
-                    {brand.logo ?? (
+                    {brand.logo ? (
+                      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                        {brand.logo}
+                      </span>
+                    ) : (
                       <span className="flex size-4 shrink-0 items-center justify-center text-sm font-semibold">
                         {fallbackLogo}
                       </span>

package/src/email/ActionEmail.tsx

@@ -0,0 +1,43 @@
+import {
+  EmailButton,
+  EmailHeading,
+  EmailText,
+  emailTheme,
+} from '@olwiba/cn/email';
+import { EmailLayout } from './EmailLayout';
+import { EmailLinkFallback } from './EmailLinkFallback';
+
+export interface ActionEmailProps {
+  appName: string;
+  preview: string;
+  heading: string;
+  description: string;
+  actionLabel: string;
+  actionUrl: string;
+  brandColor?: string;
+  showLinkFallback?: boolean;
+}
+
+export function ActionEmail({
+  appName,
+  preview,
+  heading,
+  description,
+  actionLabel,
+  actionUrl,
+  brandColor = emailTheme.defaultBrandColor,
+  showLinkFallback = true,
+}: ActionEmailProps) {
+  return (
+    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>
+      <EmailHeading>{heading}</EmailHeading>
+      <EmailText variant="muted" style={{ margin: '0 0 24px' }}>
+        {description}
+      </EmailText>
+      <EmailButton href={actionUrl} label={actionLabel} brandColor={brandColor} />
+      {showLinkFallback ? (
+        <EmailLinkFallback actionUrl={actionUrl} brandColor={brandColor} />
+      ) : null}
+    </EmailLayout>
+  );
+}

package/src/email/EmailLayout.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+import {
+  EmailBody,
+  EmailContainer,
+  EmailHead,
+  EmailPreview,
+  EmailRoot,
+  EmailSection,
+  EmailText,
+  emailTheme,
+} from '@olwiba/cn/email';
+
+export interface EmailLayoutProps {
+  preview?: string;
+  appName: string;
+  brandColor?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+}
+
+/** Branded email shell — UI block composed from CN primitives. */
+export function EmailLayout({
+  preview,
+  appName,
+  brandColor = emailTheme.defaultBrandColor,
+  children,
+  footer,
+}: EmailLayoutProps) {
+  const year = new Date().getFullYear();
+
+  return (
+    <EmailRoot>
+      <EmailHead />
+      {preview ? <EmailPreview>{preview}</EmailPreview> : null}
+      <EmailBody
+        style={{
+          backgroundColor: emailTheme.pageBackground,
+          fontFamily: emailTheme.fontFamily,
+          margin: 0,
+          padding: '24px 0',
+        }}
+      >
+        <EmailContainer
+          style={{
+            maxWidth: '560px',
+            margin: '0 auto',
+            backgroundColor: emailTheme.cardBackground,
+            borderRadius: '16px',
+            overflow: 'hidden',
+            border: `1px solid ${emailTheme.cardBorder}`,
+          }}
+        >
+          <EmailSection
+            style={{
+              padding: '24px 32px',
+              borderBottom: `1px solid ${emailTheme.cardBorder}`,
+            }}
+          >
+            <EmailText
+              style={{
+                margin: 0,
+                fontSize: '18px',
+                fontWeight: 600,
+                color: brandColor,
+              }}
+            >
+              {appName}
+            </EmailText>
+          </EmailSection>
+
+          <EmailSection style={{ padding: '32px' }}>{children}</EmailSection>
+
+          {footer ?? (
+            <EmailSection
+              style={{
+                padding: '20px 32px',
+                borderTop: `1px solid ${emailTheme.cardBorder}`,
+                backgroundColor: emailTheme.mutedBackground,
+              }}
+            >
+              <EmailText
+                variant="caption"
+                style={{
+                  margin: 0,
+                  textAlign: 'center',
+                }}
+              >
+                © {year} {appName}. All rights reserved.
+              </EmailText>
+            </EmailSection>
+          )}
+        </EmailContainer>
+      </EmailBody>
+    </EmailRoot>
+  );
+}

package/src/email/EmailLinkFallback.tsx

@@ -0,0 +1,26 @@
+import { EmailLink, EmailText } from '@olwiba/cn/email';
+
+export interface EmailLinkFallbackProps {
+  actionUrl: string;
+  label?: string;
+  brandColor?: string;
+}
+
+export function EmailLinkFallback({
+  actionUrl,
+  label = 'Or copy and paste this link into your browser:',
+  brandColor,
+}: EmailLinkFallbackProps) {
+  return (
+    <>
+      <EmailText variant="caption" style={{ margin: '24px 0 8px' }}>
+        {label}
+      </EmailText>
+      <EmailText style={{ margin: 0 }}>
+        <EmailLink href={actionUrl} brandColor={brandColor}>
+          {actionUrl}
+        </EmailLink>
+      </EmailText>
+    </>
+  );
+}

package/src/email/NoticeEmail.tsx

@@ -0,0 +1,31 @@
+import {
+  EmailHeading,
+  EmailText,
+  emailTheme,
+} from '@olwiba/cn/email';
+import { EmailLayout } from './EmailLayout';
+
+export interface NoticeEmailProps {
+  appName: string;
+  preview: string;
+  heading: string;
+  body: string;
+  brandColor?: string;
+}
+
+export function NoticeEmail({
+  appName,
+  preview,
+  heading,
+  body,
+  brandColor = emailTheme.defaultBrandColor,
+}: NoticeEmailProps) {
+  return (
+    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>
+      <EmailHeading>{heading}</EmailHeading>
+      <EmailText variant="muted" style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
+        {body}
+      </EmailText>
+    </EmailLayout>
+  );
+}

package/src/email/index.ts

@@ -0,0 +1,3 @@
+export { ActionEmail, type ActionEmailProps } from './ActionEmail';
+export { NoticeEmail, type NoticeEmailProps } from './NoticeEmail';
+export { EmailLayout, type EmailLayoutProps } from './EmailLayout';

package/src/index.ts

@@ -14,6 +14,9 @@ export {
 // ─── Primitives — mode-aware re-exports of @olwiba/cn components ─────────────
 export * from './primitives';
 
+// ─── Layout — grid, stack, section primitives ────────────────────────────────
+export * from './layout';
+
 // ─── App — shells, auth, feedback ────────────────────────────────────────────
 export {
   AppShell,

package/src/layout/Grid.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const colsMap: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  12: 'grid-cols-12',
+}
+
+const gapMap = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const spanMap: Record<number, string> = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+  5: 'col-span-5',
+  6: 'col-span-6',
+  7: 'col-span-7',
+  8: 'col-span-8',
+  9: 'col-span-9',
+  10: 'col-span-10',
+  11: 'col-span-11',
+  12: 'col-span-12',
+}
+
+const rowSpanMap: Record<number, string> = {
+  1: 'row-span-1',
+  2: 'row-span-2',
+  3: 'row-span-3',
+  4: 'row-span-4',
+}
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+  gap?: keyof typeof gapMap
+}
+
+export function Grid({ columns = 3, gap = 'md', className, children, ...props }: GridProps) {
+  return (
+    <div className={cn('grid', colsMap[columns], gapMap[gap], className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  rowSpan?: 1 | 2 | 3 | 4
+}
+
+export function GridItem({ span = 1, rowSpan, className, children, ...props }: GridItemProps) {
+  return (
+    <div
+      className={cn(spanMap[span], rowSpan != null && rowSpanMap[rowSpan], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/Section.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const paddingMap = {
+  none: '',
+  sm: 'py-4',
+  md: 'py-8',
+  lg: 'py-16',
+}
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string
+  description?: string
+  padding?: keyof typeof paddingMap
+}
+
+export function Section({ title, description, padding = 'md', className, children, ...props }: SectionProps) {
+  return (
+    <section className={cn('w-full', paddingMap[padding], className)} {...props}>
+      {(title || description) && (
+        <div className="mb-6">
+          {title && <h2 className="text-xl font-semibold text-foreground">{title}</h2>}
+          {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {children}
+    </section>
+  )
+}

package/src/layout/Stack.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const gapMap = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const alignMap = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+}
+
+const justifyMap = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: 'col' | 'row'
+  gap?: keyof typeof gapMap
+  align?: keyof typeof alignMap
+  justify?: keyof typeof justifyMap
+  wrap?: boolean
+}
+
+export function Stack({
+  direction = 'col',
+  gap = 'md',
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  className,
+  children,
+  ...props
+}: StackProps) {
+  return (
+    <div
+      className={cn(
+        'flex',
+        direction === 'col' ? 'flex-col' : 'flex-row',
+        gapMap[gap],
+        alignMap[align],
+        justifyMap[justify],
+        wrap && 'flex-wrap',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/index.ts

@@ -0,0 +1,6 @@
+export { Grid, GridItem } from './Grid'
+export type { GridProps, GridItemProps } from './Grid'
+export { Stack } from './Stack'
+export type { StackProps } from './Stack'
+export { Section } from './Section'
+export type { SectionProps } from './Section'

package/src/marketing/ContactSection.tsx

@@ -106,28 +106,37 @@ export function ContactSection({
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
+              <input
+                type="text"
+                name="company"
+                tabIndex={-1}
+                autoComplete="off"
+                aria-hidden="true"
+                className="hidden"
+              />
               <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 />
+                  <Input id="contact-first" name="firstName" placeholder="Olivia" required />
                 </div>
                 <div className="space-y-1.5">
                   <Label htmlFor="contact-last">Last name</Label>
-                  <Input id="contact-last" placeholder="Reed" required />
+                  <Input id="contact-last" name="lastName" 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 />
+                <Input id="contact-email" name="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 />
+                <Input id="contact-subject" name="subject" placeholder="How can we help?" required />
               </div>
               <div className="space-y-1.5">
                 <Label htmlFor="contact-message">Message</Label>
                 <Textarea
                   id="contact-message"
+                  name="message"
                   placeholder="Tell us what you're working on..."
                   className="min-h-28 resize-none"
                   required

package/src/marketing/Footer.tsx

@@ -26,8 +26,8 @@ export function Footer({
   const copyrightText = legal ?? `\u00A9 ${new Date().getFullYear()} ${brand.name}. All rights reserved.`;
 
   return (
-    <footer className="bg-gray-900">
-      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+    <footer className="overflow-hidden rounded-2xl border bg-foreground text-background">
+      <div className="mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8">
         {/* Brand */}
         <div className="flex justify-center">
           {renderLink({
@@ -36,11 +36,11 @@ export function Footer({
             children: (
               <>
                 {brand.logo && (
-                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 text-white">
+                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-background/10 text-background">
                     {brand.logo}
                   </span>
                 )}
-                <span className="text-lg font-semibold text-white">{brand.name}</span>
+                <span className="text-lg font-semibold text-background">{brand.name}</span>
               </>
             ),
           })}
@@ -53,7 +53,7 @@ export function Footer({
               <div key={label}>
                 {renderLink({
                   href,
-                  className: 'text-sm/6 text-gray-400 hover:text-white transition-colors',
+                  className: 'text-sm/6 text-background/70 transition-colors hover:text-background',
                   children: label,
                 })}
               </div>
@@ -69,7 +69,7 @@ export function Footer({
                 key={label}
                 href={href}
                 aria-label={label}
-                className="text-gray-400 hover:text-gray-300 transition-colors"
+                className="text-background/70 transition-colors hover:text-background"
               >
                 {icon}
               </a>
@@ -78,7 +78,7 @@ export function Footer({
         )}
 
         {/* Copyright */}
-        <p className="mt-10 text-center text-sm/6 text-gray-500">
+        <p className="mt-10 text-center text-sm/6 text-background/50">
           {copyrightText}
         </p>
       </div>

package/src/marketing/Navbar.tsx

@@ -40,7 +40,7 @@ export function Navbar({
           children: (
             <span className="flex items-center gap-2 font-semibold">
               {brand.logo && (
-                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                   {brand.logo}
                 </span>
               )}

package/src/marketing/NewsletterSection.tsx

@@ -74,6 +74,14 @@ export function NewsletterSection({
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <input
+                type="text"
+                name="company"
+                tabIndex={-1}
+                autoComplete="off"
+                aria-hidden="true"
+                className="hidden"
+              />
               <Input
                 type="email"
                 placeholder={placeholder}

package/src/types/external-packages.d.ts

@@ -1,79 +1,31 @@
-declare module '@olwiba/docs' {
-  import * as React from 'react';
-
-  export const Theme: {
-    Purple: string;
-    [key: string]: string;
+declare module '@olwiba/cn/email' {
+  export const emailTheme: {
+    pageBackground: string;
+    cardBackground: string;
+    cardBorder: string;
+    mutedBackground: string;
+    text: string;
+    mutedText: string;
+    link: string;
+    buttonText: string;
+    defaultBrandColor: string;
+    fontFamily: string;
   };
 
-  export function createDocsRoot(config: Record<string, unknown>): unknown;
-  export const DocsHeader: React.ComponentType<any>;
-  export const DocsFooter: React.ComponentType<any>;
-  export const DocsLayout: React.ComponentType<any>;
-  export const DocsCopyPage: React.ComponentType<any>;
-  export const DocsMobileNav: React.ComponentType<any>;
-  export const DocsToc: React.ComponentType<any>;
-  export const CopyCommandButton: React.ComponentType<any>;
-  export const CopyButton: React.ComponentType<any>;
-  export const mdxComponents: Record<string, React.ComponentType<any>>;
-  export function extractTextFromReactNode(node: React.ReactNode): string;
-  export function cn(...inputs: any[]): string;
-  export const Sandbox: React.ComponentType<any>;
-  export const CodeFence: React.ComponentType<any>;
-
-  export interface SandboxDefinition {
-    id: string;
-    defaultViewport?: 'desktop' | 'tablet' | 'mobile' | 'custom';
-    files: Array<{ path: string; language: string; code: string }>;
-    preview: React.LazyExoticComponent<React.FC>;
-  }
-
-  export type SandboxRegistryInput =
-    | SandboxDefinition[]
-    | Record<string, SandboxDefinition>;
-
-  export function registerSandboxes(input: SandboxRegistryInput): void;
-  export function getSandboxDefinition(id: string): SandboxDefinition | undefined;
-
-  export interface UIModeOption {
-    value: string;
-    label: string;
-  }
-  export interface UIModeDropdownProps {
-    modes: UIModeOption[];
-  }
-  export const UIModeDropdown: React.ComponentType<UIModeDropdownProps>;
-  export function getUIMode(): string;
-  export function setUIMode(mode: string): void;
-  export function subscribeUIMode(fn: (mode: string) => void): () => void;
-
-  export interface SidebarSection {
-    name: string;
-    href: string;
-  }
-
-  export interface TocItem {
-    title: string;
-    url: string;
-    depth: number;
-  }
-
-  export interface PageLoaderData {
-    path: string;
-    url: string;
-    pageTree: unknown;
-    frontmatter: { title?: string; description?: string };
-    toc: TocItem[];
-    rawContent: string;
-    neighbours: {
-      previous: { url: string; name: string } | null;
-      next: { url: string; name: string } | null;
-    };
-  }
-}
-
-declare module '@olwiba/docs/server' {
-  export function createServer(): unknown;
+  export type EmailTheme = typeof emailTheme;
+
+  export function EmailRoot(props: { children?: React.ReactNode }): JSX.Element;
+  export function EmailHead(props: { children?: React.ReactNode }): JSX.Element;
+  export function EmailBody(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailPreview(props: { children?: string }): JSX.Element;
+  export function EmailContainer(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailSection(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailText(props: {
+    children?: React.ReactNode;
+    variant?: 'default' | 'muted' | 'caption';
+    style?: React.CSSProperties;
+  }): JSX.Element;
+  export function EmailHeading(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailLink(props: { href: string; children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailButton(props: { href: string; label: string; brandColor?: string }): JSX.Element;
 }
-
-