@lucasbernardosn/react-ui 0.2.0 → 0.4.0

package/dist/components/feedback/toast/toast-title.js

@@ -0,0 +1,31 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-title.tsx
+/**
+* Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome
+* do toast para o leitor de tela.
+*
+* Cópia do `Alert.Title`, a origem (tabela no README de `feedback`): foge da tabela de tipografia,
+* no tamanho da descrição (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A
+* diferença: é o `h2` do Base UI, e a cor vem de `--toast-fg`, que o `type` declara.
+*/
+const ToastTitle = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		"data-component": "Toast.Title",
+		className: mergeStateClassNames([
+			"text-sm",
+			"leading-5",
+			"font-medium",
+			"text-(--toast-fg,var(--color-gray-12))",
+			"text-pretty"
+		], className),
+		...rest
+	});
+};
+ToastTitle.displayName = "Toast.Title";
+//#endregion
+export { ToastTitle };
+
+//# sourceMappingURL=toast-title.js.map

package/dist/components/feedback/toast/toast-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-title.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-title.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ToastTitleProps = BaseToast.Title.Props;\n\nexport type ToastTitleState = BaseToast.Title.State;\n\n/**\n * Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome\n * do toast para o leitor de tela.\n *\n * Cópia do `Alert.Title`, a origem (tabela no README de `feedback`): foge da tabela de tipografia,\n * no tamanho da descrição (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A\n * diferença: é o `h2` do Base UI, e a cor vem de `--toast-fg`, que o `type` declara.\n */\nexport const ToastTitle = (props: ToastTitleProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseToast.Title\n      data-component=\"Toast.Title\"\n      className={mergeStateClassNames(\n        [\n          'text-sm',\n          'leading-5',\n          'font-medium',\n          'text-(--toast-fg,var(--color-gray-12))',\n          'text-pretty',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nToastTitle.displayName = 'Toast.Title';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/feedback/toast/toast-viewport-variants.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/feedback/toast/toast-viewport-variants.d.ts
+/**
+ * A fila fica presa à tela por `fixed`, numa camada própria (`--z-toast`, do tema): ela monta uma
+ * vez e fica no DOM, então não segue a ordem de abertura dos popups, que não têm `z-index`, e
+ * ficaria atrás de todo popup aberto depois dela.
+ *
+ * A `edge` declara `--toast-stack-sign`, o sentido em que a pilha cresce a partir da borda: `-1`
+ * embaixo (para cima) e `1` em cima (para baixo). O `Toast.Root` multiplica por ele todos os
+ * deslocamentos, e as fórmulas são as mesmas nas duas bordas. Abaixo de `sm`, a fila ocupa a
+ * largura da tela, e o `align` só vale a partir daí.
+ */
+export declare const toastViewportVariants: (props?: ({
+  edge?: "bottom" | "top" | null | undefined;
+  align?: "center" | "right" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=toast-viewport-variants.d.ts.map

package/dist/components/feedback/toast/toast-viewport-variants.js

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/toast/toast-viewport-variants.ts
+/**
+* A fila fica presa à tela por `fixed`, numa camada própria (`--z-toast`, do tema): ela monta uma
+* vez e fica no DOM, então não segue a ordem de abertura dos popups, que não têm `z-index`, e
+* ficaria atrás de todo popup aberto depois dela.
+*
+* A `edge` declara `--toast-stack-sign`, o sentido em que a pilha cresce a partir da borda: `-1`
+* embaixo (para cima) e `1` em cima (para baixo). O `Toast.Root` multiplica por ele todos os
+* deslocamentos, e as fórmulas são as mesmas nas duas bordas. Abaixo de `sm`, a fila ocupa a
+* largura da tela, e o `align` só vale a partir daí.
+*/
+const toastViewportVariants = cva([
+	"fixed",
+	"z-(--z-toast)",
+	"inset-x-4",
+	"sm:w-90",
+	"outline-none"
+], { variants: {
+	edge: {
+		top: ["[--toast-stack-sign:1]", "top-[max(--spacing(4),env(safe-area-inset-top))]"],
+		bottom: ["[--toast-stack-sign:-1]", "bottom-[max(--spacing(4),env(safe-area-inset-bottom))]"]
+	},
+	align: {
+		left: ["sm:right-auto"],
+		center: ["sm:mx-auto"],
+		right: ["sm:left-auto"]
+	}
+} });
+//#endregion
+export { toastViewportVariants };
+
+//# sourceMappingURL=toast-viewport-variants.js.map

package/dist/components/feedback/toast/toast-viewport-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-viewport-variants.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-viewport-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * A fila fica presa à tela por `fixed`, numa camada própria (`--z-toast`, do tema): ela monta uma\n * vez e fica no DOM, então não segue a ordem de abertura dos popups, que não têm `z-index`, e\n * ficaria atrás de todo popup aberto depois dela.\n *\n * A `edge` declara `--toast-stack-sign`, o sentido em que a pilha cresce a partir da borda: `-1`\n * embaixo (para cima) e `1` em cima (para baixo). O `Toast.Root` multiplica por ele todos os\n * deslocamentos, e as fórmulas são as mesmas nas duas bordas. Abaixo de `sm`, a fila ocupa a\n * largura da tela, e o `align` só vale a partir daí.\n */\nexport const toastViewportVariants = cva(\n  [\n    'fixed',\n    'z-(--z-toast)',\n    'inset-x-4',\n\n    'sm:w-90',\n\n    'outline-none',\n  ],\n  {\n    variants: {\n      edge: {\n        top: [\n          '[--toast-stack-sign:1]',\n          'top-[max(--spacing(4),env(safe-area-inset-top))]',\n        ],\n        bottom: [\n          '[--toast-stack-sign:-1]',\n          'bottom-[max(--spacing(4),env(safe-area-inset-bottom))]',\n        ],\n      },\n      align: {\n        left: ['sm:right-auto'],\n        // Com as duas laterais e a largura fixas, a margem automática centraliza.\n        center: ['sm:mx-auto'],\n        right: ['sm:left-auto'],\n      },\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,wBAAwB,IACnC;CACE;CACA;CACA;CAEA;CAEA;AACF,GACA,EACE,UAAU;CACR,MAAM;EACJ,KAAK,CACH,0BACA,kDACF;EACA,QAAQ,CACN,2BACA,wDACF;CACF;CACA,OAAO;EACL,MAAM,CAAC,eAAe;EAEtB,QAAQ,CAAC,YAAY;EACrB,OAAO,CAAC,cAAc;CACxB;AACF,EACF,CACF"}

package/dist/components/feedback/toast/toast-viewport.d.ts

@@ -0,0 +1,19 @@
+import { ToastVariants } from "./use-toast-context.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-viewport.d.ts
+export type ToastViewportProps = MergeOverride<Toast.Viewport.Props, ToastVariants>;
+export type ToastViewportState = Toast.Viewport.State;
+/**
+ * A fila na tela, presa ao canto ou ao centro do `position`. Expande a pilha enquanto o mouse está
+ * sobre ela ou o foco está dentro, e pausa o timeout dos toasts nesse tempo.
+ *
+ * É uma região `aria-live` com o nome "Notificações": o leitor de tela anuncia o toast que entra
+ * sem tirar o foco de onde está, e o `F6` leva o foco para a fila.
+ */
+export declare const ToastViewport: {
+  (props: ToastViewportProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=toast-viewport.d.ts.map

package/dist/components/feedback/toast/toast-viewport.js

@@ -0,0 +1,39 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { toastPlacements } from "./toast-placement.js";
+import { ToastContextProvider, toastDefaultVariants } from "./use-toast-context.js";
+import { toastViewportVariants } from "./toast-viewport-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-viewport.tsx
+const splitVariantProps = createSplitProps();
+/**
+* A fila na tela, presa ao canto ou ao centro do `position`. Expande a pilha enquanto o mouse está
+* sobre ela ou o foco está dentro, e pausa o timeout dos toasts nesse tempo.
+*
+* É uma região `aria-live` com o nome "Notificações": o leitor de tela anuncia o toast que entra
+* sem tirar o foco de onde está, e o `F6` leva o foco para a fila.
+*/
+const ToastViewport = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["position"]);
+	const { className, ...rest } = elementProps;
+	const position = variantProps.position ?? toastDefaultVariants.position;
+	const { edge, align } = toastPlacements[position];
+	return /* @__PURE__ */ jsx(ToastContextProvider, {
+		value: variantProps,
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-component": "Toast.Viewport",
+			"aria-label": "Notificações",
+			className: mergeStateClassNames(toastViewportVariants({
+				edge,
+				align
+			}), className),
+			...rest
+		})
+	});
+};
+ToastViewport.displayName = "Toast.Viewport";
+//#endregion
+export { ToastViewport };
+
+//# sourceMappingURL=toast-viewport.js.map

package/dist/components/feedback/toast/toast-viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-viewport.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-viewport.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport { toastPlacements } from './toast-placement';\nimport { toastViewportVariants } from './toast-viewport-variants';\nimport {\n  ToastContextProvider,\n  type ToastVariants,\n  toastDefaultVariants,\n} from './use-toast-context';\n\nexport type ToastViewportProps = MergeOverride<\n  BaseToast.Viewport.Props,\n  ToastVariants\n>;\n\nexport type ToastViewportState = BaseToast.Viewport.State;\n\nconst splitVariantProps = createSplitProps<ToastVariants>();\n\n/**\n * A fila na tela, presa ao canto ou ao centro do `position`. Expande a pilha enquanto o mouse está\n * sobre ela ou o foco está dentro, e pausa o timeout dos toasts nesse tempo.\n *\n * É uma região `aria-live` com o nome \"Notificações\": o leitor de tela anuncia o toast que entra\n * sem tirar o foco de onde está, e o `F6` leva o foco para a fila.\n */\nexport const ToastViewport = (props: ToastViewportProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['position']);\n\n  const { className, ...rest } = elementProps;\n\n  const position = variantProps.position ?? toastDefaultVariants.position;\n\n  const { edge, align } = toastPlacements[position];\n\n  return (\n    <ToastContextProvider value={variantProps}>\n      <BaseToast.Viewport\n        data-component=\"Toast.Viewport\"\n        aria-label=\"Notificações\"\n        className={mergeStateClassNames(\n          toastViewportVariants({ edge, align }),\n          className,\n        )}\n        {...rest}\n      />\n    </ToastContextProvider>\n  );\n};\n\nToastViewport.displayName = 'Toast.Viewport';\n"],"mappings":";;;;;;;;AAqBA,MAAM,oBAAoB,iBAAgC;;;;;;;;AAS1D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,UAAU,CAAC;CAE1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,WAAW,aAAa,YAAY,qBAAqB;CAE/D,MAAM,EAAE,MAAM,UAAU,gBAAgB;CAExC,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAACA,MAAU,UAAX;GACE,kBAAe;GACf,cAAW;GACX,WAAW,qBACT,sBAAsB;IAAE;IAAM;GAAM,CAAC,GACrC,SACF;GACA,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,18 @@
+//#region src/components/feedback/toast/use-toast-context.d.ts
+/**
+ * Variantes do Toast. Informadas no `Toast.Viewport` e repassadas aos `Toast.Root` por contexto.
+ */
+export type ToastVariants = {
+  /**
+   * Canto ou centro da tela onde a fila aparece. A borda (`top`, `bottom`) decide para que lado a
+   * pilha cresce e de onde o toast entra; o lado decide o gesto horizontal de fechar. Abaixo de
+   * `sm`, a fila ocupa a largura da tela e só a borda vale.
+   *
+   * @default 'bottom-right'
+   */
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+};
+export declare const toastDefaultVariants: Required<ToastVariants>;
+export declare const ToastContextProvider: import("react").Provider<ToastVariants>, useToastContext: () => ToastVariants;
+//#endregion
+//# sourceMappingURL=use-toast-context.d.ts.map

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

@@ -0,0 +1,11 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/feedback/toast/use-toast-context.ts
+const toastDefaultVariants = { position: "bottom-right" };
+const [ToastContextProvider, useToastContext] = createContext({
+	name: "ToastContext",
+	providers: ["Toast.Viewport"]
+});
+//#endregion
+export { ToastContextProvider, toastDefaultVariants, useToastContext };
+
+//# sourceMappingURL=use-toast-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-toast-context.js","names":[],"sources":["../../../../src/components/feedback/toast/use-toast-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do Toast. Informadas no `Toast.Viewport` e repassadas aos `Toast.Root` por contexto.\n */\nexport type ToastVariants = {\n  /**\n   * Canto ou centro da tela onde a fila aparece. A borda (`top`, `bottom`) decide para que lado a\n   * pilha cresce e de onde o toast entra; o lado decide o gesto horizontal de fechar. Abaixo de\n   * `sm`, a fila ocupa a largura da tela e só a borda vale.\n   *\n   * @default 'bottom-right'\n   */\n  position?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n};\n\nexport const toastDefaultVariants: Required<ToastVariants> = {\n  position: 'bottom-right',\n};\n\nexport const [ToastContextProvider, useToastContext] =\n  createContext<ToastVariants>({\n    name: 'ToastContext',\n    providers: ['Toast.Viewport'],\n  });\n"],"mappings":";;AAsBA,MAAa,uBAAgD,EAC3D,UAAU,eACZ;AAEA,MAAa,CAAC,sBAAsB,mBAClC,cAA6B;CAC3B,MAAM;CACN,WAAW,CAAC,gBAAgB;AAC9B,CAAC"}

package/dist/components/feedback/toast/use-toast-manager.d.ts

@@ -0,0 +1,10 @@
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/use-toast-manager.d.ts
+/**
+ * A fila do `Toast.Provider` mais próximo: os toasts abertos, para renderizar, e os métodos para
+ * abrir e fechar. Serve a uma fila montada com as partes; a do `Toast.Outlet` se usa pelo
+ * `Toast.add` e afins.
+ */
+export declare const useToastManager: typeof Toast.useToastManager;
+//#endregion
+//# sourceMappingURL=use-toast-manager.d.ts.map

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

@@ -0,0 +1,12 @@
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/use-toast-manager.ts
+/**
+* A fila do `Toast.Provider` mais próximo: os toasts abertos, para renderizar, e os métodos para
+* abrir e fechar. Serve a uma fila montada com as partes; a do `Toast.Outlet` se usa pelo
+* `Toast.add` e afins.
+*/
+const useToastManager = Toast.useToastManager;
+//#endregion
+export { useToastManager };
+
+//# sourceMappingURL=use-toast-manager.js.map

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.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.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/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,9 +27,10 @@ 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?: "subtle" | "outline" | null | undefined;

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>;