@olwiba/ui 0.2.25 → 0.2.26

package/content/docs/mechanics/index.mdx

@@ -0,0 +1,11 @@
+---
+title: Mechanics
+description: Behavior wrappers — components you put other components inside to gain an interaction pattern.
+---
+
+Mechanics are the inverse of blocks: a block gives you content with a fixed behavior, a mechanic gives you behavior with no opinion about content. Put any components inside one and it plays them with its interaction pattern.
+
+| Component | Description |
+|-----------|-------------|
+| `Carousel` | Plays children as slides in a scroll-snap track with prev/next controls |
+| `Sortable` | Makes children drag-to-reorder by pointer or keyboard |

package/content/docs/mechanics/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Mechanics",
+  "pages": ["index", "carousel", "sortable"]
+}

package/content/docs/mechanics/sortable.mdx

@@ -0,0 +1,44 @@
+---
+title: Sortable
+description: Drag-to-reorder behavior — wrap any children and they become sortable by pointer or keyboard.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<Sandbox id="sortable" />
+
+## Installation
+
+```sh
+bun add @olwiba/ui
+```
+
+## Usage
+
+```tsx
+import { Sortable } from "@olwiba/ui";
+
+const [order, setOrder] = React.useState(tasks.map((t) => t.id));
+
+<Sortable items={order} onReorder={setOrder}>
+  {order.map((id) => <TaskRow key={id} task={taskById[id]} />)}
+</Sortable>
+```
+
+Sortable is a mechanic: it has no opinion about what the items look like — rows, cards, or tiles all work. It's controlled — `items` is the id order, `onReorder` hands you the new order after a drag, and you re-render children in that order. Pairing is positional: the i-th child gets the i-th id.
+
+`direction="horizontal"` for rows of chips or columns, `direction="grid"` for tile boards (add your grid columns via `className`):
+
+```tsx
+<Sortable items={order} onReorder={setOrder} direction="grid" className="grid-cols-3">
+  {order.map((id) => <Tile key={id} id={id} />)}
+</Sortable>
+```
+
+Keyboard reordering works out of the box — focus an item, space to lift, arrows to move, space to drop.
+
+## API Reference
+
+<APIReference name="Sortable" props={[]} />

package/content/docs/meta.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "pages": ["index", "app", "marketing", "email", "overlays", "motion", "mechanics", "components", "hooks"]
+}

package/content/docs/motion/animated-swap.mdx

@@ -0,0 +1,75 @@
+---
+title: AnimatedSwap
+description: Animates the replacement of any content when its swap key changes — a rolling price, a crossfading chart, a sliding status pill.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<Sandbox id="animated-swap" />
+
+## Usage
+
+`swapKey` is what triggers the animation. The component can't see inside `children`,
+so re-rendering with different content under the same key updates in place, silently.
+
+```tsx
+import { AnimatedSwap } from "@olwiba/ui";
+
+<AnimatedSwap swapKey={price} effect="roll" className="text-4xl font-bold">
+  {price}
+</AnimatedSwap>
+```
+
+Any content works, not just text:
+
+```tsx
+<AnimatedSwap swapKey={range} effect="fade">
+  <RevenueChart range={range} />
+</AnimatedSwap>
+```
+
+## Effects
+
+| Effect | Behaviour |
+|--------|-----------|
+| `roll` | Odometer. The old value is displaced upward as the new one rises into its place. No fade — the values stay solid, which is what makes it read as a mechanism. |
+| `fade` | Crossfade, no movement. Safe inside a layout that's also reflowing. |
+| `slide` | Short horizontal travel carried by opacity. Needs no clipping, so it won't crop a ring or shadow. |
+| `none` | Instant swap. |
+
+Omit `effect` and the current `OlwibaUIProvider` mode picks one:
+`default` → `fade`, `playful` → `roll`, `smooth` → `slide`. An explicit `effect`
+always wins. Under `prefers-reduced-motion: reduce` every effect degrades to an
+instant swap.
+
+## Custom effects
+
+`effect` also takes a spec object, so you aren't limited to the named set. A
+transition is just two layers with a start and an end style:
+
+```tsx
+<AnimatedSwap
+  swapKey={status}
+  effect={{
+    clip: false,
+    duration: 400,
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    enter: { from: { opacity: 0, transform: "scale(0.8)" }, to: { opacity: 1, transform: "scale(1)" } },
+    exit: { from: { opacity: 1, transform: "scale(1)" }, to: { opacity: 0, transform: "scale(1.2)" } },
+  }}
+>
+  <StatusPill status={status} />
+</AnimatedSwap>
+```
+
+## API Reference
+
+<APIReference name="AnimatedSwap" props={[
+  { name: "swapKey", type: "React.Key", description: "Changing this triggers the animation. Nothing else does." },
+  { name: "children", type: "ReactNode", description: "The content being swapped." },
+  { name: "effect", type: "\"roll\" | \"fade\" | \"slide\" | \"none\" | AnimatedSwapSpec", default: "from UI mode", description: "Named effect, or a spec of your own." },
+  { name: "duration", type: "number", description: "Overrides the effect's duration, in ms." },
+  { name: "className", type: "string", description: "Class applied to the wrapper. Both layers inherit its type styles." },
+]} />

