@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,84 @@
+import { cva } from "class-variance-authority";
+//#region src/components/layout/float/float-variants.ts
+const floatDefaultVariants = { placement: "top-end" };
+/**
+* `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.
+*/
+const floatVariants = cva([
+	"absolute",
+	"inline-flex",
+	"items-center",
+	"justify-center"
+], {
+	variants: { placement: {
+		"top-start": [
+			"top-0",
+			"inset-s-0",
+			"-translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:translate-x-1/2"
+		],
+		"top-center": [
+			"top-0",
+			"inset-s-1/2",
+			"-translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:translate-x-1/2"
+		],
+		"top-end": [
+			"top-0",
+			"inset-e-0",
+			"translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:-translate-x-1/2"
+		],
+		"middle-start": [
+			"top-1/2",
+			"inset-s-0",
+			"-translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:translate-x-1/2"
+		],
+		"middle-center": [
+			"top-1/2",
+			"inset-s-1/2",
+			"-translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:translate-x-1/2"
+		],
+		"middle-end": [
+			"top-1/2",
+			"inset-e-0",
+			"translate-x-1/2",
+			"-translate-y-1/2",
+			"rtl:-translate-x-1/2"
+		],
+		"bottom-start": [
+			"bottom-0",
+			"inset-s-0",
+			"-translate-x-1/2",
+			"translate-y-1/2",
+			"rtl:translate-x-1/2"
+		],
+		"bottom-center": [
+			"bottom-0",
+			"inset-s-1/2",
+			"-translate-x-1/2",
+			"translate-y-1/2",
+			"rtl:translate-x-1/2"
+		],
+		"bottom-end": [
+			"bottom-0",
+			"inset-e-0",
+			"translate-x-1/2",
+			"translate-y-1/2",
+			"rtl:-translate-x-1/2"
+		]
+	} },
+	defaultVariants: { placement: floatDefaultVariants.placement }
+});
+//#endregion
+export { floatDefaultVariants, floatVariants };
+
+//# sourceMappingURL=float-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"float-variants.js","names":[],"sources":["../../../../src/components/layout/float/float-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type FloatVariants = {\n  /**\n   * Canto ou borda do ancestral posicionado onde o elemento fica, centralizado sobre a linha.\n   *\n   * @default 'top-end'\n   */\n  placement?:\n    | 'top-start'\n    | 'top-center'\n    | 'top-end'\n    | 'middle-start'\n    | 'middle-center'\n    | 'middle-end'\n    | 'bottom-start'\n    | 'bottom-center'\n    | 'bottom-end';\n};\n\nexport const floatDefaultVariants: Required<FloatVariants> = {\n  placement: 'top-end',\n};\n\n/**\n * `inset-s`/`inset-e` seguem a direção do texto, mas o `translate-x` é físico: em RTL ele inverte\n * de sinal (`rtl:`), para o elemento continuar metade dentro e metade fora do canto.\n */\nexport const floatVariants = cva(\n  [\n    'absolute',\n\n    'inline-flex',\n    'items-center',\n    'justify-center',\n  ],\n  {\n    variants: {\n      placement: {\n        'top-start': [\n          'top-0',\n          'inset-s-0',\n          '-translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        'top-center': [\n          'top-0',\n          'inset-s-1/2',\n          '-translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        'top-end': [\n          'top-0',\n          'inset-e-0',\n          'translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:-translate-x-1/2',\n        ],\n        'middle-start': [\n          'top-1/2',\n          'inset-s-0',\n          '-translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        'middle-center': [\n          'top-1/2',\n          'inset-s-1/2',\n          '-translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        'middle-end': [\n          'top-1/2',\n          'inset-e-0',\n          'translate-x-1/2',\n          '-translate-y-1/2',\n\n          'rtl:-translate-x-1/2',\n        ],\n        'bottom-start': [\n          'bottom-0',\n          'inset-s-0',\n          '-translate-x-1/2',\n          'translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        'bottom-center': [\n          'bottom-0',\n          'inset-s-1/2',\n          '-translate-x-1/2',\n          'translate-y-1/2',\n\n          'rtl:translate-x-1/2',\n        ],\n        'bottom-end': [\n          'bottom-0',\n          'inset-e-0',\n          'translate-x-1/2',\n          'translate-y-1/2',\n\n          'rtl:-translate-x-1/2',\n        ],\n      },\n    },\n    defaultVariants: {\n      placement: floatDefaultVariants.placement,\n    },\n  },\n);\n"],"mappings":";;AAoBA,MAAa,uBAAgD,EAC3D,WAAW,UACb;;;;;AAMA,MAAa,gBAAgB,IAC3B;CACE;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,WAAW;EACT,aAAa;GACX;GACA;GACA;GACA;GAEA;EACF;EACA,cAAc;GACZ;GACA;GACA;GACA;GAEA;EACF;EACA,WAAW;GACT;GACA;GACA;GACA;GAEA;EACF;EACA,gBAAgB;GACd;GACA;GACA;GACA;GAEA;EACF;EACA,iBAAiB;GACf;GACA;GACA;GACA;GAEA;EACF;EACA,cAAc;GACZ;GACA;GACA;GACA;GAEA;EACF;EACA,gBAAgB;GACd;GACA;GACA;GACA;GAEA;EACF;EACA,iBAAiB;GACf;GACA;GACA;GACA;GAEA;EACF;EACA,cAAc;GACZ;GACA;GACA;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,WAAW,qBAAqB,UAClC;AACF,CACF"}

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

