@fuf-stack/pixels 0.37.1 → 0.39.0

package/dist/Alert/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunk33S6NRVIcjs = require('../chunk-33S6NRVI.cjs');
+var _chunkYVPRFCWIcjs = require('../chunk-YVPRFCWI.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
 
-exports.Alert = _chunk33S6NRVIcjs.Alert_default; exports.alertVariants = _chunk33S6NRVIcjs.alertVariants; exports.default = _chunk33S6NRVIcjs.Alert_default2;
+exports.Alert = _chunkYVPRFCWIcjs.Alert_default; exports.alertVariants = _chunkYVPRFCWIcjs.alertVariants; exports.default = _chunkYVPRFCWIcjs.Alert_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Alert/index.d.cts

@@ -1,5 +1,5 @@
-import { A as Alert } from '../Alert-Bz_lJ_YE.cjs';
-export { b as AlertProps, a as alertVariants } from '../Alert-Bz_lJ_YE.cjs';
+import { A as Alert } from '../Alert-DELD9ZWe.cjs';
+export { b as AlertProps, a as alertVariants } from '../Alert-DELD9ZWe.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';

package/dist/Alert/index.d.ts

@@ -1,5 +1,5 @@
-import { A as Alert } from '../Alert-Bz_lJ_YE.js';
-export { b as AlertProps, a as alertVariants } from '../Alert-Bz_lJ_YE.js';
+import { A as Alert } from '../Alert-DELD9ZWe.js';
+export { b as AlertProps, a as alertVariants } from '../Alert-DELD9ZWe.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';

package/dist/Alert/index.js

@@ -2,7 +2,7 @@ import {
   Alert_default,
   Alert_default2,
   alertVariants
-} from "../chunk-V2WKZH63.js";
+} from "../chunk-MG3PTEMK.js";
 import "../chunk-J7N2552D.js";
 export {
   Alert_default as Alert,

package/dist/{Alert-Bz_lJ_YE.d.cts → Alert-DELD9ZWe.d.cts}

@@ -28,6 +28,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -60,6 +71,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     color: {
         default: {};
@@ -84,6 +106,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }>, {
     color: {
         default: {};
@@ -108,6 +141,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -140,6 +184,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -172,6 +227,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     color: {
         default: {};
@@ -196,6 +262,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
 type VariantProps = TVProps<typeof alertVariants>;
 type ClassName = TVClassName<typeof alertVariants>;
@@ -216,6 +293,8 @@ interface AlertProps extends VariantProps {
     onClose?: () => void | undefined;
     /** Whether to show the icon at the start */
     showIcon?: boolean;
+    /** limit height to 150px or width to 480px or both */
+    sizeLimit?: VariantProps['sizeLimit'];
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
     /** Title displayed in the Alert above the content */
@@ -226,6 +305,6 @@ interface AlertProps extends VariantProps {
 /**
  * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
  */
-declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
+declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, sizeLimit, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
 
 export { Alert as A, alertVariants as a, type AlertProps as b };

package/dist/{Alert-Bz_lJ_YE.d.ts → Alert-DELD9ZWe.d.ts}

@@ -28,6 +28,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -60,6 +71,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     color: {
         default: {};
@@ -84,6 +106,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }>, {
     color: {
         default: {};
@@ -108,6 +141,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -140,6 +184,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -172,6 +227,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }, {
     color: {
         default: {};
@@ -196,6 +262,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
+    sizeLimit: {
+        height: {
+            base: string;
+        };
+        width: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
 type VariantProps = TVProps<typeof alertVariants>;
 type ClassName = TVClassName<typeof alertVariants>;
@@ -216,6 +293,8 @@ interface AlertProps extends VariantProps {
     onClose?: () => void | undefined;
     /** Whether to show the icon at the start */
     showIcon?: boolean;
+    /** limit height to 150px or width to 480px or both */
+    sizeLimit?: VariantProps['sizeLimit'];
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
     /** Title displayed in the Alert above the content */
@@ -226,6 +305,6 @@ interface AlertProps extends VariantProps {
 /**
  * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
  */
-declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
+declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, sizeLimit, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
 
 export { Alert as A, alertVariants as a, type AlertProps as b };

package/dist/Popover/index.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkC4H5ZCTVcjs = require('../chunk-C4H5ZCTV.cjs');
+var _chunkEAX5J2I2cjs = require('../chunk-EAX5J2I2.cjs');
 require('../chunk-TX2VP4J7.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
-exports.Popover = _chunkC4H5ZCTVcjs.Popover_default; exports.default = _chunkC4H5ZCTVcjs.Popover_default2;
+exports.Popover = _chunkEAX5J2I2cjs.Popover_default; exports.default = _chunkEAX5J2I2cjs.Popover_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Popover/index.d.cts

@@ -1,11 +1,13 @@
-import { _ as _default } from '../Popover-Db9vCWrz.cjs';
-export { P as PopoverProps } from '../Popover-Db9vCWrz.cjs';
+import { _ as _default } from '../Popover-BXyk9y8I.cjs';
+export { P as PopoverProps } from '../Popover-BXyk9y8I.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';
 import '@heroui/popover';
 import 'react';
+import '../Button-BGekDPvO.cjs';
+import '@heroui/button';
 
 
 

package/dist/Popover/index.d.ts

@@ -1,11 +1,13 @@
-import { _ as _default } from '../Popover-Db9vCWrz.js';
-export { P as PopoverProps } from '../Popover-Db9vCWrz.js';
+import { _ as _default } from '../Popover-BHPrdRy6.js';
+export { P as PopoverProps } from '../Popover-BHPrdRy6.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';
 import '@heroui/popover';
 import 'react';
+import '../Button-BGekDPvO.js';
+import '@heroui/button';
 
 
 

package/dist/Popover/index.js

@@ -1,7 +1,7 @@
 import {
   Popover_default,
   Popover_default2
-} from "../chunk-7H67WTTJ.js";
+} from "../chunk-5TOE75VE.js";
 import "../chunk-EQVC4PJE.js";
 import "../chunk-J7N2552D.js";
 export {

package/dist/{Popover-Db9vCWrz.d.cts → Popover-BHPrdRy6.d.ts}

@@ -4,6 +4,7 @@ import * as tailwind_variants from 'tailwind-variants';
 import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
 import { PopoverProps as PopoverProps$1 } from '@heroui/popover';
 import { ReactNode } from 'react';
+import { a as ButtonProps } from './Button-BGekDPvO.js';
 
 declare const popoverVariants: tailwind_variants.TVReturnType<{
     [key: string]: {
@@ -100,12 +101,14 @@ interface PopoverProps extends VariantProps {
     shouldBlockScroll?: boolean;
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
-    /** popover title */
+    /** Popover title */
     title?: ReactNode;
+    /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
+    triggerButtonProps?: Pick<ButtonProps, 'ariaLabel' | 'className' | 'color' | 'disableAnimation' | 'disabled' | 'size' | 'testId' | 'variant'>;
 }
 /**
  * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)
  */
-declare const _default: ({ children, className: _className, content, contentTestId, footer, openControlled, placement, portalContainer, shouldBlockScroll, testId, title, }: PopoverProps) => react_jsx_runtime.JSX.Element;
+declare const _default: ({ children, className: _className, content, contentTestId, footer, openControlled, placement, portalContainer, shouldBlockScroll, testId, title, triggerButtonProps, }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
 export { type PopoverProps as P, _default as _ };

package/dist/{Popover-Db9vCWrz.d.ts → Popover-BXyk9y8I.d.cts}

@@ -4,6 +4,7 @@ import * as tailwind_variants from 'tailwind-variants';
 import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
 import { PopoverProps as PopoverProps$1 } from '@heroui/popover';
 import { ReactNode } from 'react';
+import { a as ButtonProps } from './Button-BGekDPvO.cjs';
 
 declare const popoverVariants: tailwind_variants.TVReturnType<{
     [key: string]: {
@@ -100,12 +101,14 @@ interface PopoverProps extends VariantProps {
     shouldBlockScroll?: boolean;
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
-    /** popover title */
+    /** Popover title */
     title?: ReactNode;
+    /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
+    triggerButtonProps?: Pick<ButtonProps, 'ariaLabel' | 'className' | 'color' | 'disableAnimation' | 'disabled' | 'size' | 'testId' | 'variant'>;
 }
 /**
  * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)
  */
-declare const _default: ({ children, className: _className, content, contentTestId, footer, openControlled, placement, portalContainer, shouldBlockScroll, testId, title, }: PopoverProps) => react_jsx_runtime.JSX.Element;
+declare const _default: ({ children, className: _className, content, contentTestId, footer, openControlled, placement, portalContainer, shouldBlockScroll, testId, title, triggerButtonProps, }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
 export { type PopoverProps as P, _default as _ };

package/dist/Table/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkA4MJ5V64cjs = require('../chunk-A4MJ5V64.cjs');
+var _chunkAJCAIA6Hcjs = require('../chunk-AJCAIA6H.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
 
-exports.Table = _chunkA4MJ5V64cjs.Table_default; exports.default = _chunkA4MJ5V64cjs.Table_default2; exports.tableVariants = _chunkA4MJ5V64cjs.tableVariants;
+exports.Table = _chunkAJCAIA6Hcjs.Table_default; exports.default = _chunkAJCAIA6Hcjs.Table_default2; exports.tableVariants = _chunkAJCAIA6Hcjs.tableVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Table/index.js

@@ -2,7 +2,7 @@ import {
   Table_default,
   Table_default2,
   tableVariants
-} from "../chunk-QMYSCJEJ.js";
+} from "../chunk-AFGRLKHU.js";
 import "../chunk-J7N2552D.js";
 export {
   Table_default as Table,

package/dist/{chunk-7H67WTTJ.js → chunk-5TOE75VE.js}

@@ -7,6 +7,7 @@ import {
 } from "./chunk-J7N2552D.js";
 
 // src/Popover/Popover.tsx
+import { Button } from "@heroui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@heroui/popover";
 import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -30,7 +31,8 @@ var Popover_default = ({
   portalContainer = void 0,
   shouldBlockScroll = void 0,
   testId = void 0,
-  title = void 0
+  title = void 0,
+  triggerButtonProps = void 0
 }) => {
   const variants = popoverVariants();
   const className = variantsToClassNames(variants, _className, "trigger");
@@ -45,7 +47,15 @@ var Popover_default = ({
       showArrow: true
     }, openControlled ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen } : {}), {
       children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { "data-testid": testId, children: /* @__PURE__ */ jsx("button", { children }) }),
+        /* @__PURE__ */ jsx(PopoverTrigger, { "data-testid": testId, children: triggerButtonProps ? (
+          // TODO: currently we have to use @heroui/button because
+          // passing ref does not work (even with forwardRef in Button)
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className: className.trigger }, triggerButtonProps), { children }))
+        ) : (
+          //  eslint-disable-next-line react/button-has-type
+          /* @__PURE__ */ jsx("button", { className: className.trigger, children })
+        ) }),
         /* @__PURE__ */ jsxs(PopoverContent, { "data-testid": contentTestId, children: [
           title && /* @__PURE__ */ jsxs("div", { className: className.header, children: [
             title,
@@ -69,4 +79,4 @@ export {
   Popover_default,
   Popover_default2
 };
-//# sourceMappingURL=chunk-7H67WTTJ.js.map
+//# sourceMappingURL=chunk-5TOE75VE.js.map

package/dist/chunk-5TOE75VE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Popover/Popover.tsx","../src/Popover/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n  slots: {\n    body: 'w-full px-2.5 py-1',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    footer: 'w-full px-2.5 py-1',\n    header: 'w-full px-2.5 py-1',\n    trigger: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** content of the popover */\n  content: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  contentTestId?: string;\n  /** popover footer */\n  footer?: ReactNode;\n  /** use as controlled component  */\n  openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n  /** placement of the popover relative to its trigger reference */\n  placement?: HeroPopoverProps['placement'];\n  /** The container element in which the overlay portal will be placed. */\n  portalContainer?: HeroPopoverProps['portalContainer'];\n  /** Whether to block scrolling outside the popover */\n  shouldBlockScroll?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Popover title */\n  title?: ReactNode;\n  /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n  triggerButtonProps?: Pick<\n    ButtonProps,\n    | 'ariaLabel'\n    | 'className'\n    | 'color'\n    | 'disableAnimation'\n    | 'disabled'\n    | 'size'\n    | 'testId'\n    | 'variant'\n  >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n  children = null,\n  className: _className = undefined,\n  content,\n  contentTestId = undefined,\n  footer = undefined,\n  openControlled = undefined,\n  placement = 'top',\n  portalContainer = undefined,\n  shouldBlockScroll = undefined,\n  testId = undefined,\n  title = undefined,\n  triggerButtonProps = undefined,\n}: PopoverProps) => {\n  // className from slots\n  const variants = popoverVariants();\n  const className = variantsToClassNames(variants, _className, 'trigger');\n\n  return (\n    <Popover\n      classNames={className}\n      placement={placement}\n      portalContainer={portalContainer}\n      radius=\"sm\"\n      shouldBlockScroll={shouldBlockScroll}\n      showArrow\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...(openControlled\n        ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n        : {})}\n    >\n      <PopoverTrigger data-testid={testId}>\n        {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n        {triggerButtonProps ? (\n          // TODO: currently we have to use @heroui/button because\n          // passing ref does not work (even with forwardRef in Button)\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <Button className={className.trigger} {...triggerButtonProps}>\n            {children}\n          </Button>\n        ) : (\n          //  eslint-disable-next-line react/button-has-type\n          <button className={className.trigger}>{children}</button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent data-testid={contentTestId}>\n        {title && (\n          <div className={className.header}>\n            {title}\n            <hr />\n          </div>\n        )}\n        <ScrollShadow className={className.body}>{content}</ScrollShadow>\n        {footer && (\n          <div className={className.footer}>\n            <hr />\n            {footer}\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"],"mappings":";;;;;;;;;AAKA,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,IAAI,4BAA4B;AA+F/B,cAUA,YAVA;AA1FH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF,CAAC;AA6CD,IAAO,kBAAQ,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW,aAAa;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,qBAAqB;AACvB,MAAoB;AAElB,QAAM,WAAW,gBAAgB;AACjC,QAAM,YAAY,qBAAqB,UAAU,YAAY,SAAS;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,WAAS;AAAA,OAEJ,iBACD,EAAE,QAAQ,eAAe,MAAM,cAAc,eAAe,QAAQ,IACpE,CAAC,IAVN;AAAA,MAYC;AAAA,4BAAC,kBAAe,eAAa,QAE1B;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,uCAAO,WAAW,UAAU,WAAa,qBAAzC,EACE,WACH;AAAA;AAAA;AAAA,UAGA,oBAAC,YAAO,WAAW,UAAU,SAAU,UAAS;AAAA,WAEpD;AAAA,QACA,qBAAC,kBAAe,eAAa,eAC1B;AAAA,mBACC,qBAAC,SAAI,WAAW,UAAU,QACvB;AAAA;AAAA,YACD,oBAAC,QAAG;AAAA,aACN;AAAA,UAEF,oBAAC,wBAAa,WAAW,UAAU,MAAO,mBAAQ;AAAA,UACjD,UACC,qBAAC,SAAI,WAAW,UAAU,QACxB;AAAA,gCAAC,QAAG;AAAA,YACH;AAAA,aACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC1HA,IAAOA,mBAAQ;","names":["Popover_default"]}

package/dist/{chunk-QMYSCJEJ.js → chunk-AFGRLKHU.js}

@@ -81,7 +81,7 @@ var Table = ({
       isStriped: separation === "striped" || separation === "striped-divider-x",
       isVirtualized: virtualized,
       maxTableHeight,
-      removeWrapper: !hasWrapper,
+      removeWrapper: virtualized ? false : !hasWrapper,
       rowHeight,
       children: [
         /* @__PURE__ */ jsx(TableHeader, { columns, children: (column) => /* @__PURE__ */ jsx(TableColumn, { children: column.label }, column.key) }),
@@ -115,4 +115,4 @@ export {
   Table_default,
   Table_default2
 };
-//# sourceMappingURL=chunk-QMYSCJEJ.js.map
+//# sourceMappingURL=chunk-AFGRLKHU.js.map

package/dist/{chunk-QMYSCJEJ.js.map → chunk-AFGRLKHU.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Table/Table.tsx","../src/Table/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as HeroTable,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n  slots: {\n    base: '',\n    wrapper: '',\n    table: '',\n    thead: '',\n    tbody: '',\n    tr: '',\n    th: 'bg-content2',\n    td: '',\n    tfoot: '',\n    sortIcon: '',\n    emptyWrapper: '',\n    loadingWrapper: '',\n  },\n  variants: {\n    separation: {\n      divider: {\n        tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'divider-x': {\n        tr: 'divide-x',\n      },\n      'divider-y': {\n        tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'striped-divider-x': {\n        tr: 'divide-x',\n        th: 'border-divider',\n        td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      striped: {\n        tr: '',\n        td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      none: {},\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n  key: string;\n  label: ReactNode;\n}\n\nexport interface TableRowProps {\n  key: string | number;\n  [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n  /** Aria label for the Table. */\n  ariaLabel?: string;\n  /** Component to display at the bottom of the Table. */\n  bottomContent?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Objects with table data */\n  columns: TableColumnProps[];\n  /** Component to display if there are no rows! */\n  emptyContent?: ReactNode;\n  /** Determine if the Table should have a card like wrapper. */\n  hasWrapper?: boolean;\n  /** remove header */\n  hideHeader?: boolean;\n  /** Tells the Table to show the loading component. */\n  loading?: boolean;\n  /** Loading animation component. */\n  loadingContent?: ReactNode;\n  /** The maximum height of the table in pixels. Required when using virtualization. */\n  maxTableHeight?: number;\n  /** The fixed height of each row item in pixels. Required when using virtualization. */\n  rowHeight?: number;\n  /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n  rows?: TableRowProps[];\n  /** Separation style for the rows & columns. */\n  separation?:\n    | 'none'\n    | 'striped'\n    | 'striped-divider-x'\n    | 'divider-x'\n    | 'divider-y'\n    | 'divider';\n  /** Keeps the header of the Table in view while scrolling a height limited Table. */\n  stickyHeader?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n  virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n  ariaLabel = undefined,\n  bottomContent = undefined,\n  className = undefined,\n  columns,\n  emptyContent = 'No rows to display.',\n  hasWrapper = false,\n  hideHeader = false,\n  loading = false,\n  loadingContent = undefined,\n  maxTableHeight = undefined,\n  rowHeight = undefined,\n  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n  virtualized = false,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId && slugify(testId)}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      isVirtualized={virtualized}\n      maxTableHeight={maxTableHeight}\n      removeWrapper={!hasWrapper}\n      rowHeight={rowHeight}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => (\n          <TableColumn key={column.key}>{column.label}</TableColumn>\n        )}\n      </TableHeader>\n      <TableBody\n        isLoading={loading}\n        loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n        emptyContent={emptyContent}\n        items={rows}\n      >\n        {(item: TableRowProps) => (\n          <TableRow\n            key={item.key}\n            // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n          >\n            {(columnKey) => (\n              <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n    </HeroTable>\n  );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n  TableProps,\n  TableRowProps,\n  TableColumnProps,\n  VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,SAAS,IAAI,4BAA4B;AA0H9C,SAeM,KAfN;AAvHG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,qBAAqB;AAAA,QACnB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;AA2DD,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,cAAc;AAChB,MAAkB;AAChB,QAAM,WAAW,cAAc,EAAE,WAAW,CAAC;AAC7C,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC;AAAA,MACA,gBAAgB;AAAA,MAChB,WAAW,eAAe,aAAa,eAAe;AAAA,MACtD,eAAe;AAAA,MACf;AAAA,MACA,eAAe,CAAC;AAAA,MAChB;AAAA,MAEA;AAAA,4BAAC,eAAY,SACV,WAAC,WACA,oBAAC,eAA8B,iBAAO,SAApB,OAAO,GAAmB,GAEhD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,gBAAgB,kBAAkB;AAAA,YAClC;AAAA,YACA,OAAO;AAAA,YAEN,WAAC,SACA;AAAA,cAAC;AAAA;AAAA,gBAIE,WAAC,cACA,oBAAC,aAAW,sBAAY,MAAM,SAAS,GAAE;AAAA;AAAA,cAJtC,KAAK;AAAA,YAMZ;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACnKf,IAAOA,iBAAQ;","names":["Table_default"]}
+{"version":3,"sources":["../src/Table/Table.tsx","../src/Table/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as HeroTable,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n  slots: {\n    base: '',\n    wrapper: '',\n    table: '',\n    thead: '',\n    tbody: '',\n    tr: '',\n    th: 'bg-content2',\n    td: '',\n    tfoot: '',\n    sortIcon: '',\n    emptyWrapper: '',\n    loadingWrapper: '',\n  },\n  variants: {\n    separation: {\n      divider: {\n        tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'divider-x': {\n        tr: 'divide-x',\n      },\n      'divider-y': {\n        tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'striped-divider-x': {\n        tr: 'divide-x',\n        th: 'border-divider',\n        td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      striped: {\n        tr: '',\n        td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      none: {},\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n  key: string;\n  label: ReactNode;\n}\n\nexport interface TableRowProps {\n  key: string | number;\n  [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n  /** Aria label for the Table. */\n  ariaLabel?: string;\n  /** Component to display at the bottom of the Table. */\n  bottomContent?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Objects with table data */\n  columns: TableColumnProps[];\n  /** Component to display if there are no rows! */\n  emptyContent?: ReactNode;\n  /** Determine if the Table should have a card like wrapper. */\n  hasWrapper?: boolean;\n  /** remove header */\n  hideHeader?: boolean;\n  /** Tells the Table to show the loading component. */\n  loading?: boolean;\n  /** Loading animation component. */\n  loadingContent?: ReactNode;\n  /** The maximum height of the table in pixels. Required when using virtualization. */\n  maxTableHeight?: number;\n  /** The fixed height of each row item in pixels. Required when using virtualization. */\n  rowHeight?: number;\n  /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n  rows?: TableRowProps[];\n  /** Separation style for the rows & columns. */\n  separation?:\n    | 'none'\n    | 'striped'\n    | 'striped-divider-x'\n    | 'divider-x'\n    | 'divider-y'\n    | 'divider';\n  /** Keeps the header of the Table in view while scrolling a height limited Table. */\n  stickyHeader?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n  virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n  ariaLabel = undefined,\n  bottomContent = undefined,\n  className = undefined,\n  columns,\n  emptyContent = 'No rows to display.',\n  hasWrapper = false,\n  hideHeader = false,\n  loading = false,\n  loadingContent = undefined,\n  maxTableHeight = undefined,\n  rowHeight = undefined,\n  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n  virtualized = false,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId && slugify(testId)}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      isVirtualized={virtualized}\n      maxTableHeight={maxTableHeight}\n      removeWrapper={virtualized ? false : !hasWrapper} // always show wrapper if virtualized\n      rowHeight={rowHeight}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => (\n          <TableColumn key={column.key}>{column.label}</TableColumn>\n        )}\n      </TableHeader>\n      <TableBody\n        isLoading={loading}\n        loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n        emptyContent={emptyContent}\n        items={rows}\n      >\n        {(item: TableRowProps) => (\n          <TableRow\n            key={item.key}\n            // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n          >\n            {(columnKey) => (\n              <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n    </HeroTable>\n  );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n  TableProps,\n  TableRowProps,\n  TableColumnProps,\n  VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,SAAS,IAAI,4BAA4B;AA0H9C,SAeM,KAfN;AAvHG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,qBAAqB;AAAA,QACnB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;AA2DD,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,cAAc;AAChB,MAAkB;AAChB,QAAM,WAAW,cAAc,EAAE,WAAW,CAAC;AAC7C,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC;AAAA,MACA,gBAAgB;AAAA,MAChB,WAAW,eAAe,aAAa,eAAe;AAAA,MACtD,eAAe;AAAA,MACf;AAAA,MACA,eAAe,cAAc,QAAQ,CAAC;AAAA,MACtC;AAAA,MAEA;AAAA,4BAAC,eAAY,SACV,WAAC,WACA,oBAAC,eAA8B,iBAAO,SAApB,OAAO,GAAmB,GAEhD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,gBAAgB,kBAAkB;AAAA,YAClC;AAAA,YACA,OAAO;AAAA,YAEN,WAAC,SACA;AAAA,cAAC;AAAA;AAAA,gBAIE,WAAC,cACA,oBAAC,aAAW,sBAAY,MAAM,SAAS,GAAE;AAAA;AAAA,cAJtC,KAAK;AAAA,YAMZ;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACnKf,IAAOA,iBAAQ;","names":["Table_default"]}

package/dist/{chunk-A4MJ5V64.cjs → chunk-AJCAIA6H.cjs}

@@ -81,7 +81,7 @@ var Table = ({
       isStriped: separation === "striped" || separation === "striped-divider-x",
       isVirtualized: virtualized,
       maxTableHeight,
-      removeWrapper: !hasWrapper,
+      removeWrapper: virtualized ? false : !hasWrapper,
       rowHeight,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableHeader, { columns, children: (column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableColumn, { children: column.label }, column.key) }),
@@ -115,4 +115,4 @@ var Table_default2 = Table_default;
 
 
 exports.tableVariants = tableVariants; exports.Table_default = Table_default; exports.Table_default2 = Table_default2;
-//# sourceMappingURL=chunk-A4MJ5V64.cjs.map
+//# sourceMappingURL=chunk-AJCAIA6H.cjs.map

package/dist/chunk-AJCAIA6H.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AJCAIA6H.cjs","../src/Table/Table.tsx","../src/Table/index.ts"],"names":["Table_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AJCAIA6H.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as HeroTable,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n  slots: {\n    base: '',\n    wrapper: '',\n    table: '',\n    thead: '',\n    tbody: '',\n    tr: '',\n    th: 'bg-content2',\n    td: '',\n    tfoot: '',\n    sortIcon: '',\n    emptyWrapper: '',\n    loadingWrapper: '',\n  },\n  variants: {\n    separation: {\n      divider: {\n        tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'divider-x': {\n        tr: 'divide-x',\n      },\n      'divider-y': {\n        tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'striped-divider-x': {\n        tr: 'divide-x',\n        th: 'border-divider',\n        td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      striped: {\n        tr: '',\n        td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      none: {},\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n  key: string;\n  label: ReactNode;\n}\n\nexport interface TableRowProps {\n  key: string | number;\n  [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n  /** Aria label for the Table. */\n  ariaLabel?: string;\n  /** Component to display at the bottom of the Table. */\n  bottomContent?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Objects with table data */\n  columns: TableColumnProps[];\n  /** Component to display if there are no rows! */\n  emptyContent?: ReactNode;\n  /** Determine if the Table should have a card like wrapper. */\n  hasWrapper?: boolean;\n  /** remove header */\n  hideHeader?: boolean;\n  /** Tells the Table to show the loading component. */\n  loading?: boolean;\n  /** Loading animation component. */\n  loadingContent?: ReactNode;\n  /** The maximum height of the table in pixels. Required when using virtualization. */\n  maxTableHeight?: number;\n  /** The fixed height of each row item in pixels. Required when using virtualization. */\n  rowHeight?: number;\n  /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n  rows?: TableRowProps[];\n  /** Separation style for the rows & columns. */\n  separation?:\n    | 'none'\n    | 'striped'\n    | 'striped-divider-x'\n    | 'divider-x'\n    | 'divider-y'\n    | 'divider';\n  /** Keeps the header of the Table in view while scrolling a height limited Table. */\n  stickyHeader?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n  virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n  ariaLabel = undefined,\n  bottomContent = undefined,\n  className = undefined,\n  columns,\n  emptyContent = 'No rows to display.',\n  hasWrapper = false,\n  hideHeader = false,\n  loading = false,\n  loadingContent = undefined,\n  maxTableHeight = undefined,\n  rowHeight = undefined,\n  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n  virtualized = false,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId && slugify(testId)}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      isVirtualized={virtualized}\n      maxTableHeight={maxTableHeight}\n      removeWrapper={virtualized ? false : !hasWrapper} // always show wrapper if virtualized\n      rowHeight={rowHeight}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => (\n          <TableColumn key={column.key}>{column.label}</TableColumn>\n        )}\n      </TableHeader>\n      <TableBody\n        isLoading={loading}\n        loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n        emptyContent={emptyContent}\n        items={rows}\n      >\n        {(item: TableRowProps) => (\n          <TableRow\n            key={item.key}\n            // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n          >\n            {(columnKey) => (\n              <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n    </HeroTable>\n  );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n  TableProps,\n  TableRowProps,\n  TableColumnProps,\n  VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"]}

package/dist/{chunk-C4H5ZCTV.cjs → chunk-EAX5J2I2.cjs}

@@ -7,6 +7,7 @@ var _chunkTX2VP4J7cjs = require('./chunk-TX2VP4J7.cjs');
 var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
 
 // src/Popover/Popover.tsx
+var _button = require('@heroui/button');
 var _popover = require('@heroui/popover');
 var _pixelutils = require('@fuf-stack/pixel-utils');
 var _jsxruntime = require('react/jsx-runtime');
@@ -30,7 +31,8 @@ var Popover_default = ({
   portalContainer = void 0,
   shouldBlockScroll = void 0,
   testId = void 0,
-  title = void 0
+  title = void 0,
+  triggerButtonProps = void 0
 }) => {
   const variants = popoverVariants();
   const className = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "trigger");
@@ -45,7 +47,15 @@ var Popover_default = ({
       showArrow: true
     }, openControlled ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen } : {}), {
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _popover.PopoverTrigger, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { children }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _popover.PopoverTrigger, { "data-testid": testId, children: triggerButtonProps ? (
+          // TODO: currently we have to use @heroui/button because
+          // passing ref does not work (even with forwardRef in Button)
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, { className: className.trigger }, triggerButtonProps), { children }))
+        ) : (
+          //  eslint-disable-next-line react/button-has-type
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: className.trigger, children })
+        ) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _popover.PopoverContent, { "data-testid": contentTestId, children: [
           title && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: className.header, children: [
             title,
@@ -69,4 +79,4 @@ var Popover_default2 = Popover_default;
 
 
 exports.Popover_default = Popover_default; exports.Popover_default2 = Popover_default2;
-//# sourceMappingURL=chunk-C4H5ZCTV.cjs.map
+//# sourceMappingURL=chunk-EAX5J2I2.cjs.map