package/content/docs/motion/count-up.mdx

@@ -0,0 +1,31 @@
+---
+title: CountUp
+description: Animates a number from 0 to a target value when it enters the viewport.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<Sandbox id="count-up" />
+
+## Usage
+
+```tsx
+import { CountUp } from "@olwiba/ui";
+
+<CountUp to={1000} />
+<CountUp to={99.9} decimals={1} suffix="%" duration={2} />
+```
+
+## API Reference
+
+<APIReference name="CountUp" props={[
+  { name: "to", type: "number", description: "Target value to count up to." },
+  { name: "from", type: "number", default: "0", description: "Starting value." },
+  { name: "decimals", type: "number", default: "0", description: "Number of decimal places." },
+  { name: "duration", type: "number", default: "1.5", description: "Animation duration (seconds)." },
+  { name: "prefix", type: "string", description: "String prepended to the number." },
+  { name: "suffix", type: "string", description: "String appended to the number." },
+  { name: "className", type: "string", description: "Class applied to the span." },
+]} />

package/content/docs/motion/fade-in.mdx

@@ -0,0 +1,34 @@
+---
+title: FadeIn
+description: Fade and slide entrance animation wrapper.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<Sandbox id="fade-in" />
+
+## Usage
+
+```tsx
+import { FadeIn } from "@olwiba/ui";
+
+<FadeIn>
+  <MyContent />
+</FadeIn>
+
+<FadeIn delay={0.2} duration={0.5} direction="up">
+  <MyContent />
+</FadeIn>
+```
+
+## API Reference
+
+<APIReference name="FadeIn" props={[
+  { name: "children", type: "ReactNode", description: "Content to animate in." },
+  { name: "delay", type: "number", default: "0", description: "Delay before the animation starts (seconds)." },
+  { name: "duration", type: "number", default: "0.4", description: "Animation duration (seconds)." },
+  { name: "direction", type: '"up" | "down" | "left" | "right" | "none"', default: '"up"', description: "Slide direction of the entrance." },
+  { name: "className", type: "string", description: "Class applied to the wrapper." },
+]} />

package/content/docs/motion/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Motion
+description: Lightweight animation primitives — entrance effects, staggered lists, number counters, and page transitions.
+---
+
+| Component | Description |
+|-----------|-------------|
+| `FadeIn` | Fade and slide entrance animation |
+| `StaggerChildren` | Staggers `FadeIn` across a list of children |
+| `CountUp` | Animates a number from 0 to a target value |
+| `AnimatedSwap` | Animates the replacement of any content when its swap key changes |
+| `PageTransition` | Wraps route content in an entrance animation |

package/content/docs/motion/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Motion",
+  "pages": ["index", "fade-in", "stagger-children", "count-up", "animated-swap", "page-transition"]
+}

