npm - @lucasbernardosn/react-ui - Versions diffs - 0.2.0 → 0.4.0 - Mend

@lucasbernardosn/react-ui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (938) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 {\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.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/components/fields/number-input/number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/number-input/number-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 { NumericFormat, type NumericFormatProps } from 'react-number-format';\nimport { mergeStateClassNames } from '#utils';\nimport {\n type NumberInputVariants,\n numberInputVariants,\n} from './number-input-variants';\n\nexport type NumberInputProps = MergeOverride<\n Omit<\n NumericFormatProps<BaseInput.Props>,\n \| 'customInput'\n \| 'displayType'\n \| 'getInputRef'\n \| 'renderText'\n \| 'valueIsNumericString'\n >,\n NumberInputVariants & {\n /*\n O valor numérico, para o modo controlado. `null` deixa o campo vazio.\n /\n value?: number \| null;\n /\n O valor numérico inicial, para o modo não controlado.\n /\n defaultValue?: number \| null;\n /\n Chamado a cada mudança feita pelo usuário, com o número já convertido, ou `null` com o campo\n * vazio. Mudar uma prop (o `value`, o `decimalScale`) não o chama.\n /\n onValueChange?: (\n value: number \| null,\n details: NumberInputChangeEventDetails,\n ) => void;\n ref?: React.Ref<HTMLInputElement>;\n }\n>;\n\nexport type NumberInputState = BaseInput.State;\n\nexport type NumberInputChangeEventDetails = {\n /\n O texto como aparece no campo, com separadores, prefixo e sufixo (`\"1.234,50\"`).\n /\n formattedValue: string;\n /\n O evento da digitação.\n /\n event: React.SyntheticEvent<HTMLInputElement> \| undefined;\n};\n\nconst splitVariantProps = createSplitProps<NumberInputVariants>();\n\n/\n Campo numérico que formata enquanto se digita, com o `react-number-format` sobre o `Input` do\n * Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da lib.\n \n Sai em pt-BR: `.` no milhar e `,` no decimal, com o `.` digitado aceito como vírgula. O\n * `decimalScale` limita as casas já na digitação (sem ele, não há limite), e o\n * `fixedDecimalScale` completa com zeros. Com `decimalScale={0}`, a vírgula é ignorada: \"12,7\"\n * vira 127.\n \n O número sai pelo `onValueChange`. O campo guarda o texto formatado (`\"1.234,50\"`), e é ele que\n * vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.\n \n O `inputMode` abre o teclado numérico no celular: `decimal`, ou `numeric` sem casas. No iPhone,\n * nenhum dos dois tem o sinal de menos; para digitar negativo lá, `inputMode=\"text\"`.\n \n @example\n * ```tsx\n * <NumberInput\n * aria-label=\"Peso (kg)\"\n * decimalScale={3}\n * onValueChange={(value) => setWeight(value)}\n * />\n * ```\n /\nexport const NumberInput = (props: NumberInputProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'size',\n 'variant',\n ]);\n\n const {\n className,\n value,\n defaultValue,\n onValueChange,\n ref,\n decimalScale,\n ...rest\n } = elementProps;\n\n return (\n <NumericFormat\n data-component=\"NumberInput\"\n customInput={BaseInput}\n getInputRef={ref}\n thousandSeparator=\".\"\n decimalSeparator=\",\"\n allowedDecimalSeparators={[',', '.']}\n inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n decimalScale={decimalScale}\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 numberInputVariants(variantProps),\n className,\n )}\n {...rest}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n"],"mappings":";;;;;;;~~AAqDA~~,MAAM,oBAAoB,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;AA0BhE,MAAa,eAAe,UAA4B;CACtD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EACJ,WACA,OACA,cACA,eACA,KACA,cACA,GAAG,SACD;CAEJ,OACE,oBAAC,eAAD;EACE,kBAAe;EACf,aAAaA;EACb,aAAa;EACb,mBAAkB;EAClB,kBAAiB;EACjB,0BAA0B,CAAC,KAAK,GAAG;EACnC,WAAW,iBAAiB,IAAI,YAAY;EAC9B;EAEd,OAAO,UAAU,OAAO,KAAK;EAC7B,cAAc,gBAAgB,KAAA;EAC9B,gBAAgB,QAAQ,eAAe;;GAErC,IAAI,WAAW,WAAW,SACxB;GAGF,gBAAgB,OAAO,cAAc,MAAM;IACzC,gBAAgB,OAAO;IACvB,OAAO,WAAW;GACpB,CAAC;EACH;EACA,WAAW,qBACT,oBAAoB,YAAY,GAChC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}
1	+ {"version":3,"file":"number-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/number-input/number-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 { NumericFormat, type NumericFormatProps } from 'react-number-format';\nimport { mergeStateClassNames } from '#utils';\nimport {\n type NumberInputVariants,\n numberInputVariants,\n} from './number-input-variants';\n\nexport type NumberInputProps = MergeOverride<\n Omit<\n NumericFormatProps<BaseInput.Props>,\n \| 'customInput'\n \| 'displayType'\n \| 'getInputRef'\n \| 'renderText'\n \| 'valueIsNumericString'\n >,\n NumberInputVariants & {\n /*\n O valor numérico, para o modo controlado. `null` deixa o campo vazio.\n /\n value?: number \| null;\n /\n O valor numérico inicial, para o modo não controlado.\n /\n defaultValue?: number \| null;\n /\n Chamado a cada mudança feita pelo usuário, com o número já convertido, ou `null` com o campo\n * vazio. Mudar uma prop (o `value`, o `decimalScale`) não o chama.\n /\n onValueChange?: (\n value: number \| null,\n details: NumberInputChangeEventDetails,\n ) => void;\n ref?: React.Ref<HTMLInputElement>;\n }\n>;\n\nexport type NumberInputState = BaseInput.State;\n\nexport type NumberInputChangeEventDetails = {\n /\n O texto como aparece no campo, com separadores, prefixo e sufixo (`\"1.234,50\"`).\n /\n formattedValue: string;\n /\n O evento da digitação.\n /\n event: React.SyntheticEvent<HTMLInputElement> \| undefined;\n};\n\nconst splitVariantProps = createSplitProps<NumberInputVariants>();\n\n/\n Campo numérico que formata enquanto se digita, com o `react-number-format` sobre o `Input` do\n * Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da lib.\n \n Sai em pt-BR: `.` no milhar e `,` no decimal, com o `.` digitado aceito como vírgula. O\n * `decimalScale` limita as casas já na digitação (sem ele, não há limite), e o\n * `fixedDecimalScale` completa com zeros. Com `decimalScale={0}`, a vírgula é ignorada: \"12,7\"\n * vira 127.\n \n O número sai pelo `onValueChange`. O campo guarda o texto formatado (`\"1.234,50\"`), e é ele que\n * vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.\n \n O `inputMode` abre o teclado numérico no celular: `decimal`, ou `numeric` sem casas. No iPhone,\n * nenhum dos dois tem o sinal de menos; para digitar negativo lá, `inputMode=\"text\"`.\n \n @example\n * ```tsx\n * <NumberInput\n * aria-label=\"Peso (kg)\"\n * decimalScale={3}\n * onValueChange={(value) => setWeight(value)}\n * />\n * ```\n /\nexport const NumberInput = (props: NumberInputProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'size',\n 'variant',\n ]);\n\n const {\n className,\n value,\n defaultValue,\n onValueChange,\n ref,\n decimalScale,\n ...rest\n } = elementProps;\n\n return (\n <NumericFormat\n data-component=\"NumberInput\"\n customInput={BaseInput}\n getInputRef={ref}\n thousandSeparator=\".\"\n decimalSeparator=\",\"\n allowedDecimalSeparators={[',', '.']}\n inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n decimalScale={decimalScale}\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 numberInputVariants(variantProps),\n className,\n )}\n {...rest}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n"],"mappings":";;;;;;;AAwDA,MAAM,oBAAoB,iBAAsC;;;;;;;;;;;;;;;;;;;;;;;;;AA0BhE,MAAa,eAAe,UAA4B;CACtD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EACJ,WACA,OACA,cACA,eACA,KACA,cACA,GAAG,SACD;CAEJ,OACE,oBAAC,eAAD;EACE,kBAAe;EACf,aAAaA;EACb,aAAa;EACb,mBAAkB;EAClB,kBAAiB;EACjB,0BAA0B,CAAC,KAAK,GAAG;EACnC,WAAW,iBAAiB,IAAI,YAAY;EAC9B;EAEd,OAAO,UAAU,OAAO,KAAK;EAC7B,cAAc,gBAAgB,KAAA;EAC9B,gBAAgB,QAAQ,eAAe;;GAErC,IAAI,WAAW,WAAW,SACxB;GAGF,gBAAgB,OAAO,cAAc,MAAM;IACzC,gBAAgB,OAAO;IACvB,OAAO,WAAW;GACpB,CAAC;EACH;EACA,WAAW,qBACT,oBAAoB,YAAY,GAChC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/fields/password-input/password-input.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { InputProps } from "../input/input.js";
 import "../input/index.js";
 import { PasswordInputVariants } from "./password-input-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import * as ZagPasswordInput from "@zag-js/password-input";
 //#region src/components/fields/password-input/password-input.d.ts
 /**

package/dist/components/fields/password-input/password-input.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { Icon } from "../../display/icon/icon.js";
 import { Input } from "../input/input.js";
 import { passwordInputVariants } from "./password-input-variants.js";
 import { useId } from "react";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { normalizeProps, useMachine } from "@zag-js/react";

package/dist/components/fields/password-input/password-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"password-input.js","names":[],"sources":["../../../../src/components/fields/password-input/password-input.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react';\nimport * as ZagPasswordInput from '@zag-js/password-input';\nimport { normalizeProps, useMachine } from '@zag-js/react';\nimport { useId } from 'react';\nimport { Icon } from '#components/display/icon';\nimport { Input, type InputProps } from '#components/fields/input';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type PasswordInputVariants,\n passwordInputVariants,\n} from './password-input-variants';\n\n/*\n As opções da máquina do Zag que o componente aceita. O `id` fica de fora: aqui ele é o `id` do\n * `<input>`, como no `Input`, e a máquina ganha um próprio.\n /\ntype PasswordInputMachineProps = Omit<\n ZagPasswordInput.Props,\n 'id' \| 'dir' \| 'getRootNode'\n>;\n\nexport type PasswordInputProps = MergeOverride<\n Omit<InputProps, 'type'>,\n PasswordInputVariants & PasswordInputMachineProps\n>;\n\n/\n Textos acessíveis padrão do botão, em pt-BR. Um `translations` passado por prop sobrescreve só\n * as chaves informadas.\n /\nconst passwordInputTranslations: ZagPasswordInput.IntlTranslations = {\n visibilityTrigger: (visible) => (visible ? 'Ocultar senha' : 'Mostrar senha'),\n};\n\nconst splitVariantProps = createSplitProps<PasswordInputVariants>();\n\nconst splitMachineProps = createSplitProps<PasswordInputMachineProps>();\n\n/\n Campo de senha com o botão de mostrar e ocultar, sobre a máquina `password-input` do Zag e o\n * `Input` da lib: liga-se sozinho ao `Field` quando está dentro de um.\n \n - O botão fica fora do Tab, como no Zag: no clique, a senha aparece ou some e o foco continua\n * no campo. Ele some quando o campo está desabilitado, venha o `disabled` da prop ou do `Field`.\n * - A senha volta a ficar oculta no envio e no reset do formulário, para o campo ir como\n * `type=\"password\"`, que é o que os gerenciadores de senha reconhecem.\n * - `autoComplete` é `current-password` por padrão; num cadastro, `new-password`.\n \n Componente único, e não composto como os outros componentes sobre o Zag: a máquina é criada aqui\n * dentro, sem hook, contexto nem `RootProvider`. O `className` vai para o contêiner, que dá a\n * largura e a posição no layout; o `<input>` ocupa a largura dele.\n \n @example\n * ```tsx\n * <Field.Root>\n * <Field.Label>Senha</Field.Label>\n * <PasswordInput />\n * </Field.Root>\n * ```\n /\nexport const PasswordInput = (props: PasswordInputProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'size',\n 'variant',\n ]);\n\n const [machineProps, inputProps] = splitMachineProps(elementProps, [\n 'autoComplete',\n 'defaultVisible',\n 'disabled',\n 'ids',\n 'ignorePasswordManagers',\n 'invalid',\n 'name',\n 'onVisibilityChange',\n 'readOnly',\n 'required',\n 'translations',\n 'visible',\n ]);\n\n const { className, id, ...rest } = inputProps;\n\n const machineId = useId();\n\n const service = useMachine(ZagPasswordInput.machine, {\n ...machineProps,\n id: machineId,\n // O `id` de quem usa é o do `<input>`; sem ele, vale o que o Zag gera.\n ids: { ...machineProps.ids, input: id ?? machineProps.ids?.input },\n // Mescladas por chave, para um `translations` parcial não derrubar os outros textos.\n translations: {\n ...passwordInputTranslations,\n ...machineProps.translations,\n },\n });\n\n const passwordInput = ZagPasswordInput.connect(service, normalizeProps);\n\n /\n As props do campo sem as chaves `undefined`: o Zag manda `data-invalid`, `data-disabled` e\n * `data-readonly` vazios quando o estado não vale, e eles apagariam os que o `Input` escreve a\n * partir do `Field`.\n /\n const zagInputProps = Object.fromEntries(\n Object.entries(passwordInput.getInputProps()).filter(\n ([, value]) => value !== undefined,\n ),\n );\n\n return (\n <div\n {...passwordInput.getRootProps()}\n data-component=\"PasswordInput\"\n className={mergeTwClassNames(\n passwordInputVariants({ size: variantProps.size }),\n className,\n )}\n >\n <Input\n {...zagInputProps}\n size={variantProps.size}\n variant={variantProps.variant}\n className={mergeTwClassNames([\n // Marca o campo para o botão ler o `disabled` dele\n 'peer',\n // A folga dos dois lados do ícone mais o ícone: o texto não passa por baixo do botão\n 'pe-[calc(var(--password-input-px)2+var(--password-input-icon-size))]',\n ])}\n {...rest}\n />\n\n <button\n {...passwordInput.getVisibilityTriggerProps()}\n data-component=\"PasswordInput.VisibilityTrigger\"\n className={mergeTwClassNames([\n 'absolute',\n 'inset-y-0',\n 'inset-e-0',\n\n 'flex',\n 'items-center',\n\n 'px-(--password-input-px)',\n '[&_svg]:size-(--password-input-icon-size)',\n\n 'text-gray-11',\n 'hover:text-gray-12',\n\n 'cursor-pointer',\n\n // `disabled` do campo, da prop ou do `Field`\n 'peer-disabled:hidden',\n ])}\n >\n <span\n {...passwordInput.getIndicatorProps()}\n className=\"flex\"\n >\n <Icon\n render={passwordInput.visible ? <EyeIcon /> : <EyeSlashIcon />}\n />\n </span>\n </button>\n </div>\n );\n};\n\nPasswordInput.displayName = 'PasswordInput';\n"],"mappings":";;;;;;;;;;;;;;;~~AA+BA~~,MAAM,4BAA+D,EACnE,oBAAoB,YAAa,UAAU,kBAAkB,gBAC/D;AAEA,MAAM,oBAAoB,iBAAwC;AAElE,MAAM,oBAAoB,iBAA4C;;;;;;;;;;;;;;;;;;;;;;;AAwBtE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,CAAC,cAAc,cAAc,kBAAkB,cAAc;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,IAAI,GAAG,SAAS;CAEnC,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,WAAW,iBAAiB,SAAS;EACnD,GAAG;EACH,IAAI;EAEJ,KAAK;GAAE,GAAG,aAAa;GAAK,OAAO,MAAM,aAAa,KAAK;EAAM;EAEjE,cAAc;GACZ,GAAG;GACH,GAAG,aAAa;EAClB;CACF,CAAC;CAED,MAAM,gBAAgB,iBAAiB,QAAQ,SAAS,cAAc;;;;;;CAOtE,MAAM,gBAAgB,OAAO,YAC3B,OAAO,QAAQ,cAAc,cAAc,CAAC,CAAC,CAAC,QAC3C,GAAG,WAAW,UAAU,KAAA,CAC3B,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI,cAAc,aAAa;EAC/B,kBAAe;EACf,WAAW,kBACT,sBAAsB,EAAE,MAAM,aAAa,KAAK,CAAC,GACjD,SACF;EANF,UAAA,CAQE,oBAAC,OAAD;GACE,GAAI;GACJ,MAAM,aAAa;GACnB,SAAS,aAAa;GACtB,WAAW,kBAAkB,CAE3B,QAEA,uEACF,CAAC;GACD,GAAI;EACL,CAAA,GAED,oBAAC,UAAD;GACE,GAAI,cAAc,0BAA0B;GAC5C,kBAAe;GACf,WAAW,kBAAkB;IAC3B;IACA;IACA;IAEA;IACA;IAEA;IACA;IAEA;IACA;IAEA;IAGA;GACF,CAAC;GAED,UAAA,oBAAC,QAAD;IACE,GAAI,cAAc,kBAAkB;IACpC,WAAU;IAEV,UAAA,oBAAC,MAAD,EACE,QAAQ,cAAc,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA,EAC9D,CAAA;GACG,CAAA;EACA,CAAA,CACL;;AAET;AAEA,cAAc,cAAc"}
1	+ {"version":3,"file":"password-input.js","names":[],"sources":["../../../../src/components/fields/password-input/password-input.tsx"],"sourcesContent":["import {\n createSplitProps,\n type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react';\nimport * as ZagPasswordInput from '@zag-js/password-input';\nimport { normalizeProps, useMachine } from '@zag-js/react';\nimport { useId } from 'react';\nimport { Icon } from '#components/display/icon';\nimport { Input, type InputProps } from '#components/fields/input';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type PasswordInputVariants,\n passwordInputVariants,\n} from './password-input-variants';\n\n/*\n As opções da máquina do Zag que o componente aceita. O `id` fica de fora: aqui ele é o `id` do\n * `<input>`, como no `Input`, e a máquina ganha um próprio.\n /\ntype PasswordInputMachineProps = Omit<\n ZagPasswordInput.Props,\n 'id' \| 'dir' \| 'getRootNode'\n>;\n\nexport type PasswordInputProps = MergeOverride<\n Omit<InputProps, 'type'>,\n PasswordInputVariants & PasswordInputMachineProps\n>;\n\n/\n Textos acessíveis padrão do botão, em pt-BR. Um `translations` passado por prop sobrescreve só\n * as chaves informadas.\n /\nconst passwordInputTranslations: ZagPasswordInput.IntlTranslations = {\n visibilityTrigger: (visible) => (visible ? 'Ocultar senha' : 'Mostrar senha'),\n};\n\nconst splitVariantProps = createSplitProps<PasswordInputVariants>();\n\nconst splitMachineProps = createSplitProps<PasswordInputMachineProps>();\n\n/\n Campo de senha com o botão de mostrar e ocultar, sobre a máquina `password-input` do Zag e o\n * `Input` da lib: liga-se sozinho ao `Field` quando está dentro de um.\n \n - O botão fica fora do Tab, como no Zag: no clique, a senha aparece ou some e o foco continua\n * no campo. Ele some quando o campo está desabilitado, venha o `disabled` da prop ou do `Field`.\n * - A senha volta a ficar oculta no envio e no reset do formulário, para o campo ir como\n * `type=\"password\"`, que é o que os gerenciadores de senha reconhecem.\n * - `autoComplete` é `current-password` por padrão; num cadastro, `new-password`.\n \n Componente único, e não composto como os outros componentes sobre o Zag: a máquina é criada aqui\n * dentro, sem hook, contexto nem `RootProvider`. O `className` vai para o contêiner, que dá a\n * largura e a posição no layout; o `<input>` ocupa a largura dele.\n \n @example\n * ```tsx\n * <Field.Root>\n * <Field.Label>Senha</Field.Label>\n * <PasswordInput />\n * </Field.Root>\n * ```\n /\nexport const PasswordInput = (props: PasswordInputProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'size',\n 'variant',\n ]);\n\n const [machineProps, inputProps] = splitMachineProps(elementProps, [\n 'autoComplete',\n 'defaultVisible',\n 'disabled',\n 'ids',\n 'ignorePasswordManagers',\n 'invalid',\n 'name',\n 'onVisibilityChange',\n 'readOnly',\n 'required',\n 'translations',\n 'visible',\n ]);\n\n const { className, id, ...rest } = inputProps;\n\n const machineId = useId();\n\n const service = useMachine(ZagPasswordInput.machine, {\n ...machineProps,\n id: machineId,\n // O `id` de quem usa é o do `<input>`; sem ele, vale o que o Zag gera.\n ids: { ...machineProps.ids, input: id ?? machineProps.ids?.input },\n // Mescladas por chave, para um `translations` parcial não derrubar os outros textos.\n translations: {\n ...passwordInputTranslations,\n ...machineProps.translations,\n },\n });\n\n const passwordInput = ZagPasswordInput.connect(service, normalizeProps);\n\n /\n As props do campo sem as chaves `undefined`: o Zag manda `data-invalid`, `data-disabled` e\n * `data-readonly` vazios quando o estado não vale, e eles apagariam os que o `Input` escreve a\n * partir do `Field`.\n /\n const zagInputProps = Object.fromEntries(\n Object.entries(passwordInput.getInputProps()).filter(\n ([, value]) => value !== undefined,\n ),\n );\n\n return (\n <div\n {...passwordInput.getRootProps()}\n data-component=\"PasswordInput\"\n className={mergeTwClassNames(\n passwordInputVariants({ size: variantProps.size }),\n className,\n )}\n >\n <Input\n {...zagInputProps}\n size={variantProps.size}\n variant={variantProps.variant}\n className={mergeTwClassNames([\n // Marca o campo para o botão ler o `disabled` dele\n 'peer',\n // A folga dos dois lados do ícone mais o ícone: o texto não passa por baixo do botão\n 'pe-[calc(var(--password-input-px)2+var(--password-input-icon-size))]',\n ])}\n {...rest}\n />\n\n <button\n {...passwordInput.getVisibilityTriggerProps()}\n data-component=\"PasswordInput.VisibilityTrigger\"\n className={mergeTwClassNames([\n 'absolute',\n 'inset-y-0',\n 'inset-e-0',\n\n 'flex',\n 'items-center',\n\n 'px-(--password-input-px)',\n '[&_svg]:size-(--password-input-icon-size)',\n\n 'text-gray-11',\n 'hover:text-gray-12',\n\n 'cursor-pointer',\n\n // `disabled` do campo, da prop ou do `Field`\n 'peer-disabled:hidden',\n ])}\n >\n <span\n {...passwordInput.getIndicatorProps()}\n className=\"flex\"\n >\n <Icon\n render={passwordInput.visible ? <EyeIcon /> : <EyeSlashIcon />}\n />\n </span>\n </button>\n </div>\n );\n};\n\nPasswordInput.displayName = 'PasswordInput';\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,MAAM,4BAA+D,EACnE,oBAAoB,YAAa,UAAU,kBAAkB,gBAC/D;AAEA,MAAM,oBAAoB,iBAAwC;AAElE,MAAM,oBAAoB,iBAA4C;;;;;;;;;;;;;;;;;;;;;;;AAwBtE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,CAAC,cAAc,cAAc,kBAAkB,cAAc;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,IAAI,GAAG,SAAS;CAEnC,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,WAAW,iBAAiB,SAAS;EACnD,GAAG;EACH,IAAI;EAEJ,KAAK;GAAE,GAAG,aAAa;GAAK,OAAO,MAAM,aAAa,KAAK;EAAM;EAEjE,cAAc;GACZ,GAAG;GACH,GAAG,aAAa;EAClB;CACF,CAAC;CAED,MAAM,gBAAgB,iBAAiB,QAAQ,SAAS,cAAc;;;;;;CAOtE,MAAM,gBAAgB,OAAO,YAC3B,OAAO,QAAQ,cAAc,cAAc,CAAC,CAAC,CAAC,QAC3C,GAAG,WAAW,UAAU,KAAA,CAC3B,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI,cAAc,aAAa;EAC/B,kBAAe;EACf,WAAW,kBACT,sBAAsB,EAAE,MAAM,aAAa,KAAK,CAAC,GACjD,SACF;EANF,UAAA,CAQE,oBAAC,OAAD;GACE,GAAI;GACJ,MAAM,aAAa;GACnB,SAAS,aAAa;GACtB,WAAW,kBAAkB,CAE3B,QAEA,uEACF,CAAC;GACD,GAAI;EACL,CAAA,GAED,oBAAC,UAAD;GACE,GAAI,cAAc,0BAA0B;GAC5C,kBAAe;GACf,WAAW,kBAAkB;IAC3B;IACA;IACA;IAEA;IACA;IAEA;IACA;IAEA;IACA;IAEA;IAGA;GACF,CAAC;GAED,UAAA,oBAAC,QAAD;IACE,GAAI,cAAc,kBAAkB;IACpC,WAAU;IAEV,UAAA,oBAAC,MAAD,EACE,QAAQ,cAAc,UAAU,oBAAC,SAAD,CAAU,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA,EAC9D,CAAA;GACG,CAAA;EACA,CAAA,CACL;;AAET;AAEA,cAAc,cAAc"}

package/dist/components/fields/pattern-input/pattern-input-variants.js CHANGED Viewed

@@ -20,7 +20,7 @@ const patternInputVariants = cva([
 	"font-normal",
 	"text-gray-12",
 	"font-mono",
-	"placeholder:text-gray-9/90",
+	"placeholder:text-gray-11/80",
 	"border",
 	"rounded-md",
 	"corner-squircle",
@@ -43,9 +43,7 @@ const patternInputVariants = cva([
 	"data-invalid:border-red-9",
 	"data-invalid:[--pattern-input-focus-color:var(--color-red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]",
-	"user-invalid:border-red-9",
-	"user-invalid:[--pattern-input-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]"
 ], {
 	variants: {
 		variant: {

package/dist/components/fields/pattern-input/pattern-input-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pattern-input-variants.js","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type PatternInputVariants = {\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 patternInputDefaultVariants: Required<PatternInputVariants> = {\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 * - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e\n * literais): o texto não se mexe quando uma posição vazia é preenchida.\n */\nexport const patternInputVariants = 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 'font-mono',\n\n 'placeholder:text-gray-9/90',\n\n 'border',\n 'rounded-md',\n 'corner-squircle',\n\n '[--pattern-input-focus-color:var(--color-black)]',\n 'dark:[--pattern-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-(--pattern-input-focus-color)',\n 'focus-visible:border-(--pattern-input-focus-color)',\n\n 'data-focused:outline-1',\n 'data-focused:outline-solid',\n 'data-focused:-outline-offset-2',\n 'data-focused:outline-(--pattern-input-focus-color)',\n 'data-focused:border-(--pattern-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:[--pattern-input-focus-color:var(--color-red-9)]',\n 'aria-invalid:border-red-9',\n 'aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]',\n ~~'user-invalid:border-red-9',\n 'user-invalid:[--pattern-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: patternInputDefaultVariants.size,\n variant: patternInputDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AAmBA,MAAa,8BAA8D;CACzE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;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,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}
1	+ {"version":3,"file":"pattern-input-variants.js","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type PatternInputVariants = {\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 patternInputDefaultVariants: Required<PatternInputVariants> = {\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 * - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e\n * literais): o texto não se mexe quando uma posição vazia é preenchida.\n */\nexport const patternInputVariants = 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 'font-mono',\n\n 'placeholder:text-gray-11/80',\n\n 'border',\n 'rounded-md',\n 'corner-squircle',\n\n '[--pattern-input-focus-color:var(--color-black)]',\n 'dark:[--pattern-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-(--pattern-input-focus-color)',\n 'focus-visible:border-(--pattern-input-focus-color)',\n\n 'data-focused:outline-1',\n 'data-focused:outline-solid',\n 'data-focused:-outline-offset-2',\n 'data-focused:outline-(--pattern-input-focus-color)',\n 'data-focused:border-(--pattern-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:[--pattern-input-focus-color:var(--color-red-9)]',\n 'aria-invalid:border-red-9',\n 'aria-invalid:[--pattern-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: patternInputDefaultVariants.size,\n variant: patternInputDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AAmBA,MAAa,8BAA8D;CACzE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;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,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}

package/dist/components/fields/pattern-input/pattern-input.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { PatternInputVariants } from "./pattern-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/pattern-input/pattern-input.d.ts

package/dist/components/fields/pattern-input/pattern-input.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { patternInputVariants } from "./pattern-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/pattern-input/pattern-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pattern-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/pattern-input/pattern-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 PatternInputVariants,\n patternInputVariants,\n} from './pattern-input-variants';\n\nexport type PatternInputProps = 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 PatternInputVariants & {\n /*\n A máscara: `#` é dígito, `` é letra ou dígito, e o resto é literal (que não pode ser letra\n nem dígito). Numa lista, o campo usa a primeira máscara que aceita o que foi digitado. As\n * prontas estão em `patternInputMasks`.\n /\n mask: string \| readonly string[];\n /\n O valor sem os literais (`\"12345678901\"`), para o modo controlado. `null` deixa o campo\n * vazio.\n /\n value?: string \| null;\n /\n O valor inicial sem os literais, para o modo não controlado.\n /\n defaultValue?: string \| null;\n /\n Chamado a cada mudança feita pelo usuário, com o valor sem os literais, ou `null` com o campo\n * vazio. Mudar o `value` por prop não o chama.\n /\n onValueChange?: (\n value: string \| null,\n details: PatternInputChangeEventDetails,\n ) => void;\n ref?: React.Ref<HTMLInputElement>;\n }\n>;\n\nexport type PatternInputState = BaseInput.State;\n\nexport type PatternInputChangeEventDetails = {\n /\n O texto como aparece no campo, com os literais e o marcador (`\"123.456.7__-__\"`).\n /\n formattedValue: string;\n /\n Se todas as posições da máscara em uso estão preenchidas.\n /\n isComplete: boolean;\n /\n O evento da digitação.\n /\n event: React.SyntheticEvent<HTMLInputElement> \| undefined;\n};\n\n/\n Separa as variantes (`size`, `variant`) das props do campo: elas vão para o cva e não chegam ao\n * `<input>`, onde `size` seria o atributo nativo de largura.\n /\nconst splitVariantProps = createSplitProps<PatternInputVariants>();\n\n/\n Campo com máscara (CPF, CNPJ, CEP, telefone), sobre o `NumberFormatBase` do `react-number-format`\n * e o `Input` do Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da\n * lib.\n \n - Com algo digitado, o campo mostra a máscara inteira, com `_` nas posições vazias. Vazio, ele\n * fica vazio, e o placeholder padrão é a primeira máscara com o marcador.\n * - Numa lista de máscaras, o campo troca de máscara conforme o que foi digitado: no telefone, o\n * 11º dígito passa para celular.\n * - Letras viram maiúsculas. Uma tecla que nenhuma máscara aceita é ignorada; o texto colado é\n * cortado no que couber.\n \n O valor sai pelo `onValueChange`, sem os literais, com `isComplete` dizendo se a máscara foi\n * preenchida. O campo guarda o texto formatado, e é ele que vai no `FormData`, no `onFormSubmit` do\n * `Form` e no `validate` do `Field`.\n \n @example\n * ```tsx\n * <PatternInput\n * aria-label=\"Telefone\"\n * mask={patternInputMasks.phone}\n * onValueChange={(value) => setPhone(value)}\n * />\n * ```\n /\nexport const PatternInput = (props: PatternInputProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'size',\n 'variant',\n ]);\n\n const {\n className,\n mask,\n value,\n defaultValue,\n onValueChange,\n onKeyDown,\n ref,\n ...rest\n } = elementProps;\n\n /* Uma máscara só vira lista de um item: o resto do código trata sempre a lista. /\n const masks = typeof mask === 'string' ? [mask] : mask;\n\n /* Se alguma máscara tem ``: decide o teclado do celular e a maiúscula automática. /\n const acceptsLetters = masks.some((item) => item.includes(''));\n\n return (\n <NumberFormatBase\n data-component=\"PatternInput\"\n customInput={BaseInput}\n getInputRef={ref}\n // O teclado `numeric` do celular não tem letras\n inputMode={acceptsLetters ? 'text' : 'numeric'}\n // O teclado do celular já abre em maiúscula; no desktop, não muda nada\n autoCapitalize={acceptsLetters ? 'characters' : undefined}\n // A primeira máscara só com o marcador; uma prop `placeholder` substitui\n placeholder={formatPattern('', masks[0] ?? '')}\n // Vazio, o texto fica vazio, sem a máscara: o `required` e o placeholder continuam valendo\n format={(rawValue) =>\n rawValue === ''\n ? ''\n : formatPattern(rawValue, selectMask(masks, rawValue) ?? '')\n }\n removeFormatting={(inputValue, changeMeta) =>\n removePatternFormatting(inputValue, changeMeta, masks)\n }\n getCaretBoundary={(formattedValue) =>\n getCaretBoundary(formattedValue, masks)\n }\n isValidInputCharacter={isValidInputCharacter}\n // O pacote chama este `onKeyDown` dentro do dele, antes de guardar a posição do cursor\n onKeyDown={(event) => {\n moveCaretPastLiterals(event);\n\n onKeyDown?.(event);\n }}\n // O pacote liga cada caractere digitado ao do texto formatado para devolver o cursor ao\n // lugar; a letra digitada em minúscula volta em maiúscula e precisa contar como a mesma\n isCharacterSame={({\n currentValue,\n formattedValue,\n currentValueIndex,\n formattedValueIndex,\n }) =>\n currentValue[currentValueIndex]?.toUpperCase() ===\n formattedValue[formattedValueIndex]\n }\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 /* A máscara em uso, para saber se o valor preencheu todas as posições dela. /\n const selectedMask = selectMask(masks, values.value);\n\n onValueChange?.(values.value === '' ? null : values.value, {\n formattedValue: values.formattedValue,\n isComplete:\n selectedMask !== undefined &&\n values.value.length === countSlots(selectedMask),\n event: sourceInfo.event,\n });\n }}\n className={mergeStateClassNames(\n patternInputVariants(variantProps),\n className,\n )}\n {...rest}\n />\n );\n};\n\nPatternInput.displayName = 'PatternInput';\n\n/\n Marca as posições ainda vazias da máscara. Faz parte do texto do campo, então aparece no\n * `FormData` e no `validate` do `Field` (`\"123.4__.___-__\"`), e é por ele que o `getCaretBoundary`\n * acha a primeira posição vazia. Não pode ser letra nem dígito, para o `readRawValue` descartá-lo.\n /\nconst placeholderChar = '_';\n\n/\n Os tokens da máscara e o caractere que cada um aceita; o resto da máscara é literal. O `` só\n testa maiúscula porque o valor já chega convertido pelo `readRawValue`.\n /\nconst tokenPatterns: Record<string, RegExp> = {\n '#': /^\\d$/,\n '': /^[0-9A-Z]$/,\n};\n\n/*\n Tudo que não é letra sem acento nem dígito: os literais, o marcador e o que vier num texto\n * colado (espaço, `ç`, `á`). Tem a flag `g` para o `replace` trocar todas as ocorrências; com ela,\n * o `test` guarda a posição entre chamadas, então esta fica só para o `replace`.\n /\nconst nonAlphanumericPattern = /[^0-9a-z]/gi;\n\n/\n Uma letra sem acento ou um dígito. Aceita minúscula porque a tecla digitada chega como foi\n * digitada: a conversão para maiúscula vem depois, no `readRawValue`.\n /\nconst alphanumericPattern = /^[0-9a-z]$/i;\n\n/\n Se o caractere da máscara é um token (`#` ou ``). Aceita `undefined` para ler uma posição fora da\n máscara (antes do início ou depois do fim), que conta como não token.\n /\nconst isToken = (char: string \| undefined) =>\n char !== undefined && char in tokenPatterns;\n\n/\n Quantas posições a máscara tem para preencher: o tamanho do valor completo, que decide o\n * `isComplete`.\n /\nconst countSlots = (mask: string) => [...mask].filter(isToken).length;\n\n/\n Letras e dígitos do texto, com as letras em maiúscula: os literais e o marcador ficam de fora. Lê\n * tanto o texto do campo quanto o `value` por prop, que pode chegar com literais ou em minúscula.\n /\nconst readRawValue = (text: string) =>\n text.replace(nonAlphanumericPattern, '').toUpperCase();\n\n/\n O que o `NumberFormatBase` trata como caractere do valor (o resto é formatação). Ele usa isso para\n * devolver o cursor ao lugar depois de formatar e para pular a formatação no Backspace e no Delete.\n * O padrão do pacote é só dígito; aqui é qualquer letra ou dígito, e quem decide se a posição aceita\n * o caractere é o `removePatternFormatting`.\n /\nconst isValidInputCharacter = (char: string) => alphanumericPattern.test(char);\n\n/\n Se a máscara aceita o valor: cabe nas posições, e cada caractere passa no token da sua posição.\n * Vale para valor parcial, que só confere as posições já preenchidas: é o que deixa a lista trocar\n * de máscara no meio da digitação.\n /\nconst fitsMask = (mask: string, rawValue: string) => {\n const tokens = [...mask].filter(isToken);\n\n return (\n rawValue.length <= tokens.length &&\n [...rawValue].every((char, index) =>\n tokenPatterns[tokens[index] ?? '']?.test(char),\n )\n );\n};\n\n/\n A primeira máscara da lista que aceita o valor, ou `undefined` se nenhuma aceita. A ordem decide:\n * no telefone, até 10 dígitos as duas aceitam e vale a do fixo, e o 11º só cabe na do celular. Por\n * isso a mais curta vem antes; com a do celular primeiro, a do fixo nunca seria usada.\n /\nconst selectMask = (masks: readonly string[], rawValue: string) =>\n masks.find((mask) => fitsMask(mask, rawValue));\n\n/\n O valor na máscara inteira, com o marcador nas posições que sobram. Com o valor vazio, sai a\n * máscara só com o marcador, que é o placeholder. O que passar das posições da máscara é\n * descartado.\n /\nconst formatPattern = (rawValue: string, mask: string) => {\n let index = 0;\n\n return [...mask]\n .map((char) => {\n if (!isToken(char)) {\n return char;\n }\n\n const valueChar = rawValue[index] ?? placeholderChar;\n\n index += 1;\n\n return valueChar;\n })\n .join('');\n};\n\n/\n O texto do campo no valor sem os literais, que o `NumberFormatBase` repassa ao `format`. Quando\n * nenhuma máscara aceita o resultado, uma tecla é ignorada (fica o valor anterior), e o resto (o\n * texto colado, o `value` por prop) é cortado no maior começo que alguma máscara aceita.\n \n O `changeMeta` vem na digitação e na colagem: `to` é o trecho inserido no texto novo, e\n * `lastValue` o texto antes da mudança. Ele vem `undefined` quando o pacote lê o `value` por prop e\n * quando relê o texto que o `format` acabou de montar.\n /\nconst removePatternFormatting = (\n inputValue: string,\n changeMeta: ChangeMeta \| undefined,\n masks: readonly string[],\n): string => {\n const rawValue = readRawValue(inputValue);\n\n if (selectMask(masks, rawValue) !== undefined) {\n return rawValue;\n }\n\n /* Quantos caracteres a mudança inseriu: um numa tecla, nenhum ao apagar, mais numa colagem. /\n const insertedLength = changeMeta\n ? changeMeta.to.end - changeMeta.to.start\n : 0;\n\n if (changeMeta && insertedLength <= 1) {\n return readRawValue(changeMeta.lastValue);\n }\n\n /* Do maior para o menor, o primeiro começo do valor que alguma máscara aceita. /\n for (let length = rawValue.length - 1; length > 0; length--) {\n const prefix = rawValue.slice(0, length);\n\n if (selectMask(masks, prefix) !== undefined) {\n return prefix;\n }\n }\n\n return '';\n};\n\n/\n No Backspace logo depois de um literal (ou no Delete logo antes), o cursor pula os literais e o\n * marcador antes de a tecla agir: sem isso, ela apagaria só o literal, que o valor ignora, e nada\n * mudaria. Sem letra nem dígito na direção da tecla, o cursor fica onde está. Com texto\n * selecionado, a tecla apaga a seleção, e a função não faz nada.\n \n Funciona porque o `keydown` vem antes de o navegador apagar, e o `NumberFormatBase` chama o\n * `onKeyDown` antes de guardar a posição do cursor que usa para medir a mudança.\n /\nconst moveCaretPastLiterals = (\n event: React.KeyboardEvent<HTMLInputElement>,\n) => {\n const input = event.currentTarget;\n\n const { selectionStart, selectionEnd, value } = input;\n\n if (selectionStart === null \|\| selectionStart !== selectionEnd) {\n return;\n }\n\n let position = selectionStart;\n\n if (event.key === 'Backspace') {\n while (position > 0 && !isValidInputCharacter(value[position - 1] ?? '')) {\n position -= 1;\n }\n\n if (position === 0) {\n return;\n }\n } else if (event.key === 'Delete') {\n while (\n position < value.length &&\n !isValidInputCharacter(value[position] ?? '')\n ) {\n position += 1;\n }\n\n if (position === value.length) {\n return;\n }\n }\n\n if (position !== selectionStart) {\n input.setSelectionRange(position, position);\n }\n};\n\n/\n Onde o cursor pode ficar: junto de uma posição preenchida e na primeira posição vazia. Ele não\n * entra no marcador além dela, nem no meio dos literais.\n \n Devolve uma entrada por posição do cursor, do início ao fim do texto (por isso `length + 1`), com\n * `true` onde ele pode ficar. O `NumberFormatBase` leva o cursor para a posição permitida mais\n * próxima no clique, no foco, nas setas e depois de cada mudança.\n /\nconst getCaretBoundary = (formattedValue: string, masks: readonly string[]) => {\n const mask = selectMask(masks, readRawValue(formattedValue));\n\n /* Vazio, ou sem máscara que aceite o valor, o cursor pode ficar em qualquer posição. /\n if (formattedValue === '' \|\| mask === undefined) {\n return Array.from({ length: formattedValue.length + 1 }, () => true);\n }\n\n /* Se a posição é um token já preenchido, e não o marcador. /\n const isFilledSlot = (position: number) =>\n isToken(mask[position]) && formattedValue[position] !== placeholderChar;\n\n /* Onde entra o próximo caractere; `-1` com a máscara cheia. /\n const firstEmptySlot = [...mask].findIndex(\n (char, position) =>\n isToken(char) && formattedValue[position] === placeholderChar,\n );\n\n /* Permitida: a primeira posição vazia, antes de uma preenchida ou logo depois de uma. */\n return Array.from(\n { length: formattedValue.length + 1 },\n (_, position) =>\n position === firstEmptySlot \|\|\n isFilledSlot(position) \|\|\n isFilledSlot(position - 1),\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"pattern-input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/pattern-input/pattern-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 PatternInputVariants,\n patternInputVariants,\n} from './pattern-input-variants';\n\nexport type PatternInputProps = 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 PatternInputVariants & {\n /*\n A máscara: `#` é dígito, `` é letra ou dígito, e o resto é literal (que não pode ser letra\n nem dígito). Numa lista, o campo usa a primeira máscara que aceita o que foi digitado. As\n * prontas estão em `patternInputMasks`.\n /\n mask: string \| readonly string[];\n /\n O valor sem os literais (`\"12345678901\"`), para o modo controlado. `null` deixa o campo\n * vazio.\n /\n value?: string \| null;\n /\n O valor inicial sem os literais, para o modo não controlado.\n /\n defaultValue?: string \| null;\n /\n Chamado a cada mudança feita pelo usuário, com o valor sem os literais, ou `null` com o campo\n * vazio. Mudar o `value` por prop não o chama.\n /\n onValueChange?: (\n value: string \| null,\n details: PatternInputChangeEventDetails,\n ) => void;\n ref?: React.Ref<HTMLInputElement>;\n }\n>;\n\nexport type PatternInputState = BaseInput.State;\n\nexport type PatternInputChangeEventDetails = {\n /\n O texto como aparece no campo, com os literais e o marcador (`\"123.456.7__-__\"`).\n /\n formattedValue: string;\n /\n Se todas as posições da máscara em uso estão preenchidas.\n /\n isComplete: boolean;\n /\n O evento da digitação.\n /\n event: React.SyntheticEvent<HTMLInputElement> \| undefined;\n};\n\n/\n Separa as variantes (`size`, `variant`) das props do campo: elas vão para o cva e não chegam ao\n * `<input>`, onde `size` seria o atributo nativo de largura.\n /\nconst splitVariantProps = createSplitProps<PatternInputVariants>();\n\n/\n Campo com máscara (CPF, CNPJ, CEP, telefone), sobre o `NumberFormatBase` do `react-number-format`\n * e o `Input` do Base UI: liga-se sozinho ao `Field` quando está dentro de um, como o `Input` da\n * lib.\n \n - Com algo digitado, o campo mostra a máscara inteira, com `_` nas posições vazias. Vazio, ele\n * fica vazio, e o placeholder padrão é a primeira máscara com o marcador.\n * - Numa lista de máscaras, o campo troca de máscara conforme o que foi digitado: no telefone, o\n * 11º dígito passa para celular.\n * - Letras viram maiúsculas. Uma tecla que nenhuma máscara aceita é ignorada; o texto colado é\n * cortado no que couber.\n \n O valor sai pelo `onValueChange`, sem os literais, com `isComplete` dizendo se a máscara foi\n * preenchida. O campo guarda o texto formatado, e é ele que vai no `FormData`, no `onFormSubmit` do\n * `Form` e no `validate` do `Field`.\n \n @example\n * ```tsx\n * <PatternInput\n * aria-label=\"Telefone\"\n * mask={patternInputMasks.phone}\n * onValueChange={(value) => setPhone(value)}\n * />\n * ```\n /\nexport const PatternInput = (props: PatternInputProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'size',\n 'variant',\n ]);\n\n const {\n className,\n mask,\n value,\n defaultValue,\n onValueChange,\n onKeyDown,\n ref,\n ...rest\n } = elementProps;\n\n /* Uma máscara só vira lista de um item: o resto do código trata sempre a lista. /\n const masks = typeof mask === 'string' ? [mask] : mask;\n\n /* Se alguma máscara tem ``: decide o teclado do celular e a maiúscula automática. /\n const acceptsLetters = masks.some((item) => item.includes(''));\n\n return (\n <NumberFormatBase\n data-component=\"PatternInput\"\n customInput={BaseInput}\n getInputRef={ref}\n // O teclado `numeric` do celular não tem letras\n inputMode={acceptsLetters ? 'text' : 'numeric'}\n // O teclado do celular já abre em maiúscula; no desktop, não muda nada\n autoCapitalize={acceptsLetters ? 'characters' : undefined}\n // A primeira máscara só com o marcador; uma prop `placeholder` substitui\n placeholder={formatPattern('', masks[0] ?? '')}\n // Vazio, o texto fica vazio, sem a máscara: o `required` e o placeholder continuam valendo\n format={(rawValue) =>\n rawValue === ''\n ? ''\n : formatPattern(rawValue, selectMask(masks, rawValue) ?? '')\n }\n removeFormatting={(inputValue, changeMeta) =>\n removePatternFormatting(inputValue, changeMeta, masks)\n }\n getCaretBoundary={(formattedValue) =>\n getCaretBoundary(formattedValue, masks)\n }\n isValidInputCharacter={isValidInputCharacter}\n // O pacote chama este `onKeyDown` dentro do dele, antes de guardar a posição do cursor\n onKeyDown={(event) => {\n moveCaretPastLiterals(event);\n\n onKeyDown?.(event);\n }}\n // O pacote liga cada caractere digitado ao do texto formatado para devolver o cursor ao\n // lugar; a letra digitada em minúscula volta em maiúscula e precisa contar como a mesma\n isCharacterSame={({\n currentValue,\n formattedValue,\n currentValueIndex,\n formattedValueIndex,\n }) =>\n currentValue[currentValueIndex]?.toUpperCase() ===\n formattedValue[formattedValueIndex]\n }\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 /* A máscara em uso, para saber se o valor preencheu todas as posições dela. /\n const selectedMask = selectMask(masks, values.value);\n\n onValueChange?.(values.value === '' ? null : values.value, {\n formattedValue: values.formattedValue,\n isComplete:\n selectedMask !== undefined &&\n values.value.length === countSlots(selectedMask),\n event: sourceInfo.event,\n });\n }}\n className={mergeStateClassNames(\n patternInputVariants(variantProps),\n className,\n )}\n {...rest}\n />\n );\n};\n\nPatternInput.displayName = 'PatternInput';\n\n/\n Marca as posições ainda vazias da máscara. Faz parte do texto do campo, então aparece no\n * `FormData` e no `validate` do `Field` (`\"123.4__.___-__\"`), e é por ele que o `getCaretBoundary`\n * acha a primeira posição vazia. Não pode ser letra nem dígito, para o `readRawValue` descartá-lo.\n /\nconst placeholderChar = '_';\n\n/\n Os tokens da máscara e o caractere que cada um aceita; o resto da máscara é literal. O `` só\n testa maiúscula porque o valor já chega convertido pelo `readRawValue`.\n /\nconst tokenPatterns: Record<string, RegExp> = {\n '#': /^\\d$/,\n '': /^[0-9A-Z]$/,\n};\n\n/*\n Tudo que não é letra sem acento nem dígito: os literais, o marcador e o que vier num texto\n * colado (espaço, `ç`, `á`). Tem a flag `g` para o `replace` trocar todas as ocorrências; com ela,\n * o `test` guarda a posição entre chamadas, então esta fica só para o `replace`.\n /\nconst nonAlphanumericPattern = /[^0-9a-z]/gi;\n\n/\n Uma letra sem acento ou um dígito. Aceita minúscula porque a tecla digitada chega como foi\n * digitada: a conversão para maiúscula vem depois, no `readRawValue`.\n /\nconst alphanumericPattern = /^[0-9a-z]$/i;\n\n/\n Se o caractere da máscara é um token (`#` ou ``). Aceita `undefined` para ler uma posição fora da\n máscara (antes do início ou depois do fim), que conta como não token.\n /\nconst isToken = (char: string \| undefined) =>\n char !== undefined && char in tokenPatterns;\n\n/\n Quantas posições a máscara tem para preencher: o tamanho do valor completo, que decide o\n * `isComplete`.\n /\nconst countSlots = (mask: string) => [...mask].filter(isToken).length;\n\n/\n Letras e dígitos do texto, com as letras em maiúscula: os literais e o marcador ficam de fora. Lê\n * tanto o texto do campo quanto o `value` por prop, que pode chegar com literais ou em minúscula.\n /\nconst readRawValue = (text: string) =>\n text.replace(nonAlphanumericPattern, '').toUpperCase();\n\n/\n O que o `NumberFormatBase` trata como caractere do valor (o resto é formatação). Ele usa isso para\n * devolver o cursor ao lugar depois de formatar e para pular a formatação no Backspace e no Delete.\n * O padrão do pacote é só dígito; aqui é qualquer letra ou dígito, e quem decide se a posição aceita\n * o caractere é o `removePatternFormatting`.\n /\nconst isValidInputCharacter = (char: string) => alphanumericPattern.test(char);\n\n/\n Se a máscara aceita o valor: cabe nas posições, e cada caractere passa no token da sua posição.\n * Vale para valor parcial, que só confere as posições já preenchidas: é o que deixa a lista trocar\n * de máscara no meio da digitação.\n /\nconst fitsMask = (mask: string, rawValue: string) => {\n const tokens = [...mask].filter(isToken);\n\n return (\n rawValue.length <= tokens.length &&\n [...rawValue].every((char, index) =>\n tokenPatterns[tokens[index] ?? '']?.test(char),\n )\n );\n};\n\n/\n A primeira máscara da lista que aceita o valor, ou `undefined` se nenhuma aceita. A ordem decide:\n * no telefone, até 10 dígitos as duas aceitam e vale a do fixo, e o 11º só cabe na do celular. Por\n * isso a mais curta vem antes; com a do celular primeiro, a do fixo nunca seria usada.\n /\nconst selectMask = (masks: readonly string[], rawValue: string) =>\n masks.find((mask) => fitsMask(mask, rawValue));\n\n/\n O valor na máscara inteira, com o marcador nas posições que sobram. Com o valor vazio, sai a\n * máscara só com o marcador, que é o placeholder. O que passar das posições da máscara é\n * descartado.\n /\nconst formatPattern = (rawValue: string, mask: string) => {\n let index = 0;\n\n return [...mask]\n .map((char) => {\n if (!isToken(char)) {\n return char;\n }\n\n const valueChar = rawValue[index] ?? placeholderChar;\n\n index += 1;\n\n return valueChar;\n })\n .join('');\n};\n\n/\n O texto do campo no valor sem os literais, que o `NumberFormatBase` repassa ao `format`. Quando\n * nenhuma máscara aceita o resultado, uma tecla é ignorada (fica o valor anterior), e o resto (o\n * texto colado, o `value` por prop) é cortado no maior começo que alguma máscara aceita.\n \n O `changeMeta` vem na digitação e na colagem: `to` é o trecho inserido no texto novo, e\n * `lastValue` o texto antes da mudança. Ele vem `undefined` quando o pacote lê o `value` por prop e\n * quando relê o texto que o `format` acabou de montar.\n /\nconst removePatternFormatting = (\n inputValue: string,\n changeMeta: ChangeMeta \| undefined,\n masks: readonly string[],\n): string => {\n const rawValue = readRawValue(inputValue);\n\n if (selectMask(masks, rawValue) !== undefined) {\n return rawValue;\n }\n\n /* Quantos caracteres a mudança inseriu: um numa tecla, nenhum ao apagar, mais numa colagem. /\n const insertedLength = changeMeta\n ? changeMeta.to.end - changeMeta.to.start\n : 0;\n\n if (changeMeta && insertedLength <= 1) {\n return readRawValue(changeMeta.lastValue);\n }\n\n /* Do maior para o menor, o primeiro começo do valor que alguma máscara aceita. /\n for (let length = rawValue.length - 1; length > 0; length--) {\n const prefix = rawValue.slice(0, length);\n\n if (selectMask(masks, prefix) !== undefined) {\n return prefix;\n }\n }\n\n return '';\n};\n\n/\n No Backspace logo depois de um literal (ou no Delete logo antes), o cursor pula os literais e o\n * marcador antes de a tecla agir: sem isso, ela apagaria só o literal, que o valor ignora, e nada\n * mudaria. Sem letra nem dígito na direção da tecla, o cursor fica onde está. Com texto\n * selecionado, a tecla apaga a seleção, e a função não faz nada.\n \n Funciona porque o `keydown` vem antes de o navegador apagar, e o `NumberFormatBase` chama o\n * `onKeyDown` antes de guardar a posição do cursor que usa para medir a mudança.\n /\nconst moveCaretPastLiterals = (\n event: React.KeyboardEvent<HTMLInputElement>,\n) => {\n const input = event.currentTarget;\n\n const { selectionStart, selectionEnd, value } = input;\n\n if (selectionStart === null \|\| selectionStart !== selectionEnd) {\n return;\n }\n\n let position = selectionStart;\n\n if (event.key === 'Backspace') {\n while (position > 0 && !isValidInputCharacter(value[position - 1] ?? '')) {\n position -= 1;\n }\n\n if (position === 0) {\n return;\n }\n } else if (event.key === 'Delete') {\n while (\n position < value.length &&\n !isValidInputCharacter(value[position] ?? '')\n ) {\n position += 1;\n }\n\n if (position === value.length) {\n return;\n }\n }\n\n if (position !== selectionStart) {\n input.setSelectionRange(position, position);\n }\n};\n\n/\n Onde o cursor pode ficar: junto de uma posição preenchida e na primeira posição vazia. Ele não\n * entra no marcador além dela, nem no meio dos literais.\n \n Devolve uma entrada por posição do cursor, do início ao fim do texto (por isso `length + 1`), com\n * `true` onde ele pode ficar. O `NumberFormatBase` leva o cursor para a posição permitida mais\n * próxima no clique, no foco, nas setas e depois de cada mudança.\n /\nconst getCaretBoundary = (formattedValue: string, masks: readonly string[]) => {\n const mask = selectMask(masks, readRawValue(formattedValue));\n\n /* Vazio, ou sem máscara que aceite o valor, o cursor pode ficar em qualquer posição. /\n if (formattedValue === '' \|\| mask === undefined) {\n return Array.from({ length: formattedValue.length + 1 }, () => true);\n }\n\n /* Se a posição é um token já preenchido, e não o marcador. /\n const isFilledSlot = (position: number) =>\n isToken(mask[position]) && formattedValue[position] !== placeholderChar;\n\n /* Onde entra o próximo caractere; `-1` com a máscara cheia. /\n const firstEmptySlot = [...mask].findIndex(\n (char, position) =>\n isToken(char) && formattedValue[position] === placeholderChar,\n );\n\n /* Permitida: a primeira posição vazia, antes de uma preenchida ou logo depois de uma. */\n return Array.from(\n { length: formattedValue.length + 1 },\n (_, position) =>\n position === firstEmptySlot \|\|\n isFilledSlot(position) \|\|\n isFilledSlot(position - 1),\n );\n};\n"],"mappings":"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"}

package/dist/components/fields/switch/switch-root.d.ts CHANGED Viewed

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

package/dist/components/fields/switch/switch-root.js CHANGED Viewed

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

package/dist/components/fields/switch/switch-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch-root.js","names":["BaseSwitch"],"sources":["../../../../src/components/fields/switch/switch-root.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n type SwitchRootVariants,\n switchRootVariants,\n} from './switch-root-variants';\n\nexport type SwitchRootProps = MergeOverride<\n BaseSwitch.Root.Props,\n SwitchRootVariants\n>;\n\nexport type SwitchRootState = BaseSwitch.Root.State;\n\nexport type SwitchRootChangeEventDetails = BaseSwitch.Root.ChangeEventDetails;\n\nexport type SwitchRootChangeEventReason = BaseSwitch.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<SwitchRootVariants>();\n\n/*\n O trilho do switch, com um `<input>` escondido ao lado para o formulário. Renderiza um `<span>`,\n * para caber dentro de um `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo\n * visível, use `aria-label`.\n \n O `size` e o `colorScheme` chegam à bolinha por CSS variables declaradas aqui: o\n * `Switch.Thumb` não recebe variantes.\n \n @example\n * ```tsx\n * <label>\n * <Switch.Root>\n * <Switch.Thumb />\n * </Switch.Root>\n * Receber notificações por e-mail\n * </label>\n * ```\n */\nexport const SwitchRoot = (props: SwitchRootProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'colorScheme',\n 'size',\n ]);\n\n const { className, ...rest } = elementProps;\n\n return (\n <BaseSwitch.Root\n data-component=\"Switch.Root\"\n className={mergeStateClassNames(\n switchRootVariants(variantProps),\n className,\n )}\n {...rest}\n />\n );\n};\n\nSwitchRoot.displayName = 'Switch.Root';\n"],"mappings":";;;;;;~~AAmBA~~,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;;;;AAoB/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,MACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,MAAZ;EACE,kBAAe;EACf,WAAW,qBACT,mBAAmB,YAAY,GAC/B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"switch-root.js","names":["BaseSwitch"],"sources":["../../../../src/components/fields/switch/switch-root.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport {\n createSplitProps,\n type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n type SwitchRootVariants,\n switchRootVariants,\n} from './switch-root-variants';\n\nexport type SwitchRootProps = MergeOverride<\n BaseSwitch.Root.Props,\n SwitchRootVariants\n>;\n\nexport type SwitchRootState = BaseSwitch.Root.State;\n\nexport type SwitchRootChangeEventDetails = BaseSwitch.Root.ChangeEventDetails;\n\nexport type SwitchRootChangeEventReason = BaseSwitch.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<SwitchRootVariants>();\n\n/*\n O trilho do switch, com um `<input>` escondido ao lado para o formulário. Renderiza um `<span>`,\n * para caber dentro de um `<label>`: é o jeito mais simples de dar nome acessível. Sem rótulo\n * visível, use `aria-label`.\n \n O `size` e o `colorScheme` chegam à bolinha por CSS variables declaradas aqui: o\n * `Switch.Thumb` não recebe variantes.\n \n @example\n * ```tsx\n * <label>\n * <Switch.Root>\n * <Switch.Thumb />\n * </Switch.Root>\n * Receber notificações por e-mail\n * </label>\n * ```\n */\nexport const SwitchRoot = (props: SwitchRootProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, [\n 'colorScheme',\n 'size',\n ]);\n\n const { className, ...rest } = elementProps;\n\n return (\n <BaseSwitch.Root\n data-component=\"Switch.Root\"\n className={mergeStateClassNames(\n switchRootVariants(variantProps),\n className,\n )}\n {...rest}\n />\n );\n};\n\nSwitchRoot.displayName = 'Switch.Root';\n"],"mappings":";;;;;;AAsBA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;;;;AAoB/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,MACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,MAAZ;EACE,kBAAe;EACf,WAAW,qBACT,mBAAmB,YAAY,GAC/B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/fields/textarea/textarea-variants.js CHANGED Viewed

