@carbonbits/sixr 1.3.0 → 1.4.0

package/dist/text-input.js

@@ -1,16 +1,15 @@
 "use client";
 "use client";
 
-// src/components/text-input/index.tsx
+// src/components/field/index.tsx
+import { Label } from "@radix-ui/react-label";
+import { useId } from "react";
+
+// src/components/field/use-field-behaviour.ts
 import {
   useCallback,
-  useId,
   useState
 } from "react";
-import { jsx, jsxs } from "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";
 var FALLBACK_MESSAGE = "Invalid value";
 function runSchema(schema, value) {
   if (!schema) {
@@ -25,50 +24,6 @@ function runSchema(schema, value) {
     error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE
   };
 }
-function fieldClassName(invalid, mono, hasTrailing, className) {
-  return [
-    FIELD_CLASSES,
-    invalid ? INVALID_CLASSES : VALID_CLASSES,
-    mono ? "font-code" : "",
-    hasTrailing ? "pr-16" : "",
-    className ?? ""
-  ].filter(Boolean).join(" ");
-}
-function FieldLabel({
-  htmlFor,
-  label,
-  optional,
-  action
-}) {
-  if (!label) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor,
-      className: "mb-1.5 flex items-center text-label font-semibold text-fg-muted",
-      children: [
-        label,
-        optional ? /* @__PURE__ */ jsx("span", { className: "ml-auto text-hint font-semibold text-fg-subtle", children: "Optional" }) : null,
-        action ? /* @__PURE__ */ jsx("span", { className: "ml-auto", children: action }) : null
-      ]
-    }
-  );
-}
-function FieldMessage({
-  id,
-  error,
-  hint
-}) {
-  if (error) {
-    return /* @__PURE__ */ jsx("p", { id, role: "alert", className: "mt-1.5 text-hint text-danger", children: error });
-  }
-  if (hint) {
-    return /* @__PURE__ */ jsx("p", { id, className: "mt-1.5 text-hint text-fg-subtle", children: hint });
-  }
-  return null;
-}
 function useFieldBehaviour({
   value,
   defaultValue,
@@ -122,15 +77,210 @@ function useFieldBehaviour({
     handleBlur
   };
 }
-function TextInput({
+
+// src/components/typography/index.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "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 ? 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
+    }
+  );
+}
+
+// src/components/field/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsx2(
+    Typography,
+    {
+      variant: "label",
+      tone: "muted",
+      className: "mb-1.5 flex items-center",
+      asChild: true,
+      children: /* @__PURE__ */ jsxs2(Label, { htmlFor, children: [
+        label,
+        optional ? /* @__PURE__ */ jsx2(
+          Typography,
+          {
+            as: "span",
+            variant: "hint",
+            tone: "subtle",
+            weight: "semibold",
+            className: "ml-auto",
+            children: "Optional"
+          }
+        ) : null,
+        action ? /* @__PURE__ */ jsx2("span", { className: "ml-auto", children: action }) : null
+      ] })
+    }
+  );
+}
+function FieldMessage({
+  id,
+  error,
+  hint
+}) {
+  if (error) {
+    return /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        as: "p",
+        variant: "hint",
+        tone: "danger",
+        id,
+        role: "alert",
+        className: "mt-1.5",
+        children: error
+      }
+    );
+  }
+  if (hint) {
+    return /* @__PURE__ */ jsx2(
+      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,
-  mono = false,
-  type = "text",
+  type,
   value,
   defaultValue,
   onChange,
@@ -155,8 +305,8 @@ function TextInput({
     validateOn,
     onValidationChange
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx2(
       FieldLabel,
       {
         htmlFor: inputId,
@@ -165,8 +315,8 @@ function TextInput({
         action
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: trailing ? "relative" : void 0, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs2("div", { className: trailing ? "relative" : void 0, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ...rest,
@@ -179,17 +329,33 @@ function TextInput({
           onBlur: handleBlur,
           className: fieldClassName(
             Boolean(shownError),
-            mono,
             Boolean(trailing),
             className
           )
         }
       ),
-      trailing ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle", children: trailing }) : null
+      trailing ? /* @__PURE__ */ jsx2("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__ */ jsx(FieldMessage, { id: describedById, error: shownError, hint })
+    /* @__PURE__ */ jsx2(FieldMessage, { id: describedById, error: shownError, hint })
   ] });
 }
+
+// src/components/text-input/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TextInput({
+  mono = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3(
+    Field,
+    {
+      ...rest,
+      type: "text",
+      className: [mono ? "font-code" : "", className ?? ""].filter(Boolean).join(" ")
+    }
+  );
+}
 export {
   TextInput
 };

package/dist/text-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/text-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useId,\n  useState,\n} from \"react\";\n\n/**\n * Structural shape of a zod schema — every zod schema satisfies it, and any\n * version of zod does. Declaring it this way rather than importing `ZodType`\n * keeps zod out of this module's public types, so consumers who only want an\n * input do not have to install zod to typecheck it.\n */\nexport type TextInputSchema = {\n  safeParse: (\n    value: unknown,\n  ) =>\n    | { success: true }\n    | { success: false; error: { issues: readonly { message: string }[] } };\n};\n\n/** Outcome of a single validation pass, handed to `onValidationChange`. */\nexport type TextInputValidation = {\n  valid: boolean;\n  /** First issue reported by the schema, or `undefined` when valid. */\n  error?: string;\n};\n\nexport type TextInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"type\"\n> & {\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over the schema, so a form can hold a field invalid regardless\n   * of what `schema` makes of the value on its own.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n  /** Renders the value in the design's monospace face. */\n  mono?: boolean;\n  type?: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\";\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Any zod schema that accepts a string. Only `safeParse` is used, so a\n   * refined, transformed or preprocessed schema works as well as a plain one.\n   */\n  schema?: TextInputSchema;\n  /**\n   * When the schema runs. `blur` — the default — avoids scolding someone\n   * mid-keystroke; once a field has gone invalid it revalidates on every\n   * keystroke so the message clears as soon as it is fixed.\n   */\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: TextInputValidation) => void;\n};\n\nconst FIELD_CLASSES =\n  \"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\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\nconst FALLBACK_MESSAGE = \"Invalid value\";\n\nfunction runSchema(\n  schema: TextInputSchema | undefined,\n  value: string,\n): TextInputValidation {\n  if (!schema) {\n    return { valid: true };\n  }\n\n  const result = schema.safeParse(value);\n  if (result.success) {\n    return { valid: true };\n  }\n\n  return {\n    valid: false,\n    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE,\n  };\n}\n\nfunction fieldClassName(\n  invalid: boolean,\n  mono: boolean,\n  hasTrailing: boolean,\n  className: string | undefined,\n): string {\n  return [\n    FIELD_CLASSES,\n    invalid ? INVALID_CLASSES : VALID_CLASSES,\n    mono ? \"font-code\" : \"\",\n    hasTrailing ? \"pr-16\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction FieldLabel({\n  htmlFor,\n  label,\n  optional,\n  action,\n}: {\n  htmlFor: string;\n  label: string | undefined;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  if (!label) {\n    return null;\n  }\n\n  return (\n    <label\n      htmlFor={htmlFor}\n      className=\"mb-1.5 flex items-center text-label font-semibold text-fg-muted\"\n    >\n      {label}\n      {optional ? (\n        <span className=\"ml-auto text-hint font-semibold text-fg-subtle\">\n          Optional\n        </span>\n      ) : null}\n      {action ? <span className=\"ml-auto\">{action}</span> : null}\n    </label>\n  );\n}\n\nfunction FieldMessage({\n  id,\n  error,\n  hint,\n}: {\n  id: string;\n  error: string | undefined;\n  hint: ReactNode;\n}) {\n  if (error) {\n    return (\n      <p id={id} role=\"alert\" className=\"mt-1.5 text-hint text-danger\">\n        {error}\n      </p>\n    );\n  }\n\n  if (hint) {\n    return (\n      <p id={id} className=\"mt-1.5 text-hint text-fg-subtle\">\n        {hint}\n      </p>\n    );\n  }\n\n  return null;\n}\n\ntype FieldBehaviour = Pick<\n  TextInputProps,\n  | \"value\"\n  | \"defaultValue\"\n  | \"error\"\n  | \"onChange\"\n  | \"onBlur\"\n  | \"schema\"\n  | \"validateOn\"\n  | \"onValidationChange\"\n>;\n\n/**\n * Owns the value (controlled or not), the schema verdict, and when to re-run\n * it. Split out so the component itself stays markup.\n */\nfunction useFieldBehaviour({\n  value,\n  defaultValue,\n  error,\n  onChange,\n  onBlur,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n}: FieldBehaviour) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? \"\",\n  );\n  const [schemaError, setSchemaError] = useState<string | undefined>(undefined);\n\n  const isControlled = value !== undefined;\n\n  const validate = useCallback(\n    (next: string) => {\n      const state = runSchema(schema, next);\n      setSchemaError(state.error);\n      onValidationChange?.(state);\n    },\n    [schema, onValidationChange],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value;\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n\n      // Revalidate on every keystroke once the field is already invalid, so a\n      // corrected value clears the message without waiting for another blur.\n      if (validateOn === \"change\" || (validateOn === \"blur\" && schemaError)) {\n        validate(next);\n      }\n    },\n    [isControlled, onChange, validateOn, schemaError, validate],\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      if (validateOn === \"blur\") {\n        validate(event.target.value);\n      }\n      onBlur?.(event);\n    },\n    [validateOn, validate, onBlur],\n  );\n\n  return {\n    currentValue: isControlled ? value : uncontrolledValue,\n    // A caller-supplied error outranks the schema's verdict.\n    shownError: error ?? schemaError,\n    handleChange,\n    handleBlur,\n  };\n}\n\nexport function TextInput({\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  mono = false,\n  type = \"text\",\n  value,\n  defaultValue,\n  onChange,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n  id,\n  className,\n  onBlur,\n  ...rest\n}: TextInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const describedById = `${inputId}-description`;\n\n  const { currentValue, shownError, handleChange, handleBlur } =\n    useFieldBehaviour({\n      value,\n      defaultValue,\n      error,\n      onChange,\n      onBlur,\n      schema,\n      validateOn,\n      onValidationChange,\n    });\n\n  return (\n    <div className=\"flex flex-col\">\n      <FieldLabel\n        htmlFor={inputId}\n        label={label}\n        optional={optional}\n        action={action}\n      />\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <input\n          {...rest}\n          id={inputId}\n          type={type}\n          value={currentValue}\n          aria-invalid={shownError ? true : undefined}\n          aria-describedby={shownError || hint ? describedById : undefined}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          className={fieldClassName(\n            Boolean(shownError),\n            mono,\n            Boolean(trailing),\n            className,\n          )}\n        />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] -translate-y-1/2 text-hint font-semibold text-fg-subtle\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <FieldMessage id={describedById} error={shownError} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/field/index.tsx","../src/components/field/use-field-behaviour.ts","../src/components/typography/index.tsx","../src/components/text-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { type InputHTMLAttributes, type ReactNode, useId } from \"react\";\nimport {\n  type FieldSchema,\n  type FieldValidation,\n  useFieldBehaviour,\n} from \"@/components/field/use-field-behaviour\";\nimport { Typography } from \"@/components/typography\";\n\nexport type {\n  FieldSchema,\n  FieldValidation,\n} from \"@/components/field/use-field-behaviour\";\n\n/**\n * The single-line input behind `TextInput`, `EmailInput`, `PasswordInput` and\n * `PhoneInput`. Each of those fixes the `type` (and the keyboard, autocomplete\n * and validation defaults that go with it) and hands everything else here.\n *\n * Internal: this module has no subpath of its own. Consumers reach it through\n * the specialised inputs, and its shared types through the barrel.\n */\n\nexport type FieldType = \"text\" | \"email\" | \"password\" | \"tel\";\n\n/** Props every specialised input shares. `type` is fixed by the wrapper. */\nexport type FieldProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"type\"\n> & {\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over the schema, so a form can hold a field invalid regardless\n   * of what `schema` makes of the value on its own.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Any zod schema that accepts a string. Only `safeParse` is used, so a\n   * refined, transformed or preprocessed schema works as well as a plain one.\n   */\n  schema?: FieldSchema;\n  /**\n   * When the schema runs. `blur` — the default — avoids scolding someone\n   * mid-keystroke; once a field has gone invalid it revalidates on every\n   * keystroke so the message clears as soon as it is fixed.\n   */\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: FieldValidation) => void;\n};\n\nconst FIELD_CLASSES =\n  \"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\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\nfunction fieldClassName(\n  invalid: boolean,\n  hasTrailing: boolean,\n  className: string | undefined,\n): string {\n  return [\n    FIELD_CLASSES,\n    invalid ? INVALID_CLASSES : VALID_CLASSES,\n    hasTrailing ? \"pr-16\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction FieldLabel({\n  htmlFor,\n  label,\n  optional,\n  action,\n}: {\n  htmlFor: string;\n  label: string | undefined;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  if (!label) {\n    return null;\n  }\n\n  return (\n    <Typography\n      variant=\"label\"\n      tone=\"muted\"\n      className=\"mb-1.5 flex items-center\"\n      asChild\n    >\n      <Label htmlFor={htmlFor}>\n        {label}\n        {optional ? (\n          <Typography\n            as=\"span\"\n            variant=\"hint\"\n            tone=\"subtle\"\n            weight=\"semibold\"\n            className=\"ml-auto\"\n          >\n            Optional\n          </Typography>\n        ) : null}\n        {action ? <span className=\"ml-auto\">{action}</span> : null}\n      </Label>\n    </Typography>\n  );\n}\n\nfunction FieldMessage({\n  id,\n  error,\n  hint,\n}: {\n  id: string;\n  error: string | undefined;\n  hint: ReactNode;\n}) {\n  if (error) {\n    return (\n      <Typography\n        as=\"p\"\n        variant=\"hint\"\n        tone=\"danger\"\n        id={id}\n        role=\"alert\"\n        className=\"mt-1.5\"\n      >\n        {error}\n      </Typography>\n    );\n  }\n\n  if (hint) {\n    return (\n      <Typography\n        as=\"p\"\n        variant=\"hint\"\n        tone=\"subtle\"\n        id={id}\n        className=\"mt-1.5\"\n      >\n        {hint}\n      </Typography>\n    );\n  }\n\n  return null;\n}\n\nexport type FieldComponentProps = FieldProps & { type: FieldType };\n\nexport function Field({\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  type,\n  value,\n  defaultValue,\n  onChange,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n  id,\n  className,\n  onBlur,\n  ...rest\n}: FieldComponentProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const describedById = `${inputId}-description`;\n\n  const { currentValue, shownError, handleChange, handleBlur } =\n    useFieldBehaviour({\n      value,\n      defaultValue,\n      error,\n      onChange,\n      onBlur,\n      schema,\n      validateOn,\n      onValidationChange,\n    });\n\n  return (\n    <div className=\"flex flex-col\">\n      <FieldLabel\n        htmlFor={inputId}\n        label={label}\n        optional={optional}\n        action={action}\n      />\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <input\n          {...rest}\n          id={inputId}\n          type={type}\n          value={currentValue}\n          aria-invalid={shownError ? true : undefined}\n          aria-describedby={shownError || hint ? describedById : undefined}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          className={fieldClassName(\n            Boolean(shownError),\n            Boolean(trailing),\n            className,\n          )}\n        />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center text-hint font-semibold text-fg-subtle\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <FieldMessage id={describedById} error={shownError} hint={hint} />\n    </div>\n  );\n}\n","import {\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useState,\n} from \"react\";\n\n/**\n * Structural shape of a zod schema — every zod schema satisfies it, and any\n * version of zod does. Declaring it this way rather than importing `ZodType`\n * keeps zod out of this module's public types, so consumers who only want an\n * input do not have to install zod to typecheck it.\n */\nexport type FieldSchema = {\n  safeParse: (\n    value: unknown,\n  ) =>\n    | { success: true }\n    | { success: false; error: { issues: readonly { message: string }[] } };\n};\n\n/** Outcome of a single validation pass, handed to `onValidationChange`. */\nexport type FieldValidation = {\n  valid: boolean;\n  /** First issue reported by the schema, or `undefined` when valid. */\n  error?: string;\n};\n\nexport type FieldBehaviour = {\n  value?: string;\n  defaultValue?: string;\n  /** A caller-supplied error. Outranks the schema's verdict. */\n  error?: string;\n  onChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  schema?: FieldSchema;\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: FieldValidation) => void;\n};\n\nconst FALLBACK_MESSAGE = \"Invalid value\";\n\nfunction runSchema(\n  schema: FieldSchema | undefined,\n  value: string,\n): FieldValidation {\n  if (!schema) {\n    return { valid: true };\n  }\n\n  const result = schema.safeParse(value);\n  if (result.success) {\n    return { valid: true };\n  }\n\n  return {\n    valid: false,\n    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE,\n  };\n}\n\n/**\n * Owns the value (controlled or not), the schema verdict, and when to re-run\n * it. Split out so the `Field` component itself stays markup.\n */\nexport function useFieldBehaviour({\n  value,\n  defaultValue,\n  error,\n  onChange,\n  onBlur,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n}: FieldBehaviour) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? \"\",\n  );\n  const [schemaError, setSchemaError] = useState<string | undefined>(undefined);\n\n  const isControlled = value !== undefined;\n\n  const validate = useCallback(\n    (next: string) => {\n      const state = runSchema(schema, next);\n      setSchemaError(state.error);\n      onValidationChange?.(state);\n    },\n    [schema, onValidationChange],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value;\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n\n      // Revalidate on every keystroke once the field is already invalid, so a\n      // corrected value clears the message without waiting for another blur.\n      if (validateOn === \"change\" || (validateOn === \"blur\" && schemaError)) {\n        validate(next);\n      }\n    },\n    [isControlled, onChange, validateOn, schemaError, validate],\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      if (validateOn === \"blur\") {\n        validate(event.target.value);\n      }\n      onBlur?.(event);\n    },\n    [validateOn, validate, onBlur],\n  );\n\n  return {\n    currentValue: isControlled ? value : uncontrolledValue,\n    // A caller-supplied error outranks the schema's verdict.\n    shownError: error ?? schemaError,\n    handleChange,\n    handleBlur,\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","\"use client\";\n\nimport { Field, type FieldProps } from \"@/components/field\";\n\nexport type {\n  FieldSchema,\n  FieldValidation,\n} from \"@/components/field\";\n\n/**\n * Plain free text: names, job titles, one-time codes. Anything with a format\n * of its own — an email address, a phone number, a password — has its own\n * component (`EmailInput`, `PhoneInput`, `PasswordInput`), which fixes the\n * keyboard, autocomplete and input type that format needs.\n */\nexport type TextInputProps = FieldProps & {\n  /** Renders the value in the design's monospace face, as the code entry does. */\n  mono?: boolean;\n};\n\nexport function TextInput({\n  mono = false,\n  className,\n  ...rest\n}: TextInputProps) {\n  return (\n    <Field\n      {...rest}\n      type=\"text\"\n      className={[mono ? \"font-code\" : \"\", className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n    />\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx"]}

package/dist/typography.cjs

@@ -0,0 +1,120 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var jsxRuntime = require('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 ? 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
+    }
+  );
+}
+
+exports.Typography = Typography;
+//# sourceMappingURL=typography.cjs.map
+//# sourceMappingURL=typography.cjs.map

package/dist/typography.cjs.map

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

package/dist/typography.d.cts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+
+/**
+ * The library's type scale. Everything that renders text — field labels, hints,
+ * form errors, headings — goes through here, so a size or colour lives in one
+ * place and the tokens in `src/styles/index.css` stay the single source of
+ * truth for what "hint" or "muted" means.
+ *
+ * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`
+ * for `asChild`, which is how a consumer puts these styles on their own
+ * element (a `next/link`, a Radix `Label`) without an extra wrapper.
+ */
+type TypographyVariant = "display" | "heading" | "subheading" | "body" | "label" | "hint" | "code";
+type TypographyTone = "default" | "muted" | "subtle" | "accent" | "on-accent" | "success" | "warning" | "info" | "danger";
+type TypographyWeight = "regular" | "medium" | "semibold" | "bold";
+type TypographyElement = "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "code" | "strong" | "em" | "small";
+type TypographyProps = Omit<HTMLAttributes<HTMLElement>, "color"> & {
+    /** Size and default element. `body` unless told otherwise. */
+    variant?: TypographyVariant;
+    /** Colour role, from the design tokens. */
+    tone?: TypographyTone;
+    /** Overrides the variant's default weight. */
+    weight?: TypographyWeight;
+    align?: "start" | "center" | "end";
+    /** Clip to one line with an ellipsis. */
+    truncate?: boolean;
+    /**
+     * An icon rendered beside the text, hidden from assistive tech. Sized to the
+     * text with `1em`, so the same SVG fits every variant.
+     */
+    icon?: ReactNode;
+    iconPosition?: "leading" | "trailing";
+    /** The element to render. Defaults per variant (`h2` for a heading, and so on). */
+    as?: TypographyElement;
+    /**
+     * Radix-style composition: render the child element itself, with these
+     * styles merged onto it, instead of a wrapper. Takes precedence over `as`.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLElement>;
+    children?: ReactNode;
+};
+declare function Typography({ variant, tone, weight, align, truncate, icon, iconPosition, as, asChild, className, children, ...rest }: TypographyProps): react.JSX.Element;
+
+export { Typography, type TypographyElement, type TypographyProps, type TypographyTone, type TypographyVariant, type TypographyWeight };

package/dist/typography.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+
+/**
+ * The library's type scale. Everything that renders text — field labels, hints,
+ * form errors, headings — goes through here, so a size or colour lives in one
+ * place and the tokens in `src/styles/index.css` stay the single source of
+ * truth for what "hint" or "muted" means.
+ *
+ * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`
+ * for `asChild`, which is how a consumer puts these styles on their own
+ * element (a `next/link`, a Radix `Label`) without an extra wrapper.
+ */
+type TypographyVariant = "display" | "heading" | "subheading" | "body" | "label" | "hint" | "code";
+type TypographyTone = "default" | "muted" | "subtle" | "accent" | "on-accent" | "success" | "warning" | "info" | "danger";
+type TypographyWeight = "regular" | "medium" | "semibold" | "bold";
+type TypographyElement = "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "code" | "strong" | "em" | "small";
+type TypographyProps = Omit<HTMLAttributes<HTMLElement>, "color"> & {
+    /** Size and default element. `body` unless told otherwise. */
+    variant?: TypographyVariant;
+    /** Colour role, from the design tokens. */
+    tone?: TypographyTone;
+    /** Overrides the variant's default weight. */
+    weight?: TypographyWeight;
+    align?: "start" | "center" | "end";
+    /** Clip to one line with an ellipsis. */
+    truncate?: boolean;
+    /**
+     * An icon rendered beside the text, hidden from assistive tech. Sized to the
+     * text with `1em`, so the same SVG fits every variant.
+     */
+    icon?: ReactNode;
+    iconPosition?: "leading" | "trailing";
+    /** The element to render. Defaults per variant (`h2` for a heading, and so on). */
+    as?: TypographyElement;
+    /**
+     * Radix-style composition: render the child element itself, with these
+     * styles merged onto it, instead of a wrapper. Takes precedence over `as`.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLElement>;
+    children?: ReactNode;
+};
+declare function Typography({ variant, tone, weight, align, truncate, icon, iconPosition, as, asChild, className, children, ...rest }: TypographyProps): react.JSX.Element;
+
+export { Typography, type TypographyElement, type TypographyProps, type TypographyTone, type TypographyVariant, type TypographyWeight };

package/dist/typography.js

@@ -0,0 +1,3 @@
+export { Typography } from './chunk-NZHHNVXZ.js';
+//# sourceMappingURL=typography.js.map
+//# sourceMappingURL=typography.js.map