@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,10 @@
+import { CheckboxGroup, CheckboxGroupChangeEventDetails, CheckboxGroupChangeEventReason, CheckboxGroupProps, CheckboxGroupState } from "./checkbox-group.js";
+import { CheckboxIndicator, CheckboxIndicatorProps, CheckboxIndicatorState } from "./checkbox-indicator.js";
+import { CheckboxRootVariants } from "./checkbox-root-variants.js";
+import { CheckboxRoot, CheckboxRootChangeEventDetails, CheckboxRootChangeEventReason, CheckboxRootProps, CheckboxRootState } from "./checkbox-root.js";
+declare namespace index_parts_d_exports {
+  export { CheckboxGroup as Group, CheckboxGroupChangeEventDetails as GroupChangeEventDetails, CheckboxGroupChangeEventReason as GroupChangeEventReason, CheckboxGroupProps as GroupProps, CheckboxGroupState as GroupState, CheckboxIndicator as Indicator, CheckboxIndicatorProps as IndicatorProps, CheckboxIndicatorState as IndicatorState, CheckboxRoot as Root, CheckboxRootChangeEventDetails as RootChangeEventDetails, CheckboxRootChangeEventReason as RootChangeEventReason, CheckboxRootProps as RootProps, CheckboxRootState as RootState, CheckboxRootVariants as RootVariants };
+}
+//#endregion
+export { CheckboxGroup as Group, type CheckboxGroupChangeEventDetails as GroupChangeEventDetails, type CheckboxGroupChangeEventReason as GroupChangeEventReason, type CheckboxGroupProps as GroupProps, type CheckboxGroupState as GroupState, CheckboxIndicator as Indicator, type CheckboxIndicatorProps as IndicatorProps, type CheckboxIndicatorState as IndicatorState, CheckboxRoot as Root, type CheckboxRootChangeEventDetails as RootChangeEventDetails, type CheckboxRootChangeEventReason as RootChangeEventReason, type CheckboxRootProps as RootProps, type CheckboxRootState as RootState, type CheckboxRootVariants as RootVariants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { CheckboxGroup } from "./checkbox-group.js";
+import { CheckboxIndicator } from "./checkbox-indicator.js";
+import { CheckboxRoot } from "./checkbox-root.js";
+//#region src/components/fields/checkbox/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => CheckboxGroup,
+	Indicator: () => CheckboxIndicator,
+	Root: () => CheckboxRoot
+});
+//#endregion
+export { CheckboxGroup as Group, CheckboxIndicator as Indicator, CheckboxRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/checkbox/index.parts.ts"],"sourcesContent":["export { CheckboxGroup as Group } from './checkbox-group';\nexport { CheckboxIndicator as Indicator } from './checkbox-indicator';\nexport { CheckboxRoot as Root } from './checkbox-root';\n\n/* types */\n\nexport type {\n  CheckboxGroupChangeEventDetails as GroupChangeEventDetails,\n  CheckboxGroupChangeEventReason as GroupChangeEventReason,\n  CheckboxGroupProps as GroupProps,\n  CheckboxGroupState as GroupState,\n} from './checkbox-group';\n\nexport type {\n  CheckboxIndicatorProps as IndicatorProps,\n  CheckboxIndicatorState as IndicatorState,\n} from './checkbox-indicator';\nexport type {\n  CheckboxRootChangeEventDetails as RootChangeEventDetails,\n  CheckboxRootChangeEventReason as RootChangeEventReason,\n  CheckboxRootProps as RootProps,\n  CheckboxRootState as RootState,\n} from './checkbox-root';\nexport type { CheckboxRootVariants as RootVariants } from './checkbox-root-variants';\n"],"mappings":""}

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

@@ -0,0 +1,31 @@
+//#region src/components/fields/currency-brl-input/currency-brl-input-variants.d.ts
+export type CurrencyBrlInputVariants = {
+  /**
+   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:
+   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone
+   * não dar zoom no foco.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Fundo e borda do campo.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'subtle';
+};
+export declare const currencyBrlInputDefaultVariants: Required<CurrencyBrlInputVariants>;
+/**
+ * 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`;
+ * - `tabular-nums`, que dá a mesma largura a todos os dígitos: o valor não muda de largura a cada
+ *   tecla nem quando o separador de milhar entra.
+ */
+export declare const currencyBrlInputVariants: (props?: ({
+  variant?: "subtle" | "outline" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=currency-brl-input-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"currency-brl-input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,iCAAiC,SAAS;;;;;;;;qBAa1C,2BAAwB;;;6CAoIpC"}

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { CurrencyBrlInputVariants } from "./currency-brl-input-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input } from "@base-ui/react/input";
+import { NumberFormatBaseProps } from "react-number-format";
+//#region src/components/fields/currency-brl-input/currency-brl-input.d.ts
+export type CurrencyBrlInputProps = MergeOverride<Omit<NumberFormatBaseProps<Input.Props>, 'customInput' | 'displayType' | 'format' | 'getCaretBoundary' | 'getInputRef' | 'isCharacterSame' | 'isValidInputCharacter' | 'removeFormatting' | 'renderText' | 'valueIsNumericString'>, CurrencyBrlInputVariants & {
+  /**
+   * O valor em reais, para o modo controlado. `null` deixa o campo vazio.
+   */
+  value?: number | null;
+  /**
+   * O valor inicial em reais, para o modo não controlado.
+   */
+  defaultValue?: number | null;
+  /**
+   * Chamado a cada mudança feita pelo usuário, com o valor em reais, ou `null` com o campo
+   * vazio. Mudar o `value` por prop não o chama.
+   */
+  onValueChange?: (value: number | null, details: CurrencyBrlInputChangeEventDetails) => void;
+  /**
+   * Aceita valor negativo: o `-` alterna o sinal.
+   *
+   * @default false
+   */
+  allowNegative?: boolean;
+  ref?: React.Ref<HTMLInputElement>;
+}>;
+export type CurrencyBrlInputState = Input.State;
+export type CurrencyBrlInputChangeEventDetails = {
+  /**
+   * O texto como aparece no campo (`"R$ 1.234,56"`).
+   */
+  formattedValue: string;
+  /**
+   * O evento da digitação.
+   */
+  event: React.SyntheticEvent<HTMLInputElement> | undefined;
+};
+/**
+ * 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)}
+ * />
+ * ```
+ */
+export declare const CurrencyBrlInput: {
+  (props: CurrencyBrlInputProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=currency-brl-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"currency-brl-input.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input.tsx"],"mappings":";;;;;;YAcY,wBAAwB,cAClC,KACE,sBAAsBA,MAAU,mMAYlC;;;;EAIE;;;;EAIA;;;;;EAKA,iBACE,sBACA,SAAS;;;;;;EAOX;EACA,MAAM,MAAM,IAAI;;YAIR,wBAAwBA,MAAU;YAElC;;;;EAIV;;;;EAIA,OAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgCjB;GAA2B,OAAA,wBAAqB,MAAA,IAAA"}

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":";;;;;;;AAoEA,MAAM,oBAAoB,iBAA2C;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BrE,MAAa,oBAAoB,UAAiC;CAChE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EACJ,WACA,OACA,cACA,eACA,gBAAgB,OAChB,KACA,GAAG,SACD;CAEJ,OACE,oBAAC,kBAAD;EACE,kBAAe;EACf,aAAaA;EACb,aAAa;EACb,WAAU;EACV,aAAY;EACZ,QAAQ;EACR,mBAAmB,YAAY,eAC7B,yBAAyB,YAAY,YAAY,aAAa;EAE9C;EAElB,OAAO,UAAU,OAAO,KAAK;EAC7B,cAAc,gBAAgB,KAAA;EAC9B,gBAAgB,QAAQ,eAAe;;GAErC,IAAI,WAAW,WAAW,SACxB;GAGF,gBAAgB,OAAO,cAAc,MAAM;IACzC,gBAAgB,OAAO;IACvB,OAAO,WAAW;GACpB,CAAC;EACH;EACA,WAAW,qBACT,yBAAyB,YAAY,GACrC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc;;;;AAa/B,MAAM,YAAY;AAElB,MAAM,iBAAiB,IAAI,KAAK,aAAa,SAAS;CACpD,OAAO;CACP,UAAU;AACZ,CAAC;AAED,MAAM,eAAe;AAErB,MAAM,qBAAqB;AAE3B,MAAM,kBAAkB;AAExB,MAAM,sBAAsB;AAE5B,MAAM,eAAe;;AAGrB,MAAM,mBAAmB;;AAGzB,MAAM,oBAAoB;;;;;AAM1B,MAAM,kBAAkB,kBAA0B;CAChD,IAAI,kBAAkB,MAAM,kBAAkB,KAC5C,OAAO;CAGT,OAAO,eAAe,OAAO,OAAO,aAAa,CAAC;AACpD;;;;;;;;;;;AAYA,MAAM,4BACJ,YACA,YACA,kBACW;CACX,IAAI,eAAe,KAAA,GACjB,OAAO,gBACL,eAAe,UAAU,GACzB,eACA,SAAS,UAAU,CACrB;CAGF,MAAM,eAAe,WAAW,MAAM,WAAW,GAAG,OAAO,WAAW,GAAG,GAAG;CAE5E,MAAM,UAAU,aAAa,SAAS;CAEtC,MAAM,eAAe,WAAW,KAAK,UAAU,WAAW,KAAK;;CAG/D,MAAM,6BACJ,yBAAyB,WAAW,WAAW,KAAA,GAAW,aAAa;CAEzE,IAAI,WAAW,CAAC,SAAS,YAAY,GACnC,OAAO,qBAAqB;CAG9B,MAAM,iBAAwB;EAC5B,IAAI,SACF,OAAO,gBAAgB,YAAY;EAGrC,IAAI,CAAC,gBAAgB,mBAAmB,KAAK,YAAY,GAAG;GAC1D,MAAM,YAAY,eAAe,WAAW,SAAS;GAErD,OAAO;IACL,GAAG;IACH,SAAS,UAAU,SAAS,aAAA,CAAc,QACxC,qBACA,EACF;GACF;EACF;EAEA,OAAO,eAAe,UAAU;CAClC;CAEA,MAAM,QAAQ,SAAS;CAEvB,IAAI,MAAM,OAAO,SAAS,WACxB,OAAO,qBAAqB;CAG9B,OAAO,gBACL,OACA,eACA,SAAS,aAAa,SAAS,IAAI,eAAe,UAAU,CAC9D;AACF;;;;;AAMA,MAAM,kBAAkB,UAAyB;CAC/C,QAAQ,KAAK,QAAQ,iBAAiB,EAAE,CAAC,CAAC,QAAQ,qBAAqB,EAAE;CACzE,aAAa,KAAK,MAAM,YAAY,CAAC,EAAE,UAAU,KAAK,MAAM;AAC9D;;;;;;AAOA,MAAM,mBAAmB,SAAwB;CAC/C,MAAM,SAAS,KAAK,QAAQ,kBAAkB,EAAE;CAEhD,MAAM,aAAa,OAAO,YAAY,GAAG;CAEzC,MAAM,iBAAmC;EACvC,IAAI,cAAc,GAChB,OAAO,CAAC,OAAO,MAAM,GAAG,UAAU,GAAG,OAAO,MAAM,aAAa,CAAC,CAAC;EAGnE,IAAI,kBAAkB,KAAK,MAAM,GAAG;GAClC,MAAM,CAAC,UAAU,IAAI,WAAW,MAAM,OAAO,MAAM,GAAG;GAEtD,OAAO,CAAC,SAAS,QAAQ;EAC3B;EAEA,OAAO,CAAC,QAAQ,EAAE;CACpB;CAEA,MAAM,CAAC,SAAS,YAAY,SAAS;CAMrC,OAAO;EACL,SAJA,QAAQ,QAAQ,iBAAiB,EAAE,IACnC,SAAS,QAAQ,iBAAiB,EAAE,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,EAAA,CAGhD,QAAQ,qBAAqB,EAAE;EAC9C,YAAY,KAAK,SAAS,GAAG;CAC/B;AACF;;;;;;AAOA,MAAM,mBACJ,OACA,eACA,iBACW;CACX,MAAM,OAAO,iBAAiB,MAAM,aAAa,MAAM;CAEvD,IAAI,MAAM,WAAW,IACnB,OAAO,eAAe,KAAK;CAG7B,MAAM,SAAS,MAAM,OAAO,SAAS,GAAG,GAAG;CAE3C,OAAO,GAAG,OAAO,OAAO,MAAM,GAAG,EAAE,EAAE,GAAG,OAAO,MAAM,EAAE;AACzD;AAEA,MAAM,YAAY,SAAiB,aAAa,KAAK,IAAI;;;;AAKzD,MAAM,oBAAoB,mBACxB,MAAM,KACJ,EAAE,QAAQ,eAAe,SAAS,EAAE,IACnC,GAAG,UAAU,UAAU,eAAe,MACzC"}

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