@carbonbits/sixr 1.4.0 → 1.5.0

package/dist/index-CdYkd6zz.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type InputFieldProps = Omit<ComponentPropsWithoutRef<"input">, "name" | "type"> & {
+    /** The form field this input edits — the key in the `Form`'s values. */
+    name: string;
+    label?: string;
+    /** Guidance under the field. Replaced by the error message while invalid. */
+    hint?: ReactNode;
+    /**
+     * Error supplied by the caller — a server-side or cross-field failure. Takes
+     * precedence over what the form's schema reports for this field.
+     */
+    error?: string;
+    /** Renders the design's muted "Optional" marker at the end of the label. */
+    optional?: boolean;
+    /** Trailing label slot, for affordances like the design's "Forgot?" link. */
+    action?: ReactNode;
+    /** Trailing in-field slot, for affordances like the design's password peek. */
+    trailing?: ReactNode;
+};
+
+export type { InputFieldProps as I };

package/dist/index.cjs

@@ -1,41 +1,9 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
+var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/cart/index.tsx
-function formatPrice(value, currency, locale) {
-  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(
-    value
-  );
-}
-function Cart({
-  products = [],
-  currency = "KES",
-  locale = "en-KE"
-}) {
-  const total = products.reduce((sum, product) => sum + product.price, 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Cart" }),
-    products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Your cart is empty." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col divide-y divide-gray-100", children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "li",
-        {
-          className: "flex items-baseline justify-between gap-4 py-2",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800", children: product.name }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm tabular-nums text-gray-600", children: formatPrice(product.price, currency, locale) })
-          ]
-        },
-        product.id ?? product.name
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: "Total" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tabular-nums text-gray-900", children: formatPrice(total, currency, locale) })
-      ] })
-    ] })
-  ] });
-}
+// src/components/button/index.tsx
 var DEFAULT_ELEMENT = {
   display: "h1",
   heading: "h2",
@@ -146,7 +114,143 @@ function Typography({
     }
   );
 }
+var BASE_CLASSES = "inline-flex shrink-0 items-center justify-center gap-2 rounded-field border font-[inherit] text-field font-semibold outline-none transition-colors focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45";
+var VARIANT_CLASSES2 = {
+  primary: "border-transparent bg-accent text-on-accent enabled:hover:bg-accent-2",
+  secondary: "border-line bg-surface text-fg enabled:hover:bg-surface-2",
+  ghost: "border-transparent bg-transparent text-fg enabled:hover:bg-surface-2"
+};
+var SIZE_CLASSES = {
+  md: "h-10 px-4",
+  lg: "h-11 px-5"
+};
+var LABEL_TONE = {
+  primary: "on-accent",
+  secondary: "default",
+  ghost: "default"
+};
+function buttonClassName({
+  variant,
+  size,
+  fullWidth,
+  className
+}) {
+  return [
+    BASE_CLASSES,
+    VARIANT_CLASSES2[variant],
+    SIZE_CLASSES[size],
+    fullWidth ? "w-full" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-4 w-4 animate-spin",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      "data-testid": "button-spinner",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z"
+          }
+        )
+      ]
+    }
+  );
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  loading = false,
+  loadingLabel,
+  asChild = false,
+  type = "button",
+  disabled,
+  className,
+  children,
+  ...rest
+}) {
+  const classes = buttonClassName({ variant, size, fullWidth, className });
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ...rest, className: classes, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...rest,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: classes,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        loadingLabel
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Typography,
+        {
+          as: "span",
+          variant: "body",
+          weight: "semibold",
+          tone: LABEL_TONE[variant],
+          children
+        }
+      )
+    }
+  );
+}
+function formatPrice(value, currency, locale) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(
+    value
+  );
+}
+function Cart({
+  products = [],
+  currency = "KES",
+  locale = "en-KE"
+}) {
+  const total = products.reduce((sum, product) => sum + product.price, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Cart" }),
+    products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Your cart is empty." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col divide-y divide-gray-100", children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex items-baseline justify-between gap-4 py-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800", children: product.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm tabular-nums text-gray-600", children: formatPrice(product.price, currency, locale) })
+          ]
+        },
+        product.id ?? product.name
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tabular-nums text-gray-900", children: formatPrice(total, currency, locale) })
+      ] })
+    ] })
+  ] });
+}
 
