@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/fields/currency-brl-input/currency-brl-input.js

@@ -0,0 +1,170 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { currencyBrlInputVariants } from "./currency-brl-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/currency-brl-input/currency-brl-input.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Campo de valor em reais com a digitação de caixa eletrônico: cada dígito entra pelos centavos e
+* empurra os anteriores para a esquerda ("1", "12", "123" → R$ 0,01, R$ 0,12, R$ 1,23). 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.
+*
+* - O dígito entra sempre no fim, onde quer que esteja o cursor; o Backspace apaga o último.
+* - Sem dígitos (ou só zeros), o campo fica vazio e o valor é `null`. Zero digitado não fica:
+*   o zero vem pelo `value`.
+* - O texto colado é lido como número em pt-BR: "1.234,5", "1234.5" e "1234" viram R$ 1.234,50,
+*   R$ 1.234,50 e R$ 1.234,00.
+* - No máximo 15 dígitos (R$ 9.999.999.999.999,99), dentro da precisão de um `number`.
+*
+* O valor sai pelo `onValueChange`. O campo guarda o texto formatado (`"R$ 1.234,56"`), e é ele
+* que vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.
+*
+* O teclado do celular é o numérico (`inputMode="numeric"`). No iPhone, ele não tem o sinal de
+* menos; para digitar negativo lá, `inputMode="text"`.
+*
+* @example
+* ```tsx
+* <CurrencyBrlInput
+*   aria-label="Valor do pedido"
+*   onValueChange={(value) => setAmount(value)}
+* />
+* ```
+*/
+const CurrencyBrlInput = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { className, value, defaultValue, onValueChange, allowNegative = false, ref, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(NumberFormatBase, {
+		"data-component": "CurrencyBrlInput",
+		customInput: Input,
+		getInputRef: ref,
+		inputMode: "numeric",
+		placeholder: "R$ 0,00",
+		format: formatCurrency,
+		removeFormatting: (inputValue, changeMeta) => removeCurrencyFormatting(inputValue, changeMeta, allowNegative),
+		getCaretBoundary,
+		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;
+			onValueChange?.(values.floatValue ?? null, {
+				formattedValue: values.formattedValue,
+				event: sourceInfo.event
+			});
+		},
+		className: mergeStateClassNames(currencyBrlInputVariants(variantProps), className),
+		...rest
+	});
+};
+CurrencyBrlInput.displayName = "CurrencyBrlInput";
+/**
+* Acima disso, o valor em centavos passa do maior inteiro exato de um `number`.
+*/
+const maxDigits = 15;
+const currencyFormat = new Intl.NumberFormat("pt-BR", {
+	style: "currency",
+	currency: "BRL"
+});
+const digitPattern = /\d/;
+const singleDigitPattern = /^\d$/;
+const nonDigitPattern = /\D/g;
+const leadingZerosPattern = /^0+/;
+const minusPattern = /-/g;
+/** Tudo que não é dígito, vírgula nem ponto: "R$", espaços, sinal. */
+const nonNumberPattern = /[^\d,.]/g;
+/** Um único ponto seguido de 1 ou 2 dígitos no fim: o ponto é decimal (`"1234.5"`). */
+const dotDecimalPattern = /^\d*\.\d{1,2}$/;
+/**
+* O valor numérico (`"1234.56"`) no texto do campo (`"R$ 1.234,56"`). O `-` sozinho aparece como
+* está: é o sinal digitado antes do primeiro dígito.
+*/
+const formatCurrency = (numericString) => {
+	if (numericString === "" || numericString === "-") return numericString;
+	return currencyFormat.format(Number(numericString));
+};
+/**
+* O texto do campo no valor numérico (`"1234.56"`), que o `NumberFormatBase` repassa ao
+* `format`. Sem `changeMeta`, o texto já está formatado e só é lido; com ele, é uma edição:
+*
+* - mais de um caractere inserido de uma vez é colagem, lida como número; sem dígito nenhum, ela é
+*   ignorada;
+* - um dígito digitado sem seleção vai para o fim dos dígitos anteriores, onde quer que esteja o
+*   cursor (o pacote não o corrige no Home, por exemplo);
+* - o resto (apagar, digitar sobre uma seleção, o `-`) sai do texto como ficou.
+*/
+const removeCurrencyFormatting = (inputValue, changeMeta, allowNegative) => {
+	if (changeMeta === void 0) return toNumericString(readTypedCents(inputValue), allowNegative, hasDigit(inputValue));
+	const insertedText = inputValue.slice(changeMeta.to.start, changeMeta.to.end);
+	const isPaste = insertedText.length > 1;
+	const hasSelection = changeMeta.from.start !== changeMeta.from.end;
+	/** A edição descartada deixa o valor anterior. */
+	const getLastNumericString = () => removeCurrencyFormatting(changeMeta.lastValue, void 0, allowNegative);
+	if (isPaste && !hasDigit(insertedText)) return getLastNumericString();
+	const getCents = () => {
+		if (isPaste) return readPastedCents(insertedText);
+		if (!hasSelection && singleDigitPattern.test(insertedText)) {
+			const lastCents = readTypedCents(changeMeta.lastValue);
+			return {
+				...lastCents,
+				digits: (lastCents.digits + insertedText).replace(leadingZerosPattern, "")
+			};
+		}
+		return readTypedCents(inputValue);
+	};
+	const cents = getCents();
+	if (cents.digits.length > maxDigits) return getLastNumericString();
+	return toNumericString(cents, allowNegative, hasDigit(insertedText.length > 0 ? insertedText : inputValue));
+};
+/**
+* Dígitos e sinal de um texto digitado ou formatado. Cada `-` alterna o sinal: digitar `-` num
+* valor negativo (`"-R$ 1,00-"`) o torna positivo.
+*/
+const readTypedCents = (text) => ({
+	digits: text.replace(nonDigitPattern, "").replace(leadingZerosPattern, ""),
+	isNegative: (text.match(minusPattern)?.length ?? 0) % 2 === 1
+});
+/**
+* Dígitos e sinal de um texto colado, lido como número em pt-BR. A vírgula separa os centavos; sem
+* ela, um único ponto seguido de 1 ou 2 dígitos também (`"1234.5"`), e qualquer outro ponto é de
+* milhar (`"1.234"`). Casas além da segunda são descartadas.
+*/
+const readPastedCents = (text) => {
+	const number = text.replace(nonNumberPattern, "");
+	const commaIndex = number.lastIndexOf(",");
+	const getParts = () => {
+		if (commaIndex >= 0) return [number.slice(0, commaIndex), number.slice(commaIndex + 1)];
+		if (dotDecimalPattern.test(number)) {
+			const [integer = "", fraction = ""] = number.split(".");
+			return [integer, fraction];
+		}
+		return [number, ""];
+	};
+	const [integer, fraction] = getParts();
+	return {
+		digits: (integer.replace(nonDigitPattern, "") + fraction.replace(nonDigitPattern, "").padEnd(2, "0").slice(0, 2)).replace(leadingZerosPattern, ""),
+		isNegative: text.includes("-")
+	};
+};
+/**
+* Os centavos no valor numérico (`"-1234.56"`). Sem dígitos (ou só zeros), o campo fica vazio, e
+* zero nunca é negativo. O `-` sozinho só fica quando o texto não tem dígito nenhum: é o sinal
+* digitado antes do primeiro dígito.
+*/
+const toNumericString = (cents, allowNegative, textHasDigit) => {
+	const sign = allowNegative && cents.isNegative ? "-" : "";
+	if (cents.digits === "") return textHasDigit ? "" : sign;
+	const padded = cents.digits.padStart(3, "0");
+	return `${sign}${padded.slice(0, -2)}.${padded.slice(-2)}`;
+};
+const hasDigit = (text) => digitPattern.test(text);
+/**
+* O cursor só fica no fim: o valor cresce pela direita, como num caixa eletrônico.
+*/
+const getCaretBoundary = (formattedValue) => Array.from({ length: formattedValue.length + 1 }, (_, index) => index === formattedValue.length);
+//#endregion
+export { CurrencyBrlInput };
+
+//# sourceMappingURL=currency-brl-input.js.map

