@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/layout/splitter/use-splitter-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-splitter-context.js","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { UseSplitterReturn } from './use-splitter';\n\n/**\n * Provider e hook para acessar a API do Splitter.\n *\n * O hook lança um erro quando chamado fora de um `Splitter.Root` ou\n * `Splitter.RootProvider`.\n */\nexport const [SplitterContextProvider, useSplitterContext] =\n  createContext<UseSplitterReturn>({\n    name: 'SplitterContext',\n    providers: ['Splitter.Root', 'Splitter.RootProvider'],\n  });\n"],"mappings":";;;;;;;;AASA,MAAa,CAAC,yBAAyB,sBACrC,cAAiC;CAC/B,MAAM;CACN,WAAW,CAAC,iBAAiB,uBAAuB;AACtD,CAAC"}

package/dist/components/layout/splitter/use-splitter.d.ts

@@ -0,0 +1,47 @@
+import { Optional } from "@lucasbernardosn/utils";
+import { PropTypes } from "@zag-js/react";
+import * as ZagSplitter from "@zag-js/splitter";
+//#region src/components/layout/splitter/use-splitter.d.ts
+/**
+ * Propriedades do hook `useSplitter`.
+ *
+ * São as mesmas opções aceitas pelo `Splitter.Root`, com o `id` opcional — um
+ * id único é gerado quando ele não é informado.
+ */
+export type UseSplitterProps = Optional<ZagSplitter.Props, 'id'>;
+/**
+ * Retorno do hook `useSplitter`: a API completa do Splitter, com os tamanhos
+ * atuais, o estado de arrasto, os comandos (`setSizes`, `resetSizes`,
+ * `collapsePanel`…) e as props de cada parte.
+ */
+export type UseSplitterReturn = ZagSplitter.Api<PropTypes>;
+/**
+ * Cria e gerencia o estado de um Splitter.
+ *
+ * Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os
+ * tamanhos de fora da subárvore do componente. Nos casos comuns prefira o
+ * `Splitter.Root`, que chama este hook internamente.
+ *
+ * O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando
+ * ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com
+ * `useSplitterContext` num componente pequeno, só onde ela é usada.
+ *
+ * @example
+ * ```tsx
+ * const splitter = useSplitter({
+ *   panels: [{ id: 'a' }, { id: 'b' }],
+ *   defaultSize: [50, 50],
+ * });
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => splitter.resetSizes()}>Restaurar</button>
+ *
+ *     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>
+ *   </>
+ * );
+ * ```
+ */
+export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;
+//#endregion
+//# sourceMappingURL=use-splitter.d.ts.map

package/dist/components/layout/splitter/use-splitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-splitter.d.ts","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter.ts"],"mappings":";;;;;;;;;;YAWY,mBAAmB,SAAS,YAAY;;;;;;YAOxC,oBAAoB,YAAY,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6BnC,cAAe,OAAO,qBAAmB"}

package/dist/components/layout/splitter/use-splitter.js

@@ -0,0 +1,43 @@
+import { useId } from "react";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import * as ZagSplitter from "@zag-js/splitter";
+//#region src/components/layout/splitter/use-splitter.ts
+/**
+* Cria e gerencia o estado de um Splitter.
+*
+* Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os
+* tamanhos de fora da subárvore do componente. Nos casos comuns prefira o
+* `Splitter.Root`, que chama este hook internamente.
+*
+* O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando
+* ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com
+* `useSplitterContext` num componente pequeno, só onde ela é usada.
+*
+* @example
+* ```tsx
+* const splitter = useSplitter({
+*   panels: [{ id: 'a' }, { id: 'b' }],
+*   defaultSize: [50, 50],
+* });
+*
+* return (
+*   <>
+*     <button onClick={() => splitter.resetSizes()}>Restaurar</button>
+*
+*     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>
+*   </>
+* );
+* ```
+*/
+const useSplitter = (props) => {
+	const id = useId();
+	const service = useMachine(ZagSplitter.machine, {
+		id,
+		...props
+	});
+	return ZagSplitter.connect(service, normalizeProps);
+};
+//#endregion
+export { useSplitter };
+
+//# sourceMappingURL=use-splitter.js.map

