@fuf-stack/pixels 1.10.1 → 1.11.0

package/dist/Modal/Modal.cjs

@@ -24,7 +24,7 @@ const modalVariants = (0, _fuf_stack_pixel_utils.tv)({
 /**
 * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)
 */
-const Modal = ({ children = null, className = void 0, disableAnimation = false, footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
+const Modal = ({ children = null, className = void 0, disableAnimation = (0, _fuf_stack_pixel_utils.isTestEnvironment)(), footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.Modal, {
 		backdrop: "opaque",
 		classNames: (0, _fuf_stack_pixel_utils.variantsToClassNames)(modalVariants({ size }), className, "base"),

package/dist/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","names":["HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n  Modal as HeroModal,\n  ModalBody as HeroModalBody,\n  ModalContent as HeroModalContent,\n  ModalFooter as HeroModalFooter,\n  ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n  slots: {\n    backdrop: '',\n    base: '',\n    body: 'py-4',\n    closeButton: '',\n    footer: 'border-t border-t-divider',\n    header: 'border-b border-b-divider',\n    wrapper: '',\n  },\n  variants: {\n    size: {\n      sm: { base: 'max-w-sm' },\n      md: { base: 'max-w-md' },\n      lg: { base: 'max-w-lg' },\n      xl: { base: 'max-w-5xl' },\n      full: { base: 'h-[80dvh] max-w-full' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n  /** modal body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Disable animations completely */\n  disableAnimation?: boolean;\n  /** modal footer */\n  footer?: ReactNode;\n  /** modal header */\n  header?: ReactNode;\n  /** open state (controlled) */\n  isOpen: boolean;\n  /** close event handler */\n  onClose: () => void;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroModalProps['portalContainer'];\n  /** modal size */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n  children = null,\n  className = undefined,\n  disableAnimation = false,\n  footer = undefined,\n  header = undefined,\n  isOpen,\n  onClose,\n  portalContainer = undefined,\n  size = 'md',\n  testId = undefined,\n}: ModalProps) => {\n  // classNames from slots\n  const variants = modalVariants({ size });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroModal\n      backdrop=\"opaque\"\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={disableAnimation}\n      isOpen={isOpen}\n      onClose={onClose}\n      placement=\"center\"\n      portalContainer={portalContainer}\n      scrollBehavior=\"inside\"\n    >\n      <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n              <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n              {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n            </>\n          );\n        }}\n      </HeroModalContent>\n    </HeroModal>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;AAeA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AA+BD,MAAM,SAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,mBAAmB,OACnB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,UAAS;EACT,aAAA,GAAA,uBAAA,sBANa,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}
+{"version":3,"file":"Modal.cjs","names":["HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n  Modal as HeroModal,\n  ModalBody as HeroModalBody,\n  ModalContent as HeroModalContent,\n  ModalFooter as HeroModalFooter,\n  ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport {\n  isTestEnvironment,\n  tv,\n  variantsToClassNames,\n} from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n  slots: {\n    backdrop: '',\n    base: '',\n    body: 'py-4',\n    closeButton: '',\n    footer: 'border-t border-t-divider',\n    header: 'border-b border-b-divider',\n    wrapper: '',\n  },\n  variants: {\n    size: {\n      sm: { base: 'max-w-sm' },\n      md: { base: 'max-w-md' },\n      lg: { base: 'max-w-lg' },\n      xl: { base: 'max-w-5xl' },\n      full: { base: 'h-[80dvh] max-w-full' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n  /** modal body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /**\n   * Disable animations completely. Defaults to `true` in test environments so\n   * snapshots are deterministic (the open/close opacity tween otherwise\n   * captures a random mid-animation frame).\n   */\n  disableAnimation?: boolean;\n  /** modal footer */\n  footer?: ReactNode;\n  /** modal header */\n  header?: ReactNode;\n  /** open state (controlled) */\n  isOpen: boolean;\n  /** close event handler */\n  onClose: () => void;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroModalProps['portalContainer'];\n  /** modal size */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n  children = null,\n  className = undefined,\n  disableAnimation = isTestEnvironment(),\n  footer = undefined,\n  header = undefined,\n  isOpen,\n  onClose,\n  portalContainer = undefined,\n  size = 'md',\n  testId = undefined,\n}: ModalProps) => {\n  // classNames from slots\n  const variants = modalVariants({ size });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroModal\n      backdrop=\"opaque\"\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={disableAnimation}\n      isOpen={isOpen}\n      onClose={onClose}\n      placement=\"center\"\n      portalContainer={portalContainer}\n      scrollBehavior=\"inside\"\n    >\n      <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n              <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n              {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n            </>\n          );\n        }}\n      </HeroModalContent>\n    </HeroModal>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;AAmBA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AAmCD,MAAM,SAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,oBAAA,GAAA,uBAAA,mBAAqC,GACrC,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,UAAS;EACT,aAAA,GAAA,uBAAA,sBANa,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}

package/dist/Modal/Modal.d.cts

@@ -89,7 +89,11 @@ interface ModalProps$1 extends VariantProps {
   children?: ReactNode;
   /** CSS class name */
   className?: ClassName;
-  /** Disable animations completely */
+  /**
+   * Disable animations completely. Defaults to `true` in test environments so
+   * snapshots are deterministic (the open/close opacity tween otherwise
+   * captures a random mid-animation frame).
+   */
   disableAnimation?: boolean;
   /** modal footer */
   footer?: ReactNode;

package/dist/Modal/Modal.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.cts","names":[],"sources":["../../src/Modal/Modal.tsx"],"mappings":";;;;;cAea,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqBrB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,YAAA,SAAmB,YAAA;EAkB3B;EAhBP,QAAA,GAAW,SAAA;EAFmC;EAI9C,SAAA,GAAY,SAAA;EAJsB;EAMlC,gBAAA;EAJW;EAMX,MAAA,GAAS,SAAA;EAJG;EAMZ,MAAA,GAAS,SAAA;EAFT;EAIA,MAAA;EAFA;EAIA,OAAA;EAFA;EAIA,eAAA,GAAkB,UAAA;EAAlB;EAEA,IAAA,GAAO,YAAA;EAAP;EAEA,MAAA;AAAA;;AAAM;AACP;cAKK,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,MAAA;EAAA,MAAA;EAAA,MAAA;EAAA,OAAA;EAAA,eAAA;EAAA,IAAA;EAAA;AAAA,GAWZ,YAAA,iCAAU,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Modal.d.cts","names":[],"sources":["../../src/Modal/Modal.tsx"],"mappings":";;;;;cAmBa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqBrB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,YAAA,SAAmB,YAAA;EAsB3B;EApBP,QAAA,GAAW,SAAA;EAFmC;EAI9C,SAAA,GAAY,SAAA;EAJsB;;;;;EAUlC,gBAAA;EAEA;EAAA,MAAA,GAAS,SAAA;EAET;EAAA,MAAA,GAAS,SAAA;EAET;EAAA,MAAA;EAIA;EAFA,OAAA;EAIA;EAFA,eAAA,GAAkB,UAAA;EAIlB;EAFA,IAAA,GAAO,YAAA;EAED;EAAN,MAAA;AAAA;;;;cAMI,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,MAAA;EAAA,MAAA;EAAA,MAAA;EAAA,OAAA;EAAA,eAAA;EAAA,IAAA;EAAA;AAAA,GAWZ,YAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Modal/Modal.d.ts

@@ -89,7 +89,11 @@ interface ModalProps$1 extends VariantProps {
   children?: ReactNode;
   /** CSS class name */
   className?: ClassName;
-  /** Disable animations completely */
+  /**
+   * Disable animations completely. Defaults to `true` in test environments so
+   * snapshots are deterministic (the open/close opacity tween otherwise
+   * captures a random mid-animation frame).
+   */
   disableAnimation?: boolean;
   /** modal footer */
   footer?: ReactNode;

package/dist/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","names":[],"sources":["../../src/Modal/Modal.tsx"],"mappings":";;;;;cAea,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqBrB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,YAAA,SAAmB,YAAA;EAkB3B;EAhBP,QAAA,GAAW,SAAA;EAFmC;EAI9C,SAAA,GAAY,SAAA;EAJsB;EAMlC,gBAAA;EAJW;EAMX,MAAA,GAAS,SAAA;EAJG;EAMZ,MAAA,GAAS,SAAA;EAFT;EAIA,MAAA;EAFA;EAIA,OAAA;EAFA;EAIA,eAAA,GAAkB,UAAA;EAAlB;EAEA,IAAA,GAAO,YAAA;EAAP;EAEA,MAAA;AAAA;;AAAM;AACP;cAKK,OAAA;EAAS,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,MAAA;EAAA,MAAA;EAAA,MAAA;EAAA,OAAA;EAAA,eAAA;EAAA,IAAA;EAAA;AAAA,GAWZ,YAAA,iCAAU,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Modal.d.ts","names":[],"sources":["../../src/Modal/Modal.tsx"],"mappings":";;;;;cAmBa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqBrB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,YAAA,SAAmB,YAAA;EAsB3B;EApBP,QAAA,GAAW,SAAA;EAFmC;EAI9C,SAAA,GAAY,SAAA;EAJsB;;;;;EAUlC,gBAAA;EAEA;EAAA,MAAA,GAAS,SAAA;EAET;EAAA,MAAA,GAAS,SAAA;EAET;EAAA,MAAA;EAIA;EAFA,OAAA;EAIA;EAFA,eAAA,GAAkB,UAAA;EAIlB;EAFA,IAAA,GAAO,YAAA;EAED;EAAN,MAAA;AAAA;;;;cAMI,OAAA;EAAS,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,MAAA;EAAA,MAAA;EAAA,MAAA;EAAA,OAAA;EAAA,eAAA;EAAA,IAAA;EAAA;AAAA,GAWZ,YAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Modal/Modal.js

@@ -1,4 +1,4 @@
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { isTestEnvironment, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/modal";
 //#region src/Modal/Modal.tsx
@@ -23,7 +23,7 @@ const modalVariants = tv({
 /**
 * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)
 */
-const Modal$1 = ({ children = null, className = void 0, disableAnimation = false, footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
+const Modal$1 = ({ children = null, className = void 0, disableAnimation = isTestEnvironment(), footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
 	return /* @__PURE__ */ jsx(Modal, {
 		backdrop: "opaque",
 		classNames: variantsToClassNames(modalVariants({ size }), className, "base"),

package/dist/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n  Modal as HeroModal,\n  ModalBody as HeroModalBody,\n  ModalContent as HeroModalContent,\n  ModalFooter as HeroModalFooter,\n  ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n  slots: {\n    backdrop: '',\n    base: '',\n    body: 'py-4',\n    closeButton: '',\n    footer: 'border-t border-t-divider',\n    header: 'border-b border-b-divider',\n    wrapper: '',\n  },\n  variants: {\n    size: {\n      sm: { base: 'max-w-sm' },\n      md: { base: 'max-w-md' },\n      lg: { base: 'max-w-lg' },\n      xl: { base: 'max-w-5xl' },\n      full: { base: 'h-[80dvh] max-w-full' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n  /** modal body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Disable animations completely */\n  disableAnimation?: boolean;\n  /** modal footer */\n  footer?: ReactNode;\n  /** modal header */\n  header?: ReactNode;\n  /** open state (controlled) */\n  isOpen: boolean;\n  /** close event handler */\n  onClose: () => void;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroModalProps['portalContainer'];\n  /** modal size */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n  children = null,\n  className = undefined,\n  disableAnimation = false,\n  footer = undefined,\n  header = undefined,\n  isOpen,\n  onClose,\n  portalContainer = undefined,\n  size = 'md',\n  testId = undefined,\n}: ModalProps) => {\n  // classNames from slots\n  const variants = modalVariants({ size });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroModal\n      backdrop=\"opaque\"\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={disableAnimation}\n      isOpen={isOpen}\n      onClose={onClose}\n      placement=\"center\"\n      portalContainer={portalContainer}\n      scrollBehavior=\"inside\"\n    >\n      <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n              <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n              {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n            </>\n          );\n        }}\n      </HeroModalContent>\n    </HeroModal>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;AAeA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AA+BD,MAAMA,WAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,mBAAmB,OACnB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,oBAACC,OAAD;EACE,UAAS;EACT,YALe,qBADF,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,oBAACC,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,qBAAA,UAAA,EAAA,UAAA;KACG,SAAS,oBAACC,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,oBAACC,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,oBAACC,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}
+{"version":3,"file":"Modal.js","names":["Modal","HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n  Modal as HeroModal,\n  ModalBody as HeroModalBody,\n  ModalContent as HeroModalContent,\n  ModalFooter as HeroModalFooter,\n  ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport {\n  isTestEnvironment,\n  tv,\n  variantsToClassNames,\n} from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n  slots: {\n    backdrop: '',\n    base: '',\n    body: 'py-4',\n    closeButton: '',\n    footer: 'border-t border-t-divider',\n    header: 'border-b border-b-divider',\n    wrapper: '',\n  },\n  variants: {\n    size: {\n      sm: { base: 'max-w-sm' },\n      md: { base: 'max-w-md' },\n      lg: { base: 'max-w-lg' },\n      xl: { base: 'max-w-5xl' },\n      full: { base: 'h-[80dvh] max-w-full' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n  /** modal body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /**\n   * Disable animations completely. Defaults to `true` in test environments so\n   * snapshots are deterministic (the open/close opacity tween otherwise\n   * captures a random mid-animation frame).\n   */\n  disableAnimation?: boolean;\n  /** modal footer */\n  footer?: ReactNode;\n  /** modal header */\n  header?: ReactNode;\n  /** open state (controlled) */\n  isOpen: boolean;\n  /** close event handler */\n  onClose: () => void;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroModalProps['portalContainer'];\n  /** modal size */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n  children = null,\n  className = undefined,\n  disableAnimation = isTestEnvironment(),\n  footer = undefined,\n  header = undefined,\n  isOpen,\n  onClose,\n  portalContainer = undefined,\n  size = 'md',\n  testId = undefined,\n}: ModalProps) => {\n  // classNames from slots\n  const variants = modalVariants({ size });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroModal\n      backdrop=\"opaque\"\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={disableAnimation}\n      isOpen={isOpen}\n      onClose={onClose}\n      placement=\"center\"\n      portalContainer={portalContainer}\n      scrollBehavior=\"inside\"\n    >\n      <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n              <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n              {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n            </>\n          );\n        }}\n      </HeroModalContent>\n    </HeroModal>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;AAmBA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AAmCD,MAAMA,WAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,mBAAmB,kBAAkB,GACrC,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,oBAACC,OAAD;EACE,UAAS;EACT,YALe,qBADF,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,oBAACC,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,qBAAA,UAAA,EAAA,UAAA;KACG,SAAS,oBAACC,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,oBAACC,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,oBAACC,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}

package/dist/Modal/ModalHost.cjs

@@ -0,0 +1,40 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_Modal = require("./Modal.cjs");
+const require_modalStore = require("./modalStore.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/Modal/ModalHost.tsx
+/**
+* Renders all modals opened via the imperative `modal.open()` API.
+*
+* Mount once at the top level of your app, similar to `<Toaster />`:
+*
+* ```tsx
+* <ModalHost />
+* ```
+*
+* Then open modals from anywhere with `modal.open({ ... })`.
+*/
+const ModalHost = () => {
+	const entries = require_modalStore.useModalEntries();
+	(0, react.useEffect)(() => {
+		return () => {
+			require_modalStore.modal.reset();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: entries.map((entry) => {
+		const { id, isOpen, content, onClose: _onClose, ...modalProps } = entry;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Modal.default, {
+			...modalProps,
+			isOpen,
+			onClose: () => {
+				require_modalStore.modal.close(id);
+			},
+			children: content
+		}, id);
+	}) });
+};
+//#endregion
+exports.default = ModalHost;
+
+//# sourceMappingURL=ModalHost.cjs.map

package/dist/Modal/ModalHost.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHost.cjs","names":["useModalEntries","Modal"],"sources":["../../src/Modal/ModalHost.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport Modal from './Modal';\nimport { modal, useModalEntries } from './modalStore';\n\n/**\n * Renders all modals opened via the imperative `modal.open()` API.\n *\n * Mount once at the top level of your app, similar to `<Toaster />`:\n *\n * ```tsx\n * <ModalHost />\n * ```\n *\n * Then open modals from anywhere with `modal.open({ ... })`.\n */\nconst ModalHost = () => {\n  const entries = useModalEntries();\n\n  // Clear the store when the host unmounts so any still-open\n  // modal does not re-appear when a new host mounts.\n  useEffect(() => {\n    return () => {\n      modal.reset();\n    };\n  }, []);\n  return (\n    <>\n      {entries.map((entry) => {\n        const { id, isOpen, content, onClose: _onClose, ...modalProps } = entry;\n        return (\n          <Modal\n            key={id}\n            {...modalProps}\n            isOpen={isOpen}\n            onClose={() => {\n              modal.close(id);\n            }}\n          >\n            {content}\n          </Modal>\n        );\n      })}\n    </>\n  );\n};\n\nexport default ModalHost;\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB;CACtB,MAAM,UAAUA,mBAAAA,gBAAgB;CAIhC,CAAA,GAAA,MAAA,iBAAgB;EACd,aAAa;GACX,mBAAA,MAAM,MAAM;EACd;CACF,GAAG,CAAC,CAAC;CACL,OACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,UAAU;EACtB,MAAM,EAAE,IAAI,QAAQ,SAAS,SAAS,UAAU,GAAG,eAAe;EAClE,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;GAEE,GAAI;GACI;GACR,eAAe;IACb,mBAAA,MAAM,MAAM,EAAE;GAChB;aAEC;EACI,GARA,EAQA;CAEX,CAAC,EACD,CAAA;AAEN"}

package/dist/Modal/ModalHost.d.cts

@@ -0,0 +1,16 @@
+//#region src/Modal/ModalHost.d.ts
+/**
+ * Renders all modals opened via the imperative `modal.open()` API.
+ *
+ * Mount once at the top level of your app, similar to `<Toaster />`:
+ *
+ * ```tsx
+ * <ModalHost />
+ * ```
+ *
+ * Then open modals from anywhere with `modal.open({ ... })`.
+ */
+declare const ModalHost: () => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ModalHost };
+//# sourceMappingURL=ModalHost.d.cts.map

package/dist/Modal/ModalHost.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHost.d.cts","names":[],"sources":["../../src/Modal/ModalHost.tsx"],"mappings":";;;;;;AA6CC;;;;;;cA7BK,SAAA,oCAAS,GAAA,CAAA,OA6Bd"}

package/dist/Modal/ModalHost.d.ts

@@ -0,0 +1,16 @@
+//#region src/Modal/ModalHost.d.ts
+/**
+ * Renders all modals opened via the imperative `modal.open()` API.
+ *
+ * Mount once at the top level of your app, similar to `<Toaster />`:
+ *
+ * ```tsx
+ * <ModalHost />
+ * ```
+ *
+ * Then open modals from anywhere with `modal.open({ ... })`.
+ */
+declare const ModalHost: () => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ModalHost };
+//# sourceMappingURL=ModalHost.d.ts.map

package/dist/Modal/ModalHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHost.d.ts","names":[],"sources":["../../src/Modal/ModalHost.tsx"],"mappings":";;;;;;AA6CC;;;;;;cA7BK,SAAA,oCAAS,GAAA,CAAA,OA6Bd"}

package/dist/Modal/ModalHost.js

@@ -0,0 +1,39 @@
+import Modal from "./Modal.js";
+import { modal, useModalEntries } from "./modalStore.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+//#region src/Modal/ModalHost.tsx
+/**
+* Renders all modals opened via the imperative `modal.open()` API.
+*
+* Mount once at the top level of your app, similar to `<Toaster />`:
+*
+* ```tsx
+* <ModalHost />
+* ```
+*
+* Then open modals from anywhere with `modal.open({ ... })`.
+*/
+const ModalHost = () => {
+	const entries = useModalEntries();
+	useEffect(() => {
+		return () => {
+			modal.reset();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(Fragment, { children: entries.map((entry) => {
+		const { id, isOpen, content, onClose: _onClose, ...modalProps } = entry;
+		return /* @__PURE__ */ jsx(Modal, {
+			...modalProps,
+			isOpen,
+			onClose: () => {
+				modal.close(id);
+			},
+			children: content
+		}, id);
+	}) });
+};
+//#endregion
+export { ModalHost as default };
+
+//# sourceMappingURL=ModalHost.js.map

package/dist/Modal/ModalHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHost.js","names":[],"sources":["../../src/Modal/ModalHost.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport Modal from './Modal';\nimport { modal, useModalEntries } from './modalStore';\n\n/**\n * Renders all modals opened via the imperative `modal.open()` API.\n *\n * Mount once at the top level of your app, similar to `<Toaster />`:\n *\n * ```tsx\n * <ModalHost />\n * ```\n *\n * Then open modals from anywhere with `modal.open({ ... })`.\n */\nconst ModalHost = () => {\n  const entries = useModalEntries();\n\n  // Clear the store when the host unmounts so any still-open\n  // modal does not re-appear when a new host mounts.\n  useEffect(() => {\n    return () => {\n      modal.reset();\n    };\n  }, []);\n  return (\n    <>\n      {entries.map((entry) => {\n        const { id, isOpen, content, onClose: _onClose, ...modalProps } = entry;\n        return (\n          <Modal\n            key={id}\n            {...modalProps}\n            isOpen={isOpen}\n            onClose={() => {\n              modal.close(id);\n            }}\n          >\n            {content}\n          </Modal>\n        );\n      })}\n    </>\n  );\n};\n\nexport default ModalHost;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB;CACtB,MAAM,UAAU,gBAAgB;CAIhC,gBAAgB;EACd,aAAa;GACX,MAAM,MAAM;EACd;CACF,GAAG,CAAC,CAAC;CACL,OACE,oBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,UAAU;EACtB,MAAM,EAAE,IAAI,QAAQ,SAAS,SAAS,UAAU,GAAG,eAAe;EAClE,OACE,oBAAC,OAAD;GAEE,GAAI;GACI;GACR,eAAe;IACb,MAAM,MAAM,EAAE;GAChB;aAEC;EACI,GARA,EAQA;CAEX,CAAC,EACD,CAAA;AAEN"}

package/dist/Modal/index.cjs

@@ -3,11 +3,15 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_Modal = require("./Modal.cjs");
+const require_modalStore = require("./modalStore.cjs");
+const require_ModalHost = require("./ModalHost.cjs");
 //#region src/Modal/index.ts
 var Modal_default = require_Modal.default;
 //#endregion
 exports.Modal = require_Modal.default;
+exports.ModalHost = require_ModalHost.default;
 exports.default = Modal_default;
+exports.modal = require_modalStore.modal;
 exports.modalVariants = require_Modal.modalVariants;
 
 //# sourceMappingURL=index.cjs.map

package/dist/Modal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Modal"],"sources":["../../src/Modal/index.ts"],"sourcesContent":["import Modal, { modalVariants } from './Modal';\n\nexport type { ModalProps } from './Modal';\n\nexport { Modal, modalVariants };\n\nexport default Modal;\n"],"mappings":";;;;;;AAMA,IAAA,gBAAeA,cAAAA"}
+{"version":3,"file":"index.cjs","names":["Modal"],"sources":["../../src/Modal/index.ts"],"sourcesContent":["import Modal from './Modal';\n\nexport type { ModalProps } from './Modal';\nexport type { ModalEntry, ModalOpenOptions, ModalStoreApi } from './modalStore';\n\nexport { default as ModalHost } from './ModalHost';\nexport { modal } from './modalStore';\nexport { modalVariants } from './Modal';\nexport { Modal };\n\nexport default Modal;\n"],"mappings":";;;;;;;;AAUA,IAAA,gBAAeA,cAAAA"}

package/dist/Modal/index.d.cts

@@ -1,2 +1,4 @@
 import { Modal, ModalProps, modalVariants } from "./Modal.cjs";
-export { Modal, Modal as default, type ModalProps, modalVariants };
+import { ModalEntry, ModalOpenOptions, ModalStoreApi, modal } from "./modalStore.cjs";
+import { ModalHost } from "./ModalHost.cjs";
+export { Modal, Modal as default, type ModalEntry, ModalHost, type ModalOpenOptions, type ModalProps, type ModalStoreApi, modal, modalVariants };

package/dist/Modal/index.d.ts

@@ -1,2 +1,4 @@
 import { Modal, ModalProps, modalVariants } from "./Modal.js";
-export { Modal, Modal as default, type ModalProps, modalVariants };
+import { ModalEntry, ModalOpenOptions, ModalStoreApi, modal } from "./modalStore.js";
+import { ModalHost } from "./ModalHost.js";
+export { Modal, Modal as default, type ModalEntry, ModalHost, type ModalOpenOptions, type ModalProps, type ModalStoreApi, modal, modalVariants };

package/dist/Modal/index.js

@@ -1,7 +1,9 @@
 import Modal, { modalVariants } from "./Modal.js";
+import { modal } from "./modalStore.js";
+import ModalHost from "./ModalHost.js";
 //#region src/Modal/index.ts
 var Modal_default = Modal;
 //#endregion
-export { Modal, Modal_default as default, modalVariants };
+export { Modal, ModalHost, Modal_default as default, modal, modalVariants };
 
 //# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.ts"],"sourcesContent":["import Modal, { modalVariants } from './Modal';\n\nexport type { ModalProps } from './Modal';\n\nexport { Modal, modalVariants };\n\nexport default Modal;\n"],"mappings":";;AAMA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.ts"],"sourcesContent":["import Modal from './Modal';\n\nexport type { ModalProps } from './Modal';\nexport type { ModalEntry, ModalOpenOptions, ModalStoreApi } from './modalStore';\n\nexport { default as ModalHost } from './ModalHost';\nexport { modal } from './modalStore';\nexport { modalVariants } from './Modal';\nexport { Modal };\n\nexport default Modal;\n"],"mappings":";;;;AAUA,IAAA,gBAAe"}

package/dist/Modal/modalStore.cjs

@@ -0,0 +1,80 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/Modal/modalStore.ts
+const MODAL_CLOSE_ANIMATION_MS = 300;
+let nextId = 0;
+let entries = [];
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	listeners.forEach((listener) => {
+		listener();
+	});
+};
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const getSnapshot = () => {
+	return entries;
+};
+/** React hook used by `ModalHost` to subscribe to the modal stack */
+const useModalEntries = () => {
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+};
+const open = (options) => {
+	nextId += 1;
+	const id = `modal-${nextId}`;
+	entries = [...entries, {
+		...options,
+		id,
+		isOpen: true
+	}];
+	emit();
+	return id;
+};
+const close = (id) => {
+	const entry = entries.find((e) => {
+		return e.id === id;
+	});
+	if (!entry?.isOpen) return;
+	entries = entries.map((e) => {
+		return e.id === id ? {
+			...e,
+			isOpen: false
+		} : e;
+	});
+	emit();
+	entry.onClose?.();
+	setTimeout(() => {
+		entries = entries.filter((e) => {
+			return e.id !== id;
+		});
+		emit();
+	}, MODAL_CLOSE_ANIMATION_MS);
+};
+const closeAll = () => {
+	entries.forEach((entry) => {
+		if (entry.isOpen) close(entry.id);
+	});
+};
+const reset = () => {
+	entries = [];
+	emit();
+};
+/**
+* Imperative API for opening modals from anywhere (e.g. from inside a toast).
+* Requires a `<ModalHost />` to be mounted somewhere in the React tree.
+*/
+const modal = {
+	open,
+	close,
+	closeAll,
+	reset
+};
+//#endregion
+exports.modal = modal;
+exports.useModalEntries = useModalEntries;
+
+//# sourceMappingURL=modalStore.cjs.map

package/dist/Modal/modalStore.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStore.cjs","names":[],"sources":["../../src/Modal/modalStore.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ModalProps } from './Modal';\n\nimport { useSyncExternalStore } from 'react';\n\n/** Options accepted by `modal.open()` */\nexport interface ModalOpenOptions extends Omit<\n  ModalProps,\n  'isOpen' | 'onClose' | 'children'\n> {\n  /** Modal body content */\n  content?: ReactNode;\n  /** Callback fired when the modal is closed (by user or programmatically) */\n  onClose?: () => void;\n}\n\n/** Internal entry tracked by the store */\nexport interface ModalEntry extends ModalOpenOptions {\n  id: string;\n  isOpen: boolean;\n}\n\n// Duration of the HeroUI modal close animation. Entries stay in the list this\n// long after `close()` so the exit animation can play before unmounting.\nconst MODAL_CLOSE_ANIMATION_MS = 300;\n\nlet nextId = 0;\nlet entries: ModalEntry[] = [];\nconst listeners = new Set<() => void>();\n\nconst emit = () => {\n  listeners.forEach((listener) => {\n    listener();\n  });\n};\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nconst getSnapshot = () => {\n  return entries;\n};\n\n/** React hook used by `ModalHost` to subscribe to the modal stack */\nexport const useModalEntries = (): ModalEntry[] => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nconst open = (options: ModalOpenOptions): string => {\n  nextId += 1;\n  const id = `modal-${nextId}`;\n  entries = [...entries, { ...options, id, isOpen: true }];\n  emit();\n  return id;\n};\n\nconst close = (id: string): void => {\n  const entry = entries.find((e) => {\n    return e.id === id;\n  });\n  if (!entry?.isOpen) {\n    return;\n  }\n  entries = entries.map((e) => {\n    return e.id === id ? { ...e, isOpen: false } : e;\n  });\n  emit();\n  entry.onClose?.();\n  setTimeout(() => {\n    entries = entries.filter((e) => {\n      return e.id !== id;\n    });\n    emit();\n  }, MODAL_CLOSE_ANIMATION_MS);\n};\n\nconst closeAll = (): void => {\n  entries.forEach((entry) => {\n    if (entry.isOpen) {\n      close(entry.id);\n    }\n  });\n};\n\n// Hard-resets the store without firing onClose callbacks or close animations.\n// Used by `ModalHost` on unmount so the store does not retain entries that\n// would re-appear when a host mounts again (e.g. switching Storybook stories).\nconst reset = (): void => {\n  entries = [];\n  emit();\n};\n\n/**\n * Imperative API for opening modals from anywhere (e.g. from inside a toast).\n * Requires a `<ModalHost />` to be mounted somewhere in the React tree.\n */\nexport const modal = {\n  open,\n  close,\n  closeAll,\n  reset,\n};\n\n/** Imperative modal API as exposed by the `modal` store. */\nexport type ModalStoreApi = typeof modal;\n"],"mappings":";;;AAwBA,MAAM,2BAA2B;AAEjC,IAAI,SAAS;AACb,IAAI,UAAwB,CAAC;AAC7B,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAa;CACjB,UAAU,SAAS,aAAa;EAC9B,SAAS;CACX,CAAC;AACH;AAEA,MAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AAEA,MAAM,oBAAoB;CACxB,OAAO;AACT;;AAGA,MAAa,wBAAsC;CACjD,QAAA,GAAA,MAAA,sBAA4B,WAAW,aAAa,WAAW;AACjE;AAEA,MAAM,QAAQ,YAAsC;CAClD,UAAU;CACV,MAAM,KAAK,SAAS;CACpB,UAAU,CAAC,GAAG,SAAS;EAAE,GAAG;EAAS;EAAI,QAAQ;CAAK,CAAC;CACvD,KAAK;CACL,OAAO;AACT;AAEA,MAAM,SAAS,OAAqB;CAClC,MAAM,QAAQ,QAAQ,MAAM,MAAM;EAChC,OAAO,EAAE,OAAO;CAClB,CAAC;CACD,IAAI,CAAC,OAAO,QACV;CAEF,UAAU,QAAQ,KAAK,MAAM;EAC3B,OAAO,EAAE,OAAO,KAAK;GAAE,GAAG;GAAG,QAAQ;EAAM,IAAI;CACjD,CAAC;CACD,KAAK;CACL,MAAM,UAAU;CAChB,iBAAiB;EACf,UAAU,QAAQ,QAAQ,MAAM;GAC9B,OAAO,EAAE,OAAO;EAClB,CAAC;EACD,KAAK;CACP,GAAG,wBAAwB;AAC7B;AAEA,MAAM,iBAAuB;CAC3B,QAAQ,SAAS,UAAU;EACzB,IAAI,MAAM,QACR,MAAM,MAAM,EAAE;CAElB,CAAC;AACH;AAKA,MAAM,cAAoB;CACxB,UAAU,CAAC;CACX,KAAK;AACP;;;;;AAMA,MAAa,QAAQ;CACnB;CACA;CACA;CACA;AACF"}

package/dist/Modal/modalStore.d.cts

@@ -0,0 +1,31 @@
+import { ModalProps } from "./Modal.cjs";
+import { ReactNode } from "react";
+
+//#region src/Modal/modalStore.d.ts
+/** Options accepted by `modal.open()` */
+interface ModalOpenOptions extends Omit<ModalProps, 'isOpen' | 'onClose' | 'children'> {
+  /** Modal body content */
+  content?: ReactNode;
+  /** Callback fired when the modal is closed (by user or programmatically) */
+  onClose?: () => void;
+}
+/** Internal entry tracked by the store */
+interface ModalEntry extends ModalOpenOptions {
+  id: string;
+  isOpen: boolean;
+}
+/**
+ * Imperative API for opening modals from anywhere (e.g. from inside a toast).
+ * Requires a `<ModalHost />` to be mounted somewhere in the React tree.
+ */
+declare const modal: {
+  open: (options: ModalOpenOptions) => string;
+  close: (id: string) => void;
+  closeAll: () => void;
+  reset: () => void;
+};
+/** Imperative modal API as exposed by the `modal` store. */
+type ModalStoreApi = typeof modal;
+//#endregion
+export { ModalEntry, ModalOpenOptions, ModalStoreApi, modal };
+//# sourceMappingURL=modalStore.d.cts.map

package/dist/Modal/modalStore.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStore.d.cts","names":[],"sources":["../../src/Modal/modalStore.ts"],"mappings":";;;;;UAMiB,gBAAA,SAAyB,IAAA,CACxC,UAAA;EADe;EAKf,OAAA,GAAU,SAAA;;EAEV,OAAA;AAAA;;UAIe,UAAA,SAAmB,gBAAgB;EAClD,EAAA;EACA,MAAA;AAAA;;;AANO;AAIT;cAmFa,KAAA;kBAhDU,gBAAgB;;;;;;KAwD3B,aAAA,UAAuB,KAAK"}

package/dist/Modal/modalStore.d.ts

@@ -0,0 +1,31 @@
+import { ModalProps } from "./Modal.js";
+import { ReactNode } from "react";
+
+//#region src/Modal/modalStore.d.ts
+/** Options accepted by `modal.open()` */
+interface ModalOpenOptions extends Omit<ModalProps, 'isOpen' | 'onClose' | 'children'> {
+  /** Modal body content */
+  content?: ReactNode;
+  /** Callback fired when the modal is closed (by user or programmatically) */
+  onClose?: () => void;
+}
+/** Internal entry tracked by the store */
+interface ModalEntry extends ModalOpenOptions {
+  id: string;
+  isOpen: boolean;
+}
+/**
+ * Imperative API for opening modals from anywhere (e.g. from inside a toast).
+ * Requires a `<ModalHost />` to be mounted somewhere in the React tree.
+ */
+declare const modal: {
+  open: (options: ModalOpenOptions) => string;
+  close: (id: string) => void;
+  closeAll: () => void;
+  reset: () => void;
+};
+/** Imperative modal API as exposed by the `modal` store. */
+type ModalStoreApi = typeof modal;
+//#endregion
+export { ModalEntry, ModalOpenOptions, ModalStoreApi, modal };
+//# sourceMappingURL=modalStore.d.ts.map

package/dist/Modal/modalStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStore.d.ts","names":[],"sources":["../../src/Modal/modalStore.ts"],"mappings":";;;;;UAMiB,gBAAA,SAAyB,IAAA,CACxC,UAAA;EADe;EAKf,OAAA,GAAU,SAAA;;EAEV,OAAA;AAAA;;UAIe,UAAA,SAAmB,gBAAgB;EAClD,EAAA;EACA,MAAA;AAAA;;;AANO;AAIT;cAmFa,KAAA;kBAhDU,gBAAgB;;;;;;KAwD3B,aAAA,UAAuB,KAAK"}

package/dist/Modal/modalStore.js

@@ -0,0 +1,78 @@
+import { useSyncExternalStore } from "react";
+//#region src/Modal/modalStore.ts
+const MODAL_CLOSE_ANIMATION_MS = 300;
+let nextId = 0;
+let entries = [];
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	listeners.forEach((listener) => {
+		listener();
+	});
+};
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const getSnapshot = () => {
+	return entries;
+};
+/** React hook used by `ModalHost` to subscribe to the modal stack */
+const useModalEntries = () => {
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+const open = (options) => {
+	nextId += 1;
+	const id = `modal-${nextId}`;
+	entries = [...entries, {
+		...options,
+		id,
+		isOpen: true
+	}];
+	emit();
+	return id;
+};
+const close = (id) => {
+	const entry = entries.find((e) => {
+		return e.id === id;
+	});
+	if (!entry?.isOpen) return;
+	entries = entries.map((e) => {
+		return e.id === id ? {
+			...e,
+			isOpen: false
+		} : e;
+	});
+	emit();
+	entry.onClose?.();
+	setTimeout(() => {
+		entries = entries.filter((e) => {
+			return e.id !== id;
+		});
+		emit();
+	}, MODAL_CLOSE_ANIMATION_MS);
+};
+const closeAll = () => {
+	entries.forEach((entry) => {
+		if (entry.isOpen) close(entry.id);
+	});
+};
+const reset = () => {
+	entries = [];
+	emit();
+};
+/**
+* Imperative API for opening modals from anywhere (e.g. from inside a toast).
+* Requires a `<ModalHost />` to be mounted somewhere in the React tree.
+*/
+const modal = {
+	open,
+	close,
+	closeAll,
+	reset
+};
+//#endregion
+export { modal, useModalEntries };
+
+//# sourceMappingURL=modalStore.js.map

package/dist/Modal/modalStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStore.js","names":[],"sources":["../../src/Modal/modalStore.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ModalProps } from './Modal';\n\nimport { useSyncExternalStore } from 'react';\n\n/** Options accepted by `modal.open()` */\nexport interface ModalOpenOptions extends Omit<\n  ModalProps,\n  'isOpen' | 'onClose' | 'children'\n> {\n  /** Modal body content */\n  content?: ReactNode;\n  /** Callback fired when the modal is closed (by user or programmatically) */\n  onClose?: () => void;\n}\n\n/** Internal entry tracked by the store */\nexport interface ModalEntry extends ModalOpenOptions {\n  id: string;\n  isOpen: boolean;\n}\n\n// Duration of the HeroUI modal close animation. Entries stay in the list this\n// long after `close()` so the exit animation can play before unmounting.\nconst MODAL_CLOSE_ANIMATION_MS = 300;\n\nlet nextId = 0;\nlet entries: ModalEntry[] = [];\nconst listeners = new Set<() => void>();\n\nconst emit = () => {\n  listeners.forEach((listener) => {\n    listener();\n  });\n};\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nconst getSnapshot = () => {\n  return entries;\n};\n\n/** React hook used by `ModalHost` to subscribe to the modal stack */\nexport const useModalEntries = (): ModalEntry[] => {\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n\nconst open = (options: ModalOpenOptions): string => {\n  nextId += 1;\n  const id = `modal-${nextId}`;\n  entries = [...entries, { ...options, id, isOpen: true }];\n  emit();\n  return id;\n};\n\nconst close = (id: string): void => {\n  const entry = entries.find((e) => {\n    return e.id === id;\n  });\n  if (!entry?.isOpen) {\n    return;\n  }\n  entries = entries.map((e) => {\n    return e.id === id ? { ...e, isOpen: false } : e;\n  });\n  emit();\n  entry.onClose?.();\n  setTimeout(() => {\n    entries = entries.filter((e) => {\n      return e.id !== id;\n    });\n    emit();\n  }, MODAL_CLOSE_ANIMATION_MS);\n};\n\nconst closeAll = (): void => {\n  entries.forEach((entry) => {\n    if (entry.isOpen) {\n      close(entry.id);\n    }\n  });\n};\n\n// Hard-resets the store without firing onClose callbacks or close animations.\n// Used by `ModalHost` on unmount so the store does not retain entries that\n// would re-appear when a host mounts again (e.g. switching Storybook stories).\nconst reset = (): void => {\n  entries = [];\n  emit();\n};\n\n/**\n * Imperative API for opening modals from anywhere (e.g. from inside a toast).\n * Requires a `<ModalHost />` to be mounted somewhere in the React tree.\n */\nexport const modal = {\n  open,\n  close,\n  closeAll,\n  reset,\n};\n\n/** Imperative modal API as exposed by the `modal` store. */\nexport type ModalStoreApi = typeof modal;\n"],"mappings":";;AAwBA,MAAM,2BAA2B;AAEjC,IAAI,SAAS;AACb,IAAI,UAAwB,CAAC;AAC7B,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAa;CACjB,UAAU,SAAS,aAAa;EAC9B,SAAS;CACX,CAAC;AACH;AAEA,MAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AAEA,MAAM,oBAAoB;CACxB,OAAO;AACT;;AAGA,MAAa,wBAAsC;CACjD,OAAO,qBAAqB,WAAW,aAAa,WAAW;AACjE;AAEA,MAAM,QAAQ,YAAsC;CAClD,UAAU;CACV,MAAM,KAAK,SAAS;CACpB,UAAU,CAAC,GAAG,SAAS;EAAE,GAAG;EAAS;EAAI,QAAQ;CAAK,CAAC;CACvD,KAAK;CACL,OAAO;AACT;AAEA,MAAM,SAAS,OAAqB;CAClC,MAAM,QAAQ,QAAQ,MAAM,MAAM;EAChC,OAAO,EAAE,OAAO;CAClB,CAAC;CACD,IAAI,CAAC,OAAO,QACV;CAEF,UAAU,QAAQ,KAAK,MAAM;EAC3B,OAAO,EAAE,OAAO,KAAK;GAAE,GAAG;GAAG,QAAQ;EAAM,IAAI;CACjD,CAAC;CACD,KAAK;CACL,MAAM,UAAU;CAChB,iBAAiB;EACf,UAAU,QAAQ,QAAQ,MAAM;GAC9B,OAAO,EAAE,OAAO;EAClB,CAAC;EACD,KAAK;CACP,GAAG,wBAAwB;AAC7B;AAEA,MAAM,iBAAuB;CAC3B,QAAQ,SAAS,UAAU;EACzB,IAAI,MAAM,QACR,MAAM,MAAM,EAAE;CAElB,CAAC;AACH;AAKA,MAAM,cAAoB;CACxB,UAAU,CAAC;CACX,KAAK;AACP;;;;;AAMA,MAAa,QAAQ;CACnB;CACA;CACA;CACA;AACF"}

package/dist/Popover/Popover.d.cts

@@ -8,11 +8,11 @@ declare const popoverVariants: import("tailwind-variants").TVReturnType<{
   [key: string]: {
     [key: string]: import("tailwind-merge").ClassNameValue | {
       body?: import("tailwind-merge").ClassNameValue;
+      footer?: import("tailwind-merge").ClassNameValue;
+      header?: import("tailwind-merge").ClassNameValue;
       content?: import("tailwind-merge").ClassNameValue;
       divider?: import("tailwind-merge").ClassNameValue;
-      footer?: import("tailwind-merge").ClassNameValue;
       footerWrapper?: import("tailwind-merge").ClassNameValue;
-      header?: import("tailwind-merge").ClassNameValue;
       headerWrapper?: import("tailwind-merge").ClassNameValue;
       trigger?: import("tailwind-merge").ClassNameValue;
     };
@@ -21,11 +21,11 @@ declare const popoverVariants: import("tailwind-variants").TVReturnType<{
   [x: string]: {
     [x: string]: import("tailwind-merge").ClassNameValue | {
       body?: import("tailwind-merge").ClassNameValue;
+      footer?: import("tailwind-merge").ClassNameValue;
+      header?: import("tailwind-merge").ClassNameValue;
       content?: import("tailwind-merge").ClassNameValue;
       divider?: import("tailwind-merge").ClassNameValue;
-      footer?: import("tailwind-merge").ClassNameValue;
       footerWrapper?: import("tailwind-merge").ClassNameValue;
-      header?: import("tailwind-merge").ClassNameValue;
       headerWrapper?: import("tailwind-merge").ClassNameValue;
       trigger?: import("tailwind-merge").ClassNameValue;
     };
@@ -43,11 +43,11 @@ declare const popoverVariants: import("tailwind-variants").TVReturnType<{
   [key: string]: {
     [key: string]: import("tailwind-merge").ClassNameValue | {
       body?: import("tailwind-merge").ClassNameValue;
+      footer?: import("tailwind-merge").ClassNameValue;
+      header?: import("tailwind-merge").ClassNameValue;
       content?: import("tailwind-merge").ClassNameValue;
       divider?: import("tailwind-merge").ClassNameValue;
-      footer?: import("tailwind-merge").ClassNameValue;
       footerWrapper?: import("tailwind-merge").ClassNameValue;
-      header?: import("tailwind-merge").ClassNameValue;
       headerWrapper?: import("tailwind-merge").ClassNameValue;
       trigger?: import("tailwind-merge").ClassNameValue;
     };