package/dist/components/fields/currency-brl-input/currency-brl-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-brl-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-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 CurrencyBrlInputVariants,\n  currencyBrlInputVariants,\n} from './currency-brl-input-variants';\n\nexport type CurrencyBrlInputProps = 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  CurrencyBrlInputVariants & {\n    /**\n     * O valor em reais, para o modo controlado. `null` deixa o campo vazio.\n     */\n    value?: number | null;\n    /**\n     * O valor inicial em reais, para o modo não controlado.\n     */\n    defaultValue?: number | null;\n    /**\n     * Chamado a cada mudança feita pelo usuário, com o valor em reais, ou `null` com o campo\n     * vazio. Mudar o `value` por prop não o chama.\n     */\n    onValueChange?: (\n      value: number | null,\n      details: CurrencyBrlInputChangeEventDetails,\n    ) => void;\n    /**\n     * Aceita valor negativo: o `-` alterna o sinal.\n     *\n     * @default false\n     */\n    allowNegative?: boolean;\n    ref?: React.Ref<HTMLInputElement>;\n  }\n>;\n\nexport type CurrencyBrlInputState = BaseInput.State;\n\nexport type CurrencyBrlInputChangeEventDetails = {\n  /**\n   * O texto como aparece no campo (`\"R$ 1.234,56\"`).\n   */\n  formattedValue: string;\n  /**\n   * O evento da digitação.\n   */\n  event: React.SyntheticEvent<HTMLInputElement> | undefined;\n};\n\nconst splitVariantProps = createSplitProps<CurrencyBrlInputVariants>();\n\n/**\n * Campo de valor em reais com a digitação de caixa eletrônico: cada dígito entra pelos centavos e\n * empurra os anteriores para a esquerda (\"1\", \"12\", \"123\" → R$ 0,01, R$ 0,12, R$ 1,23). Sobre o\n * `NumberFormatBase` do `react-number-format` e o `Input` do Base UI: liga-se sozinho ao `Field`\n * quando está dentro de um, como o `Input` da lib.\n *\n * - O dígito entra sempre no fim, onde quer que esteja o cursor; o Backspace apaga o último.\n * - Sem dígitos (ou só zeros), o campo fica vazio e o valor é `null`. Zero digitado não fica:\n *   o zero vem pelo `value`.\n * - O texto colado é lido como número em pt-BR: \"1.234,5\", \"1234.5\" e \"1234\" viram R$ 1.234,50,\n *   R$ 1.234,50 e R$ 1.234,00.\n * - No máximo 15 dígitos (R$ 9.999.999.999.999,99), dentro da precisão de um `number`.\n *\n * O valor sai pelo `onValueChange`. O campo guarda o texto formatado (`\"R$ 1.234,56\"`), e é ele\n * que vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.\n *\n * O teclado do celular é o numérico (`inputMode=\"numeric\"`). No iPhone, ele não tem o sinal de\n * menos; para digitar negativo lá, `inputMode=\"text\"`.\n *\n * @example\n * ```tsx\n * <CurrencyBrlInput\n *   aria-label=\"Valor do pedido\"\n *   onValueChange={(value) => setAmount(value)}\n * />\n * ```\n */\nexport const CurrencyBrlInput = (props: CurrencyBrlInputProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const {\n    className,\n    value,\n    defaultValue,\n    onValueChange,\n    allowNegative = false,\n    ref,\n    ...rest\n  } = elementProps;\n\n  return (\n    <NumberFormatBase\n      data-component=\"CurrencyBrlInput\"\n      customInput={BaseInput}\n      getInputRef={ref}\n      inputMode=\"numeric\"\n      placeholder=\"R$ 0,00\"\n      format={formatCurrency}\n      removeFormatting={(inputValue, changeMeta) =>\n        removeCurrencyFormatting(inputValue, changeMeta, allowNegative)\n      }\n      getCaretBoundary={getCaretBoundary}\n      // O `react-number-format` trata `null` como não controlado; `''` é o campo vazio controlado.\n      value={value === null ? '' : value}\n      defaultValue={defaultValue ?? undefined}\n      onValueChange={(values, sourceInfo) => {\n        /** O pacote também avisa quando uma prop muda; aqui, só a mudança do usuário. */\n        if (sourceInfo.source !== 'event') {\n          return;\n        }\n\n        onValueChange?.(values.floatValue ?? null, {\n          formattedValue: values.formattedValue,\n          event: sourceInfo.event,\n        });\n      }}\n      className={mergeStateClassNames(\n        currencyBrlInputVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCurrencyBrlInput.displayName = 'CurrencyBrlInput';\n\n/**\n * Dígitos e sinal do valor. Os dígitos são os centavos, sem zeros à esquerda: `\"123\"` é R$ 1,23.\n */\ntype Cents = {\n  digits: string;\n  isNegative: boolean;\n};\n\n/**\n * Acima disso, o valor em centavos passa do maior inteiro exato de um `number`.\n */\nconst maxDigits = 15;\n\nconst currencyFormat = new Intl.NumberFormat('pt-BR', {\n  style: 'currency',\n  currency: 'BRL',\n});\n\nconst digitPattern = /\\d/;\n\nconst singleDigitPattern = /^\\d$/;\n\nconst nonDigitPattern = /\\D/g;\n\nconst leadingZerosPattern = /^0+/;\n\nconst minusPattern = /-/g;\n\n/** Tudo que não é dígito, vírgula nem ponto: \"R$\", espaços, sinal. */\nconst nonNumberPattern = /[^\\d,.]/g;\n\n/** Um único ponto seguido de 1 ou 2 dígitos no fim: o ponto é decimal (`\"1234.5\"`). */\nconst dotDecimalPattern = /^\\d*\\.\\d{1,2}$/;\n\n/**\n * O valor numérico (`\"1234.56\"`) no texto do campo (`\"R$ 1.234,56\"`). O `-` sozinho aparece como\n * está: é o sinal digitado antes do primeiro dígito.\n */\nconst formatCurrency = (numericString: string) => {\n  if (numericString === '' || numericString === '-') {\n    return numericString;\n  }\n\n  return currencyFormat.format(Number(numericString));\n};\n\n/**\n * O texto do campo no valor numérico (`\"1234.56\"`), que o `NumberFormatBase` repassa ao\n * `format`. Sem `changeMeta`, o texto já está formatado e só é lido; com ele, é uma edição:\n *\n * - mais de um caractere inserido de uma vez é colagem, lida como número; sem dígito nenhum, ela é\n *   ignorada;\n * - um dígito digitado sem seleção vai para o fim dos dígitos anteriores, onde quer que esteja o\n *   cursor (o pacote não o corrige no Home, por exemplo);\n * - o resto (apagar, digitar sobre uma seleção, o `-`) sai do texto como ficou.\n */\nconst removeCurrencyFormatting = (\n  inputValue: string,\n  changeMeta: ChangeMeta | undefined,\n  allowNegative: boolean,\n): string => {\n  if (changeMeta === undefined) {\n    return toNumericString(\n      readTypedCents(inputValue),\n      allowNegative,\n      hasDigit(inputValue),\n    );\n  }\n\n  const insertedText = inputValue.slice(changeMeta.to.start, changeMeta.to.end);\n\n  const isPaste = insertedText.length > 1;\n\n  const hasSelection = changeMeta.from.start !== changeMeta.from.end;\n\n  /** A edição descartada deixa o valor anterior. */\n  const getLastNumericString = () =>\n    removeCurrencyFormatting(changeMeta.lastValue, undefined, allowNegative);\n\n  if (isPaste && !hasDigit(insertedText)) {\n    return getLastNumericString();\n  }\n\n  const getCents = (): Cents => {\n    if (isPaste) {\n      return readPastedCents(insertedText);\n    }\n\n    if (!hasSelection && singleDigitPattern.test(insertedText)) {\n      const lastCents = readTypedCents(changeMeta.lastValue);\n\n      return {\n        ...lastCents,\n        digits: (lastCents.digits + insertedText).replace(\n          leadingZerosPattern,\n          '',\n        ),\n      };\n    }\n\n    return readTypedCents(inputValue);\n  };\n\n  const cents = getCents();\n\n  if (cents.digits.length > maxDigits) {\n    return getLastNumericString();\n  }\n\n  return toNumericString(\n    cents,\n    allowNegative,\n    hasDigit(insertedText.length > 0 ? insertedText : inputValue),\n  );\n};\n\n/**\n * Dígitos e sinal de um texto digitado ou formatado. Cada `-` alterna o sinal: digitar `-` num\n * valor negativo (`\"-R$ 1,00-\"`) o torna positivo.\n */\nconst readTypedCents = (text: string): Cents => ({\n  digits: text.replace(nonDigitPattern, '').replace(leadingZerosPattern, ''),\n  isNegative: (text.match(minusPattern)?.length ?? 0) % 2 === 1,\n});\n\n/**\n * Dígitos e sinal de um texto colado, lido como número em pt-BR. A vírgula separa os centavos; sem\n * ela, um único ponto seguido de 1 ou 2 dígitos também (`\"1234.5\"`), e qualquer outro ponto é de\n * milhar (`\"1.234\"`). Casas além da segunda são descartadas.\n */\nconst readPastedCents = (text: string): Cents => {\n  const number = text.replace(nonNumberPattern, '');\n\n  const commaIndex = number.lastIndexOf(',');\n\n  const getParts = (): [string, string] => {\n    if (commaIndex >= 0) {\n      return [number.slice(0, commaIndex), number.slice(commaIndex + 1)];\n    }\n\n    if (dotDecimalPattern.test(number)) {\n      const [integer = '', fraction = ''] = number.split('.');\n\n      return [integer, fraction];\n    }\n\n    return [number, ''];\n  };\n\n  const [integer, fraction] = getParts();\n\n  const digits =\n    integer.replace(nonDigitPattern, '') +\n    fraction.replace(nonDigitPattern, '').padEnd(2, '0').slice(0, 2);\n\n  return {\n    digits: digits.replace(leadingZerosPattern, ''),\n    isNegative: text.includes('-'),\n  };\n};\n\n/**\n * Os centavos no valor numérico (`\"-1234.56\"`). Sem dígitos (ou só zeros), o campo fica vazio, e\n * zero nunca é negativo. O `-` sozinho só fica quando o texto não tem dígito nenhum: é o sinal\n * digitado antes do primeiro dígito.\n */\nconst toNumericString = (\n  cents: Cents,\n  allowNegative: boolean,\n  textHasDigit: boolean,\n): string => {\n  const sign = allowNegative && cents.isNegative ? '-' : '';\n\n  if (cents.digits === '') {\n    return textHasDigit ? '' : sign;\n  }\n\n  const padded = cents.digits.padStart(3, '0');\n\n  return `${sign}${padded.slice(0, -2)}.${padded.slice(-2)}`;\n};\n\nconst hasDigit = (text: string) => digitPattern.test(text);\n\n/**\n * O cursor só fica no fim: o valor cresce pela direita, como num caixa eletrônico.\n */\nconst getCaretBoundary = (formattedValue: string) =>\n  Array.from(\n    { length: formattedValue.length + 1 },\n    (_, index) => index === formattedValue.length,\n  );\n"],"mappings":"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"}

