@lucasbernardosn/react-ui 0.4.0 → 0.5.0

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

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

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

@@ -18,9 +18,10 @@ export type InputVariants = {
 export declare const inputDefaultVariants: Required<InputVariants>;
 /**
  * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o
- * `PatternInput`, o trigger do `Select` e o `Autocomplete.Input` copiam estas classes, cada um com as suas diferenças
- * (tabela no README de `fields`). Uma mudança aqui vale para as cópias na mesma rodada. O
- * `PasswordInput` usa o próprio `Input`, mas repete o padding horizontal de cada `size`.
+ * `PatternInput`, o trigger do `Select`, o `Autocomplete.Input`, o campo do `AsyncSelect` e o
+ * `InputGroup` (a caixa) copiam estas classes, cada um com as suas diferenças, explicadas no JSDoc
+ * de cada cópia. Uma mudança aqui vale para as cópias na mesma rodada. O `PasswordInput` usa o
+ * próprio `Input`, mas repete o padding horizontal de cada `size`.
  *
  * O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda
  * com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para

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

@@ -6,9 +6,10 @@ const inputDefaultVariants = {
 };
 /**
 * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o
-* `PatternInput`, o trigger do `Select` e o `Autocomplete.Input` copiam estas classes, cada um com as suas diferenças
-* (tabela no README de `fields`). Uma mudança aqui vale para as cópias na mesma rodada. O
-* `PasswordInput` usa o próprio `Input`, mas repete o padding horizontal de cada `size`.
+* `PatternInput`, o trigger do `Select`, o `Autocomplete.Input`, o campo do `AsyncSelect` e o
+* `InputGroup` (a caixa) copiam estas classes, cada um com as suas diferenças, explicadas no JSDoc
+* de cada cópia. Uma mudança aqui vale para as cópias na mesma rodada. O `PasswordInput` usa o
+* próprio `Input`, mas repete o padding horizontal de cada `size`.
 *
 * O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda
 * com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para
@@ -50,16 +51,16 @@ const inputVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--input-focus-color:var(--color-red-9)]",
+	"data-invalid:[--input-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--input-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--input-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-gray-4", "border-transparent"]
 		},

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

@@ -1 +1 @@
-{"version":3,"file":"input-variants.js","names":[],"sources":["../../../../src/components/fields/input/input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type InputVariants = {\n  /**\n   * Altura, padding e tamanho do texto. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros\n   * controles de formulário. Substitui o atributo nativo `size`: a largura vem do CSS. Em tela\n   * de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const inputDefaultVariants: Required<InputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o\n * `PatternInput`, o trigger do `Select` e o `Autocomplete.Input` copiam estas classes, cada um com as suas diferenças\n * (tabela no README de `fields`). Uma mudança aqui vale para as cópias na mesma rodada. O\n * `PasswordInput` usa o próprio `Input`, mas repete o padding horizontal de cada `size`.\n *\n * O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda\n * com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para\n * `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o\n * `focus-ring-inside` do tema não reage a `data-focused`.\n *\n * Inválido troca `--input-focus-color` e a borda pelo vermelho, pelo `data-invalid` do `Field` ou\n * pelo `aria-invalid` de quem valida fora dele. O `:user-invalid` fica de fora: ele segue a\n * validação nativa por conta própria e pintaria o campo antes de quem valida mostrar o erro (num\n * `Field` com `validationMode=\"onSubmit\"` ou numa lib de formulário).\n */\nexport const inputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-11/80',\n    'data-placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--input-focus-color:var(--color-black)]',\n    'dark:[--input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--input-focus-color)',\n    'focus-visible:border-(--input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--input-focus-color)',\n    'data-focused:border-(--input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--input-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: inputDefaultVariants.size,\n      variant: inputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,uBAAgD;CAC3D,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;;;AAkBA,MAAa,gBAAgB,IAC3B;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,qBAAqB;EAC3B,SAAS,qBAAqB;CAChC;AACF,CACF"}
+{"version":3,"file":"input-variants.js","names":[],"sources":["../../../../src/components/fields/input/input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type InputVariants = {\n  /**\n   * Altura, padding e tamanho do texto. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros\n   * controles de formulário. Substitui o atributo nativo `size`: a largura vem do CSS. Em tela\n   * de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const inputDefaultVariants: Required<InputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o\n * `PatternInput`, o trigger do `Select`, o `Autocomplete.Input`, o campo do `AsyncSelect` e o\n * `InputGroup` (a caixa) copiam estas classes, cada um com as suas diferenças, explicadas no JSDoc\n * de cada cópia. Uma mudança aqui vale para as cópias na mesma rodada. O `PasswordInput` usa o\n * próprio `Input`, mas repete o padding horizontal de cada `size`.\n *\n * O anel de foco é um `outline` de 1px dentro da caixa, colado na borda, que também pinta a borda\n * com `--input-focus-color`: preto no tema claro, branco no escuro. Ele vale para\n * `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o\n * `focus-ring-inside` do tema não reage a `data-focused`.\n *\n * Inválido troca `--input-focus-color` e a borda pelo vermelho, pelo `data-invalid` do `Field` ou\n * pelo `aria-invalid` de quem valida fora dele. O `:user-invalid` fica de fora: ele segue a\n * validação nativa por conta própria e pintaria o campo antes de quem valida mostrar o erro (num\n * `Field` com `validationMode=\"onSubmit\"` ou numa lib de formulário).\n */\nexport const inputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-11/80',\n    'data-placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--input-focus-color:var(--color-black)]',\n    'dark:[--input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--input-focus-color)',\n    'focus-visible:border-(--input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--input-focus-color)',\n    'data-focused:border-(--input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--input-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--input-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: inputDefaultVariants.size,\n      variant: inputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,uBAAgD;CAC3D,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;;;;AAmBA,MAAa,gBAAgB,IAC3B;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,qBAAqB;EAC3B,SAAS,qBAAqB;CAChC;AACF,CACF"}

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

@@ -0,0 +1,3 @@
+import { InputGroupVariants } from "./input-group-variants.js";
+import { InputGroup, InputGroupProps } from "./input-group.js";
+export { InputGroup, type InputGroupProps, type InputGroupVariants };

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

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

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

@@ -0,0 +1,81 @@
+//#region src/components/fields/input-group/input-group-variants.d.ts
+export type InputGroupVariants = {
+  /**
+   * Altura, padding e tamanho do texto, os mesmos do `Input`, e o tamanho do ícone e do texto dos
+   * elementos e addons. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros controles de formulário.
+   * O campo de dentro recebe o mesmo `size`, para o texto bater com o dos elementos.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Fundo e borda da caixa, os mesmos do `Input`. O addon acompanha: sem fundo próprio no
+   * `outline`, mais escuro que a caixa no `subtle`.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'subtle';
+};
+export declare const inputGroupDefaultVariants: Required<InputGroupVariants>;
+/**
+ * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+ * mesmo jeito, explicados lá. A caixa (`data-slot="control"`) é quem desenha a borda, o raio, o
+ * fundo e o anel, e o `<input>` de dentro fica sem caixa. As diferenças:
+ * - `flex items-stretch overflow-hidden`: o campo e os elementos dividem a caixa;
+ * - o estado vem do `<input>` filho, por `has-[]`, porque é nele que o Base UI escreve o
+ *   `data-focused`, o `data-invalid`, o `data-disabled` e o `disabled`. Só o filho direto conta:
+ *   um botão com foco dentro de um elemento não acende o anel;
+ * - `--input-group-focus-color` no lugar de `--input-focus-color`;
+ * - sem `appearance-none`, `text-start` e `placeholder`, que são do `<input>`;
+ * - sem `text-*`: o texto é do campo e dos elementos.
+ *
+ * O campo de dentro (`Input`, `NumberInput`, `PatternInput`, `CurrencyBrlInput`, qualquer
+ * `<input>` filho direto) é neutralizado por seletor: sem borda, raio, fundo nem anel, ocupando o
+ * que sobra da linha (`flex-1 min-w-0`) na altura toda, e sem a opacidade do desabilitado, porque
+ * a caixa já esmaece e as duas juntas dariam 25%. Cada regra da caixa (`.caixa > input`, 0,1,1)
+ * vence a do campo (`.x`, 0,1,0), e as de estado (`.caixa > input:focus-visible`, 0,2,1) vencem as
+ * do campo (`.x:focus-visible`, 0,2,0). Uma classe nova no `inputVariants` que o campo escreva
+ * precisa de um par aqui, ou o campo volta a desenhar a própria caixa dentro do grupo.
+ *
+ * Os elementos ficam sem padding do lado do campo, e o campo reduz o padding daquele lado para
+ * 8px (`ps-2`, `pe-2`): a folga do elemento até o texto é um respiro curto, e não a soma do
+ * padding dos dois.
+ *
+ * O padding horizontal de cada `size` (`--input-group-px`) vem do `inputGroupPaddingVariants`,
+ * que fica no elemento de fora do componente: a própria caixa, ou o `Group` quando há addon, para
+ * o addon, irmão da caixa, ler o mesmo valor.
+ */
+export declare const inputGroupVariants: (props?: ({
+  variant?: "subtle" | "outline" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * O padding horizontal de cada `size`, lido pelos elementos e pelos addons. Fica no elemento de
+ * fora do componente (ver `inputGroupVariants`).
+ */
+export declare const inputGroupPaddingVariants: (props?: ({
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * O elemento (`startElement`, `endElement`) fica dentro da caixa, sem fundo nem borda. Tem padding
+ * só do lado de fora (`placement`): o respiro do lado do campo vem do `ps-2`/`pe-2` que a caixa dá
+ * ao campo, explicado no `inputGroupVariants`. Um botão ocupa o lugar de um ícone com 4px de folga
+ * do lado de fora e o anel de foco encostado nele (offset 0), sem passar da caixa, que corta o que
+ * sai dela.
+ */
+export declare const inputGroupElementVariants: (props?: ({
+  placement?: "start" | "end" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * O addon (`startAddon`, `endAddon`) é uma caixa irmã da caixa do campo, como o campo `outline`
+ * ou `subtle`, com a borda própria e o fundo um passo acima do da caixa para se distinguir dela.
+ * O `Group` tira os cantos de dentro e sobrepõe a borda; no foco, a caixa sobe e a borda dela
+ * aparece inteira sobre a do addon. O anel de foco fica só na caixa, e o inválido também.
+ */
+export declare const inputGroupAddonVariants: (props?: ({
+  variant?: "subtle" | "outline" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=input-group-variants.d.ts.map

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

@@ -0,0 +1,212 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/input-group/input-group-variants.ts
+const inputGroupDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+* mesmo jeito, explicados lá. A caixa (`data-slot="control"`) é quem desenha a borda, o raio, o
+* fundo e o anel, e o `<input>` de dentro fica sem caixa. As diferenças:
+* - `flex items-stretch overflow-hidden`: o campo e os elementos dividem a caixa;
+* - o estado vem do `<input>` filho, por `has-[]`, porque é nele que o Base UI escreve o
+*   `data-focused`, o `data-invalid`, o `data-disabled` e o `disabled`. Só o filho direto conta:
+*   um botão com foco dentro de um elemento não acende o anel;
+* - `--input-group-focus-color` no lugar de `--input-focus-color`;
+* - sem `appearance-none`, `text-start` e `placeholder`, que são do `<input>`;
+* - sem `text-*`: o texto é do campo e dos elementos.
+*
+* O campo de dentro (`Input`, `NumberInput`, `PatternInput`, `CurrencyBrlInput`, qualquer
+* `<input>` filho direto) é neutralizado por seletor: sem borda, raio, fundo nem anel, ocupando o
+* que sobra da linha (`flex-1 min-w-0`) na altura toda, e sem a opacidade do desabilitado, porque
+* a caixa já esmaece e as duas juntas dariam 25%. Cada regra da caixa (`.caixa > input`, 0,1,1)
+* vence a do campo (`.x`, 0,1,0), e as de estado (`.caixa > input:focus-visible`, 0,2,1) vencem as
+* do campo (`.x:focus-visible`, 0,2,0). Uma classe nova no `inputVariants` que o campo escreva
+* precisa de um par aqui, ou o campo volta a desenhar a própria caixa dentro do grupo.
+*
+* Os elementos ficam sem padding do lado do campo, e o campo reduz o padding daquele lado para
+* 8px (`ps-2`, `pe-2`): a folga do elemento até o texto é um respiro curto, e não a soma do
+* padding dos dois.
+*
+* O padding horizontal de cada `size` (`--input-group-px`) vem do `inputGroupPaddingVariants`,
+* que fica no elemento de fora do componente: a própria caixa, ou o `Group` quando há addon, para
+* o addon, irmão da caixa, ler o mesmo valor.
+*/
+const inputGroupVariants = cva([
+	"relative",
+	"flex",
+	"items-stretch",
+	"w-full",
+	"overflow-hidden",
+	"outline-none",
+	"font-normal",
+	"text-gray-12",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"[--input-group-focus-color:var(--color-black)]",
+	"dark:[--input-group-focus-color:var(--color-white)]",
+	"has-[>input:focus-visible]:outline-1",
+	"has-[>input:focus-visible]:outline-solid",
+	"has-[>input:focus-visible]:-outline-offset-2",
+	"has-[>input:focus-visible]:outline-(--input-group-focus-color)",
+	"has-[>input:focus-visible]:border-(--input-group-focus-color)",
+	"has-[>input[data-focused]]:outline-1",
+	"has-[>input[data-focused]]:outline-solid",
+	"has-[>input[data-focused]]:-outline-offset-2",
+	"has-[>input[data-focused]]:outline-(--input-group-focus-color)",
+	"has-[>input[data-focused]]:border-(--input-group-focus-color)",
+	"has-[>input:disabled]:opacity-50",
+	"has-[>input:disabled]:cursor-not-allowed",
+	"has-[>input[data-disabled]]:opacity-50",
+	"has-[>input[data-disabled]]:cursor-not-allowed",
+	"has-[>input[data-invalid]]:border-red-9",
+	"has-[>input[data-invalid]]:[--input-group-focus-color:var(--red-9)]",
+	"has-[>input[aria-invalid=true]]:border-red-9",
+	"has-[>input[aria-invalid=true]]:[--input-group-focus-color:var(--red-9)]",
+	"[&>input]:h-full",
+	"[&>input]:min-w-0",
+	"[&>input]:flex-1",
+	"[&>input]:border-0",
+	"[&>input]:rounded-none",
+	"[&>input]:bg-transparent",
+	"[&>input]:focus-visible:outline-none",
+	"[&>input]:data-focused:outline-none",
+	"[&>input]:disabled:opacity-100",
+	"[&>input]:data-disabled:opacity-100",
+	"has-[>[data-placement=start]]:[&>input]:ps-2",
+	"has-[>[data-placement=end]]:[&>input]:pe-2"
+], {
+	variants: {
+		variant: {
+			outline: [
+				"bg-white/90",
+				"dark:bg-black/90",
+				"border-gray-7"
+			],
+			subtle: ["bg-gray-4", "border-transparent"]
+		},
+		size: {
+			"2xs": ["h-7", "min-w-7"],
+			xs: ["h-8", "min-w-8"],
+			sm: ["h-9", "min-w-9"],
+			md: ["h-10", "min-w-10"],
+			lg: ["h-11", "min-w-11"],
+			xl: ["h-12", "min-w-12"],
+			"2xl": ["h-16", "min-w-16"]
+		}
+	},
+	defaultVariants: {
+		size: inputGroupDefaultVariants.size,
+		variant: inputGroupDefaultVariants.variant
+	}
+});
+/**
+* O padding horizontal de cada `size`, lido pelos elementos e pelos addons. Fica no elemento de
+* fora do componente (ver `inputGroupVariants`).
+*/
+const inputGroupPaddingVariants = cva([], {
+	variants: { size: {
+		"2xs": ["[--input-group-px:--spacing(2)]"],
+		xs: ["[--input-group-px:--spacing(2)]"],
+		sm: ["[--input-group-px:--spacing(2.5)]"],
+		md: ["[--input-group-px:--spacing(3)]"],
+		lg: ["[--input-group-px:--spacing(4)]"],
+		xl: ["[--input-group-px:--spacing(4.5)]"],
+		"2xl": ["[--input-group-px:--spacing(5)]"]
+	} },
+	defaultVariants: { size: inputGroupDefaultVariants.size }
+});
+/**
+* Tamanho do texto e do ícone, o mesmo no elemento e no addon. O ícone é o filho direto, para o
+* `size-*` não alcançar o ícone de um botão dentro dele.
+*/
+const contentSizeClassNames = {
+	"2xs": [
+		"text-xs",
+		"any-pointer-coarse:text-base",
+		"[&>svg]:size-3"
+	],
+	xs: [
+		"text-xs",
+		"any-pointer-coarse:text-base",
+		"[&>svg]:size-3.5"
+	],
+	sm: [
+		"text-sm",
+		"any-pointer-coarse:text-base",
+		"[&>svg]:size-4"
+	],
+	md: [
+		"text-sm",
+		"any-pointer-coarse:text-base",
+		"[&>svg]:size-4"
+	],
+	lg: ["text-base", "[&>svg]:size-5"],
+	xl: ["text-base", "[&>svg]:size-5"],
+	"2xl": ["text-lg", "[&>svg]:size-6"]
+};
+/**
+* O elemento (`startElement`, `endElement`) fica dentro da caixa, sem fundo nem borda. Tem padding
+* só do lado de fora (`placement`): o respiro do lado do campo vem do `ps-2`/`pe-2` que a caixa dá
+* ao campo, explicado no `inputGroupVariants`. Um botão ocupa o lugar de um ícone com 4px de folga
+* do lado de fora e o anel de foco encostado nele (offset 0), sem passar da caixa, que corta o que
+* sai dela.
+*/
+const inputGroupElementVariants = cva([
+	"flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"whitespace-nowrap",
+	"select-none",
+	"text-gray-11",
+	"[--focus-ring-offset:0px]"
+], {
+	variants: {
+		placement: {
+			start: ["ps-(--input-group-px)", "has-[>button]:ps-1"],
+			end: ["pe-(--input-group-px)", "has-[>button]:pe-1"]
+		},
+		size: contentSizeClassNames
+	},
+	defaultVariants: {
+		placement: "start",
+		size: inputGroupDefaultVariants.size
+	}
+});
+/**
+* O addon (`startAddon`, `endAddon`) é uma caixa irmã da caixa do campo, como o campo `outline`
+* ou `subtle`, com a borda própria e o fundo um passo acima do da caixa para se distinguir dela.
+* O `Group` tira os cantos de dentro e sobrepõe a borda; no foco, a caixa sobe e a borda dela
+* aparece inteira sobre a do addon. O anel de foco fica só na caixa, e o inválido também.
+*/
+const inputGroupAddonVariants = cva([
+	"flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"px-(--input-group-px)",
+	"whitespace-nowrap",
+	"select-none",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"text-gray-11"
+], {
+	variants: {
+		variant: {
+			outline: ["bg-gray-3", "border-gray-7"],
+			subtle: ["bg-gray-5", "border-transparent"]
+		},
+		size: contentSizeClassNames
+	},
+	defaultVariants: {
+		variant: inputGroupDefaultVariants.variant,
+		size: inputGroupDefaultVariants.size
+	}
+});
+//#endregion
+export { inputGroupAddonVariants, inputGroupDefaultVariants, inputGroupElementVariants, inputGroupPaddingVariants, inputGroupVariants };
+
+//# sourceMappingURL=input-group-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-variants.js","names":[],"sources":["../../../../src/components/fields/input-group/input-group-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type InputGroupVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`, e o tamanho do ícone e do texto dos\n   * elementos e addons. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros controles de formulário.\n   * O campo de dentro recebe o mesmo `size`, para o texto bater com o dos elementos.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda da caixa, os mesmos do `Input`. O addon acompanha: sem fundo próprio no\n   * `outline`, mais escuro que a caixa no `subtle`.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const inputGroupDefaultVariants: Required<InputGroupVariants> = {\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á. A caixa (`data-slot=\"control\"`) é quem desenha a borda, o raio, o\n * fundo e o anel, e o `<input>` de dentro fica sem caixa. As diferenças:\n * - `flex items-stretch overflow-hidden`: o campo e os elementos dividem a caixa;\n * - o estado vem do `<input>` filho, por `has-[]`, porque é nele que o Base UI escreve o\n *   `data-focused`, o `data-invalid`, o `data-disabled` e o `disabled`. Só o filho direto conta:\n *   um botão com foco dentro de um elemento não acende o anel;\n * - `--input-group-focus-color` no lugar de `--input-focus-color`;\n * - sem `appearance-none`, `text-start` e `placeholder`, que são do `<input>`;\n * - sem `text-*`: o texto é do campo e dos elementos.\n *\n * O campo de dentro (`Input`, `NumberInput`, `PatternInput`, `CurrencyBrlInput`, qualquer\n * `<input>` filho direto) é neutralizado por seletor: sem borda, raio, fundo nem anel, ocupando o\n * que sobra da linha (`flex-1 min-w-0`) na altura toda, e sem a opacidade do desabilitado, porque\n * a caixa já esmaece e as duas juntas dariam 25%. Cada regra da caixa (`.caixa > input`, 0,1,1)\n * vence a do campo (`.x`, 0,1,0), e as de estado (`.caixa > input:focus-visible`, 0,2,1) vencem as\n * do campo (`.x:focus-visible`, 0,2,0). Uma classe nova no `inputVariants` que o campo escreva\n * precisa de um par aqui, ou o campo volta a desenhar a própria caixa dentro do grupo.\n *\n * Os elementos ficam sem padding do lado do campo, e o campo reduz o padding daquele lado para\n * 8px (`ps-2`, `pe-2`): a folga do elemento até o texto é um respiro curto, e não a soma do\n * padding dos dois.\n *\n * O padding horizontal de cada `size` (`--input-group-px`) vem do `inputGroupPaddingVariants`,\n * que fica no elemento de fora do componente: a própria caixa, ou o `Group` quando há addon, para\n * o addon, irmão da caixa, ler o mesmo valor.\n */\nexport const inputGroupVariants = cva(\n  [\n    'relative',\n    'flex',\n    'items-stretch',\n    'w-full',\n    'overflow-hidden',\n\n    'outline-none',\n\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--input-group-focus-color:var(--color-black)]',\n    'dark:[--input-group-focus-color:var(--color-white)]',\n\n    'has-[>input:focus-visible]:outline-1',\n    'has-[>input:focus-visible]:outline-solid',\n    'has-[>input:focus-visible]:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'has-[>input:focus-visible]:outline-(--input-group-focus-color)',\n    'has-[>input:focus-visible]:border-(--input-group-focus-color)',\n\n    'has-[>input[data-focused]]:outline-1',\n    'has-[>input[data-focused]]:outline-solid',\n    'has-[>input[data-focused]]:-outline-offset-2',\n    'has-[>input[data-focused]]:outline-(--input-group-focus-color)',\n    'has-[>input[data-focused]]:border-(--input-group-focus-color)',\n\n    'has-[>input:disabled]:opacity-50',\n    'has-[>input:disabled]:cursor-not-allowed',\n\n    'has-[>input[data-disabled]]:opacity-50',\n    'has-[>input[data-disabled]]:cursor-not-allowed',\n\n    'has-[>input[data-invalid]]:border-red-9',\n    'has-[>input[data-invalid]]:[--input-group-focus-color:var(--red-9)]',\n    'has-[>input[aria-invalid=true]]:border-red-9',\n    'has-[>input[aria-invalid=true]]:[--input-group-focus-color:var(--red-9)]',\n\n    // O campo de dentro, sem a caixa que o grupo já desenha\n    '[&>input]:h-full',\n    '[&>input]:min-w-0',\n    '[&>input]:flex-1',\n\n    '[&>input]:border-0',\n    '[&>input]:rounded-none',\n    '[&>input]:bg-transparent',\n\n    '[&>input]:focus-visible:outline-none',\n    '[&>input]:data-focused:outline-none',\n\n    '[&>input]:disabled:opacity-100',\n    '[&>input]:data-disabled:opacity-100',\n\n    // Elemento ao lado: o respiro até o texto é o do elemento, não a soma dos dois paddings\n    'has-[>[data-placement=start]]:[&>input]:ps-2',\n    'has-[>[data-placement=end]]:[&>input]:pe-2',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': ['h-7', 'min-w-7'],\n        xs: ['h-8', 'min-w-8'],\n        sm: ['h-9', 'min-w-9'],\n        md: ['h-10', 'min-w-10'],\n        lg: ['h-11', 'min-w-11'],\n        xl: ['h-12', 'min-w-12'],\n        '2xl': ['h-16', 'min-w-16'],\n      },\n    },\n    defaultVariants: {\n      size: inputGroupDefaultVariants.size,\n      variant: inputGroupDefaultVariants.variant,\n    },\n  },\n);\n\n/**\n * O padding horizontal de cada `size`, lido pelos elementos e pelos addons. Fica no elemento de\n * fora do componente (ver `inputGroupVariants`).\n */\nexport const inputGroupPaddingVariants = cva([], {\n  variants: {\n    size: {\n      '2xs': ['[--input-group-px:--spacing(2)]'],\n      xs: ['[--input-group-px:--spacing(2)]'],\n      sm: ['[--input-group-px:--spacing(2.5)]'],\n      md: ['[--input-group-px:--spacing(3)]'],\n      lg: ['[--input-group-px:--spacing(4)]'],\n      xl: ['[--input-group-px:--spacing(4.5)]'],\n      '2xl': ['[--input-group-px:--spacing(5)]'],\n    },\n  },\n  defaultVariants: {\n    size: inputGroupDefaultVariants.size,\n  },\n});\n\n/**\n * Tamanho do texto e do ícone, o mesmo no elemento e no addon. O ícone é o filho direto, para o\n * `size-*` não alcançar o ícone de um botão dentro dele.\n */\nconst contentSizeClassNames = {\n  '2xs': ['text-xs', 'any-pointer-coarse:text-base', '[&>svg]:size-3'],\n  xs: ['text-xs', 'any-pointer-coarse:text-base', '[&>svg]:size-3.5'],\n  sm: ['text-sm', 'any-pointer-coarse:text-base', '[&>svg]:size-4'],\n  md: ['text-sm', 'any-pointer-coarse:text-base', '[&>svg]:size-4'],\n  lg: ['text-base', '[&>svg]:size-5'],\n  xl: ['text-base', '[&>svg]:size-5'],\n  '2xl': ['text-lg', '[&>svg]:size-6'],\n} satisfies Record<NonNullable<InputGroupVariants['size']>, string[]>;\n\n/**\n * O elemento (`startElement`, `endElement`) fica dentro da caixa, sem fundo nem borda. Tem padding\n * só do lado de fora (`placement`): o respiro do lado do campo vem do `ps-2`/`pe-2` que a caixa dá\n * ao campo, explicado no `inputGroupVariants`. Um botão ocupa o lugar de um ícone com 4px de folga\n * do lado de fora e o anel de foco encostado nele (offset 0), sem passar da caixa, que corta o que\n * sai dela.\n */\nexport const inputGroupElementVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n\n    'whitespace-nowrap',\n    'select-none',\n\n    'text-gray-11',\n\n    '[--focus-ring-offset:0px]',\n  ],\n  {\n    variants: {\n      placement: {\n        start: ['ps-(--input-group-px)', 'has-[>button]:ps-1'],\n        end: ['pe-(--input-group-px)', 'has-[>button]:pe-1'],\n      },\n      size: contentSizeClassNames,\n    },\n    defaultVariants: {\n      placement: 'start',\n      size: inputGroupDefaultVariants.size,\n    },\n  },\n);\n\n/**\n * O addon (`startAddon`, `endAddon`) é uma caixa irmã da caixa do campo, como o campo `outline`\n * ou `subtle`, com a borda própria e o fundo um passo acima do da caixa para se distinguir dela.\n * O `Group` tira os cantos de dentro e sobrepõe a borda; no foco, a caixa sobe e a borda dela\n * aparece inteira sobre a do addon. O anel de foco fica só na caixa, e o inválido também.\n */\nexport const inputGroupAddonVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'px-(--input-group-px)',\n\n    'whitespace-nowrap',\n    'select-none',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    'text-gray-11',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: ['bg-gray-3', 'border-gray-7'],\n        subtle: ['bg-gray-5', 'border-transparent'],\n      },\n      size: contentSizeClassNames,\n    },\n    defaultVariants: {\n      variant: inputGroupDefaultVariants.variant,\n      size: inputGroupDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;AAoBA,MAAa,4BAA0D;CACrE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,qBAAqB,IAChC;CACE;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO,CAAC,OAAO,SAAS;GACxB,IAAI,CAAC,OAAO,SAAS;GACrB,IAAI,CAAC,OAAO,SAAS;GACrB,IAAI,CAAC,QAAQ,UAAU;GACvB,IAAI,CAAC,QAAQ,UAAU;GACvB,IAAI,CAAC,QAAQ,UAAU;GACvB,OAAO,CAAC,QAAQ,UAAU;EAC5B;CACF;CACA,iBAAiB;EACf,MAAM,0BAA0B;EAChC,SAAS,0BAA0B;CACrC;AACF,CACF;;;;;AAMA,MAAa,4BAA4B,IAAI,CAAC,GAAG;CAC/C,UAAU,EACR,MAAM;EACJ,OAAO,CAAC,iCAAiC;EACzC,IAAI,CAAC,iCAAiC;EACtC,IAAI,CAAC,mCAAmC;EACxC,IAAI,CAAC,iCAAiC;EACtC,IAAI,CAAC,iCAAiC;EACtC,IAAI,CAAC,mCAAmC;EACxC,OAAO,CAAC,iCAAiC;CAC3C,EACF;CACA,iBAAiB,EACf,MAAM,0BAA0B,KAClC;AACF,CAAC;;;;;AAMD,MAAM,wBAAwB;CAC5B,OAAO;EAAC;EAAW;EAAgC;CAAgB;CACnE,IAAI;EAAC;EAAW;EAAgC;CAAkB;CAClE,IAAI;EAAC;EAAW;EAAgC;CAAgB;CAChE,IAAI;EAAC;EAAW;EAAgC;CAAgB;CAChE,IAAI,CAAC,aAAa,gBAAgB;CAClC,IAAI,CAAC,aAAa,gBAAgB;CAClC,OAAO,CAAC,WAAW,gBAAgB;AACrC;;;;;;;;AASA,MAAa,4BAA4B,IACvC;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CAEA;AACF,GACA;CACE,UAAU;EACR,WAAW;GACT,OAAO,CAAC,yBAAyB,oBAAoB;GACrD,KAAK,CAAC,yBAAyB,oBAAoB;EACrD;EACA,MAAM;CACR;CACA,iBAAiB;EACf,WAAW;EACX,MAAM,0BAA0B;CAClC;AACF,CACF;;;;;;;AAQA,MAAa,0BAA0B,IACrC;CACE;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS,CAAC,aAAa,eAAe;GACtC,QAAQ,CAAC,aAAa,oBAAoB;EAC5C;EACA,MAAM;CACR;CACA,iBAAiB;EACf,SAAS,0BAA0B;EACnC,MAAM,0BAA0B;CAClC;AACF,CACF"}

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

@@ -0,0 +1,88 @@
+import { InputGroupVariants } from "./input-group-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+//#region src/components/fields/input-group/input-group.d.ts
+export type InputGroupProps = MergeOverride<React.ComponentProps<'div'>, InputGroupVariants & {
+  /**
+   * O campo: qualquer componente da lib que renderiza um `<input>` direto (`Input`,
+   * `NumberInput`, `PatternInput`, `CurrencyBrlInput`).
+   */
+  children: React.ReactNode;
+  /**
+   * Ícone, texto ou botão dentro da borda, antes do campo.
+   */
+  startElement?: React.ReactNode;
+  /**
+   * Ícone, texto ou botão dentro da borda, depois do campo.
+   */
+  endElement?: React.ReactNode;
+  /**
+   * Bloco colado ao campo, fora da borda dele, antes do campo.
+   */
+  startAddon?: React.ReactNode;
+  /**
+   * Bloco colado ao campo, fora da borda dele, depois do campo.
+   */
+  endAddon?: React.ReactNode;
+}>;
+/**
+ * Um campo com ícone, texto ou botão junto dele. O elemento (`startElement`, `endElement`) fica
+ * dentro da borda do campo, como a lupa de uma busca ou a unidade de uma medida; o addon
+ * (`startAddon`, `endAddon`) é um bloco colado ao campo, com a borda própria, como o `https://` de
+ * uma URL.
+ *
+ * - O grupo desenha a borda, o fundo e o anel de foco do campo, e o `<input>` de dentro fica sem
+ *   caixa. O foco, o inválido e o desabilitado vêm do campo: ele se liga ao `Field` como sempre,
+ *   e o grupo reflete o estado dele. No addon, só a caixa do campo muda de cor; o desabilitado
+ *   esmaece os dois.
+ * - O `size` dá a altura: passe o mesmo `size` ao campo, para o texto dele bater com o do elemento
+ *   e do addon. O `variant` fica só no grupo: o campo é transparente e o fundo vem dele.
+ * - Um clique no elemento foca o campo, como no clique de um rótulo; um clique em `button`, `a`,
+ *   `input`, `select` ou `textarea` dentro dele segue o próprio caminho.
+ * - Um botão entra por composição, um `IconButton` com `variant="ghost"` no elemento, um ou dois
+ *   passos de `size` abaixo do grupo para sobrar folga até a borda (`3xs` num grupo `2xs`, `2xs`
+ *   num `sm`, `xs` num `md`, `sm` num `lg`, `md` num `xl`, `xl` num `2xl`).
+ * - Com addon, o grupo é um `Group` com `attached` por fora, e a `className` e as demais props
+ *   vão nele; sem addon, no `div` da caixa. Sem `role="group"`: o nome e a descrição acessíveis
+ *   vêm do `Field` ligado ao `<input>`, e um grupo com nome próprio o anunciaria duas vezes.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup startElement={<Icon render={<MagnifyingGlassIcon />} />}>
+ *   <Input
+ *     aria-label="Buscar"
+ *     placeholder="Buscar pedido"
+ *   />
+ * </InputGroup>
+ *
+ * <InputGroup endElement="kg">
+ *   <NumberInput aria-label="Peso" />
+ * </InputGroup>
+ *
+ * <InputGroup
+ *   startAddon="https://"
+ *   endAddon=".com.br"
+ * >
+ *   <Input aria-label="Subdomínio" />
+ * </InputGroup>
+ *
+ * <InputGroup
+ *   endElement={
+ *     <IconButton
+ *       aria-label="Limpar"
+ *       icon={<XIcon />}
+ *       variant="ghost"
+ *       size="2xs"
+ *     />
+ *   }
+ * >
+ *   <Input aria-label="Endereço" />
+ * </InputGroup>
+ * ```
+ */
+export declare const InputGroup: {
+  (props: InputGroupProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=input-group.d.ts.map