@flopay/ui 0.1.0

package/README.md

@@ -0,0 +1,109 @@
+# @flopay/ui
+
+The shared FloPay design system — the single source of truth for design tokens,
+a Tailwind v4 theme preset, and a small set of React primitives. Consumed by
+`landing`, `demo`, `docs`, and `dashboard`.
+
+It is **framework-agnostic at the token layer**: the same CSS custom properties
+drive both the plain-CSS apps (landing, demo) and the Tailwind v4 apps (docs,
+dashboard). Change a token once here and every app inherits it.
+
+## Install
+
+```bash
+pnpm add @flopay/ui
+```
+
+`react` and `react-dom` (`^19`) are peer dependencies (only needed if you import
+the React components).
+
+## Usage
+
+### 1. Plain-CSS apps (landing, demo)
+
+Import everything (reset + tokens + shared component classes) at the top of your
+global stylesheet:
+
+```css
+/* app/globals.css */
+@import "@flopay/ui/styles";
+
+/* ...your page-specific CSS, using var(--brand), var(--text), etc. */
+```
+
+Or cherry-pick:
+
+```css
+@import "@flopay/ui/styles/tokens.css";      /* :root design tokens only */
+@import "@flopay/ui/styles/reset.css";
+@import "@flopay/ui/styles/components.css";   /* .btn-primary, .nav, .footer, .card ... */
+```
+
+### 2. Tailwind v4 apps (docs, dashboard)
+
+Add the preset after Tailwind. It registers the tokens as theme values, so
+utilities like `bg-brand`, `text-text-secondary`, `border-border`, and
+`font-sans` resolve to the shared tokens:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@flopay/ui/styles/preset.css";
+```
+
+```tsx
+<button className="bg-brand text-bg-card rounded-lg px-6 py-3">Get started</button>
+```
+
+The preset uses `@theme inline`, so the `.dark` overrides in `tokens.css` apply
+at runtime without recompiling.
+
+### 3. React primitives
+
+```tsx
+import { Button, Container, Section, SectionHeader, Badge, Card, cn } from "@flopay/ui";
+
+<Container>
+  <Badge dot>Live</Badge>
+  <SectionHeader label="Pricing" title="Simple, usage-based" description="No surprises." />
+  <Card className={cn("p-10")}>…</Card>
+  <Button variant="primary">Start building</Button>
+</Container>;
+```
+
+The primitives render the shared component classes, so they work in plain-CSS
+apps (which import `components.css`) and in Tailwind apps (where you can extend
+them via `className` + `cn()`).
+
+## Design tokens
+
+`styles/tokens.css` defines surfaces, borders, text, accent, **brand
+(`--brand: #1785e0`)**, status colors, radius, layout (`--max-w`, `--nav-h`),
+and typography. A `.dark` block provides a dark-theme starting point.
+
+## Develop
+
+```bash
+pnpm install
+pnpm dev         # tsup --watch
+pnpm build       # emits dist/ (esm + cjs + d.ts); CSS in styles/ ships as-is
+pnpm typecheck
+pnpm biome:fix
+```
+
+## Release
+
+Publishing uses **npm trusted publishing (GitHub OIDC)** — the same mechanism as
+the `@flopay/*` SDK packages, so **no `NPM_TOKEN` is required**. One-time setup:
+register this repo + the `publish.yml` workflow as a trusted publisher for
+`@flopay/ui` on npmjs.org (npm package → Settings → Trusted publishers).
+
+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.
+
+CSS files ship raw (no build step); only the JS/types are bundled by tsup.