package/dist/components/fields/currency-brl-input/index.d.ts

@@ -0,0 +1,3 @@
+import { CurrencyBrlInputVariants } from "./currency-brl-input-variants.js";
+import { CurrencyBrlInput, CurrencyBrlInputChangeEventDetails, CurrencyBrlInputProps, CurrencyBrlInputState } from "./currency-brl-input.js";
+export { CurrencyBrlInput, type CurrencyBrlInputChangeEventDetails, type CurrencyBrlInputProps, type CurrencyBrlInputState, type CurrencyBrlInputVariants };

package/dist/components/fields/currency-brl-input/index.js

@@ -0,0 +1,2 @@
+import { CurrencyBrlInput } from "./currency-brl-input.js";
+export { CurrencyBrlInput };

package/dist/components/fields/field/field-description.d.ts

@@ -0,0 +1,13 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-description.d.ts
+export type FieldDescriptionProps = Field.Description.Props;
+export type FieldDescriptionState = Field.Description.State;
+/**
+ * Texto de apoio do campo, ligado ao controle por `aria-describedby`.
+ */
+export declare const FieldDescription: {
+  (props: FieldDescriptionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-description.d.ts.map

package/dist/components/fields/field/field-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-description.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-description.tsx"],"mappings":";;YAGY,wBAAwBA,MAAU,YAAY;YAE9C,wBAAwBA,MAAU,YAAY;;;;qBAK7C;GAA2B,OAAA,wCAAqB,IAAA"}

package/dist/components/fields/field/field-description.js

@@ -0,0 +1,25 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-description.tsx
+/**
+* Texto de apoio do campo, ligado ao controle por `aria-describedby`.
+*/
+const FieldDescription = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Field.Description, {
+		"data-component": "Field.Description",
+		className: mergeStateClassNames([
+			"col-start-2",
+			"text-(length:--field-message-size,var(--text-xs))",
+			"leading-(--field-message-leading,var(--text-xs--line-height))",
+			"text-gray-11"
+		], className),
+		...rest
+	});
+};
+FieldDescription.displayName = "Field.Description";
+//#endregion
+export { FieldDescription };
+
+//# sourceMappingURL=field-description.js.map

