@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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":"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"}

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"}

package/dist/components/fields/switch/switch-root-variants.js

@@ -0,0 +1,78 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/switch/switch-root-variants.ts
+const switchRootDefaultVariants = {
+	colorScheme: "gray",
+	size: "md"
+};
+/**
+* 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.
+*/
+const switchRootVariants = cva([
+	"relative",
+	"inline-flex",
+	"shrink-0",
+	"align-middle",
+	"w-(--switch-width)",
+	"h-(--switch-height)",
+	"[--switch-x:calc(var(--switch-width)-var(--switch-height))]",
+	"rtl:[--switch-x:calc((var(--switch-width)-var(--switch-height))*-1)]",
+	"rounded-full",
+	"bg-gray-6",
+	"data-checked:bg-(--switch-checked-bg)",
+	"inset-shadow-sm",
+	"transition-[background-color]",
+	"cursor-pointer",
+	"select-none",
+	"focus-ring-outside",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-readonly:cursor-default",
+	"data-invalid:not-data-checked:outline-2",
+	"data-invalid:not-data-checked:outline-offset-2",
+	"data-invalid:not-data-checked:outline-solid",
+	"data-invalid:not-data-checked:outline-red-9",
+	"aria-invalid:not-data-checked:outline-2",
+	"aria-invalid:not-data-checked:outline-offset-2",
+	"aria-invalid:not-data-checked:outline-solid",
+	"aria-invalid:not-data-checked:outline-red-9",
+	"data-invalid:ring-red-9",
+	"aria-invalid:ring-red-9"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--switch-checked-bg:var(--color-black)]",
+				"dark:[--switch-checked-bg:var(--color-white)]",
+				"[--switch-thumb-checked-bg:var(--color-white)]",
+				"dark:[--switch-thumb-checked-bg:var(--color-black)]",
+				"ring-gray-9"
+			],
+			brand: [
+				"[--switch-checked-bg:var(--color-brand-9)]",
+				"[--switch-thumb-checked-bg:var(--color-white)]",
+				"ring-brand-9"
+			]
+		},
+		size: {
+			xs: ["[--switch-width:--spacing(6)]", "[--switch-height:--spacing(3)]"],
+			sm: ["[--switch-width:--spacing(8)]", "[--switch-height:--spacing(4)]"],
+			md: ["[--switch-width:--spacing(10)]", "[--switch-height:--spacing(5)]"],
+			lg: ["[--switch-width:--spacing(12)]", "[--switch-height:--spacing(6)]"]
+		}
+	},
+	defaultVariants: {
+		colorScheme: switchRootDefaultVariants.colorScheme,
+		size: switchRootDefaultVariants.size
+	}
+});
+//#endregion
+export { switchRootDefaultVariants, switchRootVariants };
+
+//# sourceMappingURL=switch-root-variants.js.map