package/dist/index.cjs

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Container: () => Container,
+  Section: () => Section,
+  SectionHeader: () => SectionHeader,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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/components/badge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Badge({ dot = false, className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: cn("badge", className), ...props, children: [
+    dot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "badge-dot" }) : null,
+    children
+  ] });
+}
+
+// src/components/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantClass = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  outline: "btn-outline"
+};
+function Button({ variant = "primary", className, type = "button", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type, className: cn(variantClass[variant], className), ...props });
+}
+
+// src/components/card.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("card", className), ...props });
+}
+
+// src/components/container.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Container({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("container", className), ...props });
+}
+
+// src/components/section.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Section({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { className: cn("section", className), ...props });
+}
+function SectionHeader({ label, title, description, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("section-center", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "section-label", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "section-title", children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "section-desc", children: description }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Card,
+  Container,
+  Section,
+  SectionHeader,
+  cn
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/cn.ts","../src/components/badge.tsx","../src/components/button.tsx","../src/components/card.tsx","../src/components/container.tsx","../src/components/section.tsx"],"sourcesContent":["export { cn } from './cn';\nexport type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps, ButtonVariant } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { ContainerProps } from './components/container';\nexport { Container } from './components/container';\nexport type { SectionHeaderProps, SectionProps } from './components/section';\nexport { Section, SectionHeader } from './components/section';\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 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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAOjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACCI;AAFG,SAAS,MAAM,EAAE,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAe;AAChF,SACE,6CAAC,UAAK,WAAW,GAAG,SAAS,SAAS,GAAI,GAAG,OAC1C;AAAA,UAAM,4CAAC,UAAK,WAAU,aAAY,IAAK;AAAA,IACvC;AAAA,KACH;AAEJ;;;ACAS,IAAAA,sBAAA;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,6CAAC,YAAO,MAAY,WAAW,GAAG,aAAa,OAAO,GAAG,SAAS,GAAI,GAAG,OAAO;AACzF;;;ACVS,IAAAC,sBAAA;AADF,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAc;AACvD,SAAO,6CAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,GAAG,OAAO;AAC3D;;;ACDS,IAAAC,sBAAA;AADF,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AACjE,SAAO,6CAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO;AAChE;;;ACDS,IAAAC,sBAAA;AADF,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAAiB;AAC7D,SAAO,6CAAC,aAAQ,WAAW,GAAG,WAAW,SAAS,GAAI,GAAG,OAAO;AAClE;AAWO,SAAS,cAAc,EAAE,OAAO,OAAO,aAAa,UAAU,GAAuB;AAC1F,SACE,8CAAC,SAAI,WAAW,GAAG,kBAAkB,SAAS,GAC3C;AAAA,YAAQ,6CAAC,SAAI,WAAU,iBAAiB,iBAAM,IAAS;AAAA,IACxD,6CAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,IACpC,cAAc,6CAAC,OAAE,WAAU,gBAAgB,uBAAY,IAAO;AAAA,KACjE;AAEJ;","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,46 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Merge class names, resolving conflicting Tailwind utilities (last wins).
+ * Mirrors the helper used across the FloPay frontends so consumers can extend
+ * any primitive's classes safely.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Render a leading status dot. */
+    dot?: boolean;
+}
+/** Pill badge, optionally with a leading status dot. */
+declare function Badge({ dot, className, children, ...props }: BadgeProps): react.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+}
+declare function Button({ variant, className, type, ...props }: ButtonProps): react.JSX.Element;
+
+type CardProps = HTMLAttributes<HTMLDivElement>;
+/** Bordered surface card with hover elevation. */
+declare function Card({ className, ...props }: CardProps): react.JSX.Element;
+
+type ContainerProps = HTMLAttributes<HTMLDivElement>;
+/** Centered, max-width content wrapper (var(--max-w)) with horizontal padding. */
+declare function Container({ className, ...props }: ContainerProps): react.JSX.Element;
+
+type SectionProps = HTMLAttributes<HTMLElement>;
+/** Vertical page section with max-width and standard padding. */
+declare function Section({ className, ...props }: SectionProps): react.JSX.Element;
+interface SectionHeaderProps {
+    /** Small eyebrow label above the title (brand colored). */
+    label?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+/** Centered section heading: optional label, title, optional description. */
+declare function SectionHeader({ label, title, description, className }: SectionHeaderProps): react.JSX.Element;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Container, type ContainerProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, cn };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Merge class names, resolving conflicting Tailwind utilities (last wins).
+ * Mirrors the helper used across the FloPay frontends so consumers can extend
+ * any primitive's classes safely.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Render a leading status dot. */
+    dot?: boolean;
+}
+/** Pill badge, optionally with a leading status dot. */
+declare function Badge({ dot, className, children, ...props }: BadgeProps): react.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+}
+declare function Button({ variant, className, type, ...props }: ButtonProps): react.JSX.Element;
+
+type CardProps = HTMLAttributes<HTMLDivElement>;
+/** Bordered surface card with hover elevation. */
+declare function Card({ className, ...props }: CardProps): react.JSX.Element;
+
+type ContainerProps = HTMLAttributes<HTMLDivElement>;
+/** Centered, max-width content wrapper (var(--max-w)) with horizontal padding. */
+declare function Container({ className, ...props }: ContainerProps): react.JSX.Element;
+
+type SectionProps = HTMLAttributes<HTMLElement>;
+/** Vertical page section with max-width and standard padding. */
+declare function Section({ className, ...props }: SectionProps): react.JSX.Element;
+interface SectionHeaderProps {
+    /** Small eyebrow label above the title (brand colored). */
+    label?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+/** Centered section heading: optional label, title, optional description. */
+declare function SectionHeader({ label, title, description, className }: SectionHeaderProps): react.JSX.Element;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Container, type ContainerProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, cn };

