@flopay/ui 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as react from 'react';
-import { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 
 /**
  * Merge class names, resolving conflicting Tailwind utilities (last wins).
@@ -9,27 +9,73 @@ import { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
  */
 declare function cn(...inputs: ClassValue[]): string;
 
+type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** Render a leading status dot. */
     dot?: boolean;
+    /** Semantic color. `neutral` is the default outlined pill. */
+    variant?: BadgeVariant;
 }
-/** Pill badge, optionally with a leading status dot. */
-declare function Badge({ dot, className, children, ...props }: BadgeProps): react.JSX.Element;
+/** Pill badge — neutral by default, or a semantic variant, optionally with a dot. */
+declare function Badge({ dot, variant, className, children, ...props }: BadgeProps): react.JSX.Element;
 
 type ButtonVariant = 'primary' | 'secondary' | 'outline';
+type ButtonSize = 'md' | 'sm';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    size?: ButtonSize;
 }
-declare function Button({ variant, className, type, ...props }: ButtonProps): react.JSX.Element;
+declare function Button({ variant, size, 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 CardPadding = 'none' | 'sm' | 'md' | 'lg';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Inner padding. Defaults to `md` (28px); use `none` to supply your own. */
+    padding?: CardPadding;
+    /** Add pointer cursor + hover elevation (for clickable cards). */
+    interactive?: boolean;
+}
+/** Bordered surface card. Static by default; opt into hover with `interactive`. */
+declare function Card({ padding, interactive, 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;
 
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Wrap in a centered, padded block (for loading states in a panel). */
+    center?: boolean;
+}
+/** Brand-colored loading spinner. */
+declare function Spinner({ center, className, ...props }: SpinnerProps): react.JSX.Element;
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Optional icon rendered in the circular badge above the title. */
+    icon?: ReactNode;
+    className?: string;
+}
+/** Centered "nothing here yet" placeholder for empty lists/tables. */
+declare function EmptyState({ title, description, icon, className }: EmptyStateProps): react.JSX.Element;
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+/** Token-aligned text input (the `.field` look: border, surface, brand focus ring). */
+declare function Input({ className, ...props }: InputProps): react.JSX.Element;
+type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
+interface FieldProps {
+    label?: ReactNode;
+    /** Helper text shown below the control (hidden when `error` is set). */
+    hint?: ReactNode;
+    /** Error text shown below the control (takes precedence over `hint`). */
+    error?: ReactNode;
+    /** `htmlFor` for the label, matching the control's id. */
+    htmlFor?: string;
+    className?: string;
+    children: ReactNode;
+}
+/** Labelled field wrapper: optional label above and hint/error below the control. */
+declare function Field({ label, hint, error, htmlFor, className, children }: FieldProps): 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;
@@ -43,4 +89,4 @@ interface SectionHeaderProps {
 /** 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 };
+export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, Container, type ContainerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Input, type InputProps, Label, type LabelProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, Spinner, type SpinnerProps, cn };

package/dist/index.mjs

@@ -4,8 +4,21 @@ import {
 
 // 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: [
+var variantClass = {
+  neutral: "",
+  success: "badge-success",
+  warning: "badge-warning",
+  danger: "badge-danger",
+  info: "badge-info"
+};
+function Badge({
+  dot = false,
+  variant = "neutral",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("badge", variantClass[variant], className), ...props, children: [
     dot ? /* @__PURE__ */ jsx("span", { className: "badge-dot" }) : null,
     children
   ] });
@@ -13,19 +26,43 @@ function Badge({ dot = false, className, children, ...props }) {
 
 // src/components/button.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var variantClass = {
+var variantClass2 = {
   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 });
+function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type,
+      className: cn(variantClass2[variant], size === "sm" && "btn-sm", 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 });
+function Card({ padding = "md", interactive = false, className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "card",
+        padding !== "none" && `card-pad-${padding}`,
+        interactive && "card-interactive",
+        className
+      ),
+      ...props
+    }
+  );
 }
 
 // src/components/container.tsx
@@ -34,16 +71,46 @@ function Container({ className, ...props }) {
   return /* @__PURE__ */ jsx4("div", { className: cn("container", className), ...props });
 }
 