package/dist/components/fields/field/field-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-description.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-description.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldDescriptionProps = BaseField.Description.Props;\n\nexport type FieldDescriptionState = BaseField.Description.State;\n\n/**\n * Texto de apoio do campo, ligado ao controle por `aria-describedby`.\n */\nexport const FieldDescription = (props: FieldDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseField.Description\n      data-component=\"Field.Description\"\n      className={mergeStateClassNames(\n        [\n          // Embaixo do rótulo no grid do `Field.Item` (ver `FieldItem`); fora de grid, não faz nada.\n          'col-start-2',\n\n          // Tamanho e linha vêm do `size` do `Field.Root` (ver `fieldRootVariants`).\n          'text-(length:--field-message-size,var(--text-xs))',\n          'leading-(--field-message-leading,var(--text-xs--line-height))',\n          'text-gray-11',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldDescription.displayName = 'Field.Description';\n"],"mappings":";;;;;;;AAUA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,aAAX;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GAGA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/fields/field/field-error.d.ts

@@ -0,0 +1,23 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-error.d.ts
+export type FieldErrorProps = Field.Error.Props;
+export type FieldErrorState = Field.Error.State;
+/**
+ * Mensagem de erro do campo. Só existe no DOM enquanto aparece:
+ *
+ * - sem `match`: quando a validação marcou o campo inválido ou o `Form` tem `errors` para o
+ *   `name` dele;
+ * - com `match="valueMissing"` (ou outra chave do `ValidityState`): quando aquela regra falha;
+ * - com `match={true}`: sempre. É o caso de `invalid` vindo de fora, que sozinho não mostra o
+ *   erro.
+ *
+ * Sem `children`, mostra a mensagem do navegador, no idioma dele. Com vários erros, renderiza uma
+ * lista. Não tem `aria-live`: o leitor de tela lê o erro quando o foco chega no controle, e o
+ * `Form` foca o primeiro inválido no envio.
+ */
+export declare const FieldError: {
+  (props: FieldErrorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-error.d.ts.map

package/dist/components/fields/field/field-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-error.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-error.tsx"],"mappings":";;YAGY,kBAAkBA,MAAU,MAAM;YAElC,kBAAkBA,MAAU,MAAM;;;;;;;;;;;;;;qBAejC;GAAqB,OAAA,kCAAe,IAAA"}

package/dist/components/fields/field/field-error.js

@@ -0,0 +1,42 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-error.tsx
+/**
+* Mensagem de erro do campo. Só existe no DOM enquanto aparece:
+*
+* - sem `match`: quando a validação marcou o campo inválido ou o `Form` tem `errors` para o
+*   `name` dele;
+* - com `match="valueMissing"` (ou outra chave do `ValidityState`): quando aquela regra falha;
+* - com `match={true}`: sempre. É o caso de `invalid` vindo de fora, que sozinho não mostra o
+*   erro.
+*
+* Sem `children`, mostra a mensagem do navegador, no idioma dele. Com vários erros, renderiza uma
+* lista. Não tem `aria-live`: o leitor de tela lê o erro quando o foco chega no controle, e o
+* `Form` foca o primeiro inválido no envio.
+*/
+const FieldError = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Field.Error, {
+		"data-component": "Field.Error",
+		className: mergeStateClassNames([
+			"col-start-2",
+			"text-(length:--field-message-size,var(--text-xs))",
+			"leading-(--field-message-leading,var(--text-xs--line-height))",
+			"text-red-11",
+			"not-motion-reduced:transition-opacity",
+			"not-motion-reduced:ease-enter",
+			"not-motion-reduced:duration-150",
+			"data-starting-style:opacity-0",
+			"data-ending-style:opacity-0",
+			"not-motion-reduced:data-ending-style:ease-exit",
+			"not-motion-reduced:data-ending-style:duration-100"
+		], className),
+		...rest
+	});
+};
+FieldError.displayName = "Field.Error";
+//#endregion
+export { FieldError };
+
+//# sourceMappingURL=field-error.js.map

