@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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-lg` 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" | "bottom-start" | "bottom-end" | 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-lg` 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-3",
+	"py-2.5",
+	"rounded-lg",
+	"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-lg` 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-3',\n    'py-2.5',\n\n    'rounded-lg',\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"}

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

@@ -0,0 +1,45 @@
+import { ActionBarVariants } from "./use-action-bar-context.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-root.d.ts
+export type ActionBarRootProps = MergeOverride<Dialog.Root.Props, ActionBarVariants>;
+export type ActionBarRootState = Dialog.Root.State;
+export type ActionBarRootActions = Dialog.Root.Actions;
+export type ActionBarRootChangeEventDetails = Dialog.Root.ChangeEventDetails;
+export type ActionBarRootChangeEventReason = Dialog.Root.ChangeEventReason;
+/**
+ * Estado da barra de ações. Não renderiza elemento.
+ *
+ * É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de
+ * quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não
+ * fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.
+ *
+ * A barra continua montada durante a animação de saída. Um texto derivado da seleção ("3
+ * selecionados") vira "0 selecionados" enquanto ela some, e a largura muda junto: mostre a
+ * última contagem maior que zero.
+ *
+ * @example
+ * ```tsx
+ * <ActionBar.Root
+ *   open={selected.length > 0}
+ *   onOpenChange={(open) => !open && clearSelection()}
+ * >
+ *   <ActionBar.Portal>
+ *     <ActionBar.Popup>
+ *       <ActionBar.SelectionTrigger>
+ *         {selected.length} selecionados
+ *       </ActionBar.SelectionTrigger>
+ *       <ActionBar.Separator />
+ *       <Button size="sm">Excluir</Button>
+ *       <ActionBar.Close render={<IconButton aria-label="Fechar" />} />
+ *     </ActionBar.Popup>
+ *   </ActionBar.Portal>
+ * </ActionBar.Root>
+ * ```
+ */
+export declare const ActionBarRoot: {
+  (props: ActionBarRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=action-bar-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-root.d.ts","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-root.tsx"],"mappings":";;;;YAOY,qBAAqB,cAC/BA,OAAW,KAAK,OAChB;YAGU,qBAAqBA,OAAW,KAAK;YAErC,uBAAuBA,OAAW,KAAK;YAEvC,kCACVA,OAAW,KAAK;YAEN,iCAAiCA,OAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkChD;GAAwB,OAAA,qCAAkB,IAAA"}

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

@@ -0,0 +1,52 @@
+import { ActionBarContextProvider } from "./use-action-bar-context.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/overlays/action-bar/action-bar-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Estado da barra de ações. Não renderiza elemento.
+*
+* É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de
+* quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não
+* fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.
+*
+* A barra continua montada durante a animação de saída. Um texto derivado da seleção ("3
+* selecionados") vira "0 selecionados" enquanto ela some, e a largura muda junto: mostre a
+* última contagem maior que zero.
+*
+* @example
+* ```tsx
+* <ActionBar.Root
+*   open={selected.length > 0}
+*   onOpenChange={(open) => !open && clearSelection()}
+* >
+*   <ActionBar.Portal>
+*     <ActionBar.Popup>
+*       <ActionBar.SelectionTrigger>
+*         {selected.length} selecionados
+*       </ActionBar.SelectionTrigger>
+*       <ActionBar.Separator />
+*       <Button size="sm">Excluir</Button>
+*       <ActionBar.Close render={<IconButton aria-label="Fechar" />} />
+*     </ActionBar.Popup>
+*   </ActionBar.Portal>
+* </ActionBar.Root>
+* ```
+*/
+const ActionBarRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["placement"]);
+	return /* @__PURE__ */ jsx(ActionBarContextProvider, {
+		value: variantProps,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal: false,
+			disablePointerDismissal: true,
+			...elementProps
+		})
+	});
+};
+ActionBarRoot.displayName = "ActionBar.Root";
+//#endregion
+export { ActionBarRoot };
+
+//# sourceMappingURL=action-bar-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/action-bar/action-bar-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  ActionBarContextProvider,\n  type ActionBarVariants,\n} from './use-action-bar-context';\n\nexport type ActionBarRootProps = MergeOverride<\n  BaseDialog.Root.Props,\n  ActionBarVariants\n>;\n\nexport type ActionBarRootState = BaseDialog.Root.State;\n\nexport type ActionBarRootActions = BaseDialog.Root.Actions;\n\nexport type ActionBarRootChangeEventDetails =\n  BaseDialog.Root.ChangeEventDetails;\n\nexport type ActionBarRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<ActionBarVariants>();\n\n/**\n * Estado da barra de ações. Não renderiza elemento.\n *\n * É um dialog não modal do Base UI, sem trigger: a barra abre pelo `open`, ligado à seleção de\n * quem usa. Fecha só pelo `Esc` e pelo `Close`; o clique fora e o foco saindo da barra não\n * fecham (`disablePointerDismissal`), porque selecionar outra linha é um clique fora.\n *\n * A barra continua montada durante a animação de saída. Um texto derivado da seleção (\"3\n * selecionados\") vira \"0 selecionados\" enquanto ela some, e a largura muda junto: mostre a\n * última contagem maior que zero.\n *\n * @example\n * ```tsx\n * <ActionBar.Root\n *   open={selected.length > 0}\n *   onOpenChange={(open) => !open && clearSelection()}\n * >\n *   <ActionBar.Portal>\n *     <ActionBar.Popup>\n *       <ActionBar.SelectionTrigger>\n *         {selected.length} selecionados\n *       </ActionBar.SelectionTrigger>\n *       <ActionBar.Separator />\n *       <Button size=\"sm\">Excluir</Button>\n *       <ActionBar.Close render={<IconButton aria-label=\"Fechar\" />} />\n *     </ActionBar.Popup>\n *   </ActionBar.Portal>\n * </ActionBar.Root>\n * ```\n */\nexport const ActionBarRoot = (props: ActionBarRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n  return (\n    <ActionBarContextProvider value={variantProps}>\n      <BaseDialog.Root\n        modal={false}\n        disablePointerDismissal={true}\n        {...elementProps}\n      />\n    </ActionBarContextProvider>\n  );\n};\n\nActionBarRoot.displayName = 'ActionBar.Root';\n"],"mappings":";;;;;AAqBA,MAAM,oBAAoB,iBAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC9D,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,WAAW,CAAC;CAE3E,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAACA,OAAW,MAAZ;GACE,OAAO;GACP,yBAAyB;GACzB,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,cAAc,cAAc"}

