@carbonbits/sixr 1.3.0 → 1.4.0

package/README.md

@@ -70,43 +70,99 @@ type CartProduct = {
 Pass an `id` whenever a cart can hold two lines with the same name. Prices are
 formatted with `Intl.NumberFormat`, and the total is summed from `price`.
 
-### `TextInput`
+### `Typography`
+
+```tsx
+import { Typography } from "@carbonbits/sixr/typography";
+```
+
+The type scale. Every piece of text the library renders goes through it, and it is
+the component to reach for when yours does too. Server-safe.
+
+| Prop           | Type                                                                      | Default            | Description                                              |
+| -------------- | ------------------------------------------------------------------------- | ------------------ | -------------------------------------------------------- |
+| `variant`      | `"display" \| "heading" \| "subheading" \| "body" \| "label" \| "hint" \| "code"` | `"body"` | Size, default element and default weight.                |
+| `tone`         | `"default" \| "muted" \| "subtle" \| "accent" \| "on-accent" \| "success" \| "warning" \| "info" \| "danger"` | `"default"` | Colour role from the design tokens. |
+| `weight`       | `"regular" \| "medium" \| "semibold" \| "bold"`                           | per variant        | Overrides the variant's weight.                          |
+| `align`        | `"start" \| "center" \| "end"`                                            | —                  | Text alignment.                                          |
+| `truncate`     | `boolean`                                                                 | `false`            | One line, clipped with an ellipsis.                      |
+| `icon`         | `ReactNode`                                                               | —                  | An icon beside the text, sized to it, `aria-hidden`.     |
+| `iconPosition` | `"leading" \| "trailing"`                                                 | `"leading"`        | Which side the icon sits on.                             |
+| `as`           | `"p" \| "span" \| "div" \| "h1"…"h6" \| "label" \| "code" \| …`           | per variant        | The element to render.                                   |
+| `asChild`      | `boolean`                                                                 | `false`            | Merge the styles onto the child element instead.         |
+
+Default elements: `display` → `h1`, `heading` → `h2`, `subheading` → `h3`, `body` and
+`hint` → `p`, `label` → `span`, `code` → `code`. Any other HTML attribute passes through.
+
+```tsx
+<Typography variant="heading">Welcome back</Typography>
+<Typography tone="muted">Sign in to your Carbonbits workspace.</Typography>
+<Typography variant="hint" tone="success" icon={<CheckIcon />}>
+  Verification code accepted
+</Typography>
+
+// Style your own element — a Next.js Link, a Radix Label — with `asChild`.
+<Typography variant="label" tone="accent" asChild>
+  <Link href="/reset">Forgot your password?</Link>
+</Typography>
+```
+
+### Inputs: `TextInput`, `EmailInput`, `PasswordInput`, `PhoneInput`
 
 ```tsx
 import { TextInput } from "@carbonbits/sixr/text-input";
+import { EmailInput } from "@carbonbits/sixr/email-input";
+import { PasswordInput } from "@carbonbits/sixr/password-input";
+import { PhoneInput } from "@carbonbits/sixr/phone-input";
 ```
 
-A labelled text field with optional schema validation. Interactive, so it ships its
-own `"use client"` directive and is reachable only at this subpath — it is not on the
-root barrel, which stays server-safe.
+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:
+
+| Component       | Value            | Fixes                                                                  |
+| --------------- | ---------------- | ---------------------------------------------------------------------- |
+| `TextInput`     | Free text        | `type="text"`. Adds `mono` for the monospace face (verification codes). |
+| `EmailInput`    | An email address | `type="email"`, `inputMode="email"`, `autoComplete="email"`, no autocapitalise or spellcheck. |
+| `PasswordInput` | A secret         | `type="password"`, `autoComplete="current-password"`, and a built-in Show/Hide toggle. |
+| `PhoneInput`    | A phone number   | `type="tel"`, `inputMode="tel"`, `autoComplete="tel"`.                  |
+
+Interactive, so each ships its own `"use client"` directive and is reachable only at
+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`             | `TextInputSchema`                    | —        | Any zod schema. Only `safeParse` is called.           |
+| `schema`             | `FieldSchema`                        | —        | Any zod schema. Only `safeParse` is called.           |
 | `validateOn`         | `"blur" \| "change" \| "never"`      | `"blur"` | When the schema runs.                                 |
-| `onValidationChange` | `(state: TextInputValidation) => void` | —      | Fires on each validation pass.                        |
+| `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, e.g. a password peek.         |
-| `mono`               | `boolean`                            | `false`  | Renders the value in the monospace face.              |
-| `type`               | `"text" \| "email" \| "password" \| "tel" \| "url" \| "search"` | `"text"` | Input type.       |
+| `trailing`           | `ReactNode`                          | —        | Trailing in-field slot. Not on `PasswordInput`, which owns it. |
 
-Any other `<input>` attribute — `placeholder`, `maxLength`, `disabled`, `inputMode` —
-is passed straight through.
+And their own:
+
+| Component       | Prop           | Type                             | Default                          | Description                          |
+| --------------- | -------------- | -------------------------------- | -------------------------------- | ------------------------------------ |
+| `TextInput`     | `mono`         | `boolean`                        | `false`                          | Renders the value in the monospace face. |
+| `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.
 
 ```tsx
-import { TextInput } from "@carbonbits/sixr/text-input";
+import { EmailInput } from "@carbonbits/sixr/email-input";
 import { emailSchema } from "@carbonbits/sixr/validation";
 
-<TextInput
+<EmailInput
   label="Work email"
-  type="email"
   placeholder="you@company.com"
   schema={emailSchema}
   onChange={setEmail}
@@ -119,7 +175,9 @@ is shown, the input gets `aria-invalid`, and the message is announced via `role=
 and wired up with `aria-describedby`.
 
 `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.
+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".
 
 ### `Form` / `FormError` / `SubmitButton`
 
@@ -140,8 +198,9 @@ is reachable only at this subpath.
 | `SubmitButton`| `loadingLabel` | `ReactNode`                 | Shown next to the spinner in place of `children` while submitting. |
 
 ```tsx
+import { EmailInput } from "@carbonbits/sixr/email-input";
 import { Form, FormError, SubmitButton } from "@carbonbits/sixr/form";
-import { TextInput } from "@carbonbits/sixr/text-input";
+import { PasswordInput } from "@carbonbits/sixr/password-input";
 
 function LoginForm() {
   const [email, setEmail] = useState("");
@@ -156,8 +215,8 @@ function LoginForm() {
 
   return (
     <Form onSubmit={handleSubmit}>
-      <TextInput label="Work email" type="email" onChange={setEmail} />
-      <TextInput label="Password" type="password" onChange={setPassword} />
+      <EmailInput label="Work email" onChange={setEmail} />
+      <PasswordInput label="Password" onChange={setPassword} />
       <FormError>{error}</FormError>
       <SubmitButton loadingLabel="Signing in…">Sign in</SubmitButton>
     </Form>

package/dist/chunk-NZHHNVXZ.js

@@ -0,0 +1,118 @@
+import { Slot } from '@radix-ui/react-slot';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/typography/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 ? Slot : as ?? DEFAULT_ELEMENT[variant];
+  const iconNode = hasIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
+  const content = hasIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconPosition === "leading" ? iconNode : null,
+    /* @__PURE__ */ jsx("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
+    iconPosition === "trailing" ? iconNode : null
+  ] }) : children;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...rest,
+      className: typographyClassName({
+        variant,
+        tone,
+        weight: weight ?? DEFAULT_WEIGHT[variant],
+        align,
+        truncate,
+        hasIcon,
+        className
+      }),
+      children: content
+    }
+  );
+}
+
+export { Typography };
+//# sourceMappingURL=chunk-NZHHNVXZ.js.map
+//# sourceMappingURL=chunk-NZHHNVXZ.js.map

package/dist/chunk-NZHHNVXZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/index.tsx"],"names":[],"mappings":";;;;AA+EA,IAAM,eAAA,GAAgE;AAAA,EACpE,OAAA,EAAS,IAAA;AAAA,EACT,OAAA,EAAS,IAAA;AAAA,EACT,UAAA,EAAY,IAAA;AAAA,EACZ,IAAA,EAAM,GAAA;AAAA,EACN,KAAA,EAAO,MAAA;AAAA,EACP,IAAA,EAAM,GAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,cAAA,GAA8D;AAAA,EAClE,OAAA,EAAS,UAAA;AAAA,EACT,OAAA,EAAS,UAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,IAAA,EAAM,SAAA;AAAA,EACN,KAAA,EAAO,UAAA;AAAA,EACP,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,eAAA,GAAqD;AAAA,EACzD,OAAA,EAAS,2CAAA;AAAA,EACT,OAAA,EAAS,2CAAA;AAAA,EACT,UAAA,EAAY,8BAAA;AAAA,EACZ,IAAA,EAAM,2BAAA;AAAA,EACN,KAAA,EAAO,2BAAA;AAAA,EACP,IAAA,EAAM,0BAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,YAAA,GAA+C;AAAA,EACnD,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,eAAA;AAAA,EACP,MAAA,EAAQ,gBAAA;AAAA,EACR,MAAA,EAAQ,aAAA;AAAA,EACR,WAAA,EAAa,gBAAA;AAAA,EACb,OAAA,EAAS,cAAA;AAAA,EACT,OAAA,EAAS,cAAA;AAAA,EACT,IAAA,EAAM,WAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,cAAA,GAAmD;AAAA,EACvD,OAAA,EAAS,aAAA;AAAA,EACT,MAAA,EAAQ,aAAA;AAAA,EACR,QAAA,EAAU,eAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,aAAA,GAAgB;AAAA,EACpB,KAAA,EAAO,YAAA;AAAA,EACP,MAAA,EAAQ,aAAA;AAAA,EACR,GAAA,EAAK;AACP,CAAA;AAEA,IAAM,YAAA,GACJ,mEAAA;AAEF,SAAS,mBAAA,CAAoB;AAAA,EAC3B,OAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAQW;AACT,EAAA,OAAO;AAAA,IACL,gBAAgB,OAAO,CAAA;AAAA,IACvB,aAAa,IAAI,CAAA;AAAA,IACjB,eAAe,MAAM,CAAA;AAAA,IACrB,KAAA,GAAQ,aAAA,CAAc,KAAK,CAAA,GAAI,EAAA;AAAA,IAC/B,UAAU,kCAAA,GAAqC,EAAA;AAAA;AAAA;AAAA,IAG/C,QAAA,IAAY,CAAC,OAAA,GAAU,UAAA,GAAa,EAAA;AAAA,IACpC,SAAA,IAAa;AAAA,GACf,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,OAAA,GAAU,MAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,EAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,GAAU,IAAA,KAAS,MAAA,IAAa,IAAA,KAAS,IAAA;AAG/C,EAAA,MAAM,SAAA,GAAyB,OAAA,GAC3B,IAAA,GACC,EAAA,IAAM,gBAAgB,OAAO,CAAA;AAElC,EAAA,MAAM,QAAA,GAAW,0BACf,GAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAW,YAAA,EACjC,QAAA,EAAA,IAAA,EACH,CAAA,GACE,IAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,0BACd,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,YAAA,KAAiB,YAAY,QAAA,GAAW,IAAA;AAAA,wBACxC,MAAA,EAAA,EAAK,SAAA,EAAW,QAAA,GAAW,kBAAA,GAAqB,QAC9C,QAAA,EACH,CAAA;AAAA,IACC,YAAA,KAAiB,aAAa,QAAA,GAAW;AAAA,GAAA,EAC5C,CAAA,GAEA,QAAA;AAGF,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAW,mBAAA,CAAoB;AAAA,QAC7B,OAAA;AAAA,QACA,IAAA;AAAA,QACA,MAAA,EAAQ,MAAA,IAAU,cAAA,CAAe,OAAO,CAAA;AAAA,QACxC,KAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACD,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-NZHHNVXZ.js","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"]}

package/dist/email-input.cjs

@@ -0,0 +1,390 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/email-input/index.tsx
+var email_input_exports = {};
+__export(email_input_exports, {
+  EmailInput: () => EmailInput
+});
+module.exports = __toCommonJS(email_input_exports);
+
+// src/components/field/index.tsx
+var import_react_label = require("@radix-ui/react-label");
+var import_react2 = require("react");
+
+// src/components/field/use-field-behaviour.ts
+var import_react = require("react");
+var FALLBACK_MESSAGE = "Invalid value";
+function runSchema(schema, value) {
+  if (!schema) {
+    return { valid: true };
+  }
+  const result = schema.safeParse(value);
+  if (result.success) {
+    return { valid: true };
+  }
+  return {
+    valid: false,
+    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE
+  };
+}
+function useFieldBehaviour({
+  value,
+  defaultValue,
+  error,
+  onChange,
+  onBlur,
+  schema,
+  validateOn = "blur",
+  onValidationChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(
+    defaultValue ?? ""
+  );
+  const [schemaError, setSchemaError] = (0, import_react.useState)(void 0);
+  const isControlled = value !== void 0;
+  const validate = (0, import_react.useCallback)(
+    (next) => {
+      const state = runSchema(schema, next);
+      setSchemaError(state.error);
+      onValidationChange?.(state);
+    },
+    [schema, onValidationChange]
+  );
+  const handleChange = (0, import_react.useCallback)(
+    (event) => {
+      const next = event.target.value;
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onChange?.(next);
+      if (validateOn === "change" || validateOn === "blur" && schemaError) {
+        validate(next);
+      }
+    },
+    [isControlled, onChange, validateOn, schemaError, validate]
+  );
+  const handleBlur = (0, import_react.useCallback)(
+    (event) => {
+      if (validateOn === "blur") {
+        validate(event.target.value);
+      }
+      onBlur?.(event);
+    },
+    [validateOn, validate, onBlur]
+  );
+  return {
+    currentValue: isControlled ? value : uncontrolledValue,
+    // A caller-supplied error outranks the schema's verdict.
+    shownError: error ?? schemaError,
+    handleChange,
+    handleBlur
+  };
+}
+
+// src/components/typography/index.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime = require("react/jsx-runtime");
+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 ? import_react_slot.Slot : as ?? DEFAULT_ELEMENT[variant];
+  const iconNode = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
+  const content = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    iconPosition === "leading" ? iconNode : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
+    iconPosition === "trailing" ? iconNode : null
+  ] }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: typographyClassName({
+        variant,
+        tone,
+        weight: weight ?? DEFAULT_WEIGHT[variant],
+        align,
+        truncate,
+        hasIcon,
+        className
+      }),
+      children: content
+    }
+  );
+}
+
+// src/components/field/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FIELD_CLASSES = "h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45";
+var VALID_CLASSES = "border-line focus:border-accent focus:ring-3 focus:ring-accent-soft";
+var INVALID_CLASSES = "border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft";
+function fieldClassName(invalid, hasTrailing, className) {
+  return [
+    FIELD_CLASSES,
+    invalid ? INVALID_CLASSES : VALID_CLASSES,
+    hasTrailing ? "pr-16" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function FieldLabel({
+  htmlFor,
+  label,
+  optional,
+  action
+}) {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Typography,
+    {
+      variant: "label",
+      tone: "muted",
+      className: "mb-1.5 flex items-center",
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_label.Label, { htmlFor, children: [
+        label,
+        optional ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: "hint",
+            tone: "subtle",
+            weight: "semibold",
+            className: "ml-auto",
+            children: "Optional"
+          }
+        ) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-auto", children: action }) : null
+      ] })
+    }
+  );
+}
+function FieldMessage({
+  id,
+  error,
+  hint
+}) {
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Typography,
+      {
+        as: "p",
+        variant: "hint",
+        tone: "danger",
+        id,
+        role: "alert",
+        className: "mt-1.5",
+        children: error
+      }
+    );
+  }
+  if (hint) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Typography,
+      {
+        as: "p",
+        variant: "hint",
+        tone: "subtle",
+        id,
+        className: "mt-1.5",
+        children: hint
+      }
+    );
+  }
+  return null;
+}
+function Field({
+  label,
+  hint,
+  error,
+  optional = false,
+  action,
+  trailing,
+  type,
+  value,
+  defaultValue,
+  onChange,
+  schema,
+  validateOn = "blur",
+  onValidationChange,
+  id,
+  className,
+  onBlur,
+  ...rest
+}) {
+  const generatedId = (0, import_react2.useId)();
+  const inputId = id ?? generatedId;
+  const describedById = `${inputId}-description`;
+  const { currentValue, shownError, handleChange, handleBlur } = useFieldBehaviour({
+    value,
+    defaultValue,
+    error,
+    onChange,
+    onBlur,
+    schema,
+    validateOn,
+    onValidationChange
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FieldLabel,
+      {
+        htmlFor: inputId,
+        label,
+        optional,
+        action
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: trailing ? "relative" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type,
+          value: currentValue,
+          "aria-invalid": shownError ? true : void 0,
+          "aria-describedby": shownError || hint ? describedById : void 0,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          className: fieldClassName(
+            Boolean(shownError),
+            Boolean(trailing),
+            className
+          )
+        }
+      ),
+      trailing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center text-hint font-semibold text-fg-subtle", children: trailing }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldMessage, { id: describedById, error: shownError, hint })
+  ] });
+}
+
+// src/components/email-input/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function EmailInput({
+  autoComplete = "email",
+  inputMode = "email",
+  autoCapitalize = "none",
+  spellCheck = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Field,
+    {
+      ...rest,
+      type: "email",
+      autoComplete,
+      inputMode,
+      autoCapitalize,
+      spellCheck
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmailInput
+});
+//# sourceMappingURL=email-input.cjs.map