@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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":""}

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

@@ -0,0 +1,24 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { FieldDescription } from "./field-description.js";
+import { FieldError } from "./field-error.js";
+import { FieldHeader } from "./field-header.js";
+import { FieldItem } from "./field-item.js";
+import { FieldLabel } from "./field-label.js";
+import { FieldRequiredIndicator } from "./field-required-indicator.js";
+import { FieldRoot } from "./field-root.js";
+import { FieldValidity } from "./field-validity.js";
+//#region src/components/fields/field/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Description: () => FieldDescription,
+	Error: () => FieldError,
+	Header: () => FieldHeader,
+	Item: () => FieldItem,
+	Label: () => FieldLabel,
+	RequiredIndicator: () => FieldRequiredIndicator,
+	Root: () => FieldRoot,
+	Validity: () => FieldValidity
+});
+//#endregion
+export { FieldDescription as Description, FieldError as Error, FieldHeader as Header, FieldItem as Item, FieldLabel as Label, FieldRequiredIndicator as RequiredIndicator, FieldRoot as Root, FieldValidity as Validity, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/field/index.parts.ts"],"sourcesContent":["export { FieldDescription as Description } from './field-description';\nexport { FieldError as Error } from './field-error';\nexport { FieldHeader as Header } from './field-header';\nexport { FieldItem as Item } from './field-item';\nexport { FieldLabel as Label } from './field-label';\nexport { FieldRequiredIndicator as RequiredIndicator } from './field-required-indicator';\nexport { FieldRoot as Root } from './field-root';\nexport { FieldValidity as Validity } from './field-validity';\n\n/* types */\n\nexport type {\n  FieldDescriptionProps as DescriptionProps,\n  FieldDescriptionState as DescriptionState,\n} from './field-description';\nexport type {\n  FieldErrorProps as ErrorProps,\n  FieldErrorState as ErrorState,\n} from './field-error';\nexport type { FieldHeaderProps as HeaderProps } from './field-header';\nexport type {\n  FieldItemProps as ItemProps,\n  FieldItemState as ItemState,\n} from './field-item';\nexport type {\n  FieldLabelProps as LabelProps,\n  FieldLabelState as LabelState,\n} from './field-label';\nexport type { FieldRequiredIndicatorProps as RequiredIndicatorProps } from './field-required-indicator';\nexport type {\n  FieldRootActions as RootActions,\n  FieldRootProps as RootProps,\n  FieldRootState as RootState,\n} from './field-root';\nexport type { FieldVariants as Variants } from './field-root-variants';\nexport type {\n  FieldValidityProps as ValidityProps,\n  FieldValidityState as ValidityState,\n} from './field-validity';\n"],"mappings":""}

package/dist/components/fields/fieldset/fieldset-legend.d.ts

@@ -0,0 +1,22 @@
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/fields/fieldset/fieldset-legend.d.ts
+export type FieldsetLegendProps = Fieldset.Legend.Props;
+export type FieldsetLegendState = Fieldset.Legend.State;
+/**
+ * Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao
+ * `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a
+ * borda do `<fieldset>`.
+ *
+ * Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`
+ * acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`
+ * padrão.
+ *
+ * Como título de seção, componha com o título que quiser:
+ * `<Heading render={<Fieldset.Legend />}>`.
+ */
+export declare const FieldsetLegend: {
+  (props: FieldsetLegendProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=fieldset-legend.d.ts.map

package/dist/components/fields/fieldset/fieldset-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset-legend.d.ts","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-legend.tsx"],"mappings":";;YAGY,sBAAsBA,SAAa,OAAO;YAE1C,sBAAsBA,SAAa,OAAO;;;;;;;;;;;;;qBAczC;GAAyB,OAAA,sCAAmB,IAAA"}

package/dist/components/fields/fieldset/fieldset-legend.js

@@ -0,0 +1,35 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/fields/fieldset/fieldset-legend.tsx
+/**
+* Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao
+* `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a
+* borda do `<fieldset>`.
+*
+* Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`
+* acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`
+* padrão.
+*
+* Como título de seção, componha com o título que quiser:
+* `<Heading render={<Fieldset.Legend />}>`.
+*/
+const FieldsetLegend = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		"data-component": "Fieldset.Legend",
+		className: mergeStateClassNames([
+			"text-(length:--field-label-size,var(--text-sm))",
+			"leading-(--field-label-leading,--spacing(4))",
+			"font-medium",
+			"text-gray-12",
+			"data-disabled:opacity-50"
+		], className),
+		...rest
+	});
+};
+FieldsetLegend.displayName = "Fieldset.Legend";
+//#endregion
+export { FieldsetLegend };
+
+//# sourceMappingURL=fieldset-legend.js.map

