@flopay/ui 0.1.0 → 0.3.0

package/README.md

@@ -103,7 +103,8 @@ After that, releases are automatic:
 1. Bump `version` in `package.json` on `main`.
 2. `CI` runs (`.github/workflows/ci.yml`).
 3. On CI success, `Publish Package` (`.github/workflows/publish.yml`) sees the
-   new version has no `v<version>` tag, `npm publish`es via OIDC (with
-   provenance), then pushes the tag.
+   new version has no `v<version>` tag, `npm publish`es via OIDC, then pushes
+   the tag. (No npm provenance: this repo is private, and provenance attestation
+   requires a public source repo.)
 
 CSS files ship raw (no build step); only the JS/types are bundled by tsup.

package/dist/chunk-XF3CK37X.mjs

@@ -0,0 +1,11 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-XF3CK37X.mjs.map

package/dist/chunk-XF3CK37X.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAOjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/index.mjs

@@ -1,9 +1,6 @@
-// src/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+import {
+  cn
+} from "./chunk-XF3CK37X.mjs";
 
 // src/components/badge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cn.ts","../src/components/badge.tsx","../src/components/button.tsx","../src/components/card.tsx","../src/components/container.tsx","../src/components/section.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Render a leading status dot. */\n  dot?: boolean;\n}\n\n/** Pill badge, optionally with a leading status dot. */\nexport function Badge({ dot = false, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={cn('badge', className)} {...props}>\n      {dot ? <span className=\"badge-dot\" /> : null}\n      {children}\n    </span>\n  );\n}\n","import type { ButtonHTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n}\n\nconst variantClass: Record<ButtonVariant, string> = {\n  primary: 'btn-primary',\n  secondary: 'btn-secondary',\n  outline: 'btn-outline',\n};\n\nexport function Button({ variant = 'primary', className, type = 'button', ...props }: ButtonProps) {\n  return <button type={type} className={cn(variantClass[variant], className)} {...props} />;\n}\n","import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type CardProps = HTMLAttributes<HTMLDivElement>;\n\n/** Bordered surface card with hover elevation. */\nexport function Card({ className, ...props }: CardProps) {\n  return <div className={cn('card', className)} {...props} />;\n}\n","import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type ContainerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Centered, max-width content wrapper (var(--max-w)) with horizontal padding. */\nexport function Container({ className, ...props }: ContainerProps) {\n  return <div className={cn('container', className)} {...props} />;\n}\n","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../cn';\n\nexport type SectionProps = HTMLAttributes<HTMLElement>;\n\n/** Vertical page section with max-width and standard padding. */\nexport function Section({ className, ...props }: SectionProps) {\n  return <section className={cn('section', className)} {...props} />;\n}\n\nexport interface SectionHeaderProps {\n  /** Small eyebrow label above the title (brand colored). */\n  label?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  className?: string;\n}\n\n/** Centered section heading: optional label, title, optional description. */\nexport function SectionHeader({ label, title, description, className }: SectionHeaderProps) {\n  return (\n    <div className={cn('section-center', className)}>\n      {label ? <div className=\"section-label\">{label}</div> : null}\n      <h2 className=\"section-title\">{title}</h2>\n      {description ? <p className=\"section-desc\">{description}</p> : null}\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAOjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACCI,SACS,KADT;AAFG,SAAS,MAAM,EAAE,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAe;AAChF,SACE,qBAAC,UAAK,WAAW,GAAG,SAAS,SAAS,GAAI,GAAG,OAC1C;AAAA,UAAM,oBAAC,UAAK,WAAU,aAAY,IAAK;AAAA,IACvC;AAAA,KACH;AAEJ;;;ACAS,gBAAAA,YAAA;AAPT,IAAM,eAA8C;AAAA,EAClD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AACX;AAEO,SAAS,OAAO,EAAE,UAAU,WAAW,WAAW,OAAO,UAAU,GAAG,MAAM,GAAgB;AACjG,SAAO,gBAAAA,KAAC,YAAO,MAAY,WAAW,GAAG,aAAa,OAAO,GAAG,SAAS,GAAI,GAAG,OAAO;AACzF;;;ACVS,gBAAAC,YAAA;AADF,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAc;AACvD,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,GAAG,OAAO;AAC3D;;;ACDS,gBAAAC,YAAA;AADF,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AACjE,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO;AAChE;;;ACDS,gBAAAC,MAcL,QAAAC,aAdK;AADF,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAAiB;AAC7D,SAAO,gBAAAD,KAAC,aAAQ,WAAW,GAAG,WAAW,SAAS,GAAI,GAAG,OAAO;AAClE;AAWO,SAAS,cAAc,EAAE,OAAO,OAAO,aAAa,UAAU,GAAuB;AAC1F,SACE,gBAAAC,MAAC,SAAI,WAAW,GAAG,kBAAkB,SAAS,GAC3C;AAAA,YAAQ,gBAAAD,KAAC,SAAI,WAAU,iBAAiB,iBAAM,IAAS;AAAA,IACxD,gBAAAA,KAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,IACpC,cAAc,gBAAAA,KAAC,OAAE,WAAU,gBAAgB,uBAAY,IAAO;AAAA,KACjE;AAEJ;","names":["jsx","jsx","jsx","jsx","jsxs"]}