package/content/docs/motion/page-transition.mdx

@@ -0,0 +1,29 @@
+---
+title: PageTransition
+description: Wraps route content in a fade entrance animation — drop it around your route component output.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<Sandbox id="page-transition" />
+
+## Usage
+
+```tsx
+import { PageTransition } from "@olwiba/ui";
+
+// In a TanStack Router or Next.js layout
+export default function Layout({ children }) {
+  return <PageTransition>{children}</PageTransition>;
+}
+```
+
+## API Reference
+
+<APIReference name="PageTransition" props={[
+  { name: "children", type: "ReactNode", description: "Route content to animate." },
+  { name: "duration", type: "number", default: "0.3", description: "Animation duration (seconds)." },
+  { name: "className", type: "string", description: "Class applied to the wrapper." },
+]} />

package/content/docs/motion/stagger-children.mdx

@@ -0,0 +1,31 @@
+---
+title: StaggerChildren
+description: Wraps a list of children and staggers their FadeIn entrance animations.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<Sandbox id="stagger-children" />
+
+## Usage
+
+```tsx
+import { StaggerChildren } from "@olwiba/ui";
+
+<StaggerChildren stagger={0.1}>
+  <Card />
+  <Card />
+  <Card />
+</StaggerChildren>
+```
+
+## API Reference
+
+<APIReference name="StaggerChildren" props={[
+  { name: "children", type: "ReactNode", description: "Children to stagger." },
+  { name: "stagger", type: "number", default: "0.1", description: "Delay between each child (seconds)." },
+  { name: "initialDelay", type: "number", default: "0", description: "Delay before the first child animates." },
+  { name: "className", type: "string", description: "Class applied to the wrapper." },
+]} />

package/content/docs/overlays/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Layering
+description: Components for adding depth — underlays sit behind content, overlays sit in front.
+---
+
+| Component | Variants |
+|-----------|----------|
+| `Underlay` | `dots`, `lines`, `cross`, `glow` |
+| `Overlay` | `dim`, `scrim`, `loading` |

package/content/docs/overlays/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Layering",
+  "pages": ["index", "underlay", "overlay"]
+}

package/content/docs/overlays/overlay.mdx

@@ -0,0 +1,60 @@
+---
+title: Overlay
+description: Dim, scrim, and loading overlays that sit in front of content inside a container.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<ComponentPreview name="overlay" noPadding />
+
+## Installation
+
+```sh
+bun add @olwiba/ui
+```
+
+## Usage
+
+```tsx
+import { Overlay } from "@olwiba/ui";
+
+// Overlay sits on top — place after your content in a relative container
+<div className="relative overflow-hidden rounded-xl">
+  {/* your content */}
+  <Overlay variant="loading" label="Saving..." />
+</div>
+
+// Dim — semi-transparent wash over content
+<Overlay variant="dim" opacity={0.5} />
+
+// Scrim — gradient fade from an edge (great for image text legibility)
+<Overlay variant="scrim" direction="bottom" />
+```
+
+## API Reference
+
+<APIReference name="Overlay" props={[
+  { name: "variant", type: '"dim" | "scrim" | "loading"', description: "Selects the overlay treatment." },
+  { name: "className", type: "string", description: "Class applied to the root element." },
+]} />
+
+### Dim variant
+
+<APIReference name="Overlay (dim)" props={[
+  { name: "opacity", type: "number", default: "0.5", description: "Opacity of the background wash." },
+]} />
+
+### Scrim variant
+
+<APIReference name="Overlay (scrim)" props={[
+  { name: "direction", type: '"top" | "bottom" | "left" | "right"', default: '"bottom"', description: "Direction the gradient fades toward." },
+  { name: "color", type: "string", default: '"var(--background)"', description: "The opaque color the scrim fades to." },
+]} />
+
+### Loading variant
+
+<APIReference name="Overlay (loading)" props={[
+  { name: "label", type: "string", description: "Optional status label shown below the spinner." },
+]} />

package/content/docs/overlays/underlay.mdx