package/dist/components/fields/fieldset/fieldset-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset-legend.js","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-legend.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldsetLegendProps = BaseFieldset.Legend.Props;\n\nexport type FieldsetLegendState = BaseFieldset.Legend.State;\n\n/**\n * Nome do grupo, com a tipografia do `Field.Label`. Renderiza um `<div>` ligado ao\n * `Fieldset.Root` por `aria-labelledby`: o `<legend>` nativo sai do fluxo do flex e fica sobre a\n * borda do `<fieldset>`.\n *\n * Num grupo de opções, o Base UI põe o `Fieldset.Root` dentro de um `Field.Root`, e a `Legend`\n * acompanha o `size` dele como o rótulo das opções. Fora de um `Field.Root`, fica no `size`\n * padrão.\n *\n * Como título de seção, componha com o título que quiser:\n * `<Heading render={<Fieldset.Legend />}>`.\n */\nexport const FieldsetLegend = (props: FieldsetLegendProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseFieldset.Legend\n      data-component=\"Fieldset.Legend\"\n      className={mergeStateClassNames(\n        [\n          // Tamanho e linha vêm do `size` do `Field.Root` em volta (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        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldsetLegend.displayName = 'Fieldset.Legend';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,QAAd;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

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

@@ -0,0 +1,34 @@
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/fields/fieldset/fieldset-root.d.ts
+export type FieldsetRootProps = Fieldset.Root.Props;
+export type FieldsetRootState = Fieldset.Root.State;
+/**
+ * Agrupa campos sob um nome, a `Fieldset.Legend`, num `<fieldset>`. Sem visual nem layout: a
+ * disposição vem por `className`.
+ *
+ * O `disabled` chega aos controles de dois jeitos: o nativo do `<fieldset>`, que desabilita
+ * `input` e `button` nativos, e um contexto que só o `Field.Root` lê. Um controle do Base UI sem
+ * `Field.Root` em volta só tem o elemento nativo desabilitado: o Checkbox para de alternar, mas
+ * não parece nem é anunciado como desabilitado.
+ *
+ * Para um grupo de opções, use `render={<Checkbox.Group />}`. Para o visual de caixa, componha
+ * com o Card neste sentido, `<Card.Root render={<Fieldset.Root />}>`: o inverso vira um `<div>` e
+ * perde o `disabled` nativo e o nome do grupo.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset.Root className="flex flex-col gap-4">
+ *   <Fieldset.Legend>Endereço</Fieldset.Legend>
+ *   <Field.Root name="street">
+ *     <Field.Label>Rua</Field.Label>
+ *     <Input />
+ *   </Field.Root>
+ * </Fieldset.Root>
+ * ```
+ */
+export declare const FieldsetRoot: {
+  (props: FieldsetRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=fieldset-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset-root.d.ts","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-root.tsx"],"mappings":";;YAGY,oBAAoBA,SAAa,KAAK;YAEtC,oBAAoBA,SAAa,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;qBA0BrC;GAAuB,OAAA,oCAAiB,IAAA"}

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

@@ -0,0 +1,41 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/fields/fieldset/fieldset-root.tsx
+/**
+* Agrupa campos sob um nome, a `Fieldset.Legend`, num `<fieldset>`. Sem visual nem layout: a
+* disposição vem por `className`.
+*
+* O `disabled` chega aos controles de dois jeitos: o nativo do `<fieldset>`, que desabilita
+* `input` e `button` nativos, e um contexto que só o `Field.Root` lê. Um controle do Base UI sem
+* `Field.Root` em volta só tem o elemento nativo desabilitado: o Checkbox para de alternar, mas
+* não parece nem é anunciado como desabilitado.
+*
+* Para um grupo de opções, use `render={<Checkbox.Group />}`. Para o visual de caixa, componha
+* com o Card neste sentido, `<Card.Root render={<Fieldset.Root />}>`: o inverso vira um `<div>` e
+* perde o `disabled` nativo e o nome do grupo.
+*
+* @example
+* ```tsx
+* <Fieldset.Root className="flex flex-col gap-4">
+*   <Fieldset.Legend>Endereço</Fieldset.Legend>
+*   <Field.Root name="street">
+*     <Field.Label>Rua</Field.Label>
+*     <Input />
+*   </Field.Root>
+* </Fieldset.Root>
+* ```
+*/
+const FieldsetRoot = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Fieldset.Root, {
+		"data-component": "Fieldset.Root",
+		className: mergeStateClassNames(["min-w-0"], className),
+		...rest
+	});
+};
+FieldsetRoot.displayName = "Fieldset.Root";
+//#endregion
+export { FieldsetRoot };
+
+//# sourceMappingURL=fieldset-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset-root.js","names":["BaseFieldset"],"sources":["../../../../src/components/fields/fieldset/fieldset-root.tsx"],"sourcesContent":["import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FieldsetRootProps = BaseFieldset.Root.Props;\n\nexport type FieldsetRootState = BaseFieldset.Root.State;\n\n/**\n * Agrupa campos sob um nome, a `Fieldset.Legend`, num `<fieldset>`. Sem visual nem layout: a\n * disposição vem por `className`.\n *\n * O `disabled` chega aos controles de dois jeitos: o nativo do `<fieldset>`, que desabilita\n * `input` e `button` nativos, e um contexto que só o `Field.Root` lê. Um controle do Base UI sem\n * `Field.Root` em volta só tem o elemento nativo desabilitado: o Checkbox para de alternar, mas\n * não parece nem é anunciado como desabilitado.\n *\n * Para um grupo de opções, use `render={<Checkbox.Group />}`. Para o visual de caixa, componha\n * com o Card neste sentido, `<Card.Root render={<Fieldset.Root />}>`: o inverso vira um `<div>` e\n * perde o `disabled` nativo e o nome do grupo.\n *\n * @example\n * ```tsx\n * <Fieldset.Root className=\"flex flex-col gap-4\">\n *   <Fieldset.Legend>Endereço</Fieldset.Legend>\n *   <Field.Root name=\"street\">\n *     <Field.Label>Rua</Field.Label>\n *     <Input />\n *   </Field.Root>\n * </Fieldset.Root>\n * ```\n */\nexport const FieldsetRoot = (props: FieldsetRootProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseFieldset.Root\n      data-component=\"Fieldset.Root\"\n      className={mergeStateClassNames(\n        [\n          // O `<fieldset>` tem `min-inline-size: min-content` do navegador: num Grid ou Flex, estoura em vez de encolher.\n          'min-w-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nFieldsetRoot.displayName = 'Fieldset.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,MAAd;EACE,kBAAe;EACf,WAAW,qBACT,CAEE,SACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { FieldsetLegend, FieldsetLegendProps, FieldsetLegendState } from "./fieldset-legend.js";
+import { FieldsetRoot, FieldsetRootProps, FieldsetRootState } from "./fieldset-root.js";
+declare namespace index_parts_d_exports {
+  export { FieldsetLegend as Legend, FieldsetLegendProps as LegendProps, FieldsetLegendState as LegendState, FieldsetRoot as Root, FieldsetRootProps as RootProps, FieldsetRootState as RootState };
+}
+//#endregion
+export { FieldsetLegend as Legend, type FieldsetLegendProps as LegendProps, type FieldsetLegendState as LegendState, FieldsetRoot as Root, type FieldsetRootProps as RootProps, type FieldsetRootState as RootState, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

package/dist/components/fields/fieldset/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { FieldsetLegend } from "./fieldset-legend.js";
+import { FieldsetRoot } from "./fieldset-root.js";
+//#region src/components/fields/fieldset/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Legend: () => FieldsetLegend,
+	Root: () => FieldsetRoot
+});
+//#endregion
+export { FieldsetLegend as Legend, FieldsetRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/fields/fieldset/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/fieldset/index.parts.ts"],"sourcesContent":["export { FieldsetLegend as Legend } from './fieldset-legend';\nexport { FieldsetRoot as Root } from './fieldset-root';\n\n/* types */\n\nexport type {\n  FieldsetLegendProps as LegendProps,\n  FieldsetLegendState as LegendState,\n} from './fieldset-legend';\nexport type {\n  FieldsetRootProps as RootProps,\n  FieldsetRootState as RootState,\n} from './fieldset-root';\n"],"mappings":""}

package/dist/components/fields/form/form.d.ts

@@ -0,0 +1,44 @@
+import { AnyObject } from "@lucasbernardosn/utils";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/fields/form/form.d.ts
+export type FormProps<FormValues extends AnyObject = AnyObject> = Form$1.Props<FormValues>;
+export type FormState = Form$1.State;
+export type FormActions = Form$1.Actions;
+export type FormValidationMode = Form$1.ValidationMode;
+export type FormSubmitEventDetails = Form$1.SubmitEventDetails;
+export type FormSubmitEventReason = Form$1.SubmitEventReason;
+/**
+ * O `<form>` que valida os `Field` dentro dele. Sai com `noValidate`: a validação nativa roda,
+ * mas quem mostra o erro é o `Field.Error`, não o balão do navegador. No envio, valida todos os
+ * campos, foca o primeiro inválido e bloqueia o envio.
+ *
+ * - `onFormSubmit` recebe os valores num objeto, pelas chaves do `name` de cada `Field.Root`, e
+ *   já chama o `preventDefault`.
+ * - `errors` recebe erros do servidor por `name`; cada um some quando o campo muda.
+ * - `validationMode` define quando os campos validam; o do `Field.Root` vence o do Form.
+ * - Com React Hook Form, use `onSubmit={handleSubmit(fn)}`.
+ *
+ * Sem layout: a disposição vem por `className` ou por `<Stack render={<Form />}>`. O inverso,
+ * `<Form render={<Stack />}>`, vira um `<div>` e o envio se perde.
+ *
+ * @example
+ * ```tsx
+ * <Form
+ *   className="flex flex-col gap-4"
+ *   onFormSubmit={(values) => save(values)}
+ * >
+ *   <Field.Root name="name">
+ *     <Field.Label>Nome</Field.Label>
+ *     <Input required />
+ *     <Field.Error />
+ *   </Field.Root>
+ *   <Button type="submit">Salvar</Button>
+ * </Form>
+ * ```
+ */
+export declare const Form: {
+  <FormValues extends AnyObject = AnyObject>(props: FormProps<FormValues>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=form.d.ts.map

package/dist/components/fields/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","names":["BaseForm"],"sources":["../../../../src/components/fields/form/form.tsx"],"mappings":";;;YAIY,UAAU,mBAAmB,YAAY,aACnDA,OAAS,MAAM;YAEL,YAAYA,OAAS;YAErB,cAAcA,OAAS;YAEvB,qBAAqBA,OAAS;YAE9B,yBAAyBA,OAAS;YAElC,wBAAwBA,OAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+BhC;GAAQ,mBAAmB,YAAS,WAAA,OACxC,UAAU,8BAAW,IAAA"}