@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

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?: "subtle" | "outline" | 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"}

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

@@ -0,0 +1,222 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { patternInputVariants } from "./pattern-input-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+import { NumberFormatBase } from "react-number-format";
+//#region src/components/fields/pattern-input/pattern-input.tsx
+/**
+* Separa as variantes (`size`, `variant`) das props do campo: elas vão para o cva e não chegam ao
+* `<input>`, onde `size` seria o atributo nativo de largura.
+*/
+const splitVariantProps = createSplitProps();
+/**
+* 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)}
+* />
+* ```
+*/
+const PatternInput = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { className, mask, value, defaultValue, onValueChange, onKeyDown, ref, ...rest } = elementProps;
+	/** Uma máscara só vira lista de um item: o resto do código trata sempre a lista. */
+	const masks = typeof mask === "string" ? [mask] : mask;
+	/** Se alguma máscara tem `*`: decide o teclado do celular e a maiúscula automática. */
+	const acceptsLetters = masks.some((item) => item.includes("*"));
+	return /* @__PURE__ */ jsx(NumberFormatBase, {
+		"data-component": "PatternInput",
+		customInput: Input,
+		getInputRef: ref,
+		inputMode: acceptsLetters ? "text" : "numeric",
+		autoCapitalize: acceptsLetters ? "characters" : void 0,
+		placeholder: formatPattern("", masks[0] ?? ""),
+		format: (rawValue) => rawValue === "" ? "" : formatPattern(rawValue, selectMask(masks, rawValue) ?? ""),
+		removeFormatting: (inputValue, changeMeta) => removePatternFormatting(inputValue, changeMeta, masks),
+		getCaretBoundary: (formattedValue) => getCaretBoundary(formattedValue, masks),
+		isValidInputCharacter,
+		onKeyDown: (event) => {
+			moveCaretPastLiterals(event);
+			onKeyDown?.(event);
+		},
+		isCharacterSame: ({ currentValue, formattedValue, currentValueIndex, formattedValueIndex }) => currentValue[currentValueIndex]?.toUpperCase() === formattedValue[formattedValueIndex],
+		value: value === null ? "" : value,
+		defaultValue: defaultValue ?? void 0,
+		onValueChange: (values, sourceInfo) => {
+			/** O pacote também avisa quando uma prop muda; aqui, só a mudança do usuário. */
+			if (sourceInfo.source !== "event") return;
+			/** A máscara em uso, para saber se o valor preencheu todas as posições dela. */
+			const selectedMask = selectMask(masks, values.value);
+			onValueChange?.(values.value === "" ? null : values.value, {
+				formattedValue: values.formattedValue,
+				isComplete: selectedMask !== void 0 && values.value.length === countSlots(selectedMask),
+				event: sourceInfo.event
+			});
+		},
+		className: mergeStateClassNames(patternInputVariants(variantProps), className),
+		...rest
+	});
+};
+PatternInput.displayName = "PatternInput";
+/**
+* Marca as posições ainda vazias da máscara. Faz parte do texto do campo, então aparece no
+* `FormData` e no `validate` do `Field` (`"123.4__.___-__"`), e é por ele que o `getCaretBoundary`
+* acha a primeira posição vazia. Não pode ser letra nem dígito, para o `readRawValue` descartá-lo.
+*/
+const placeholderChar = "_";
+/**
+* Os tokens da máscara e o caractere que cada um aceita; o resto da máscara é literal. O `*` só
+* testa maiúscula porque o valor já chega convertido pelo `readRawValue`.
+*/
+const tokenPatterns = {
+	"#": /^\d$/,
+	"*": /^[0-9A-Z]$/
+};
+/**
+* Tudo que não é letra sem acento nem dígito: os literais, o marcador e o que vier num texto
+* colado (espaço, `ç`, `á`). Tem a flag `g` para o `replace` trocar todas as ocorrências; com ela,
+* o `test` guarda a posição entre chamadas, então esta fica só para o `replace`.
+*/
+const nonAlphanumericPattern = /[^0-9a-z]/gi;
+/**
+* Uma letra sem acento ou um dígito. Aceita minúscula porque a tecla digitada chega como foi
+* digitada: a conversão para maiúscula vem depois, no `readRawValue`.
+*/
+const alphanumericPattern = /^[0-9a-z]$/i;
+/**
+* Se o caractere da máscara é um token (`#` ou `*`). Aceita `undefined` para ler uma posição fora da
+* máscara (antes do início ou depois do fim), que conta como não token.
+*/
+const isToken = (char) => char !== void 0 && char in tokenPatterns;
+/**
+* Quantas posições a máscara tem para preencher: o tamanho do valor completo, que decide o
+* `isComplete`.
+*/
+const countSlots = (mask) => [...mask].filter(isToken).length;
+/**
+* Letras e dígitos do texto, com as letras em maiúscula: os literais e o marcador ficam de fora. Lê
+* tanto o texto do campo quanto o `value` por prop, que pode chegar com literais ou em minúscula.
+*/
+const readRawValue = (text) => text.replace(nonAlphanumericPattern, "").toUpperCase();
+/**
+* O que o `NumberFormatBase` trata como caractere do valor (o resto é formatação). Ele usa isso para
+* devolver o cursor ao lugar depois de formatar e para pular a formatação no Backspace e no Delete.
+* O padrão do pacote é só dígito; aqui é qualquer letra ou dígito, e quem decide se a posição aceita
+* o caractere é o `removePatternFormatting`.
+*/
+const isValidInputCharacter = (char) => alphanumericPattern.test(char);
+/**
+* Se a máscara aceita o valor: cabe nas posições, e cada caractere passa no token da sua posição.
+* Vale para valor parcial, que só confere as posições já preenchidas: é o que deixa a lista trocar
+* de máscara no meio da digitação.
+*/
+const fitsMask = (mask, rawValue) => {
+	const tokens = [...mask].filter(isToken);
+	return rawValue.length <= tokens.length && [...rawValue].every((char, index) => tokenPatterns[tokens[index] ?? ""]?.test(char));
+};
+/**
+* A primeira máscara da lista que aceita o valor, ou `undefined` se nenhuma aceita. A ordem decide:
+* no telefone, até 10 dígitos as duas aceitam e vale a do fixo, e o 11º só cabe na do celular. Por
+* isso a mais curta vem antes; com a do celular primeiro, a do fixo nunca seria usada.
+*/
+const selectMask = (masks, rawValue) => masks.find((mask) => fitsMask(mask, rawValue));
+/**
+* O valor na máscara inteira, com o marcador nas posições que sobram. Com o valor vazio, sai a
+* máscara só com o marcador, que é o placeholder. O que passar das posições da máscara é
+* descartado.
+*/
+const formatPattern = (rawValue, mask) => {
+	let index = 0;
+	return [...mask].map((char) => {
+		if (!isToken(char)) return char;
+		const valueChar = rawValue[index] ?? placeholderChar;
+		index += 1;
+		return valueChar;
+	}).join("");
+};
+/**
+* O texto do campo no valor sem os literais, que o `NumberFormatBase` repassa ao `format`. Quando
+* nenhuma máscara aceita o resultado, uma tecla é ignorada (fica o valor anterior), e o resto (o
+* texto colado, o `value` por prop) é cortado no maior começo que alguma máscara aceita.
+*
+* O `changeMeta` vem na digitação e na colagem: `to` é o trecho inserido no texto novo, e
+* `lastValue` o texto antes da mudança. Ele vem `undefined` quando o pacote lê o `value` por prop e
+* quando relê o texto que o `format` acabou de montar.
+*/
+const removePatternFormatting = (inputValue, changeMeta, masks) => {
+	const rawValue = readRawValue(inputValue);
+	if (selectMask(masks, rawValue) !== void 0) return rawValue;
+	/** Quantos caracteres a mudança inseriu: um numa tecla, nenhum ao apagar, mais numa colagem. */
+	const insertedLength = changeMeta ? changeMeta.to.end - changeMeta.to.start : 0;
+	if (changeMeta && insertedLength <= 1) return readRawValue(changeMeta.lastValue);
+	/** Do maior para o menor, o primeiro começo do valor que alguma máscara aceita. */
+	for (let length = rawValue.length - 1; length > 0; length--) {
+		const prefix = rawValue.slice(0, length);
+		if (selectMask(masks, prefix) !== void 0) return prefix;
+	}
+	return "";
+};
+/**
+* No Backspace logo depois de um literal (ou no Delete logo antes), o cursor pula os literais e o
+* marcador antes de a tecla agir: sem isso, ela apagaria só o literal, que o valor ignora, e nada
+* mudaria. Sem letra nem dígito na direção da tecla, o cursor fica onde está. Com texto
+* selecionado, a tecla apaga a seleção, e a função não faz nada.
+*
+* Funciona porque o `keydown` vem antes de o navegador apagar, e o `NumberFormatBase` chama o
+* `onKeyDown` antes de guardar a posição do cursor que usa para medir a mudança.
+*/
+const moveCaretPastLiterals = (event) => {
+	const input = event.currentTarget;
+	const { selectionStart, selectionEnd, value } = input;
+	if (selectionStart === null || selectionStart !== selectionEnd) return;
+	let position = selectionStart;
+	if (event.key === "Backspace") {
+		while (position > 0 && !isValidInputCharacter(value[position - 1] ?? "")) position -= 1;
+		if (position === 0) return;
+	} else if (event.key === "Delete") {
+		while (position < value.length && !isValidInputCharacter(value[position] ?? "")) position += 1;
+		if (position === value.length) return;
+	}
+	if (position !== selectionStart) input.setSelectionRange(position, position);
+};
+/**
+* Onde o cursor pode ficar: junto de uma posição preenchida e na primeira posição vazia. Ele não
+* entra no marcador além dela, nem no meio dos literais.
+*
+* Devolve uma entrada por posição do cursor, do início ao fim do texto (por isso `length + 1`), com
+* `true` onde ele pode ficar. O `NumberFormatBase` leva o cursor para a posição permitida mais
+* próxima no clique, no foco, nas setas e depois de cada mudança.
+*/
+const getCaretBoundary = (formattedValue, masks) => {
+	const mask = selectMask(masks, readRawValue(formattedValue));
+	/** Vazio, ou sem máscara que aceite o valor, o cursor pode ficar em qualquer posição. */
+	if (formattedValue === "" || mask === void 0) return Array.from({ length: formattedValue.length + 1 }, () => true);
+	/** Se a posição é um token já preenchido, e não o marcador. */
+	const isFilledSlot = (position) => isToken(mask[position]) && formattedValue[position] !== placeholderChar;
+	/** Onde entra o próximo caractere; `-1` com a máscara cheia. */
+	const firstEmptySlot = [...mask].findIndex((char, position) => isToken(char) && formattedValue[position] === placeholderChar);
+	/** Permitida: a primeira posição vazia, antes de uma preenchida ou logo depois de uma. */
+	return Array.from({ length: formattedValue.length + 1 }, (_, position) => position === firstEmptySlot || isFilledSlot(position) || isFilledSlot(position - 1));
+};
+//#endregion
+export { PatternInput };
+
+//# sourceMappingURL=pattern-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/pattern-input/pattern-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 {\n  type ChangeMeta,\n  NumberFormatBase,\n  type NumberFormatBaseProps,\n} from 'react-number-format';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type PatternInputVariants,\n  patternInputVariants,\n} from './pattern-input-variants';\n\nexport type PatternInputProps = MergeOverride<\n  Omit<\n    NumberFormatBaseProps<BaseInput.Props>,\n    | 'customInput'\n    | 'displayType'\n    | 'format'\n    | 'getCaretBoundary'\n    | 'getInputRef'\n    | 'isCharacterSame'\n    | 'isValidInputCharacter'\n    | 'removeFormatting'\n    | 'renderText'\n    | 'valueIsNumericString'\n  >,\n  PatternInputVariants & {\n    /**\n     * A máscara: `#` é dígito, `*` é letra ou dígito, e o resto é literal (que não pode ser letra\n     * nem dígito). Numa lista, o campo usa a primeira máscara que aceita o que foi digitado. As\n     * prontas estão em `patternInputMasks`.\n     */\n    mask: string | readonly string[];\n    /**\n     * O valor sem os literais (`\"12345678901\"`), para o modo controlado. `null` deixa o campo\n     * vazio.\n     */\n    value?: string | null;\n    /**\n     * O valor inicial sem os literais, para o modo não controlado.\n     */\n    defaultValue?: string | null;\n    /**\n     * Chamado a cada mudança feita pelo usuário, com o valor sem os literais, ou `null` com o campo\n     * vazio. Mudar o `value` por prop não o chama.\n     */\n    onValueChange?: (\n      value: string | null,\n      details: PatternInputChangeEventDetails,\n    ) => void;\n    ref?: React.Ref<HTMLInputElement>;\n  }\n>;\n\nexport type PatternInputState = BaseInput.State;\n\nexport type PatternInputChangeEventDetails = {\n  /**\n   * O texto como aparece no campo, com os literais e o marcador (`\"123.456.7__-__\"`).\n   */\n  formattedValue: string;\n  /**\n   * Se todas as posições da máscara em uso estão preenchidas.\n   */\n  isComplete: boolean;\n  /**\n   * O evento da digitação.\n   */\n  event: React.SyntheticEvent<HTMLInputElement> | undefined;\n};\n\n/**\n * Separa as variantes (`size`, `variant`) das props do campo: elas vão para o cva e não chegam ao\n * `<input>`, onde `size` seria o atributo nativo de largura.\n */\nconst splitVariantProps = createSplitProps<PatternInputVariants>();\n\n/**\n * Campo com máscara (CPF, CNPJ, CEP, telefone), sobre o `NumberFormatBase` do `react-number-format`\n * e o `Input` do Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da\n * lib.\n *\n * - Com algo digitado, o campo mostra a máscara inteira, com `_` nas posições vazias. Vazio, ele\n *   fica vazio, e o placeholder padrão é a primeira máscara com o marcador.\n * - Numa lista de máscaras, o campo troca de máscara conforme o que foi digitado: no telefone, o\n *   11º dígito passa para celular.\n * - Letras viram maiúsculas. Uma tecla que nenhuma máscara aceita é ignorada; o texto colado é\n *   cortado no que couber.\n *\n * O valor sai pelo `onValueChange`, sem os literais, com `isComplete` dizendo se a máscara foi\n * preenchida. O campo guarda o texto formatado, e é ele que vai no `FormData`, no `onFormSubmit` do\n * `Form` e no `validate` do `Field`.\n *\n * @example\n * ```tsx\n * <PatternInput\n *   aria-label=\"Telefone\"\n *   mask={patternInputMasks.phone}\n *   onValueChange={(value) => setPhone(value)}\n * />\n * ```\n */\nexport const PatternInput = (props: PatternInputProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const {\n    className,\n    mask,\n    value,\n    defaultValue,\n    onValueChange,\n    onKeyDown,\n    ref,\n    ...rest\n  } = elementProps;\n\n  /** Uma máscara só vira lista de um item: o resto do código trata sempre a lista. */\n  const masks = typeof mask === 'string' ? [mask] : mask;\n\n  /** Se alguma máscara tem `*`: decide o teclado do celular e a maiúscula automática. */\n  const acceptsLetters = masks.some((item) => item.includes('*'));\n\n  return (\n    <NumberFormatBase\n      data-component=\"PatternInput\"\n      customInput={BaseInput}\n      getInputRef={ref}\n      // O teclado `numeric` do celular não tem letras\n      inputMode={acceptsLetters ? 'text' : 'numeric'}\n      // O teclado do celular já abre em maiúscula; no desktop, não muda nada\n      autoCapitalize={acceptsLetters ? 'characters' : undefined}\n      // A primeira máscara só com o marcador; uma prop `placeholder` substitui\n      placeholder={formatPattern('', masks[0] ?? '')}\n      // Vazio, o texto fica vazio, sem a máscara: o `required` e o placeholder continuam valendo\n      format={(rawValue) =>\n        rawValue === ''\n          ? ''\n          : formatPattern(rawValue, selectMask(masks, rawValue) ?? '')\n      }\n      removeFormatting={(inputValue, changeMeta) =>\n        removePatternFormatting(inputValue, changeMeta, masks)\n      }\n      getCaretBoundary={(formattedValue) =>\n        getCaretBoundary(formattedValue, masks)\n      }\n      isValidInputCharacter={isValidInputCharacter}\n      // O pacote chama este `onKeyDown` dentro do dele, antes de guardar a posição do cursor\n      onKeyDown={(event) => {\n        moveCaretPastLiterals(event);\n\n        onKeyDown?.(event);\n      }}\n      // O pacote liga cada caractere digitado ao do texto formatado para devolver o cursor ao\n      // lugar; a letra digitada em minúscula volta em maiúscula e precisa contar como a mesma\n      isCharacterSame={({\n        currentValue,\n        formattedValue,\n        currentValueIndex,\n        formattedValueIndex,\n      }) =>\n        currentValue[currentValueIndex]?.toUpperCase() ===\n        formattedValue[formattedValueIndex]\n      }\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        /** A máscara em uso, para saber se o valor preencheu todas as posições dela. */\n        const selectedMask = selectMask(masks, values.value);\n\n        onValueChange?.(values.value === '' ? null : values.value, {\n          formattedValue: values.formattedValue,\n          isComplete:\n            selectedMask !== undefined &&\n            values.value.length === countSlots(selectedMask),\n          event: sourceInfo.event,\n        });\n      }}\n      className={mergeStateClassNames(\n        patternInputVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nPatternInput.displayName = 'PatternInput';\n\n/**\n * Marca as posições ainda vazias da máscara. Faz parte do texto do campo, então aparece no\n * `FormData` e no `validate` do `Field` (`\"123.4__.___-__\"`), e é por ele que o `getCaretBoundary`\n * acha a primeira posição vazia. Não pode ser letra nem dígito, para o `readRawValue` descartá-lo.\n */\nconst placeholderChar = '_';\n\n/**\n * Os tokens da máscara e o caractere que cada um aceita; o resto da máscara é literal. O `*` só\n * testa maiúscula porque o valor já chega convertido pelo `readRawValue`.\n */\nconst tokenPatterns: Record<string, RegExp> = {\n  '#': /^\\d$/,\n  '*': /^[0-9A-Z]$/,\n};\n\n/**\n * Tudo que não é letra sem acento nem dígito: os literais, o marcador e o que vier num texto\n * colado (espaço, `ç`, `á`). Tem a flag `g` para o `replace` trocar todas as ocorrências; com ela,\n * o `test` guarda a posição entre chamadas, então esta fica só para o `replace`.\n */\nconst nonAlphanumericPattern = /[^0-9a-z]/gi;\n\n/**\n * Uma letra sem acento ou um dígito. Aceita minúscula porque a tecla digitada chega como foi\n * digitada: a conversão para maiúscula vem depois, no `readRawValue`.\n */\nconst alphanumericPattern = /^[0-9a-z]$/i;\n\n/**\n * Se o caractere da máscara é um token (`#` ou `*`). Aceita `undefined` para ler uma posição fora da\n * máscara (antes do início ou depois do fim), que conta como não token.\n */\nconst isToken = (char: string | undefined) =>\n  char !== undefined && char in tokenPatterns;\n\n/**\n * Quantas posições a máscara tem para preencher: o tamanho do valor completo, que decide o\n * `isComplete`.\n */\nconst countSlots = (mask: string) => [...mask].filter(isToken).length;\n\n/**\n * Letras e dígitos do texto, com as letras em maiúscula: os literais e o marcador ficam de fora. Lê\n * tanto o texto do campo quanto o `value` por prop, que pode chegar com literais ou em minúscula.\n */\nconst readRawValue = (text: string) =>\n  text.replace(nonAlphanumericPattern, '').toUpperCase();\n\n/**\n * O que o `NumberFormatBase` trata como caractere do valor (o resto é formatação). Ele usa isso para\n * devolver o cursor ao lugar depois de formatar e para pular a formatação no Backspace e no Delete.\n * O padrão do pacote é só dígito; aqui é qualquer letra ou dígito, e quem decide se a posição aceita\n * o caractere é o `removePatternFormatting`.\n */\nconst isValidInputCharacter = (char: string) => alphanumericPattern.test(char);\n\n/**\n * Se a máscara aceita o valor: cabe nas posições, e cada caractere passa no token da sua posição.\n * Vale para valor parcial, que só confere as posições já preenchidas: é o que deixa a lista trocar\n * de máscara no meio da digitação.\n */\nconst fitsMask = (mask: string, rawValue: string) => {\n  const tokens = [...mask].filter(isToken);\n\n  return (\n    rawValue.length <= tokens.length &&\n    [...rawValue].every((char, index) =>\n      tokenPatterns[tokens[index] ?? '']?.test(char),\n    )\n  );\n};\n\n/**\n * A primeira máscara da lista que aceita o valor, ou `undefined` se nenhuma aceita. A ordem decide:\n * no telefone, até 10 dígitos as duas aceitam e vale a do fixo, e o 11º só cabe na do celular. Por\n * isso a mais curta vem antes; com a do celular primeiro, a do fixo nunca seria usada.\n */\nconst selectMask = (masks: readonly string[], rawValue: string) =>\n  masks.find((mask) => fitsMask(mask, rawValue));\n\n/**\n * O valor na máscara inteira, com o marcador nas posições que sobram. Com o valor vazio, sai a\n * máscara só com o marcador, que é o placeholder. O que passar das posições da máscara é\n * descartado.\n */\nconst formatPattern = (rawValue: string, mask: string) => {\n  let index = 0;\n\n  return [...mask]\n    .map((char) => {\n      if (!isToken(char)) {\n        return char;\n      }\n\n      const valueChar = rawValue[index] ?? placeholderChar;\n\n      index += 1;\n\n      return valueChar;\n    })\n    .join('');\n};\n\n/**\n * O texto do campo no valor sem os literais, que o `NumberFormatBase` repassa ao `format`. Quando\n * nenhuma máscara aceita o resultado, uma tecla é ignorada (fica o valor anterior), e o resto (o\n * texto colado, o `value` por prop) é cortado no maior começo que alguma máscara aceita.\n *\n * O `changeMeta` vem na digitação e na colagem: `to` é o trecho inserido no texto novo, e\n * `lastValue` o texto antes da mudança. Ele vem `undefined` quando o pacote lê o `value` por prop e\n * quando relê o texto que o `format` acabou de montar.\n */\nconst removePatternFormatting = (\n  inputValue: string,\n  changeMeta: ChangeMeta | undefined,\n  masks: readonly string[],\n): string => {\n  const rawValue = readRawValue(inputValue);\n\n  if (selectMask(masks, rawValue) !== undefined) {\n    return rawValue;\n  }\n\n  /** Quantos caracteres a mudança inseriu: um numa tecla, nenhum ao apagar, mais numa colagem. */\n  const insertedLength = changeMeta\n    ? changeMeta.to.end - changeMeta.to.start\n    : 0;\n\n  if (changeMeta && insertedLength <= 1) {\n    return readRawValue(changeMeta.lastValue);\n  }\n\n  /** Do maior para o menor, o primeiro começo do valor que alguma máscara aceita. */\n  for (let length = rawValue.length - 1; length > 0; length--) {\n    const prefix = rawValue.slice(0, length);\n\n    if (selectMask(masks, prefix) !== undefined) {\n      return prefix;\n    }\n  }\n\n  return '';\n};\n\n/**\n * No Backspace logo depois de um literal (ou no Delete logo antes), o cursor pula os literais e o\n * marcador antes de a tecla agir: sem isso, ela apagaria só o literal, que o valor ignora, e nada\n * mudaria. Sem letra nem dígito na direção da tecla, o cursor fica onde está. Com texto\n * selecionado, a tecla apaga a seleção, e a função não faz nada.\n *\n * Funciona porque o `keydown` vem antes de o navegador apagar, e o `NumberFormatBase` chama o\n * `onKeyDown` antes de guardar a posição do cursor que usa para medir a mudança.\n */\nconst moveCaretPastLiterals = (\n  event: React.KeyboardEvent<HTMLInputElement>,\n) => {\n  const input = event.currentTarget;\n\n  const { selectionStart, selectionEnd, value } = input;\n\n  if (selectionStart === null || selectionStart !== selectionEnd) {\n    return;\n  }\n\n  let position = selectionStart;\n\n  if (event.key === 'Backspace') {\n    while (position > 0 && !isValidInputCharacter(value[position - 1] ?? '')) {\n      position -= 1;\n    }\n\n    if (position === 0) {\n      return;\n    }\n  } else if (event.key === 'Delete') {\n    while (\n      position < value.length &&\n      !isValidInputCharacter(value[position] ?? '')\n    ) {\n      position += 1;\n    }\n\n    if (position === value.length) {\n      return;\n    }\n  }\n\n  if (position !== selectionStart) {\n    input.setSelectionRange(position, position);\n  }\n};\n\n/**\n * Onde o cursor pode ficar: junto de uma posição preenchida e na primeira posição vazia. Ele não\n * entra no marcador além dela, nem no meio dos literais.\n *\n * Devolve uma entrada por posição do cursor, do início ao fim do texto (por isso `length + 1`), com\n * `true` onde ele pode ficar. O `NumberFormatBase` leva o cursor para a posição permitida mais\n * próxima no clique, no foco, nas setas e depois de cada mudança.\n */\nconst getCaretBoundary = (formattedValue: string, masks: readonly string[]) => {\n  const mask = selectMask(masks, readRawValue(formattedValue));\n\n  /** Vazio, ou sem máscara que aceite o valor, o cursor pode ficar em qualquer posição. */\n  if (formattedValue === '' || mask === undefined) {\n    return Array.from({ length: formattedValue.length + 1 }, () => true);\n  }\n\n  /** Se a posição é um token já preenchido, e não o marcador. */\n  const isFilledSlot = (position: number) =>\n    isToken(mask[position]) && formattedValue[position] !== placeholderChar;\n\n  /** Onde entra o próximo caractere; `-1` com a máscara cheia. */\n  const firstEmptySlot = [...mask].findIndex(\n    (char, position) =>\n      isToken(char) && formattedValue[position] === placeholderChar,\n  );\n\n  /** Permitida: a primeira posição vazia, antes de uma preenchida ou logo depois de uma. */\n  return Array.from(\n    { length: formattedValue.length + 1 },\n    (_, position) =>\n      position === firstEmptySlot ||\n      isFilledSlot(position) ||\n      isFilledSlot(position - 1),\n  );\n};\n"],"mappings":";;;;;;;;;;;AA6EA,MAAM,oBAAoB,iBAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BjE,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EACJ,WACA,MACA,OACA,cACA,eACA,WACA,KACA,GAAG,SACD;;CAGJ,MAAM,QAAQ,OAAO,SAAS,WAAW,CAAC,IAAI,IAAI;;CAGlD,MAAM,iBAAiB,MAAM,MAAM,SAAS,KAAK,SAAS,GAAG,CAAC;CAE9D,OACE,oBAAC,kBAAD;EACE,kBAAe;EACf,aAAaA;EACb,aAAa;EAEb,WAAW,iBAAiB,SAAS;EAErC,gBAAgB,iBAAiB,eAAe,KAAA;EAEhD,aAAa,cAAc,IAAI,MAAM,MAAM,EAAE;EAE7C,SAAS,aACP,aAAa,KACT,KACA,cAAc,UAAU,WAAW,OAAO,QAAQ,KAAK,EAAE;EAE/D,mBAAmB,YAAY,eAC7B,wBAAwB,YAAY,YAAY,KAAK;EAEvD,mBAAmB,mBACjB,iBAAiB,gBAAgB,KAAK;EAEjB;EAEvB,YAAY,UAAU;GACpB,sBAAsB,KAAK;GAE3B,YAAY,KAAK;EACnB;EAGA,kBAAkB,EAChB,cACA,gBACA,mBACA,0BAEA,aAAa,kBAAkB,EAAE,YAAY,MAC7C,eAAe;EAGjB,OAAO,UAAU,OAAO,KAAK;EAC7B,cAAc,gBAAgB,KAAA;EAC9B,gBAAgB,QAAQ,eAAe;;GAErC,IAAI,WAAW,WAAW,SACxB;;GAIF,MAAM,eAAe,WAAW,OAAO,OAAO,KAAK;GAEnD,gBAAgB,OAAO,UAAU,KAAK,OAAO,OAAO,OAAO;IACzD,gBAAgB,OAAO;IACvB,YACE,iBAAiB,KAAA,KACjB,OAAO,MAAM,WAAW,WAAW,YAAY;IACjD,OAAO,WAAW;GACpB,CAAC;EACH;EACA,WAAW,qBACT,qBAAqB,YAAY,GACjC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc;;;;;;AAO3B,MAAM,kBAAkB;;;;;AAMxB,MAAM,gBAAwC;CAC5C,KAAK;CACL,KAAK;AACP;;;;;;AAOA,MAAM,yBAAyB;;;;;AAM/B,MAAM,sBAAsB;;;;;AAM5B,MAAM,WAAW,SACf,SAAS,KAAA,KAAa,QAAQ;;;;;AAMhC,MAAM,cAAc,SAAiB,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;;;;;AAM/D,MAAM,gBAAgB,SACpB,KAAK,QAAQ,wBAAwB,EAAE,CAAC,CAAC,YAAY;;;;;;;AAQvD,MAAM,yBAAyB,SAAiB,oBAAoB,KAAK,IAAI;;;;;;AAO7E,MAAM,YAAY,MAAc,aAAqB;CACnD,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,OAAO;CAEvC,OACE,SAAS,UAAU,OAAO,UAC1B,CAAC,GAAG,QAAQ,CAAC,CAAC,OAAO,MAAM,UACzB,cAAc,OAAO,UAAU,GAAG,EAAE,KAAK,IAAI,CAC/C;AAEJ;;;;;;AAOA,MAAM,cAAc,OAA0B,aAC5C,MAAM,MAAM,SAAS,SAAS,MAAM,QAAQ,CAAC;;;;;;AAO/C,MAAM,iBAAiB,UAAkB,SAAiB;CACxD,IAAI,QAAQ;CAEZ,OAAO,CAAC,GAAG,IAAI,CAAC,CACb,KAAK,SAAS;EACb,IAAI,CAAC,QAAQ,IAAI,GACf,OAAO;EAGT,MAAM,YAAY,SAAS,UAAU;EAErC,SAAS;EAET,OAAO;CACT,CAAC,CAAC,CACD,KAAK,EAAE;AACZ;;;;;;;;;;AAWA,MAAM,2BACJ,YACA,YACA,UACW;CACX,MAAM,WAAW,aAAa,UAAU;CAExC,IAAI,WAAW,OAAO,QAAQ,MAAM,KAAA,GAClC,OAAO;;CAIT,MAAM,iBAAiB,aACnB,WAAW,GAAG,MAAM,WAAW,GAAG,QAClC;CAEJ,IAAI,cAAc,kBAAkB,GAClC,OAAO,aAAa,WAAW,SAAS;;CAI1C,KAAK,IAAI,SAAS,SAAS,SAAS,GAAG,SAAS,GAAG,UAAU;EAC3D,MAAM,SAAS,SAAS,MAAM,GAAG,MAAM;EAEvC,IAAI,WAAW,OAAO,MAAM,MAAM,KAAA,GAChC,OAAO;CAEX;CAEA,OAAO;AACT;;;;;;;;;;AAWA,MAAM,yBACJ,UACG;CACH,MAAM,QAAQ,MAAM;CAEpB,MAAM,EAAE,gBAAgB,cAAc,UAAU;CAEhD,IAAI,mBAAmB,QAAQ,mBAAmB,cAChD;CAGF,IAAI,WAAW;CAEf,IAAI,MAAM,QAAQ,aAAa;EAC7B,OAAO,WAAW,KAAK,CAAC,sBAAsB,MAAM,WAAW,MAAM,EAAE,GACrE,YAAY;EAGd,IAAI,aAAa,GACf;CAEJ,OAAO,IAAI,MAAM,QAAQ,UAAU;EACjC,OACE,WAAW,MAAM,UACjB,CAAC,sBAAsB,MAAM,aAAa,EAAE,GAE5C,YAAY;EAGd,IAAI,aAAa,MAAM,QACrB;CAEJ;CAEA,IAAI,aAAa,gBACf,MAAM,kBAAkB,UAAU,QAAQ;AAE9C;;;;;;;;;AAUA,MAAM,oBAAoB,gBAAwB,UAA6B;CAC7E,MAAM,OAAO,WAAW,OAAO,aAAa,cAAc,CAAC;;CAG3D,IAAI,mBAAmB,MAAM,SAAS,KAAA,GACpC,OAAO,MAAM,KAAK,EAAE,QAAQ,eAAe,SAAS,EAAE,SAAS,IAAI;;CAIrE,MAAM,gBAAgB,aACpB,QAAQ,KAAK,SAAS,KAAK,eAAe,cAAc;;CAG1D,MAAM,iBAAiB,CAAC,GAAG,IAAI,CAAC,CAAC,WAC9B,MAAM,aACL,QAAQ,IAAI,KAAK,eAAe,cAAc,eAClD;;CAGA,OAAO,MAAM,KACX,EAAE,QAAQ,eAAe,SAAS,EAAE,IACnC,GAAG,aACF,aAAa,kBACb,aAAa,QAAQ,KACrB,aAAa,WAAW,CAAC,CAC7B;AACF"}

