@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/feedback/toast/use-toast-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toast-manager.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/use-toast-manager.ts"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\n\n/**\n * A fila do `Toast.Provider` mais próximo: os toasts abertos, para renderizar, e os métodos para\n * abrir e fechar. Serve a uma fila montada com as partes; a do `Toast.Outlet` se usa pelo\n * `Toast.add` e afins.\n */\nexport const useToastManager = BaseToast.useToastManager;\n"],"mappings":";;;;;;;AAOA,MAAa,kBAAkBA,MAAU"}

package/dist/components/feedback/toast/use-toast-root-context.d.ts

@@ -0,0 +1,9 @@
+import { ToastType } from "./toast-manager.js";
+//#region src/components/feedback/toast/use-toast-root-context.d.ts
+export type ToastRootContextValue = {
+  /** O tipo do toast, `neutral` quando ele não tem um ou tem um que a lib não conhece. */
+  type: ToastType;
+};
+export declare const ToastRootContextProvider: import("react").Provider<ToastRootContextValue>, useToastRootContext: () => ToastRootContextValue;
+//#endregion
+//# sourceMappingURL=use-toast-root-context.d.ts.map

package/dist/components/feedback/toast/use-toast-root-context.js

@@ -0,0 +1,10 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/feedback/toast/use-toast-root-context.ts
+const [ToastRootContextProvider, useToastRootContext] = createContext({
+	name: "ToastRootContext",
+	providers: ["Toast.Root"]
+});
+//#endregion
+export { ToastRootContextProvider, useToastRootContext };
+
+//# sourceMappingURL=use-toast-root-context.js.map

package/dist/components/feedback/toast/use-toast-root-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toast-root-context.js","names":[],"sources":["../../../../src/components/feedback/toast/use-toast-root-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { ToastType } from './toast-manager';\n\nexport type ToastRootContextValue = {\n  /** O tipo do toast, `neutral` quando ele não tem um ou tem um que a lib não conhece. */\n  type: ToastType;\n};\n\nexport const [ToastRootContextProvider, useToastRootContext] =\n  createContext<ToastRootContextValue>({\n    name: 'ToastRootContext',\n    providers: ['Toast.Root'],\n  });\n"],"mappings":";;AAQA,MAAa,CAAC,0BAA0B,uBACtC,cAAqC;CACnC,MAAM;CACN,WAAW,CAAC,YAAY;AAC1B,CAAC"}

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

