@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/fields/field/field-header.d.ts

@@ -0,0 +1,33 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-header.d.ts
+export type FieldHeaderProps = useRender.ComponentProps<'div'>;
+/**
+ * Topo do campo: uma linha com o `Field.Label` e um elemento ao lado dele, como uma ação de texto.
+ * Para levar o elemento ao fim da linha, use `ms-auto` nele.
+ *
+ * O que fica aqui está fora do `<label>` e não entra no nome acessível do controle: informação
+ * essencial vai no `Field.Description`.
+ *
+ * A linha não tem altura fixa. Numa grade de campos, um elemento mais alto que a linha do rótulo
+ * (16px no `size` padrão) empurra o controle e o desalinha dos vizinhos: prefira um texto pequeno
+ * ou um ícone sem caixa.
+ *
+ * @example
+ * ```tsx
+ * <Field.Header>
+ *   <Field.Label>CNPJ</Field.Label>
+ *   <button
+ *     type="button"
+ *     className="ms-auto text-xs"
+ *   >
+ *     Consultar
+ *   </button>
+ * </Field.Header>
+ * ```
+ */
+export declare const FieldHeader: {
+  (props: FieldHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-header.d.ts.map

package/dist/components/fields/field/field-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-header.d.ts","names":[],"sources":["../../../../src/components/fields/field/field-header.tsx"],"mappings":";;YAGY,mBAAmB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;qBA0B5B;GAAsB,OAAA,mCAAgB,+CAAA"}

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

@@ -0,0 +1,48 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-header.tsx
+/**
+* Topo do campo: uma linha com o `Field.Label` e um elemento ao lado dele, como uma ação de texto.
+* Para levar o elemento ao fim da linha, use `ms-auto` nele.
+*
+* O que fica aqui está fora do `<label>` e não entra no nome acessível do controle: informação
+* essencial vai no `Field.Description`.
+*
+* A linha não tem altura fixa. Numa grade de campos, um elemento mais alto que a linha do rótulo
+* (16px no `size` padrão) empurra o controle e o desalinha dos vizinhos: prefira um texto pequeno
+* ou um ícone sem caixa.
+*
+* @example
+* ```tsx
+* <Field.Header>
+*   <Field.Label>CNPJ</Field.Label>
+*   <button
+*     type="button"
+*     className="ms-auto text-xs"
+*   >
+*     Consultar
+*   </button>
+* </Field.Header>
+* ```
+*/
+const FieldHeader = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Field.Header",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"gap-2"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+FieldHeader.displayName = "Field.Header";
+//#endregion
+export { FieldHeader };
+
+//# sourceMappingURL=field-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-header.js","names":[],"sources":["../../../../src/components/fields/field/field-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type FieldHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do campo: uma linha com o `Field.Label` e um elemento ao lado dele, como uma ação de texto.\n * Para levar o elemento ao fim da linha, use `ms-auto` nele.\n *\n * O que fica aqui está fora do `<label>` e não entra no nome acessível do controle: informação\n * essencial vai no `Field.Description`.\n *\n * A linha não tem altura fixa. Numa grade de campos, um elemento mais alto que a linha do rótulo\n * (16px no `size` padrão) empurra o controle e o desalinha dos vizinhos: prefira um texto pequeno\n * ou um ícone sem caixa.\n *\n * @example\n * ```tsx\n * <Field.Header>\n *   <Field.Label>CNPJ</Field.Label>\n *   <button\n *     type=\"button\"\n *     className=\"ms-auto text-xs\"\n *   >\n *     Consultar\n *   </button>\n * </Field.Header>\n * ```\n */\nexport const FieldHeader = (props: FieldHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Field.Header',\n    className: mergeTwClassNames(['flex', 'items-center', 'gap-2'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nFieldHeader.displayName = 'Field.Header';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB;GAAC;GAAQ;GAAgB;EAAO,GAAG,SAAS;CAC3E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/components/fields/field/field-item.d.ts

@@ -0,0 +1,30 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-item.d.ts
+export type FieldItemProps = Field.Item.Props;
+export type FieldItemState = Field.Item.State;
+/**
+ * Uma opção de um grupo de Checkbox ou Radio, com rótulo e descrição próprios. Fica dentro de um
+ * `Fieldset.Root` com `render={<Checkbox.Group />}`, que dá o nome do grupo pela `Legend`.
+ *
+ * O controle, o `Field.Label` e o `Field.Description` entram como irmãos, sem o rótulo envolver o
+ * controle: o grid põe o controle na primeira coluna e o rótulo na segunda. A descrição e o erro
+ * vão para a segunda coluna pelo `col-start-2` que eles mesmos trazem, que fora de um grid não
+ * tem efeito. O rótulo de cada opção fica em peso normal.
+ *
+ * @example
+ * ```tsx
+ * <Field.Item>
+ *   <Checkbox.Root value="daily">
+ *     <Checkbox.Indicator />
+ *   </Checkbox.Root>
+ *   <Field.Label>Diário</Field.Label>
+ *   <Field.Description>Todo dia à meia-noite.</Field.Description>
+ * </Field.Item>
+ * ```
+ */
+export declare const FieldItem: {
+  (props: FieldItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-item.d.ts.map

package/dist/components/fields/field/field-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-item.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-item.tsx"],"mappings":";;YAGY,iBAAiBA,MAAU,KAAK;YAEhC,iBAAiBA,MAAU,KAAK;;;;;;;;;;;;;;;;;;;;;qBAsB/B;GAAoB,OAAA,iCAAc,IAAA"}

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

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-item.tsx
+/**
+* Uma opção de um grupo de Checkbox ou Radio, com rótulo e descrição próprios. Fica dentro de um
+* `Fieldset.Root` com `render={<Checkbox.Group />}`, que dá o nome do grupo pela `Legend`.
+*
+* O controle, o `Field.Label` e o `Field.Description` entram como irmãos, sem o rótulo envolver o
+* controle: o grid põe o controle na primeira coluna e o rótulo na segunda. A descrição e o erro
+* vão para a segunda coluna pelo `col-start-2` que eles mesmos trazem, que fora de um grid não
+* tem efeito. O rótulo de cada opção fica em peso normal.
+*
+* @example
+* ```tsx
+* <Field.Item>
+*   <Checkbox.Root value="daily">
+*     <Checkbox.Indicator />
+*   </Checkbox.Root>
+*   <Field.Label>Diário</Field.Label>
+*   <Field.Description>Todo dia à meia-noite.</Field.Description>
+* </Field.Item>
+* ```
+*/
+const FieldItem = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Field.Item, {
+		"data-component": "Field.Item",
+		className: mergeStateClassNames([
+			"grid",
+			"grid-cols-[auto_1fr]",
+			"items-center",
+			"gap-x-2",
+			"gap-y-(--field-gap,--spacing(1))"
+		], className),
+		...rest
+	});
+};
+FieldItem.displayName = "Field.Item";
+//#endregion
+export { FieldItem };
+
+//# sourceMappingURL=field-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-item.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-item.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldItemProps = BaseField.Item.Props;\n\nexport type FieldItemState = BaseField.Item.State;\n\n/**\n * Uma opção de um grupo de Checkbox ou Radio, com rótulo e descrição próprios. Fica dentro de um\n * `Fieldset.Root` com `render={<Checkbox.Group />}`, que dá o nome do grupo pela `Legend`.\n *\n * O controle, o `Field.Label` e o `Field.Description` entram como irmãos, sem o rótulo envolver o\n * controle: o grid põe o controle na primeira coluna e o rótulo na segunda. A descrição e o erro\n * vão para a segunda coluna pelo `col-start-2` que eles mesmos trazem, que fora de um grid não\n * tem efeito. O rótulo de cada opção fica em peso normal.\n *\n * @example\n * ```tsx\n * <Field.Item>\n *   <Checkbox.Root value=\"daily\">\n *     <Checkbox.Indicator />\n *   </Checkbox.Root>\n *   <Field.Label>Diário</Field.Label>\n *   <Field.Description>Todo dia à meia-noite.</Field.Description>\n * </Field.Item>\n * ```\n */\nexport const FieldItem = (props: FieldItemProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseField.Item\n      data-component=\"Field.Item\"\n      className={mergeStateClassNames(\n        [\n          'grid',\n          'grid-cols-[auto_1fr]',\n          'items-center',\n          'gap-x-2',\n          // O mesmo espaço do `Field.Root`, que vem do `size` (ver `fieldRootVariants`).\n          'gap-y-(--field-gap,--spacing(1))',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldItem.displayName = 'Field.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,MAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/fields/field/field-label.d.ts

@@ -0,0 +1,24 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-label.d.ts
+export type FieldLabelProps = Field.Label.Props;
+export type FieldLabelState = Field.Label.State;
+/**
+ * Rótulo do campo: um `<label>` ligado ao controle por `htmlFor`. O Select tem rótulo próprio,
+ * o `Select.Label`.
+ *
+ * Todo o conteúdo entra no nome acessível do controle, então nada interativo vai dentro dele:
+ * uma ação ao lado do rótulo fica no `Field.Header`.
+ *
+ * A largura acompanha o texto: o clique vale no texto, não no espaço vazio da linha, como num
+ * `<label>` nativo.
+ *
+ * Como rótulo de uma opção, fica em peso normal, que é conteúdo e não título de campo: envolvendo
+ * um Checkbox, Switch ou Radio (vira uma linha com o controle e o texto) ou logo depois dele,
+ * como irmão no `Field.Item`.
+ */
+export declare const FieldLabel: {
+  (props: FieldLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-label.d.ts.map

package/dist/components/fields/field/field-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-label.tsx"],"mappings":";;YAGY,kBAAkBA,MAAU,MAAM;YAElC,kBAAkBA,MAAU,MAAM;;;;;;;;;;;;;;;qBAgBjC;GAAqB,OAAA,kCAAe,IAAA"}

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

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-label.tsx
+/**
+* Rótulo do campo: um `<label>` ligado ao controle por `htmlFor`. O Select tem rótulo próprio,
+* o `Select.Label`.
+*
+* Todo o conteúdo entra no nome acessível do controle, então nada interativo vai dentro dele:
+* uma ação ao lado do rótulo fica no `Field.Header`.
+*
+* A largura acompanha o texto: o clique vale no texto, não no espaço vazio da linha, como num
+* `<label>` nativo.
+*
+* Como rótulo de uma opção, fica em peso normal, que é conteúdo e não título de campo: envolvendo
+* um Checkbox, Switch ou Radio (vira uma linha com o controle e o texto) ou logo depois dele,
+* como irmão no `Field.Item`.
+*/
+const FieldLabel = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-component": "Field.Label",
+		className: mergeStateClassNames([
+			"w-fit",
+			"text-(length:--field-label-size,var(--text-sm))",
+			"leading-(--field-label-leading,--spacing(4))",
+			"font-medium",
+			"text-gray-12",
+			"data-disabled:opacity-50",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:flex",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:items-center",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:gap-2",
+			"has-[[role=checkbox],[role=switch],[role=radio]]:font-normal",
+			"[:is([role=checkbox],[role=switch],[role=radio])~&]:font-normal"
+		], className),
+		...rest
+	});
+};
+FieldLabel.displayName = "Field.Label";
+//#endregion
+export { FieldLabel };
+
+//# sourceMappingURL=field-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-label.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldLabelProps = BaseField.Label.Props;\n\nexport type FieldLabelState = BaseField.Label.State;\n\n/**\n * Rótulo do campo: um `<label>` ligado ao controle por `htmlFor`. O Select tem rótulo próprio,\n * o `Select.Label`.\n *\n * Todo o conteúdo entra no nome acessível do controle, então nada interativo vai dentro dele:\n * uma ação ao lado do rótulo fica no `Field.Header`.\n *\n * A largura acompanha o texto: o clique vale no texto, não no espaço vazio da linha, como num\n * `<label>` nativo.\n *\n * Como rótulo de uma opção, fica em peso normal, que é conteúdo e não título de campo: envolvendo\n * um Checkbox, Switch ou Radio (vira uma linha com o controle e o texto) ou logo depois dele,\n * como irmão no `Field.Item`.\n */\nexport const FieldLabel = (props: FieldLabelProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseField.Label\n      data-component=\"Field.Label\"\n      className={mergeStateClassNames(\n        [\n          'w-fit',\n\n          // Tamanho e linha vêm do `size` do `Field.Root` (ver `fieldRootVariants`).\n          'text-(length:--field-label-size,var(--text-sm))',\n          'leading-(--field-label-leading,--spacing(4))',\n          'font-medium',\n          'text-gray-12',\n\n          'data-disabled:opacity-50',\n\n          // Envolvendo um controle de marcar: linha com o controle e o texto.\n          'has-[[role=checkbox],[role=switch],[role=radio]]:flex',\n          'has-[[role=checkbox],[role=switch],[role=radio]]:items-center',\n          'has-[[role=checkbox],[role=switch],[role=radio]]:gap-2',\n          'has-[[role=checkbox],[role=switch],[role=radio]]:font-normal',\n\n          // Depois de um controle de marcar, como irmão (no `Field.Item`).\n          '[:is([role=checkbox],[role=switch],[role=radio])~&]:font-normal',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldLabel.displayName = 'Field.Label';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,OAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAGA;GACA;GACA;GACA;GAEA;GAGA;GACA;GACA;GACA;GAGA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/fields/field/field-required-indicator.d.ts

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-required-indicator.d.ts
+export type FieldRequiredIndicatorProps = useRender.ComponentProps<'span'>;
+/**
+ * Marca visual de campo obrigatório, um `*` por padrão, colocada dentro do `Field.Label`, do
+ * `Select.Label` ou da `Fieldset.Legend`.
+ *
+ * Só visual (`aria-hidden`): quem anuncia a obrigatoriedade ao leitor de tela é o `required` no
+ * controle. A marca não aparece sozinha, porque o Field não sabe se o controle é obrigatório:
+ * renderize-a junto do `required`.
+ *
+ * @example
+ * ```tsx
+ * <Field.Label>
+ *   Nome
+ *   <Field.RequiredIndicator />
+ * </Field.Label>
+ * ```
+ */
+export declare const FieldRequiredIndicator: {
+  (props: FieldRequiredIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-required-indicator.d.ts.map

package/dist/components/fields/field/field-required-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-required-indicator.d.ts","names":[],"sources":["../../../../src/components/fields/field/field-required-indicator.tsx"],"mappings":";;YAGY,8BAA8B,UAAU;;;;;;;;;;;;;;;;;qBAkBvC;GAAiC,OAAA,8CAA2B,+CAAA"}

package/dist/components/fields/field/field-required-indicator.js

@@ -0,0 +1,38 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/fields/field/field-required-indicator.tsx
+/**
+* Marca visual de campo obrigatório, um `*` por padrão, colocada dentro do `Field.Label`, do
+* `Select.Label` ou da `Fieldset.Legend`.
+*
+* Só visual (`aria-hidden`): quem anuncia a obrigatoriedade ao leitor de tela é o `required` no
+* controle. A marca não aparece sozinha, porque o Field não sabe se o controle é obrigatório:
+* renderize-a junto do `required`.
+*
+* @example
+* ```tsx
+* <Field.Label>
+*   Nome
+*   <Field.RequiredIndicator />
+* </Field.Label>
+* ```
+*/
+const FieldRequiredIndicator = (props) => {
+	const { render, className, children = "*", ...rest } = props;
+	const baseProps = {
+		"data-component": "Field.RequiredIndicator",
+		"aria-hidden": true,
+		className: mergeTwClassNames(["ms-0.5", "text-red-11"], className),
+		children
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+FieldRequiredIndicator.displayName = "Field.RequiredIndicator";
+//#endregion
+export { FieldRequiredIndicator };
+
+//# sourceMappingURL=field-required-indicator.js.map

package/dist/components/fields/field/field-required-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-required-indicator.js","names":[],"sources":["../../../../src/components/fields/field/field-required-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type FieldRequiredIndicatorProps = useRender.ComponentProps<'span'>;\n\n/**\n * Marca visual de campo obrigatório, um `*` por padrão, colocada dentro do `Field.Label`, do\n * `Select.Label` ou da `Fieldset.Legend`.\n *\n * Só visual (`aria-hidden`): quem anuncia a obrigatoriedade ao leitor de tela é o `required` no\n * controle. A marca não aparece sozinha, porque o Field não sabe se o controle é obrigatório:\n * renderize-a junto do `required`.\n *\n * @example\n * ```tsx\n * <Field.Label>\n *   Nome\n *   <Field.RequiredIndicator />\n * </Field.Label>\n * ```\n */\nexport const FieldRequiredIndicator = (props: FieldRequiredIndicatorProps) => {\n  const { render, className, children = '*', ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Field.RequiredIndicator',\n    'aria-hidden': true,\n    className: mergeTwClassNames(['ms-0.5', 'text-red-11'], className),\n    children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nFieldRequiredIndicator.displayName = 'Field.RequiredIndicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,QAAQ,WAAW,WAAW,KAAK,GAAG,SAAS;CAEvD,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,WAAW,kBAAkB,CAAC,UAAU,aAAa,GAAG,SAAS;EACjE;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,uBAAuB,cAAc"}

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

@@ -0,0 +1,26 @@
+//#region src/components/fields/field/field-root-variants.d.ts
+export type FieldVariants = {
+  /**
+   * Tamanho do texto do rótulo, da descrição e do erro. Use o mesmo `size` do controle: o rótulo
+   * acompanha o texto do controle, e a descrição e o erro ficam uma escala abaixo.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+};
+export declare const fieldDefaultVariants: Required<FieldVariants>;
+/**
+ * O `size` só declara CSS variables: `--field-gap`, o espaço entre as partes, que o `Root` e o
+ * `Item` leem; `--field-label-size` e `--field-label-leading`, que o `Label` e a
+ * `Fieldset.Legend` leem; e `--field-message-size` e `--field-message-leading`, que a
+ * `Description` e o `Error` leem. Assim as partes não precisam de contexto, e um campo aninhado
+ * redeclara as variáveis para o que está dentro dele.
+ *
+ * A linha do rótulo é o tamanho do texto mais 2px, sem o respiro da altura de linha padrão: é
+ * também a altura do `Header`, então o que fica ao lado do rótulo precisa caber nela.
+ */
+export declare const fieldRootVariants: (props?: ({
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=field-root-variants.d.ts.map

package/dist/components/fields/field/field-root-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-root-variants.d.ts","names":[],"sources":["../../../../src/components/fields/field/field-root-variants.ts"],"mappings":";YAEY;;;;;;;EAOV;;qBAGW,sBAAsB,SAAS;;;;;;;;;;;qBAc/B,oBAAiB;;6CAsE7B"}

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

@@ -0,0 +1,77 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/field/field-root-variants.ts
+const fieldDefaultVariants = { size: "sm" };
+/**
+* O `size` só declara CSS variables: `--field-gap`, o espaço entre as partes, que o `Root` e o
+* `Item` leem; `--field-label-size` e `--field-label-leading`, que o `Label` e a
+* `Fieldset.Legend` leem; e `--field-message-size` e `--field-message-leading`, que a
+* `Description` e o `Error` leem. Assim as partes não precisam de contexto, e um campo aninhado
+* redeclara as variáveis para o que está dentro dele.
+*
+* A linha do rótulo é o tamanho do texto mais 2px, sem o respiro da altura de linha padrão: é
+* também a altura do `Header`, então o que fica ao lado do rótulo precisa caber nela.
+*/
+const fieldRootVariants = cva([
+	"relative",
+	"flex",
+	"flex-col",
+	"gap-(--field-gap)",
+	"min-w-0"
+], {
+	variants: { size: {
+		"2xs": [
+			"[--field-gap:--spacing(1)]",
+			"[--field-label-size:var(--text-xs)]",
+			"[--field-label-leading:--spacing(3.5)]",
+			"[--field-message-size:var(--text-2xs)]",
+			"[--field-message-leading:var(--text-2xs--line-height)]"
+		],
+		xs: [
+			"[--field-gap:--spacing(1)]",
+			"[--field-label-size:var(--text-xs)]",
+			"[--field-label-leading:--spacing(3.5)]",
+			"[--field-message-size:var(--text-2xs)]",
+			"[--field-message-leading:var(--text-2xs--line-height)]"
+		],
+		sm: [
+			"[--field-gap:--spacing(1)]",
+			"[--field-label-size:var(--text-sm)]",
+			"[--field-label-leading:--spacing(4)]",
+			"[--field-message-size:var(--text-xs)]",
+			"[--field-message-leading:var(--text-xs--line-height)]"
+		],
+		md: [
+			"[--field-gap:--spacing(1)]",
+			"[--field-label-size:var(--text-sm)]",
+			"[--field-label-leading:--spacing(4)]",
+			"[--field-message-size:var(--text-xs)]",
+			"[--field-message-leading:var(--text-xs--line-height)]"
+		],
+		lg: [
+			"[--field-gap:--spacing(1.5)]",
+			"[--field-label-size:var(--text-base)]",
+			"[--field-label-leading:--spacing(4.5)]",
+			"[--field-message-size:var(--text-sm)]",
+			"[--field-message-leading:var(--text-sm--line-height)]"
+		],
+		xl: [
+			"[--field-gap:--spacing(1.5)]",
+			"[--field-label-size:var(--text-base)]",
+			"[--field-label-leading:--spacing(4.5)]",
+			"[--field-message-size:var(--text-sm)]",
+			"[--field-message-leading:var(--text-sm--line-height)]"
+		],
+		"2xl": [
+			"[--field-gap:--spacing(2)]",
+			"[--field-label-size:var(--text-lg)]",
+			"[--field-label-leading:--spacing(5)]",
+			"[--field-message-size:var(--text-base)]",
+			"[--field-message-leading:var(--text-base--line-height)]"
+		]
+	} },
+	defaultVariants: { size: fieldDefaultVariants.size }
+});
+//#endregion
+export { fieldDefaultVariants, fieldRootVariants };
+
+//# sourceMappingURL=field-root-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-root-variants.js","names":[],"sources":["../../../../src/components/fields/field/field-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type FieldVariants = {\n  /**\n   * Tamanho do texto do rótulo, da descrição e do erro. Use o mesmo `size` do controle: o rótulo\n   * acompanha o texto do controle, e a descrição e o erro ficam uma escala abaixo.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n};\n\nexport const fieldDefaultVariants: Required<FieldVariants> = {\n  size: 'sm',\n};\n\n/**\n * O `size` só declara CSS variables: `--field-gap`, o espaço entre as partes, que o `Root` e o\n * `Item` leem; `--field-label-size` e `--field-label-leading`, que o `Label` e a\n * `Fieldset.Legend` leem; e `--field-message-size` e `--field-message-leading`, que a\n * `Description` e o `Error` leem. Assim as partes não precisam de contexto, e um campo aninhado\n * redeclara as variáveis para o que está dentro dele.\n *\n * A linha do rótulo é o tamanho do texto mais 2px, sem o respiro da altura de linha padrão: é\n * também a altura do `Header`, então o que fica ao lado do rótulo precisa caber nela.\n */\nexport const fieldRootVariants = cva(\n  [\n    // Âncora do `<input>` escondido de Checkbox, Select e Switch: o aviso nativo de validação aparece junto do controle.\n    'relative',\n\n    'flex',\n    'flex-col',\n    'gap-(--field-gap)',\n\n    // Dentro de um Grid, um valor longo não estoura a coluna.\n    'min-w-0',\n  ],\n  {\n    variants: {\n      size: {\n        '2xs': [\n          '[--field-gap:--spacing(1)]',\n          '[--field-label-size:var(--text-xs)]',\n          '[--field-label-leading:--spacing(3.5)]',\n          '[--field-message-size:var(--text-2xs)]',\n          '[--field-message-leading:var(--text-2xs--line-height)]',\n        ],\n        xs: [\n          '[--field-gap:--spacing(1)]',\n          '[--field-label-size:var(--text-xs)]',\n          '[--field-label-leading:--spacing(3.5)]',\n          '[--field-message-size:var(--text-2xs)]',\n          '[--field-message-leading:var(--text-2xs--line-height)]',\n        ],\n        sm: [\n          '[--field-gap:--spacing(1)]',\n          '[--field-label-size:var(--text-sm)]',\n          '[--field-label-leading:--spacing(4)]',\n          '[--field-message-size:var(--text-xs)]',\n          '[--field-message-leading:var(--text-xs--line-height)]',\n        ],\n        md: [\n          '[--field-gap:--spacing(1)]',\n          '[--field-label-size:var(--text-sm)]',\n          '[--field-label-leading:--spacing(4)]',\n          '[--field-message-size:var(--text-xs)]',\n          '[--field-message-leading:var(--text-xs--line-height)]',\n        ],\n        lg: [\n          '[--field-gap:--spacing(1.5)]',\n          '[--field-label-size:var(--text-base)]',\n          '[--field-label-leading:--spacing(4.5)]',\n          '[--field-message-size:var(--text-sm)]',\n          '[--field-message-leading:var(--text-sm--line-height)]',\n        ],\n        xl: [\n          '[--field-gap:--spacing(1.5)]',\n          '[--field-label-size:var(--text-base)]',\n          '[--field-label-leading:--spacing(4.5)]',\n          '[--field-message-size:var(--text-sm)]',\n          '[--field-message-leading:var(--text-sm--line-height)]',\n        ],\n        '2xl': [\n          '[--field-gap:--spacing(2)]',\n          '[--field-label-size:var(--text-lg)]',\n          '[--field-label-leading:--spacing(5)]',\n          '[--field-message-size:var(--text-base)]',\n          '[--field-message-leading:var(--text-base--line-height)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: fieldDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;AAYA,MAAa,uBAAgD,EAC3D,MAAM,KACR;;;;;;;;;;;AAYA,MAAa,oBAAoB,IAC/B;CAEE;CAEA;CACA;CACA;CAGA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GACA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GACA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GACA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GACA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,qBAAqB,KAC7B;AACF,CACF"}

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

@@ -0,0 +1,37 @@
+import { FieldVariants } from "./field-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-root.d.ts
+export type FieldRootProps = MergeOverride<Field.Root.Props, FieldVariants>;
+export type FieldRootState = Field.Root.State;
+export type FieldRootActions = Field.Root.Actions;
+/**
+ * Agrupa rótulo, controle, descrição e erro de um campo. Repassa ao controle dentro dele o
+ * `name`, o `disabled` (inclusive o que vem de um `Fieldset` em volta) e a validação, e liga o
+ * rótulo e a descrição ao controle por `id`.
+ *
+ * O `size` vale só para os textos do campo: o controle recebe o próprio `size`, com o mesmo
+ * valor.
+ *
+ * `invalid`, `dirty` e `touched` existem para uma lib de formulário externa (React Hook Form)
+ * controlar o estado. Com `invalid` vindo de fora, o `Field.Error` só aparece com `match`.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root name="email">
+ *   <Field.Label>E-mail</Field.Label>
+ *   <Input
+ *     type="email"
+ *     required
+ *   />
+ *   <Field.Description>Usado para recuperar a senha.</Field.Description>
+ *   <Field.Error />
+ * </Field.Root>
+ * ```
+ */
+export declare const FieldRoot: {
+  (props: FieldRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-root.d.ts.map

package/dist/components/fields/field/field-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-root.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-root.tsx"],"mappings":";;;;YAKY,iBAAiB,cAAcA,MAAU,KAAK,OAAO;YAErD,iBAAiBA,MAAU,KAAK;YAEhC,mBAAmBA,MAAU,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;qBA4BjC;GAAoB,OAAA,iCAAc,IAAA"}

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

@@ -0,0 +1,45 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { fieldRootVariants } from "./field-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Agrupa rótulo, controle, descrição e erro de um campo. Repassa ao controle dentro dele o
+* `name`, o `disabled` (inclusive o que vem de um `Fieldset` em volta) e a validação, e liga o
+* rótulo e a descrição ao controle por `id`.
+*
+* O `size` vale só para os textos do campo: o controle recebe o próprio `size`, com o mesmo
+* valor.
+*
+* `invalid`, `dirty` e `touched` existem para uma lib de formulário externa (React Hook Form)
+* controlar o estado. Com `invalid` vindo de fora, o `Field.Error` só aparece com `match`.
+*
+* @example
+* ```tsx
+* <Field.Root name="email">
+*   <Field.Label>E-mail</Field.Label>
+*   <Input
+*     type="email"
+*     required
+*   />
+*   <Field.Description>Usado para recuperar a senha.</Field.Description>
+*   <Field.Error />
+* </Field.Root>
+* ```
+*/
+const FieldRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Field.Root, {
+		"data-component": "Field.Root",
+		className: mergeStateClassNames(fieldRootVariants(variantProps), className),
+		...rest
+	});
+};
+FieldRoot.displayName = "Field.Root";
+//#endregion
+export { FieldRoot };
+
+//# sourceMappingURL=field-root.js.map

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

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

package/dist/components/fields/field/field-validity.d.ts

@@ -0,0 +1,14 @@
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-validity.d.ts
+export type FieldValidityProps = Field.Validity.Props;
+export type FieldValidityState = Field.Validity.State;
+/**
+ * Render prop com o estado de validação do campo (`validity`, `errors`, `value`…), para montar uma
+ * mensagem ou um indicador próprio. Não renderiza elemento.
+ */
+export declare const FieldValidity: {
+  (props: FieldValidityProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=field-validity.d.ts.map

package/dist/components/fields/field/field-validity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-validity.d.ts","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-validity.tsx"],"mappings":";;YAEY,qBAAqBA,MAAU,SAAS;YAExC,qBAAqBA,MAAU,SAAS;;;;;qBAMvC;GAAwB,OAAA,qCAAkB,IAAA"}

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

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/fields/field/field-validity.tsx
+/**
+* Render prop com o estado de validação do campo (`validity`, `errors`, `value`…), para montar uma
+* mensagem ou um indicador próprio. Não renderiza elemento.
+*/
+const FieldValidity = (props) => /* @__PURE__ */ jsx(Field.Validity, { ...props });
+FieldValidity.displayName = "Field.Validity";
+//#endregion
+export { FieldValidity };
+
+//# sourceMappingURL=field-validity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-validity.js","names":["BaseField"],"sources":["../../../../src/components/fields/field/field-validity.tsx"],"sourcesContent":["import { Field as BaseField } from '@base-ui/react/field';\n\nexport type FieldValidityProps = BaseField.Validity.Props;\n\nexport type FieldValidityState = BaseField.Validity.State;\n\n/**\n * Render prop com o estado de validação do campo (`validity`, `errors`, `value`…), para montar uma\n * mensagem ou um indicador próprio. Não renderiza elemento.\n */\nexport const FieldValidity = (props: FieldValidityProps) => (\n  <BaseField.Validity {...props} />\n);\n\nFieldValidity.displayName = 'Field.Validity';\n"],"mappings":";;;;;;;AAUA,MAAa,iBAAiB,UAC5B,oBAACA,MAAU,UAAX,EAAoB,GAAI,MAAQ,CAAA;AAGlC,cAAc,cAAc"}

package/dist/components/fields/field/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Field };

package/dist/components/fields/field/index.js

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Field };

package/dist/components/fields/field/index.parts.d.ts

@@ -0,0 +1,15 @@
+import { FieldDescription, FieldDescriptionProps, FieldDescriptionState } from "./field-description.js";
+import { FieldError, FieldErrorProps, FieldErrorState } from "./field-error.js";
+import { FieldHeader, FieldHeaderProps } from "./field-header.js";
+import { FieldItem, FieldItemProps, FieldItemState } from "./field-item.js";
+import { FieldLabel, FieldLabelProps, FieldLabelState } from "./field-label.js";
+import { FieldRequiredIndicator, FieldRequiredIndicatorProps } from "./field-required-indicator.js";
+import { FieldVariants } from "./field-root-variants.js";
+import { FieldRoot, FieldRootActions, FieldRootProps, FieldRootState } from "./field-root.js";
+import { FieldValidity, FieldValidityProps, FieldValidityState } from "./field-validity.js";
+declare namespace index_parts_d_exports {
+  export { FieldDescription as Description, FieldDescriptionProps as DescriptionProps, FieldDescriptionState as DescriptionState, FieldError as Error, FieldErrorProps as ErrorProps, FieldErrorState as ErrorState, FieldHeader as Header, FieldHeaderProps as HeaderProps, FieldItem as Item, FieldItemProps as ItemProps, FieldItemState as ItemState, FieldLabel as Label, FieldLabelProps as LabelProps, FieldLabelState as LabelState, FieldRequiredIndicator as RequiredIndicator, FieldRequiredIndicatorProps as RequiredIndicatorProps, FieldRoot as Root, FieldRootActions as RootActions, FieldRootProps as RootProps, FieldRootState as RootState, FieldValidity as Validity, FieldValidityProps as ValidityProps, FieldValidityState as ValidityState, FieldVariants as Variants };
+}
+//#endregion
+export { FieldDescription as Description, type FieldDescriptionProps as DescriptionProps, type FieldDescriptionState as DescriptionState, FieldError as Error, type FieldErrorProps as ErrorProps, type FieldErrorState as ErrorState, FieldHeader as Header, type FieldHeaderProps as HeaderProps, FieldItem as Item, type FieldItemProps as ItemProps, type FieldItemState as ItemState, FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelState as LabelState, FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorProps as RequiredIndicatorProps, FieldRoot as Root, type FieldRootActions as RootActions, type FieldRootProps as RootProps, type FieldRootState as RootState, FieldValidity as Validity, type FieldValidityProps as ValidityProps, type FieldValidityState as ValidityState, type FieldVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/fields/field/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/components/fields/field/index.parts.ts"],"mappings":""}