+exports.Button = Button;
 exports.Cart = Cart;
 exports.Typography = Typography;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/cart/index.tsx","../src/components/typography/index.tsx"],"names":["jsxs","jsx","Fragment","Slot"],"mappings":"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","file":"index.cjs","sourcesContent":["export type CartProduct = {\n  /**\n   * Stable identity for this line, used as the React key. Falls back to `name`,\n   * so pass an `id` whenever a cart can hold two lines with the same name.\n   */\n  id?: string;\n  name: string;\n  price: number;\n};\n\nexport type CartProps = {\n  products?: CartProduct[];\n  /** ISO 4217 code used to format prices. */\n  currency?: string;\n  /** BCP 47 locale used to format prices. */\n  locale?: string;\n};\n\nfunction formatPrice(value: number, currency: string, locale: string) {\n  return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(\n    value,\n  );\n}\n\nexport function Cart({\n  products = [],\n  currency = \"KES\",\n  locale = \"en-KE\",\n}: CartProps) {\n  const total = products.reduce((sum, product) => sum + product.price, 0);\n\n  return (\n    <div className=\"cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4\">\n      <h1 className=\"text-xl font-semibold text-gray-900\">Cart</h1>\n\n      {products.length === 0 ? (\n        <p className=\"text-sm text-gray-500\">Your cart is empty.</p>\n      ) : (\n        <>\n          <ul className=\"flex flex-col divide-y divide-gray-100\">\n            {products.map((product) => (\n              <li\n                key={product.id ?? product.name}\n                className=\"flex items-baseline justify-between gap-4 py-2\"\n              >\n                <span className=\"text-sm text-gray-800\">{product.name}</span>\n                <span className=\"text-sm tabular-nums text-gray-600\">\n                  {formatPrice(product.price, currency, locale)}\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2\">\n            <span className=\"text-sm font-medium text-gray-900\">Total</span>\n            <span className=\"text-sm font-semibold tabular-nums text-gray-900\">\n              {formatPrice(total, currency, locale)}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport type { ElementType, HTMLAttributes, ReactNode, Ref } from \"react\";\n\n/**\n * The library's type scale. Everything that renders text — field labels, hints,\n * form errors, headings — goes through here, so a size or colour lives in one\n * place and the tokens in `src/styles/index.css` stay the single source of\n * truth for what \"hint\" or \"muted\" means.\n *\n * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`\n * for `asChild`, which is how a consumer puts these styles on their own\n * element (a `next/link`, a Radix `Label`) without an extra wrapper.\n */\n\nexport type TypographyVariant =\n  | \"display\"\n  | \"heading\"\n  | \"subheading\"\n  | \"body\"\n  | \"label\"\n  | \"hint\"\n  | \"code\";\n\nexport type TypographyTone =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"accent\"\n  | \"on-accent\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"danger\";\n\nexport type TypographyWeight = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\nexport type TypographyElement =\n  | \"p\"\n  | \"span\"\n  | \"div\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n  | \"code\"\n  | \"strong\"\n  | \"em\"\n  | \"small\";\n\nexport type TypographyProps = Omit<HTMLAttributes<HTMLElement>, \"color\"> & {\n  /** Size and default element. `body` unless told otherwise. */\n  variant?: TypographyVariant;\n  /** Colour role, from the design tokens. */\n  tone?: TypographyTone;\n  /** Overrides the variant's default weight. */\n  weight?: TypographyWeight;\n  align?: \"start\" | \"center\" | \"end\";\n  /** Clip to one line with an ellipsis. */\n  truncate?: boolean;\n  /**\n   * An icon rendered beside the text, hidden from assistive tech. Sized to the\n   * text with `1em`, so the same SVG fits every variant.\n   */\n  icon?: ReactNode;\n  iconPosition?: \"leading\" | \"trailing\";\n  /** The element to render. Defaults per variant (`h2` for a heading, and so on). */\n  as?: TypographyElement;\n  /**\n   * Radix-style composition: render the child element itself, with these\n   * styles merged onto it, instead of a wrapper. Takes precedence over `as`.\n   */\n  asChild?: boolean;\n  ref?: Ref<HTMLElement>;\n  children?: ReactNode;\n};\n\nconst DEFAULT_ELEMENT: Record<TypographyVariant, TypographyElement> = {\n  display: \"h1\",\n  heading: \"h2\",\n  subheading: \"h3\",\n  body: \"p\",\n  label: \"span\",\n  hint: \"p\",\n  code: \"code\",\n};\n\nconst DEFAULT_WEIGHT: Record<TypographyVariant, TypographyWeight> = {\n  display: \"semibold\",\n  heading: \"semibold\",\n  subheading: \"medium\",\n  body: \"regular\",\n  label: \"semibold\",\n  hint: \"regular\",\n  code: \"regular\",\n};\n\nconst VARIANT_CLASSES: Record<TypographyVariant, string> = {\n  display: \"text-display leading-tight tracking-tight\",\n  heading: \"text-heading leading-tight tracking-tight\",\n  subheading: \"text-subheading leading-snug\",\n  body: \"text-field leading-normal\",\n  label: \"text-label leading-normal\",\n  hint: \"text-hint leading-normal\",\n  code: \"font-code text-field leading-normal\",\n};\n\nconst TONE_CLASSES: Record<TypographyTone, string> = {\n  default: \"text-fg\",\n  muted: \"text-fg-muted\",\n  subtle: \"text-fg-subtle\",\n  accent: \"text-accent\",\n  \"on-accent\": \"text-on-accent\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  danger: \"text-danger\",\n};\n\nconst WEIGHT_CLASSES: Record<TypographyWeight, string> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nconst ALIGN_CLASSES = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n} as const;\n\nconst ICON_CLASSES =\n  \"inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]\";\n\nfunction typographyClassName({\n  variant,\n  tone,\n  weight,\n  align,\n  truncate,\n  hasIcon,\n  className,\n}: {\n  variant: TypographyVariant;\n  tone: TypographyTone;\n  weight: TypographyWeight;\n  align: \"start\" | \"center\" | \"end\" | undefined;\n  truncate: boolean;\n  hasIcon: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    VARIANT_CLASSES[variant],\n    TONE_CLASSES[tone],\n    WEIGHT_CLASSES[weight],\n    align ? ALIGN_CLASSES[align] : \"\",\n    hasIcon ? \"inline-flex items-center gap-1.5\" : \"\",\n    // With an icon the root is a flex container, and text-overflow only\n    // clips block text, so the text span carries the truncation instead.\n    truncate && !hasIcon ? \"truncate\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nexport function Typography({\n  variant = \"body\",\n  tone = \"default\",\n  weight,\n  align,\n  truncate = false,\n  icon,\n  iconPosition = \"leading\",\n  as,\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: TypographyProps) {\n  const hasIcon = icon !== undefined && icon !== null;\n  // Widened to `ElementType`: the union of intrinsic tags would otherwise\n  // demand a `ref` typed to one specific element.\n  const Component: ElementType = asChild\n    ? Slot\n    : (as ?? DEFAULT_ELEMENT[variant]);\n\n  const iconNode = hasIcon ? (\n    <span aria-hidden=\"true\" className={ICON_CLASSES}>\n      {icon}\n    </span>\n  ) : null;\n\n  const content = hasIcon ? (\n    <>\n      {iconPosition === \"leading\" ? iconNode : null}\n      <span className={truncate ? \"min-w-0 truncate\" : undefined}>\n        {children}\n      </span>\n      {iconPosition === \"trailing\" ? iconNode : null}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <Component\n      {...rest}\n      className={typographyClassName({\n        variant,\n        tone,\n        weight: weight ?? DEFAULT_WEIGHT[variant],\n        align,\n        truncate,\n        hasIcon,\n        className,\n      })}\n    >\n      {content}\n    </Component>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/typography/index.tsx","../src/components/button/index.tsx","../src/components/cart/index.tsx"],"names":["Slot","jsx","jsxs","Fragment","VARIANT_CLASSES"],"mappings":"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","file":"index.cjs","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ElementType, HTMLAttributes, ReactNode, Ref } from \"react\";\n\n/**\n * The library's type scale. Everything that renders text — field labels, hints,\n * form errors, headings — goes through here, so a size or colour lives in one\n * place and the tokens in `src/styles/index.css` stay the single source of\n * truth for what \"hint\" or \"muted\" means.\n *\n * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`\n * for `asChild`, which is how a consumer puts these styles on their own\n * element (a `next/link`, a Radix `Label`) without an extra wrapper.\n */\n\nexport type TypographyVariant =\n  | \"display\"\n  | \"heading\"\n  | \"subheading\"\n  | \"body\"\n  | \"label\"\n  | \"hint\"\n  | \"code\";\n\nexport type TypographyTone =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"accent\"\n  | \"on-accent\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"danger\";\n\nexport type TypographyWeight = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\nexport type TypographyElement =\n  | \"p\"\n  | \"span\"\n  | \"div\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n  | \"code\"\n  | \"strong\"\n  | \"em\"\n  | \"small\";\n\nexport type TypographyProps = Omit<HTMLAttributes<HTMLElement>, \"color\"> & {\n  /** Size and default element. `body` unless told otherwise. */\n  variant?: TypographyVariant;\n  /** Colour role, from the design tokens. */\n  tone?: TypographyTone;\n  /** Overrides the variant's default weight. */\n  weight?: TypographyWeight;\n  align?: \"start\" | \"center\" | \"end\";\n  /** Clip to one line with an ellipsis. */\n  truncate?: boolean;\n  /**\n   * An icon rendered beside the text, hidden from assistive tech. Sized to the\n   * text with `1em`, so the same SVG fits every variant.\n   */\n  icon?: ReactNode;\n  iconPosition?: \"leading\" | \"trailing\";\n  /** The element to render. Defaults per variant (`h2` for a heading, and so on). */\n  as?: TypographyElement;\n  /**\n   * Radix-style composition: render the child element itself, with these\n   * styles merged onto it, instead of a wrapper. Takes precedence over `as`.\n   */\n  asChild?: boolean;\n  ref?: Ref<HTMLElement>;\n  children?: ReactNode;\n};\n\nconst DEFAULT_ELEMENT: Record<TypographyVariant, TypographyElement> = {\n  display: \"h1\",\n  heading: \"h2\",\n  subheading: \"h3\",\n  body: \"p\",\n  label: \"span\",\n  hint: \"p\",\n  code: \"code\",\n};\n\nconst DEFAULT_WEIGHT: Record<TypographyVariant, TypographyWeight> = {\n  display: \"semibold\",\n  heading: \"semibold\",\n  subheading: \"medium\",\n  body: \"regular\",\n  label: \"semibold\",\n  hint: \"regular\",\n  code: \"regular\",\n};\n\nconst VARIANT_CLASSES: Record<TypographyVariant, string> = {\n  display: \"text-display leading-tight tracking-tight\",\n  heading: \"text-heading leading-tight tracking-tight\",\n  subheading: \"text-subheading leading-snug\",\n  body: \"text-field leading-normal\",\n  label: \"text-label leading-normal\",\n  hint: \"text-hint leading-normal\",\n  code: \"font-code text-field leading-normal\",\n};\n\nconst TONE_CLASSES: Record<TypographyTone, string> = {\n  default: \"text-fg\",\n  muted: \"text-fg-muted\",\n  subtle: \"text-fg-subtle\",\n  accent: \"text-accent\",\n  \"on-accent\": \"text-on-accent\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  danger: \"text-danger\",\n};\n\nconst WEIGHT_CLASSES: Record<TypographyWeight, string> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nconst ALIGN_CLASSES = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n} as const;\n\nconst ICON_CLASSES =\n  \"inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]\";\n\nfunction typographyClassName({\n  variant,\n  tone,\n  weight,\n  align,\n  truncate,\n  hasIcon,\n  className,\n}: {\n  variant: TypographyVariant;\n  tone: TypographyTone;\n  weight: TypographyWeight;\n  align: \"start\" | \"center\" | \"end\" | undefined;\n  truncate: boolean;\n  hasIcon: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    VARIANT_CLASSES[variant],\n    TONE_CLASSES[tone],\n    WEIGHT_CLASSES[weight],\n    align ? ALIGN_CLASSES[align] : \"\",\n    hasIcon ? \"inline-flex items-center gap-1.5\" : \"\",\n    // With an icon the root is a flex container, and text-overflow only\n    // clips block text, so the text span carries the truncation instead.\n    truncate && !hasIcon ? \"truncate\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nexport function Typography({\n  variant = \"body\",\n  tone = \"default\",\n  weight,\n  align,\n  truncate = false,\n  icon,\n  iconPosition = \"leading\",\n  as,\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: TypographyProps) {\n  const hasIcon = icon !== undefined && icon !== null;\n  // Widened to `ElementType`: the union of intrinsic tags would otherwise\n  // demand a `ref` typed to one specific element.\n  const Component: ElementType = asChild\n    ? Slot\n    : (as ?? DEFAULT_ELEMENT[variant]);\n\n  const iconNode = hasIcon ? (\n    <span aria-hidden=\"true\" className={ICON_CLASSES}>\n      {icon}\n    </span>\n  ) : null;\n\n  const content = hasIcon ? (\n    <>\n      {iconPosition === \"leading\" ? iconNode : null}\n      <span className={truncate ? \"min-w-0 truncate\" : undefined}>\n        {children}\n      </span>\n      {iconPosition === \"trailing\" ? iconNode : null}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <Component\n      {...rest}\n      className={typographyClassName({\n        variant,\n        tone,\n        weight: weight ?? DEFAULT_WEIGHT[variant],\n        align,\n        truncate,\n        hasIcon,\n        className,\n      })}\n    >\n      {content}\n    </Component>\n  );\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport type { ButtonHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { Typography, type TypographyTone } from \"@/components/typography\";\n\n/**\n * The design's primary action, as the auth screens use it: a 40px (or 44px)\n * accent-filled control with the field type scale, a 4px radius and the\n * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter\n * actions that sit beside it.\n *\n * Server-safe: no state, no handlers of its own. `asChild` composes onto a\n * consumer's element — a `next/link` for a navigation styled as a button —\n * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps\n * the label for a spinner and disables the control; it applies to the\n * rendered `<button>` only, since a child element owns its own content.\n */\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"md\" | \"lg\";\n\nexport type ButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Stretch to the container, as the auth forms' submit does. */\n  fullWidth?: boolean;\n  /** Shows a spinner in place of the label and disables the control. */\n  loading?: boolean;\n  /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */\n  loadingLabel?: ReactNode;\n  /** Merge the styles onto the child element instead of rendering a button. */\n  asChild?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n};\n\nconst BASE_CLASSES =\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-field border font-[inherit] text-field font-semibold outline-none transition-colors focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45\";\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"border-transparent bg-accent text-on-accent enabled:hover:bg-accent-2\",\n  secondary: \"border-line bg-surface text-fg enabled:hover:bg-surface-2\",\n  ghost: \"border-transparent bg-transparent text-fg enabled:hover:bg-surface-2\",\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  md: \"h-10 px-4\",\n  lg: \"h-11 px-5\",\n};\n\nconst LABEL_TONE: Record<ButtonVariant, TypographyTone> = {\n  primary: \"on-accent\",\n  secondary: \"default\",\n  ghost: \"default\",\n};\n\nfunction buttonClassName({\n  variant,\n  size,\n  fullWidth,\n  className,\n}: {\n  variant: ButtonVariant;\n  size: ButtonSize;\n  fullWidth: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    BASE_CLASSES,\n    VARIANT_CLASSES[variant],\n    SIZE_CLASSES[size],\n    fullWidth ? \"w-full\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 animate-spin\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-testid=\"button-spinner\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z\"\n      />\n    </svg>\n  );\n}\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  loading = false,\n  loadingLabel,\n  asChild = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  ...rest\n}: ButtonProps) {\n  const classes = buttonClassName({ variant, size, fullWidth, className });\n\n  if (asChild) {\n    return (\n      <Slot {...rest} className={classes}>\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      {...rest}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={classes}\n    >\n      {loading ? (\n        <>\n          <Spinner />\n          {loadingLabel}\n        </>\n      ) : (\n        <Typography\n          as=\"span\"\n          variant=\"body\"\n          weight=\"semibold\"\n          tone={LABEL_TONE[variant]}\n        >\n          {children}\n        </Typography>\n      )}\n    </button>\n  );\n}\n","export type CartProduct = {\n  /**\n   * Stable identity for this line, used as the React key. Falls back to `name`,\n   * so pass an `id` whenever a cart can hold two lines with the same name.\n   */\n  id?: string;\n  name: string;\n  price: number;\n};\n\nexport type CartProps = {\n  products?: CartProduct[];\n  /** ISO 4217 code used to format prices. */\n  currency?: string;\n  /** BCP 47 locale used to format prices. */\n  locale?: string;\n};\n\nfunction formatPrice(value: number, currency: string, locale: string) {\n  return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(\n    value,\n  );\n}\n\nexport function Cart({\n  products = [],\n  currency = \"KES\",\n  locale = \"en-KE\",\n}: CartProps) {\n  const total = products.reduce((sum, product) => sum + product.price, 0);\n\n  return (\n    <div className=\"cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4\">\n      <h1 className=\"text-xl font-semibold text-gray-900\">Cart</h1>\n\n      {products.length === 0 ? (\n        <p className=\"text-sm text-gray-500\">Your cart is empty.</p>\n      ) : (\n        <>\n          <ul className=\"flex flex-col divide-y divide-gray-100\">\n            {products.map((product) => (\n              <li\n                key={product.id ?? product.name}\n                className=\"flex items-baseline justify-between gap-4 py-2\"\n              >\n                <span className=\"text-sm text-gray-800\">{product.name}</span>\n                <span className=\"text-sm tabular-nums text-gray-600\">\n                  {formatPrice(product.price, currency, locale)}\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2\">\n            <span className=\"text-sm font-medium text-gray-900\">Total</span>\n            <span className=\"text-sm font-semibold tabular-nums text-gray-900\">\n              {formatPrice(total, currency, locale)}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -1,41 +1,22 @@
+import { ButtonProps } from './button.cjs';
+export { Button, ButtonSize, ButtonVariant } from './button.cjs';
 export { Cart, CartProduct, CartProps } from './cart.cjs';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, FormHTMLAttributes } from 'react';