package/dist/index.mjs

@@ -0,0 +1,61 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Badge({ dot = false, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("badge", className), ...props, children: [
+    dot ? /* @__PURE__ */ jsx("span", { className: "badge-dot" }) : null,
+    children
+  ] });
+}
+
+// src/components/button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variantClass = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  outline: "btn-outline"
+};
+function Button({ variant = "primary", className, type = "button", ...props }) {
+  return /* @__PURE__ */ jsx2("button", { type, className: cn(variantClass[variant], className), ...props });
+}
+
+// src/components/card.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx3("div", { className: cn("card", className), ...props });
+}
+
+// src/components/container.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Container({ className, ...props }) {
+  return /* @__PURE__ */ jsx4("div", { className: cn("container", className), ...props });
+}
+
+// src/components/section.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Section({ className, ...props }) {
+  return /* @__PURE__ */ jsx5("section", { className: cn("section", className), ...props });
+}
+function SectionHeader({ label, title, description, className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("section-center", className), children: [
+    label ? /* @__PURE__ */ jsx5("div", { className: "section-label", children: label }) : null,
+    /* @__PURE__ */ jsx5("h2", { className: "section-title", children: title }),
+    description ? /* @__PURE__ */ jsx5("p", { className: "section-desc", children: description }) : null
+  ] });
+}
+export {
+  Badge,
+  Button,
+  Card,
+  Container,
+  Section,
+  SectionHeader,
+  cn
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@flopay/ui",
+  "version": "0.1.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.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TeamFloPay/ui.git"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/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",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "biome": "biome check",
+    "biome:fix": "biome check --write",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "node scripts/check-publish-registry.cjs"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.15",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tsup": "^8.3.0",
+    "typescript": "^6.0.3"
+  }
+}

package/styles/components.css