@@ -0,0 +1,56 @@
+---
+title: Underlay
+description: Grid patterns and glow effects that sit behind content inside a container.
+---
+
+<div className="flex flex-col md:flex-row items-center justify-start gap-2 mb-2">
+  <CopyCommandButton command="bun add @olwiba/ui" />
+</div>
+
+<ComponentPreview name="underlay" noPadding />
+
+## Installation
+
+```sh
+bun add @olwiba/ui
+```
+
+## Usage
+
+```tsx
+import { Underlay } from "@olwiba/ui";
+
+// Place inside a relative container — content goes on top with z-10
+<div className="relative overflow-hidden rounded-xl">
+  <Underlay variant="dots" />
+  <div className="relative z-10 p-8">Content</div>
+</div>
+
+// Glow — follows cursor when followCursor is true
+<div className="relative overflow-hidden rounded-xl">
+  <Underlay variant="glow" size={400} followCursor />
+  <div className="relative z-10 p-8">Hover me</div>
+</div>
+```
+
+## API Reference
+
+<APIReference name="Underlay" props={[
+  { name: "variant", type: '"dots" | "lines" | "cross" | "glow"', description: "Selects the visual treatment." },
+  { name: "className", type: "string", description: "Class applied to the root element." },
+]} />
+
+### Grid variants (`dots`, `lines`, `cross`)
+
+<APIReference name="Underlay (grid)" props={[
+  { name: "size", type: "number", default: "24", description: "Pattern tile size in pixels." },
+]} />
+
+### Glow variant
+
+<APIReference name="Underlay (glow)" props={[
+  { name: "size", type: "number", default: "400", description: "Diameter of the glow orb in pixels." },
+  { name: "color", type: "string", default: '"color-mix(in oklch, var(--primary) 45%, transparent)"', description: "Glow color." },
+  { name: "followCursor", type: "boolean", default: "false", description: "Tracks cursor position within the container." },
+  { name: "blur", type: '"sm" | "md" | "lg" | "xl"', default: '"lg"', description: "Blur intensity of the glow." },
+]} />

package/dist/email/index.d.ts

@@ -32,4 +32,11 @@ interface EmailLayoutProps {
 /** Branded email shell — UI block composed from CN primitives. */
 declare function EmailLayout({ preview, appName, brandColor, children, footer, }: EmailLayoutProps): react_jsx_runtime.JSX.Element;
 
-export { ActionEmail, type ActionEmailProps, EmailLayout, type EmailLayoutProps, NoticeEmail, type NoticeEmailProps };
+interface EmailLinkFallbackProps {
+    actionUrl: string;
+    label?: string;
+    brandColor?: string;
+}
+declare function EmailLinkFallback({ actionUrl, label, brandColor, }: EmailLinkFallbackProps): react_jsx_runtime.JSX.Element;
+
+export { ActionEmail, type ActionEmailProps, EmailLayout, type EmailLayoutProps, EmailLinkFallback, type EmailLinkFallbackProps, NoticeEmail, type NoticeEmailProps };

package/dist/email/index.js

@@ -1,4 +1,4 @@
-import { EmailRoot, EmailHead, EmailPreview, EmailBody, emailTheme, EmailContainer, EmailSection, EmailText, EmailHeading, EmailButton, EmailLink } from '@olwiba/cn/email';
+import { EmailRoot, EmailHead, EmailPreview, EmailBody, emailTheme, EmailContainer, EmailSection, EmailText, EmailLink, EmailHeading, EmailButton } from '@olwiba/cn/email';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/email/ActionEmail.tsx
@@ -97,7 +97,7 @@ function EmailLinkFallback({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(EmailText, { variant: "caption", style: { margin: "24px 0 8px" }, children: label }),
-    /* @__PURE__ */ jsx(EmailText, { style: { margin: 0 }, children: /* @__PURE__ */ jsx(EmailLink, { href: actionUrl, brandColor, children: actionUrl }) })
+    /* @__PURE__ */ jsx(EmailText, { style: { margin: 0 }, children: /* @__PURE__ */ jsx(EmailLink, { href: actionUrl, style: brandColor ? { color: brandColor } : void 0, children: actionUrl }) })
   ] });
 }
 function ActionEmail({
@@ -130,6 +130,6 @@ function NoticeEmail({
   ] });
 }
 