package/dist/components/overlays/action-bar/action-bar-selection-trigger.d.ts

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/overlays/action-bar/action-bar-selection-trigger.d.ts
+export type ActionBarSelectionTriggerProps = useRender.ComponentProps<'button'>;
+/**
+ * Resumo da seleção ("3 selecionados"), no início da barra. É um botão para quem usa ligar uma
+ * ação à contagem, como limpar a seleção ou listar os itens.
+ */
+export declare const ActionBarSelectionTrigger: {
+  (props: ActionBarSelectionTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=action-bar-selection-trigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-selection-trigger.d.ts","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-selection-trigger.tsx"],"mappings":";;YAGY,iCAAiC,UAAU;;;;;qBAM1C;GACJ,OAAA,iDAA8B,+CAAA"}

package/dist/components/overlays/action-bar/action-bar-selection-trigger.js

@@ -0,0 +1,49 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/overlays/action-bar/action-bar-selection-trigger.tsx
+/**
+* Resumo da seleção ("3 selecionados"), no início da barra. É um botão para quem usa ligar uma
+* ação à contagem, como limpar a seleção ou listar os itens.
+*/
+const ActionBarSelectionTrigger = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "ActionBar.SelectionTrigger",
+		type: "button",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"gap-2",
+			"self-stretch",
+			"shrink-0",
+			"px-3",
+			"rounded-md",
+			"corner-squircle",
+			"border",
+			"border-dashed",
+			"border-gray-alpha-7",
+			"text-sm",
+			"text-gray-12",
+			"font-medium",
+			"whitespace-nowrap",
+			"cursor-pointer",
+			"hover:transition-[background-color]",
+			"hover:ease-in",
+			"hover:duration-150",
+			"hover:bg-gray-alpha-3",
+			"ring-gray-9",
+			"focus-ring-outside",
+			"[&_svg]:shrink-0"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "button",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ActionBarSelectionTrigger.displayName = "ActionBar.SelectionTrigger";
+//#endregion
+export { ActionBarSelectionTrigger };
+
+//# sourceMappingURL=action-bar-selection-trigger.js.map

package/dist/components/overlays/action-bar/action-bar-selection-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-selection-trigger.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-selection-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ActionBarSelectionTriggerProps = useRender.ComponentProps<'button'>;\n\n/**\n * Resumo da seleção (\"3 selecionados\"), no início da barra. É um botão para quem usa ligar uma\n * ação à contagem, como limpar a seleção ou listar os itens.\n */\nexport const ActionBarSelectionTrigger = (\n  props: ActionBarSelectionTriggerProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'ActionBar.SelectionTrigger',\n    type: 'button' as const,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-2',\n        // Estica até a altura dos botões ao lado.\n        'self-stretch',\n        'shrink-0',\n\n        'px-3',\n\n        'rounded-md',\n        'corner-squircle',\n        'border',\n        'border-dashed',\n        'border-gray-alpha-7',\n\n        'text-sm',\n        'text-gray-12',\n        'font-medium',\n        'whitespace-nowrap',\n\n        'cursor-pointer',\n\n        'hover:transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n        'hover:ease-in',\n        'hover:duration-150',\n        'hover:bg-gray-alpha-3',\n\n        'ring-gray-9',\n        'focus-ring-outside',\n\n        '[&_svg]:shrink-0',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nActionBarSelectionTrigger.displayName = 'ActionBar.SelectionTrigger';\n"],"mappings":";;;;;;;AASA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,0BAA0B,cAAc"}

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

@@ -0,0 +1,14 @@
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/overlays/action-bar/action-bar-separator.d.ts
+export type ActionBarSeparatorProps = Separator.Props;
+export type ActionBarSeparatorState = Separator.State;
+/**
+ * Linha vertical entre grupos de ações. O Base UI escreve `role="separator"` e
+ * `aria-orientation`.
+ */
+export declare const ActionBarSeparator: {
+  (props: ActionBarSeparatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=action-bar-separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar-separator.d.ts","names":["BaseSeparator"],"sources":["../../../../src/components/overlays/action-bar/action-bar-separator.tsx"],"mappings":";;YAGY,0BAA0BA,UAAc;YAExC,0BAA0BA,UAAc;;;;;qBAMvC;GAA6B,OAAA,0CAAuB,IAAA"}