+{"version":3,"sources":["../src/components/badge.tsx","../src/components/button.tsx","../src/components/card.tsx","../src/components/container.tsx","../src/components/section.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Render a leading status dot. */\n  dot?: boolean;\n}\n\n/** Pill badge, optionally with a leading status dot. */\nexport function Badge({ dot = false, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={cn('badge', className)} {...props}>\n      {dot ? <span className=\"badge-dot\" /> : null}\n      {children}\n    </span>\n  );\n}\n","import type { ButtonHTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n}\n\nconst variantClass: Record<ButtonVariant, string> = {\n  primary: 'btn-primary',\n  secondary: 'btn-secondary',\n  outline: 'btn-outline',\n};\n\nexport function Button({ variant = 'primary', className, type = 'button', ...props }: ButtonProps) {\n  return <button type={type} className={cn(variantClass[variant], className)} {...props} />;\n}\n","import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type CardProps = HTMLAttributes<HTMLDivElement>;\n\n/** Bordered surface card with hover elevation. */\nexport function Card({ className, ...props }: CardProps) {\n  return <div className={cn('card', className)} {...props} />;\n}\n","import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type ContainerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Centered, max-width content wrapper (var(--max-w)) with horizontal padding. */\nexport function Container({ className, ...props }: ContainerProps) {\n  return <div className={cn('container', className)} {...props} />;\n}\n","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../cn';\n\nexport type SectionProps = HTMLAttributes<HTMLElement>;\n\n/** Vertical page section with max-width and standard padding. */\nexport function Section({ className, ...props }: SectionProps) {\n  return <section className={cn('section', className)} {...props} />;\n}\n\nexport interface SectionHeaderProps {\n  /** Small eyebrow label above the title (brand colored). */\n  label?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  className?: string;\n}\n\n/** Centered section heading: optional label, title, optional description. */\nexport function SectionHeader({ label, title, description, className }: SectionHeaderProps) {\n  return (\n    <div className={cn('section-center', className)}>\n      {label ? <div className=\"section-label\">{label}</div> : null}\n      <h2 className=\"section-title\">{title}</h2>\n      {description ? <p className=\"section-desc\">{description}</p> : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAWI,SACS,KADT;AAFG,SAAS,MAAM,EAAE,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAe;AAChF,SACE,qBAAC,UAAK,WAAW,GAAG,SAAS,SAAS,GAAI,GAAG,OAC1C;AAAA,UAAM,oBAAC,UAAK,WAAU,aAAY,IAAK;AAAA,IACvC;AAAA,KACH;AAEJ;;;ACAS,gBAAAA,YAAA;AAPT,IAAM,eAA8C;AAAA,EAClD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AACX;AAEO,SAAS,OAAO,EAAE,UAAU,WAAW,WAAW,OAAO,UAAU,GAAG,MAAM,GAAgB;AACjG,SAAO,gBAAAA,KAAC,YAAO,MAAY,WAAW,GAAG,aAAa,OAAO,GAAG,SAAS,GAAI,GAAG,OAAO;AACzF;;;ACVS,gBAAAC,YAAA;AADF,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAc;AACvD,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,GAAG,OAAO;AAC3D;;;ACDS,gBAAAC,YAAA;AADF,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AACjE,SAAO,gBAAAA,KAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO;AAChE;;;ACDS,gBAAAC,MAcL,QAAAC,aAdK;AADF,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAAiB;AAC7D,SAAO,gBAAAD,KAAC,aAAQ,WAAW,GAAG,WAAW,SAAS,GAAI,GAAG,OAAO;AAClE;AAWO,SAAS,cAAc,EAAE,OAAO,OAAO,aAAa,UAAU,GAAuB;AAC1F,SACE,gBAAAC,MAAC,SAAI,WAAW,GAAG,kBAAkB,SAAS,GAC3C;AAAA,YAAQ,gBAAAD,KAAC,SAAI,WAAU,iBAAiB,iBAAM,IAAS;AAAA,IACxD,gBAAAA,KAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,IACpC,cAAc,gBAAAA,KAAC,OAAE,WAAU,gBAAgB,uBAAY,IAAO;AAAA,KACjE;AAEJ;","names":["jsx","jsx","jsx","jsx","jsxs"]}

package/dist/marketing/index.cjs

@@ -0,0 +1,122 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/marketing/index.ts
+var marketing_exports = {};
+__export(marketing_exports, {
+  Footer: () => Footer,
+  MarketingLink: () => MarketingLink,
+  Nav: () => Nav
+});
+module.exports = __toCommonJS(marketing_exports);
+
+// src/marketing/footer.tsx
+var import_image = __toESM(require("next/image"), 1);
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/marketing/link.tsx
+var import_link = __toESM(require("next/link"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function MarketingLink({ href, external, className, children }) {
+  const isAbsolute = /^https?:\/\//.test(href) || href.startsWith("//");
+  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);
+  const openExternally = external ?? isAbsolute;
+  if (openExternally) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  if (isProtocol) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, className, children });
+}
+
+// src/marketing/footer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Footer({ brand, columns = [], legal = [], copyright, className }) {
+  const size = brand.size ?? 20;
+  const image = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_image.default, { src: brand.src, alt: brand.alt ?? "", width: size, height: size });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { className: cn("footer", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "footer-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "footer-brand", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(MarketingLink, { href: brand.href ?? "/", className: "nav-logo", children: [
+          brand.mark ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+          brand.label
+        ] }),
+        brand.tagline ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: brand.tagline }) : null
+      ] }),
+      columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "footer-column", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { children: column.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: column.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, link.href)) })
+      ] }, index))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "footer-bottom", children: [
+      copyright ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: copyright }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
+      legal.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "footer-legal", children: legal.map((link) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MarketingLink, { href: link.href, external: link.external, children: link.label }, link.href)) }) : null
+    ] })
+  ] });
+}
+
+// src/marketing/nav.tsx
+var import_image2 = __toESM(require("next/image"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Nav({ logo, links = [], children, className }) {
+  const size = logo.size ?? 28;
+  const image = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_image2.default, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: cn("nav", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nav-inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MarketingLink, { href: logo.href ?? "/", className: "nav-logo", children: [
+      logo.mark ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+      logo.label
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "nav-links", children: [
+      links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        MarketingLink,
+        {
+          href: link.href,
+          external: link.external,
+          className: link.cta ? "nav-cta" : void 0,
+          children: link.label
+        }
+      ) }, link.href)),
+      children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children }) : null
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Footer,
+  MarketingLink,
+  Nav
+});
+//# sourceMappingURL=index.cjs.map