package/dist/components/layout/splitter/use-splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-splitter.js","names":[],"sources":["../../../../src/components/layout/splitter/use-splitter.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/utils';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport * as ZagSplitter from '@zag-js/splitter';\nimport { useId } from 'react';\n\n/**\n * Propriedades do hook `useSplitter`.\n *\n * São as mesmas opções aceitas pelo `Splitter.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseSplitterProps = Optional<ZagSplitter.Props, 'id'>;\n\n/**\n * Retorno do hook `useSplitter`: a API completa do Splitter, com os tamanhos\n * atuais, o estado de arrasto, os comandos (`setSizes`, `resetSizes`,\n * `collapsePanel`…) e as props de cada parte.\n */\nexport type UseSplitterReturn = ZagSplitter.Api<PropTypes>;\n\n/**\n * Cria e gerencia o estado de um Splitter.\n *\n * Use junto do `Splitter.RootProvider` quando for preciso ler ou comandar os\n * tamanhos de fora da subárvore do componente. Nos casos comuns prefira o\n * `Splitter.Root`, que chama este hook internamente.\n *\n * O componente que chama o hook re-renderiza a cada quadro do arrasto. Quando\n * ele monta uma árvore grande, prefira o `Splitter.Root` e leia a API com\n * `useSplitterContext` num componente pequeno, só onde ela é usada.\n *\n * @example\n * ```tsx\n * const splitter = useSplitter({\n *   panels: [{ id: 'a' }, { id: 'b' }],\n *   defaultSize: [50, 50],\n * });\n *\n * return (\n *   <>\n *     <button onClick={() => splitter.resetSizes()}>Restaurar</button>\n *\n *     <Splitter.RootProvider value={splitter}>…</Splitter.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const useSplitter = (props: UseSplitterProps): UseSplitterReturn => {\n  // Id de fallback: só é usado quando `props.id` não é informado.\n  const id = useId();\n\n  const service = useMachine(ZagSplitter.machine, { id, ...props });\n\n  return ZagSplitter.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,eAAe,UAA+C;CAEzE,MAAM,KAAK,MAAM;CAEjB,MAAM,UAAU,WAAW,YAAY,SAAS;EAAE;EAAI,GAAG;CAAM,CAAC;CAEhE,OAAO,YAAY,QAAQ,SAAS,cAAc;AACpD"}

package/dist/components/layout/stack/h-stack.d.ts

@@ -0,0 +1,12 @@
+import { StackProps } from "./stack.js";
+//#region src/components/layout/stack/h-stack.d.ts
+export type HStackProps = Omit<StackProps, 'direction'>;
+/**
+ * `Stack` em linha, com os itens centralizados no eixo vertical.
+ */
+export declare const HStack: {
+  (props: HStackProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=h-stack.d.ts.map

package/dist/components/layout/stack/h-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"h-stack.d.ts","names":[],"sources":["../../../../src/components/layout/stack/h-stack.tsx"],"mappings":";;YAGY,cAAc,KAAK;;;;qBAKlB;GAAiB,OAAA,8BAAW,IAAA"}

package/dist/components/layout/stack/h-stack.js

@@ -0,0 +1,21 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Stack } from "./stack.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/stack/h-stack.tsx
+/**
+* `Stack` em linha, com os itens centralizados no eixo vertical.
+*/
+const HStack = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Stack, {
+		"data-component": "HStack",
+		...rest,
+		className: mergeTwClassNames(["items-center"], className),
+		direction: "row"
+	});
+};
+HStack.displayName = "HStack";
+//#endregion
+export { HStack };
+
+//# sourceMappingURL=h-stack.js.map