@@ -31,7 +31,7 @@ export declare const checkboxRootDefaultVariants: Required<CheckboxRootVariants>
 export declare const checkboxRootVariants: (props?: ({
   colorScheme?: "gray" | "brand" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | null | undefined;
-  variant?: "outline" | "subtle" | "solid" | null | undefined;
+  variant?: "solid" | "subtle" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=checkbox-root-variants.d.ts.map

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

@@ -1,5 +1,5 @@
 import { CheckboxRootVariants } from "./checkbox-root-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/components/fields/checkbox/checkbox-root.d.ts
 export type CheckboxRootProps = MergeOverride<Checkbox.Root.Props, CheckboxRootVariants>;

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

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { checkboxRootVariants } from "./checkbox-root-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/components/fields/checkbox/checkbox-root.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-root.js","names":["BaseCheckbox"],"sources":["../../../../src/components/fields/checkbox/checkbox-root.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type CheckboxRootVariants,\n  checkboxRootVariants,\n} from './checkbox-root-variants';\n\nexport type CheckboxRootProps = MergeOverride<\n  BaseCheckbox.Root.Props,\n  CheckboxRootVariants\n>;\n\nexport type CheckboxRootState = BaseCheckbox.Root.State;\n\nexport type CheckboxRootChangeEventDetails =\n  BaseCheckbox.Root.ChangeEventDetails;\n\nexport type CheckboxRootChangeEventReason = BaseCheckbox.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<CheckboxRootVariants>();\n\n/**\n * A caixa do checkbox, com um `<input>` escondido ao lado para o formulário.\n * Renderiza um `<span>`, para caber dentro de um `<label>`: é o jeito mais\n * simples de dar nome acessível. Sem rótulo visível, use `aria-label`.\n *\n * `indeterminate` mostra o estado misto (o traço do `Checkbox.Indicator`), como\n * num \"selecionar tudo\" com parte marcada; ele não muda `checked`.\n *\n * @example\n * ```tsx\n * <label>\n *   <Checkbox.Root>\n *     <Checkbox.Indicator />\n *   </Checkbox.Root>\n *   Aceito os termos\n * </label>\n * ```\n */\nexport const CheckboxRoot = (props: CheckboxRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseCheckbox.Root\n      data-component=\"Checkbox.Root\"\n      className={mergeStateClassNames(\n        checkboxRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCheckboxRoot.displayName = 'Checkbox.Root';\n"],"mappings":";;;;;;AAoBA,MAAM,oBAAoB,iBAAuC;;;;;;;;;;;;;;;;;;;AAoBjE,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,MAAd;EACE,kBAAe;EACf,WAAW,qBACT,qBAAqB,YAAY,GACjC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}
+{"version":3,"file":"checkbox-root.js","names":["BaseCheckbox"],"sources":["../../../../src/components/fields/checkbox/checkbox-root.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type CheckboxRootVariants,\n  checkboxRootVariants,\n} from './checkbox-root-variants';\n\nexport type CheckboxRootProps = MergeOverride<\n  BaseCheckbox.Root.Props,\n  CheckboxRootVariants\n>;\n\nexport type CheckboxRootState = BaseCheckbox.Root.State;\n\nexport type CheckboxRootChangeEventDetails =\n  BaseCheckbox.Root.ChangeEventDetails;\n\nexport type CheckboxRootChangeEventReason = BaseCheckbox.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<CheckboxRootVariants>();\n\n/**\n * A caixa do checkbox, com um `<input>` escondido ao lado para o formulário.\n * Renderiza um `<span>`, para caber dentro de um `<label>`: é o jeito mais\n * simples de dar nome acessível. Sem rótulo visível, use `aria-label`.\n *\n * `indeterminate` mostra o estado misto (o traço do `Checkbox.Indicator`), como\n * num \"selecionar tudo\" com parte marcada; ele não muda `checked`.\n *\n * @example\n * ```tsx\n * <label>\n *   <Checkbox.Root>\n *     <Checkbox.Indicator />\n *   </Checkbox.Root>\n *   Aceito os termos\n * </label>\n * ```\n */\nexport const CheckboxRoot = (props: CheckboxRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseCheckbox.Root\n      data-component=\"Checkbox.Root\"\n      className={mergeStateClassNames(\n        checkboxRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCheckboxRoot.displayName = 'Checkbox.Root';\n"],"mappings":";;;;;;AAuBA,MAAM,oBAAoB,iBAAuC;;;;;;;;;;;;;;;;;;;AAoBjE,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,MAAd;EACE,kBAAe;EACf,WAAW,qBACT,qBAAqB,YAAY,GACjC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

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

@@ -24,7 +24,7 @@ export declare const currencyBrlInputDefaultVariants: Required<CurrencyBrlInputV
  *   tecla nem quando o separador de milhar entra.
  */
 export declare const currencyBrlInputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -20,7 +20,7 @@ const currencyBrlInputVariants = cva([
 	"font-normal",
 	"text-gray-12",
 	"tabular-nums",
-	"placeholder:text-gray-9/90",
+	"placeholder:text-gray-11/80",
 	"border",
 	"rounded-md",
 	"corner-squircle",
@@ -43,9 +43,7 @@ const currencyBrlInputVariants = cva([
 	"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)]"
+	"aria-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]"
 ], {
 	variants: {
 		variant: {

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

@@ -1 +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"}
+{"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-11/80',\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  ],\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;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

@@ -1,6 +1,6 @@
 import { CurrencyBrlInputVariants } from "./currency-brl-input-variants.js";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-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

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

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { currencyBrlInputVariants } from "./currency-brl-input-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
 import { NumberFormatBase } from "react-number-format";

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

@@ -1 +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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"}
+{"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 {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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/field/field-root.d.ts

@@ -1,5 +1,5 @@
 import { FieldVariants } from "./field-root-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Field } from "@base-ui/react/field";
 //#region src/components/fields/field/field-root.d.ts
 export type FieldRootProps = MergeOverride<Field.Root.Props, FieldVariants>;

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

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { fieldRootVariants } from "./field-root-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 //#region src/components/fields/field/field-root.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"field-root.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-root.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport { type FieldVariants, fieldRootVariants } from './field-root-variants';\n\nexport type FieldRootProps = MergeOverride<BaseField.Root.Props, FieldVariants>;\n\nexport type FieldRootState = BaseField.Root.State;\n\nexport type FieldRootActions = BaseField.Root.Actions;\n\nconst splitVariantProps = createSplitProps<FieldVariants>();\n\n/**\n * Agrupa rótulo, controle, descrição e erro de um campo. Repassa ao controle dentro dele o\n * `name`, o `disabled` (inclusive o que vem de um `Fieldset` em volta) e a validação, e liga o\n * rótulo e a descrição ao controle por `id`.\n *\n * O `size` vale só para os textos do campo: o controle recebe o próprio `size`, com o mesmo\n * valor.\n *\n * `invalid`, `dirty` e `touched` existem para uma lib de formulário externa (React Hook Form)\n * controlar o estado. Com `invalid` vindo de fora, o `Field.Error` só aparece com `match`.\n *\n * @example\n * ```tsx\n * <Field.Root name=\"email\">\n *   <Field.Label>E-mail</Field.Label>\n *   <Input\n *     type=\"email\"\n *     required\n *   />\n *   <Field.Description>Usado para recuperar a senha.</Field.Description>\n *   <Field.Error />\n * </Field.Root>\n * ```\n */\nexport const FieldRoot = (props: FieldRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseField.Root\n      data-component=\"Field.Root\"\n      className={mergeStateClassNames(\n        fieldRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldRoot.displayName = 'Field.Root';\n"],"mappings":";;;;;;AAWA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;;;;;;;;;AA0B1D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,MAAX;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}
+{"version":3,"file":"field-root.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-root.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport { type FieldVariants, fieldRootVariants } from './field-root-variants';\n\nexport type FieldRootProps = MergeOverride<BaseField.Root.Props, FieldVariants>;\n\nexport type FieldRootState = BaseField.Root.State;\n\nexport type FieldRootActions = BaseField.Root.Actions;\n\nconst splitVariantProps = createSplitProps<FieldVariants>();\n\n/**\n * Agrupa rótulo, controle, descrição e erro de um campo. Repassa ao controle dentro dele o\n * `name`, o `disabled` (inclusive o que vem de um `Fieldset` em volta) e a validação, e liga o\n * rótulo e a descrição ao controle por `id`.\n *\n * O `size` vale só para os textos do campo: o controle recebe o próprio `size`, com o mesmo\n * valor.\n *\n * `invalid`, `dirty` e `touched` existem para uma lib de formulário externa (React Hook Form)\n * controlar o estado. Com `invalid` vindo de fora, o `Field.Error` só aparece com `match`.\n *\n * @example\n * ```tsx\n * <Field.Root name=\"email\">\n *   <Field.Label>E-mail</Field.Label>\n *   <Input\n *     type=\"email\"\n *     required\n *   />\n *   <Field.Description>Usado para recuperar a senha.</Field.Description>\n *   <Field.Error />\n * </Field.Root>\n * ```\n */\nexport const FieldRoot = (props: FieldRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseField.Root\n      data-component=\"Field.Root\"\n      className={mergeStateClassNames(\n        fieldRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldRoot.displayName = 'Field.Root';\n"],"mappings":";;;;;;AAcA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;;;;;;;;;AA0B1D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,MAAX;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/fields/fieldset/fieldset-legend.d.ts

@@ -3,16 +3,16 @@ import { Fieldset } from "@base-ui/react/fieldset";
 export type FieldsetLegendProps = Fieldset.Legend.Props;
 export type FieldsetLegendState = Fieldset.Legend.State;
 /**
- * Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao
- * `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a
- * borda do `<fieldset>`.
+ * Nome do grupo. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o
+ * `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.
  *
- * Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`
- * acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`
- * padrão.
+ * Tem dois papéis, que dependem de onde está:
+ * - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro
+ *   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;
+ * - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.
  *
- * Como título de seção, componha com o título que quiser:
- * `<Heading render={<Fieldset.Legend />}>`.
+ * Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,
+ * as variáveis não existem.
  */
 export declare const FieldsetLegend: {
   (props: FieldsetLegendProps): import("react").JSX.Element;

package/dist/components/fields/fieldset/fieldset-legend.js

@@ -3,26 +3,27 @@ import { jsx } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react/fieldset";
 //#region src/components/fields/fieldset/fieldset-legend.tsx
 /**
-* Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao
-* `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a
-* borda do `<fieldset>`.
+* Nome do grupo. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o
+* `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.
 *
-* Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`
-* acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`
-* padrão.
+* Tem dois papéis, que dependem de onde está:
+* - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro
+*   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;
+* - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.
 *
-* Como título de seção, componha com o título que quiser:
-* `<Heading render={<Fieldset.Legend />}>`.
+* Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,
+* as variáveis não existem.
 */
 const FieldsetLegend = (props) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(Fieldset.Legend, {
 		"data-component": "Fieldset.Legend",
 		className: mergeStateClassNames([
-			"text-(length:--field-label-size,var(--text-sm))",
-			"leading-(--field-label-leading,--spacing(4))",
+			"text-(length:--field-label-size,var(--text-base))",
+			"leading-(--field-label-leading,--spacing(6))",
 			"font-medium",
 			"text-gray-12",
+			"text-balance",
 			"data-disabled:opacity-50"
 		], className),
 		...rest

package/dist/components/fields/fieldset/fieldset-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset-legend.js","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-legend.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldsetLegendProps = BaseFieldset.Legend.Props;\n\nexport type FieldsetLegendState = BaseFieldset.Legend.State;\n\n/**\n * Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao\n * `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a\n * borda do `<fieldset>`.\n *\n * Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`\n * acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`\n * padrão.\n *\n * Como título de seção, componha com o título que quiser:\n * `<Heading render={<Fieldset.Legend />}>`.\n */\nexport const FieldsetLegend = (props: FieldsetLegendProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseFieldset.Legend\n      data-component=\"Fieldset.Legend\"\n      className={mergeStateClassNames(\n        [\n          // Tamanho e linha vêm do `size` do `Field.Root` em volta (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        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldsetLegend.displayName = 'Fieldset.Legend';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,QAAd;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"fieldset-legend.js","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-legend.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldsetLegendProps = BaseFieldset.Legend.Props;\n\nexport type FieldsetLegendState = BaseFieldset.Legend.State;\n\n/**\n * Nome do grupo. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o\n * `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.\n *\n * Tem dois papéis, que dependem de onde está:\n * - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro\n *   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;\n * - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.\n *\n * Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,\n * as variáveis não existem.\n */\nexport const FieldsetLegend = (props: FieldsetLegendProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseFieldset.Legend\n      data-component=\"Fieldset.Legend\"\n      className={mergeStateClassNames(\n        [\n          // Tamanho e linha vêm do `size` do `Field.Root` em volta (ver `fieldRootVariants`); sem\n          // ele, caem na tipografia do título.\n          'text-(length:--field-label-size,var(--text-base))',\n          'leading-(--field-label-leading,--spacing(6))',\n          'font-medium',\n          'text-gray-12',\n          'text-balance',\n\n          'data-disabled:opacity-50',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldsetLegend.displayName = 'Fieldset.Legend';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,QAAd;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GACA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

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

@@ -1,4 +1,4 @@
-import { AnyObject } from "@lucasbernardosn/utils";
+import { AnyObject } from "@lucasbernardosn/ts-utils";
 import { Form as Form$1 } from "@base-ui/react/form";
 //#region src/components/fields/form/form.d.ts
 export type FormProps<FormValues extends AnyObject = AnyObject> = Form$1.Props<FormValues>;

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

@@ -1 +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"}
+{"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/ts-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/input/input-variants.d.ts

@@ -18,7 +18,7 @@ export type InputVariants = {
 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
+ * `PatternInput`, o trigger do `Select` e o `Autocomplete.Input` 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`.
  *
@@ -27,12 +27,13 @@ export declare const inputDefaultVariants: Required<InputVariants>;
  * `: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.
+ * Inválido troca `--input-focus-color` e a borda pelo vermelho, pelo `data-invalid` do `Field` ou
+ * pelo `aria-invalid` de quem valida fora dele. O `:user-invalid` fica de fora: ele segue a
+ * validação nativa por conta própria e pintaria o campo antes de quem valida mostrar o erro (num
+ * `Field` com `validationMode="onSubmit"` ou numa lib de formulário).
  */
 export declare const inputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -6,7 +6,7 @@ const inputDefaultVariants = {
 };
 /**
 * 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
+* `PatternInput`, o trigger do `Select` e o `Autocomplete.Input` 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`.
 *
@@ -15,9 +15,10 @@ const inputDefaultVariants = {
 * `: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.
+* Inválido troca `--input-focus-color` e a borda pelo vermelho, pelo `data-invalid` do `Field` ou
+* pelo `aria-invalid` de quem valida fora dele. O `:user-invalid` fica de fora: ele segue a
+* validação nativa por conta própria e pintaria o campo antes de quem valida mostrar o erro (num
+* `Field` com `validationMode="onSubmit"` ou numa lib de formulário).
 */
 const inputVariants = cva([
 	"relative",
@@ -27,8 +28,8 @@ const inputVariants = cva([
 	"text-start",
 	"font-normal",
 	"text-gray-12",
-	"placeholder:text-gray-9/90",
-	"data-placeholder:text-gray-9/90",
+	"placeholder:text-gray-11/80",
+	"data-placeholder:text-gray-11/80",
 	"border",
 	"rounded-md",
 	"corner-squircle",
@@ -51,9 +52,7 @@ const inputVariants = cva([
 	"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)]"
+	"aria-invalid:[--input-focus-color:var(--color-red-9)]"
 ], {
 	variants: {
 		variant: {

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

@@ -1 +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"}
+{"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`, o trigger do `Select` e o `Autocomplete.Input` 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, pelo `data-invalid` do `Field` ou\n * pelo `aria-invalid` de quem valida fora dele. O `:user-invalid` fica de fora: ele segue a\n * validação nativa por conta própria e pintaria o campo antes de quem valida mostrar o erro (num\n * `Field` com `validationMode=\"onSubmit\"` ou numa lib de formulário).\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-11/80',\n    'data-placeholder:text-gray-11/80',\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  ],\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;;;;;;;;;;;;;;;;;AAkBA,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;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

@@ -1,5 +1,5 @@
 import { InputVariants } from "./input-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-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>;

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

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { inputVariants } from "./input-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/components/fields/input/input.tsx

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

@@ -1 +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"}
+{"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 {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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":";;;;;;AAgBA,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/number-input-variants.d.ts

@@ -24,7 +24,7 @@ export declare const numberInputDefaultVariants: Required<NumberInputVariants>;
  *   tecla nem quando o separador de milhar entra.
  */
 export declare const numberInputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -20,7 +20,7 @@ const numberInputVariants = cva([
 	"font-normal",
 	"text-gray-12",
 	"tabular-nums",
-	"placeholder:text-gray-9/90",
+	"placeholder:text-gray-11/80",
 	"border",
 	"rounded-md",
 	"corner-squircle",
@@ -43,9 +43,7 @@ const numberInputVariants = cva([
 	"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)]"
+	"aria-invalid:[--number-input-focus-color:var(--color-red-9)]"
 ], {
 	variants: {
 		variant: {

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

@@ -1 +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"}
+{"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-11/80',\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  ],\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;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

@@ -1,6 +1,6 @@
 import { NumberInputVariants } from "./number-input-variants.js";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Input } from "@base-ui/react/input";
 import { NumericFormatProps } from "react-number-format";
 //#region src/components/fields/number-input/number-input.d.ts

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

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { numberInputVariants } from "./number-input-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
 import { NumericFormat } from "react-number-format";