package/dist/components/fields/field/field-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-error.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-error.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldErrorProps = BaseField.Error.Props;\n\nexport type FieldErrorState = BaseField.Error.State;\n\n/**\n * Mensagem de erro do campo. Só existe no DOM enquanto aparece:\n *\n * - sem `match`: quando a validação marcou o campo inválido ou o `Form` tem `errors` para o\n *   `name` dele;\n * - com `match=\"valueMissing\"` (ou outra chave do `ValidityState`): quando aquela regra falha;\n * - com `match={true}`: sempre. É o caso de `invalid` vindo de fora, que sozinho não mostra o\n *   erro.\n *\n * Sem `children`, mostra a mensagem do navegador, no idioma dele. Com vários erros, renderiza uma\n * lista. Não tem `aria-live`: o leitor de tela lê o erro quando o foco chega no controle, e o\n * `Form` foca o primeiro inválido no envio.\n */\nexport const FieldError = (props: FieldErrorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseField.Error\n      data-component=\"Field.Error\"\n      className={mergeStateClassNames(\n        [\n          // Embaixo do rótulo no grid do `Field.Item` (ver `FieldItem`); fora de grid, não faz nada.\n          'col-start-2',\n\n          // Tamanho e linha vêm do `size` do `Field.Root` (ver `fieldRootVariants`).\n          'text-(length:--field-message-size,var(--text-xs))',\n          'leading-(--field-message-leading,var(--text-xs--line-height))',\n          'text-red-11',\n\n          // Só opacidade: o erro já empurra o layout ao montar.\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter',\n          'not-motion-reduced:duration-150',\n\n          'data-starting-style:opacity-0',\n          'data-ending-style:opacity-0',\n          'not-motion-reduced:data-ending-style:ease-exit',\n          'not-motion-reduced:data-ending-style:duration-100',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldError.displayName = 'Field.Error';\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GAGA;GACA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/fields/field/field-header.d.ts

@@ -0,0 +1,33 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-header.d.ts
+export type FieldHeaderProps = useRender.ComponentProps<'div'>;
+/**
+ * Topo do campo: uma linha com o `Field.Label` e um elemento ao lado dele, como uma ação de texto.
+ * Para levar o elemento ao fim da linha, use `ms-auto` nele.
+ *
+ * O que fica aqui está fora do `<label>` e não entra no nome acessível do controle: informação
+ * essencial vai no `Field.Description`.
+ *
+ * A linha não tem altura fixa. Numa grade de campos, um elemento mais alto que a linha do rótulo
+ * (16px no `size` padrão) empurra o controle e o desalinha dos vizinhos: prefira um texto pequeno
+ * ou um ícone sem caixa.
+ *
+ * @example
+ * ```tsx
+ * <Field.Header>
+ *   <Field.Label>CNPJ</Field.Label>
+ *   <button
+ *     type="button"
+ *     className="ms-auto text-xs"
+ *   >
+ *     Consultar
+ *   </button>
+ * </Field.Header>
+ * ```
+ */
+export declare const FieldHeader: {
+  (props: FieldHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-header.d.ts.map

package/dist/components/fields/field/field-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-header.d.ts","names":[],"sources":["../../../../src/components/fields/field/field-header.tsx"],"mappings":";;YAGY,mBAAmB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;qBA0B5B;GAAsB,OAAA,mCAAgB,+CAAA"}

package/dist/components/fields/field/field-header.js

@@ -0,0 +1,48 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-header.tsx
+/**
+* Topo do campo: uma linha com o `Field.Label` e um elemento ao lado dele, como uma ação de texto.
+* Para levar o elemento ao fim da linha, use `ms-auto` nele.
+*
+* O que fica aqui está fora do `<label>` e não entra no nome acessível do controle: informação
+* essencial vai no `Field.Description`.
+*
+* A linha não tem altura fixa. Numa grade de campos, um elemento mais alto que a linha do rótulo
+* (16px no `size` padrão) empurra o controle e o desalinha dos vizinhos: prefira um texto pequeno
+* ou um ícone sem caixa.
+*
+* @example
+* ```tsx
+* <Field.Header>
+*   <Field.Label>CNPJ</Field.Label>
+*   <button
+*     type="button"
+*     className="ms-auto text-xs"
+*   >
+*     Consultar
+*   </button>
+* </Field.Header>
+* ```
+*/
+const FieldHeader = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Field.Header",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"gap-2"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+FieldHeader.displayName = "Field.Header";
+//#endregion
+export { FieldHeader };
+
+//# sourceMappingURL=field-header.js.map

package/dist/components/fields/field/field-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-header.js","names":[],"sources":["../../../../src/components/fields/field/field-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type FieldHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do campo: uma linha com o `Field.Label` e um elemento ao lado dele, como uma ação de texto.\n * Para levar o elemento ao fim da linha, use `ms-auto` nele.\n *\n * O que fica aqui está fora do `<label>` e não entra no nome acessível do controle: informação\n * essencial vai no `Field.Description`.\n *\n * A linha não tem altura fixa. Numa grade de campos, um elemento mais alto que a linha do rótulo\n * (16px no `size` padrão) empurra o controle e o desalinha dos vizinhos: prefira um texto pequeno\n * ou um ícone sem caixa.\n *\n * @example\n * ```tsx\n * <Field.Header>\n *   <Field.Label>CNPJ</Field.Label>\n *   <button\n *     type=\"button\"\n *     className=\"ms-auto text-xs\"\n *   >\n *     Consultar\n *   </button>\n * </Field.Header>\n * ```\n */\nexport const FieldHeader = (props: FieldHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Field.Header',\n    className: mergeTwClassNames(['flex', 'items-center', 'gap-2'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nFieldHeader.displayName = 'Field.Header';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB;GAAC;GAAQ;GAAgB;EAAO,GAAG,SAAS;CAC3E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/components/fields/field/field-item.d.ts

@@ -0,0 +1,30 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-item.d.ts
+export type FieldItemProps = Field.Item.Props;
+export type FieldItemState = Field.Item.State;
+/**
+ * Uma opção de um grupo de Checkbox ou Radio, com rótulo e descrição próprios. Fica dentro de um
+ * `Fieldset.Root` com `render={<Checkbox.Group />}`, que dá o nome do grupo pela `Legend`.
+ *
+ * O controle, o `Field.Label` e o `Field.Description` entram como irmãos, sem o rótulo envolver o
+ * controle: o grid põe o controle na primeira coluna e o rótulo na segunda. A descrição e o erro
+ * vão para a segunda coluna pelo `col-start-2` que eles mesmos trazem, que fora de um grid não
+ * tem efeito. O rótulo de cada opção fica em peso normal.
+ *
+ * @example
+ * ```tsx
+ * <Field.Item>
+ *   <Checkbox.Root value="daily">
+ *     <Checkbox.Indicator />
+ *   </Checkbox.Root>
+ *   <Field.Label>Diário</Field.Label>
+ *   <Field.Description>Todo dia à meia-noite.</Field.Description>
+ * </Field.Item>
+ * ```
+ */
+export declare const FieldItem: {
+  (props: FieldItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-item.d.ts.map

package/dist/components/fields/field/field-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-item.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-item.tsx"],"mappings":";;YAGY,iBAAiBA,MAAU,KAAK;YAEhC,iBAAiBA,MAAU,KAAK;;;;;;;;;;;;;;;;;;;;;qBAsB/B;GAAoB,OAAA,iCAAc,IAAA"}

package/dist/components/fields/field/field-item.js

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-item.tsx
+/**
+* Uma opção de um grupo de Checkbox ou Radio, com rótulo e descrição próprios. Fica dentro de um
+* `Fieldset.Root` com `render={<Checkbox.Group />}`, que dá o nome do grupo pela `Legend`.
+*
+* O controle, o `Field.Label` e o `Field.Description` entram como irmãos, sem o rótulo envolver o
+* controle: o grid põe o controle na primeira coluna e o rótulo na segunda. A descrição e o erro
+* vão para a segunda coluna pelo `col-start-2` que eles mesmos trazem, que fora de um grid não
+* tem efeito. O rótulo de cada opção fica em peso normal.
+*
+* @example
+* ```tsx
+* <Field.Item>
+*   <Checkbox.Root value="daily">
+*     <Checkbox.Indicator />
+*   </Checkbox.Root>
+*   <Field.Label>Diário</Field.Label>
+*   <Field.Description>Todo dia à meia-noite.</Field.Description>
+* </Field.Item>
+* ```
+*/
+const FieldItem = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Field.Item, {
+		"data-component": "Field.Item",
+		className: mergeStateClassNames([
+			"grid",
+			"grid-cols-[auto_1fr]",
+			"items-center",
+			"gap-x-2",
+			"gap-y-(--field-gap,--spacing(1))"
+		], className),
+		...rest
+	});
+};
+FieldItem.displayName = "Field.Item";
+//#endregion
+export { FieldItem };
+
+//# sourceMappingURL=field-item.js.map

package/dist/components/fields/field/field-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-item.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-item.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldItemProps = BaseField.Item.Props;\n\nexport type FieldItemState = BaseField.Item.State;\n\n/**\n * Uma opção de um grupo de Checkbox ou Radio, com rótulo e descrição próprios. Fica dentro de um\n * `Fieldset.Root` com `render={<Checkbox.Group />}`, que dá o nome do grupo pela `Legend`.\n *\n * O controle, o `Field.Label` e o `Field.Description` entram como irmãos, sem o rótulo envolver o\n * controle: o grid põe o controle na primeira coluna e o rótulo na segunda. A descrição e o erro\n * vão para a segunda coluna pelo `col-start-2` que eles mesmos trazem, que fora de um grid não\n * tem efeito. O rótulo de cada opção fica em peso normal.\n *\n * @example\n * ```tsx\n * <Field.Item>\n *   <Checkbox.Root value=\"daily\">\n *     <Checkbox.Indicator />\n *   </Checkbox.Root>\n *   <Field.Label>Diário</Field.Label>\n *   <Field.Description>Todo dia à meia-noite.</Field.Description>\n * </Field.Item>\n * ```\n */\nexport const FieldItem = (props: FieldItemProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseField.Item\n      data-component=\"Field.Item\"\n      className={mergeStateClassNames(\n        [\n          'grid',\n          'grid-cols-[auto_1fr]',\n          'items-center',\n          'gap-x-2',\n          // O mesmo espaço do `Field.Root`, que vem do `size` (ver `fieldRootVariants`).\n          'gap-y-(--field-gap,--spacing(1))',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldItem.displayName = 'Field.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,MAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/fields/field/field-label.d.ts

@@ -0,0 +1,24 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-label.d.ts
+export type FieldLabelProps = Field.Label.Props;
+export type FieldLabelState = Field.Label.State;
+/**
+ * Rótulo do campo: um `<label>` ligado ao controle por `htmlFor`. O Select tem rótulo próprio,
+ * o `Select.Label`.
+ *
+ * Todo o conteúdo entra no nome acessível do controle, então nada interativo vai dentro dele:
+ * uma ação ao lado do rótulo fica no `Field.Header`.
+ *
+ * A largura acompanha o texto: o clique vale no texto, não no espaço vazio da linha, como num
+ * `<label>` nativo.
+ *
+ * Como rótulo de uma opção, fica em peso normal, que é conteúdo e não título de campo: envolvendo
+ * um Checkbox, Switch ou Radio (vira uma linha com o controle e o texto) ou logo depois dele,
+ * como irmão no `Field.Item`.
+ */
+export declare const FieldLabel: {
+  (props: FieldLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-label.d.ts.map

package/dist/components/fields/field/field-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-label.tsx"],"mappings":";;YAGY,kBAAkBA,MAAU,MAAM;YAElC,kBAAkBA,MAAU,MAAM;;;;;;;;;;;;;;;qBAgBjC;GAAqB,OAAA,kCAAe,IAAA"}

package/dist/components/fields/field/field-label.js

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-label.tsx
+/**
+* Rótulo do campo: um `<label>` ligado ao controle por `htmlFor`. O Select tem rótulo próprio,
+* o `Select.Label`.
+*
+* Todo o conteúdo entra no nome acessível do controle, então nada interativo vai dentro dele:
+* uma ação ao lado do rótulo fica no `Field.Header`.
+*
+* A largura acompanha o texto: o clique vale no texto, não no espaço vazio da linha, como num
+* `<label>` nativo.
+*
+* Como rótulo de uma opção, fica em peso normal, que é conteúdo e não título de campo: envolvendo
+* um Checkbox, Switch ou Radio (vira uma linha com o controle e o texto) ou logo depois dele,
+* como irmão no `Field.Item`.
+*/
+const FieldLabel = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-component": "Field.Label",
+		className: mergeStateClassNames([
+			"w-fit",
+			"text-(length:--field-label-size,var(--text-sm))",
+			"leading-(--field-label-leading,--spacing(4))",
+			"font-medium",
+			"text-gray-12",
+			"data-disabled:opacity-50",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:flex",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:items-center",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:gap-2",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:font-normal",
+			"[:is([role=checkbox],[role=switch],[role=radio])~&]:font-normal"
+		], className),
+		...rest
+	});
+};
+FieldLabel.displayName = "Field.Label";
+//#endregion
+export { FieldLabel };
+
+//# sourceMappingURL=field-label.js.map

package/dist/components/fields/field/field-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-label.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldLabelProps = BaseField.Label.Props;\n\nexport type FieldLabelState = BaseField.Label.State;\n\n/**\n * Rótulo do campo: um `<label>` ligado ao controle por `htmlFor`. O Select tem rótulo próprio,\n * o `Select.Label`.\n *\n * Todo o conteúdo entra no nome acessível do controle, então nada interativo vai dentro dele:\n * uma ação ao lado do rótulo fica no `Field.Header`.\n *\n * A largura acompanha o texto: o clique vale no texto, não no espaço vazio da linha, como num\n * `<label>` nativo.\n *\n * Como rótulo de uma opção, fica em peso normal, que é conteúdo e não título de campo: envolvendo\n * um Checkbox, Switch ou Radio (vira uma linha com o controle e o texto) ou logo depois dele,\n * como irmão no `Field.Item`.\n */\nexport const FieldLabel = (props: FieldLabelProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseField.Label\n      data-component=\"Field.Label\"\n      className={mergeStateClassNames(\n        [\n          'w-fit',\n\n          // Tamanho e linha vêm do `size` do `Field.Root` (ver `fieldRootVariants`).\n          'text-(length:--field-label-size,var(--text-sm))',\n          'leading-(--field-label-leading,--spacing(4))',\n          'font-medium',\n          'text-gray-12',\n\n          'data-disabled:opacity-50',\n\n          // Envolvendo um controle de marcar: linha com o controle e o texto.\n          'has-[[role=checkbox],[role=switch],[role=radio]]:flex',\n          'has-[[role=checkbox],[role=switch],[role=radio]]:items-center',\n          'has-[[role=checkbox],[role=switch],[role=radio]]:gap-2',\n          'has-[[role=checkbox],[role=switch],[role=radio]]:font-normal',\n\n          // Depois de um controle de marcar, como irmão (no `Field.Item`).\n          '[:is([role=checkbox],[role=switch],[role=radio])~&]:font-normal',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldLabel.displayName = 'Field.Label';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAGA;GACA;GACA;GACA;GAEA;GAGA;GACA;GACA;GACA;GAGA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/fields/field/field-required-indicator.d.ts

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-required-indicator.d.ts
+export type FieldRequiredIndicatorProps = useRender.ComponentProps<'span'>;
+/**
+ * Marca visual de campo obrigatório, um `*` por padrão, colocada dentro do `Field.Label`, do
+ * `Select.Label` ou da `Fieldset.Legend`.
+ *
+ * Só visual (`aria-hidden`): quem anuncia a obrigatoriedade ao leitor de tela é o `required` no
+ * controle. A marca não aparece sozinha, porque o Field não sabe se o controle é obrigatório:
+ * renderize-a junto do `required`.
+ *
+ * @example
+ * ```tsx
+ * <Field.Label>
+ *   Nome
+ *   <Field.RequiredIndicator />
+ * </Field.Label>
+ * ```
+ */
+export declare const FieldRequiredIndicator: {
+  (props: FieldRequiredIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-required-indicator.d.ts.map

package/dist/components/fields/field/field-required-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-required-indicator.d.ts","names":[],"sources":["../../../../src/components/fields/field/field-required-indicator.tsx"],"mappings":";;YAGY,8BAA8B,UAAU;;;;;;;;;;;;;;;;;qBAkBvC;GAAiC,OAAA,8CAA2B,+CAAA"}