@@ -31,7 +31,7 @@ const textareaVariants = cva([
 	"text-start",
 	"font-normal",
 	"text-gray-12",
-	"placeholder:text-gray-9/90",
+	"placeholder:text-gray-11/80",
 	"border",
 	"rounded-md",
 	"corner-squircle",
@@ -54,9 +54,7 @@ const textareaVariants = cva([
 	"data-invalid:border-red-9",
 	"data-invalid:[--textarea-focus-color:var(--color-red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--textarea-focus-color:var(--color-red-9)]",
-	"user-invalid:border-red-9",
-	"user-invalid:[--textarea-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--textarea-focus-color:var(--color-red-9)]"
 ], {
 	variants: {
 		variant: {

package/dist/components/fields/textarea/textarea-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea-variants.js","names":[],"sources":["../../../../src/components/fields/textarea/textarea-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type TextareaVariants = {\n /*\n Padding e tamanho do texto, com os nomes do `Input`. Sem altura fixa: ela vem de `rows` ou,\n * com `field-sizing-content`, do conteúdo. Em tela de toque, do `2xs` ao `md` o texto sobe para\n * 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 textareaDefaultVariants: Required<TextareaVariants> = {\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` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,\n * do conteúdo;\n * - `block`, `resize-y` e o padding vertical em `--textarea-py`.\n \n Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:\n * - `py`;\n * - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o\n * cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;\n * - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e\n * a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.\n /\nexport const textareaVariants = cva(\n [\n 'relative',\n 'block', // Como `inline-block`, o padrão, deixa um vão embaixo, na linha de base do texto em volta\n 'w-full',\n 'min-h-[calc(1lh+var(--textarea-py)2+2px)]',\n\n 'py-(--textarea-py)',\n 'scroll-pb-(--textarea-py)',\n\n 'appearance-none',\n 'outline-none',\n\n 'resize-y',\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\n 'border',\n 'rounded-md',\n 'corner-squircle',\n\n '[--textarea-focus-color:var(--color-black)]',\n 'dark:[--textarea-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-(--textarea-focus-color)',\n 'focus-visible:border-(--textarea-focus-color)',\n\n 'data-focused:outline-1',\n 'data-focused:outline-solid',\n 'data-focused:-outline-offset-2',\n 'data-focused:outline-(--textarea-focus-color)',\n 'data-focused:border-(--textarea-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:[--textarea-focus-color:var(--color-red-9)]',\n 'aria-invalid:border-red-9',\n 'aria-invalid:[--textarea-focus-color:var(--color-red-9)]',\n ~~'user-invalid:border-red-9',\n 'user-invalid:[--textarea-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 'px-2',\n '[--textarea-py:--spacing(1)]',\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 'px-2',\n '[--textarea-py:--spacing(2)]',\n\n 'text-xs',\n 'any-pointer-coarse:text-base',\n ],\n sm: [\n 'px-2.5',\n '[--textarea-py:--spacing(2)]',\n\n 'text-sm',\n 'any-pointer-coarse:text-base',\n ],\n md: [\n 'px-3',\n '[--textarea-py:--spacing(2)]',\n\n 'text-sm',\n 'any-pointer-coarse:text-base',\n ],\n lg: [\n 'px-4',\n '[--textarea-py:--spacing(3)]',\n\n 'text-base',\n ],\n xl: [\n 'px-4.5',\n '[--textarea-py:--spacing(4)]',\n\n 'text-base',\n ],\n '2xl': [\n 'px-5',\n '[--textarea-py:--spacing(4)]',\n\n 'text-lg',\n ],\n },\n },\n defaultVariants: {\n size: textareaDefaultVariants.size,\n variant: textareaDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AAmBA,MAAa,0BAAsD;CACjE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;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;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,wBAAwB;EAC9B,SAAS,wBAAwB;CACnC;AACF,CACF"}
1	+ {"version":3,"file":"textarea-variants.js","names":[],"sources":["../../../../src/components/fields/textarea/textarea-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type TextareaVariants = {\n /*\n Padding e tamanho do texto, com os nomes do `Input`. Sem altura fixa: ela vem de `rows` ou,\n * com `field-sizing-content`, do conteúdo. Em tela de toque, do `2xs` ao `md` o texto sobe para\n * 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 textareaDefaultVariants: Required<TextareaVariants> = {\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` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,\n * do conteúdo;\n * - `block`, `resize-y` e o padding vertical em `--textarea-py`.\n \n Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:\n * - `py`;\n * - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o\n * cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;\n * - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e\n * a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.\n /\nexport const textareaVariants = cva(\n [\n 'relative',\n 'block', // Como `inline-block`, o padrão, deixa um vão embaixo, na linha de base do texto em volta\n 'w-full',\n 'min-h-[calc(1lh+var(--textarea-py)2+2px)]',\n\n 'py-(--textarea-py)',\n 'scroll-pb-(--textarea-py)',\n\n 'appearance-none',\n 'outline-none',\n\n 'resize-y',\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\n 'border',\n 'rounded-md',\n 'corner-squircle',\n\n '[--textarea-focus-color:var(--color-black)]',\n 'dark:[--textarea-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-(--textarea-focus-color)',\n 'focus-visible:border-(--textarea-focus-color)',\n\n 'data-focused:outline-1',\n 'data-focused:outline-solid',\n 'data-focused:-outline-offset-2',\n 'data-focused:outline-(--textarea-focus-color)',\n 'data-focused:border-(--textarea-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:[--textarea-focus-color:var(--color-red-9)]',\n 'aria-invalid:border-red-9',\n 'aria-invalid:[--textarea-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 'px-2',\n '[--textarea-py:--spacing(1)]',\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 'px-2',\n '[--textarea-py:--spacing(2)]',\n\n 'text-xs',\n 'any-pointer-coarse:text-base',\n ],\n sm: [\n 'px-2.5',\n '[--textarea-py:--spacing(2)]',\n\n 'text-sm',\n 'any-pointer-coarse:text-base',\n ],\n md: [\n 'px-3',\n '[--textarea-py:--spacing(2)]',\n\n 'text-sm',\n 'any-pointer-coarse:text-base',\n ],\n lg: [\n 'px-4',\n '[--textarea-py:--spacing(3)]',\n\n 'text-base',\n ],\n xl: [\n 'px-4.5',\n '[--textarea-py:--spacing(4)]',\n\n 'text-base',\n ],\n '2xl': [\n 'px-5',\n '[--textarea-py:--spacing(4)]',\n\n 'text-lg',\n ],\n },\n },\n defaultVariants: {\n size: textareaDefaultVariants.size,\n variant: textareaDefaultVariants.variant,\n },\n },\n);\n"],"mappings":";;AAmBA,MAAa,0BAAsD;CACjE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;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;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,wBAAwB;EAC9B,SAAS,wBAAwB;CACnC;AACF,CACF"}

package/dist/components/fields/textarea/textarea.d.ts CHANGED Viewed

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

package/dist/components/fields/textarea/textarea.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { textareaVariants } from "./textarea-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";
 //#region src/components/fields/textarea/textarea.tsx

package/dist/components/fields/textarea/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","names":["BaseInput"],"sources":["../../../../src/components/fields/textarea/textarea.tsx"],"sourcesContent":["import { Input as BaseInput } from '@base-ui/react/input';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type React from 'react';\nimport { mergeStateClassNames } from '#utils';\nimport { type TextareaVariants, textareaVariants } from './textarea-variants';\n\n/*\n As props do `<textarea>`, com as do Base UI por cima: o `Input` do Base UI tipa as props como as\n * de um `<input>`, sem `rows`, `cols` e `wrap`.\n /\nexport type TextareaProps = MergeOverride<\n React.ComponentPropsWithRef<'textarea'>,\n Pick<BaseInput.Props, 'className' \| 'style' \| 'render' \| 'onValueChange'> &\n TextareaVariants\n>;\n\nexport type TextareaState = BaseInput.State;\n\nexport type TextareaChangeEventDetails = BaseInput.ChangeEventDetails;\n\nexport type TextareaChangeEventReason = BaseInput.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<TextareaVariants>();\n\n/\n O `Input` do Base UI renderizando um `<textarea>`: liga-se sozinho ao `Field` quando está dentro\n * de um, como o `Input` da lib. Fora dele, o nome acessível vem de um `<label>` (em volta ou por\n * `htmlFor`) ou de `aria-label`.\n \n O Enter quebra a linha: o Base UI só trata o Enter como envio num `<input>`.\n \n A altura vem de `rows`, com o mínimo de uma linha. Para crescer com o conteúdo,\n * `field-sizing-content` com um `min-h-` e um `max-h-` na `className`: com ele, o `rows` deixa\n * de valer. O redimensionamento manual é vertical (`resize-y`); `resize-none` desliga.\n \n @example\n * ```tsx\n * <Textarea\n * aria-label=\"Observações\"\n * rows={4}\n * />\n * ```\n */\nexport const Textarea = (props: TextareaProps) => {\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=\"Textarea\"\n render={<textarea />}\n className={mergeStateClassNames(\n textareaVariants(variantProps),\n className,\n )}\n // O Base UI tipa os handlers com eventos de `<input>`, mas só repassa o evento do elemento que\n // renderiza: aqui, o do `<textarea~~>`.\~~n {...(rest as BaseInput.Props)}\n />\n );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":";;;;;;~~AAsBA~~,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;AAqB7D,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAD;EACE,kBAAe;EACf,QAAQ,oBAAC,YAAD,CAAW,CAAA;EACnB,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;~~EAGA~~,GAAK;CACN,CAAA;AAEL;AAEA,SAAS,cAAc"}
1	+ {"version":3,"file":"textarea.js","names":["BaseInput"],"sources":["../../../../src/components/fields/textarea/textarea.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 { mergeStateClassNames } from '#utils';\nimport { type TextareaVariants, textareaVariants } from './textarea-variants';\n\n/*\n As props do `<textarea>`, com as do Base UI por cima: o `Input` do Base UI tipa as props como as\n * de um `<input>`, sem `rows`, `cols` e `wrap`.\n /\nexport type TextareaProps = MergeOverride<\n React.ComponentPropsWithRef<'textarea'>,\n Pick<BaseInput.Props, 'className' \| 'style' \| 'render' \| 'onValueChange'> &\n TextareaVariants\n>;\n\nexport type TextareaState = BaseInput.State;\n\nexport type TextareaChangeEventDetails = BaseInput.ChangeEventDetails;\n\nexport type TextareaChangeEventReason = BaseInput.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<TextareaVariants>();\n\n/\n O `Input` do Base UI renderizando um `<textarea>`: liga-se sozinho ao `Field` quando está dentro\n * de um, como o `Input` da lib. Fora dele, o nome acessível vem de um `<label>` (em volta ou por\n * `htmlFor`) ou de `aria-label`.\n \n O Enter quebra a linha: o Base UI só trata o Enter como envio num `<input>`.\n \n A altura vem de `rows`, com o mínimo de uma linha. Para crescer com o conteúdo,\n * `field-sizing-content` com um `min-h-` e um `max-h-` na `className`: com ele, o `rows` deixa\n * de valer. O redimensionamento manual é vertical (`resize-y`); `resize-none` desliga.\n \n @example\n * ```tsx\n * <Textarea\n * aria-label=\"Observações\"\n * rows={4}\n * />\n * ```\n */\nexport const Textarea = (props: TextareaProps) => {\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=\"Textarea\"\n render={<textarea />}\n className={mergeStateClassNames(\n textareaVariants(variantProps),\n className,\n )}\n // O Base UI tipa os handlers com eventos de `<input>`, mas só repassa o evento do elemento que\n // renderiza: aqui, o do `<textarea>`. O cast fica porque a saída sem ele (o `render` como\n // função, com as props divididas entre o Base UI e o `<textarea>`) arriscaria a ligação\n // com o `Field`, que lê o valor pelas props do Base UI.\n // biome-ignore lint/nursery/noUnsafeTypeAssertion: ver o comentário acima\n {...(rest as BaseInput.Props)}\n />\n );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":";;;;;;AAyBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;AAqB7D,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAD;EACE,kBAAe;EACf,QAAQ,oBAAC,YAAD,CAAW,CAAA;EACnB,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;EAMA,GAAK;CACN,CAAA;AAEL;AAEA,SAAS,cAAc"}

package/dist/components/layout/center-absolute/center-absolute.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { CenterAbsoluteVariants } from "./center-absolute-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/center-absolute/center-absolute.d.ts
 export type CenterAbsoluteProps = MergeOverride<useRender.ComponentProps<'div'>, CenterAbsoluteVariants>;

package/dist/components/layout/center-absolute/center-absolute.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { centerAbsoluteVariants } from "./center-absolute-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/layout/center-absolute/center-absolute.tsx
 const splitVariantProps = createSplitProps();

package/dist/components/layout/center-absolute/center-absolute.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"center-absolute.js","names":[],"sources":["../../../../src/components/layout/center-absolute/center-absolute.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type CenterAbsoluteVariants,\n centerAbsoluteVariants,\n} from './center-absolute-variants';\n\nexport type CenterAbsoluteProps = MergeOverride<\n useRender.ComponentProps<'div'>,\n CenterAbsoluteVariants\n>;\n\nconst splitVariantProps = createSplitProps<CenterAbsoluteVariants>();\n\n/*\n Centraliza o elemento com `position: absolute` sobre o ancestral posicionado mais próximo,\n * que precisa ter `relative` (ou outro `position`) para servir de referência.\n */\nexport const CenterAbsolute = (props: CenterAbsoluteProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, ['axis']);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'CenterAbsolute',\n className: mergeTwClassNames(\n centerAbsoluteVariants(variantProps),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nCenterAbsolute.displayName = 'CenterAbsolute';\n"],"mappings":";;;;;~~AAaA~~,MAAM,oBAAoB,iBAAyC;;;;;AAMnE,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,uBAAuB,YAAY,GACnC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}
1	+ {"version":3,"file":"center-absolute.js","names":[],"sources":["../../../../src/components/layout/center-absolute/center-absolute.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n createSplitProps,\n type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport {\n type CenterAbsoluteVariants,\n centerAbsoluteVariants,\n} from './center-absolute-variants';\n\nexport type CenterAbsoluteProps = MergeOverride<\n useRender.ComponentProps<'div'>,\n CenterAbsoluteVariants\n>;\n\nconst splitVariantProps = createSplitProps<CenterAbsoluteVariants>();\n\n/*\n Centraliza o elemento com `position: absolute` sobre o ancestral posicionado mais próximo,\n * que precisa ter `relative` (ou outro `position`) para servir de referência.\n */\nexport const CenterAbsolute = (props: CenterAbsoluteProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, ['axis']);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'CenterAbsolute',\n className: mergeTwClassNames(\n centerAbsoluteVariants(variantProps),\n className,\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nCenterAbsolute.displayName = 'CenterAbsolute';\n"],"mappings":";;;;;AAgBA,MAAM,oBAAoB,iBAAyC;;;;;AAMnE,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,uBAAuB,YAAY,GACnC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/components/layout/float/float-variants.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ export declare const floatDefaultVariants: Required<FloatVariants>;
  * de sinal (`rtl:`), para o elemento continuar metade dentro e metade fora do canto.
  */
 export declare const floatVariants: (props?: ({
-  placement?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end" | null | undefined;
+  placement?: "top-center" | "bottom-center" | "top-start" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=float-variants.d.ts.map

package/dist/components/layout/float/float.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { FloatVariants } from "./float-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/layout/float/float.d.ts
 export type FloatProps = MergeOverride<useRender.ComponentProps<'div'>, FloatVariants>;

package/dist/components/layout/float/float.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { floatVariants } from "./float-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/layout/float/float.tsx
 const splitVariantProps = createSplitProps();

package/dist/components/layout/float/float.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"float.js","names":[],"sources":["../../../../src/components/layout/float/float.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type FloatVariants, floatVariants } from './float-variants';\n\nexport type FloatProps = MergeOverride<\n useRender.ComponentProps<'div'>,\n FloatVariants\n>;\n\nconst splitVariantProps = createSplitProps<FloatVariants>();\n\n/*\n Prende o elemento num canto ou borda do ancestral posicionado mais próximo (badge sobre um\n * avatar, por exemplo). O ancestral precisa ter `relative` para servir de referência.\n */\nexport const Float = (props: FloatProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'Float',\n className: mergeTwClassNames(floatVariants(variantProps), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nFloat.displayName = 'Float';\n"],"mappings":";;;;;~~AAUA~~,MAAM,oBAAoB,iBAAgC;;;;;AAM1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}
1	+ {"version":3,"file":"float.js","names":[],"sources":["../../../../src/components/layout/float/float.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n createSplitProps,\n type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type FloatVariants, floatVariants } from './float-variants';\n\nexport type FloatProps = MergeOverride<\n useRender.ComponentProps<'div'>,\n FloatVariants\n>;\n\nconst splitVariantProps = createSplitProps<FloatVariants>();\n\n/*\n Prende o elemento num canto ou borda do ancestral posicionado mais próximo (badge sobre um\n * avatar, por exemplo). O ancestral precisa ter `relative` para servir de referência.\n */\nexport const Float = (props: FloatProps) => {\n const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n const { render, className, ...rest } = elementProps;\n\n const baseProps = {\n 'data-component': 'Float',\n className: mergeTwClassNames(floatVariants(variantProps), className),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nFloat.displayName = 'Float';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;;AAM1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-root.d.ts CHANGED Viewed

@@ -1,6 +1,17 @@
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-root.d.ts
-export type ScrollAreaRootProps = ScrollArea.Root.Props;
+export type ScrollAreaRootProps = MergeOverride<ScrollArea.Root.Props, {
+  /**
+   * Quando as barras aparecem. Com `'auto'`, no hover e na rolagem. Com `'always'`, ficam sempre
+   * visíveis com mouse, com a trilha de 16px; no toque, continuam sumindo. Serve a uma área de
+   * dados, em que a barra mostra a posição e que há mais conteúdo ao lado. Vale para as barras
+   * filhas diretas do `Root`, não para as de um `ScrollArea` aninhado.
+   *
+   * @default 'auto'
+   */
+  scrollbars?: 'auto' | 'always';
+}>;
 export type ScrollAreaRootState = ScrollArea.Root.State;
 /**
  * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:
@@ -14,9 +25,11 @@ export type ScrollAreaRootState = ScrollArea.Root.State;
  *
  * | Variável | Controla | Padrão |
  * | --- | --- | --- |
- * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |
+ * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 12px com mouse, 16px com mouse e `scrollbars="always"` |
  * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |
- * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |
+ * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda no toque, 6px com mouse |
+ *
+ * A visibilidade e a espessura de `scrollbars="always"` são explicadas no `Scrollbar`.
  *
  * Como funciona:
  * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores