@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-variants.d.ts","names":[],"sources":["../../../../src/components/fields/textarea/textarea-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,yBAAyB,SAAS;;;;;;;;;;;;;;;qBAmBlC,mBAAgB;;;6CA2H5B"}

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

@@ -0,0 +1,120 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/textarea/textarea-variants.ts
+const textareaDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+* mesmo jeito, explicados lá. As diferenças:
+* - sem `data-placeholder` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,
+*   do conteúdo;
+* - `block`, `resize-y` e o padding vertical em `--textarea-py`.
+*
+* Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:
+* - `py`;
+* - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o
+*   cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;
+* - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e
+*   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.
+*/
+const textareaVariants = cva([
+	"relative",
+	"block",
+	"w-full",
+	"min-h-[calc(1lh+var(--textarea-py)*2+2px)]",
+	"py-(--textarea-py)",
+	"scroll-pb-(--textarea-py)",
+	"appearance-none",
+	"outline-none",
+	"resize-y",
+	"text-start",
+	"font-normal",
+	"text-gray-12",
+	"placeholder:text-gray-9/90",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"[--textarea-focus-color:var(--color-black)]",
+	"dark:[--textarea-focus-color:var(--color-white)]",
+	"focus-visible:outline-1",
+	"focus-visible:outline-solid",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-(--textarea-focus-color)",
+	"focus-visible:border-(--textarea-focus-color)",
+	"data-focused:outline-1",
+	"data-focused:outline-solid",
+	"data-focused:-outline-offset-2",
+	"data-focused:outline-(--textarea-focus-color)",
+	"data-focused:border-(--textarea-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:[--textarea-focus-color:var(--color-red-9)]",
+	"aria-invalid:border-red-9",
+	"aria-invalid:[--textarea-focus-color:var(--color-red-9)]",
+	"user-invalid:border-red-9",
+	"user-invalid:[--textarea-focus-color:var(--color-red-9)]"
+], {
+	variants: {
+		variant: {
+			outline: [
+				"bg-white/90",
+				"dark:bg-black/90",
+				"border-gray-alpha-7"
+			],
+			subtle: ["bg-gray-4", "border-transparent"]
+		},
+		size: {
+			"2xs": [
+				"px-2",
+				"[--textarea-py:--spacing(1)]",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			xs: [
+				"px-2",
+				"[--textarea-py:--spacing(1.5)]",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			sm: [
+				"px-2.5",
+				"[--textarea-py:--spacing(2)]",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			md: [
+				"px-3",
+				"[--textarea-py:--spacing(2)]",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			lg: [
+				"px-4",
+				"[--textarea-py:--spacing(3)]",
+				"text-base"
+			],
+			xl: [
+				"px-4.5",
+				"[--textarea-py:--spacing(3.5)]",
+				"text-base"
+			],
+			"2xl": [
+				"px-5",
+				"[--textarea-py:--spacing(4)]",
+				"text-lg"
+			]
+		}
+	},
+	defaultVariants: {
+		size: textareaDefaultVariants.size,
+		variant: textareaDefaultVariants.variant
+	}
+});
+//#endregion
+export { textareaDefaultVariants, textareaVariants };
+
+//# sourceMappingURL=textarea-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-variants.js","names":[],"sources":["../../../../src/components/fields/textarea/textarea-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type TextareaVariants = {\n  /**\n   * Padding e tamanho do texto, com os nomes do `Input`. Sem altura fixa: ela vem de `rows` ou,\n   * com `field-sizing-content`, do conteúdo. Em tela de toque, do `2xs` ao `md` o texto sobe para\n   * 16px, para o iPhone não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const textareaDefaultVariants: Required<TextareaVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder` nem altura fixa: a altura vem de `rows` ou, com `field-sizing-content`,\n *   do conteúdo;\n * - `block`, `resize-y` e o padding vertical em `--textarea-py`.\n *\n * Cada tamanho declara o padding vertical em `--textarea-py`, que três classes da base leem:\n * - `py`;\n * - `scroll-pb`: ao digitar na última linha de um textarea com rolagem, o navegador rola até o\n *   cursor; sem ele, a linha fica colada na borda de baixo, sem o padding;\n * - `min-h`: uma linha (`1lh`, que acompanha o texto, inclusive em tela de toque), mais o padding e\n *   a borda. Arrastando a alça, o campo não encolhe a ponto de cortar o texto.\n */\nexport const textareaVariants = cva(\n  [\n    'relative',\n    'block', // Como `inline-block`, o padrão, deixa um vão embaixo, na linha de base do texto em volta\n    'w-full',\n    'min-h-[calc(1lh+var(--textarea-py)*2+2px)]',\n\n    'py-(--textarea-py)',\n    'scroll-pb-(--textarea-py)',\n\n    'appearance-none',\n    'outline-none',\n\n    'resize-y',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'placeholder:text-gray-9/90',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--textarea-focus-color:var(--color-black)]',\n    'dark:[--textarea-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--textarea-focus-color)',\n    'focus-visible:border-(--textarea-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--textarea-focus-color)',\n    'data-focused:border-(--textarea-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--textarea-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--textarea-focus-color:var(--color-red-9)]',\n    'user-invalid:border-red-9',\n    'user-invalid:[--textarea-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'px-2',\n          '[--textarea-py:--spacing(1)]',\n\n          'text-xs',\n          // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n          'any-pointer-coarse:text-base',\n        ],\n        xs: [\n          'px-2',\n          '[--textarea-py:--spacing(1.5)]',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'px-2.5',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'px-3',\n          '[--textarea-py:--spacing(2)]',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'px-4',\n          '[--textarea-py:--spacing(3)]',\n\n          'text-base',\n        ],\n        xl: [\n          'px-4.5',\n          '[--textarea-py:--spacing(3.5)]',\n\n          'text-base',\n        ],\n        '2xl': [\n          'px-5',\n          '[--textarea-py:--spacing(4)]',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: textareaDefaultVariants.size,\n      variant: textareaDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,0BAAsD;CACjE,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,wBAAwB;EAC9B,SAAS,wBAAwB;CACnC;AACF,CACF"}

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

@@ -0,0 +1,38 @@
+import { TextareaVariants } from "./textarea-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input } from "@base-ui/react/input";
+//#region src/components/fields/textarea/textarea.d.ts
+/**
+ * As props do `<textarea>`, com as do Base UI por cima: o `Input` do Base UI tipa as props como as
+ * de um `<input>`, sem `rows`, `cols` e `wrap`.
+ */
+export type TextareaProps = MergeOverride<React.ComponentPropsWithRef<'textarea'>, Pick<Input.Props, 'className' | 'style' | 'render' | 'onValueChange'> & TextareaVariants>;
+export type TextareaState = Input.State;
+export type TextareaChangeEventDetails = Input.ChangeEventDetails;
+export type TextareaChangeEventReason = Input.ChangeEventReason;
+/**
+ * O `Input` do Base UI renderizando um `<textarea>`: liga-se sozinho ao `Field` quando está dentro
+ * de um, como o `Input` da lib. Fora dele, o nome acessível vem de um `<label>` (em volta ou por
+ * `htmlFor`) ou de `aria-label`.
+ *
+ * O Enter quebra a linha: o Base UI só trata o Enter como envio num `<input>`.
+ *
+ * A altura vem de `rows`, com o mínimo de uma linha. Para crescer com o conteúdo,
+ * `field-sizing-content` com um `min-h-*` e um `max-h-*` na `className`: com ele, o `rows` deixa
+ * de valer. O redimensionamento manual é vertical (`resize-y`); `resize-none` desliga.
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   aria-label="Observações"
+ *   rows={4}
+ * />
+ * ```
+ */
+export declare const Textarea: {
+  (props: TextareaProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/textarea/textarea.tsx"],"mappings":";;;;;;;;;YAUY,gBAAgB,cAC1B,MAAM,mCACN,KAAKA,MAAU,6DACb;YAGQ,gBAAgBA,MAAU;YAE1B,6BAA6BA,MAAU;YAEvC,4BAA4BA,MAAU;;;;;;;;;;;;;;;;;;;;qBAuBrC;GAAmB,OAAA,gBAAa,MAAA,IAAA"}

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

@@ -0,0 +1,41 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { textareaVariants } from "./textarea-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+//#region src/components/fields/textarea/textarea.tsx
+const splitVariantProps = createSplitProps();
+/**
+* O `Input` do Base UI renderizando um `<textarea>`: liga-se sozinho ao `Field` quando está dentro
+* de um, como o `Input` da lib. Fora dele, o nome acessível vem de um `<label>` (em volta ou por
+* `htmlFor`) ou de `aria-label`.
+*
+* O Enter quebra a linha: o Base UI só trata o Enter como envio num `<input>`.
+*
+* A altura vem de `rows`, com o mínimo de uma linha. Para crescer com o conteúdo,
+* `field-sizing-content` com um `min-h-*` e um `max-h-*` na `className`: com ele, o `rows` deixa
+* de valer. O redimensionamento manual é vertical (`resize-y`); `resize-none` desliga.
+*
+* @example
+* ```tsx
+* <Textarea
+*   aria-label="Observações"
+*   rows={4}
+* />
+* ```
+*/
+const Textarea = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Input, {
+		"data-component": "Textarea",
+		render: /* @__PURE__ */ jsx("textarea", {}),
+		className: mergeStateClassNames(textareaVariants(variantProps), className),
+		...rest
+	});
+};
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":["BaseInput"],"sources":["../../../../src/components/fields/textarea/textarea.tsx"],"sourcesContent":["import { Input as BaseInput } from '@base-ui/react/input';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type React from 'react';\nimport { mergeStateClassNames } from '#utils';\nimport { type TextareaVariants, textareaVariants } from './textarea-variants';\n\n/**\n * As props do `<textarea>`, com as do Base UI por cima: o `Input` do Base UI tipa as props como as\n * de um `<input>`, sem `rows`, `cols` e `wrap`.\n */\nexport type TextareaProps = MergeOverride<\n  React.ComponentPropsWithRef<'textarea'>,\n  Pick<BaseInput.Props, 'className' | 'style' | 'render' | 'onValueChange'> &\n    TextareaVariants\n>;\n\nexport type TextareaState = BaseInput.State;\n\nexport type TextareaChangeEventDetails = BaseInput.ChangeEventDetails;\n\nexport type TextareaChangeEventReason = BaseInput.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<TextareaVariants>();\n\n/**\n * O `Input` do Base UI renderizando um `<textarea>`: liga-se sozinho ao `Field` quando está dentro\n * de um, como o `Input` da lib. Fora dele, o nome acessível vem de um `<label>` (em volta ou por\n * `htmlFor`) ou de `aria-label`.\n *\n * O Enter quebra a linha: o Base UI só trata o Enter como envio num `<input>`.\n *\n * A altura vem de `rows`, com o mínimo de uma linha. Para crescer com o conteúdo,\n * `field-sizing-content` com um `min-h-*` e um `max-h-*` na `className`: com ele, o `rows` deixa\n * de valer. O redimensionamento manual é vertical (`resize-y`); `resize-none` desliga.\n *\n * @example\n * ```tsx\n * <Textarea\n *   aria-label=\"Observações\"\n *   rows={4}\n * />\n * ```\n */\nexport const Textarea = (props: TextareaProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseInput\n      data-component=\"Textarea\"\n      render={<textarea />}\n      className={mergeStateClassNames(\n        textareaVariants(variantProps),\n        className,\n      )}\n      // O Base UI tipa os handlers com eventos de `<input>`, mas só repassa o evento do elemento que\n      // renderiza: aqui, o do `<textarea>`.\n      {...(rest as BaseInput.Props)}\n    />\n  );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":";;;;;;AAsBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;AAqB7D,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAD;EACE,kBAAe;EACf,QAAQ,oBAAC,YAAD,CAAW,CAAA;EACnB,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;EAGA,GAAK;CACN,CAAA;AAEL;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/box/box.d.ts
+export type BoxProps = useRender.ComponentProps<'div'>;
+/**
+ * Contêiner genérico, sem estilo próprio.
+ */
+export declare const Box: {
+  (props: BoxProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=box.d.ts.map

package/dist/components/layout/box/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","names":[],"sources":["../../../../src/components/layout/box/box.tsx"],"mappings":";;YAGY,WAAW,UAAU;;;;qBAKpB;GAAc,OAAA,2BAAQ,+CAAA"}

package/dist/components/layout/box/box.js

@@ -0,0 +1,23 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/box/box.tsx
+/**
+* Contêiner genérico, sem estilo próprio.
+*/
+const Box = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Box",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Box.displayName = "Box";
+//#endregion
+export { Box };
+
+//# sourceMappingURL=box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","names":[],"sources":["../../../../src/components/layout/box/box.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type BoxProps = useRender.ComponentProps<'div'>;\n\n/**\n * Contêiner genérico, sem estilo próprio.\n */\nexport const Box = (props: BoxProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Box',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBox.displayName = 'Box';\n"],"mappings":";;;;;;AAQA,MAAa,OAAO,UAAoB;CACtC,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,IAAI,cAAc"}

package/dist/components/layout/box/index.d.ts

@@ -0,0 +1,2 @@
+import { Box, BoxProps } from "./box.js";
+export { Box, type BoxProps };

package/dist/components/layout/box/index.js

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

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

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/center/center.d.ts
+export type CenterProps = useRender.ComponentProps<'div'>;
+/**
+ * Centraliza o conteúdo nos dois eixos com flexbox. Para seguir o fluxo do texto, com a largura
+ * do conteúdo, passe `inline-flex` na `className`.
+ */
+export declare const Center: {
+  (props: CenterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=center.d.ts.map

package/dist/components/layout/center/center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center.d.ts","names":[],"sources":["../../../../src/components/layout/center/center.tsx"],"mappings":";;YAGY,cAAc,UAAU;;;;;qBAMvB;GAAiB,OAAA,8BAAW,+CAAA"}

package/dist/components/layout/center/center.js

@@ -0,0 +1,28 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/center/center.tsx
+/**
+* Centraliza o conteúdo nos dois eixos com flexbox. Para seguir o fluxo do texto, com a largura
+* do conteúdo, passe `inline-flex` na `className`.
+*/
+const Center = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Center",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"justify-center"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Center.displayName = "Center";
+//#endregion
+export { Center };
+
+//# sourceMappingURL=center.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"center.js","names":[],"sources":["../../../../src/components/layout/center/center.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CenterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Centraliza o conteúdo nos dois eixos com flexbox. Para seguir o fluxo do texto, com a largura\n * do conteúdo, passe `inline-flex` na `className`.\n */\nexport const Center = (props: CenterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Center',\n    className: mergeTwClassNames(\n      ['flex', 'items-center', 'justify-center'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCenter.displayName = 'Center';\n"],"mappings":";;;;;;;AASA,MAAa,UAAU,UAAuB;CAC5C,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAgB;EAAgB,GACzC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,OAAO,cAAc"}

package/dist/components/layout/center/index.d.ts

@@ -0,0 +1,2 @@
+import { Center, CenterProps } from "./center.js";
+export { Center, type CenterProps };

package/dist/components/layout/center/index.js

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

package/dist/components/layout/center-absolute/center-absolute-variants.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/layout/center-absolute/center-absolute-variants.d.ts
+export type CenterAbsoluteVariants = {
+  /**
+   * Eixo em que o elemento é centralizado dentro do ancestral posicionado mais próximo.
+   *
+   * @default 'both'
+   */
+  axis?: 'horizontal' | 'vertical' | 'both';
+};
+export declare const centerAbsoluteDefaultVariants: Required<CenterAbsoluteVariants>;
+export declare const centerAbsoluteVariants: (props?: ({
+  axis?: "vertical" | "horizontal" | "both" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=center-absolute-variants.d.ts.map

package/dist/components/layout/center-absolute/center-absolute-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center-absolute-variants.d.ts","names":[],"sources":["../../../../src/components/layout/center-absolute/center-absolute-variants.ts"],"mappings":";YAEY;;;;;;EAMV;;qBAGW,+BAA+B,SAAS;qBAIxC,yBAAsB;;6CAgClC"}

package/dist/components/layout/center-absolute/center-absolute-variants.js

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+//#region src/components/layout/center-absolute/center-absolute-variants.ts
+const centerAbsoluteDefaultVariants = { axis: "both" };
+const centerAbsoluteVariants = cva([
+	"absolute",
+	"flex",
+	"items-center",
+	"justify-center"
+], {
+	variants: { axis: {
+		horizontal: [
+			"inset-s-1/2",
+			"-translate-x-1/2",
+			"rtl:translate-x-1/2"
+		],
+		vertical: ["top-1/2", "-translate-y-1/2"],
+		both: [
+			"inset-s-1/2",
+			"top-1/2",
+			"-translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:translate-x-1/2"
+		]
+	} },
+	defaultVariants: { axis: centerAbsoluteDefaultVariants.axis }
+});
+//#endregion
+export { centerAbsoluteDefaultVariants, centerAbsoluteVariants };
+
+//# sourceMappingURL=center-absolute-variants.js.map

package/dist/components/layout/center-absolute/center-absolute-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"center-absolute-variants.js","names":[],"sources":["../../../../src/components/layout/center-absolute/center-absolute-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CenterAbsoluteVariants = {\n  /**\n   * Eixo em que o elemento é centralizado dentro do ancestral posicionado mais próximo.\n   *\n   * @default 'both'\n   */\n  axis?: 'horizontal' | 'vertical' | 'both';\n};\n\nexport const centerAbsoluteDefaultVariants: Required<CenterAbsoluteVariants> = {\n  axis: 'both',\n};\n\nexport const centerAbsoluteVariants = cva(\n  ['absolute', 'flex', 'items-center', 'justify-center'],\n  {\n    variants: {\n      axis: {\n        horizontal: [\n          'inset-s-1/2',\n\n          '-translate-x-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        vertical: [\n          'top-1/2',\n\n          '-translate-y-1/2',\n        ],\n        both: [\n          'inset-s-1/2',\n          'top-1/2',\n\n          '-translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n      },\n    },\n    defaultVariants: {\n      axis: centerAbsoluteDefaultVariants.axis,\n    },\n  },\n);\n"],"mappings":";;AAWA,MAAa,gCAAkE,EAC7E,MAAM,OACR;AAEA,MAAa,yBAAyB,IACpC;CAAC;CAAY;CAAQ;CAAgB;AAAgB,GACrD;CACE,UAAU,EACR,MAAM;EACJ,YAAY;GACV;GAEA;GAEA;EACF;EACA,UAAU,CACR,WAEA,kBACF;EACA,MAAM;GACJ;GACA;GAEA;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,8BAA8B,KACtC;AACF,CACF"}

package/dist/components/layout/center-absolute/center-absolute.d.ts

@@ -0,0 +1,15 @@
+import { CenterAbsoluteVariants } from "./center-absolute-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/center-absolute/center-absolute.d.ts
+export type CenterAbsoluteProps = MergeOverride<useRender.ComponentProps<'div'>, CenterAbsoluteVariants>;
+/**
+ * Centraliza o elemento com `position: absolute` sobre o ancestral posicionado mais próximo,
+ * que precisa ter `relative` (ou outro `position`) para servir de referência.
+ */
+export declare const CenterAbsolute: {
+  (props: CenterAbsoluteProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=center-absolute.d.ts.map

package/dist/components/layout/center-absolute/center-absolute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center-absolute.d.ts","names":[],"sources":["../../../../src/components/layout/center-absolute/center-absolute.tsx"],"mappings":";;;;YAQY,sBAAsB,cAChC,UAAU,uBACV;;;;;qBASW;GAAyB,OAAA,sCAAmB,+CAAA"}

package/dist/components/layout/center-absolute/center-absolute.js

@@ -0,0 +1,28 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { centerAbsoluteVariants } from "./center-absolute-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/center-absolute/center-absolute.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Centraliza o elemento com `position: absolute` sobre o ancestral posicionado mais próximo,
+* que precisa ter `relative` (ou outro `position`) para servir de referência.
+*/
+const CenterAbsolute = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["axis"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "CenterAbsolute",
+		className: mergeTwClassNames(centerAbsoluteVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CenterAbsolute.displayName = "CenterAbsolute";
+//#endregion
+export { CenterAbsolute };
+
+//# sourceMappingURL=center-absolute.js.map

package/dist/components/layout/center-absolute/center-absolute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"center-absolute.js","names":[],"sources":["../../../../src/components/layout/center-absolute/center-absolute.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type CenterAbsoluteVariants,\n  centerAbsoluteVariants,\n} from './center-absolute-variants';\n\nexport type CenterAbsoluteProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  CenterAbsoluteVariants\n>;\n\nconst splitVariantProps = createSplitProps<CenterAbsoluteVariants>();\n\n/**\n * Centraliza o elemento com `position: absolute` sobre o ancestral posicionado mais próximo,\n * que precisa ter `relative` (ou outro `position`) para servir de referência.\n */\nexport const CenterAbsolute = (props: CenterAbsoluteProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['axis']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'CenterAbsolute',\n    className: mergeTwClassNames(\n      centerAbsoluteVariants(variantProps),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCenterAbsolute.displayName = 'CenterAbsolute';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAyC;;;;;AAMnE,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,uBAAuB,YAAY,GACnC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/components/layout/center-absolute/index.d.ts

@@ -0,0 +1,3 @@
+import { CenterAbsoluteVariants } from "./center-absolute-variants.js";
+import { CenterAbsolute, CenterAbsoluteProps } from "./center-absolute.js";
+export { CenterAbsolute, type CenterAbsoluteProps, type CenterAbsoluteVariants };

package/dist/components/layout/center-absolute/index.js

@@ -0,0 +1,2 @@
+import { CenterAbsolute } from "./center-absolute.js";
+export { CenterAbsolute };

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

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/circle/circle.d.ts
+export type CircleProps = useRender.ComponentProps<'div'>;
+/**
+ * Contêiner redondo que centraliza o conteúdo. O diâmetro (`size-*`) fica com quem usa.
+ */
+export declare const Circle: {
+  (props: CircleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=circle.d.ts.map

package/dist/components/layout/circle/circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.d.ts","names":[],"sources":["../../../../src/components/layout/circle/circle.tsx"],"mappings":";;YAGY,cAAc,UAAU;;;;qBAKvB;GAAiB,OAAA,8BAAW,+CAAA"}

package/dist/components/layout/circle/circle.js

@@ -0,0 +1,31 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/circle/circle.tsx
+/**
+* Contêiner redondo que centraliza o conteúdo. O diâmetro (`size-*`) fica com quem usa.
+*/
+const Circle = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Circle",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"grow-0",
+			"size-min",
+			"rounded-full"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Circle.displayName = "Circle";
+//#endregion
+export { Circle };
+
+//# sourceMappingURL=circle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"circle.js","names":[],"sources":["../../../../src/components/layout/circle/circle.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CircleProps = useRender.ComponentProps<'div'>;\n\n/**\n * Contêiner redondo que centraliza o conteúdo. O diâmetro (`size-*`) fica com quem usa.\n */\nexport const Circle = (props: CircleProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Circle',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-center',\n\n        'shrink-0',\n        'grow-0',\n\n        'size-min',\n\n        'rounded-full',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCircle.displayName = 'Circle';\n"],"mappings":";;;;;;AAQA,MAAa,UAAU,UAAuB;CAC5C,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,OAAO,cAAc"}

package/dist/components/layout/circle/index.d.ts

@@ -0,0 +1,2 @@
+import { Circle, CircleProps } from "./circle.js";
+export { Circle, type CircleProps };

package/dist/components/layout/circle/index.js

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

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

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/flex/flex.d.ts
+export type FlexProps = useRender.ComponentProps<'div'>;
+/**
+ * Contêiner `flex`. Direção, alinhamento e espaçamento ficam com quem usa.
+ */
+export declare const Flex: {
+  (props: FlexProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=flex.d.ts.map

package/dist/components/layout/flex/flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.d.ts","names":[],"sources":["../../../../src/components/layout/flex/flex.tsx"],"mappings":";;YAGY,YAAY,UAAU;;;;qBAKrB;GAAe,OAAA,4BAAS,+CAAA"}

package/dist/components/layout/flex/flex.js

@@ -0,0 +1,23 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/flex/flex.tsx
+/**
+* Contêiner `flex`. Direção, alinhamento e espaçamento ficam com quem usa.
+*/
+const Flex = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Flex",
+		className: mergeTwClassNames(["flex"], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Flex.displayName = "Flex";
+//#endregion
+export { Flex };
+
+//# sourceMappingURL=flex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","names":[],"sources":["../../../../src/components/layout/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type FlexProps = useRender.ComponentProps<'div'>;\n\n/**\n * Contêiner `flex`. Direção, alinhamento e espaçamento ficam com quem usa.\n */\nexport const Flex = (props: FlexProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Flex',\n    className: mergeTwClassNames(['flex'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nFlex.displayName = 'Flex';\n"],"mappings":";;;;;;AAQA,MAAa,QAAQ,UAAqB;CACxC,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,MAAM,GAAG,SAAS;CAClD;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

package/dist/components/layout/flex/index.d.ts

@@ -0,0 +1,2 @@
+import { Flex, FlexProps } from "./flex.js";
+export { Flex, type FlexProps };

package/dist/components/layout/flex/index.js

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

package/dist/components/layout/float/float-variants.d.ts

@@ -0,0 +1,19 @@
+//#region src/components/layout/float/float-variants.d.ts
+export type FloatVariants = {
+  /**
+   * Canto ou borda do ancestral posicionado onde o elemento fica, centralizado sobre a linha.
+   *
+   * @default 'top-end'
+   */
+  placement?: 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+};
+export declare const floatDefaultVariants: Required<FloatVariants>;
+/**
+ * `inset-s`/`inset-e` seguem a direção do texto, mas o `translate-x` é físico: em RTL ele inverte
+ * de sinal (`rtl:`), para o elemento continuar metade dentro e metade fora do canto.
+ */
+export declare const floatVariants: (props?: ({
+  placement?: "bottom-start" | "bottom-end" | "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-center" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=float-variants.d.ts.map

package/dist/components/layout/float/float-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-variants.d.ts","names":[],"sources":["../../../../src/components/layout/float/float-variants.ts"],"mappings":";YAEY;;;;;;EAMV;;qBAYW,sBAAsB,SAAS;;;;;qBAQ/B,gBAAa;;6CAyFzB"}