@@ -0,0 +1,336 @@
+/* @flopay/ui — shared component classes.
+ *
+ * Plain-CSS apps import this alongside tokens (or just `@flopay/ui/styles`).
+ * Tailwind apps generally compose utilities from preset.css instead and need
+ * not import this file. These classes back the React primitives exported from
+ * the package root and depend on tokens.css custom properties. */
+
+/* ── Layout ── */
+.container {
+  width: 100%;
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section {
+  padding: 120px 24px;
+  max-width: var(--max-w);
+  margin: 0 auto;
+}
+
+.section-center {
+  text-align: center;
+  margin-bottom: 64px;
+}
+
+.section-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--brand);
+  letter-spacing: 0.02em;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: clamp(28px, 3.5vw, 40px);
+  font-weight: 650;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin-bottom: 16px;
+  color: var(--text);
+}
+
+.section-desc {
+  font-size: 17px;
+  color: var(--text-secondary);
+  max-width: 540px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* ── Buttons ── */
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 24px;
+  background: var(--accent);
+  color: #fff;
+  font-family: var(--font);
+  font-weight: 500;
+  font-size: 15px;
+  border-radius: var(--radius);
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 24px;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-weight: 500;
+  font-size: 15px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-secondary:hover {
+  background: var(--bg-subtle);
+  border-color: var(--border-hover);
+}
+
+.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 24px;
+  background: transparent;
+  color: var(--text);
+  font-family: var(--font);
+  font-weight: 500;
+  font-size: 15px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-outline:hover {
+  background: var(--bg-subtle);
+  border-color: var(--border-hover);
+}
+
+/* ── Badge ── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 100px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  flex-shrink: 0;
+}
+
+/* ── Card ── */
+.card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+}
+
+/* ── Nav (shared chrome) ── */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: var(--nav-h);
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.nav-inner {
+  max-width: var(--max-w);
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-logo {
+  font-weight: 600;
+  font-size: 1.1rem;
+  letter-spacing: -0.02em;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text);
+}
+
+.nav-logo-mark {
+  width: 24px;
+  height: 24px;
+  background: var(--brand);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.nav-logo-mark img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  list-style: none;
+}
+
+.nav-links a {
+  font-size: 14px;
+  color: var(--text-secondary);
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.nav-links a:hover {
+  color: var(--text);
+  background: var(--bg-subtle);
+}
+
+.nav-cta {
+  background: var(--accent) !important;
+  color: #fff !important;
+  font-weight: 500;
+  padding: 6px 16px !important;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: background 0.15s !important;
+}
+
+.nav-cta:hover {
+  background: var(--accent-hover) !important;
+}
+
+/* ── Footer (shared chrome) ── */
+.footer {
+  border-top: 1px solid var(--border-light);
+  padding: 56px 24px 40px;
+}
+
+.footer-inner {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 48px;
+}
+
+.footer-brand p {
+  font-size: 14px;
+  color: var(--text-tertiary);
+  max-width: 260px;
+  margin-top: 12px;
+  line-height: 1.5;
+}
+
+.footer-column h4 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 16px;
+}
+
+.footer-column ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-column a {
+  font-size: 14px;
+  color: var(--text-tertiary);
+  transition: color 0.15s;
+}
+
+.footer-column a:hover {
+  color: var(--text);
+}
+
+.footer-bottom {
+  max-width: var(--max-w);
+  margin: 40px auto 0;
+  padding-top: 24px;
+  border-top: 1px solid var(--border-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-bottom p {
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+.footer-legal {
+  display: flex;
+  gap: 20px;
+}
+
+.footer-legal a {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  transition: color 0.15s;
+}
+
+.footer-legal a:hover {
+  color: var(--text);
+}
+
+@media (max-width: 1024px) {
+  .footer-inner {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-inner {
+    padding: 0 16px;
+  }
+  .section {
+    padding: 80px 16px;
+  }
+  .footer {
+    padding: 40px 16px 32px;
+  }
+  .footer-inner {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+  .footer-bottom {
+    flex-direction: column;
+    gap: 12px;
+  }
+}

package/styles/index.css

@@ -0,0 +1,12 @@
+/* @flopay/ui — one-stop stylesheet for plain-CSS apps (landing, demo).
+ *
+ * Usage in app/globals.css:
+ *   @import "@flopay/ui/styles";
+ *
+ * Brings in the reset, design tokens, and shared component classes. Apps add
+ * their own page-specific CSS after this import. Tailwind apps should import
+ * `@flopay/ui/styles/preset.css` instead (see that file). */
+
+@import './tokens.css';
+@import './reset.css';
+@import './components.css';

package/styles/preset.css

@@ -0,0 +1,52 @@
+/* @flopay/ui — Tailwind v4 theme preset.
+ *
+ * Usage in a consumer's global stylesheet (e.g. app/globals.css):
+ *
+ *   @import "tailwindcss";
+ *   @import "@flopay/ui/styles/preset.css";
+ *
+ * This exposes the design tokens as Tailwind theme values, so utilities like
+ * `bg-bg`, `text-text-secondary`, `bg-brand`, and `font-sans` resolve to the
+ * shared tokens. `@theme inline` keeps the generated utilities pointing at the
+ * live `var(--token)` references, so the `.dark` overrides in tokens.css apply
+ * at runtime without recompiling. */
+
+@import './tokens.css';
+
+@theme inline {
+  /* Surfaces */
+  --color-bg: var(--bg);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-bg-muted: var(--bg-muted);
+  --color-bg-card: var(--bg-card);
+  --color-bg-elevated: var(--bg-elevated);
+  --color-bg-hover: var(--bg-hover);
+
+  /* Borders */
+  --color-border: var(--border);
+  --color-border-light: var(--border-light);
+  --color-border-hover: var(--border-hover);
+
+  /* Text */
+  --color-text: var(--text);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+
+  /* Accent */
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+
+  /* Brand */
+  --color-brand: var(--brand);
+  --color-brand-light: var(--brand-light);
+  --color-brand-secondary: var(--brand-secondary);
+
+  /* Status */
+  --color-success: var(--success);
+  --color-danger: var(--danger);
+  --color-warning: var(--warning);
+
+  /* Typography */
+  --font-sans: var(--font);
+  --font-mono: var(--font-mono);
+}

package/styles/reset.css

@@ -0,0 +1,30 @@
+/* @flopay/ui — base reset + document defaults.
+ * Depends on tokens.css custom properties. */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/styles/tokens.css

@@ -0,0 +1,76 @@
+/* @flopay/ui — design tokens (single source of truth)
+ *
+ * Framework-agnostic CSS custom properties. Imported directly by plain-CSS
+ * apps (landing, demo) and re-exposed as Tailwind v4 theme values by preset.css
+ * (docs, dashboard). Change a value here and every app inherits it.
+ *
+ * Reconciled superset of the previous landing + demo token sets.
+ * Canonical brand is FloPay blue (#1785e0).
+ */
+:root {
+  /* Surfaces */
+  --bg: #ffffff;
+  --bg-subtle: #f7f7f8;
+  --bg-muted: #f0f0f2;
+  --bg-card: #ffffff;
+  --bg-elevated: #f5f5f5;
+  --bg-hover: #ebebeb;
+
+  /* Borders */
+  --border: #e5e5e8;
+  --border-light: #ededf0;
+  --border-hover: #d4d4d4;
+
+  /* Text */
+  --text: #0a0a0b;
+  --text-secondary: #52525b;
+  --text-tertiary: #a1a1aa;
+
+  /* Accent — neutral near-black, used for primary actions */
+  --accent: #0a0a0b;
+  --accent-hover: #27272a;
+
+  /* Brand */
+  --brand: #1785e0;
+  --brand-light: #4ba6ec;
+  --brand-secondary: #38d299;
+
+  /* Status */
+  --success: #16a34a;
+  --danger: #dc2626;
+  --warning: #f5a623;
+
+  /* Radius */
+  --radius: 8px;
+  --radius-lg: 12px;
+
+  /* Layout */
+  --max-w: 1100px;
+  --nav-h: 64px;
+
+  /* Typography */
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+/* Dark theme — starting point; refine per app. Activated via a `.dark` class on
+ * a root element (matches the next-themes / Fumadocs convention used by docs). */
+.dark {
+  --bg: #0a0a0b;
+  --bg-subtle: #141416;
+  --bg-muted: #1c1c1f;
+  --bg-card: #141416;
+  --bg-elevated: #1c1c1f;
+  --bg-hover: #232327;
+
+  --border: #27272a;
+  --border-light: #1f1f23;
+  --border-hover: #3f3f46;
+
+  --text: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+
+  --accent: #fafafa;
+  --accent-hover: #e4e4e7;
+}