+import { Label } from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { FieldValues, UseFormReturn, DefaultValues, Mode } from 'react-hook-form';
 export { Typography, TypographyElement, TypographyProps, TypographyTone, TypographyVariant, TypographyWeight } from './typography.cjs';
 
-/**
- * Structural shape of a zod schema — every zod schema satisfies it, and any
- * version of zod does. Declaring it this way rather than importing `ZodType`
- * keeps zod out of this module's public types, so consumers who only want an
- * input do not have to install zod to typecheck it.
- */
-type FieldSchema = {
-    safeParse: (value: unknown) => {
-        success: true;
-    } | {
-        success: false;
-        error: {
-            issues: readonly {
-                message: string;
-            }[];
-        };
-    };
-};
-/** Outcome of a single validation pass, handed to `onValidationChange`. */
-type FieldValidation = {
-    valid: boolean;
-    /** First issue reported by the schema, or `undefined` when valid. */
-    error?: string;
-};
-
-/** Props every specialised input shares. `type` is fixed by the wrapper. */
-type FieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "type"> & {
+type InputFieldProps = Omit<ComponentPropsWithoutRef<"input">, "name" | "type"> & {
+    /** The form field this input edits — the key in the `Form`'s values. */
+    name: string;
     label?: string;
     /** Guidance under the field. Replaced by the error message while invalid. */
     hint?: ReactNode;
     /**
      * Error supplied by the caller — a server-side or cross-field failure. Takes
-     * precedence over the schema, so a form can hold a field invalid regardless
-     * of what `schema` makes of the value on its own.
+     * precedence over what the form's schema reports for this field.
      */
     error?: string;
     /** Renders the design's muted "Optional" marker at the end of the label. */
@@ -44,36 +25,115 @@ type FieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "valu
     action?: ReactNode;
     /** Trailing in-field slot, for affordances like the design's password peek. */
     trailing?: ReactNode;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    /**
-     * Any zod schema that accepts a string. Only `safeParse` is used, so a
-     * refined, transformed or preprocessed schema works as well as a plain one.
-     */
-    schema?: FieldSchema;
-    /**
-     * When the schema runs. `blur` — the default — avoids scolding someone
-     * mid-keystroke; once a field has gone invalid it revalidates on every
-     * keystroke so the message clears as soon as it is fixed.
-     */
-    validateOn?: "blur" | "change" | "never";
-    onValidationChange?: (state: FieldValidation) => void;
 };
 
 /**
  * An email address. Fixes `type="email"` and the keyboard and autofill hints
- * that go with it. Pair it with `emailSchema` from `@carbonbits/sixr/validation`
- * to validate inline; the schema stays opt-in so this bundle does not require
- * zod.
+ * that go with it. Validate it with `emailSchema` from
+ * `@carbonbits/sixr/validation` in the enclosing `Form`'s schema.
+ */
+type EmailInputProps = InputFieldProps;
+
+/**
+ * The structure behind every form field, with no styling of its own: an id
+ * shared by label and control, the error and description ids the control is
+ * described by, the field's validity, and — inside a `Form` — the
+ * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep
+ * the control registered.
+ *
+ * Styled components compose these primitives with their own classes
+ * (`TextInput` and friends do), and a screen that needs a control the
+ * library does not ship — a select, a code entry, a toggle — composes them
+ * the same way. Everything here is a plain element or a Radix `Slot`, so the
+ * styling decisions stay with whoever renders the field.
+ *
+ * Outside a `Form` the primitives still wire label, control and messages
+ * together; the control just isn't registered anywhere and the error comes
+ * from the `error` prop alone.
  */
-type EmailInputProps = FieldProps;
+type FieldBindings = {
+    name: string;
+    value?: unknown;
+    onChange?: (event: unknown) => void;
+    onBlur?: () => void;
+    ref?: (instance: HTMLElement | null) => void;
+};
+type FieldContextValue = {
+    id: string;
+    name: string;
+    descriptionId: string;
+    messageId: string;
+    error: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
+    bindings: FieldBindings;
+};
+type FieldRootProps = ComponentPropsWithoutRef<"div"> & {
+    /** The form field this wires up — the key in the `Form`'s values. */
+    name: string;
+    /** A caller-supplied error. Outranks whatever the form's schema reports. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Render the child element as the root instead of a `div`. */
+    asChild?: boolean;
+    children: ReactNode;
+};
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
+type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;
+type FieldDescriptionProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+type FieldMessageProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+
+/**
+ * A `<form>` on react-hook-form. The schema — any Standard Schema, which
+ * every zod 4 schema is — validates the whole form: on first blur per field,
+ * then on every change once a field has gone invalid, and again on submit.
+ * Fields register themselves through `FieldRoot` (and so through every
+ * input in this library), so a form is the schema, the inputs and a submit.
+ *
+ * `onSubmit` only runs with values the schema accepted, typed as its output.
+ * Throwing from it — or calling `form.setError("root", …)` — surfaces the
+ * message through `FormError`. While it is pending the fields are disabled
+ * and `SubmitButton` shows its spinner.
+ *
+ * Pass your own `form` (from `useFormInstance`) when a screen needs to reach
+ * the instance itself, for `setError`, `reset` or `watch`.
+ */
+type FormSchema = StandardSchemaV1<FieldValues, FieldValues>;
+type FormInput<Schema extends FormSchema> = StandardSchemaV1.InferInput<Schema>;
+type FormOutput<Schema extends FormSchema> = StandardSchemaV1.InferOutput<Schema>;
+type FormInstance<Schema extends FormSchema> = UseFormReturn<FormInput<Schema>, unknown, FormOutput<Schema>>;
+type UseFormInstanceOptions<Schema extends FormSchema> = {
+    schema?: Schema;
+    defaultValues?: DefaultValues<FormInput<Schema>>;
+    /** When a field first validates. `onTouched`: first blur, then every change. */
+    mode?: Mode;
+};
+type FormProps<Schema extends FormSchema = FormSchema> = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & UseFormInstanceOptions<Schema> & {
+    onSubmit: (values: FormOutput<Schema>, form: FormInstance<Schema>) => void | Promise<void>;
+    /** An instance from `useFormInstance`, when the screen needs it too. */
+    form?: FormInstance<Schema>;
+    children: ReactNode;
+};
+type FormErrorProps = {
+    /** A message to show in place of the form's own root error. */
+    children?: ReactNode;
+    className?: string;
+};
+type SubmitButtonProps = Omit<ButtonProps, "type" | "loading" | "asChild">;
 
 /**
  * A password. Fixes `type="password"` and owns the design's in-field peek
  * affordance, so the trailing slot is not exposed here — the toggle is it.
  */
-type PasswordInputProps = Omit<FieldProps, "trailing"> & {
+type PasswordInputProps = Omit<InputFieldProps, "trailing"> & {
     /** Show the "Show"/"Hide" toggle. On by default, as the design has it. */
     revealable?: boolean;
     /** Labels for the toggle, for localisation. */
@@ -84,10 +144,11 @@ type PasswordInputProps = Omit<FieldProps, "trailing"> & {
 };
 
 /**
- * A phone number. Fixes `type="tel"` and the numeric keypad. Pair it with
- * `phoneSchema` from `@carbonbits/sixr/validation` to validate inline.
+ * A phone number. Fixes `type="tel"` and the numeric keypad. Validate it with
+ * `phoneSchema` from `@carbonbits/sixr/validation` in the enclosing `Form`'s
+ * schema.
  */
-type PhoneInputProps = FieldProps;
+type PhoneInputProps = InputFieldProps;
 
 /**
  * Plain free text: names, job titles, one-time codes. Anything with a format
@@ -95,9 +156,9 @@ type PhoneInputProps = FieldProps;
  * component (`EmailInput`, `PhoneInput`, `PasswordInput`), which fixes the
  * keyboard, autocomplete and input type that format needs.
  */
-type TextInputProps = FieldProps & {
+type TextInputProps = InputFieldProps & {
     /** Renders the value in the design's monospace face, as the code entry does. */
     mono?: boolean;
 };
 
-export type { EmailInputProps, FieldProps, FieldSchema, FieldValidation, PasswordInputProps, PhoneInputProps, TextInputProps };
+export { ButtonProps, type EmailInputProps, type FieldBindings, type FieldContextValue, type FieldControlProps, type FieldDescriptionProps, type FieldLabelProps, type FieldMessageProps, type FieldRootProps, type FormErrorProps, type FormInput, type FormInstance, type FormOutput, type FormProps, type FormSchema, type InputFieldProps, type PasswordInputProps, type PhoneInputProps, type SubmitButtonProps, type TextInputProps, type UseFormInstanceOptions };