@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/fields/form/form.js

@@ -0,0 +1,46 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/fields/form/form.tsx
+/**
+* O `<form>` que valida os `Field` dentro dele. Sai com `noValidate`: a validação nativa roda,
+* mas quem mostra o erro é o `Field.Error`, não o balão do navegador. No envio, valida todos os
+* campos, foca o primeiro inválido e bloqueia o envio.
+*
+* - `onFormSubmit` recebe os valores num objeto, pelas chaves do `name` de cada `Field.Root`, e
+*   já chama o `preventDefault`.
+* - `errors` recebe erros do servidor por `name`; cada um some quando o campo muda.
+* - `validationMode` define quando os campos validam; o do `Field.Root` vence o do Form.
+* - Com React Hook Form, use `onSubmit={handleSubmit(fn)}`.
+*
+* Sem layout: a disposição vem por `className` ou por `<Stack render={<Form />}>`. O inverso,
+* `<Form render={<Stack />}>`, vira um `<div>` e o envio se perde.
+*
+* @example
+* ```tsx
+* <Form
+*   className="flex flex-col gap-4"
+*   onFormSubmit={(values) => save(values)}
+* >
+*   <Field.Root name="name">
+*     <Field.Label>Nome</Field.Label>
+*     <Input required />
+*     <Field.Error />
+*   </Field.Root>
+*   <Button type="submit">Salvar</Button>
+* </Form>
+* ```
+*/
+const Form = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Form$1, {
+		"data-component": "Form",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+Form.displayName = "Form";
+//#endregion
+export { Form };
+
+//# sourceMappingURL=form.js.map

package/dist/components/fields/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":["BaseForm"],"sources":["../../../../src/components/fields/form/form.tsx"],"sourcesContent":["import { Form as BaseForm } from '@base-ui/react/form';\nimport type { AnyObject } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FormProps<FormValues extends AnyObject = AnyObject> =\n  BaseForm.Props<FormValues>;\n\nexport type FormState = BaseForm.State;\n\nexport type FormActions = BaseForm.Actions;\n\nexport type FormValidationMode = BaseForm.ValidationMode;\n\nexport type FormSubmitEventDetails = BaseForm.SubmitEventDetails;\n\nexport type FormSubmitEventReason = BaseForm.SubmitEventReason;\n\n/**\n * O `<form>` que valida os `Field` dentro dele. Sai com `noValidate`: a validação nativa roda,\n * mas quem mostra o erro é o `Field.Error`, não o balão do navegador. No envio, valida todos os\n * campos, foca o primeiro inválido e bloqueia o envio.\n *\n * - `onFormSubmit` recebe os valores num objeto, pelas chaves do `name` de cada `Field.Root`, e\n *   já chama o `preventDefault`.\n * - `errors` recebe erros do servidor por `name`; cada um some quando o campo muda.\n * - `validationMode` define quando os campos validam; o do `Field.Root` vence o do Form.\n * - Com React Hook Form, use `onSubmit={handleSubmit(fn)}`.\n *\n * Sem layout: a disposição vem por `className` ou por `<Stack render={<Form />}>`. O inverso,\n * `<Form render={<Stack />}>`, vira um `<div>` e o envio se perde.\n *\n * @example\n * ```tsx\n * <Form\n *   className=\"flex flex-col gap-4\"\n *   onFormSubmit={(values) => save(values)}\n * >\n *   <Field.Root name=\"name\">\n *     <Field.Label>Nome</Field.Label>\n *     <Input required />\n *     <Field.Error />\n *   </Field.Root>\n *   <Button type=\"submit\">Salvar</Button>\n * </Form>\n * ```\n */\nexport const Form = <FormValues extends AnyObject = AnyObject>(\n  props: FormProps<FormValues>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseForm<FormValues>\n      data-component=\"Form\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nForm.displayName = 'Form';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,QACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAD;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,KAAK,cAAc"}

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

@@ -0,0 +1,2 @@
+import { Form, FormActions, FormProps, FormState, FormSubmitEventDetails, FormSubmitEventReason, FormValidationMode } from "./form.js";
+export { Form, type FormActions, type FormProps, type FormState, type FormSubmitEventDetails, type FormSubmitEventReason, type FormValidationMode };

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

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

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

@@ -0,0 +1,3 @@
+import { InputVariants, inputVariants } from "./input-variants.js";
+import { Input, InputChangeEventDetails, InputChangeEventReason, InputProps, InputState } from "./input.js";
+export { Input, type InputChangeEventDetails, type InputChangeEventReason, type InputProps, type InputState, type InputVariants, inputVariants };

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

@@ -0,0 +1,3 @@
+import { inputVariants } from "./input-variants.js";
+import { Input } from "./input.js";
+export { Input, inputVariants };

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

@@ -0,0 +1,39 @@
+//#region src/components/fields/input/input-variants.d.ts
+export type InputVariants = {
+  /**
+   * Altura, padding e tamanho do texto. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros
+   * controles de formulário. 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 inputDefaultVariants: Required<InputVariants>;
+/**
+ * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o
+ * `PatternInput` e o trigger do `Select` copiam estas classes, cada um com as suas diferenças
+ * (tabela no README de `fields`). Uma mudança aqui vale para as cópias na mesma rodada. O
+ * `PasswordInput` usa o próprio `Input`, mas repete o padding horizontal de cada `size`.
+ *
+ * O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda
+ * com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para
+ * `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o
+ * `focus-ring-inside` do tema não reage a `data-focused`.
+ *
+ * Inválido troca `--input-focus-color` e a borda pelo vermelho: `data-invalid` vem do `Field`,
+ * `aria-invalid` da validação manual e `:user-invalid` da validação nativa (`required`, `type`),
+ * que só casa depois de o usuário mexer no campo ou tentar enviar.
+ */
+export declare const inputVariants: (props?: ({
+  variant?: "outline" | "subtle" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=input-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/input/input-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,sBAAsB,SAAS;;;;;;;;;;;;;;;;qBAoB/B,gBAAa;;;6CAmIzB"}

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

@@ -0,0 +1,124 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/input/input-variants.ts
+const inputDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o
+* `PatternInput` e o trigger do `Select` copiam estas classes, cada um com as suas diferenças
+* (tabela no README de `fields`). Uma mudança aqui vale para as cópias na mesma rodada. O
+* `PasswordInput` usa o próprio `Input`, mas repete o padding horizontal de cada `size`.
+*
+* O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda
+* com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para
+* `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o
+* `focus-ring-inside` do tema não reage a `data-focused`.
+*
+* Inválido troca `--input-focus-color` e a borda pelo vermelho: `data-invalid` vem do `Field`,
+* `aria-invalid` da validação manual e `:user-invalid` da validação nativa (`required`, `type`),
+* que só casa depois de o usuário mexer no campo ou tentar enviar.
+*/
+const inputVariants = cva([
+	"relative",
+	"w-full",
+	"appearance-none",
+	"outline-none",
+	"text-start",
+	"font-normal",
+	"text-gray-12",
+	"placeholder:text-gray-9/90",
+	"data-placeholder:text-gray-9/90",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"[--input-focus-color:var(--color-black)]",
+	"dark:[--input-focus-color:var(--color-white)]",
+	"focus-visible:outline-1",
+	"focus-visible:outline-solid",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-(--input-focus-color)",
+	"focus-visible:border-(--input-focus-color)",
+	"data-focused:outline-1",
+	"data-focused:outline-solid",
+	"data-focused:-outline-offset-2",
+	"data-focused:outline-(--input-focus-color)",
+	"data-focused:border-(--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:[--input-focus-color:var(--color-red-9)]",
+	"aria-invalid:border-red-9",
+	"aria-invalid:[--input-focus-color:var(--color-red-9)]",
+	"user-invalid:border-red-9",
+	"user-invalid:[--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: inputDefaultVariants.size,
+		variant: inputDefaultVariants.variant
+	}
+});
+//#endregion
+export { inputDefaultVariants, inputVariants };
+
+//# sourceMappingURL=input-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-variants.js","names":[],"sources":["../../../../src/components/fields/input/input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type InputVariants = {\n  /**\n   * Altura, padding e tamanho do texto. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros\n   * controles de formulário. Substitui o atributo nativo `size`: a largura vem do CSS. Em tela\n   * de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone 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 inputDefaultVariants: Required<InputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o\n * `PatternInput` e o trigger do `Select` copiam estas classes, cada um com as suas diferenças\n * (tabela no README de `fields`). Uma mudança aqui vale para as cópias na mesma rodada. O\n * `PasswordInput` usa o próprio `Input`, mas repete o padding horizontal de cada `size`.\n *\n * O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda\n * com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para\n * `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o\n * `focus-ring-inside` do tema não reage a `data-focused`.\n *\n * Inválido troca `--input-focus-color` e a borda pelo vermelho: `data-invalid` vem do `Field`,\n * `aria-invalid` da validação manual e `:user-invalid` da validação nativa (`required`, `type`),\n * que só casa depois de o usuário mexer no campo ou tentar enviar.\n */\nexport const inputVariants = 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    'placeholder:text-gray-9/90',\n    'data-placeholder:text-gray-9/90',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--input-focus-color:var(--color-black)]',\n    'dark:[--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-(--input-focus-color)',\n    'focus-visible:border-(--input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--input-focus-color)',\n    'data-focused:border-(--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:[--input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--input-focus-color:var(--color-red-9)]',\n    'user-invalid:border-red-9',\n    'user-invalid:[--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: inputDefaultVariants.size,\n      variant: inputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,uBAAgD;CAC3D,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;;AAiBA,MAAa,gBAAgB,IAC3B;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;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,qBAAqB;EAC3B,SAAS,qBAAqB;CAChC;AACF,CACF"}

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

@@ -0,0 +1,30 @@
+import { InputVariants } from "./input-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/fields/input/input.d.ts
+export type InputProps = MergeOverride<Input$1.Props, InputVariants>;
+export type InputState = Input$1.State;
+export type InputChangeEventDetails = Input$1.ChangeEventDetails;
+export type InputChangeEventReason = Input$1.ChangeEventReason;
+/**
+ * O `<input>` nativo do Base UI, que se liga sozinho ao `Field` quando está
+ * dentro de um. Fora dele, o nome acessível vem de um `<label>` (em volta ou
+ * por `htmlFor`) ou de `aria-label`.
+ *
+ * `size` é a variante de altura e substitui o atributo nativo `size`: a
+ * largura vem do CSS (`w-full`), sobrescrevível por `className`.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   aria-label="Nome"
+ *   placeholder="Seu nome"
+ * />
+ * ```
+ */
+export declare const Input: {
+  (props: InputProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/input/input.tsx"],"mappings":";;;;YAKY,aAAa,cAAcA,QAAU,OAAO;YAE5C,aAAaA,QAAU;YAEvB,0BAA0BA,QAAU;YAEpC,yBAAyBA,QAAU;;;;;;;;;;;;;;;;;qBAoBlC;GAAgB,OAAA,6BAAU,IAAA"}

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

@@ -0,0 +1,37 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { inputVariants } from "./input-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/fields/input/input.tsx
+const splitVariantProps = createSplitProps();
+/**
+* O `<input>` nativo do Base UI, que se liga sozinho ao `Field` quando está
+* dentro de um. Fora dele, o nome acessível vem de um `<label>` (em volta ou
+* por `htmlFor`) ou de `aria-label`.
+*
+* `size` é a variante de altura e substitui o atributo nativo `size`: a
+* largura vem do CSS (`w-full`), sobrescrevível por `className`.
+*
+* @example
+* ```tsx
+* <Input
+*   aria-label="Nome"
+*   placeholder="Seu nome"
+* />
+* ```
+*/
+const Input = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Input$1, {
+		"data-component": "Input",
+		className: mergeStateClassNames(inputVariants(variantProps), className),
+		...rest
+	});
+};
+Input.displayName = "Input";
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/input/input.tsx"],"sourcesContent":["import { Input as BaseInput } from '@base-ui/react/input';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport { type InputVariants, inputVariants } from './input-variants';\n\nexport type InputProps = MergeOverride<BaseInput.Props, InputVariants>;\n\nexport type InputState = BaseInput.State;\n\nexport type InputChangeEventDetails = BaseInput.ChangeEventDetails;\n\nexport type InputChangeEventReason = BaseInput.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<InputVariants>();\n\n/**\n * O `<input>` nativo do Base UI, que se liga sozinho ao `Field` quando está\n * dentro de um. Fora dele, o nome acessível vem de um `<label>` (em volta ou\n * por `htmlFor`) ou de `aria-label`.\n *\n * `size` é a variante de altura e substitui o atributo nativo `size`: a\n * largura vem do CSS (`w-full`), sobrescrevível por `className`.\n *\n * @example\n * ```tsx\n * <Input\n *   aria-label=\"Nome\"\n *   placeholder=\"Seu nome\"\n * />\n * ```\n */\nexport const Input = (props: InputProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseInput\n      data-component=\"Input\"\n      className={mergeStateClassNames(inputVariants(variantProps), className)}\n      {...rest}\n    />\n  );\n};\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;AAkB1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAD;EACE,kBAAe;EACf,WAAW,qBAAqB,cAAc,YAAY,GAAG,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc"}

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

@@ -0,0 +1,3 @@
+import { NumberInputVariants } from "./number-input-variants.js";
+import { NumberInput, NumberInputChangeEventDetails, NumberInputProps, NumberInputState } from "./number-input.js";
+export { NumberInput, type NumberInputChangeEventDetails, type NumberInputProps, type NumberInputState, type NumberInputVariants };

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

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

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

@@ -0,0 +1,31 @@
+//#region src/components/fields/number-input/number-input-variants.d.ts
+export type NumberInputVariants = {
+  /**
+   * 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 numberInputDefaultVariants: Required<NumberInputVariants>;
+/**
+ * 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 número não muda de largura a cada
+ *   tecla nem quando o separador de milhar entra.
+ */
+export declare const numberInputVariants: (props?: ({
+  variant?: "outline" | "subtle" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=number-input-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/number-input/number-input-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,4BAA4B,SAAS;;;;;;;;qBAYrC,sBAAmB;;;6CAoI/B"}

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

@@ -0,0 +1,116 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/number-input/number-input-variants.ts
+const numberInputDefaultVariants = {
+	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 número não muda de largura a cada
+*   tecla nem quando o separador de milhar entra.
+*/
+const numberInputVariants = 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",
+	"[--number-input-focus-color:var(--color-black)]",
+	"dark:[--number-input-focus-color:var(--color-white)]",
+	"focus-visible:outline-1",
+	"focus-visible:outline-solid",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-(--number-input-focus-color)",
+	"focus-visible:border-(--number-input-focus-color)",
+	"data-focused:outline-1",
+	"data-focused:outline-solid",
+	"data-focused:-outline-offset-2",
+	"data-focused:outline-(--number-input-focus-color)",
+	"data-focused:border-(--number-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:[--number-input-focus-color:var(--color-red-9)]",
+	"aria-invalid:border-red-9",
+	"aria-invalid:[--number-input-focus-color:var(--color-red-9)]",
+	"user-invalid:border-red-9",
+	"user-invalid:[--number-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: numberInputDefaultVariants.size,
+		variant: numberInputDefaultVariants.variant
+	}
+});
+//#endregion
+export { numberInputDefaultVariants, numberInputVariants };
+
+//# sourceMappingURL=number-input-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input-variants.js","names":[],"sources":["../../../../src/components/fields/number-input/number-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type NumberInputVariants = {\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 numberInputDefaultVariants: Required<NumberInputVariants> = {\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 número não muda de largura a cada\n *   tecla nem quando o separador de milhar entra.\n */\nexport const numberInputVariants = 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    '[--number-input-focus-color:var(--color-black)]',\n    'dark:[--number-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-(--number-input-focus-color)',\n    'focus-visible:border-(--number-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--number-input-focus-color)',\n    'data-focused:border-(--number-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:[--number-input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--number-input-focus-color:var(--color-red-9)]',\n    'user-invalid:border-red-9',\n    'user-invalid:[--number-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: numberInputDefaultVariants.size,\n      variant: numberInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,6BAA4D;CACvE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,sBAAsB,IACjC;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,2BAA2B;EACjC,SAAS,2BAA2B;CACtC;AACF,CACF"}

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

@@ -0,0 +1,63 @@
+import { NumberInputVariants } from "./number-input-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input } from "@base-ui/react/input";
+import { NumericFormatProps } from "react-number-format";
+//#region src/components/fields/number-input/number-input.d.ts
+export type NumberInputProps = MergeOverride<Omit<NumericFormatProps<Input.Props>, 'customInput' | 'displayType' | 'getInputRef' | 'renderText' | 'valueIsNumericString'>, NumberInputVariants & {
+  /**
+   * O valor numérico, para o modo controlado. `null` deixa o campo vazio.
+   */
+  value?: number | null;
+  /**
+   * O valor numérico inicial, para o modo não controlado.
+   */
+  defaultValue?: number | null;
+  /**
+   * Chamado a cada mudança feita pelo usuário, com o número já convertido, ou `null` com o campo
+   * vazio. Mudar uma prop (o `value`, o `decimalScale`) não o chama.
+   */
+  onValueChange?: (value: number | null, details: NumberInputChangeEventDetails) => void;
+  ref?: React.Ref<HTMLInputElement>;
+}>;
+export type NumberInputState = Input.State;
+export type NumberInputChangeEventDetails = {
+  /**
+   * O texto como aparece no campo, com separadores, prefixo e sufixo (`"1.234,50"`).
+   */
+  formattedValue: string;
+  /**
+   * O evento da digitação.
+   */
+  event: React.SyntheticEvent<HTMLInputElement> | undefined;
+};
+/**
+ * Campo numérico que formata enquanto se digita, com o `react-number-format` sobre o `Input` do
+ * Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da lib.
+ *
+ * Sai em pt-BR: `.` no milhar e `,` no decimal, com o `.` digitado aceito como vírgula. O
+ * `decimalScale` limita as casas já na digitação (sem ele, não há limite), e o
+ * `fixedDecimalScale` completa com zeros. Com `decimalScale={0}`, a vírgula é ignorada: "12,7"
+ * vira 127.
+ *
+ * O número sai pelo `onValueChange`. O campo guarda o texto formatado (`"1.234,50"`), e é ele que
+ * vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.
+ *
+ * O `inputMode` abre o teclado numérico no celular: `decimal`, ou `numeric` sem casas. No iPhone,
+ * nenhum dos dois tem o sinal de menos; para digitar negativo lá, `inputMode="text"`.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   aria-label="Peso (kg)"
+ *   decimalScale={3}
+ *   onValueChange={(value) => setWeight(value)}
+ * />
+ * ```
+ */
+export declare const NumberInput: {
+  (props: NumberInputProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=number-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/number-input/number-input.tsx"],"mappings":";;;;;;YAUY,mBAAmB,cAC7B,KACE,mBAAmBA,MAAU,gGAO/B;;;;EAIE;;;;EAIA;;;;;EAKA,iBACE,sBACA,SAAS;EAEX,MAAM,MAAM,IAAI;;YAIR,mBAAmBA,MAAU;YAE7B;;;;EAIV;;;;EAIA,OAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6BjB;GAAsB,OAAA,mBAAgB,MAAA,IAAA"}

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

@@ -0,0 +1,63 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { numberInputVariants } from "./number-input-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+import { NumericFormat } from "react-number-format";
+//#region src/components/fields/number-input/number-input.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Campo numérico que formata enquanto se digita, com o `react-number-format` sobre o `Input` do
+* Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da lib.
+*
+* Sai em pt-BR: `.` no milhar e `,` no decimal, com o `.` digitado aceito como vírgula. O
+* `decimalScale` limita as casas já na digitação (sem ele, não há limite), e o
+* `fixedDecimalScale` completa com zeros. Com `decimalScale={0}`, a vírgula é ignorada: "12,7"
+* vira 127.
+*
+* O número sai pelo `onValueChange`. O campo guarda o texto formatado (`"1.234,50"`), e é ele que
+* vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.
+*
+* O `inputMode` abre o teclado numérico no celular: `decimal`, ou `numeric` sem casas. No iPhone,
+* nenhum dos dois tem o sinal de menos; para digitar negativo lá, `inputMode="text"`.
+*
+* @example
+* ```tsx
+* <NumberInput
+*   aria-label="Peso (kg)"
+*   decimalScale={3}
+*   onValueChange={(value) => setWeight(value)}
+* />
+* ```
+*/
+const NumberInput = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { className, value, defaultValue, onValueChange, ref, decimalScale, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(NumericFormat, {
+		"data-component": "NumberInput",
+		customInput: Input,
+		getInputRef: ref,
+		thousandSeparator: ".",
+		decimalSeparator: ",",
+		allowedDecimalSeparators: [",", "."],
+		inputMode: decimalScale === 0 ? "numeric" : "decimal",
+		decimalScale,
+		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(numberInputVariants(variantProps), className),
+		...rest
+	});
+};
+NumberInput.displayName = "NumberInput";
+//#endregion
+export { NumberInput };
+
+//# sourceMappingURL=number-input.js.map