@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/fields/number-input/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/number-input/number-input.tsx"],"sourcesContent":["import { Input as BaseInput } from '@base-ui/react/input';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type React from 'react';\nimport { NumericFormat, type NumericFormatProps } from 'react-number-format';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type NumberInputVariants,\n  numberInputVariants,\n} from './number-input-variants';\n\nexport type NumberInputProps = MergeOverride<\n  Omit<\n    NumericFormatProps<BaseInput.Props>,\n    | 'customInput'\n    | 'displayType'\n    | 'getInputRef'\n    | 'renderText'\n    | 'valueIsNumericString'\n  >,\n  NumberInputVariants & {\n    /**\n     * O valor numérico, para o modo controlado. `null` deixa o campo vazio.\n     */\n    value?: number | null;\n    /**\n     * O valor numérico inicial, para o modo não controlado.\n     */\n    defaultValue?: number | null;\n    /**\n     * Chamado a cada mudança feita pelo usuário, com o número já convertido, ou `null` com o campo\n     * vazio. Mudar uma prop (o `value`, o `decimalScale`) não o chama.\n     */\n    onValueChange?: (\n      value: number | null,\n      details: NumberInputChangeEventDetails,\n    ) => void;\n    ref?: React.Ref<HTMLInputElement>;\n  }\n>;\n\nexport type NumberInputState = BaseInput.State;\n\nexport type NumberInputChangeEventDetails = {\n  /**\n   * O texto como aparece no campo, com separadores, prefixo e sufixo (`\"1.234,50\"`).\n   */\n  formattedValue: string;\n  /**\n   * O evento da digitação.\n   */\n  event: React.SyntheticEvent<HTMLInputElement> | undefined;\n};\n\nconst splitVariantProps = createSplitProps<NumberInputVariants>();\n\n/**\n * Campo numérico que formata enquanto se digita, com o `react-number-format` sobre o `Input` do\n * Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da lib.\n *\n * Sai em pt-BR: `.` no milhar e `,` no decimal, com o `.` digitado aceito como vírgula. O\n * `decimalScale` limita as casas já na digitação (sem ele, não há limite), e o\n * `fixedDecimalScale` completa com zeros. Com `decimalScale={0}`, a vírgula é ignorada: \"12,7\"\n * vira 127.\n *\n * O número sai pelo `onValueChange`. O campo guarda o texto formatado (`\"1.234,50\"`), e é ele que\n * vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.\n *\n * O `inputMode` abre o teclado numérico no celular: `decimal`, ou `numeric` sem casas. No iPhone,\n * nenhum dos dois tem o sinal de menos; para digitar negativo lá, `inputMode=\"text\"`.\n *\n * @example\n * ```tsx\n * <NumberInput\n *   aria-label=\"Peso (kg)\"\n *   decimalScale={3}\n *   onValueChange={(value) => setWeight(value)}\n * />\n * ```\n */\nexport const NumberInput = (props: NumberInputProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const {\n    className,\n    value,\n    defaultValue,\n    onValueChange,\n    ref,\n    decimalScale,\n    ...rest\n  } = elementProps;\n\n  return (\n    <NumericFormat\n      data-component=\"NumberInput\"\n      customInput={BaseInput}\n      getInputRef={ref}\n      thousandSeparator=\".\"\n      decimalSeparator=\",\"\n      allowedDecimalSeparators={[',', '.']}\n      inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n      decimalScale={decimalScale}\n      // O `react-number-format` trata `null` como não controlado; `''` é o campo vazio controlado.\n      value={value === null ? '' : value}\n      defaultValue={defaultValue ?? undefined}\n      onValueChange={(values, sourceInfo) => {\n        /** O pacote também avisa quando uma prop muda; aqui, só a mudança do usuário. */\n        if (sourceInfo.source !== 'event') {\n          return;\n        }\n\n        onValueChange?.(values.floatValue ?? null, {\n          formattedValue: values.formattedValue,\n          event: sourceInfo.event,\n        });\n      }}\n      className={mergeStateClassNames(\n        numberInputVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nNumberInput.displayName = 'NumberInput';\n"],"mappings":";;;;;;;AAqDA,MAAM,oBAAoB,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;AA0BhE,MAAa,eAAe,UAA4B;CACtD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EACJ,WACA,OACA,cACA,eACA,KACA,cACA,GAAG,SACD;CAEJ,OACE,oBAAC,eAAD;EACE,kBAAe;EACf,aAAaA;EACb,aAAa;EACb,mBAAkB;EAClB,kBAAiB;EACjB,0BAA0B,CAAC,KAAK,GAAG;EACnC,WAAW,iBAAiB,IAAI,YAAY;EAC9B;EAEd,OAAO,UAAU,OAAO,KAAK;EAC7B,cAAc,gBAAgB,KAAA;EAC9B,gBAAgB,QAAQ,eAAe;;GAErC,IAAI,WAAW,WAAW,SACxB;GAGF,gBAAgB,OAAO,cAAc,MAAM;IACzC,gBAAgB,OAAO;IACvB,OAAO,WAAW;GACpB,CAAC;EACH;EACA,WAAW,qBACT,oBAAoB,YAAY,GAChC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/fields/password-input/index.d.ts

@@ -0,0 +1,3 @@
+import { PasswordInputVariants } from "./password-input-variants.js";
+import { PasswordInput, PasswordInputProps } from "./password-input.js";
+export { PasswordInput, type PasswordInputProps, type PasswordInputVariants };

package/dist/components/fields/password-input/index.js

@@ -0,0 +1,2 @@
+import { PasswordInput } from "./password-input.js";
+export { PasswordInput };

package/dist/components/fields/password-input/password-input-variants.d.ts

@@ -0,0 +1,31 @@
+//#region src/components/fields/password-input/password-input-variants.d.ts
+export type PasswordInputVariants = {
+  /**
+   * Altura, padding e tamanho do texto, os mesmos do `Input`, e o tamanho do ícone do botão.
+   * Substitui o atributo nativo `size`: a largura vem do CSS.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Fundo e borda do campo, os mesmos do `Input`.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'subtle';
+};
+export declare const passwordInputDefaultVariants: Required<PasswordInputVariants>;
+/**
+ * Declara no contêiner as medidas que o campo e o botão leem:
+ * - `--password-input-px` repete o padding horizontal do `Input` em cada `size`, para o botão ter
+ *   a mesma folga do texto até a borda. Se o padding do `Input` mudar, muda aqui também;
+ * - `--password-input-icon-size` é o lado do ícone.
+ *
+ * O campo reserva à direita a folga dos dois lados do ícone mais o ícone, e o texto não passa por
+ * baixo do botão.
+ */
+export declare const passwordInputVariants: (props?: ({
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=password-input-variants.d.ts.map

package/dist/components/fields/password-input/password-input-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/password-input/password-input-variants.ts"],"mappings":";YAEY;;;;;;;EAOV;;;;;;EAMA;;qBAGW,8BAA8B,SAAS;;;;;;;;;;qBAcvC,wBAAqB;;6CAoChC"}

package/dist/components/fields/password-input/password-input-variants.js

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/password-input/password-input-variants.ts
+const passwordInputDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Declara no contêiner as medidas que o campo e o botão leem:
+* - `--password-input-px` repete o padding horizontal do `Input` em cada `size`, para o botão ter
+*   a mesma folga do texto até a borda. Se o padding do `Input` mudar, muda aqui também;
+* - `--password-input-icon-size` é o lado do ícone.
+*
+* O campo reserva à direita a folga dos dois lados do ícone mais o ícone, e o texto não passa por
+* baixo do botão.
+*/
+const passwordInputVariants = cva(["relative"], {
+	variants: { size: {
+		"2xs": ["[--password-input-px:--spacing(2)]", "[--password-input-icon-size:--spacing(3)]"],
+		xs: ["[--password-input-px:--spacing(2)]", "[--password-input-icon-size:--spacing(3.5)]"],
+		sm: ["[--password-input-px:--spacing(2.5)]", "[--password-input-icon-size:--spacing(4)]"],
+		md: ["[--password-input-px:--spacing(3)]", "[--password-input-icon-size:--spacing(4)]"],
+		lg: ["[--password-input-px:--spacing(4)]", "[--password-input-icon-size:--spacing(5)]"],
+		xl: ["[--password-input-px:--spacing(4.5)]", "[--password-input-icon-size:--spacing(5)]"],
+		"2xl": ["[--password-input-px:--spacing(5)]", "[--password-input-icon-size:--spacing(6)]"]
+	} },
+	defaultVariants: { size: passwordInputDefaultVariants.size }
+});
+//#endregion
+export { passwordInputDefaultVariants, passwordInputVariants };
+
+//# sourceMappingURL=password-input-variants.js.map

package/dist/components/fields/password-input/password-input-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input-variants.js","names":[],"sources":["../../../../src/components/fields/password-input/password-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type PasswordInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`, e o tamanho do ícone do botão.\n   * Substitui o atributo nativo `size`: a largura vem do CSS.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo, os mesmos do `Input`.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const passwordInputDefaultVariants: Required<PasswordInputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Declara no contêiner as medidas que o campo e o botão leem:\n * - `--password-input-px` repete o padding horizontal do `Input` em cada `size`, para o botão ter\n *   a mesma folga do texto até a borda. Se o padding do `Input` mudar, muda aqui também;\n * - `--password-input-icon-size` é o lado do ícone.\n *\n * O campo reserva à direita a folga dos dois lados do ícone mais o ícone, e o texto não passa por\n * baixo do botão.\n */\nexport const passwordInputVariants = cva(['relative'], {\n  variants: {\n    size: {\n      '2xs': [\n        '[--password-input-px:--spacing(2)]',\n        '[--password-input-icon-size:--spacing(3)]',\n      ],\n      xs: [\n        '[--password-input-px:--spacing(2)]',\n        '[--password-input-icon-size:--spacing(3.5)]',\n      ],\n      sm: [\n        '[--password-input-px:--spacing(2.5)]',\n        '[--password-input-icon-size:--spacing(4)]',\n      ],\n      md: [\n        '[--password-input-px:--spacing(3)]',\n        '[--password-input-icon-size:--spacing(4)]',\n      ],\n      lg: [\n        '[--password-input-px:--spacing(4)]',\n        '[--password-input-icon-size:--spacing(5)]',\n      ],\n      xl: [\n        '[--password-input-px:--spacing(4.5)]',\n        '[--password-input-icon-size:--spacing(5)]',\n      ],\n      '2xl': [\n        '[--password-input-px:--spacing(5)]',\n        '[--password-input-icon-size:--spacing(6)]',\n      ],\n    },\n  },\n  defaultVariants: {\n    size: passwordInputDefaultVariants.size,\n  },\n});\n"],"mappings":";;AAkBA,MAAa,+BAAgE;CAC3E,MAAM;CACN,SAAS;AACX;;;;;;;;;;AAWA,MAAa,wBAAwB,IAAI,CAAC,UAAU,GAAG;CACrD,UAAU,EACR,MAAM;EACJ,OAAO,CACL,sCACA,2CACF;EACA,IAAI,CACF,sCACA,6CACF;EACA,IAAI,CACF,wCACA,2CACF;EACA,IAAI,CACF,sCACA,2CACF;EACA,IAAI,CACF,sCACA,2CACF;EACA,IAAI,CACF,wCACA,2CACF;EACA,OAAO,CACL,sCACA,2CACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,6BAA6B,KACrC;AACF,CAAC"}

package/dist/components/fields/password-input/password-input.d.ts

@@ -0,0 +1,40 @@
+import { InputProps } from "../input/input.js";
+import "../input/index.js";
+import { PasswordInputVariants } from "./password-input-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import * as ZagPasswordInput from "@zag-js/password-input";
+//#region src/components/fields/password-input/password-input.d.ts
+/**
+ * As opções da máquina do Zag que o componente aceita. O `id` fica de fora: aqui ele é o `id` do
+ * `<input>`, como no `Input`, e a máquina ganha um próprio.
+ */
+type PasswordInputMachineProps = Omit<ZagPasswordInput.Props, 'id' | 'dir' | 'getRootNode'>;
+export type PasswordInputProps = MergeOverride<Omit<InputProps, 'type'>, PasswordInputVariants & PasswordInputMachineProps>;
+/**
+ * Campo de senha com o botão de mostrar e ocultar, sobre a máquina `password-input` do Zag e o
+ * `Input` da lib: liga-se sozinho ao `Field` quando está dentro de um.
+ *
+ * - O botão fica fora do Tab, como no Zag: no clique, a senha aparece ou some e o foco continua
+ *   no campo. Ele some quando o campo está desabilitado, venha o `disabled` da prop ou do `Field`.
+ * - A senha volta a ficar oculta no envio e no reset do formulário, para o campo ir como
+ *   `type="password"`, que é o que os gerenciadores de senha reconhecem.
+ * - `autoComplete` é `current-password` por padrão; num cadastro, `new-password`.
+ *
+ * Componente único, e não composto como os outros componentes sobre o Zag: a máquina é criada aqui
+ * dentro, sem hook, contexto nem `RootProvider`. O `className` vai para o contêiner, que dá a
+ * largura e a posição no layout; o `<input>` ocupa a largura dele.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Senha</Field.Label>
+ *   <PasswordInput />
+ * </Field.Root>
+ * ```
+ */
+export declare const PasswordInput: {
+  (props: PasswordInputProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=password-input.d.ts.map

package/dist/components/fields/password-input/password-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","names":[],"sources":["../../../../src/components/fields/password-input/password-input.tsx"],"mappings":";;;;;;;;;;KAiBK,4BAA4B,KAC/B,iBAAiB;YAIP,qBAAqB,cAC/B,KAAK,qBACL,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;qBAqCb;GAAwB,OAAA,qCAAkB,IAAA"}

package/dist/components/fields/password-input/password-input.js

@@ -0,0 +1,116 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { Input } from "../input/input.js";
+import { passwordInputVariants } from "./password-input-variants.js";
+import { useId } from "react";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import * as ZagPasswordInput from "@zag-js/password-input";
+//#region src/components/fields/password-input/password-input.tsx
+/**
+* Textos acessíveis padrão do botão, em pt-BR. Um `translations` passado por prop sobrescreve só
+* as chaves informadas.
+*/
+const passwordInputTranslations = { visibilityTrigger: (visible) => visible ? "Ocultar senha" : "Mostrar senha" };
+const splitVariantProps = createSplitProps();
+const splitMachineProps = createSplitProps();
+/**
+* Campo de senha com o botão de mostrar e ocultar, sobre a máquina `password-input` do Zag e o
+* `Input` da lib: liga-se sozinho ao `Field` quando está dentro de um.
+*
+* - O botão fica fora do Tab, como no Zag: no clique, a senha aparece ou some e o foco continua
+*   no campo. Ele some quando o campo está desabilitado, venha o `disabled` da prop ou do `Field`.
+* - A senha volta a ficar oculta no envio e no reset do formulário, para o campo ir como
+*   `type="password"`, que é o que os gerenciadores de senha reconhecem.
+* - `autoComplete` é `current-password` por padrão; num cadastro, `new-password`.
+*
+* Componente único, e não composto como os outros componentes sobre o Zag: a máquina é criada aqui
+* dentro, sem hook, contexto nem `RootProvider`. O `className` vai para o contêiner, que dá a
+* largura e a posição no layout; o `<input>` ocupa a largura dele.
+*
+* @example
+* ```tsx
+* <Field.Root>
+*   <Field.Label>Senha</Field.Label>
+*   <PasswordInput />
+* </Field.Root>
+* ```
+*/
+const PasswordInput = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const [machineProps, inputProps] = splitMachineProps(elementProps, [
+		"autoComplete",
+		"defaultVisible",
+		"disabled",
+		"ids",
+		"ignorePasswordManagers",
+		"invalid",
+		"name",
+		"onVisibilityChange",
+		"readOnly",
+		"required",
+		"translations",
+		"visible"
+	]);
+	const { className, id, ...rest } = inputProps;
+	const machineId = useId();
+	const service = useMachine(ZagPasswordInput.machine, {
+		...machineProps,
+		id: machineId,
+		ids: {
+			...machineProps.ids,
+			input: id ?? machineProps.ids?.input
+		},
+		translations: {
+			...passwordInputTranslations,
+			...machineProps.translations
+		}
+	});
+	const passwordInput = ZagPasswordInput.connect(service, normalizeProps);
+	/**
+	* As props do campo sem as chaves `undefined`: o Zag manda `data-invalid`, `data-disabled` e
+	* `data-readonly` vazios quando o estado não vale, e eles apagariam os que o `Input` escreve a
+	* partir do `Field`.
+	*/
+	const zagInputProps = Object.fromEntries(Object.entries(passwordInput.getInputProps()).filter(([, value]) => value !== void 0));
+	return /* @__PURE__ */ jsxs("div", {
+		...passwordInput.getRootProps(),
+		"data-component": "PasswordInput",
+		className: mergeTwClassNames(passwordInputVariants({ size: variantProps.size }), className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			...zagInputProps,
+			size: variantProps.size,
+			variant: variantProps.variant,
+			className: mergeTwClassNames(["peer", "pe-[calc(var(--password-input-px)*2+var(--password-input-icon-size))]"]),
+			...rest
+		}), /* @__PURE__ */ jsx("button", {
+			...passwordInput.getVisibilityTriggerProps(),
+			"data-component": "PasswordInput.VisibilityTrigger",
+			className: mergeTwClassNames([
+				"absolute",
+				"inset-y-0",
+				"inset-e-0",
+				"flex",
+				"items-center",
+				"px-(--password-input-px)",
+				"[&_svg]:size-(--password-input-icon-size)",
+				"text-gray-11",
+				"hover:text-gray-12",
+				"cursor-pointer",
+				"peer-disabled:hidden"
+			]),
+			children: /* @__PURE__ */ jsx("span", {
+				...passwordInput.getIndicatorProps(),
+				className: "flex",
+				children: /* @__PURE__ */ jsx(Icon, { render: passwordInput.visible ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeSlashIcon, {}) })
+			})
+		})]
+	});
+};
+PasswordInput.displayName = "PasswordInput";
+//#endregion
+export { PasswordInput };
+
+//# sourceMappingURL=password-input.js.map

package/dist/components/fields/password-input/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../src/components/fields/password-input/password-input.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react';\nimport * as ZagPasswordInput from '@zag-js/password-input';\nimport { normalizeProps, useMachine } from '@zag-js/react';\nimport { useId } from 'react';\nimport { Icon } from '#components/display/icon';\nimport { Input, type InputProps } from '#components/fields/input';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type PasswordInputVariants,\n  passwordInputVariants,\n} from './password-input-variants';\n\n/**\n * As opções da máquina do Zag que o componente aceita. O `id` fica de fora: aqui ele é o `id` do\n * `<input>`, como no `Input`, e a máquina ganha um próprio.\n */\ntype PasswordInputMachineProps = Omit<\n  ZagPasswordInput.Props,\n  'id' | 'dir' | 'getRootNode'\n>;\n\nexport type PasswordInputProps = MergeOverride<\n  Omit<InputProps, 'type'>,\n  PasswordInputVariants & PasswordInputMachineProps\n>;\n\n/**\n * Textos acessíveis padrão do botão, em pt-BR. Um `translations` passado por prop sobrescreve só\n * as chaves informadas.\n */\nconst passwordInputTranslations: ZagPasswordInput.IntlTranslations = {\n  visibilityTrigger: (visible) => (visible ? 'Ocultar senha' : 'Mostrar senha'),\n};\n\nconst splitVariantProps = createSplitProps<PasswordInputVariants>();\n\nconst splitMachineProps = createSplitProps<PasswordInputMachineProps>();\n\n/**\n * Campo de senha com o botão de mostrar e ocultar, sobre a máquina `password-input` do Zag e o\n * `Input` da lib: liga-se sozinho ao `Field` quando está dentro de um.\n *\n * - O botão fica fora do Tab, como no Zag: no clique, a senha aparece ou some e o foco continua\n *   no campo. Ele some quando o campo está desabilitado, venha o `disabled` da prop ou do `Field`.\n * - A senha volta a ficar oculta no envio e no reset do formulário, para o campo ir como\n *   `type=\"password\"`, que é o que os gerenciadores de senha reconhecem.\n * - `autoComplete` é `current-password` por padrão; num cadastro, `new-password`.\n *\n * Componente único, e não composto como os outros componentes sobre o Zag: a máquina é criada aqui\n * dentro, sem hook, contexto nem `RootProvider`. O `className` vai para o contêiner, que dá a\n * largura e a posição no layout; o `<input>` ocupa a largura dele.\n *\n * @example\n * ```tsx\n * <Field.Root>\n *   <Field.Label>Senha</Field.Label>\n *   <PasswordInput />\n * </Field.Root>\n * ```\n */\nexport const PasswordInput = (props: PasswordInputProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const [machineProps, inputProps] = splitMachineProps(elementProps, [\n    'autoComplete',\n    'defaultVisible',\n    'disabled',\n    'ids',\n    'ignorePasswordManagers',\n    'invalid',\n    'name',\n    'onVisibilityChange',\n    'readOnly',\n    'required',\n    'translations',\n    'visible',\n  ]);\n\n  const { className, id, ...rest } = inputProps;\n\n  const machineId = useId();\n\n  const service = useMachine(ZagPasswordInput.machine, {\n    ...machineProps,\n    id: machineId,\n    // O `id` de quem usa é o do `<input>`; sem ele, vale o que o Zag gera.\n    ids: { ...machineProps.ids, input: id ?? machineProps.ids?.input },\n    // Mescladas por chave, para um `translations` parcial não derrubar os outros textos.\n    translations: {\n      ...passwordInputTranslations,\n      ...machineProps.translations,\n    },\n  });\n\n  const passwordInput = ZagPasswordInput.connect(service, normalizeProps);\n\n  /**\n   * As props do campo sem as chaves `undefined`: o Zag manda `data-invalid`, `data-disabled` e\n   * `data-readonly` vazios quando o estado não vale, e eles apagariam os que o `Input` escreve a\n   * partir do `Field`.\n   */\n  const zagInputProps = Object.fromEntries(\n    Object.entries(passwordInput.getInputProps()).filter(\n      ([, value]) => value !== undefined,\n    ),\n  );\n\n  return (\n    <div\n      {...passwordInput.getRootProps()}\n      data-component=\"PasswordInput\"\n      className={mergeTwClassNames(\n        passwordInputVariants({ size: variantProps.size }),\n        className,\n      )}\n    >\n      <Input\n        {...zagInputProps}\n        size={variantProps.size}\n        variant={variantProps.variant}\n        className={mergeTwClassNames([\n          // Marca o campo para o botão ler o `disabled` dele\n          'peer',\n          // A folga dos dois lados do ícone mais o ícone: o texto não passa por baixo do botão\n          'pe-[calc(var(--password-input-px)*2+var(--password-input-icon-size))]',\n        ])}\n        {...rest}\n      />\n\n      <button\n        {...passwordInput.getVisibilityTriggerProps()}\n        data-component=\"PasswordInput.VisibilityTrigger\"\n        className={mergeTwClassNames([\n          'absolute',\n          'inset-y-0',\n          'inset-e-0',\n\n          'flex',\n          'items-center',\n\n          'px-(--password-input-px)',\n          '[&_svg]:size-(--password-input-icon-size)',\n\n          'text-gray-11',\n          'hover:text-gray-12',\n\n          'cursor-pointer',\n\n          // `disabled` do campo, da prop ou do `Field`\n          'peer-disabled:hidden',\n        ])}\n      >\n        <span\n          {...passwordInput.getIndicatorProps()}\n          className=\"flex\"\n        >\n          <Icon\n            render={passwordInput.visible ? <EyeIcon /> : <EyeSlashIcon />}\n          />\n        </span>\n      </button>\n    </div>\n  );\n};\n\nPasswordInput.displayName = 'PasswordInput';\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAM,4BAA+D,EACnE,oBAAoB,YAAa,UAAU,kBAAkB,gBAC/D;AAEA,MAAM,oBAAoB,iBAAwC;AAElE,MAAM,oBAAoB,iBAA4C;;;;;;;;;;;;;;;;;;;;;;;AAwBtE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,CAAC,cAAc,cAAc,kBAAkB,cAAc;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,IAAI,GAAG,SAAS;CAEnC,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,WAAW,iBAAiB,SAAS;EACnD,GAAG;EACH,IAAI;EAEJ,KAAK;GAAE,GAAG,aAAa;GAAK,OAAO,MAAM,aAAa,KAAK;EAAM;EAEjE,cAAc;GACZ,GAAG;GACH,GAAG,aAAa;EAClB;CACF,CAAC;CAED,MAAM,gBAAgB,iBAAiB,QAAQ,SAAS,cAAc;;;;;;CAOtE,MAAM,gBAAgB,OAAO,YAC3B,OAAO,QAAQ,cAAc,cAAc,CAAC,CAAC,CAAC,QAC3C,GAAG,WAAW,UAAU,KAAA,CAC3B,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI,cAAc,aAAa;EAC/B,kBAAe;EACf,WAAW,kBACT,sBAAsB,EAAE,MAAM,aAAa,KAAK,CAAC,GACjD,SACF;EANF,UAAA,CAQE,oBAAC,OAAD;GACE,GAAI;GACJ,MAAM,aAAa;GACnB,SAAS,aAAa;GACtB,WAAW,kBAAkB,CAE3B,QAEA,uEACF,CAAC;GACD,GAAI;EACL,CAAA,GAED,oBAAC,UAAD;GACE,GAAI,cAAc,0BAA0B;GAC5C,kBAAe;GACf,WAAW,kBAAkB;IAC3B;IACA;IACA;IAEA;IACA;IAEA;IACA;IAEA;IACA;IAEA;IAGA;GACF,CAAC;GAED,UAAA,oBAAC,QAAD;IACE,GAAI,cAAc,kBAAkB;IACpC,WAAU;IAEV,UAAA,oBAAC,MAAD,EACE,QAAQ,cAAc,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA,EAC9D,CAAA;GACG,CAAA;EACA,CAAA,CACL;;AAET;AAEA,cAAc,cAAc"}

package/dist/components/fields/pattern-input/index.d.ts

@@ -0,0 +1,4 @@
+import { PatternInputVariants } from "./pattern-input-variants.js";
+import { PatternInput, PatternInputChangeEventDetails, PatternInputProps, PatternInputState } from "./pattern-input.js";
+import { patternInputMasks } from "./pattern-input-masks.js";
+export { PatternInput, type PatternInputChangeEventDetails, type PatternInputProps, type PatternInputState, type PatternInputVariants, patternInputMasks };

package/dist/components/fields/pattern-input/index.js

@@ -0,0 +1,3 @@
+import { PatternInput } from "./pattern-input.js";
+import { patternInputMasks } from "./pattern-input-masks.js";
+export { PatternInput, patternInputMasks };

package/dist/components/fields/pattern-input/pattern-input-masks.d.ts

@@ -0,0 +1,31 @@
+//#region src/components/fields/pattern-input/pattern-input-masks.d.ts
+/**
+ * Máscaras prontas para o `mask` do `PatternInput`. `#` é dígito e `*` é letra ou dígito; uma
+ * lista troca de máscara conforme o que foi digitado. O `as const` deixa as listas `readonly`, e
+ * por isso o `mask` aceita `readonly string[]`.
+ */
+export declare const patternInputMasks: {
+  /**
+   * Só dígitos: o CPF continua numérico, só o CNPJ ganhou letras.
+   */
+  readonly cpf: "###.###.###-##";
+  /**
+   * Alfanumérico (desde julho de 2026): letras nas 12 primeiras posições, dígitos verificadores
+   * numéricos. O CNPJ só com números também cabe.
+   */
+  readonly cnpj: "**.***.***/****-##";
+  /**
+   * CPF até aparecer uma letra ou passar de 11 caracteres; daí em diante, CNPJ.
+   */
+  readonly cpfCnpj: readonly ["###.###.###-##", "**.***.***/****-##"];
+  /**
+   * Oito dígitos, com o hífen antes dos três últimos.
+   */
+  readonly cep: "#####-###";
+  /**
+   * Fixo com 10 dígitos; no 11º, celular.
+   */
+  readonly phone: readonly ["(##) ####-####", "(##) #####-####"];
+};
+//#endregion
+//# sourceMappingURL=pattern-input-masks.d.ts.map

package/dist/components/fields/pattern-input/pattern-input-masks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-input-masks.d.ts","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-masks.ts"],"mappings":";;;;;;qBAKa"}

package/dist/components/fields/pattern-input/pattern-input-masks.js

@@ -0,0 +1,33 @@
+//#region src/components/fields/pattern-input/pattern-input-masks.ts
+/**
+* Máscaras prontas para o `mask` do `PatternInput`. `#` é dígito e `*` é letra ou dígito; uma
+* lista troca de máscara conforme o que foi digitado. O `as const` deixa as listas `readonly`, e
+* por isso o `mask` aceita `readonly string[]`.
+*/
+const patternInputMasks = {
+	/**
+	* Só dígitos: o CPF continua numérico, só o CNPJ ganhou letras.
+	*/
+	cpf: "###.###.###-##",
+	/**
+	* Alfanumérico (desde julho de 2026): letras nas 12 primeiras posições, dígitos verificadores
+	* numéricos. O CNPJ só com números também cabe.
+	*/
+	cnpj: "**.***.***/****-##",
+	/**
+	* CPF até aparecer uma letra ou passar de 11 caracteres; daí em diante, CNPJ.
+	*/
+	cpfCnpj: ["###.###.###-##", "**.***.***/****-##"],
+	/**
+	* Oito dígitos, com o hífen antes dos três últimos.
+	*/
+	cep: "#####-###",
+	/**
+	* Fixo com 10 dígitos; no 11º, celular.
+	*/
+	phone: ["(##) ####-####", "(##) #####-####"]
+};
+//#endregion
+export { patternInputMasks };
+
+//# sourceMappingURL=pattern-input-masks.js.map

package/dist/components/fields/pattern-input/pattern-input-masks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-input-masks.js","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-masks.ts"],"sourcesContent":["/**\n * Máscaras prontas para o `mask` do `PatternInput`. `#` é dígito e `*` é letra ou dígito; uma\n * lista troca de máscara conforme o que foi digitado. O `as const` deixa as listas `readonly`, e\n * por isso o `mask` aceita `readonly string[]`.\n */\nexport const patternInputMasks = {\n  /**\n   * Só dígitos: o CPF continua numérico, só o CNPJ ganhou letras.\n   */\n  cpf: '###.###.###-##',\n  /**\n   * Alfanumérico (desde julho de 2026): letras nas 12 primeiras posições, dígitos verificadores\n   * numéricos. O CNPJ só com números também cabe.\n   */\n  cnpj: '**.***.***/****-##',\n  /**\n   * CPF até aparecer uma letra ou passar de 11 caracteres; daí em diante, CNPJ.\n   */\n  cpfCnpj: ['###.###.###-##', '**.***.***/****-##'],\n  /**\n   * Oito dígitos, com o hífen antes dos três últimos.\n   */\n  cep: '#####-###',\n  /**\n   * Fixo com 10 dígitos; no 11º, celular.\n   */\n  phone: ['(##) ####-####', '(##) #####-####'],\n} as const;\n"],"mappings":";;;;;;AAKA,MAAa,oBAAoB;;;;CAI/B,KAAK;;;;;CAKL,MAAM;;;;CAIN,SAAS,CAAC,kBAAkB,oBAAoB;;;;CAIhD,KAAK;;;;CAIL,OAAO,CAAC,kBAAkB,iBAAiB;AAC7C"}

package/dist/components/fields/pattern-input/pattern-input-variants.d.ts

@@ -0,0 +1,31 @@
+//#region src/components/fields/pattern-input/pattern-input-variants.d.ts
+export type PatternInputVariants = {
+  /**
+   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:
+   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone
+   * não dar zoom no foco.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Fundo e borda do campo.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'subtle';
+};
+export declare const patternInputDefaultVariants: Required<PatternInputVariants>;
+/**
+ * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+ * mesmo jeito, explicados lá. As diferenças:
+ * - sem `data-placeholder`;
+ * - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e
+ *   literais): o texto não se mexe quando uma posição vazia é preenchida.
+ */
+export declare const patternInputVariants: (props?: ({
+  variant?: "outline" | "subtle" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=pattern-input-variants.d.ts.map

package/dist/components/fields/pattern-input/pattern-input-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,6BAA6B,SAAS;;;;;;;;qBAYtC,uBAAoB;;;6CAoIhC"}

package/dist/components/fields/pattern-input/pattern-input-variants.js

@@ -0,0 +1,116 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/pattern-input/pattern-input-variants.ts
+const patternInputDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+* mesmo jeito, explicados lá. As diferenças:
+* - sem `data-placeholder`;
+* - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e
+*   literais): o texto não se mexe quando uma posição vazia é preenchida.
+*/
+const patternInputVariants = cva([
+	"relative",
+	"w-full",
+	"appearance-none",
+	"outline-none",
+	"text-start",
+	"font-normal",
+	"text-gray-12",
+	"font-mono",
+	"placeholder:text-gray-9/90",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"[--pattern-input-focus-color:var(--color-black)]",
+	"dark:[--pattern-input-focus-color:var(--color-white)]",
+	"focus-visible:outline-1",
+	"focus-visible:outline-solid",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-(--pattern-input-focus-color)",
+	"focus-visible:border-(--pattern-input-focus-color)",
+	"data-focused:outline-1",
+	"data-focused:outline-solid",
+	"data-focused:-outline-offset-2",
+	"data-focused:outline-(--pattern-input-focus-color)",
+	"data-focused:border-(--pattern-input-focus-color)",
+	"disabled:opacity-50",
+	"disabled:cursor-not-allowed",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-invalid:border-red-9",
+	"data-invalid:[--pattern-input-focus-color:var(--color-red-9)]",
+	"aria-invalid:border-red-9",
+	"aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]",
+	"user-invalid:border-red-9",
+	"user-invalid:[--pattern-input-focus-color:var(--color-red-9)]"
+], {
+	variants: {
+		variant: {
+			outline: [
+				"bg-white/90",
+				"dark:bg-black/90",
+				"border-gray-alpha-7"
+			],
+			subtle: ["bg-gray-4", "border-transparent"]
+		},
+		size: {
+			"2xs": [
+				"h-7",
+				"min-w-7",
+				"px-2",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			xs: [
+				"h-8",
+				"min-w-8",
+				"px-2",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			sm: [
+				"h-9",
+				"min-w-9",
+				"px-2.5",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			md: [
+				"h-10",
+				"min-w-10",
+				"px-3",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			lg: [
+				"h-11",
+				"min-w-11",
+				"px-4",
+				"text-base"
+			],
+			xl: [
+				"h-12",
+				"min-w-12",
+				"px-4.5",
+				"text-base"
+			],
+			"2xl": [
+				"h-16",
+				"min-w-16",
+				"px-5",
+				"text-lg"
+			]
+		}
+	},
+	defaultVariants: {
+		size: patternInputDefaultVariants.size,
+		variant: patternInputDefaultVariants.variant
+	}
+});
+//#endregion
+export { patternInputDefaultVariants, patternInputVariants };
+
+//# sourceMappingURL=pattern-input-variants.js.map

package/dist/components/fields/pattern-input/pattern-input-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-input-variants.js","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type PatternInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const patternInputDefaultVariants: Required<PatternInputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e\n *   literais): o texto não se mexe quando uma posição vazia é preenchida.\n */\nexport const patternInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'font-mono',\n\n    'placeholder:text-gray-9/90',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--pattern-input-focus-color:var(--color-black)]',\n    'dark:[--pattern-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--pattern-input-focus-color)',\n    'focus-visible:border-(--pattern-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--pattern-input-focus-color)',\n    'data-focused:border-(--pattern-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--pattern-input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]',\n    'user-invalid:border-red-9',\n    'user-invalid:[--pattern-input-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: patternInputDefaultVariants.size,\n      variant: patternInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,8BAA8D;CACzE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}

package/dist/components/fields/pattern-input/pattern-input.d.ts

@@ -0,0 +1,75 @@
+import { PatternInputVariants } from "./pattern-input-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input } from "@base-ui/react/input";
+import { NumberFormatBaseProps } from "react-number-format";
+//#region src/components/fields/pattern-input/pattern-input.d.ts
+export type PatternInputProps = MergeOverride<Omit<NumberFormatBaseProps<Input.Props>, 'customInput' | 'displayType' | 'format' | 'getCaretBoundary' | 'getInputRef' | 'isCharacterSame' | 'isValidInputCharacter' | 'removeFormatting' | 'renderText' | 'valueIsNumericString'>, PatternInputVariants & {
+  /**
+   * A máscara: `#` é dígito, `*` é letra ou dígito, e o resto é literal (que não pode ser letra
+   * nem dígito). Numa lista, o campo usa a primeira máscara que aceita o que foi digitado. As
+   * prontas estão em `patternInputMasks`.
+   */
+  mask: string | readonly string[];
+  /**
+   * O valor sem os literais (`"12345678901"`), para o modo controlado. `null` deixa o campo
+   * vazio.
+   */
+  value?: string | null;
+  /**
+   * O valor inicial sem os literais, para o modo não controlado.
+   */
+  defaultValue?: string | null;
+  /**
+   * Chamado a cada mudança feita pelo usuário, com o valor sem os literais, ou `null` com o campo
+   * vazio. Mudar o `value` por prop não o chama.
+   */
+  onValueChange?: (value: string | null, details: PatternInputChangeEventDetails) => void;
+  ref?: React.Ref<HTMLInputElement>;
+}>;
+export type PatternInputState = Input.State;
+export type PatternInputChangeEventDetails = {
+  /**
+   * O texto como aparece no campo, com os literais e o marcador (`"123.456.7__-__"`).
+   */
+  formattedValue: string;
+  /**
+   * Se todas as posições da máscara em uso estão preenchidas.
+   */
+  isComplete: boolean;
+  /**
+   * O evento da digitação.
+   */
+  event: React.SyntheticEvent<HTMLInputElement> | undefined;
+};
+/**
+ * Campo com máscara (CPF, CNPJ, CEP, telefone), sobre o `NumberFormatBase` do `react-number-format`
+ * e o `Input` do Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da
+ * lib.
+ *
+ * - Com algo digitado, o campo mostra a máscara inteira, com `_` nas posições vazias. Vazio, ele
+ *   fica vazio, e o placeholder padrão é a primeira máscara com o marcador.
+ * - Numa lista de máscaras, o campo troca de máscara conforme o que foi digitado: no telefone, o
+ *   11º dígito passa para celular.
+ * - Letras viram maiúsculas. Uma tecla que nenhuma máscara aceita é ignorada; o texto colado é
+ *   cortado no que couber.
+ *
+ * O valor sai pelo `onValueChange`, sem os literais, com `isComplete` dizendo se a máscara foi
+ * preenchida. O campo guarda o texto formatado, e é ele que vai no `FormData`, no `onFormSubmit` do
+ * `Form` e no `validate` do `Field`.
+ *
+ * @example
+ * ```tsx
+ * <PatternInput
+ *   aria-label="Telefone"
+ *   mask={patternInputMasks.phone}
+ *   onValueChange={(value) => setPhone(value)}
+ * />
+ * ```
+ */
+export declare const PatternInput: {
+  (props: PatternInputProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=pattern-input.d.ts.map

package/dist/components/fields/pattern-input/pattern-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-input.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/pattern-input/pattern-input.tsx"],"mappings":";;;;;;YAcY,oBAAoB,cAC9B,KACE,sBAAsBA,MAAU,mMAYlC;;;;;;EAME;;;;;EAKA;;;;EAIA;;;;;EAKA,iBACE,sBACA,SAAS;EAEX,MAAM,MAAM,IAAI;;YAIR,oBAAoBA,MAAU;YAE9B;;;;EAIV;;;;EAIA;;;;EAIA,OAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCjB;GAAuB,OAAA,oBAAiB,MAAA,IAAA"}