@carbonbits/sixr 1.4.0 → 1.5.0

package/README.md

@@ -13,8 +13,12 @@ cleanly into a server component.
 pnpm add @carbonbits/sixr
 ```
 
-`react` and `react-dom` are peer dependencies (`^19.0.0`). `zod` (`^4`) is an optional
-peer dependency, needed only for `@carbonbits/sixr/validation`.
+`react` and `react-dom` are peer dependencies (`^19.0.0`). `react-hook-form` (`^7.89`)
+is a peer dependency too, needed by `Form` and the inputs — a peer rather than a
+bundled dependency so your app and sixr share one instance and one form context.
+`zod` (`^4`) is an optional peer dependency, needed only for
+`@carbonbits/sixr/validation`; `Form` accepts any Standard Schema, of which every zod
+4 schema is one.
 
 ## Usage
 
@@ -107,6 +111,39 @@ Default elements: `display` → `h1`, `heading` → `h2`, `subheading` → `h3`,
 </Typography>
 ```
 
+### `Button`
+
+```tsx
+import { Button } from "@carbonbits/sixr/button";
+```
+
+The design's action control, as the auth screens use it: accent fill, the field type
+scale, a 4px radius and the shared 45% disabled opacity. Server-safe. `SubmitButton`
+in `Form` is this component with `type="submit"` and the form's submitting state.
+
+| Prop           | Type                                  | Default     | Description                                                        |
+| -------------- | ------------------------------------- | ----------- | ------------------------------------------------------------------ |
+| `variant`      | `"primary" \| "secondary" \| "ghost"` | `"primary"` | Accent fill, outlined, or bare.                                    |
+| `size`         | `"md" \| "lg"`                        | `"md"`      | 40px, or the 44px the design uses on touch layouts.                |
+| `fullWidth`    | `boolean`                             | `false`     | Stretch to the container.                                          |
+| `loading`      | `boolean`                             | `false`     | Spinner in place of the label, and disabled. Rendered button only. |
+| `loadingLabel` | `ReactNode`                           | —           | Shown beside the spinner while `loading`.                          |
+| `asChild`      | `boolean`                             | `false`     | Merge the styles onto the child element (a `next/link`) instead.   |
+| `type`         | `"button" \| "submit" \| "reset"`     | `"button"`  | Native button type.                                                |
+
+```tsx
+<Button type="submit" fullWidth loading={saving} loadingLabel="Saving…">
+  Save changes
+</Button>
+
+<Button variant="secondary" onClick={cancel}>Cancel</Button>
+
+// A navigation that reads as a button, without losing the link's semantics.
+<Button asChild fullWidth>
+  <Link href="/id/login">Sign in again</Link>
+</Button>
+```
+
 ### Inputs: `TextInput`, `EmailInput`, `PasswordInput`, `PhoneInput`
 
 ```tsx
@@ -116,8 +153,10 @@ import { PasswordInput } from "@carbonbits/sixr/password-input";
 import { PhoneInput } from "@carbonbits/sixr/phone-input";
 ```
 
-Labelled single-line fields with optional schema validation. Each one is for a single
-kind of value and fixes the input type, keyboard and autofill hints that value needs:
+Labelled single-line fields. Each one is for a single kind of value and fixes the
+input type, keyboard and autofill hints that value needs. Inside a `Form` they register
+under their `name` and show whatever the form's schema reports for it; outside one
+they are plain labelled inputs:
 
 | Component       | Value            | Fixes                                                                  |
 | --------------- | ---------------- | ---------------------------------------------------------------------- |
@@ -131,20 +170,15 @@ its subpath — none is on the root barrel, which stays server-safe.
 
 They share these props:
 