package/dist/components/fields/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Switch };

package/dist/components/fields/switch/index.js

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Switch };

package/dist/components/fields/switch/index.parts.d.ts

@@ -0,0 +1,9 @@
+import { SwitchRootVariants } from "./switch-root-variants.js";
+import { SwitchRoot, SwitchRootChangeEventDetails, SwitchRootChangeEventReason, SwitchRootProps, SwitchRootState } from "./switch-root.js";
+import { SwitchThumb, SwitchThumbProps, SwitchThumbState } from "./switch-thumb.js";
+declare namespace index_parts_d_exports {
+  export { SwitchRoot as Root, SwitchRootChangeEventDetails as RootChangeEventDetails, SwitchRootChangeEventReason as RootChangeEventReason, SwitchRootProps as RootProps, SwitchRootState as RootState, SwitchRootVariants as RootVariants, SwitchThumb as Thumb, SwitchThumbProps as ThumbProps, SwitchThumbState as ThumbState };
+}
+//#endregion
+export { SwitchRoot as Root, type SwitchRootChangeEventDetails as RootChangeEventDetails, type SwitchRootChangeEventReason as RootChangeEventReason, type SwitchRootProps as RootProps, type SwitchRootState as RootState, type SwitchRootVariants as RootVariants, SwitchThumb as Thumb, type SwitchThumbProps as ThumbProps, type SwitchThumbState as ThumbState, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/fields/switch/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/components/fields/switch/index.parts.ts"],"mappings":""}

package/dist/components/fields/switch/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { SwitchRoot } from "./switch-root.js";
+import { SwitchThumb } from "./switch-thumb.js";
+//#region src/components/fields/switch/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Root: () => SwitchRoot,
+	Thumb: () => SwitchThumb
+});
+//#endregion
+export { SwitchRoot as Root, SwitchThumb as Thumb, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/fields/switch/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/switch/index.parts.ts"],"sourcesContent":["export { SwitchRoot as Root } from './switch-root';\nexport { SwitchThumb as Thumb } from './switch-thumb';\n\n/* types */\n\nexport type {\n  SwitchRootChangeEventDetails as RootChangeEventDetails,\n  SwitchRootChangeEventReason as RootChangeEventReason,\n  SwitchRootProps as RootProps,\n  SwitchRootState as RootState,\n} from './switch-root';\nexport type { SwitchRootVariants as RootVariants } from './switch-root-variants';\nexport type {\n  SwitchThumbProps as ThumbProps,\n  SwitchThumbState as ThumbState,\n} from './switch-thumb';\n"],"mappings":""}

package/dist/components/fields/switch/switch-root-variants.d.ts

@@ -0,0 +1,33 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/fields/switch/switch-root-variants.d.ts
+export type SwitchRootVariants = {
+  /**
+   * Cor do trilho ligado, da bolinha ligada e do anel de foco.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Tamanho do trilho. A bolinha do `Switch.Thumb` acompanha.
+   *
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+export declare const switchRootDefaultVariants: Required<SwitchRootVariants>;
+/**
+ * O trilho declara as medidas e as cores em CSS variables, e o `Switch.Thumb` as lê:
+ * - `--switch-width` e `--switch-height` vêm do `size`, e a bolinha mede a altura do trilho;
+ * - `--switch-x` é o deslocamento da bolinha ligada (a largura menos a altura), negativo em RTL;
+ * - `--switch-checked-bg` e `--switch-thumb-checked-bg` vêm do `colorScheme`.
+ *
+ * Inválido (`data-invalid` do `Field` ou `aria-invalid`) contorna o trilho desligado de vermelho,
+ * como a caixa desmarcada do `Checkbox`: o erro de um switch quase sempre é "não ligado". O anel
+ * de foco também fica vermelho.
+ */
+export declare const switchRootVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=switch-root-variants.d.ts.map

package/dist/components/fields/switch/switch-root-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-root-variants.d.ts","names":[],"sources":["../../../../src/components/fields/switch/switch-root-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;EAMd;;qBAGW,2BAA2B,SAAS;;;;;;;;;;;qBAepC,qBAAkB;;;6CA4E9B"}