@carbonbits/sixr 1.3.0 → 1.5.0

package/dist/phone-input.cjs

@@ -0,0 +1,429 @@
+"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/phone-input/index.tsx
+var phone_input_exports = {};
+__export(phone_input_exports, {
+  PhoneInput: () => PhoneInput
+});
+module.exports = __toCommonJS(phone_input_exports);
+
+// src/components/field/index.tsx
+var import_react_label = require("@radix-ui/react-label");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FieldContext = (0, import_react.createContext)(null);
+function useFieldContext() {
+  const context = (0, import_react.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("Field primitives must be rendered inside FieldRoot");
+  }
+  return context;
+}
+function useFieldIds(id) {
+  const generated = (0, import_react.useId)();
+  const base = id ?? generated;
+  return {
+    id: base,
+    descriptionId: `${base}-description`,
+    messageId: `${base}-message`
+  };
+}
+function FieldShell({
+  value,
+  asChild = false,
+  children,
+  ...rest
+}) {
+  const [hasDescription, setHasDescription] = (0, import_react.useState)(false);
+  const Component = asChild ? import_react_slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldContext.Provider,
+    {
+      value: { ...value, hasDescription, setHasDescription },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Component,
+        {
+          ...rest,
+          "data-invalid": value.invalid ? "" : void 0,
+          "data-disabled": value.disabled ? "" : void 0,
+          children
+        }
+      )
+    }
+  );
+}
+function ConnectedFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  const { field, fieldState } = (0, import_react_hook_form.useController)({ name, disabled });
+  const shownError = error ?? fieldState.error?.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error: shownError,
+        invalid: Boolean(shownError),
+        required,
+        disabled: Boolean(field.disabled ?? disabled),
+        bindings: {
+          name: field.name,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          ref: field.ref
+        }
+      }
+    }
+  );
+}
+function StandaloneFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error,
+        invalid: Boolean(error),
+        required,
+        disabled,
+        bindings: { name }
+      }
+    }
+  );
+}
+function FieldRoot(props) {
+  const form = (0, import_react_hook_form.useFormContext)();
+  return form ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectedFieldRoot, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandaloneFieldRoot, { ...props });
+}
+function FieldLabel(props) {
+  const { id } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_label.Label, { ...props, htmlFor: id });
+}
+function describedBy({
+  error,
+  messageId,
+  hasDescription,
+  descriptionId
+}) {
+  if (error) {
+    return messageId;
+  }
+  return hasDescription ? descriptionId : void 0;
+}
+function FieldControl(props) {
+  const context = useFieldContext();
+  const { id, invalid, required, disabled, bindings } = context;
+  const controlProps = {
+    ...bindings,
+    id,
+    "aria-invalid": invalid || void 0,
+    "aria-required": required || void 0,
+    "aria-describedby": describedBy(context),
+    disabled: disabled || void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, { ...props, ...controlProps });
+}
+function FieldDescription({
+  asChild = false,
+  ...props
+}) {
+  const { descriptionId, error, setHasDescription } = useFieldContext();
+  (0, import_react.useEffect)(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
+  if (error) {
+    return null;
+  }
+  const Component = asChild ? import_react_slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, id: descriptionId });
+}
+function FieldMessage({
+  asChild = false,
+  children,
+  ...props
+}) {
+  const { messageId, error } = useFieldContext();
+  const content = error ?? children;
+  if (!content) {
+    return null;
+  }
+  const Component = asChild ? import_react_slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, id: messageId, role: "alert", children: content });
+}
+
+// src/components/typography/index.tsx
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime2 = 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_slot2.Slot : as ?? DEFAULT_ELEMENT[variant];
+  const iconNode = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
+  const content = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    iconPosition === "leading" ? iconNode : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
+    iconPosition === "trailing" ? iconNode : null
+  ] }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      ...rest,
+      className: typographyClassName({
+        variant,
+        tone,
+        weight: weight ?? DEFAULT_WEIGHT[variant],
+        align,
+        truncate,
+        hasIcon,
+        className
+      }),
+      children: content
+    }
+  );
+}
+
+// src/components/input/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CONTROL_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 InputLabel({
+  label,
+  optional,
+  action
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Typography,
+    {
+      variant: "label",
+      tone: "muted",
+      className: "mb-1.5 flex items-center",
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FieldLabel, { children: [
+        label,
+        optional ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: "hint",
+            tone: "subtle",
+            weight: "semibold",
+            className: "ml-auto",
+            children: "Optional"
+          }
+        ) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-auto", children: action }) : null
+      ] })
+    }
+  );
+}
+function InputControl({
+  hasTrailing,
+  className,
+  ...rest
+}) {
+  const { invalid } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldControl, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      ...rest,
+      className: [
+        CONTROL_CLASSES,
+        invalid ? INVALID_CLASSES : VALID_CLASSES,
+        hasTrailing ? "pr-16" : "",
+        className ?? ""
+      ].filter(Boolean).join(" ")
+    }
+  ) });
+}
+function InputMessages({ hint }) {
+  const { error } = useFieldContext();
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typography, { as: "p", variant: "hint", tone: "danger", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { className: "mt-1.5" }) });
+  }
+  if (hint) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typography, { as: "p", variant: "hint", tone: "subtle", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldDescription, { className: "mt-1.5", children: hint }) });
+  }
+  return null;
+}
+function InputField({
+  name,
+  label,
+  hint,
+  error,
+  optional = false,
+  action,
+  trailing,
+  id,
+  disabled,
+  required,
+  type,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    FieldRoot,
+    {
+      name,
+      id,
+      error,
+      disabled,
+      required,
+      className: "flex flex-col",
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputLabel, { label, optional, action }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: trailing ? "relative" : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputControl, { ...rest, type, hasTrailing: Boolean(trailing) }),
+          trailing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center font-semibold text-fg-subtle text-hint", children: trailing }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputMessages, { hint })
+      ]
+    }
+  );
+}
+
+// src/components/phone-input/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function PhoneInput({
+  autoComplete = "tel",
+  inputMode = "tel",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    InputField,
+    {
+      ...rest,
+      type: "tel",
+      autoComplete,
+      inputMode
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PhoneInput
+});
+//# sourceMappingURL=phone-input.cjs.map