@@ -0,0 +1,15 @@
+import { FloatVariants } from "./float-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/layout/float/float.d.ts
+export type FloatProps = MergeOverride<useRender.ComponentProps<'div'>, FloatVariants>;
+/**
+ * Prende o elemento num canto ou borda do ancestral posicionado mais próximo (badge sobre um
+ * avatar, por exemplo). O ancestral precisa ter `relative` para servir de referência.
+ */
+export declare const Float: {
+  (props: FloatProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=float.d.ts.map

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

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

package/dist/components/layout/float/float.js

@@ -0,0 +1,28 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { floatVariants } from "./float-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/layout/float/float.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Prende o elemento num canto ou borda do ancestral posicionado mais próximo (badge sobre um
+* avatar, por exemplo). O ancestral precisa ter `relative` para servir de referência.
+*/
+const Float = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["placement"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Float",
+		className: mergeTwClassNames(floatVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Float.displayName = "Float";
+//#endregion
+export { Float };
+
+//# sourceMappingURL=float.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"float.js","names":[],"sources":["../../../../src/components/layout/float/float.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type FloatVariants, floatVariants } from './float-variants';\n\nexport type FloatProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  FloatVariants\n>;\n\nconst splitVariantProps = createSplitProps<FloatVariants>();\n\n/**\n * Prende o elemento num canto ou borda do ancestral posicionado mais próximo (badge sobre um\n * avatar, por exemplo). O ancestral precisa ter `relative` para servir de referência.\n */\nexport const Float = (props: FloatProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['placement']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Float',\n    className: mergeTwClassNames(floatVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nFloat.displayName = 'Float';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAAgC;;;;;AAM1D,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/float/index.d.ts

@@ -0,0 +1,3 @@
+import { FloatVariants } from "./float-variants.js";
+import { Float, FloatProps } from "./float.js";
+export { Float, type FloatProps, type FloatVariants };

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

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

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

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

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

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

package/dist/components/layout/grid/grid.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../../../src/components/layout/grid/grid.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type GridProps = useRender.ComponentProps<'div'>;\n\n/**\n * Contêiner `grid`. Colunas, linhas e espaçamento ficam com quem usa.\n */\nexport const Grid = (props: GridProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Grid',\n    className: mergeTwClassNames(['grid'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nGrid.displayName = 'Grid';\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/grid/index.d.ts

@@ -0,0 +1,2 @@
+import { Grid, GridProps } from "./grid.js";
+export { Grid, type GridProps };

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

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

package/dist/components/layout/scroll-area/index.d.ts

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

package/dist/components/layout/scroll-area/index.js

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

package/dist/components/layout/scroll-area/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { ScrollAreaBars } from "./scroll-area-bars.js";
+import { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaContentState } from "./scroll-area-content.js";
+import { ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaCornerState } from "./scroll-area-corner.js";
+import { ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaRootState } from "./scroll-area-root.js";
+import { ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaScrollbarState } from "./scroll-area-scrollbar.js";
+import { ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaThumbState } from "./scroll-area-thumb.js";
+import { ScrollAreaViewport, ScrollAreaViewportProps, ScrollAreaViewportState } from "./scroll-area-viewport.js";
+declare namespace index_parts_d_exports {
+  export { ScrollAreaBars as Bars, ScrollAreaContent as Content, ScrollAreaContentProps as ContentProps, ScrollAreaContentState as ContentState, ScrollAreaCorner as Corner, ScrollAreaCornerProps as CornerProps, ScrollAreaCornerState as CornerState, ScrollAreaRoot as Root, ScrollAreaRootProps as RootProps, ScrollAreaRootState as RootState, ScrollAreaScrollbar as Scrollbar, ScrollAreaScrollbarProps as ScrollbarProps, ScrollAreaScrollbarState as ScrollbarState, ScrollAreaThumb as Thumb, ScrollAreaThumbProps as ThumbProps, ScrollAreaThumbState as ThumbState, ScrollAreaViewport as Viewport, ScrollAreaViewportProps as ViewportProps, ScrollAreaViewportState as ViewportState };
+}
+//#endregion
+export { ScrollAreaBars as Bars, ScrollAreaContent as Content, type ScrollAreaContentProps as ContentProps, type ScrollAreaContentState as ContentState, ScrollAreaCorner as Corner, type ScrollAreaCornerProps as CornerProps, type ScrollAreaCornerState as CornerState, ScrollAreaRoot as Root, type ScrollAreaRootProps as RootProps, type ScrollAreaRootState as RootState, ScrollAreaScrollbar as Scrollbar, type ScrollAreaScrollbarProps as ScrollbarProps, type ScrollAreaScrollbarState as ScrollbarState, ScrollAreaThumb as Thumb, type ScrollAreaThumbProps as ThumbProps, type ScrollAreaThumbState as ThumbState, ScrollAreaViewport as Viewport, type ScrollAreaViewportProps as ViewportProps, type ScrollAreaViewportState as ViewportState, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/layout/scroll-area/index.parts.d.ts.map

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

package/dist/components/layout/scroll-area/index.parts.js

@@ -0,0 +1,22 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { ScrollAreaCorner } from "./scroll-area-corner.js";
+import { ScrollAreaScrollbar } from "./scroll-area-scrollbar.js";
+import { ScrollAreaThumb } from "./scroll-area-thumb.js";
+import { ScrollAreaBars } from "./scroll-area-bars.js";
+import { ScrollAreaContent } from "./scroll-area-content.js";
+import { ScrollAreaRoot } from "./scroll-area-root.js";
+import { ScrollAreaViewport } from "./scroll-area-viewport.js";
+//#region src/components/layout/scroll-area/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Bars: () => ScrollAreaBars,
+	Content: () => ScrollAreaContent,
+	Corner: () => ScrollAreaCorner,
+	Root: () => ScrollAreaRoot,
+	Scrollbar: () => ScrollAreaScrollbar,
+	Thumb: () => ScrollAreaThumb,
+	Viewport: () => ScrollAreaViewport
+});
+//#endregion
+export { ScrollAreaBars as Bars, ScrollAreaContent as Content, ScrollAreaCorner as Corner, ScrollAreaRoot as Root, ScrollAreaScrollbar as Scrollbar, ScrollAreaThumb as Thumb, ScrollAreaViewport as Viewport, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/layout/scroll-area/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/layout/scroll-area/index.parts.ts"],"sourcesContent":["export { ScrollAreaBars as Bars } from './scroll-area-bars';\nexport { ScrollAreaContent as Content } from './scroll-area-content';\nexport { ScrollAreaCorner as Corner } from './scroll-area-corner';\nexport { ScrollAreaRoot as Root } from './scroll-area-root';\nexport { ScrollAreaScrollbar as Scrollbar } from './scroll-area-scrollbar';\nexport { ScrollAreaThumb as Thumb } from './scroll-area-thumb';\nexport { ScrollAreaViewport as Viewport } from './scroll-area-viewport';\n\n/* types */\n\nexport type {\n  ScrollAreaContentProps as ContentProps,\n  ScrollAreaContentState as ContentState,\n} from './scroll-area-content';\nexport type {\n  ScrollAreaCornerProps as CornerProps,\n  ScrollAreaCornerState as CornerState,\n} from './scroll-area-corner';\nexport type {\n  ScrollAreaRootProps as RootProps,\n  ScrollAreaRootState as RootState,\n} from './scroll-area-root';\nexport type {\n  ScrollAreaScrollbarProps as ScrollbarProps,\n  ScrollAreaScrollbarState as ScrollbarState,\n} from './scroll-area-scrollbar';\nexport type {\n  ScrollAreaThumbProps as ThumbProps,\n  ScrollAreaThumbState as ThumbState,\n} from './scroll-area-thumb';\nexport type {\n  ScrollAreaViewportProps as ViewportProps,\n  ScrollAreaViewportState as ViewportState,\n} from './scroll-area-viewport';\n"],"mappings":""}

package/dist/components/layout/scroll-area/scroll-area-bars.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/layout/scroll-area/scroll-area-bars.d.ts
+/**
+ * As duas barras e o canto, prontos — o uso comum. Montar as duas não custa nada: o Base UI só
+ * monta a barra do eixo que transborda, e o canto só quando as duas aparecem juntas.
+ *
+ * Sem props de propósito: espessura e recuo se ajustam pelas variáveis do `Root`. Para algo além
+ * disso (classe numa barra, uma barra só), componha `Scrollbar`, `Thumb` e `Corner` à mão.
+ */
+export declare const ScrollAreaBars: {
+  (): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-bars.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-bars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-bars.d.ts","names":[],"sources":["../../../../src/components/layout/scroll-area/scroll-area-bars.tsx"],"mappings":";;;;;;;;qBAWa;sBAAA"}

package/dist/components/layout/scroll-area/scroll-area-bars.js

@@ -0,0 +1,30 @@
+import { ScrollAreaCorner } from "./scroll-area-corner.js";
+import { ScrollAreaScrollbar } from "./scroll-area-scrollbar.js";
+import { ScrollAreaThumb } from "./scroll-area-thumb.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/layout/scroll-area/scroll-area-bars.tsx
+/**
+* As duas barras e o canto, prontos — o uso comum. Montar as duas não custa nada: o Base UI só
+* monta a barra do eixo que transborda, e o canto só quando as duas aparecem juntas.
+*
+* Sem props de propósito: espessura e recuo se ajustam pelas variáveis do `Root`. Para algo além
+* disso (classe numa barra, uma barra só), componha `Scrollbar`, `Thumb` e `Corner` à mão.
+*/
+const ScrollAreaBars = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
+		}),
+		/* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+			orientation: "horizontal",
+			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
+		}),
+		/* @__PURE__ */ jsx(ScrollAreaCorner, {})
+	] });
+};
+ScrollAreaBars.displayName = "ScrollArea.Bars";
+//#endregion
+export { ScrollAreaBars };
+
+//# sourceMappingURL=scroll-area-bars.js.map