package/dist/components/layout/stack/h-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"h-stack.js","names":[],"sources":["../../../../src/components/layout/stack/h-stack.tsx"],"sourcesContent":["import { mergeTwClassNames } from '#utils';\nimport { Stack, type StackProps } from './stack';\n\nexport type HStackProps = Omit<StackProps, 'direction'>;\n\n/**\n * `Stack` em linha, com os itens centralizados no eixo vertical.\n */\nexport const HStack = (props: HStackProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <Stack\n      data-component=\"HStack\"\n      {...rest}\n      className={mergeTwClassNames(['items-center'], className)}\n      direction=\"row\"\n    />\n  );\n};\n\nHStack.displayName = 'HStack';\n"],"mappings":";;;;;;;AAQA,MAAa,UAAU,UAAuB;CAC5C,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,OAAD;EACE,kBAAe;EACf,GAAI;EACJ,WAAW,kBAAkB,CAAC,cAAc,GAAG,SAAS;EACxD,WAAU;CACX,CAAA;AAEL;AAEA,OAAO,cAAc"}

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

@@ -0,0 +1,5 @@
+import { StackVariants } from "./stack-variants.js";
+import { Stack, StackProps } from "./stack.js";
+import { HStack, HStackProps } from "./h-stack.js";
+import { VStack, VStackProps } from "./v-stack.js";
+export { HStack, type HStackProps, Stack, type StackProps, type StackVariants, VStack, type VStackProps };

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

@@ -0,0 +1,4 @@
+import { Stack } from "./stack.js";
+import { HStack } from "./h-stack.js";
+import { VStack } from "./v-stack.js";
+export { HStack, Stack, VStack };

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

