@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

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. 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>`.
+ *
+ * Tem dois papéis, que dependem de onde está:
+ * - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro
+ *   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;
+ * - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.
+ *
+ * Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,
+ * as variáveis não existem.
+ */
+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,36 @@
+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. 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>`.
+*
+* Tem dois papéis, que dependem de onde está:
+* - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro
+*   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;
+* - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.
+*
+* Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,
+* as variáveis não existem.
+*/
+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-base))",
+			"leading-(--field-label-leading,--spacing(6))",
+			"font-medium",
+			"text-gray-12",
+			"text-balance",
+			"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. Renderiza um `<div>` ligado ao `Fieldset.Root` por `aria-labelledby`: o\n * `<legend>` nativo sai do fluxo do flex e fica sobre a borda do `<fieldset>`.\n *\n * Tem dois papéis, que dependem de onde está:\n * - dentro de um `Field.Root`, como num grupo de opções (o Base UI põe o `Fieldset.Root` dentro\n *   dele), é o rótulo do grupo: acompanha o `size` do campo, como o rótulo das opções;\n * - fora de um `Field.Root`, é o título de uma seção de campos, com a tipografia dos títulos.\n *\n * Ele lê as variáveis do `Field.Root` com a tipografia do título como fallback: sem `Field.Root`,\n * as variáveis não existem.\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`); sem\n          // ele, caem na tipografia do título.\n          'text-(length:--field-label-size,var(--text-base))',\n          'leading-(--field-label-leading,--spacing(6))',\n          'font-medium',\n          'text-gray-12',\n          'text-balance',\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;GAGE;GACA;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"}

package/dist/components/fields/form/form.js