-// src/components/section.tsx
+// src/components/feedback.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Spinner({ center = false, className, ...props }) {
+  const spinner = /* @__PURE__ */ jsx5("span", { className: cn("spinner", className), role: "status", "aria-label": "Loading", ...props });
+  return center ? /* @__PURE__ */ jsx5("div", { className: "spinner-center", children: spinner }) : spinner;
+}
+function EmptyState({ title, description, icon, className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("empty-state", className), children: [
+    icon ? /* @__PURE__ */ jsx5("div", { className: "empty-state-icon", children: icon }) : null,
+    /* @__PURE__ */ jsx5("h3", { className: "empty-state-title", children: title }),
+    description ? /* @__PURE__ */ jsx5("p", { className: "empty-state-desc", children: description }) : null
+  ] });
+}
+
+// src/components/field.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Input({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("input", { className: cn("field", className), ...props });
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("label", { className: cn("field-label", className), ...props });
+}
+function Field({ label, hint, error, htmlFor, className, children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("field-group", className), children: [
+    label ? /* @__PURE__ */ jsx6(Label, { htmlFor, children: label }) : null,
+    children,
+    error ? /* @__PURE__ */ jsx6("span", { className: "field-error", children: error }) : hint ? /* @__PURE__ */ jsx6("span", { className: "field-hint", children: hint }) : null
+  ] });
+}
+
+// src/components/section.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function Section({ className, ...props }) {
-  return /* @__PURE__ */ jsx5("section", { className: cn("section", className), ...props });
+  return /* @__PURE__ */ jsx7("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
+  return /* @__PURE__ */ jsxs4("div", { className: cn("section-center", className), children: [
+    label ? /* @__PURE__ */ jsx7("div", { className: "section-label", children: label }) : null,
+    /* @__PURE__ */ jsx7("h2", { className: "section-title", children: title }),
+    description ? /* @__PURE__ */ jsx7("p", { className: "section-desc", children: description }) : null
   ] });
 }
 export {
@@ -51,8 +118,13 @@ export {
   Button,
   Card,
   Container,
+  EmptyState,
+  Field,
+  Input,
+  Label,
   Section,
   SectionHeader,
+  Spinner,
   cn
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/components/badge.tsx","../src/components/button.tsx","../src/components/card.tsx","../src/components/container.tsx","../src/components/feedback.tsx","../src/components/field.tsx","../src/components/section.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Render a leading status dot. */\n  dot?: boolean;\n  /** Semantic color. `neutral` is the default outlined pill. */\n  variant?: BadgeVariant;\n}\n\nconst variantClass: Record<BadgeVariant, string> = {\n  neutral: '',\n  success: 'badge-success',\n  warning: 'badge-warning',\n  danger: 'badge-danger',\n  info: 'badge-info',\n};\n\n/** Pill badge — neutral by default, or a semantic variant, optionally with a dot. */\nexport function Badge({\n  dot = false,\n  variant = 'neutral',\n  className,\n  children,\n  ...props\n}: BadgeProps) {\n  return (\n    <span className={cn('badge', variantClass[variant], 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';\nexport type ButtonSize = 'md' | 'sm';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClass: Record<ButtonVariant, string> = {\n  primary: 'btn-primary',\n  secondary: 'btn-secondary',\n  outline: 'btn-outline',\n};\n\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  className,\n  type = 'button',\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      type={type}\n      className={cn(variantClass[variant], size === 'sm' && 'btn-sm', className)}\n      {...props}\n    />\n  );\n}\n","import type { HTMLAttributes } from 'react';\nimport { cn } from '../cn';\n\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Inner padding. Defaults to `md` (28px); use `none` to supply your own. */\n  padding?: CardPadding;\n  /** Add pointer cursor + hover elevation (for clickable cards). */\n  interactive?: boolean;\n}\n\n/** Bordered surface card. Static by default; opt into hover with `interactive`. */\nexport function Card({ padding = 'md', interactive = false, className, ...props }: CardProps) {\n  return (\n    <div\n      className={cn(\n        'card',\n        padding !== 'none' && `card-pad-${padding}`,\n        interactive && 'card-interactive',\n        className,\n      )}\n      {...props}\n    />\n  );\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 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Wrap in a centered, padded block (for loading states in a panel). */\n  center?: boolean;\n}\n\n/** Brand-colored loading spinner. */\nexport function Spinner({ center = false, className, ...props }: SpinnerProps) {\n  const spinner = (\n    <span className={cn('spinner', className)} role=\"status\" aria-label=\"Loading\" {...props} />\n  );\n  return center ? <div className=\"spinner-center\">{spinner}</div> : spinner;\n}\n\nexport interface EmptyStateProps {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Optional icon rendered in the circular badge above the title. */\n  icon?: ReactNode;\n  className?: string;\n}\n\n/** Centered \"nothing here yet\" placeholder for empty lists/tables. */\nexport function EmptyState({ title, description, icon, className }: EmptyStateProps) {\n  return (\n    <div className={cn('empty-state', className)}>\n      {icon ? <div className=\"empty-state-icon\">{icon}</div> : null}\n      <h3 className=\"empty-state-title\">{title}</h3>\n      {description ? <p className=\"empty-state-desc\">{description}</p> : null}\n    </div>\n  );\n}\n","import type { InputHTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../cn';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement>;\n\n/** Token-aligned text input (the `.field` look: border, surface, brand focus ring). */\nexport function Input({ className, ...props }: InputProps) {\n  return <input className={cn('field', className)} {...props} />;\n}\n\nexport type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;\n\nexport function Label({ className, ...props }: LabelProps) {\n  return <label className={cn('field-label', className)} {...props} />;\n}\n\nexport interface FieldProps {\n  label?: ReactNode;\n  /** Helper text shown below the control (hidden when `error` is set). */\n  hint?: ReactNode;\n  /** Error text shown below the control (takes precedence over `hint`). */\n  error?: ReactNode;\n  /** `htmlFor` for the label, matching the control's id. */\n  htmlFor?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** Labelled field wrapper: optional label above and hint/error below the control. */\nexport function Field({ label, hint, error, htmlFor, className, children }: FieldProps) {\n  return (\n    <div className={cn('field-group', className)}>\n      {label ? <Label htmlFor={htmlFor}>{label}</Label> : null}\n      {children}\n      {error ? (\n        <span className=\"field-error\">{error}</span>\n      ) : hint ? (\n        <span className=\"field-hint\">{hint}</span>\n      ) : null}\n    </div>\n  );\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":"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","names":["jsx","variantClass","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@flopay/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@11.17.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": {
@@ -27,12 +27,18 @@
       "import": "./dist/marketing/index.mjs",
       "require": "./dist/marketing/index.cjs"
     },
+    "./annotations": {
+      "types": "./dist/annotations/index.d.ts",
+      "import": "./dist/annotations/index.mjs",
+      "require": "./dist/annotations/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",
+    "./styles/annotations.css": "./styles/annotations.css",
     "./logo.png": "./assets/logo.png",
     "./package.json": "./package.json"
   },
@@ -68,10 +74,10 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.15",
+    "@biomejs/biome": "^2.5.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "next": "^16.2.6",
+    "next": "^16.2.10",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "tsup": "^8.3.0",

package/styles/annotations.css

@@ -0,0 +1,124 @@
+/* @flopay/ui — hand-drawn annotation layer.
+ *
+ * Marker-style notes and arrows drawn over a UI, for guided demos and product
+ * tours. Opt-in, since the arrow geometry is a few KB that most pages don't
+ * need:
+ *
+ *   @import "@flopay/ui/styles/annotations.css";
+ *
+ * Backs the components exported from `@flopay/ui/annotations`, and depends on
+ * tokens.css custom properties. */
+
+:root {
+  /* Brand blue by default, in a handwriting face, so notes read as marker over
+     the UI rather than as part of it. Override either per app. */
+  --annotation-ink: var(--brand);
+  --annotation-font: 'Bradley Hand', 'Segoe Print', 'Chalkboard SE', 'Comic Sans MS', cursive;
+}
+
+.annotation-stage {
+  width: 100%;
+}
+
+/* The positioning context for `pos`. Notes overhang it into the outer stage. */
+.annotation-stage-inner {
+  position: relative;
+}
+
+/* ── Narrow: the notes as a plain list under the content ── */
+.annotation-layer {
+  display: none;
+}
+
+.annotation-list {
+  max-width: 420px;
+  margin: 18px auto 0;
+  padding-top: 14px;
+  border-top: 1px dashed var(--border-hover);
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  font-family: var(--annotation-font);
+  font-size: 16px;
+  line-height: 1.45;
+  color: var(--annotation-ink);
+}
+
+.annotation-list li::before {
+  content: '→ ';
+  opacity: 0.7;
+}
+
+/* ── Wide: notes float around the content ──
+   Notes overhang the stage into the surrounding margins, so what matters is
+   the room *around* the content — which belongs to an ancestor the package
+   doesn't own. A container query on the stage would measure the content box
+   instead and never match. Hence a viewport query.
+   1120px is where a ~720px content box has room for 200px notes either side.
+   An app in a constrained layout (a sidebar, a split view) should re-declare
+   this one block at its own breakpoint; a custom property can't be used in a
+   media condition. */
+@media (min-width: 1120px) {
+  .annotation-layer {
+    display: block;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    /* Above the content so an arrow tip can cross onto its target rather than
+       stopping at the edge. */
+    z-index: 2;
+  }
+
+  .annotation-list {
+    display: none;
+  }
+
+  .annotation {
+    position: absolute;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    transform: rotate(var(--annotation-tilt, 0deg));
+    font-family: var(--annotation-font);
+    font-size: 18px;
+    line-height: 1.3;
+    color: var(--annotation-ink);
+  }
+
+  /* Arrow above the text for upward variants, below it otherwise. */
+  .annotation[data-flip] {
+    flex-direction: column-reverse;
+  }
+
+  /* Text rags toward whatever the arrow points at. */
+  .annotation[data-side='right'] { text-align: right; }
+  .annotation[data-side='left'] { text-align: left; }
+  .annotation[data-side='center'] { text-align: center; }
+
+  /* `position: relative` on both halves is what lets `posText` / `posArrow`
+     nudge one without the other. Offsets shift them off the spot `pos` put
+     them, leaving the flex layout — and therefore each other — undisturbed. */
+  .annotation-text {
+    position: relative;
+  }
+
+  /* `--annotation-arrow-rotate` re-aims the curve and the flips mirror it, so
+     one drawing covers several approach directions without a new curve. Those
+     are visual only — the layout box stays put, which is why a re-aimed arrow
+     overhangs it. Scale sits to the right of rotate so it applies first: you
+     pick the mirrored shape, then aim it. */
+  .annotation-arrow {
+    position: relative;
+    width: calc(160px * var(--annotation-arrow-scale, 1));
+    height: auto;
+    opacity: 0.9;
+    transform: rotate(var(--annotation-arrow-rotate, 0deg))
+      scale(var(--annotation-arrow-flip-x, 1), var(--annotation-arrow-flip-y, 1));
+  }
+
+  .annotation[data-side='right'] .annotation-arrow { align-self: flex-end; }
+  .annotation[data-side='left'] .annotation-arrow { align-self: flex-start; }
+  .annotation[data-side='center'] .annotation-arrow { align-self: center; }
+}

package/styles/components.css

@@ -116,6 +116,13 @@
   border-color: var(--border-hover);
 }
 
+/* Small / dense modifier — compose with a variant (e.g. "btn-primary btn-sm"). */
+.btn-sm {
+  gap: 5px;
+  padding: 8px 14px;
+  font-size: 13px;
+}
+
 /* ── Badge ── */
 .badge {
   display: inline-flex;
@@ -137,16 +144,58 @@
   flex-shrink: 0;
 }
 
+/* Semantic variants — compose with .badge (e.g. "badge badge-success"). */
+.badge-success {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--success) 12%, transparent);
+  color: var(--success);
+}
+
+.badge-warning {
+  border-color: transparent;
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+}
+
+.badge-danger {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  color: var(--danger);
+}
+
+.badge-info {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--brand) 12%, transparent);
+  color: var(--brand);
+}
+
 /* ── Card ── */
+/* Surface only — opt into padding (.card-pad-*) and hover (.card-interactive). */
 .card {
-  background: var(--bg);
+  background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 28px;
   transition: box-shadow 0.2s, border-color 0.2s;
 }
 
-.card:hover {
+.card-pad-sm {
+  padding: 16px;
+}
+
+.card-pad-md {
+  padding: 28px;
+}
+
+.card-pad-lg {
+  padding: 36px;
+}
+
+.card-interactive {
+  cursor: pointer;
+}
+
+.card-interactive:hover {
+  border-color: var(--border-hover);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
 }
 
@@ -334,3 +383,109 @@
     gap: 12px;
   }
 }
+
+/* ── Form fields ── */
+.field {
+  width: 100%;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  padding: 9px 12px;
+  font-family: var(--font);
+  font-size: 14px;
+  color: var(--text);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.field::placeholder {
+  color: var(--text-tertiary);
+}
+
+.field:focus {
+  outline: none;
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
+}
+
+.field[aria-invalid='true'] {
+  border-color: var(--danger);
+}
+
+.field[aria-invalid='true']:focus {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.field-hint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.field-error {
+  font-size: 12px;
+  color: var(--danger);
+}
+
+/* ── Spinner ── */
+.spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--brand);
+  border-radius: 50%;
+  animation: fp-spin 0.6s linear infinite;
+}
+
+@keyframes fp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-center {
+  display: flex;
+  justify-content: center;
+  padding: 64px 0;
+}
+
+/* ── Empty state ── */
+.empty-state {
+  text-align: center;
+  padding: 64px 24px;
+}
+
+.empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--bg-muted);
+  color: var(--text-tertiary);
+  margin-bottom: 16px;
+}
+
+.empty-state-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.empty-state-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}

package/styles/preset.css

@@ -45,6 +45,8 @@
   --color-success: var(--success);
   --color-danger: var(--danger);
   --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-warning-fg: var(--warning-fg);
 
   /* Typography */
   --font-sans: var(--font);

package/styles/tokens.css

@@ -45,6 +45,11 @@
   --danger: #dc2626;
   --warning: #f5a623;
 
+  /* Readable warning pair for soft surfaces (badges/callouts) — the solid
+     --warning is too light to use as text. */
+  --warning-bg: #fffbeb;
+  --warning-fg: #b45309;
+
   /* Radius */
   --radius: 8px;
   --radius-lg: 12px;
@@ -78,4 +83,7 @@
 
   --accent: #fafafa;
   --accent-hover: #e4e4e7;
+
+  --warning-bg: #451a03;
+  --warning-fg: #fcd34d;
 }