@flopay/ui 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -24,8 +24,13 @@ __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
   Container: () => Container,
+  EmptyState: () => EmptyState,
+  Field: () => Field,
+  Input: () => Input,
+  Label: () => Label,
   Section: () => Section,
   SectionHeader: () => SectionHeader,
+  Spinner: () => Spinner,
   cn: () => cn
 });
 module.exports = __toCommonJS(index_exports);
@@ -39,8 +44,21 @@ function cn(...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: [
+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__ */ (0, import_jsx_runtime.jsxs)("span", { className: cn("badge", variantClass[variant], className), ...props, children: [
     dot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "badge-dot" }) : null,
     children
   ] });
@@ -48,19 +66,43 @@ function Badge({ dot = false, className, children, ...props }) {
 
 // src/components/button.tsx
 var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)("button", { type, className: cn(variantClass[variant], className), ...props });
+function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type,
+      className: cn(variantClass2[variant], size === "sm" && "btn-sm", 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 });
+function Card({ padding = "md", interactive = false, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: cn(
+        "card",
+        padding !== "none" && `card-pad-${padding}`,
+        interactive && "card-interactive",
+        className
+      ),
+      ...props
+    }
+  );
 }
 
 // src/components/container.tsx
@@ -69,16 +111,46 @@ function Container({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("container", className), ...props });
 }
 
-// src/components/section.tsx
+// src/components/feedback.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function Spinner({ center = false, className, ...props }) {
+  const spinner = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("spinner", className), role: "status", "aria-label": "Loading", ...props });
+  return center ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "spinner-center", children: spinner }) : spinner;
+}
+function EmptyState({ title, description, icon, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("empty-state", className), children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "empty-state-icon", children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "empty-state-title", children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "empty-state-desc", children: description }) : null
+  ] });
+}
+
+// src/components/field.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Input({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { className: cn("field", className), ...props });
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: cn("field-label", className), ...props });
+}
+function Field({ label, hint, error, htmlFor, className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("field-group", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { htmlFor, children: label }) : null,
+    children,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "field-error", children: error }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "field-hint", children: hint }) : null
+  ] });
+}
+
+// src/components/section.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Section({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { className: cn("section", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("section-center", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "section-label", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "section-title", children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "section-desc", children: description }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -87,8 +159,13 @@ function SectionHeader({ label, title, description, className }) {
   Button,
   Card,
   Container,
+  EmptyState,
+  Field,
+  Input,
+  Label,
   Section,
   SectionHeader,
+  Spinner,
   cn
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +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"]}
+{"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/feedback.tsx","../src/components/field.tsx","../src/components/section.tsx"],"sourcesContent":["export { cn } from './cn';\n\nexport type { BadgeProps, BadgeVariant } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps, ButtonSize, ButtonVariant } from './components/button';\nexport { Button } from './components/button';\nexport type { CardPadding, CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { ContainerProps } from './components/container';\nexport { Container } from './components/container';\nexport type { EmptyStateProps, SpinnerProps } from './components/feedback';\nexport { EmptyState, Spinner } from './components/feedback';\nexport type { FieldProps, InputProps, LabelProps } from './components/field';\nexport { Field, Input, Label } from './components/field';\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 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":["import_jsx_runtime","variantClass","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -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.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,6 +1,6 @@
 {
   "name": "@flopay/ui",
-  "version": "0.3.0",
+  "version": "0.4.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.",

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;
 }