@carbonbits/sixr 1.3.0 → 1.5.0

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,3 +1,5 @@
+export { Button } from './chunk-HDTW4FRT.js';
 export { Cart } from './chunk-BHSOSXTU.js';
+export { Typography } from './chunk-NZHHNVXZ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/password-input.cjs

@@ -0,0 +1,449 @@
+"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/password-input/index.tsx
+var password_input_exports = {};
+__export(password_input_exports, {
+  PasswordInput: () => PasswordInput
+});
+module.exports = __toCommonJS(password_input_exports);
+var import_react2 = require("react");
+
+// 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/password-input/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_REVEAL_LABELS = { show: "Show", hide: "Hide" };
+var TOGGLE_CLASSES = "cursor-pointer rounded-field font-[inherit] text-hint font-semibold text-fg-subtle outline-none hover:text-fg focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed";
+function PasswordInput({
+  revealable = true,
+  revealLabels = DEFAULT_REVEAL_LABELS,
+  autoComplete = "current-password",
+  ...rest
+}) {
+  const [revealed, setRevealed] = (0, import_react2.useState)(false);
+  const toggleRevealed = (0, import_react2.useCallback)(
+    () => setRevealed((current) => !current),
+    []
+  );
+  const toggle = revealable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": revealed,
+      "aria-label": revealed ? "Hide password" : "Show password",
+      className: TOGGLE_CLASSES,
+      onClick: toggleRevealed,
+      children: revealed ? revealLabels.hide : revealLabels.show
+    }
+  ) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    InputField,
+    {
+      ...rest,
+      type: revealed ? "text" : "password",
+      autoComplete,
+      trailing: toggle
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PasswordInput
+});
+//# sourceMappingURL=password-input.cjs.map