@lucasbernardosn/react-ui 0.1.0 → 0.3.0

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

@@ -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"}
+{"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

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

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

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

@@ -24,7 +24,7 @@ export declare const patternInputDefaultVariants: Required<PatternInputVariants>
  *   literais): o texto não se mexe quando uma posição vazia é preenchida.
  */
 export declare const patternInputVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

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

@@ -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"}
+{"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

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

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

@@ -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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"}
+{"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

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

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

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

@@ -31,7 +31,7 @@ export declare const textareaDefaultVariants: Required<TextareaVariants>;
  *   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.
  */
 export declare const textareaVariants: (props?: ({
-  variant?: "outline" | "subtle" | null | undefined;
+  variant?: "subtle" | "outline" | null | undefined;
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -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: {
@@ -76,7 +74,7 @@ const textareaVariants = cva([
 			],
 			xs: [
 				"px-2",
-				"[--textarea-py:--spacing(1.5)]",
+				"[--textarea-py:--spacing(2)]",
 				"text-xs",
 				"any-pointer-coarse:text-base"
 			],
@@ -99,7 +97,7 @@ const textareaVariants = cva([
 			],
 			xl: [
 				"px-4.5",
-				"[--textarea-py:--spacing(3.5)]",
+				"[--textarea-py:--spacing(4)]",
 				"text-base"
 			],
 			"2xl": [

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

@@ -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(1.5)]',\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(3.5)]',\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"}
+{"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

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

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

@@ -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"}
+{"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

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

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

@@ -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"}
+{"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

@@ -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?: "bottom-start" | "bottom-end" | "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-center" | 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

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

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

@@ -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"}
+{"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-viewport.d.ts

@@ -1,5 +1,5 @@
 import { ScrollAreaViewportVariants } from "./scroll-area-viewport-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-viewport.d.ts
 export type ScrollAreaViewportProps = MergeOverride<ScrollArea.Viewport.Props, ScrollAreaViewportVariants & {

package/dist/components/layout/scroll-area/scroll-area-viewport.js

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { scrollAreaViewportVariants } from "./scroll-area-viewport-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-viewport.tsx

package/dist/components/layout/scroll-area/scroll-area-viewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-viewport.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type ScrollAreaViewportVariants,\n  scrollAreaViewportVariants,\n} from './scroll-area-viewport-variants';\n\nexport type ScrollAreaViewportProps = MergeOverride<\n  BaseScrollArea.Viewport.Props,\n  ScrollAreaViewportVariants & {\n    /**\n     * Mostra o anel de foco do tema quando o viewport recebe foco pelo teclado.\n     *\n     * O Base UI coloca o viewport na ordem de tabulação sempre que há transbordamento, para que\n     * dê para rolar pelo teclado. Desligado, **nenhuma** indicação de foco aparece — nem o\n     * contorno padrão do navegador —, mas o viewport continua focável: só desligue quando outra\n     * coisa já mostrar onde está o foco.\n     *\n     * O anel é pintado pelo `Root` (`focus-ring-inside`), não por este elemento: com `fade`, a\n     * máscara apagaria qualquer coisa que o viewport pintasse. É o arranjo da demo oficial de\n     * fade. O viewport só se marca com `data-focus-ring`.\n     *\n     * @default true\n     */\n    focusRing?: boolean;\n  }\n>;\n\nexport type ScrollAreaViewportState = BaseScrollArea.Viewport.State;\n\nconst splitVariantProps = createSplitProps<ScrollAreaViewportVariants>();\n\n/**\n * O elemento que de fato rola. O Base UI aplica `overflow: scroll` inline, esconde a barra\n * nativa e põe o elemento na ordem de tabulação quando há transbordamento.\n *\n * Segue a altura do `Root`. Para crescer até um limite e rolar a partir dele, o `max-h-*` vai\n * **aqui**, não no `Root`: percentual não resolve contra `max-height`.\n *\n * Sem `overscroll-behavior` de propósito: `contain` cortaria o gesto antes da página, e é ele\n * que dispara o pull-to-refresh quando esta área é o conteúdo principal. Scroller sobreposto\n * (drawer, popover) declara `overscroll-contain` por conta própria.\n */\nexport const ScrollAreaViewport = (props: ScrollAreaViewportProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['fade']);\n\n  const { className, focusRing = true, ...rest } = elementProps;\n\n  return (\n    <BaseScrollArea.Viewport\n      data-component=\"ScrollArea.Viewport\"\n      data-focus-ring={focusRing ? '' : undefined}\n      className={mergeStateClassNames(\n        scrollAreaViewportVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollArea.Viewport';\n"],"mappings":";;;;;;AA+BA,MAAM,oBAAoB,iBAA6C;;;;;;;;;;;;AAavE,MAAa,sBAAsB,UAAmC;CACpE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,WAAW,YAAY,MAAM,GAAG,SAAS;CAEjD,OACE,oBAACA,WAAe,UAAhB;EACE,kBAAe;EACf,mBAAiB,YAAY,KAAK,KAAA;EAClC,WAAW,qBACT,2BAA2B,YAAY,GACvC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"scroll-area-viewport.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-viewport.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type ScrollAreaViewportVariants,\n  scrollAreaViewportVariants,\n} from './scroll-area-viewport-variants';\n\nexport type ScrollAreaViewportProps = MergeOverride<\n  BaseScrollArea.Viewport.Props,\n  ScrollAreaViewportVariants & {\n    /**\n     * Mostra o anel de foco do tema quando o viewport recebe foco pelo teclado.\n     *\n     * O Base UI coloca o viewport na ordem de tabulação sempre que há transbordamento, para que\n     * dê para rolar pelo teclado. Desligado, **nenhuma** indicação de foco aparece — nem o\n     * contorno padrão do navegador —, mas o viewport continua focável: só desligue quando outra\n     * coisa já mostrar onde está o foco.\n     *\n     * O anel é pintado pelo `Root` (`focus-ring-inside`), não por este elemento: com `fade`, a\n     * máscara apagaria qualquer coisa que o viewport pintasse. É o arranjo da demo oficial de\n     * fade. O viewport só se marca com `data-focus-ring`.\n     *\n     * @default true\n     */\n    focusRing?: boolean;\n  }\n>;\n\nexport type ScrollAreaViewportState = BaseScrollArea.Viewport.State;\n\nconst splitVariantProps = createSplitProps<ScrollAreaViewportVariants>();\n\n/**\n * O elemento que de fato rola. O Base UI aplica `overflow: scroll` inline, esconde a barra\n * nativa e põe o elemento na ordem de tabulação quando há transbordamento.\n *\n * Segue a altura do `Root`. Para crescer até um limite e rolar a partir dele, o `max-h-*` vai\n * **aqui**, não no `Root`: percentual não resolve contra `max-height`.\n *\n * Sem `overscroll-behavior` de propósito: `contain` cortaria o gesto antes da página, e é ele\n * que dispara o pull-to-refresh quando esta área é o conteúdo principal. Scroller sobreposto\n * (drawer, popover) declara `overscroll-contain` por conta própria.\n */\nexport const ScrollAreaViewport = (props: ScrollAreaViewportProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['fade']);\n\n  const { className, focusRing = true, ...rest } = elementProps;\n\n  return (\n    <BaseScrollArea.Viewport\n      data-component=\"ScrollArea.Viewport\"\n      data-focus-ring={focusRing ? '' : undefined}\n      className={mergeStateClassNames(\n        scrollAreaViewportVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollArea.Viewport';\n"],"mappings":";;;;;;AAkCA,MAAM,oBAAoB,iBAA6C;;;;;;;;;;;;AAavE,MAAa,sBAAsB,UAAmC;CACpE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,WAAW,YAAY,MAAM,GAAG,SAAS;CAEjD,OACE,oBAACA,WAAe,UAAhB;EACE,kBAAe;EACf,mBAAiB,YAAY,KAAK,KAAA;EAClC,WAAW,qBACT,2BAA2B,YAAY,GACvC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,mBAAmB,cAAc"}

package/dist/components/layout/separator/separator.d.ts

@@ -1,5 +1,5 @@
 import { SeparatorVariants } from "./separator-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/components/layout/separator/separator.d.ts
 export type SeparatorProps = MergeOverride<Separator$1.Props, SeparatorVariants>;

package/dist/components/layout/separator/separator.js

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

package/dist/components/layout/separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["BaseSeparator"],"sources":["../../../../src/components/layout/separator/separator.tsx"],"sourcesContent":["import { Separator as BaseSeparator } from '@base-ui/react/separator';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type SeparatorVariants,\n  separatorVariants,\n} from './separator-variants';\n\nexport type SeparatorProps = MergeOverride<\n  BaseSeparator.Props,\n  SeparatorVariants\n>;\n\nexport type SeparatorState = BaseSeparator.State;\n\nconst splitVariantProps = createSplitProps<SeparatorVariants>();\n\n/**\n * Linha que divide conteúdo. O Base UI escreve `role=\"separator\"` e `aria-orientation`.\n *\n * `orientation` (padrão `horizontal`) é prop do Base UI e chega às classes pelo\n * `data-orientation`. Na vertical, a linha estica pela altura do pai flex (`self-stretch`);\n * fora de um flex, a altura fica com quem usa.\n */\nexport const Separator = (props: SeparatorProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseSeparator\n      data-component=\"Separator\"\n      className={mergeStateClassNames(\n        separatorVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSeparator.displayName = 'Separator';\n"],"mappings":";;;;;;AAeA,MAAM,oBAAoB,iBAAoC;;;;;;;;AAS9D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CACD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAD;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}
+{"version":3,"file":"separator.js","names":["BaseSeparator"],"sources":["../../../../src/components/layout/separator/separator.tsx"],"sourcesContent":["import { Separator as BaseSeparator } from '@base-ui/react/separator';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type SeparatorVariants,\n  separatorVariants,\n} from './separator-variants';\n\nexport type SeparatorProps = MergeOverride<\n  BaseSeparator.Props,\n  SeparatorVariants\n>;\n\nexport type SeparatorState = BaseSeparator.State;\n\nconst splitVariantProps = createSplitProps<SeparatorVariants>();\n\n/**\n * Linha que divide conteúdo. O Base UI escreve `role=\"separator\"` e `aria-orientation`.\n *\n * `orientation` (padrão `horizontal`) é prop do Base UI e chega às classes pelo\n * `data-orientation`. Na vertical, a linha estica pela altura do pai flex (`self-stretch`);\n * fora de um flex, a altura fica com quem usa.\n */\nexport const Separator = (props: SeparatorProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseSeparator\n      data-component=\"Separator\"\n      className={mergeStateClassNames(\n        separatorVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSeparator.displayName = 'Separator';\n"],"mappings":";;;;;;AAkBA,MAAM,oBAAoB,iBAAoC;;;;;;;;AAS9D,MAAa,aAAa,UAA0B;CAClD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CACD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAD;EACE,kBAAe;EACf,WAAW,qBACT,kBAAkB,YAAY,GAC9B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/layout/splitter/splitter-panel.d.ts

@@ -1,4 +1,4 @@
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-panel.d.ts

package/dist/components/layout/splitter/splitter-panel.js

@@ -1,6 +1,6 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { useSplitterContext } from "./use-splitter-context.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import * as ZagSplitter from "@zag-js/splitter";
 //#region src/components/layout/splitter/splitter-panel.tsx

package/dist/components/layout/splitter/splitter-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitter-panel.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-panel.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Panel`: o `id` do painel e as props do elemento\n * renderizado.\n */\nexport type SplitterPanelProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  ZagSplitter.PanelProps\n>;\n\nconst splitPanelProps = createSplitProps<ZagSplitter.PanelProps>();\n\n/**\n * Painel redimensionável.\n *\n * O `id` liga o painel à entrada de mesmo `id` em `panels`, no `Splitter.Root`\n * — não é o `id` do elemento, que o Zag gera.\n *\n * O Zag escreve inline o tamanho (`flex-grow` em %, `flex-basis: 0`) e\n * `overflow: hidden`: conteúdo que rola precisa de uma área de rolagem dentro.\n * Um `style` passado aqui sobrescreve o do Zag chave a chave.\n *\n * O painel não declara `display`, então `hidden` o esconde, e os visíveis\n * dividem o espaço na proporção dos próprios tamanhos. O Zag continua contando\n * o escondido: esconda junto o puxador vizinho.\n */\nexport const SplitterPanel = (props: SplitterPanelProps) => {\n  const [panelProps, elementProps] = splitPanelProps(\n    props,\n    ZagSplitter.panelProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getPanelProps(panelProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.Panel',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterPanel.displayName = 'Splitter.Panel';\n"],"mappings":";;;;;;AAeA,MAAM,kBAAkB,iBAAyC;;;;;;;;;;;;;;;AAgBjE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,YAAY,gBAAgB,gBACjC,OACA,YAAY,UACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,cAAc,UAAU;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,cAAc,cAAc"}
+{"version":3,"file":"splitter-panel.js","names":[],"sources":["../../../../src/components/layout/splitter/splitter-panel.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { mergeTwClassNames } from '#utils';\nimport { useSplitterContext } from './use-splitter-context';\n\n/**\n * Props do `Splitter.Panel`: o `id` do painel e as props do elemento\n * renderizado.\n */\nexport type SplitterPanelProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  ZagSplitter.PanelProps\n>;\n\nconst splitPanelProps = createSplitProps<ZagSplitter.PanelProps>();\n\n/**\n * Painel redimensionável.\n *\n * O `id` liga o painel à entrada de mesmo `id` em `panels`, no `Splitter.Root`\n * — não é o `id` do elemento, que o Zag gera.\n *\n * O Zag escreve inline o tamanho (`flex-grow` em %, `flex-basis: 0`) e\n * `overflow: hidden`: conteúdo que rola precisa de uma área de rolagem dentro.\n * Um `style` passado aqui sobrescreve o do Zag chave a chave.\n *\n * O painel não declara `display`, então `hidden` o esconde, e os visíveis\n * dividem o espaço na proporção dos próprios tamanhos. O Zag continua contando\n * o escondido: esconda junto o puxador vizinho.\n */\nexport const SplitterPanel = (props: SplitterPanelProps) => {\n  const [panelProps, elementProps] = splitPanelProps(\n    props,\n    ZagSplitter.panelProps,\n  );\n\n  const { render, className, ...rest } = elementProps;\n\n  const splitter = useSplitterContext();\n\n  const zagProps = splitter.getPanelProps(panelProps);\n\n  const baseProps = {\n    'data-component': 'Splitter.Panel',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nSplitterPanel.displayName = 'Splitter.Panel';\n"],"mappings":";;;;;;AAkBA,MAAM,kBAAkB,iBAAyC;;;;;;;;;;;;;;;AAgBjE,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,YAAY,gBAAgB,gBACjC,OACA,YAAY,UACd;CAEA,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,cAAc,UAAU;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,cAAc,cAAc"}