-| Prop                 | Type                                 | Default  | Description                                           |
-| -------------------- | ------------------------------------ | -------- | ----------------------------------------------------- |
-| `label`              | `string`                             | —        | Field label, associated with the input.               |
-| `hint`               | `ReactNode`                          | —        | Guidance below the field. Replaced by an error.       |
-| `error`              | `string`                             | —        | Caller-supplied error. Outranks the schema.           |
-| `schema`             | `FieldSchema`                        | —        | Any zod schema. Only `safeParse` is called.           |
-| `validateOn`         | `"blur" \| "change" \| "never"`      | `"blur"` | When the schema runs.                                 |
-| `onValidationChange` | `(state: FieldValidation) => void`   | —        | Fires on each validation pass.                        |
-| `onChange`           | `(value: string) => void`            | —        | Receives the value, not the event.                    |
-| `value`              | `string`                             | —        | Makes the field controlled.                           |
-| `defaultValue`       | `string`                             | `""`     | Initial value when uncontrolled.                      |
-| `optional`           | `boolean`                            | `false`  | Shows an "Optional" marker on the label.              |
-| `action`             | `ReactNode`                          | —        | Trailing label slot, e.g. a "Forgot?" link.           |
-| `trailing`           | `ReactNode`                          | —        | Trailing in-field slot. Not on `PasswordInput`, which owns it. |
+| Prop       | Type        | Default | Description                                                          |
+| ---------- | ----------- | ------- | -------------------------------------------------------------------- |
+| `name`     | `string`    | —       | The form field this edits: the key in the `Form`'s values. Required. |
+| `label`    | `string`    | —       | Field label, associated with the input.                              |
+| `hint`     | `ReactNode` | —       | Guidance below the field. Replaced by an error.                      |
+| `error`    | `string`    | —       | Caller-supplied error. Outranks what the form's schema reports.      |
+| `optional` | `boolean`   | `false` | Shows an "Optional" marker on the label.                             |
+| `action`   | `ReactNode` | —       | Trailing label slot, e.g. a "Forgot?" link.                          |
+| `trailing` | `ReactNode` | —       | Trailing in-field slot. Not on `PasswordInput`, which owns it.       |
 
 And their own:
 
@@ -154,30 +188,21 @@ And their own:
 | `PasswordInput` | `revealable`   | `boolean`                        | `true`                           | Shows the Show/Hide toggle.          |
 | `PasswordInput` | `revealLabels` | `{ show: string; hide: string }` | `{ show: "Show", hide: "Hide" }` | Toggle text, for localisation.       |
 
-Any other `<input>` attribute — `placeholder`, `maxLength`, `disabled`, `autoComplete` —
-is passed straight through, and overrides the component's default where there is one.
+Any other `<input>` attribute — `placeholder`, `maxLength`, `disabled`, `autoComplete`,
+`onChange` — is passed straight through, and overrides the component's default where
+there is one. Validation is not a per-input concern: it is the enclosing `Form`'s
+schema, keyed by `name`.
 
 ```tsx
 import { EmailInput } from "@carbonbits/sixr/email-input";
-import { emailSchema } from "@carbonbits/sixr/validation";
-
-<EmailInput
-  label="Work email"
-  placeholder="you@company.com"
-  schema={emailSchema}
-  onChange={setEmail}
-/>;
-```
 
-Validation runs on blur by default, then on every keystroke once the field has gone
-invalid, so a corrected value clears the message immediately. The first schema issue
-is shown, the input gets `aria-invalid`, and the message is announced via `role="alert"`
-and wired up with `aria-describedby`.
+<EmailInput name="email" label="Work email" placeholder="you@company.com" />;
+```
 
-`schema` is structurally typed, so any zod schema satisfies it without zod appearing
-in this package's types — you only need zod installed if you use it. The inputs never
-default to a schema for the same reason; pair them with the ready-made ones under
-"Validation schemas".
+The first schema issue for the field is shown, the input gets `aria-invalid`, and the
+message is announced via `role="alert"` and wired up with `aria-describedby`. The
+inputs are `Field` compositions (below) with the design's classes; a control that
+needs a different look composes `Field` itself.
 
 ### `Form` / `FormError` / `SubmitButton`
 
@@ -185,39 +210,45 @@ default to a schema for the same reason; pair them with the ready-made ones unde
 import { Form, FormError, SubmitButton } from "@carbonbits/sixr/form";
 ```
 