@@ -0,0 +1,46 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/fields/form/form.tsx
+/**
+* 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>
+* ```
+*/
+const Form = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Form$1, {
+		"data-component": "Form",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+Form.displayName = "Form";
+//#endregion
+export { Form };
+
+//# sourceMappingURL=form.js.map

package/dist/components/fields/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":["BaseForm"],"sources":["../../../../src/components/fields/form/form.tsx"],"sourcesContent":["import { Form as BaseForm } from '@base-ui/react/form';\nimport type { AnyObject } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type FormProps<FormValues extends AnyObject = AnyObject> =\n  BaseForm.Props<FormValues>;\n\nexport type FormState = BaseForm.State;\n\nexport type FormActions = BaseForm.Actions;\n\nexport type FormValidationMode = BaseForm.ValidationMode;\n\nexport type FormSubmitEventDetails = BaseForm.SubmitEventDetails;\n\nexport type FormSubmitEventReason = BaseForm.SubmitEventReason;\n\n/**\n * O `<form>` que valida os `Field` dentro dele. Sai com `noValidate`: a validação nativa roda,\n * mas quem mostra o erro é o `Field.Error`, não o balão do navegador. No envio, valida todos os\n * campos, foca o primeiro inválido e bloqueia o envio.\n *\n * - `onFormSubmit` recebe os valores num objeto, pelas chaves do `name` de cada `Field.Root`, e\n *   já chama o `preventDefault`.\n * - `errors` recebe erros do servidor por `name`; cada um some quando o campo muda.\n * - `validationMode` define quando os campos validam; o do `Field.Root` vence o do Form.\n * - Com React Hook Form, use `onSubmit={handleSubmit(fn)}`.\n *\n * Sem layout: a disposição vem por `className` ou por `<Stack render={<Form />}>`. O inverso,\n * `<Form render={<Stack />}>`, vira um `<div>` e o envio se perde.\n *\n * @example\n * ```tsx\n * <Form\n *   className=\"flex flex-col gap-4\"\n *   onFormSubmit={(values) => save(values)}\n * >\n *   <Field.Root name=\"name\">\n *     <Field.Label>Nome</Field.Label>\n *     <Input required />\n *     <Field.Error />\n *   </Field.Root>\n *   <Button type=\"submit\">Salvar</Button>\n * </Form>\n * ```\n */\nexport const Form = <FormValues extends AnyObject = AnyObject>(\n  props: FormProps<FormValues>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseForm<FormValues>\n      data-component=\"Form\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nForm.displayName = 'Form';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,QACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAD;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,KAAK,cAAc"}

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

@@ -0,0 +1,2 @@
+import { Form, FormActions, FormProps, FormState, FormSubmitEventDetails, FormSubmitEventReason, FormValidationMode } from "./form.js";
+export { Form, type FormActions, type FormProps, type FormState, type FormSubmitEventDetails, type FormSubmitEventReason, type FormValidationMode };

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

@@ -0,0 +1,2 @@
+import { Form } from "./form.js";
+export { Form };

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

@@ -0,0 +1,3 @@
+import { InputVariants, inputVariants } from "./input-variants.js";
+import { Input, InputChangeEventDetails, InputChangeEventReason, InputProps, InputState } from "./input.js";
+export { Input, type InputChangeEventDetails, type InputChangeEventReason, type InputProps, type InputState, type InputVariants, inputVariants };

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

@@ -0,0 +1,3 @@
+import { inputVariants } from "./input-variants.js";
+import { Input } from "./input.js";
+export { Input, inputVariants };

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

@@ -0,0 +1,39 @@
+//#region src/components/fields/input/input-variants.d.ts
+export type InputVariants = {
+  /**
+   * Altura, padding e tamanho do texto. `sm` = `h-9`, `md` = `h-10`, alinhado aos outros
+   * controles de formulário. Substitui o atributo nativo `size`: a largura vem do CSS. Em tela
+   * de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone não dar zoom no foco.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Fundo e borda do campo.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'subtle';
+};
+export declare const inputDefaultVariants: Required<InputVariants>;
+/**
+ * Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o
+ * `PatternInput` e o trigger do `Select` 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`.
+ *
+ * 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
+ * `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o
+ * `focus-ring-inside` do tema não reage a `data-focused`.
+ *
+ * Inválido troca `--input-focus-color` e a borda pelo vermelho: `data-invalid` vem do `Field`,
+ * `aria-invalid` da validação manual e `:user-invalid` da validação nativa (`required`, `type`),
+ * que só casa depois de o usuário mexer no campo ou tentar enviar.
+ */
+export declare const inputVariants: (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-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/input/input-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,sBAAsB,SAAS;;;;;;;;;;;;;;;;qBAoB/B,gBAAa;;;6CAmIzB"}

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

@@ -0,0 +1,124 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/input/input-variants.ts
+const inputDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Origem do visual dos campos de formulário: o `Textarea`, o `NumberInput`, o `CurrencyBrlInput`, o
+* `PatternInput` e o trigger do `Select` 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`.
+*
+* 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
+* `:focus-visible` e para o `data-focused` do `Field`, com as mesmas classes nos dois — o
+* `focus-ring-inside` do tema não reage a `data-focused`.
+*
+* Inválido troca `--input-focus-color` e a borda pelo vermelho: `data-invalid` vem do `Field`,
+* `aria-invalid` da validação manual e `:user-invalid` da validação nativa (`required`, `type`),
+* que só casa depois de o usuário mexer no campo ou tentar enviar.
+*/
+const inputVariants = cva([
+	"relative",
+	"w-full",
+	"appearance-none",
+	"outline-none",
+	"text-start",
+	"font-normal",
+	"text-gray-12",
+	"placeholder:text-gray-9/90",
+	"data-placeholder:text-gray-9/90",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"[--input-focus-color:var(--color-black)]",
+	"dark:[--input-focus-color:var(--color-white)]",
+	"focus-visible:outline-1",
+	"focus-visible:outline-solid",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-(--input-focus-color)",
+	"focus-visible:border-(--input-focus-color)",
+	"data-focused:outline-1",
+	"data-focused:outline-solid",
+	"data-focused:-outline-offset-2",
+	"data-focused:outline-(--input-focus-color)",
+	"data-focused:border-(--input-focus-color)",
+	"disabled:opacity-50",
+	"disabled:cursor-not-allowed",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-invalid:border-red-9",
+	"data-invalid:[--input-focus-color:var(--color-red-9)]",
+	"aria-invalid:border-red-9",
+	"aria-invalid:[--input-focus-color:var(--color-red-9)]",
+	"user-invalid:border-red-9",
+	"user-invalid:[--input-focus-color:var(--color-red-9)]"
+], {
+	variants: {
+		variant: {
+			outline: [
+				"bg-white/90",
+				"dark:bg-black/90",
+				"border-gray-alpha-7"
+			],
+			subtle: ["bg-gray-4", "border-transparent"]
+		},
+		size: {
+			"2xs": [
+				"h-7",
+				"min-w-7",
+				"px-2",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			xs: [
+				"h-8",
+				"min-w-8",
+				"px-2",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			sm: [
+				"h-9",
+				"min-w-9",
+				"px-2.5",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			md: [
+				"h-10",
+				"min-w-10",
+				"px-3",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			lg: [
+				"h-11",
+				"min-w-11",
+				"px-4",
+				"text-base"
+			],
+			xl: [
+				"h-12",
+				"min-w-12",
+				"px-4.5",
+				"text-base"
+			],
+			"2xl": [
+				"h-16",
+				"min-w-16",
+				"px-5",
+				"text-lg"
+			]
+		}
+	},
+	defaultVariants: {
+		size: inputDefaultVariants.size,
+		variant: inputDefaultVariants.variant
+	}
+});
+//#endregion
+export { inputDefaultVariants, inputVariants };
+
+//# sourceMappingURL=input-variants.js.map

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

@@ -0,0 +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` e o trigger do `Select` 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: `data-invalid` vem do `Field`,\n * `aria-invalid` da validação manual e `:user-invalid` da validação nativa (`required`, `type`),\n * que só casa depois de o usuário mexer no campo ou tentar enviar.\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-9/90',\n    'data-placeholder:text-gray-9/90',\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    'user-invalid:border-red-9',\n    'user-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;;;;;;;;;;;;;;;;AAiBA,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;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/input.d.ts

@@ -0,0 +1,30 @@
+import { InputVariants } from "./input-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/fields/input/input.d.ts
+export type InputProps = MergeOverride<Input$1.Props, InputVariants>;
+export type InputState = Input$1.State;
+export type InputChangeEventDetails = Input$1.ChangeEventDetails;
+export type InputChangeEventReason = Input$1.ChangeEventReason;
+/**
+ * O `<input>` nativo do Base UI, que se liga sozinho ao `Field` quando está
+ * dentro de um. Fora dele, o nome acessível vem de um `<label>` (em volta ou
+ * por `htmlFor`) ou de `aria-label`.
+ *
+ * `size` é a variante de altura e substitui o atributo nativo `size`: a
+ * largura vem do CSS (`w-full`), sobrescrevível por `className`.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   aria-label="Nome"
+ *   placeholder="Seu nome"
+ * />
+ * ```
+ */
+export declare const Input: {
+  (props: InputProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/input/input.tsx"],"mappings":";;;;YAKY,aAAa,cAAcA,QAAU,OAAO;YAE5C,aAAaA,QAAU;YAEvB,0BAA0BA,QAAU;YAEpC,yBAAyBA,QAAU;;;;;;;;;;;;;;;;;qBAoBlC;GAAgB,OAAA,6BAAU,IAAA"}

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

@@ -0,0 +1,37 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { inputVariants } from "./input-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/fields/input/input.tsx
+const splitVariantProps = createSplitProps();
+/**
+* O `<input>` nativo do Base UI, que se liga sozinho ao `Field` quando está
+* dentro de um. Fora dele, o nome acessível vem de um `<label>` (em volta ou
+* por `htmlFor`) ou de `aria-label`.
+*
+* `size` é a variante de altura e substitui o atributo nativo `size`: a
+* largura vem do CSS (`w-full`), sobrescrevível por `className`.
+*
+* @example
+* ```tsx
+* <Input
+*   aria-label="Nome"
+*   placeholder="Seu nome"
+* />
+* ```
+*/
+const Input = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Input$1, {
+		"data-component": "Input",
+		className: mergeStateClassNames(inputVariants(variantProps), className),
+		...rest
+	});
+};
+Input.displayName = "Input";
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["BaseInput"],"sources":["../../../../src/components/fields/input/input.tsx"],"sourcesContent":["import { Input as BaseInput } from '@base-ui/react/input';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport { type InputVariants, inputVariants } from './input-variants';\n\nexport type InputProps = MergeOverride<BaseInput.Props, InputVariants>;\n\nexport type InputState = BaseInput.State;\n\nexport type InputChangeEventDetails = BaseInput.ChangeEventDetails;\n\nexport type InputChangeEventReason = BaseInput.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<InputVariants>();\n\n/**\n * O `<input>` nativo do Base UI, que se liga sozinho ao `Field` quando está\n * dentro de um. Fora dele, o nome acessível vem de um `<label>` (em volta ou\n * por `htmlFor`) ou de `aria-label`.\n *\n * `size` é a variante de altura e substitui o atributo nativo `size`: a\n * largura vem do CSS (`w-full`), sobrescrevível por `className`.\n *\n * @example\n * ```tsx\n * <Input\n *   aria-label=\"Nome\"\n *   placeholder=\"Seu nome\"\n * />\n * ```\n */\nexport const Input = (props: InputProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseInput\n      data-component=\"Input\"\n      className={mergeStateClassNames(inputVariants(variantProps), className)}\n      {...rest}\n    />\n  );\n};\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;AAaA,MAAM,oBAAoB,iBAAgC;;;;;;;;;;;;;;;;;AAkB1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAD;EACE,kBAAe;EACf,WAAW,qBAAqB,cAAc,YAAY,GAAG,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc"}

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

@@ -0,0 +1,3 @@
+import { NumberInputVariants } from "./number-input-variants.js";
+import { NumberInput, NumberInputChangeEventDetails, NumberInputProps, NumberInputState } from "./number-input.js";
+export { NumberInput, type NumberInputChangeEventDetails, type NumberInputProps, type NumberInputState, type NumberInputVariants };

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

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