package/dist/phone-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/phone-input/index.tsx","../src/components/field/index.tsx","../src/components/typography/index.tsx","../src/components/input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { InputField, type InputFieldProps } from \"@/components/input\";\n\n/**\n * A phone number. Fixes `type=\"tel\"` and the numeric keypad. Validate it with\n * `phoneSchema` from `@carbonbits/sixr/validation` in the enclosing `Form`'s\n * schema.\n */\nexport type PhoneInputProps = InputFieldProps;\n\nexport function PhoneInput({\n  autoComplete = \"tel\",\n  inputMode = \"tel\",\n  ...rest\n}: PhoneInputProps) {\n  return (\n    <InputField\n      {...rest}\n      type=\"tel\"\n      autoComplete={autoComplete}\n      inputMode={inputMode}\n    />\n  );\n}\n","\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport {\n  type FieldValues,\n  type UseFormReturn,\n  useController,\n  useFormContext,\n} from \"react-hook-form\";\n\n/**\n * The structure behind every form field, with no styling of its own: an id\n * shared by label and control, the error and description ids the control is\n * described by, the field's validity, and — inside a `Form` — the\n * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep\n * the control registered.\n *\n * Styled components compose these primitives with their own classes\n * (`TextInput` and friends do), and a screen that needs a control the\n * library does not ship — a select, a code entry, a toggle — composes them\n * the same way. Everything here is a plain element or a Radix `Slot`, so the\n * styling decisions stay with whoever renders the field.\n *\n * Outside a `Form` the primitives still wire label, control and messages\n * together; the control just isn't registered anywhere and the error comes\n * from the `error` prop alone.\n */\n\nexport type FieldBindings = {\n  name: string;\n  value?: unknown;\n  onChange?: (event: unknown) => void;\n  onBlur?: () => void;\n  ref?: (instance: HTMLElement | null) => void;\n};\n\nexport type FieldContextValue = {\n  id: string;\n  name: string;\n  descriptionId: string;\n  messageId: string;\n  error: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  hasDescription: boolean;\n  setHasDescription: (present: boolean) => void;\n  bindings: FieldBindings;\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\n// biome-ignore lint/style/useComponentExportOnlyModules: the hook is the primitives' public API for custom compositions and belongs on the same subpath.\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext);\n\n  if (!context) {\n    throw new Error(\"Field primitives must be rendered inside FieldRoot\");\n  }\n\n  return context;\n}\n\nexport type FieldRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** The form field this wires up — the key in the `Form`'s values. */\n  name: string;\n  /** A caller-supplied error. Outranks whatever the form's schema reports. */\n  error?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /** Render the child element as the root instead of a `div`. */\n  asChild?: boolean;\n  children: ReactNode;\n};\n\ntype FieldShellProps = Omit<\n  FieldRootProps,\n  \"name\" | \"error\" | \"required\" | \"disabled\"\n> & {\n  value: Omit<FieldContextValue, \"hasDescription\" | \"setHasDescription\">;\n};\n\nfunction useFieldIds(id: string | undefined) {\n  const generated = useId();\n  const base = id ?? generated;\n\n  return {\n    id: base,\n    descriptionId: `${base}-description`,\n    messageId: `${base}-message`,\n  };\n}\n\nfunction FieldShell({\n  value,\n  asChild = false,\n  children,\n  ...rest\n}: FieldShellProps) {\n  const [hasDescription, setHasDescription] = useState(false);\n  const Component = asChild ? Slot : \"div\";\n\n  return (\n    <FieldContext.Provider\n      value={{ ...value, hasDescription, setHasDescription }}\n    >\n      <Component\n        {...rest}\n        data-invalid={value.invalid ? \"\" : undefined}\n        data-disabled={value.disabled ? \"\" : undefined}\n      >\n        {children}\n      </Component>\n    </FieldContext.Provider>\n  );\n}\n\nfunction ConnectedFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n  const { field, fieldState } = useController({ name, disabled });\n  const shownError = error ?? fieldState.error?.message;\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error: shownError,\n        invalid: Boolean(shownError),\n        required,\n        disabled: Boolean(field.disabled ?? disabled),\n        bindings: {\n          name: field.name,\n          value: field.value ?? \"\",\n          onChange: field.onChange,\n          onBlur: field.onBlur,\n          ref: field.ref,\n        },\n      }}\n    />\n  );\n}\n\nfunction StandaloneFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error,\n        invalid: Boolean(error),\n        required,\n        disabled,\n        bindings: { name },\n      }}\n    />\n  );\n}\n\nexport function FieldRoot(props: FieldRootProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  return form ? (\n    <ConnectedFieldRoot {...props} />\n  ) : (\n    <StandaloneFieldRoot {...props} />\n  );\n}\n\nexport type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;\n\nexport function FieldLabel(props: FieldLabelProps) {\n  const { id } = useFieldContext();\n\n  return <Label {...props} htmlFor={id} />;\n}\n\nexport type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;\n\nfunction describedBy({\n  error,\n  messageId,\n  hasDescription,\n  descriptionId,\n}: Pick<\n  FieldContextValue,\n  \"error\" | \"messageId\" | \"hasDescription\" | \"descriptionId\"\n>): string | undefined {\n  if (error) {\n    return messageId;\n  }\n\n  return hasDescription ? descriptionId : undefined;\n}\n\n/**\n * Wires the field's id, name, validity and bindings onto whatever element it\n * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.\n * Handlers on the child still run; the bindings run after them.\n */\nexport function FieldControl(props: FieldControlProps) {\n  const context = useFieldContext();\n  const { id, invalid, required, disabled, bindings } = context;\n\n  // `disabled` is not on Slot's HTMLAttributes type, but it is what the\n  // wrapped control needs, so the bindings are spread untyped on purpose.\n  const controlProps: Record<string, unknown> = {\n    ...bindings,\n    id,\n    \"aria-invalid\": invalid || undefined,\n    \"aria-required\": required || undefined,\n    \"aria-describedby\": describedBy(context),\n    disabled: disabled || undefined,\n  };\n\n  return <Slot {...props} {...controlProps} />;\n}\n\nexport type FieldDescriptionProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/** Guidance under the control. Hidden while the field has an error. */\nexport function FieldDescription({\n  asChild = false,\n  ...props\n}: FieldDescriptionProps) {\n  const { descriptionId, error, setHasDescription } = useFieldContext();\n\n  useEffect(() => {\n    setHasDescription(true);\n\n    return () => setHasDescription(false);\n  }, [setHasDescription]);\n\n  if (error) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return <Component {...props} id={descriptionId} />;\n}\n\nexport type FieldMessageProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/**\n * The field's error, announced as an alert. Renders the error the field\n * currently holds; `children` is a fallback for a message the caller wants to\n * show in its place. Nothing renders while the field is valid.\n */\nexport function FieldMessage({\n  asChild = false,\n  children,\n  ...props\n}: FieldMessageProps) {\n  const { messageId, error } = useFieldContext();\n  const content = error ?? children;\n\n  if (!content) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return (\n    <Component {...props} id={messageId} role=\"alert\">\n      {content}\n    </Component>\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 type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport {\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n  FieldMessage,\n  FieldRoot,\n  useFieldContext,\n} from \"@/components/field\";\nimport { Typography } from \"@/components/typography\";\n\n/**\n * The design's single-line input, composed from the headless `Field`\n * primitives: label with the optional marker and action slot, the control\n * with its trailing slot, and the hint or error beneath. `TextInput`,\n * `EmailInput`, `PasswordInput` and `PhoneInput` each fix the `type` and the\n * keyboard/autofill hints and hand everything else here.\n *\n * Internal: no subpath of its own. Consumers reach it through the\n * specialised inputs, or build their own composition from `Field`.\n */\n\nexport type InputType = \"text\" | \"email\" | \"password\" | \"tel\";\n\nexport type InputFieldProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"name\" | \"type\"\n> & {\n  /** The form field this input edits — the key in the `Form`'s values. */\n  name: string;\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 what the form's schema reports for this field.\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};\n\ntype InputFieldComponentProps = InputFieldProps & { type: InputType };\n\nconst CONTROL_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\";\n\nfunction InputLabel({\n  label,\n  optional,\n  action,\n}: {\n  label: string;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  return (\n    <Typography\n      variant=\"label\"\n      tone=\"muted\"\n      className=\"mb-1.5 flex items-center\"\n      asChild\n    >\n      <FieldLabel>\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      </FieldLabel>\n    </Typography>\n  );\n}\n\nfunction InputControl({\n  hasTrailing,\n  className,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"input\">, \"name\"> & {\n  hasTrailing: boolean;\n}) {\n  const { invalid } = useFieldContext();\n\n  return (\n    <FieldControl>\n      <input\n        {...rest}\n        className={[\n          CONTROL_CLASSES,\n          invalid ? INVALID_CLASSES : VALID_CLASSES,\n          hasTrailing ? \"pr-16\" : \"\",\n          className ?? \"\",\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n      />\n    </FieldControl>\n  );\n}\n\nfunction InputMessages({ hint }: { hint: ReactNode }) {\n  const { error } = useFieldContext();\n\n  if (error) {\n    return (\n      <Typography as=\"p\" variant=\"hint\" tone=\"danger\" asChild>\n        <FieldMessage className=\"mt-1.5\" />\n      </Typography>\n    );\n  }\n\n  if (hint) {\n    return (\n      <Typography as=\"p\" variant=\"hint\" tone=\"subtle\" asChild>\n        <FieldDescription className=\"mt-1.5\">{hint}</FieldDescription>\n      </Typography>\n    );\n  }\n\n  return null;\n}\n\nexport function InputField({\n  name,\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  id,\n  disabled,\n  required,\n  type,\n  ...rest\n}: InputFieldComponentProps) {\n  return (\n    <FieldRoot\n      name={name}\n      id={id}\n      error={error}\n      disabled={disabled}\n      required={required}\n      className=\"flex flex-col\"\n    >\n      {label ? (\n        <InputLabel label={label} optional={optional} action={action} />\n      ) : null}\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <InputControl {...rest} type={type} hasTrailing={Boolean(trailing)} />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center font-semibold text-fg-subtle text-hint\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <InputMessages hint={hint} />\n    </FieldRoot>\n  );\n}\n"],"mappings":"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","names":["import_react_slot","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/phone-input.d.cts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { I as InputFieldProps } from './index-CdYkd6zz.cjs';
+
+/**
+ * A phone number. Fixes `type="tel"` and the numeric keypad. Validate it with
+ * `phoneSchema` from `@carbonbits/sixr/validation` in the enclosing `Form`'s
+ * schema.
+ */
+type PhoneInputProps = InputFieldProps;
+declare function PhoneInput({ autoComplete, inputMode, ...rest }: PhoneInputProps): react.JSX.Element;
+
+export { PhoneInput, type PhoneInputProps };

package/dist/phone-input.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { I as InputFieldProps } from './index-CdYkd6zz.js';
+
+/**
+ * A phone number. Fixes `type="tel"` and the numeric keypad. Validate it with
+ * `phoneSchema` from `@carbonbits/sixr/validation` in the enclosing `Form`'s
+ * schema.
+ */
+type PhoneInputProps = InputFieldProps;
+declare function PhoneInput({ autoComplete, inputMode, ...rest }: PhoneInputProps): react.JSX.Element;
+
+export { PhoneInput, type PhoneInputProps };