package/dist/marketing/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/marketing/index.ts","../../src/marketing/footer.tsx","../../src/cn.ts","../../src/marketing/link.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["export type { FooterBrand, FooterColumn, FooterLink, FooterProps } from './footer';\nexport { Footer } from './footer';\nexport type { MarketingLinkProps } from './link';\nexport { MarketingLink } from './link';\nexport type { NavLink, NavLogo, NavProps } from './nav';\nexport { Nav } from './nav';\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {column.links.map((link) => (\n                <li key={link.href}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["Link","import_jsx_runtime","Image","import_image","import_jsx_runtime","Image"]}

package/dist/marketing/index.d.cts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ImageProps } from 'next/image';
+
+interface FooterLink {
+    href: string;
+    label: ReactNode;
+    external?: boolean;
+}
+interface FooterColumn {
+    title: ReactNode;
+    links: FooterLink[];
+}
+interface FooterBrand {
+    /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */
+    src: ImageProps['src'];
+    alt?: string;
+    label?: ReactNode;
+    href?: string;
+    size?: number;
+    mark?: boolean;
+    tagline?: ReactNode;
+}
+interface FooterProps {
+    brand: FooterBrand;
+    columns?: FooterColumn[];
+    legal?: FooterLink[];
+    copyright?: ReactNode;
+    className?: string;
+}
+/** Shared site footer for marketing surfaces (landing, demo). */
+declare function Footer({ brand, columns, legal, copyright, className }: FooterProps): react.JSX.Element;
+
+interface MarketingLinkProps {
+    href: string;
+    /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */
+    external?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Picks the right element for a marketing link:
+ * - internal route ("/...", "#...") → next/link
+ * - protocol link (mailto:/tel:) → plain anchor
+ * - absolute URL (or `external`) → new-tab anchor
+ */
+declare function MarketingLink({ href, external, className, children }: MarketingLinkProps): react.JSX.Element;
+
+interface NavLink {
+    href: string;
+    label: ReactNode;
+    external?: boolean;
+    /** Render as the prominent call-to-action button. */
+    cta?: boolean;
+}
+interface NavLogo {
+    /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */
+    src: ImageProps['src'];
+    alt?: string;
+    label?: ReactNode;
+    href?: string;
+    /** Logo image edge size in px (default 28). */
+    size?: number;
+    /** Wrap the image in the rounded brand mark. */
+    mark?: boolean;
+}
+interface NavProps {
+    logo: NavLogo;
+    links?: NavLink[];
+    /** Extra item appended to the link list (e.g. an interactive control). */
+    children?: ReactNode;
+    className?: string;
+}
+/** Shared fixed top navigation for marketing surfaces (landing, demo). */
+declare function Nav({ logo, links, children, className }: NavProps): react.JSX.Element;
+
+export { Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps };

package/dist/marketing/index.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ImageProps } from 'next/image';
+
+interface FooterLink {
+    href: string;
+    label: ReactNode;
+    external?: boolean;
+}
+interface FooterColumn {
+    title: ReactNode;
+    links: FooterLink[];
+}
+interface FooterBrand {
+    /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */
+    src: ImageProps['src'];
+    alt?: string;
+    label?: ReactNode;
+    href?: string;
+    size?: number;
+    mark?: boolean;
+    tagline?: ReactNode;
+}
+interface FooterProps {
+    brand: FooterBrand;
+    columns?: FooterColumn[];
+    legal?: FooterLink[];
+    copyright?: ReactNode;
+    className?: string;
+}
+/** Shared site footer for marketing surfaces (landing, demo). */
+declare function Footer({ brand, columns, legal, copyright, className }: FooterProps): react.JSX.Element;
+
+interface MarketingLinkProps {
+    href: string;
+    /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */
+    external?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Picks the right element for a marketing link:
+ * - internal route ("/...", "#...") → next/link
+ * - protocol link (mailto:/tel:) → plain anchor
+ * - absolute URL (or `external`) → new-tab anchor
+ */
+declare function MarketingLink({ href, external, className, children }: MarketingLinkProps): react.JSX.Element;
+
+interface NavLink {
+    href: string;
+    label: ReactNode;
+    external?: boolean;
+    /** Render as the prominent call-to-action button. */
+    cta?: boolean;
+}
+interface NavLogo {
+    /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */
+    src: ImageProps['src'];
+    alt?: string;
+    label?: ReactNode;
+    href?: string;
+    /** Logo image edge size in px (default 28). */
+    size?: number;
+    /** Wrap the image in the rounded brand mark. */
+    mark?: boolean;
+}
+interface NavProps {
+    logo: NavLogo;
+    links?: NavLink[];
+    /** Extra item appended to the link list (e.g. an interactive control). */
+    children?: ReactNode;
+    className?: string;
+}
+/** Shared fixed top navigation for marketing surfaces (landing, demo). */
+declare function Nav({ logo, links, children, className }: NavProps): react.JSX.Element;
+
+export { Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps };

package/dist/marketing/index.mjs

@@ -0,0 +1,80 @@
+import {
+  cn
+} from "../chunk-XF3CK37X.mjs";
+
+// src/marketing/footer.tsx
+import Image from "next/image";
+
+// src/marketing/link.tsx
+import Link from "next/link";
+import { jsx } from "react/jsx-runtime";
+function MarketingLink({ href, external, className, children }) {
+  const isAbsolute = /^https?:\/\//.test(href) || href.startsWith("//");
+  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);
+  const openExternally = external ?? isAbsolute;
+  if (openExternally) {
+    return /* @__PURE__ */ jsx("a", { href, className, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  if (isProtocol) {
+    return /* @__PURE__ */ jsx("a", { href, className, children });
+  }
+  return /* @__PURE__ */ jsx(Link, { href, className, children });
+}
+
+// src/marketing/footer.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Footer({ brand, columns = [], legal = [], copyright, className }) {
+  const size = brand.size ?? 20;
+  const image = /* @__PURE__ */ jsx2(Image, { src: brand.src, alt: brand.alt ?? "", width: size, height: size });
+  return /* @__PURE__ */ jsxs("footer", { className: cn("footer", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "footer-inner", children: [
+      /* @__PURE__ */ jsxs("div", { className: "footer-brand", children: [
+        /* @__PURE__ */ jsxs(MarketingLink, { href: brand.href ?? "/", className: "nav-logo", children: [
+          brand.mark ? /* @__PURE__ */ jsx2("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+          brand.label
+        ] }),
+        brand.tagline ? /* @__PURE__ */ jsx2("p", { children: brand.tagline }) : null
+      ] }),
+      columns.map((column, index) => /* @__PURE__ */ jsxs("div", { className: "footer-column", children: [
+        /* @__PURE__ */ jsx2("h4", { children: column.title }),
+        /* @__PURE__ */ jsx2("ul", { children: column.links.map((link) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, link.href)) })
+      ] }, index))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "footer-bottom", children: [
+      copyright ? /* @__PURE__ */ jsx2("p", { children: copyright }) : /* @__PURE__ */ jsx2("span", {}),
+      legal.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "footer-legal", children: legal.map((link) => /* @__PURE__ */ jsx2(MarketingLink, { href: link.href, external: link.external, children: link.label }, link.href)) }) : null
+    ] })
+  ] });
+}
+
+// src/marketing/nav.tsx
+import Image2 from "next/image";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Nav({ logo, links = [], children, className }) {
+  const size = logo.size ?? 28;
+  const image = /* @__PURE__ */ jsx3(Image2, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
+  return /* @__PURE__ */ jsx3("nav", { className: cn("nav", className), children: /* @__PURE__ */ jsxs2("div", { className: "nav-inner", children: [
+    /* @__PURE__ */ jsxs2(MarketingLink, { href: logo.href ?? "/", className: "nav-logo", children: [
+      logo.mark ? /* @__PURE__ */ jsx3("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+      logo.label
+    ] }),
+    /* @__PURE__ */ jsxs2("ul", { className: "nav-links", children: [
+      links.map((link) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+        MarketingLink,
+        {
+          href: link.href,
+          external: link.external,
+          className: link.cta ? "nav-cta" : void 0,
+          children: link.label
+        }
+      ) }, link.href)),
+      children ? /* @__PURE__ */ jsx3("li", { children }) : null
+    ] })
+  ] }) });
+}
+export {
+  Footer,
+  MarketingLink,
+  Nav
+};
+//# sourceMappingURL=index.mjs.map