-The shared skeleton behind the login/signup screens: a `<form>` that disables its
-fields for the duration of `onSubmit`, plus a submit button that swaps to a spinner
-for the same duration. Interactive, so it ships its own `"use client"` directive and
-is reachable only at this subpath.
-
-| Component     | Prop           | Type                       | Description                                             |
-| ------------- | -------------- | -------------------------- | --------------------------------------------------------- |
-| `Form`        | `onSubmit`     | `() => void \| Promise<void>` | Called after `preventDefault`. A returned promise drives the disabled/spinner state until it settles. |
-| `Form`        | `children`     | `ReactNode`                 | Fields, `FormError`, `SubmitButton` — whatever the design calls for, in order. |
-| `FormError`   | `children`     | `ReactNode`                 | Form-level error (a rejected credential, a failed request). Renders nothing when empty. |
-| `SubmitButton`| `loadingLabel` | `ReactNode`                 | Shown next to the spinner in place of `children` while submitting. |
+A `<form>` on react-hook-form. One schema validates the whole form — on a field's
+first blur, then on every change until it is fixed, and again on submit — and
+`onSubmit` only ever runs with values the schema accepted, typed as its output. While
+`onSubmit` is pending the fields are disabled and `SubmitButton` shows a spinner.
+Interactive, so it ships its own `"use client"` directive and is reachable only at
+this subpath.
+
+| Component      | Prop            | Type                                                | Default       | Description                                                                          |
+| -------------- | --------------- | --------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------ |
+| `Form`         | `schema`        | Standard Schema (any zod 4 schema)                  | —             | Validates the form's values. Without one, `onSubmit` receives the raw values.       |
+| `Form`         | `defaultValues` | `DefaultValues<Input>`                              | —             | Initial values, keyed by field `name`.                                               |
+| `Form`         | `onSubmit`      | `(values: Output, form: FormInstance) => void \| Promise<void>` | — | Runs with parsed values. Throwing surfaces the message through `FormError`.          |
+| `Form`         | `mode`          | `"onTouched" \| "onBlur" \| "onChange" \| "onSubmit" \| "all"` | `"onTouched"` | When a field first validates.                                             |
+| `Form`         | `form`          | `FormInstance`                                      | —             | Your own instance from `useFormInstance`, when the screen needs `setError`, `reset`, `watch`. |
+| `Form`         | `children`      | `ReactNode`                                         | —             | Fields, `FormError`, `SubmitButton` — whatever the design calls for, in order.       |
+| `FormError`    | `children`      | `ReactNode`                                         | —             | Shown in place of the form's root error. Without it, the root error (from a thrown `onSubmit` or `form.setError("root", …)`). Renders nothing when there is none. |
+| `SubmitButton` | `loadingLabel`  | `ReactNode`                                         | —             | Shown next to the spinner in place of `children` while submitting.                   |
+| `SubmitButton` | `variant`, `size`, `fullWidth` | as `Button`                          | `fullWidth`   | Everything else `Button` takes, bar `type`, `loading` and `asChild`.                 |
 
 ```tsx
+import { z } from "zod";
 import { EmailInput } from "@carbonbits/sixr/email-input";
 import { Form, FormError, SubmitButton } from "@carbonbits/sixr/form";
 import { PasswordInput } from "@carbonbits/sixr/password-input";
+import { emailSchema, passwordSchema } from "@carbonbits/sixr/validation";
 
-function LoginForm() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string>();
+const loginSchema = z.object({ email: emailSchema, password: passwordSchema });
 
-  const handleSubmit = async () => {
-    setError(undefined);
+function LoginForm() {
+  const handleSubmit = async ({ email, password }: z.output<typeof loginSchema>) => {
     const ok = await signIn(email, password);
-    if (!ok) setError("That email and password don't match.");
+    if (!ok) throw new Error("That email and password don't match.");
   };
 
   return (
-    <Form onSubmit={handleSubmit}>
-      <EmailInput label="Work email" onChange={setEmail} />
-      <PasswordInput label="Password" onChange={setPassword} />
-      <FormError>{error}</FormError>
+    <Form schema={loginSchema} defaultValues={{ email: "", password: "" }} onSubmit={handleSubmit}>
+      <EmailInput name="email" label="Work email" />
+      <PasswordInput name="password" label="Password" />
+      <FormError />
       <SubmitButton loadingLabel="Signing in…">Sign in</SubmitButton>
     </Form>
   );
@@ -230,6 +261,53 @@ control inside `Form`) picks that up for free. Fields, OAuth rows, dividers —
 the design puts between the top of the form and the submit button — are just children;
 `Form` doesn't assume a shape beyond that.
 
+`useFormInstance({ schema, defaultValues, mode })` returns the react-hook-form instance
+`Form` would otherwise create. Pass it as `form` when the screen needs the instance
+too — to `setError("root", …)` after a request, `reset()` after success, or `watch()`
+a field.
+
+### `Field`
+
+```tsx
+import {
+  FieldControl,
+  FieldDescription,
+  FieldLabel,
+  FieldMessage,
+  FieldRoot,
+  useFieldContext,
+} from "@carbonbits/sixr/field";
+```
+
+The headless structure behind every input: the id shared by label and control, the
+description and error the control is described by, validity, and — inside a `Form` —
+the react-hook-form bindings. No classes of its own; each part is a plain element or
+a Radix `Slot`, so the look is entirely the composer's. This is how the shipped inputs
+are built, and how to build a control the library doesn't ship (a select, a code
+entry, a toggle) so it validates and announces errors the same way.
+
+| Part                | Renders                        | Description                                                                              |
+| ------------------- | ------------------------------ | ---------------------------------------------------------------------------------------- |
+| `FieldRoot`        | `div` (or child via `asChild`) | Takes `name`, optional `error` (outranks the schema), `required`, `disabled`. Sets `data-invalid` / `data-disabled` for styling. |
+| `FieldLabel`       | Radix `Label`                  | Associated with the control.                                                             |
+| `FieldControl`     | Radix `Slot`                   | Wires id, `name`, `aria-*` and the form bindings onto its child element; the child's own handlers still run. |
+| `FieldDescription` | `p` (or child via `asChild`)   | Guidance. Hidden while there is an error.                                                |
+| `FieldMessage`     | `p` (or child via `asChild`)   | The error, as `role="alert"`. `children` is a fallback message. Nothing while valid.     |
+
+```tsx
+<FieldRoot name="handle" className="flex flex-col gap-1 border-b-2 border-line data-[invalid]:border-danger">
+  <FieldLabel className="text-hint uppercase">Handle</FieldLabel>
+  <FieldControl>
+    <input className="bg-transparent outline-none" placeholder="@jordan" />
+  </FieldControl>
+  <FieldDescription className="text-hint text-fg-subtle">Letters, numbers, underscores.</FieldDescription>
+  <FieldMessage className="text-hint text-danger" />
+</FieldRoot>
+```
+
+`useFieldContext()` exposes the same wiring (`id`, `name`, `error`, `invalid`,
+`bindings`, …) to anything else rendered inside `FieldRoot`.
+
 ## Validation schemas
 
 ```tsx