@@ -0,0 +1,15 @@
+//#region src/components/layout/stack/stack-variants.d.ts
+export type StackVariants = {
+  /**
+   * Direção em que os itens são empilhados.
+   *
+   * @default 'col'
+   */
+  direction?: 'col' | 'row' | 'col-reverse' | 'row-reverse';
+};
+export declare const stackDefaultVariants: Required<StackVariants>;
+export declare const stackVariants: (props?: ({
+  direction?: "col" | "row" | "col-reverse" | "row-reverse" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=stack-variants.d.ts.map

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

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

package/dist/components/layout/stack/stack-variants.js

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+//#region src/components/layout/stack/stack-variants.ts
+const stackDefaultVariants = { direction: "col" };
+const stackVariants = cva(["flex", "gap-2"], {
+	variants: { direction: {
+		col: ["flex-col"],
+		row: ["flex-row"],
+		"col-reverse": ["flex-col-reverse"],
+		"row-reverse": ["flex-row-reverse"]
+	} },
+	defaultVariants: { direction: stackDefaultVariants.direction }
+});
+//#endregion
+export { stackDefaultVariants, stackVariants };
+
+//# sourceMappingURL=stack-variants.js.map

package/dist/components/layout/stack/stack-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-variants.js","names":[],"sources":["../../../../src/components/layout/stack/stack-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type StackVariants = {\n  /**\n   * Direção em que os itens são empilhados.\n   *\n   * @default 'col'\n   */\n  direction?: 'col' | 'row' | 'col-reverse' | 'row-reverse';\n};\n\nexport const stackDefaultVariants: Required<StackVariants> = {\n  direction: 'col',\n};\n\nexport const stackVariants = cva(['flex', 'gap-2'], {\n  variants: {\n    direction: {\n      col: ['flex-col'],\n      row: ['flex-row'],\n      'col-reverse': ['flex-col-reverse'],\n      'row-reverse': ['flex-row-reverse'],\n    },\n  },\n  defaultVariants: {\n    direction: stackDefaultVariants.direction,\n  },\n});\n"],"mappings":";;AAWA,MAAa,uBAAgD,EAC3D,WAAW,MACb;AAEA,MAAa,gBAAgB,IAAI,CAAC,QAAQ,OAAO,GAAG;CAClD,UAAU,EACR,WAAW;EACT,KAAK,CAAC,UAAU;EAChB,KAAK,CAAC,UAAU;EAChB,eAAe,CAAC,kBAAkB;EAClC,eAAe,CAAC,kBAAkB;CACpC,EACF;CACA,iBAAiB,EACf,WAAW,qBAAqB,UAClC;AACF,CAAC"}

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

@@ -0,0 +1,14 @@
+import { StackVariants } from "./stack-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/stack/stack.d.ts
+export type StackProps = MergeOverride<useRender.ComponentProps<'div'>, StackVariants>;
+/**
+ * Empilha os itens numa direção, com espaçamento entre eles.
+ */
+export declare const Stack: {
+  (props: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","names":[],"sources":["../../../../src/components/layout/stack/stack.tsx"],"mappings":";;;;YAKY,aAAa,cACvB,UAAU,uBACV;;;;qBAQW;GAAgB,OAAA,6BAAU,+CAAA"}

package/dist/components/layout/stack/stack.js

@@ -0,0 +1,27 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { stackVariants } from "./stack-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/stack/stack.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Empilha os itens numa direção, com espaçamento entre eles.
+*/
+const Stack = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["direction"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Stack",
+		className: mergeTwClassNames(stackVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Stack.displayName = "Stack";
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type StackVariants, stackVariants } from './stack-variants';\n\nexport type StackProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  StackVariants\n>;\n\nconst splitVariantProps = createSplitProps<StackVariants>();\n\n/**\n * Empilha os itens numa direção, com espaçamento entre eles.\n */\nexport const Stack = (props: StackProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['direction']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Stack',\n    className: mergeTwClassNames(stackVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nStack.displayName = 'Stack';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAAgC;;;;AAK1D,MAAa,SAAS,UAAsB;CAC1C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,cAAc,YAAY,GAAG,SAAS;CACrE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,MAAM,cAAc"}

package/dist/components/layout/stack/v-stack.d.ts

@@ -0,0 +1,12 @@
+import { StackProps } from "./stack.js";
+//#region src/components/layout/stack/v-stack.d.ts
+export type VStackProps = Omit<StackProps, 'direction'>;
+/**
+ * `Stack` em coluna, com os itens centralizados no eixo horizontal.
+ */
+export declare const VStack: {
+  (props: VStackProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=v-stack.d.ts.map

package/dist/components/layout/stack/v-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"v-stack.d.ts","names":[],"sources":["../../../../src/components/layout/stack/v-stack.tsx"],"mappings":";;YAGY,cAAc,KAAK;;;;qBAKlB;GAAiB,OAAA,8BAAW,IAAA"}

package/dist/components/layout/stack/v-stack.js

@@ -0,0 +1,21 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Stack } from "./stack.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/stack/v-stack.tsx
+/**
+* `Stack` em coluna, com os itens centralizados no eixo horizontal.
+*/
+const VStack = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Stack, {
+		"data-component": "VStack",
+		...rest,
+		className: mergeTwClassNames(["items-center"], className),
+		direction: "col"
+	});
+};
+VStack.displayName = "VStack";
+//#endregion
+export { VStack };
+
+//# sourceMappingURL=v-stack.js.map

package/dist/components/layout/stack/v-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v-stack.js","names":[],"sources":["../../../../src/components/layout/stack/v-stack.tsx"],"sourcesContent":["import { mergeTwClassNames } from '#utils';\nimport { Stack, type StackProps } from './stack';\n\nexport type VStackProps = Omit<StackProps, 'direction'>;\n\n/**\n * `Stack` em coluna, com os itens centralizados no eixo horizontal.\n */\nexport const VStack = (props: VStackProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <Stack\n      data-component=\"VStack\"\n      {...rest}\n      className={mergeTwClassNames(['items-center'], className)}\n      direction=\"col\"\n    />\n  );\n};\n\nVStack.displayName = 'VStack';\n"],"mappings":";;;;;;;AAQA,MAAa,UAAU,UAAuB;CAC5C,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,OAAD;EACE,kBAAe;EACf,GAAI;EACJ,WAAW,kBAAkB,CAAC,cAAc,GAAG,SAAS;EACxD,WAAU;CACX,CAAA;AAEL;AAEA,OAAO,cAAc"}

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

@@ -0,0 +1,2 @@
+import { Wrap, WrapProps } from "./wrap.js";
+export { Wrap, type WrapProps };

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

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

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

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/wrap/wrap.d.ts
+export type WrapProps = useRender.ComponentProps<'div'>;
+/**
+ * Linha `flex` que quebra os itens para a linha seguinte quando falta espaço.
+ */
+export declare const Wrap: {
+  (props: WrapProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=wrap.d.ts.map

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

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

package/dist/components/layout/wrap/wrap.js

@@ -0,0 +1,27 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/wrap/wrap.tsx
+/**
+* Linha `flex` que quebra os itens para a linha seguinte quando falta espaço.
+*/
+const Wrap = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Wrap",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-wrap",
+			"gap-2"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Wrap.displayName = "Wrap";
+//#endregion
+export { Wrap };
+
+//# sourceMappingURL=wrap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wrap.js","names":[],"sources":["../../../../src/components/layout/wrap/wrap.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type WrapProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha `flex` que quebra os itens para a linha seguinte quando falta espaço.\n */\nexport const Wrap = (props: WrapProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Wrap',\n    className: mergeTwClassNames(['flex', 'flex-wrap', 'gap-2'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nWrap.displayName = 'Wrap';\n"],"mappings":";;;;;;AAQA,MAAa,QAAQ,UAAqB;CACxC,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB;GAAC;GAAQ;GAAa;EAAO,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

package/dist/components/overlays/action-bar/action-bar-close.d.ts

@@ -0,0 +1,13 @@
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-close.d.ts
+export type ActionBarCloseProps = Dialog.Close.Props;
+export type ActionBarCloseState = Dialog.Close.State;
+/**
+ * Botão que fecha a barra. Sem estilo próprio; passe um botão da lib em `render`.
+ */
+export declare const ActionBarClose: {
+  (props: ActionBarCloseProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=action-bar-close.d.ts.map

package/dist/components/overlays/action-bar/action-bar-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-close.d.ts","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-close.tsx"],"mappings":";;YAGY,sBAAsBA,OAAW,MAAM;YAEvC,sBAAsBA,OAAW,MAAM;;;;qBAKtC;GAAyB,OAAA,sCAAmB,IAAA"}

package/dist/components/overlays/action-bar/action-bar-close.js

@@ -0,0 +1,20 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-close.tsx
+/**
+* Botão que fecha a barra. Sem estilo próprio; passe um botão da lib em `render`.
+*/
+const ActionBarClose = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-component": "ActionBar.Close",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+ActionBarClose.displayName = "ActionBar.Close";
+//#endregion
+export { ActionBarClose };
+
+//# sourceMappingURL=action-bar-close.js.map

package/dist/components/overlays/action-bar/action-bar-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-close.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-close.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ActionBarCloseProps = BaseDialog.Close.Props;\n\nexport type ActionBarCloseState = BaseDialog.Close.State;\n\n/**\n * Botão que fecha a barra. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const ActionBarClose = (props: ActionBarCloseProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Close\n      data-component=\"ActionBar.Close\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nActionBarClose.displayName = 'ActionBar.Close';\n"],"mappings":";;;;;;;AAUA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/action-bar/action-bar-popup-variants.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/overlays/action-bar/action-bar-popup-variants.d.ts
+/**
+ * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra
+ * e cor do texto estão explicados. As diferenças:
+ * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de
+ *   tamanho;
+ * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;
+ * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.
+ *
+ * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular
+ * embaixo.
+ *
+ * No `bottom`, o `-translate-x-1/2` centraliza e a animação de entrada mexe no `translate-y`: no
+ * Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.
+ */
+export declare const actionBarPopupVariants: (props?: ({
+  placement?: "bottom-start" | "bottom-end" | "bottom" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=action-bar-popup-variants.d.ts.map

package/dist/components/overlays/action-bar/action-bar-popup-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-popup-variants.d.ts","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-popup-variants.ts"],"mappings":";;;;;;;;;;;;;;;qBAiBa,yBAAsB;;6CAuDlC"}

package/dist/components/overlays/action-bar/action-bar-popup-variants.js

@@ -0,0 +1,59 @@
+import { actionBarDefaultVariants } from "./use-action-bar-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/overlays/action-bar/action-bar-popup-variants.ts
+/**
+* Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra
+* e cor do texto estão explicados. As diferenças:
+* - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de
+*   tamanho;
+* - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;
+* - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.
+*
+* A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular
+* embaixo.
+*
+* No `bottom`, o `-translate-x-1/2` centraliza e a animação de entrada mexe no `translate-y`: no
+* Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.
+*/
+const actionBarPopupVariants = cva([
+	"[--action-bar-offset:--spacing(4)]",
+	"fixed",
+	"bottom-[calc(env(safe-area-inset-bottom)+var(--action-bar-offset))]",
+	"flex",
+	"items-center",
+	"gap-3",
+	"max-w-[calc(100dvw-2*var(--action-bar-offset))]",
+	"px-4",
+	"py-2",
+	"rounded-md",
+	"corner-squircle",
+	"outline-1",
+	"outline-gray-6",
+	"bg-white",
+	"dark:bg-gray-2",
+	"shadow-lg",
+	"shadow-black/12",
+	"dark:shadow-none",
+	"text-sm",
+	"text-gray-12",
+	"not-motion-reduced:transition-[translate,opacity]",
+	"not-motion-reduced:ease-enter",
+	"not-motion-reduced:duration-150",
+	"not-motion-reduced:data-starting-style:translate-y-4",
+	"not-motion-reduced:data-ending-style:translate-y-4",
+	"not-motion-reduced:data-ending-style:ease-exit",
+	"not-motion-reduced:data-ending-style:duration-100",
+	"data-starting-style:opacity-0",
+	"data-ending-style:opacity-0"
+], {
+	variants: { placement: {
+		bottom: ["left-1/2", "-translate-x-1/2"],
+		"bottom-start": ["left-(--action-bar-offset)"],
+		"bottom-end": ["right-(--action-bar-offset)"]
+	} },
+	defaultVariants: { placement: actionBarDefaultVariants.placement }
+});
+//#endregion
+export { actionBarPopupVariants };
+
+//# sourceMappingURL=action-bar-popup-variants.js.map

package/dist/components/overlays/action-bar/action-bar-popup-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { actionBarDefaultVariants } from './use-action-bar-context';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra\n * e cor do texto estão explicados. As diferenças:\n * - posição própria, `fixed` no rodapé, sem positioner, e sem teto de altura nem animação de\n *   tamanho;\n * - ações em linha (`items-center`, `gap-3`), padding próprio, `rounded-md` e `shadow-lg`;\n * - entra subindo (`translate-y-4`), e não crescendo a partir de um trigger.\n *\n * A distância das bordas da tela fica em `--action-bar-offset`, somada à área segura do celular\n * embaixo.\n *\n * No `bottom`, o `-translate-x-1/2` centraliza e a animação de entrada mexe no `translate-y`: no\n * Tailwind os dois eixos compõem a mesma propriedade `translate`, então um não anula o outro.\n */\nexport const actionBarPopupVariants = cva(\n  [\n    '[--action-bar-offset:--spacing(4)]',\n\n    'fixed',\n    'bottom-[calc(env(safe-area-inset-bottom)+var(--action-bar-offset))]',\n\n    'flex',\n    'items-center',\n    'gap-3',\n\n    'max-w-[calc(100dvw-2*var(--action-bar-offset))]',\n\n    'px-4',\n    'py-2',\n\n    'rounded-md',\n    'corner-squircle',\n    'outline-1',\n    'outline-gray-6',\n\n    'bg-white',\n    'dark:bg-gray-2',\n\n    'shadow-lg',\n    'shadow-black/12',\n    'dark:shadow-none',\n\n    // A barra vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n    'text-sm',\n    'text-gray-12',\n\n    'not-motion-reduced:transition-[translate,opacity]',\n    'not-motion-reduced:ease-enter',\n    'not-motion-reduced:duration-150',\n\n    'not-motion-reduced:data-starting-style:translate-y-4',\n    'not-motion-reduced:data-ending-style:translate-y-4',\n    'not-motion-reduced:data-ending-style:ease-exit',\n    'not-motion-reduced:data-ending-style:duration-100',\n    'data-starting-style:opacity-0',\n    'data-ending-style:opacity-0',\n  ],\n  {\n    variants: {\n      placement: {\n        bottom: ['left-1/2', '-translate-x-1/2'],\n        'bottom-start': ['left-(--action-bar-offset)'],\n        'bottom-end': ['right-(--action-bar-offset)'],\n      },\n    },\n    defaultVariants: {\n      placement: actionBarDefaultVariants.placement,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAa,yBAAyB,IACpC;CACE;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,WAAW;EACT,QAAQ,CAAC,YAAY,kBAAkB;EACvC,gBAAgB,CAAC,4BAA4B;EAC7C,cAAc,CAAC,6BAA6B;CAC9C,EACF;CACA,iBAAiB,EACf,WAAW,yBAAyB,UACtC;AACF,CACF"}

package/dist/components/overlays/action-bar/action-bar-popup.d.ts

@@ -0,0 +1,18 @@
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-popup.d.ts
+export type ActionBarPopupProps = Dialog.Popup.Props;
+export type ActionBarPopupState = Dialog.Popup.State;
+/**
+ * A barra, fixa no rodapé da tela, com as ações lado a lado.
+ *
+ * Abre sem mover o foco (`initialFocus={false}`): a barra aparece enquanto quem usa ainda está
+ * selecionando, e tirar o foco da lista interromperia a seleção. Sai com
+ * `aria-label="Ações da seleção"`, porque o `role="dialog"` precisa de nome e a barra não tem
+ * título.
+ */
+export declare const ActionBarPopup: {
+  (props: ActionBarPopupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=action-bar-popup.d.ts.map

package/dist/components/overlays/action-bar/action-bar-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-popup.d.ts","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-popup.tsx"],"mappings":";;YAKY,sBAAsBA,OAAW,MAAM;YAEvC,sBAAsBA,OAAW,MAAM;;;;;;;;;qBAUtC;GAAyB,OAAA,sCAAmB,IAAA"}

package/dist/components/overlays/action-bar/action-bar-popup.js

@@ -0,0 +1,30 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { useActionBarContext } from "./use-action-bar-context.js";
+import { actionBarPopupVariants } from "./action-bar-popup-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-popup.tsx
+/**
+* A barra, fixa no rodapé da tela, com as ações lado a lado.
+*
+* Abre sem mover o foco (`initialFocus={false}`): a barra aparece enquanto quem usa ainda está
+* selecionando, e tirar o foco da lista interromperia a seleção. Sai com
+* `aria-label="Ações da seleção"`, porque o `role="dialog"` precisa de nome e a barra não tem
+* título.
+*/
+const ActionBarPopup = (props) => {
+	const { className, ...rest } = props;
+	const { placement } = useActionBarContext();
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-component": "ActionBar.Popup",
+		"aria-label": "Ações da seleção",
+		initialFocus: false,
+		className: mergeStateClassNames(actionBarPopupVariants({ placement }), className),
+		...rest
+	});
+};
+ActionBarPopup.displayName = "ActionBar.Popup";
+//#endregion
+export { ActionBarPopup };
+
+//# sourceMappingURL=action-bar-popup.js.map

package/dist/components/overlays/action-bar/action-bar-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-popup.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-popup.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\nimport { actionBarPopupVariants } from './action-bar-popup-variants';\nimport { useActionBarContext } from './use-action-bar-context';\n\nexport type ActionBarPopupProps = BaseDialog.Popup.Props;\n\nexport type ActionBarPopupState = BaseDialog.Popup.State;\n\n/**\n * A barra, fixa no rodapé da tela, com as ações lado a lado.\n *\n * Abre sem mover o foco (`initialFocus={false}`): a barra aparece enquanto quem usa ainda está\n * selecionando, e tirar o foco da lista interromperia a seleção. Sai com\n * `aria-label=\"Ações da seleção\"`, porque o `role=\"dialog\"` precisa de nome e a barra não tem\n * título.\n */\nexport const ActionBarPopup = (props: ActionBarPopupProps) => {\n  const { className, ...rest } = props;\n\n  const { placement } = useActionBarContext();\n\n  return (\n    <BaseDialog.Popup\n      data-component=\"ActionBar.Popup\"\n      aria-label=\"Ações da seleção\"\n      initialFocus={false}\n      className={mergeStateClassNames(\n        actionBarPopupVariants({ placement }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nActionBarPopup.displayName = 'ActionBar.Popup';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,cAAc,oBAAoB;CAE1C,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,cAAW;EACX,cAAc;EACd,WAAW,qBACT,uBAAuB,EAAE,UAAU,CAAC,GACpC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/action-bar/action-bar-portal.d.ts

@@ -0,0 +1,13 @@
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-portal.d.ts
+export type ActionBarPortalProps = Dialog.Portal.Props;
+export type ActionBarPortalState = Dialog.Portal.State;
+/**
+ * Leva a barra para o fim do `body`, fora do contexto de empilhamento da página.
+ */
+export declare const ActionBarPortal: {
+  (props: ActionBarPortalProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=action-bar-portal.d.ts.map

package/dist/components/overlays/action-bar/action-bar-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-portal.d.ts","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-portal.tsx"],"mappings":";;YAEY,uBAAuBA,OAAW,OAAO;YAEzC,uBAAuBA,OAAW,OAAO;;;;qBAKxC;GAA0B,OAAA,uCAAoB,IAAA"}

package/dist/components/overlays/action-bar/action-bar-portal.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-portal.tsx
+/**
+* Leva a barra para o fim do `body`, fora do contexto de empilhamento da página.
+*/
+const ActionBarPortal = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-component": "ActionBar.Portal",
+		...props
+	});
+};
+ActionBarPortal.displayName = "ActionBar.Portal";
+//#endregion
+export { ActionBarPortal };
+
+//# sourceMappingURL=action-bar-portal.js.map

package/dist/components/overlays/action-bar/action-bar-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-portal.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-portal.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\n\nexport type ActionBarPortalProps = BaseDialog.Portal.Props;\n\nexport type ActionBarPortalState = BaseDialog.Portal.State;\n\n/**\n * Leva a barra para o fim do `body`, fora do contexto de empilhamento da página.\n */\nexport const ActionBarPortal = (props: ActionBarPortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-component=\"ActionBar.Portal\"\n      {...props}\n    />\n  );\n};\n\nActionBarPortal.displayName = 'ActionBar.Portal';\n"],"mappings":";;;;;;AASA,MAAa,mBAAmB,UAAgC;CAC9D,OACE,oBAACA,OAAW,QAAZ;EACE,kBAAe;EACf,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}