package/dist/marketing/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/marketing/footer.tsx","../../src/marketing/link.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {column.links.map((link) => (\n                <li key={link.href}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["jsx","Image","jsx","jsxs","Image"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flopay/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "packageManager": "pnpm@9.15.0",
   "description": "FloPay shared design system — design tokens, a Tailwind v4 preset, and React primitives shared across landing, demo, docs, and dashboard.",
@@ -22,12 +22,18 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./marketing": {
+      "types": "./dist/marketing/index.d.ts",
+      "import": "./dist/marketing/index.mjs",
+      "require": "./dist/marketing/index.cjs"
+    },
     "./styles": "./styles/index.css",
     "./styles/index.css": "./styles/index.css",
     "./styles/tokens.css": "./styles/tokens.css",
     "./styles/reset.css": "./styles/reset.css",
     "./styles/components.css": "./styles/components.css",
     "./styles/preset.css": "./styles/preset.css",
+    "./logo.png": "./assets/logo.png",
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
@@ -35,7 +41,8 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "styles"
+    "styles",
+    "assets"
   ],
   "scripts": {
     "build": "tsup",
@@ -47,9 +54,15 @@
     "prepublishOnly": "node scripts/check-publish-registry.cjs"
   },
   "peerDependencies": {
+    "next": ">=15",
     "react": "^19",
     "react-dom": "^19"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
@@ -58,6 +71,7 @@
     "@biomejs/biome": "^2.4.15",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
+    "next": "^16.2.6",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "tsup": "^8.3.0",

package/styles/tokens.css

@@ -35,6 +35,11 @@
   --brand-light: #4ba6ec;
   --brand-secondary: #38d299;
 
+  /* Brand as raw HSL channels — for consumers that need `H S% L%`
+     (e.g. Fumadocs `--fd-primary`). Mirror --brand / --brand-light. */
+  --brand-hsl: 207 81% 48%;
+  --brand-light-hsl: 206 81% 61%;
+
   /* Status */
   --success: #16a34a;
   --danger: #dc2626;