@@ -239,7 +317,8 @@ import { emailSchema, passwordSchema } from "@carbonbits/sixr/validation";
 Ready-made zod schemas matching the Carbonbits auth rules: `emailSchema`,
 `passwordSchema`, `verificationCodeSchema`, `backupCodeSchema`, `fullNameSchema`,
 `jobTitleSchema` and `phoneSchema`. They are ordinary zod schemas — extend them with
-`.refine`, or replace the message with `.min(8, "…")`.
+`.refine`, or replace the message with `.min(8, "…")` — and compose into a `Form`'s
+schema with `z.object({ email: emailSchema, … })`, keyed by field `name`.
 
 This subpath needs `zod` (`^4`), which is an optional peer dependency. Nothing else in
 the package requires it.

package/dist/button.cjs

@@ -0,0 +1,223 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/button/index.tsx
+var DEFAULT_ELEMENT = {
+  display: "h1",
+  heading: "h2",
+  subheading: "h3",
+  body: "p",
+  label: "span",
+  hint: "p",
+  code: "code"
+};
+var DEFAULT_WEIGHT = {
+  display: "semibold",
+  heading: "semibold",
+  subheading: "medium",
+  body: "regular",
+  label: "semibold",
+  hint: "regular",
+  code: "regular"
+};
+var VARIANT_CLASSES = {
+  display: "text-display leading-tight tracking-tight",
+  heading: "text-heading leading-tight tracking-tight",
+  subheading: "text-subheading leading-snug",
+  body: "text-field leading-normal",
+  label: "text-label leading-normal",
+  hint: "text-hint leading-normal",
+  code: "font-code text-field leading-normal"
+};
+var TONE_CLASSES = {
+  default: "text-fg",
+  muted: "text-fg-muted",
+  subtle: "text-fg-subtle",
+  accent: "text-accent",
+  "on-accent": "text-on-accent",
+  success: "text-success",
+  warning: "text-warning",
+  info: "text-info",
+  danger: "text-danger"
+};
+var WEIGHT_CLASSES = {
+  regular: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var ALIGN_CLASSES = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+var ICON_CLASSES = "inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]";
+function typographyClassName({
+  variant,
+  tone,
+  weight,
+  align,
+  truncate,
+  hasIcon,
+  className
+}) {
+  return [
+    VARIANT_CLASSES[variant],
+    TONE_CLASSES[tone],
+    WEIGHT_CLASSES[weight],
+    align ? ALIGN_CLASSES[align] : "",
+    hasIcon ? "inline-flex items-center gap-1.5" : "",
+    // With an icon the root is a flex container, and text-overflow only
+    // clips block text, so the text span carries the truncation instead.
+    truncate && !hasIcon ? "truncate" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function Typography({
+  variant = "body",
+  tone = "default",
+  weight,
+  align,
+  truncate = false,
+  icon,
+  iconPosition = "leading",
+  as,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}) {
+  const hasIcon = icon !== void 0 && icon !== null;
+  const Component = asChild ? reactSlot.Slot : as ?? DEFAULT_ELEMENT[variant];
+  const iconNode = hasIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
+  const content = hasIcon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconPosition === "leading" ? iconNode : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
+    iconPosition === "trailing" ? iconNode : null
+  ] }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...rest,
+      className: typographyClassName({
+        variant,
+        tone,
+        weight: weight ?? DEFAULT_WEIGHT[variant],
+        align,
+        truncate,
+        hasIcon,
+        className
+      }),
+      children: content
+    }
+  );
+}
+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
+        }
+      )
+    }
+  );
+}
+
+exports.Button = Button;
+//# sourceMappingURL=button.cjs.map
+//# sourceMappingURL=button.cjs.map