-export { ActionEmail, EmailLayout, NoticeEmail };
+export { ActionEmail, EmailLayout, EmailLinkFallback, NoticeEmail };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/email/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/email/EmailLayout.tsx","../../src/email/EmailLinkFallback.tsx","../../src/email/ActionEmail.tsx","../../src/email/NoticeEmail.tsx"],"names":["jsxs","jsx","EmailText","emailTheme","EmailHeading"],"mappings":"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","file":"index.js","sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  EmailBody,\n  EmailContainer,\n  EmailHead,\n  EmailPreview,\n  EmailRoot,\n  EmailSection,\n  EmailText,\n  emailTheme,\n} from '@olwiba/cn/email';\n\nexport interface EmailLayoutProps {\n  preview?: string;\n  appName: string;\n  brandColor?: string;\n  children: ReactNode;\n  footer?: ReactNode;\n}\n\n/** Branded email shell — UI block composed from CN primitives. */\nexport function EmailLayout({\n  preview,\n  appName,\n  brandColor = emailTheme.defaultBrandColor,\n  children,\n  footer,\n}: EmailLayoutProps) {\n  const year = new Date().getFullYear();\n\n  return (\n    <EmailRoot>\n      <EmailHead />\n      {preview ? <EmailPreview>{preview}</EmailPreview> : null}\n      <EmailBody\n        style={{\n          backgroundColor: emailTheme.pageBackground,\n          fontFamily: emailTheme.fontFamily,\n          margin: 0,\n          padding: '24px 0',\n        }}\n      >\n        <EmailContainer\n          style={{\n            maxWidth: '560px',\n            margin: '0 auto',\n            backgroundColor: emailTheme.cardBackground,\n            borderRadius: '16px',\n            overflow: 'hidden',\n            border: `1px solid ${emailTheme.cardBorder}`,\n          }}\n        >\n          <EmailSection\n            style={{\n              padding: '24px 32px',\n              borderBottom: `1px solid ${emailTheme.cardBorder}`,\n            }}\n          >\n            <EmailText\n              style={{\n                margin: 0,\n                fontSize: '18px',\n                fontWeight: 600,\n                color: brandColor,\n              }}\n            >\n              {appName}\n            </EmailText>\n          </EmailSection>\n\n          <EmailSection style={{ padding: '32px' }}>{children}</EmailSection>\n\n          {footer ?? (\n            <EmailSection\n              style={{\n                padding: '20px 32px',\n                borderTop: `1px solid ${emailTheme.cardBorder}`,\n                backgroundColor: emailTheme.mutedBackground,\n              }}\n            >\n              <EmailText\n                variant=\"caption\"\n                style={{\n                  margin: 0,\n                  textAlign: 'center',\n                }}\n              >\n                © {year} {appName}. All rights reserved.\n              </EmailText>\n            </EmailSection>\n          )}\n        </EmailContainer>\n      </EmailBody>\n    </EmailRoot>\n  );\n}\n","import { EmailLink, EmailText } from '@olwiba/cn/email';\n\nexport interface EmailLinkFallbackProps {\n  actionUrl: string;\n  label?: string;\n  brandColor?: string;\n}\n\nexport function EmailLinkFallback({\n  actionUrl,\n  label = 'Or copy and paste this link into your browser:',\n  brandColor,\n}: EmailLinkFallbackProps) {\n  return (\n    <>\n      <EmailText variant=\"caption\" style={{ margin: '24px 0 8px' }}>\n        {label}\n      </EmailText>\n      <EmailText style={{ margin: 0 }}>\n        <EmailLink href={actionUrl} brandColor={brandColor}>\n          {actionUrl}\n        </EmailLink>\n      </EmailText>\n    </>\n  );\n}\n","import {\n  EmailButton,\n  EmailHeading,\n  EmailText,\n  emailTheme,\n} from '@olwiba/cn/email';\nimport { EmailLayout } from './EmailLayout';\nimport { EmailLinkFallback } from './EmailLinkFallback';\n\nexport interface ActionEmailProps {\n  appName: string;\n  preview: string;\n  heading: string;\n  description: string;\n  actionLabel: string;\n  actionUrl: string;\n  brandColor?: string;\n  showLinkFallback?: boolean;\n}\n\nexport function ActionEmail({\n  appName,\n  preview,\n  heading,\n  description,\n  actionLabel,\n  actionUrl,\n  brandColor = emailTheme.defaultBrandColor,\n  showLinkFallback = true,\n}: ActionEmailProps) {\n  return (\n    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>\n      <EmailHeading>{heading}</EmailHeading>\n      <EmailText variant=\"muted\" style={{ margin: '0 0 24px' }}>\n        {description}\n      </EmailText>\n      <EmailButton href={actionUrl} label={actionLabel} brandColor={brandColor} />\n      {showLinkFallback ? (\n        <EmailLinkFallback actionUrl={actionUrl} brandColor={brandColor} />\n      ) : null}\n    </EmailLayout>\n  );\n}\n","import {\n  EmailHeading,\n  EmailText,\n  emailTheme,\n} from '@olwiba/cn/email';\nimport { EmailLayout } from './EmailLayout';\n\nexport interface NoticeEmailProps {\n  appName: string;\n  preview: string;\n  heading: string;\n  body: string;\n  brandColor?: string;\n}\n\nexport function NoticeEmail({\n  appName,\n  preview,\n  heading,\n  body,\n  brandColor = emailTheme.defaultBrandColor,\n}: NoticeEmailProps) {\n  return (\n    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>\n      <EmailHeading>{heading}</EmailHeading>\n      <EmailText variant=\"muted\" style={{ margin: 0, whiteSpace: 'pre-wrap' }}>\n        {body}\n      </EmailText>\n    </EmailLayout>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/email/EmailLayout.tsx","../../src/email/EmailLinkFallback.tsx","../../src/email/ActionEmail.tsx","../../src/email/NoticeEmail.tsx"],"names":["jsxs","jsx","EmailText","emailTheme","EmailHeading"],"mappings":"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","file":"index.js","sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  EmailBody,\n  EmailContainer,\n  EmailHead,\n  EmailPreview,\n  EmailRoot,\n  EmailSection,\n  EmailText,\n  emailTheme,\n} from '@olwiba/cn/email';\n\nexport interface EmailLayoutProps {\n  preview?: string;\n  appName: string;\n  brandColor?: string;\n  children: ReactNode;\n  footer?: ReactNode;\n}\n\n/** Branded email shell — UI block composed from CN primitives. */\nexport function EmailLayout({\n  preview,\n  appName,\n  brandColor = emailTheme.defaultBrandColor,\n  children,\n  footer,\n}: EmailLayoutProps) {\n  const year = new Date().getFullYear();\n\n  return (\n    <EmailRoot>\n      <EmailHead />\n      {preview ? <EmailPreview>{preview}</EmailPreview> : null}\n      <EmailBody\n        style={{\n          backgroundColor: emailTheme.pageBackground,\n          fontFamily: emailTheme.fontFamily,\n          margin: 0,\n          padding: '24px 0',\n        }}\n      >\n        <EmailContainer\n          style={{\n            maxWidth: '560px',\n            margin: '0 auto',\n            backgroundColor: emailTheme.cardBackground,\n            borderRadius: '16px',\n            overflow: 'hidden',\n            border: `1px solid ${emailTheme.cardBorder}`,\n          }}\n        >\n          <EmailSection\n            style={{\n              padding: '24px 32px',\n              borderBottom: `1px solid ${emailTheme.cardBorder}`,\n            }}\n          >\n            <EmailText\n              style={{\n                margin: 0,\n                fontSize: '18px',\n                fontWeight: 600,\n                color: brandColor,\n              }}\n            >\n              {appName}\n            </EmailText>\n          </EmailSection>\n\n          <EmailSection style={{ padding: '32px' }}>{children}</EmailSection>\n\n          {footer ?? (\n            <EmailSection\n              style={{\n                padding: '20px 32px',\n                borderTop: `1px solid ${emailTheme.cardBorder}`,\n                backgroundColor: emailTheme.mutedBackground,\n              }}\n            >\n              <EmailText\n                variant=\"caption\"\n                style={{\n                  margin: 0,\n                  textAlign: 'center',\n                }}\n              >\n                © {year} {appName}. All rights reserved.\n              </EmailText>\n            </EmailSection>\n          )}\n        </EmailContainer>\n      </EmailBody>\n    </EmailRoot>\n  );\n}\n","import { EmailLink, EmailText } from '@olwiba/cn/email';\n\nexport interface EmailLinkFallbackProps {\n  actionUrl: string;\n  label?: string;\n  brandColor?: string;\n}\n\nexport function EmailLinkFallback({\n  actionUrl,\n  label = 'Or copy and paste this link into your browser:',\n  brandColor,\n}: EmailLinkFallbackProps) {\n  return (\n    <>\n      <EmailText variant=\"caption\" style={{ margin: '24px 0 8px' }}>\n        {label}\n      </EmailText>\n      <EmailText style={{ margin: 0 }}>\n        {/*\n          Set through `style` rather than CN's `brandColor` prop, which this\n          package's pinned @olwiba/cn does not have yet. CN applies that prop as\n          `color` anyway, and `style` wins over its default, so the result is\n          identical without coupling this file to a release.\n        */}\n        <EmailLink href={actionUrl} style={brandColor ? { color: brandColor } : undefined}>\n          {actionUrl}\n        </EmailLink>\n      </EmailText>\n    </>\n  );\n}\n","import {\n  EmailButton,\n  EmailHeading,\n  EmailText,\n  emailTheme,\n} from '@olwiba/cn/email';\nimport { EmailLayout } from './EmailLayout';\nimport { EmailLinkFallback } from './EmailLinkFallback';\n\nexport interface ActionEmailProps {\n  appName: string;\n  preview: string;\n  heading: string;\n  description: string;\n  actionLabel: string;\n  actionUrl: string;\n  brandColor?: string;\n  showLinkFallback?: boolean;\n}\n\nexport function ActionEmail({\n  appName,\n  preview,\n  heading,\n  description,\n  actionLabel,\n  actionUrl,\n  brandColor = emailTheme.defaultBrandColor,\n  showLinkFallback = true,\n}: ActionEmailProps) {\n  return (\n    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>\n      <EmailHeading>{heading}</EmailHeading>\n      <EmailText variant=\"muted\" style={{ margin: '0 0 24px' }}>\n        {description}\n      </EmailText>\n      <EmailButton href={actionUrl} label={actionLabel} brandColor={brandColor} />\n      {showLinkFallback ? (\n        <EmailLinkFallback actionUrl={actionUrl} brandColor={brandColor} />\n      ) : null}\n    </EmailLayout>\n  );\n}\n","import {\n  EmailHeading,\n  EmailText,\n  emailTheme,\n} from '@olwiba/cn/email';\nimport { EmailLayout } from './EmailLayout';\n\nexport interface NoticeEmailProps {\n  appName: string;\n  preview: string;\n  heading: string;\n  body: string;\n  brandColor?: string;\n}\n\nexport function NoticeEmail({\n  appName,\n  preview,\n  heading,\n  body,\n  brandColor = emailTheme.defaultBrandColor,\n}: NoticeEmailProps) {\n  return (\n    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>\n      <EmailHeading>{heading}</EmailHeading>\n      <EmailText variant=\"muted\" style={{ margin: 0, whiteSpace: 'pre-wrap' }}>\n        {body}\n      </EmailText>\n    </EmailLayout>\n  );\n}\n"]}