package/dist/components/layout/scroll-area/scroll-area-bars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-bars.js","names":[],"sources":["../../../../src/components/layout/scroll-area/scroll-area-bars.tsx"],"sourcesContent":["import { ScrollAreaCorner } from './scroll-area-corner';\nimport { ScrollAreaScrollbar } from './scroll-area-scrollbar';\nimport { ScrollAreaThumb } from './scroll-area-thumb';\n\n/**\n * As duas barras e o canto, prontos — o uso comum. Montar as duas não custa nada: o Base UI só\n * monta a barra do eixo que transborda, e o canto só quando as duas aparecem juntas.\n *\n * Sem props de propósito: espessura e recuo se ajustam pelas variáveis do `Root`. Para algo além\n * disso (classe numa barra, uma barra só), componha `Scrollbar`, `Thumb` e `Corner` à mão.\n */\nexport const ScrollAreaBars = () => {\n  return (\n    <>\n      <ScrollAreaScrollbar orientation=\"vertical\">\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n\n      <ScrollAreaScrollbar orientation=\"horizontal\">\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n\n      <ScrollAreaCorner />\n    </>\n  );\n};\n\nScrollAreaBars.displayName = 'ScrollArea.Bars';\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,uBAAuB;CAClC,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,qBAAD;GAAqB,aAAY;GAC/B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;EACC,CAAA;EAErB,oBAAC,qBAAD;GAAqB,aAAY;GAC/B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;EACC,CAAA;EAErB,oBAAC,kBAAD,CAAmB,CAAA;CACnB,EAAA,CAAA;AAEN;AAEA,eAAe,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-content.d.ts

@@ -0,0 +1,22 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-content.d.ts
+export type ScrollAreaContentProps = ScrollArea.Content.Props;
+export type ScrollAreaContentState = ScrollArea.Content.State;
+/**
+ * Envolve o conteúdo rolável e é onde mora o padding — a divisão da documentação oficial:
+ * `Root` carrega o tamanho, `Viewport` a altura, `Content` o espaçamento.
+ *
+ * O Base UI aplica `min-width: fit-content` inline, para a largura do conteúdo atravessar o
+ * viewport em vez de ser cortada. Para contê-la, passe `style={{ minWidth: 0 }}`: o `style` de
+ * quem usa é mesclado depois do interno, e uma classe não venceria o inline.
+ *
+ * Com `flex flex-col` aqui, o filho que ocupa o resto e rola usa `grow basis-0`, não `flex-1`:
+ * o `min-h-full` deixa a altura indefinida, a base `0%` do `flex-1` não resolve contra ela, e
+ * o filho cresce até caber todo o conteúdo em vez de rolar.
+ */
+export declare const ScrollAreaContent: {
+  (props: ScrollAreaContentProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-content.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-content.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-content.tsx"],"mappings":";;YAGY,yBAAyBA,WAAe,QAAQ;YAEhD,yBAAyBA,WAAe,QAAQ;;;;;;;;;;;;;qBAc/C;GAA4B,OAAA,yCAAsB,IAAA"}

package/dist/components/layout/scroll-area/scroll-area-content.js

@@ -0,0 +1,29 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-content.tsx
+/**
+* Envolve o conteúdo rolável e é onde mora o padding — a divisão da documentação oficial:
+* `Root` carrega o tamanho, `Viewport` a altura, `Content` o espaçamento.
+*
+* O Base UI aplica `min-width: fit-content` inline, para a largura do conteúdo atravessar o
+* viewport em vez de ser cortada. Para contê-la, passe `style={{ minWidth: 0 }}`: o `style` de
+* quem usa é mesclado depois do interno, e uma classe não venceria o inline.
+*
+* Com `flex flex-col` aqui, o filho que ocupa o resto e rola usa `grow basis-0`, não `flex-1`:
+* o `min-h-full` deixa a altura indefinida, a base `0%` do `flex-1` não resolve contra ela, e
+* o filho cresce até caber todo o conteúdo em vez de rolar.
+*/
+const ScrollAreaContent = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		"data-component": "ScrollArea.Content",
+		className: mergeStateClassNames(["min-h-full"], className),
+		...rest
+	});
+};
+ScrollAreaContent.displayName = "ScrollArea.Content";
+//#endregion
+export { ScrollAreaContent };
+
+//# sourceMappingURL=scroll-area-content.js.map

package/dist/components/layout/scroll-area/scroll-area-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-content.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-content.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaContentProps = BaseScrollArea.Content.Props;\n\nexport type ScrollAreaContentState = BaseScrollArea.Content.State;\n\n/**\n * Envolve o conteúdo rolável e é onde mora o padding — a divisão da documentação oficial:\n * `Root` carrega o tamanho, `Viewport` a altura, `Content` o espaçamento.\n *\n * O Base UI aplica `min-width: fit-content` inline, para a largura do conteúdo atravessar o\n * viewport em vez de ser cortada. Para contê-la, passe `style={{ minWidth: 0 }}`: o `style` de\n * quem usa é mesclado depois do interno, e uma classe não venceria o inline.\n *\n * Com `flex flex-col` aqui, o filho que ocupa o resto e rola usa `grow basis-0`, não `flex-1`:\n * o `min-h-full` deixa a altura indefinida, a base `0%` do `flex-1` não resolve contra ela, e\n * o filho cresce até caber todo o conteúdo em vez de rolar.\n */\nexport const ScrollAreaContent = (props: ScrollAreaContentProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Content\n      data-component=\"ScrollArea.Content\"\n      className={mergeStateClassNames(\n        [\n          // Piso, não altura. Com pouco conteúdo ocupa o viewport (um estado vazio centraliza\n          // com `flex items-center`); com muito, cresce, e o padding de baixo continua depois\n          // do último item. `h-full` aqui colaria o último item na borda. Sem altura no `Root`,\n          // não há piso.\n          'min-h-full',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaContent.displayName = 'ScrollArea.Content';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,SAAhB;EACE,kBAAe;EACf,WAAW,qBACT,CAKE,YACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-corner.d.ts

@@ -0,0 +1,17 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-corner.d.ts
+export type ScrollAreaCornerProps = ScrollArea.Corner.Props;
+export type ScrollAreaCornerState = ScrollArea.Corner.State;
+/**
+ * Reserva o quadrado onde as duas barras se cruzariam; sem ele, elas se sobrepõem no canto. Já
+ * vem em `ScrollArea.Bars`.
+ *
+ * Sem preenchimento de propósito: as trilhas têm recuo e cantos arredondados, e um canto
+ * colorido apareceria como um quadrado solto.
+ */
+export declare const ScrollAreaCorner: {
+  (props: ScrollAreaCornerProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-corner.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-corner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-corner.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-corner.tsx"],"mappings":";;YAGY,wBAAwBA,WAAe,OAAO;YAE9C,wBAAwBA,WAAe,OAAO;;;;;;;;qBAS7C;GAA2B,OAAA,wCAAqB,IAAA"}

package/dist/components/layout/scroll-area/scroll-area-corner.js

@@ -0,0 +1,24 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-corner.tsx
+/**
+* Reserva o quadrado onde as duas barras se cruzariam; sem ele, elas se sobrepõem no canto. Já
+* vem em `ScrollArea.Bars`.
+*
+* Sem preenchimento de propósito: as trilhas têm recuo e cantos arredondados, e um canto
+* colorido apareceria como um quadrado solto.
+*/
+const ScrollAreaCorner = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
+		"data-component": "ScrollArea.Corner",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+ScrollAreaCorner.displayName = "ScrollArea.Corner";
+//#endregion
+export { ScrollAreaCorner };
+
+//# sourceMappingURL=scroll-area-corner.js.map

package/dist/components/layout/scroll-area/scroll-area-corner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-corner.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-corner.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaCornerProps = BaseScrollArea.Corner.Props;\n\nexport type ScrollAreaCornerState = BaseScrollArea.Corner.State;\n\n/**\n * Reserva o quadrado onde as duas barras se cruzariam; sem ele, elas se sobrepõem no canto. Já\n * vem em `ScrollArea.Bars`.\n *\n * Sem preenchimento de propósito: as trilhas têm recuo e cantos arredondados, e um canto\n * colorido apareceria como um quadrado solto.\n */\nexport const ScrollAreaCorner = (props: ScrollAreaCornerProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Corner\n      data-component=\"ScrollArea.Corner\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollArea.Corner';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,QAAhB;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-root.d.ts

@@ -0,0 +1,39 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-root.d.ts
+export type ScrollAreaRootProps = ScrollArea.Root.Props;
+export type ScrollAreaRootState = ScrollArea.Root.State;
+/**
+ * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:
+ * com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o
+ * contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.
+ *
+ * #### Personalização das barras
+ *
+ * Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de
+ * `ScrollArea.Bars`, que não recebe props.
+ *
+ * | Variável | Controla | Padrão |
+ * | --- | --- | --- |
+ * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |
+ * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |
+ * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |
+ *
+ * Como funciona:
+ * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores
+ *    do de fora;
+ * 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão
+ *    moram, e eles valem enquanto a variável estiver zerada;
+ * 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe
+ *    conflitante anterior.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea.Root className="h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]">
+ * ```
+ */
+export declare const ScrollAreaRoot: {
+  (props: ScrollAreaRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-root.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-root.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-root.tsx"],"mappings":";;YAGY,sBAAsBA,WAAe,KAAK;YAE1C,sBAAsBA,WAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+BzC;GAAyB,OAAA,sCAAmB,IAAA"}

package/dist/components/layout/scroll-area/scroll-area-root.js

@@ -0,0 +1,53 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-root.tsx
+/**
+* Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:
+* com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o
+* contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.
+*
+* #### Personalização das barras
+*
+* Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de
+* `ScrollArea.Bars`, que não recebe props.
+*
+* | Variável | Controla | Padrão |
+* | --- | --- | --- |
+* | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |
+* | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |
+* | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |
+*
+* Como funciona:
+* 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores
+*    do de fora;
+* 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão
+*    moram, e eles valem enquanto a variável estiver zerada;
+* 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe
+*    conflitante anterior.
+*
+* @example
+* ```tsx
+* <ScrollArea.Root className="h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]">
+* ```
+*/
+const ScrollAreaRoot = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		"data-component": "ScrollArea.Root",
+		className: mergeStateClassNames([
+			"overflow-hidden",
+			"[--scroll-area-scrollbar-size:initial]",
+			"[--scroll-area-scrollbar-inset:initial]",
+			"[--scroll-area-thumb-size:initial]",
+			"focus-ring-inside",
+			"ring-gray-12"
+		], className),
+		...rest
+	});
+};
+ScrollAreaRoot.displayName = "ScrollArea.Root";
+//#endregion
+export { ScrollAreaRoot };
+
+//# sourceMappingURL=scroll-area-root.js.map

package/dist/components/layout/scroll-area/scroll-area-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-root.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-root.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaRootProps = BaseScrollArea.Root.Props;\n\nexport type ScrollAreaRootState = BaseScrollArea.Root.State;\n\n/**\n * Agrupa as partes e serve de referência de posição para as barras. **Não declara tamanho**:\n * com altura definida a área rola; sem altura ela cresce com o conteúdo e quem rola é o\n * contêiner de cima. Altura e largura (`h-72`, `flex-1`, `md:h-52`) ficam com quem usa.\n *\n * #### Personalização das barras\n *\n * Por variável CSS na `className` do `Root`. As barras herdam — inclusive as de\n * `ScrollArea.Bars`, que não recebe props.\n *\n * | Variável | Controla | Padrão |\n * | --- | --- | --- |\n * | `--scroll-area-scrollbar-size` | espessura da trilha | 4px no toque, 6px com mouse |\n * | `--scroll-area-scrollbar-inset` | recuo da trilha até a borda | 2px |\n * | `--scroll-area-thumb-size` | espessura do polegar na trilha | a trilha toda |\n *\n * Como funciona:\n * 1. o `Root` zera as três com `initial` — assim um `ScrollArea` aninhado não herda os valores\n *    do de fora;\n * 2. `Scrollbar` e `Thumb` leem cada uma com um padrão no `var()`: é ali que os valores padrão\n *    moram, e eles valem enquanto a variável estiver zerada;\n * 3. a classe de quem usa substitui o `initial`, porque o `mergeTwClassNames` descarta a classe\n *    conflitante anterior.\n *\n * @example\n * ```tsx\n * <ScrollArea.Root className=\"h-72 [--scroll-area-scrollbar-size:--spacing(2.5)]\">\n * ```\n */\nexport const ScrollAreaRoot = (props: ScrollAreaRootProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Root\n      data-component=\"ScrollArea.Root\"\n      className={mergeStateClassNames(\n        [\n          // Zera o piso automático de item flex/grid: `flex-1` basta para encolher e rolar, sem\n          // `min-h-0`/`min-w-0`. Também recorta os cantos do `rounded-*` e impede que um\n          // decorativo vazado dê scroll à página (no Chrome Android, a barra de endereço passa a\n          // recolher). `overflow-clip` recortaria, mas não zera o piso.\n          //\n          // Custo: sem altura, numa coluna flex que não comporta os filhos, o `Root` encolhe e\n          // rola em vez de crescer. `shrink-0` devolve o crescimento.\n          'overflow-hidden',\n\n          // Ver \"Personalização das barras\" acima.\n          '[--scroll-area-scrollbar-size:initial]',\n          '[--scroll-area-scrollbar-inset:initial]',\n          '[--scroll-area-thumb-size:initial]',\n\n          // Anel do `Viewport` (`focusRing`), pintado aqui porque a máscara do `fade` apagaria o\n          // que o viewport pintasse. A utility dispara pelo `data-focus-ring` do filho.\n          'focus-ring-inside',\n          'ring-gray-12',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollArea.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,MAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAQE;GAGA;GACA;GACA;GAIA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-scrollbar.d.ts

@@ -0,0 +1,17 @@
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/layout/scroll-area/scroll-area-scrollbar.d.ts
+export type ScrollAreaScrollbarProps = ScrollArea.Scrollbar.Props;
+export type ScrollAreaScrollbarState = ScrollArea.Scrollbar.State;
+/**
+ * A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline
+ * (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.
+ *
+ * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui
+ * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.
+ */
+export declare const ScrollAreaScrollbar: {
+  (props: ScrollAreaScrollbarProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=scroll-area-scrollbar.d.ts.map

package/dist/components/layout/scroll-area/scroll-area-scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-scrollbar.d.ts","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-scrollbar.tsx"],"mappings":";;YAGY,2BAA2BA,WAAe,UAAU;YAEpD,2BAA2BA,WAAe,UAAU;;;;;;;;qBASnD;GAA8B,OAAA,2CAAwB,IAAA"}