package/dist/button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/index.tsx","../src/components/button/index.tsx"],"names":["Slot","jsx","jsxs","Fragment","VARIANT_CLASSES"],"mappings":"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","file":"button.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"]}

package/dist/button.d.cts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+
+/**
+ * The design's primary action, as the auth screens use it: a 40px (or 44px)
+ * accent-filled control with the field type scale, a 4px radius and the
+ * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter
+ * actions that sit beside it.
+ *
+ * Server-safe: no state, no handlers of its own. `asChild` composes onto a
+ * consumer's element — a `next/link` for a navigation styled as a button —
+ * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps
+ * the label for a spinner and disables the control; it applies to the
+ * rendered `<button>` only, since a child element owns its own content.
+ */
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "md" | "lg";
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Stretch to the container, as the auth forms' submit does. */
+    fullWidth?: boolean;
+    /** Shows a spinner in place of the label and disables the control. */
+    loading?: boolean;
+    /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */
+    loadingLabel?: ReactNode;
+    /** Merge the styles onto the child element instead of rendering a button. */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+};
+declare function Button({ variant, size, fullWidth, loading, loadingLabel, asChild, type, disabled, className, children, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/button.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+
+/**
+ * The design's primary action, as the auth screens use it: a 40px (or 44px)
+ * accent-filled control with the field type scale, a 4px radius and the
+ * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter
+ * actions that sit beside it.
+ *
+ * Server-safe: no state, no handlers of its own. `asChild` composes onto a
+ * consumer's element — a `next/link` for a navigation styled as a button —
+ * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps
+ * the label for a spinner and disables the control; it applies to the
+ * rendered `<button>` only, since a child element owns its own content.
+ */
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "md" | "lg";
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Stretch to the container, as the auth forms' submit does. */
+    fullWidth?: boolean;
+    /** Shows a spinner in place of the label and disables the control. */
+    loading?: boolean;
+    /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */
+    loadingLabel?: ReactNode;
+    /** Merge the styles onto the child element instead of rendering a button. */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+};
+declare function Button({ variant, size, fullWidth, loading, loadingLabel, asChild, type, disabled, className, children, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/button.js

@@ -0,0 +1,4 @@
+export { Button } from './chunk-HDTW4FRT.js';
+import './chunk-NZHHNVXZ.js';
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}