package/dist/components/fields/switch/switch-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-root-variants.js","names":[],"sources":["../../../../src/components/fields/switch/switch-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SwitchRootVariants = {\n  /**\n   * Cor do trilho ligado, da bolinha ligada e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho do trilho. A bolinha do `Switch.Thumb` acompanha.\n   *\n   * @default 'md'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n};\n\nexport const switchRootDefaultVariants: Required<SwitchRootVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n};\n\n/**\n * O trilho declara as medidas e as cores em CSS variables, e o `Switch.Thumb` as lê:\n * - `--switch-width` e `--switch-height` vêm do `size`, e a bolinha mede a altura do trilho;\n * - `--switch-x` é o deslocamento da bolinha ligada (a largura menos a altura), negativo em RTL;\n * - `--switch-checked-bg` e `--switch-thumb-checked-bg` vêm do `colorScheme`.\n *\n * Inválido (`data-invalid` do `Field` ou `aria-invalid`) contorna o trilho desligado de vermelho,\n * como a caixa desmarcada do `Checkbox`: o erro de um switch quase sempre é \"não ligado\". O anel\n * de foco também fica vermelho.\n */\nexport const switchRootVariants = cva(\n  [\n    'relative',\n    'inline-flex',\n    'shrink-0',\n    'align-middle',\n\n    'w-(--switch-width)',\n    'h-(--switch-height)',\n\n    '[--switch-x:calc(var(--switch-width)-var(--switch-height))]',\n    'rtl:[--switch-x:calc((var(--switch-width)-var(--switch-height))*-1)]',\n\n    'rounded-full',\n\n    'bg-gray-6',\n    'data-checked:bg-(--switch-checked-bg)',\n    'inset-shadow-sm',\n\n    'transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n\n    'cursor-pointer',\n    'select-none',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-readonly:cursor-default',\n\n    'data-invalid:not-data-checked:outline-2',\n    'data-invalid:not-data-checked:outline-offset-2',\n    'data-invalid:not-data-checked:outline-solid',\n    'data-invalid:not-data-checked:outline-red-9',\n    'aria-invalid:not-data-checked:outline-2',\n    'aria-invalid:not-data-checked:outline-offset-2',\n    'aria-invalid:not-data-checked:outline-solid',\n    'aria-invalid:not-data-checked:outline-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--switch-checked-bg:var(--color-black)]',\n          'dark:[--switch-checked-bg:var(--color-white)]',\n          '[--switch-thumb-checked-bg:var(--color-white)]',\n          'dark:[--switch-thumb-checked-bg:var(--color-black)]',\n          'ring-gray-9',\n        ],\n        brand: [\n          '[--switch-checked-bg:var(--color-brand-9)]',\n          '[--switch-thumb-checked-bg:var(--color-white)]',\n          'ring-brand-9',\n        ],\n      },\n      size: {\n        xs: ['[--switch-width:--spacing(6)]', '[--switch-height:--spacing(3)]'],\n        sm: ['[--switch-width:--spacing(8)]', '[--switch-height:--spacing(4)]'],\n        md: [\n          '[--switch-width:--spacing(10)]',\n          '[--switch-height:--spacing(5)]',\n        ],\n        lg: [\n          '[--switch-width:--spacing(12)]',\n          '[--switch-height:--spacing(6)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: switchRootDefaultVariants.colorScheme,\n      size: switchRootDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;AAkBA,MAAa,4BAA0D;CACrE,aAAa;CACb,MAAM;AACR;;;;;;;;;;;AAYA,MAAa,qBAAqB,IAChC;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,iCAAiC,gCAAgC;GACtE,IAAI,CAAC,iCAAiC,gCAAgC;GACtE,IAAI,CACF,kCACA,gCACF;GACA,IAAI,CACF,kCACA,gCACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,0BAA0B;EACvC,MAAM,0BAA0B;CAClC;AACF,CACF"}

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

@@ -0,0 +1,32 @@
+import { SwitchRootVariants } from "./switch-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/fields/switch/switch-root.d.ts
+export type SwitchRootProps = MergeOverride<Switch.Root.Props, SwitchRootVariants>;
+export type SwitchRootState = Switch.Root.State;
+export type SwitchRootChangeEventDetails = Switch.Root.ChangeEventDetails;
+export type SwitchRootChangeEventReason = Switch.Root.ChangeEventReason;
+/**
+ * O trilho do switch, com um `<input>` escondido ao lado para o formulário. Renderiza um `<span>`,
+ * para caber dentro de um `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo
+ * visível, use `aria-label`.
+ *
+ * O `size` e o `colorScheme` chegam à bolinha por CSS variables declaradas aqui: o
+ * `Switch.Thumb` não recebe variantes.
+ *
+ * @example
+ * ```tsx
+ * <label>
+ *   <Switch.Root>
+ *     <Switch.Thumb />
+ *   </Switch.Root>
+ *   Receber notificações por e-mail
+ * </label>
+ * ```
+ */
+export declare const SwitchRoot: {
+  (props: SwitchRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=switch-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-root.d.ts","names":["BaseSwitch"],"sources":["../../../../src/components/fields/switch/switch-root.tsx"],"mappings":";;;;YAQY,kBAAkB,cAC5BA,OAAW,KAAK,OAChB;YAGU,kBAAkBA,OAAW,KAAK;YAElC,+BAA+BA,OAAW,KAAK;YAE/C,8BAA8BA,OAAW,KAAK;;;;;;;;;;;;;;;;;;;qBAsB7C;GAAqB,OAAA,kCAAe,IAAA"}

package/dist/components/fields/switch/switch-root.js

@@ -0,0 +1,39 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { switchRootVariants } from "./switch-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/fields/switch/switch-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* O trilho do switch, com um `<input>` escondido ao lado para o formulário. Renderiza um `<span>`,
+* para caber dentro de um `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo
+* visível, use `aria-label`.
+*
+* O `size` e o `colorScheme` chegam à bolinha por CSS variables declaradas aqui: o
+* `Switch.Thumb` não recebe variantes.
+*
+* @example
+* ```tsx
+* <label>
+*   <Switch.Root>
+*     <Switch.Thumb />
+*   </Switch.Root>
+*   Receber notificações por e-mail
+* </label>
+* ```
+*/
+const SwitchRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "size"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-component": "Switch.Root",
+		className: mergeStateClassNames(switchRootVariants(variantProps), className),
+		...rest
+	});
+};
+SwitchRoot.displayName = "Switch.Root";
+//#endregion
+export { SwitchRoot };
+
+//# sourceMappingURL=switch-root.js.map

package/dist/components/fields/switch/switch-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-root.js","names":["BaseSwitch"],"sources":["../../../../src/components/fields/switch/switch-root.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type SwitchRootVariants,\n  switchRootVariants,\n} from './switch-root-variants';\n\nexport type SwitchRootProps = MergeOverride<\n  BaseSwitch.Root.Props,\n  SwitchRootVariants\n>;\n\nexport type SwitchRootState = BaseSwitch.Root.State;\n\nexport type SwitchRootChangeEventDetails = BaseSwitch.Root.ChangeEventDetails;\n\nexport type SwitchRootChangeEventReason = BaseSwitch.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<SwitchRootVariants>();\n\n/**\n * O trilho do switch, com um `<input>` escondido ao lado para o formulário. Renderiza um `<span>`,\n * para caber dentro de um `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo\n * visível, use `aria-label`.\n *\n * O `size` e o `colorScheme` chegam à bolinha por CSS variables declaradas aqui: o\n * `Switch.Thumb` não recebe variantes.\n *\n * @example\n * ```tsx\n * <label>\n *   <Switch.Root>\n *     <Switch.Thumb />\n *   </Switch.Root>\n *   Receber notificações por e-mail\n * </label>\n * ```\n */\nexport const SwitchRoot = (props: SwitchRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseSwitch.Root\n      data-component=\"Switch.Root\"\n      className={mergeStateClassNames(\n        switchRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSwitchRoot.displayName = 'Switch.Root';\n"],"mappings":";;;;;;AAmBA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;;;;AAoB/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,MACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,MAAZ;EACE,kBAAe;EACf,WAAW,qBACT,mBAAmB,YAAY,GAC/B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/fields/switch/switch-thumb.d.ts

@@ -0,0 +1,15 @@
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/fields/switch/switch-thumb.d.ts
+export type SwitchThumbProps = Switch.Thumb.Props;
+export type SwitchThumbState = Switch.Thumb.State;
+/**
+ * A bolinha que desliza dentro do trilho. Mede a altura do trilho, reduzida a 80% para sobrar uma
+ * folga em volta, e lê do `Switch.Root` o tamanho, o deslocamento e a cor de ligada. Com
+ * `children`, o conteúdo (um ícone) fica centralizado nela.
+ */
+export declare const SwitchThumb: {
+  (props: SwitchThumbProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=switch-thumb.d.ts.map

package/dist/components/fields/switch/switch-thumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-thumb.d.ts","names":["BaseSwitch"],"sources":["../../../../src/components/fields/switch/switch-thumb.tsx"],"mappings":";;YAGY,mBAAmBA,OAAW,MAAM;YAEpC,mBAAmBA,OAAW,MAAM;;;;;;qBAOnC;GAAsB,OAAA,mCAAgB,IAAA"}

package/dist/components/fields/switch/switch-thumb.js

@@ -0,0 +1,38 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/fields/switch/switch-thumb.tsx
+/**
+* A bolinha que desliza dentro do trilho. Mede a altura do trilho, reduzida a 80% para sobrar uma
+* folga em volta, e lê do `Switch.Root` o tamanho, o deslocamento e a cor de ligada. Com
+* `children`, o conteúdo (um ícone) fica centralizado nela.
+*/
+const SwitchThumb = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		"data-component": "Switch.Thumb",
+		className: mergeStateClassNames([
+			"flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"size-(--switch-height)",
+			"scale-80",
+			"rounded-full",
+			"bg-white",
+			"shadow-sm",
+			"shadow-black/25",
+			"data-checked:bg-(--switch-thumb-checked-bg)",
+			"data-checked:translate-x-(--switch-x)",
+			"not-motion-reduced:transition-[translate]",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:ease-move"
+		], className),
+		...rest
+	});
+};
+SwitchThumb.displayName = "Switch.Thumb";
+//#endregion
+export { SwitchThumb };
+
+//# sourceMappingURL=switch-thumb.js.map

package/dist/components/fields/switch/switch-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-thumb.js","names":["BaseSwitch"],"sources":["../../../../src/components/fields/switch/switch-thumb.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { mergeStateClassNames } from '#utils';\n\nexport type SwitchThumbProps = BaseSwitch.Thumb.Props;\n\nexport type SwitchThumbState = BaseSwitch.Thumb.State;\n\n/**\n * A bolinha que desliza dentro do trilho. Mede a altura do trilho, reduzida a 80% para sobrar uma\n * folga em volta, e lê do `Switch.Root` o tamanho, o deslocamento e a cor de ligada. Com\n * `children`, o conteúdo (um ícone) fica centralizado nela.\n */\nexport const SwitchThumb = (props: SwitchThumbProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseSwitch.Thumb\n      data-component=\"Switch.Thumb\"\n      className={mergeStateClassNames(\n        [\n          'flex',\n          'items-center',\n          'justify-center',\n          'shrink-0',\n\n          'size-(--switch-height)',\n          'scale-80',\n\n          'rounded-full',\n\n          'bg-white',\n          'shadow-sm',\n          'shadow-black/25',\n\n          'data-checked:bg-(--switch-thumb-checked-bg)',\n          'data-checked:translate-x-(--switch-x)',\n\n          'not-motion-reduced:transition-[translate]',\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:ease-move',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSwitchThumb.displayName = 'Switch.Thumb';\n"],"mappings":";;;;;;;;;AAYA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

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

@@ -0,0 +1,3 @@
+import { TextareaVariants } from "./textarea-variants.js";
+import { Textarea, TextareaChangeEventDetails, TextareaChangeEventReason, TextareaProps, TextareaState } from "./textarea.js";
+export { Textarea, type TextareaChangeEventDetails, type TextareaChangeEventReason, type TextareaProps, type TextareaState, type TextareaVariants };

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

@@ -0,0 +1,2 @@
+import { Textarea } from "./textarea.js";
+export { Textarea };

package/dist/components/fields/textarea/textarea-variants.d.ts

@@ -0,0 +1,38 @@
+//#region src/components/fields/textarea/textarea-variants.d.ts
+export type TextareaVariants = {
+  /**
+   * Padding e tamanho do texto, com os nomes do `Input`. Sem altura fixa: ela vem de `rows` ou,
+   * com `field-sizing-content`, do conteúdo. 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 textareaDefaultVariants: Required<TextareaVariants>;
+/**
+ * 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` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,
+ *   do conteúdo;
+ * - `block`, `resize-y` e o padding vertical em `--textarea-py`.
+ *
+ * Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:
+ * - `py`;
+ * - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o
+ *   cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;
+ * - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e
+ *   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.
+ */
+export declare const textareaVariants: (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=textarea-variants.d.ts.map