jaci-ui 0.7.0 → 0.8.0

package/dist/components/figure/figure.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_figure = require("../../styled-system/recipes/figure.cjs");
+const require_theme_scope = require("../../theme/theme-scope.cjs");
 const require_image = require("../image/image.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -60,6 +61,7 @@ const FigureRoot = (0, react.forwardRef)(function FigureRoot({ children, classNa
 		lightbox: canOpen,
 		styles
 	};
+	const scopedPortalProps = require_theme_scope.useThemePortalProps({});
 	if (!canOpen || !media) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureContext.Provider, {
 		value,
 		children: content
@@ -72,42 +74,49 @@ const FigureRoot = (0, react.forwardRef)(function FigureRoot({ children, classNa
 			defaultOpen,
 			onOpenChange: (nextOpen) => onOpenChange?.(nextOpen),
 			open,
-			children: [content, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
-				className: styles.backdrop,
-				"data-slot": "figure-lightbox-backdrop"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
-				className: styles.viewport,
-				"data-slot": "figure-lightbox-viewport",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
-					"aria-label": alt || "Image preview",
-					className: styles.popup,
-					"data-jaci-component": "figure-lightbox",
-					"data-slot": "figure-lightbox-popup",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
-							className: styles.title,
-							children: alt || "Image preview"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
-							"aria-label": closeLabel,
-							className: styles.close,
-							"data-slot": "figure-lightbox-close",
-							children: "×"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							alt,
-							className: styles.lightboxImage,
-							"data-slot": "figure-lightbox-image",
-							src
-						}),
-						caption ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
-							className: styles.lightboxCaption,
-							"data-slot": "figure-lightbox-caption",
-							children: caption.props.children
-						}) : null
-					]
-				})
-			})] })]
+			children: [content, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, {
+				...scopedPortalProps,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+					className: styles.backdrop,
+					"data-slot": "figure-lightbox-backdrop"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+					className: styles.viewport,
+					"data-slot": "figure-lightbox-viewport",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
+						"aria-label": alt || "Image preview",
+						className: styles.popup,
+						"data-jaci-component": "figure-lightbox",
+						"data-slot": "figure-lightbox-popup",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
+								className: styles.title,
+								children: alt || "Image preview"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: styles.closeRow,
+								"data-slot": "figure-lightbox-close-row",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+									"aria-label": closeLabel,
+									className: styles.close,
+									"data-slot": "figure-lightbox-close",
+									children: "×"
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								alt,
+								className: styles.lightboxImage,
+								"data-slot": "figure-lightbox-image",
+								src
+							}),
+							caption ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+								className: styles.lightboxCaption,
+								"data-slot": "figure-lightbox-caption",
+								children: caption.props.children
+							}) : null
+						]
+					})
+				})]
+			})]
 		})
 	});
 });

package/dist/components/figure/figure.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"figure.cjs","names":["Image","cx","BaseDialog","Children","figureStyles"],"sources":["../../../src/components/figure/figure.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Children, createContext, forwardRef, isValidElement, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { figure as figureStyles } from \"../../styled-system/recipes\";\nimport { Image } from \"../image\";\nimport type { ImageProps } from \"../image\";\n\ninterface FigureContextValue {\n  lightbox: boolean;\n  styles: ReturnType<typeof figureStyles>;\n}\n\nconst FigureContext = createContext<FigureContextValue | null>(null);\n\nfunction useFigureContext() {\n  const value = useContext(FigureContext);\n  if (!value) {\n    throw new Error(\"Figure parts must be rendered inside Figure.Root.\");\n  }\n  return value;\n}\n\nexport type FigureImageProps = ImageProps;\n\nexport const FigureImage = forwardRef<HTMLImageElement, FigureImageProps>(function FigureImage(\n  { className, lightbox: _lightbox, ...props },\n  ref,\n) {\n  const { lightbox, styles } = useFigureContext();\n  const content = (\n    <Image\n      {...props}\n      ref={ref}\n      className={cx(styles.image, className)}\n      data-slot=\"figure-image\"\n      lightbox={false}\n    />\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Trigger\n      aria-label=\"Open image\"\n      className={styles.trigger}\n      data-jaci-component=\"figure-trigger\"\n      data-slot=\"figure-trigger\"\n    >\n      {content}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type FigureCaptionProps = ComponentPropsWithoutRef<\"figcaption\">;\n\nexport const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useFigureContext();\n  return (\n    <figcaption\n      {...props}\n      ref={ref}\n      className={cx(styles.caption, className)}\n      data-slot=\"figure-caption\"\n    />\n  );\n});\n\nexport interface FigureRootProps extends ComponentPropsWithoutRef<\"figure\"> {\n  lightbox?: boolean;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeLabel?: string;\n}\n\nfunction findChild<T>(children: ReactNode, component: ElementType): ReactElement<T> | null {\n  const child = Children.toArray(children).find(\n    (item) => isValidElement(item) && item.type === component,\n  );\n  return (child as ReactElement<T> | undefined) ?? null;\n}\n\nexport const FigureRoot = forwardRef<HTMLElement, FigureRootProps>(function FigureRoot(\n  {\n    children,\n    className,\n    closeLabel = \"Close image\",\n    defaultOpen,\n    lightbox = false,\n    onOpenChange,\n    open,\n    ...props\n  },\n  ref,\n) {\n  const styles = figureStyles();\n  const media = findChild<FigureImageProps>(children, FigureImage);\n  const caption = findChild<FigureCaptionProps>(children, FigureCaption);\n  const canOpen = Boolean(lightbox && media?.props.src);\n  const content = (\n    <figure\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"figure\"\n      data-lightbox={canOpen || undefined}\n      data-slot=\"figure\"\n    >\n      {children}\n    </figure>\n  );\n\n  const value = { lightbox: canOpen, styles };\n\n  if (!canOpen || !media) {\n    return <FigureContext.Provider value={value}>{content}</FigureContext.Provider>;\n  }\n\n  const alt = media.props.alt;\n  const src = media.props.src;\n\n  return (\n    <FigureContext.Provider value={value}>\n      <BaseDialog.Root\n        defaultOpen={defaultOpen}\n        onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n        open={open}\n      >\n        {content}\n        <BaseDialog.Portal>\n          <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"figure-lightbox-backdrop\" />\n          <BaseDialog.Viewport className={styles.viewport} data-slot=\"figure-lightbox-viewport\">\n            <BaseDialog.Popup\n              aria-label={alt || \"Image preview\"}\n              className={styles.popup}\n              data-jaci-component=\"figure-lightbox\"\n              data-slot=\"figure-lightbox-popup\"\n            >\n              <BaseDialog.Title className={styles.title}>{alt || \"Image preview\"}</BaseDialog.Title>\n              <BaseDialog.Close\n                aria-label={closeLabel}\n                className={styles.close}\n                data-slot=\"figure-lightbox-close\"\n              >\n                ×\n              </BaseDialog.Close>\n              <img\n                alt={alt}\n                className={styles.lightboxImage}\n                data-slot=\"figure-lightbox-image\"\n                src={src}\n              />\n              {caption ? (\n                <figcaption className={styles.lightboxCaption} data-slot=\"figure-lightbox-caption\">\n                  {caption.props.children}\n                </figcaption>\n              ) : null}\n            </BaseDialog.Popup>\n          </BaseDialog.Viewport>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </FigureContext.Provider>\n  );\n});\n\nexport const Figure = {\n  Root: FigureRoot,\n  Image: FigureImage,\n  Caption: FigureCaption,\n};\n"],"mappings":"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"}
+{"version":3,"file":"figure.cjs","names":["Image","cx","BaseDialog","Children","figureStyles","useThemePortalProps"],"sources":["../../../src/components/figure/figure.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Children, createContext, forwardRef, isValidElement, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { figure as figureStyles } from \"../../styled-system/recipes\";\nimport { Image } from \"../image\";\nimport type { ImageProps } from \"../image\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\ninterface FigureContextValue {\n  lightbox: boolean;\n  styles: ReturnType<typeof figureStyles>;\n}\n\nconst FigureContext = createContext<FigureContextValue | null>(null);\n\nfunction useFigureContext() {\n  const value = useContext(FigureContext);\n  if (!value) {\n    throw new Error(\"Figure parts must be rendered inside Figure.Root.\");\n  }\n  return value;\n}\n\nexport type FigureImageProps = ImageProps;\n\nexport const FigureImage = forwardRef<HTMLImageElement, FigureImageProps>(function FigureImage(\n  { className, lightbox: _lightbox, ...props },\n  ref,\n) {\n  const { lightbox, styles } = useFigureContext();\n  const content = (\n    <Image\n      {...props}\n      ref={ref}\n      className={cx(styles.image, className)}\n      data-slot=\"figure-image\"\n      lightbox={false}\n    />\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Trigger\n      aria-label=\"Open image\"\n      className={styles.trigger}\n      data-jaci-component=\"figure-trigger\"\n      data-slot=\"figure-trigger\"\n    >\n      {content}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type FigureCaptionProps = ComponentPropsWithoutRef<\"figcaption\">;\n\nexport const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useFigureContext();\n  return (\n    <figcaption\n      {...props}\n      ref={ref}\n      className={cx(styles.caption, className)}\n      data-slot=\"figure-caption\"\n    />\n  );\n});\n\nexport interface FigureRootProps extends ComponentPropsWithoutRef<\"figure\"> {\n  lightbox?: boolean;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeLabel?: string;\n}\n\nfunction findChild<T>(children: ReactNode, component: ElementType): ReactElement<T> | null {\n  const child = Children.toArray(children).find(\n    (item) => isValidElement(item) && item.type === component,\n  );\n  return (child as ReactElement<T> | undefined) ?? null;\n}\n\nexport const FigureRoot = forwardRef<HTMLElement, FigureRootProps>(function FigureRoot(\n  {\n    children,\n    className,\n    closeLabel = \"Close image\",\n    defaultOpen,\n    lightbox = false,\n    onOpenChange,\n    open,\n    ...props\n  },\n  ref,\n) {\n  const styles = figureStyles();\n  const media = findChild<FigureImageProps>(children, FigureImage);\n  const caption = findChild<FigureCaptionProps>(children, FigureCaption);\n  const canOpen = Boolean(lightbox && media?.props.src);\n  const content = (\n    <figure\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"figure\"\n      data-lightbox={canOpen || undefined}\n      data-slot=\"figure\"\n    >\n      {children}\n    </figure>\n  );\n\n  const value = { lightbox: canOpen, styles };\n  const scopedPortalProps = useThemePortalProps({});\n\n  if (!canOpen || !media) {\n    return <FigureContext.Provider value={value}>{content}</FigureContext.Provider>;\n  }\n\n  const alt = media.props.alt;\n  const src = media.props.src;\n\n  return (\n    <FigureContext.Provider value={value}>\n      <BaseDialog.Root\n        defaultOpen={defaultOpen}\n        onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n        open={open}\n      >\n        {content}\n        <BaseDialog.Portal {...scopedPortalProps}>\n          <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"figure-lightbox-backdrop\" />\n          <BaseDialog.Viewport className={styles.viewport} data-slot=\"figure-lightbox-viewport\">\n            <BaseDialog.Popup\n              aria-label={alt || \"Image preview\"}\n              className={styles.popup}\n              data-jaci-component=\"figure-lightbox\"\n              data-slot=\"figure-lightbox-popup\"\n            >\n              <BaseDialog.Title className={styles.title}>{alt || \"Image preview\"}</BaseDialog.Title>\n              <div className={styles.closeRow} data-slot=\"figure-lightbox-close-row\">\n                <BaseDialog.Close\n                  aria-label={closeLabel}\n                  className={styles.close}\n                  data-slot=\"figure-lightbox-close\"\n                >\n                  ×\n                </BaseDialog.Close>\n              </div>\n              <img\n                alt={alt}\n                className={styles.lightboxImage}\n                data-slot=\"figure-lightbox-image\"\n                src={src}\n              />\n              {caption ? (\n                <figcaption className={styles.lightboxCaption} data-slot=\"figure-lightbox-caption\">\n                  {caption.props.children}\n                </figcaption>\n              ) : null}\n            </BaseDialog.Popup>\n          </BaseDialog.Viewport>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </FigureContext.Provider>\n  );\n});\n\nexport const Figure = {\n  Root: FigureRoot,\n  Image: FigureImage,\n  Caption: FigureCaption,\n};\n"],"mappings":"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"}

package/dist/components/figure/figure.js

@@ -1,6 +1,7 @@
 "use client";
 import { cx } from "../../styled-system/css/cx.js";
 import { figure } from "../../styled-system/recipes/figure.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { Image } from "../image/image.js";
 import { Children, createContext, forwardRef, isValidElement, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -60,6 +61,7 @@ const FigureRoot = forwardRef(function FigureRoot({ children, className, closeLa
 		lightbox: canOpen,
 		styles
 	};
+	const scopedPortalProps = useThemePortalProps({});
 	if (!canOpen || !media) return /* @__PURE__ */ jsx(FigureContext.Provider, {
 		value,
 		children: content
@@ -72,42 +74,49 @@ const FigureRoot = forwardRef(function FigureRoot({ children, className, closeLa
 			defaultOpen,
 			onOpenChange: (nextOpen) => onOpenChange?.(nextOpen),
 			open,
-			children: [content, /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
-				className: styles.backdrop,
-				"data-slot": "figure-lightbox-backdrop"
-			}), /* @__PURE__ */ jsx(Dialog.Viewport, {
-				className: styles.viewport,
-				"data-slot": "figure-lightbox-viewport",
-				children: /* @__PURE__ */ jsxs(Dialog.Popup, {
-					"aria-label": alt || "Image preview",
-					className: styles.popup,
-					"data-jaci-component": "figure-lightbox",
-					"data-slot": "figure-lightbox-popup",
-					children: [
-						/* @__PURE__ */ jsx(Dialog.Title, {
-							className: styles.title,
-							children: alt || "Image preview"
-						}),
-						/* @__PURE__ */ jsx(Dialog.Close, {
-							"aria-label": closeLabel,
-							className: styles.close,
-							"data-slot": "figure-lightbox-close",
-							children: "×"
-						}),
-						/* @__PURE__ */ jsx("img", {
-							alt,
-							className: styles.lightboxImage,
-							"data-slot": "figure-lightbox-image",
-							src
-						}),
-						caption ? /* @__PURE__ */ jsx("figcaption", {
-							className: styles.lightboxCaption,
-							"data-slot": "figure-lightbox-caption",
-							children: caption.props.children
-						}) : null
-					]
-				})
-			})] })]
+			children: [content, /* @__PURE__ */ jsxs(Dialog.Portal, {
+				...scopedPortalProps,
+				children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+					className: styles.backdrop,
+					"data-slot": "figure-lightbox-backdrop"
+				}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+					className: styles.viewport,
+					"data-slot": "figure-lightbox-viewport",
+					children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+						"aria-label": alt || "Image preview",
+						className: styles.popup,
+						"data-jaci-component": "figure-lightbox",
+						"data-slot": "figure-lightbox-popup",
+						children: [
+							/* @__PURE__ */ jsx(Dialog.Title, {
+								className: styles.title,
+								children: alt || "Image preview"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: styles.closeRow,
+								"data-slot": "figure-lightbox-close-row",
+								children: /* @__PURE__ */ jsx(Dialog.Close, {
+									"aria-label": closeLabel,
+									className: styles.close,
+									"data-slot": "figure-lightbox-close",
+									children: "×"
+								})
+							}),
+							/* @__PURE__ */ jsx("img", {
+								alt,
+								className: styles.lightboxImage,
+								"data-slot": "figure-lightbox-image",
+								src
+							}),
+							caption ? /* @__PURE__ */ jsx("figcaption", {
+								className: styles.lightboxCaption,
+								"data-slot": "figure-lightbox-caption",
+								children: caption.props.children
+							}) : null
+						]
+					})
+				})]
+			})]
 		})
 	});
 });

package/dist/components/figure/figure.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure.js","names":["BaseDialog","figureStyles"],"sources":["../../../src/components/figure/figure.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Children, createContext, forwardRef, isValidElement, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { figure as figureStyles } from \"../../styled-system/recipes\";\nimport { Image } from \"../image\";\nimport type { ImageProps } from \"../image\";\n\ninterface FigureContextValue {\n  lightbox: boolean;\n  styles: ReturnType<typeof figureStyles>;\n}\n\nconst FigureContext = createContext<FigureContextValue | null>(null);\n\nfunction useFigureContext() {\n  const value = useContext(FigureContext);\n  if (!value) {\n    throw new Error(\"Figure parts must be rendered inside Figure.Root.\");\n  }\n  return value;\n}\n\nexport type FigureImageProps = ImageProps;\n\nexport const FigureImage = forwardRef<HTMLImageElement, FigureImageProps>(function FigureImage(\n  { className, lightbox: _lightbox, ...props },\n  ref,\n) {\n  const { lightbox, styles } = useFigureContext();\n  const content = (\n    <Image\n      {...props}\n      ref={ref}\n      className={cx(styles.image, className)}\n      data-slot=\"figure-image\"\n      lightbox={false}\n    />\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Trigger\n      aria-label=\"Open image\"\n      className={styles.trigger}\n      data-jaci-component=\"figure-trigger\"\n      data-slot=\"figure-trigger\"\n    >\n      {content}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type FigureCaptionProps = ComponentPropsWithoutRef<\"figcaption\">;\n\nexport const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useFigureContext();\n  return (\n    <figcaption\n      {...props}\n      ref={ref}\n      className={cx(styles.caption, className)}\n      data-slot=\"figure-caption\"\n    />\n  );\n});\n\nexport interface FigureRootProps extends ComponentPropsWithoutRef<\"figure\"> {\n  lightbox?: boolean;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeLabel?: string;\n}\n\nfunction findChild<T>(children: ReactNode, component: ElementType): ReactElement<T> | null {\n  const child = Children.toArray(children).find(\n    (item) => isValidElement(item) && item.type === component,\n  );\n  return (child as ReactElement<T> | undefined) ?? null;\n}\n\nexport const FigureRoot = forwardRef<HTMLElement, FigureRootProps>(function FigureRoot(\n  {\n    children,\n    className,\n    closeLabel = \"Close image\",\n    defaultOpen,\n    lightbox = false,\n    onOpenChange,\n    open,\n    ...props\n  },\n  ref,\n) {\n  const styles = figureStyles();\n  const media = findChild<FigureImageProps>(children, FigureImage);\n  const caption = findChild<FigureCaptionProps>(children, FigureCaption);\n  const canOpen = Boolean(lightbox && media?.props.src);\n  const content = (\n    <figure\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"figure\"\n      data-lightbox={canOpen || undefined}\n      data-slot=\"figure\"\n    >\n      {children}\n    </figure>\n  );\n\n  const value = { lightbox: canOpen, styles };\n\n  if (!canOpen || !media) {\n    return <FigureContext.Provider value={value}>{content}</FigureContext.Provider>;\n  }\n\n  const alt = media.props.alt;\n  const src = media.props.src;\n\n  return (\n    <FigureContext.Provider value={value}>\n      <BaseDialog.Root\n        defaultOpen={defaultOpen}\n        onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n        open={open}\n      >\n        {content}\n        <BaseDialog.Portal>\n          <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"figure-lightbox-backdrop\" />\n          <BaseDialog.Viewport className={styles.viewport} data-slot=\"figure-lightbox-viewport\">\n            <BaseDialog.Popup\n              aria-label={alt || \"Image preview\"}\n              className={styles.popup}\n              data-jaci-component=\"figure-lightbox\"\n              data-slot=\"figure-lightbox-popup\"\n            >\n              <BaseDialog.Title className={styles.title}>{alt || \"Image preview\"}</BaseDialog.Title>\n              <BaseDialog.Close\n                aria-label={closeLabel}\n                className={styles.close}\n                data-slot=\"figure-lightbox-close\"\n              >\n                ×\n              </BaseDialog.Close>\n              <img\n                alt={alt}\n                className={styles.lightboxImage}\n                data-slot=\"figure-lightbox-image\"\n                src={src}\n              />\n              {caption ? (\n                <figcaption className={styles.lightboxCaption} data-slot=\"figure-lightbox-caption\">\n                  {caption.props.children}\n                </figcaption>\n              ) : null}\n            </BaseDialog.Popup>\n          </BaseDialog.Viewport>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </FigureContext.Provider>\n  );\n});\n\nexport const Figure = {\n  Root: FigureRoot,\n  Image: FigureImage,\n  Caption: FigureCaption,\n};\n"],"mappings":"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"}
+{"version":3,"file":"figure.js","names":["BaseDialog","figureStyles"],"sources":["../../../src/components/figure/figure.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Children, createContext, forwardRef, isValidElement, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { figure as figureStyles } from \"../../styled-system/recipes\";\nimport { Image } from \"../image\";\nimport type { ImageProps } from \"../image\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\ninterface FigureContextValue {\n  lightbox: boolean;\n  styles: ReturnType<typeof figureStyles>;\n}\n\nconst FigureContext = createContext<FigureContextValue | null>(null);\n\nfunction useFigureContext() {\n  const value = useContext(FigureContext);\n  if (!value) {\n    throw new Error(\"Figure parts must be rendered inside Figure.Root.\");\n  }\n  return value;\n}\n\nexport type FigureImageProps = ImageProps;\n\nexport const FigureImage = forwardRef<HTMLImageElement, FigureImageProps>(function FigureImage(\n  { className, lightbox: _lightbox, ...props },\n  ref,\n) {\n  const { lightbox, styles } = useFigureContext();\n  const content = (\n    <Image\n      {...props}\n      ref={ref}\n      className={cx(styles.image, className)}\n      data-slot=\"figure-image\"\n      lightbox={false}\n    />\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Trigger\n      aria-label=\"Open image\"\n      className={styles.trigger}\n      data-jaci-component=\"figure-trigger\"\n      data-slot=\"figure-trigger\"\n    >\n      {content}\n    </BaseDialog.Trigger>\n  );\n});\n\nexport type FigureCaptionProps = ComponentPropsWithoutRef<\"figcaption\">;\n\nexport const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useFigureContext();\n  return (\n    <figcaption\n      {...props}\n      ref={ref}\n      className={cx(styles.caption, className)}\n      data-slot=\"figure-caption\"\n    />\n  );\n});\n\nexport interface FigureRootProps extends ComponentPropsWithoutRef<\"figure\"> {\n  lightbox?: boolean;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeLabel?: string;\n}\n\nfunction findChild<T>(children: ReactNode, component: ElementType): ReactElement<T> | null {\n  const child = Children.toArray(children).find(\n    (item) => isValidElement(item) && item.type === component,\n  );\n  return (child as ReactElement<T> | undefined) ?? null;\n}\n\nexport const FigureRoot = forwardRef<HTMLElement, FigureRootProps>(function FigureRoot(\n  {\n    children,\n    className,\n    closeLabel = \"Close image\",\n    defaultOpen,\n    lightbox = false,\n    onOpenChange,\n    open,\n    ...props\n  },\n  ref,\n) {\n  const styles = figureStyles();\n  const media = findChild<FigureImageProps>(children, FigureImage);\n  const caption = findChild<FigureCaptionProps>(children, FigureCaption);\n  const canOpen = Boolean(lightbox && media?.props.src);\n  const content = (\n    <figure\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"figure\"\n      data-lightbox={canOpen || undefined}\n      data-slot=\"figure\"\n    >\n      {children}\n    </figure>\n  );\n\n  const value = { lightbox: canOpen, styles };\n  const scopedPortalProps = useThemePortalProps({});\n\n  if (!canOpen || !media) {\n    return <FigureContext.Provider value={value}>{content}</FigureContext.Provider>;\n  }\n\n  const alt = media.props.alt;\n  const src = media.props.src;\n\n  return (\n    <FigureContext.Provider value={value}>\n      <BaseDialog.Root\n        defaultOpen={defaultOpen}\n        onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n        open={open}\n      >\n        {content}\n        <BaseDialog.Portal {...scopedPortalProps}>\n          <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"figure-lightbox-backdrop\" />\n          <BaseDialog.Viewport className={styles.viewport} data-slot=\"figure-lightbox-viewport\">\n            <BaseDialog.Popup\n              aria-label={alt || \"Image preview\"}\n              className={styles.popup}\n              data-jaci-component=\"figure-lightbox\"\n              data-slot=\"figure-lightbox-popup\"\n            >\n              <BaseDialog.Title className={styles.title}>{alt || \"Image preview\"}</BaseDialog.Title>\n              <div className={styles.closeRow} data-slot=\"figure-lightbox-close-row\">\n                <BaseDialog.Close\n                  aria-label={closeLabel}\n                  className={styles.close}\n                  data-slot=\"figure-lightbox-close\"\n                >\n                  ×\n                </BaseDialog.Close>\n              </div>\n              <img\n                alt={alt}\n                className={styles.lightboxImage}\n                data-slot=\"figure-lightbox-image\"\n                src={src}\n              />\n              {caption ? (\n                <figcaption className={styles.lightboxCaption} data-slot=\"figure-lightbox-caption\">\n                  {caption.props.children}\n                </figcaption>\n              ) : null}\n            </BaseDialog.Popup>\n          </BaseDialog.Viewport>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </FigureContext.Provider>\n  );\n});\n\nexport const Figure = {\n  Root: FigureRoot,\n  Image: FigureImage,\n  Caption: FigureCaption,\n};\n"],"mappings":"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"}

package/dist/components/image/image.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_image = require("../../styled-system/recipes/image.cjs");
+const require_theme_scope = require("../../theme/theme-scope.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
@@ -17,6 +18,7 @@ const Image = (0, react.forwardRef)(function Image({ alt, aspectRatio, className
 		fit,
 		status
 	});
+	const scopedPortalProps = require_theme_scope.useThemePortalProps({});
 	const rootStyle = {
 		...aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0 ? { aspectRatio } : void 0,
 		...style
@@ -63,38 +65,45 @@ const Image = (0, react.forwardRef)(function Image({ alt, aspectRatio, className
 			"data-jaci-component": "image-trigger",
 			"data-slot": "image-trigger",
 			children: content
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
-			className: styles.backdrop,
-			"data-slot": "image-lightbox-backdrop"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
-			className: styles.viewport,
-			"data-slot": "image-lightbox-viewport",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
-				"aria-label": alt || lightboxLabel,
-				className: styles.popup,
-				"data-jaci-component": "image-lightbox",
-				"data-slot": "image-lightbox-popup",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
-						className: styles.title,
-						children: alt || lightboxLabel
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
-						"aria-label": "Close image",
-						className: styles.close,
-						"data-slot": "image-lightbox-close",
-						children: "×"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-						alt,
-						className: styles.lightboxImage,
-						"data-slot": "image-lightbox-content",
-						src,
-						style: { objectPosition: position }
-					})
-				]
-			})
-		})] })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, {
+			...scopedPortalProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+				className: styles.backdrop,
+				"data-slot": "image-lightbox-backdrop"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+				className: styles.viewport,
+				"data-slot": "image-lightbox-viewport",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
+					"aria-label": alt || lightboxLabel,
+					className: styles.popup,
+					"data-jaci-component": "image-lightbox",
+					"data-slot": "image-lightbox-popup",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
+							className: styles.title,
+							children: alt || lightboxLabel
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: styles.closeRow,
+							"data-slot": "image-lightbox-close-row",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
+								"aria-label": "Close image",
+								className: styles.close,
+								"data-slot": "image-lightbox-close",
+								children: "×"
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							alt,
+							className: styles.lightboxImage,
+							"data-slot": "image-lightbox-content",
+							src,
+							style: { objectPosition: position }
+						})
+					]
+				})
+			})]
+		})]
 	});
 });
 //#endregion

package/dist/components/image/image.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.cjs","names":["image","cx","BaseDialog"],"sources":["../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { image } from \"../../styled-system/recipes\";\n\nexport type ImageFit = \"contain\" | \"cover\" | \"fill\" | \"none\";\nexport type ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\nexport interface ImageProps extends Omit<ComponentPropsWithoutRef<\"img\">, \"children\"> {\n  alt: string;\n  aspectRatio?: number;\n  defaultOpen?: boolean;\n  fallback?: ReactNode;\n  fit?: ImageFit;\n  lightbox?: boolean;\n  lightboxLabel?: string;\n  onOpenChange?: (open: boolean) => void;\n  onStatusChange?: (status: ImageStatus) => void;\n  open?: boolean;\n  position?: string;\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    alt,\n    aspectRatio,\n    className,\n    defaultOpen,\n    fallback,\n    fit = \"cover\",\n    lightbox = false,\n    lightboxLabel = \"Open image\",\n    onError,\n    onLoad,\n    onOpenChange,\n    onStatusChange,\n    open,\n    position,\n    src,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [status, setStatus] = useState<ImageStatus>(\"loading\");\n\n  // The source is intentionally the reset key for the native image lifecycle.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: changing src starts a new lifecycle.\n  useEffect(() => {\n    setStatus(\"loading\");\n  }, [src]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [onStatusChange, status]);\n\n  const styles = image({ fit, status });\n  const rootStyle = {\n    ...(aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0\n      ? { aspectRatio }\n      : undefined),\n    ...style,\n  };\n\n  const content = (\n    <span\n      aria-busy={status === \"loading\" || undefined}\n      className={styles.root}\n      data-fit={fit}\n      data-jaci-component=\"image\"\n      data-slot=\"image\"\n      data-status={status}\n      style={rootStyle}\n    >\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        className={cx(styles.image, className)}\n        data-slot=\"image-content\"\n        onError={(event) => {\n          setStatus(\"error\");\n          onError?.(event);\n        }}\n        onLoad={(event) => {\n          setStatus(\"loaded\");\n          onLoad?.(event);\n        }}\n        src={src}\n        style={{ objectPosition: position }}\n      />\n      {status === \"error\" && fallback ? (\n        <span aria-live=\"polite\" className={styles.fallback} data-slot=\"image-fallback\">\n          {fallback}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Root\n      defaultOpen={defaultOpen}\n      onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n      open={open}\n    >\n      <BaseDialog.Trigger\n        aria-label={lightboxLabel}\n        className={styles.trigger}\n        data-jaci-component=\"image-trigger\"\n        data-slot=\"image-trigger\"\n      >\n        {content}\n      </BaseDialog.Trigger>\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"image-lightbox-backdrop\" />\n        <BaseDialog.Viewport className={styles.viewport} data-slot=\"image-lightbox-viewport\">\n          <BaseDialog.Popup\n            aria-label={alt || lightboxLabel}\n            className={styles.popup}\n            data-jaci-component=\"image-lightbox\"\n            data-slot=\"image-lightbox-popup\"\n          >\n            <BaseDialog.Title className={styles.title}>{alt || lightboxLabel}</BaseDialog.Title>\n            <BaseDialog.Close\n              aria-label=\"Close image\"\n              className={styles.close}\n              data-slot=\"image-lightbox-close\"\n            >\n              ×\n            </BaseDialog.Close>\n            <img\n              alt={alt}\n              className={styles.lightboxImage}\n              data-slot=\"image-lightbox-content\"\n              src={src}\n              style={{ objectPosition: position }}\n            />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\n"],"mappings":";;;;;;;AA0BA,MAAa,SAAA,GAAA,MAAA,WAAA,CAAiD,SAAS,MACrE,EACE,KACA,aACA,WACA,aACA,UACA,MAAM,SACN,WAAW,OACX,gBAAgB,cAChB,SACA,QACA,cACA,gBACA,MACA,UACA,KACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAmC,SAAS;CAI3D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,UAAU,SAAS;CACrB,GAAG,CAAC,GAAG,CAAC;CAER,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,iBAAiB,MAAM;CACzB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,MAAM,SAASA,cAAAA,MAAM;EAAE;EAAK;CAAO,CAAC;CACpC,MAAM,YAAY;EAChB,GAAI,eAAe,OAAO,SAAS,WAAW,KAAK,cAAc,IAC7D,EAAE,YAAY,IACd,KAAA;EACJ,GAAG;CACL;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,aAAW,WAAW,aAAa,KAAA;EACnC,WAAW,OAAO;EAClB,YAAU;EACV,uBAAoB;EACpB,aAAU;EACV,eAAa;EACb,OAAO;YAPT,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACC;GACA;GACL,WAAWC,WAAAA,GAAG,OAAO,OAAO,SAAS;GACrC,aAAU;GACV,UAAU,UAAU;IAClB,UAAU,OAAO;IACjB,UAAU,KAAK;GACjB;GACA,SAAS,UAAU;IACjB,UAAU,QAAQ;IAClB,SAAS,KAAK;GAChB;GACK;GACL,OAAO,EAAE,gBAAgB,SAAS;EACnC,CAAA,GACA,WAAW,WAAW,WACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,aAAU;GAAS,WAAW,OAAO;GAAU,aAAU;aAC5D;EACG,CAAA,IACJ,IACA;;CAGR,IAAI,CAAC,UACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,sBAAAA,OAAW,MAAZ;EACe;EACb,eAAe,aAAa,eAAe,QAAQ;EAC7C;YAHR,CAKE,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,SAAZ;GACE,cAAY;GACZ,WAAW,OAAO;GAClB,uBAAoB;GACpB,aAAU;aAET;EACiB,CAAA,GACpB,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,OAAW,QAAZ,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;EAA2B,CAAA,GACtF,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;aACzD,iBAAA,GAAA,kBAAA,KAAA,CAACA,sBAAAA,OAAW,OAAZ;IACE,cAAY,OAAO;IACnB,WAAW,OAAO;IAClB,uBAAoB;IACpB,aAAU;cAJZ;KAME,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,OAAZ;MAAkB,WAAW,OAAO;gBAAQ,OAAO;KAAgC,CAAA;KACnF,iBAAA,GAAA,kBAAA,IAAA,CAACA,sBAAAA,OAAW,OAAZ;MACE,cAAW;MACX,WAAW,OAAO;MAClB,aAAU;gBACX;KAEiB,CAAA;KAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACO;MACL,WAAW,OAAO;MAClB,aAAU;MACL;MACL,OAAO,EAAE,gBAAgB,SAAS;KACnC,CAAA;IACe;;EACC,CAAA,CACJ,EAAA,CAAA,CACJ;;AAErB,CAAC"}
+{"version":3,"file":"image.cjs","names":["image","useThemePortalProps","cx","BaseDialog"],"sources":["../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { image } from \"../../styled-system/recipes\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type ImageFit = \"contain\" | \"cover\" | \"fill\" | \"none\";\nexport type ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\nexport interface ImageProps extends Omit<ComponentPropsWithoutRef<\"img\">, \"children\"> {\n  alt: string;\n  aspectRatio?: number;\n  defaultOpen?: boolean;\n  fallback?: ReactNode;\n  fit?: ImageFit;\n  lightbox?: boolean;\n  lightboxLabel?: string;\n  onOpenChange?: (open: boolean) => void;\n  onStatusChange?: (status: ImageStatus) => void;\n  open?: boolean;\n  position?: string;\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    alt,\n    aspectRatio,\n    className,\n    defaultOpen,\n    fallback,\n    fit = \"cover\",\n    lightbox = false,\n    lightboxLabel = \"Open image\",\n    onError,\n    onLoad,\n    onOpenChange,\n    onStatusChange,\n    open,\n    position,\n    src,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [status, setStatus] = useState<ImageStatus>(\"loading\");\n\n  // The source is intentionally the reset key for the native image lifecycle.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: changing src starts a new lifecycle.\n  useEffect(() => {\n    setStatus(\"loading\");\n  }, [src]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [onStatusChange, status]);\n\n  const styles = image({ fit, status });\n  const scopedPortalProps = useThemePortalProps({});\n  const rootStyle = {\n    ...(aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0\n      ? { aspectRatio }\n      : undefined),\n    ...style,\n  };\n\n  const content = (\n    <span\n      aria-busy={status === \"loading\" || undefined}\n      className={styles.root}\n      data-fit={fit}\n      data-jaci-component=\"image\"\n      data-slot=\"image\"\n      data-status={status}\n      style={rootStyle}\n    >\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        className={cx(styles.image, className)}\n        data-slot=\"image-content\"\n        onError={(event) => {\n          setStatus(\"error\");\n          onError?.(event);\n        }}\n        onLoad={(event) => {\n          setStatus(\"loaded\");\n          onLoad?.(event);\n        }}\n        src={src}\n        style={{ objectPosition: position }}\n      />\n      {status === \"error\" && fallback ? (\n        <span aria-live=\"polite\" className={styles.fallback} data-slot=\"image-fallback\">\n          {fallback}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Root\n      defaultOpen={defaultOpen}\n      onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n      open={open}\n    >\n      <BaseDialog.Trigger\n        aria-label={lightboxLabel}\n        className={styles.trigger}\n        data-jaci-component=\"image-trigger\"\n        data-slot=\"image-trigger\"\n      >\n        {content}\n      </BaseDialog.Trigger>\n      <BaseDialog.Portal {...scopedPortalProps}>\n        <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"image-lightbox-backdrop\" />\n        <BaseDialog.Viewport className={styles.viewport} data-slot=\"image-lightbox-viewport\">\n          <BaseDialog.Popup\n            aria-label={alt || lightboxLabel}\n            className={styles.popup}\n            data-jaci-component=\"image-lightbox\"\n            data-slot=\"image-lightbox-popup\"\n          >\n            <BaseDialog.Title className={styles.title}>{alt || lightboxLabel}</BaseDialog.Title>\n            <div className={styles.closeRow} data-slot=\"image-lightbox-close-row\">\n              <BaseDialog.Close\n                aria-label=\"Close image\"\n                className={styles.close}\n                data-slot=\"image-lightbox-close\"\n              >\n                ×\n              </BaseDialog.Close>\n            </div>\n            <img\n              alt={alt}\n              className={styles.lightboxImage}\n              data-slot=\"image-lightbox-content\"\n              src={src}\n              style={{ objectPosition: position }}\n            />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\n"],"mappings":"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"}

package/dist/components/image/image.js

@@ -1,6 +1,7 @@
 "use client";
 import { cx } from "../../styled-system/css/cx.js";
 import { image } from "../../styled-system/recipes/image.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { forwardRef, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
@@ -17,6 +18,7 @@ const Image = forwardRef(function Image({ alt, aspectRatio, className, defaultOp
 		fit,
 		status
 	});
+	const scopedPortalProps = useThemePortalProps({});
 	const rootStyle = {
 		...aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0 ? { aspectRatio } : void 0,
 		...style
@@ -63,38 +65,45 @@ const Image = forwardRef(function Image({ alt, aspectRatio, className, defaultOp
 			"data-jaci-component": "image-trigger",
 			"data-slot": "image-trigger",
 			children: content
-		}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
-			className: styles.backdrop,
-			"data-slot": "image-lightbox-backdrop"
-		}), /* @__PURE__ */ jsx(Dialog.Viewport, {
-			className: styles.viewport,
-			"data-slot": "image-lightbox-viewport",
-			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
-				"aria-label": alt || lightboxLabel,
-				className: styles.popup,
-				"data-jaci-component": "image-lightbox",
-				"data-slot": "image-lightbox-popup",
-				children: [
-					/* @__PURE__ */ jsx(Dialog.Title, {
-						className: styles.title,
-						children: alt || lightboxLabel
-					}),
-					/* @__PURE__ */ jsx(Dialog.Close, {
-						"aria-label": "Close image",
-						className: styles.close,
-						"data-slot": "image-lightbox-close",
-						children: "×"
-					}),
-					/* @__PURE__ */ jsx("img", {
-						alt,
-						className: styles.lightboxImage,
-						"data-slot": "image-lightbox-content",
-						src,
-						style: { objectPosition: position }
-					})
-				]
-			})
-		})] })]
+		}), /* @__PURE__ */ jsxs(Dialog.Portal, {
+			...scopedPortalProps,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				className: styles.backdrop,
+				"data-slot": "image-lightbox-backdrop"
+			}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+				className: styles.viewport,
+				"data-slot": "image-lightbox-viewport",
+				children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+					"aria-label": alt || lightboxLabel,
+					className: styles.popup,
+					"data-jaci-component": "image-lightbox",
+					"data-slot": "image-lightbox-popup",
+					children: [
+						/* @__PURE__ */ jsx(Dialog.Title, {
+							className: styles.title,
+							children: alt || lightboxLabel
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: styles.closeRow,
+							"data-slot": "image-lightbox-close-row",
+							children: /* @__PURE__ */ jsx(Dialog.Close, {
+								"aria-label": "Close image",
+								className: styles.close,
+								"data-slot": "image-lightbox-close",
+								children: "×"
+							})
+						}),
+						/* @__PURE__ */ jsx("img", {
+							alt,
+							className: styles.lightboxImage,
+							"data-slot": "image-lightbox-content",
+							src,
+							style: { objectPosition: position }
+						})
+					]
+				})
+			})]
+		})]
 	});
 });
 //#endregion

package/dist/components/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":["BaseDialog"],"sources":["../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { image } from \"../../styled-system/recipes\";\n\nexport type ImageFit = \"contain\" | \"cover\" | \"fill\" | \"none\";\nexport type ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\nexport interface ImageProps extends Omit<ComponentPropsWithoutRef<\"img\">, \"children\"> {\n  alt: string;\n  aspectRatio?: number;\n  defaultOpen?: boolean;\n  fallback?: ReactNode;\n  fit?: ImageFit;\n  lightbox?: boolean;\n  lightboxLabel?: string;\n  onOpenChange?: (open: boolean) => void;\n  onStatusChange?: (status: ImageStatus) => void;\n  open?: boolean;\n  position?: string;\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    alt,\n    aspectRatio,\n    className,\n    defaultOpen,\n    fallback,\n    fit = \"cover\",\n    lightbox = false,\n    lightboxLabel = \"Open image\",\n    onError,\n    onLoad,\n    onOpenChange,\n    onStatusChange,\n    open,\n    position,\n    src,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [status, setStatus] = useState<ImageStatus>(\"loading\");\n\n  // The source is intentionally the reset key for the native image lifecycle.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: changing src starts a new lifecycle.\n  useEffect(() => {\n    setStatus(\"loading\");\n  }, [src]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [onStatusChange, status]);\n\n  const styles = image({ fit, status });\n  const rootStyle = {\n    ...(aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0\n      ? { aspectRatio }\n      : undefined),\n    ...style,\n  };\n\n  const content = (\n    <span\n      aria-busy={status === \"loading\" || undefined}\n      className={styles.root}\n      data-fit={fit}\n      data-jaci-component=\"image\"\n      data-slot=\"image\"\n      data-status={status}\n      style={rootStyle}\n    >\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        className={cx(styles.image, className)}\n        data-slot=\"image-content\"\n        onError={(event) => {\n          setStatus(\"error\");\n          onError?.(event);\n        }}\n        onLoad={(event) => {\n          setStatus(\"loaded\");\n          onLoad?.(event);\n        }}\n        src={src}\n        style={{ objectPosition: position }}\n      />\n      {status === \"error\" && fallback ? (\n        <span aria-live=\"polite\" className={styles.fallback} data-slot=\"image-fallback\">\n          {fallback}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Root\n      defaultOpen={defaultOpen}\n      onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n      open={open}\n    >\n      <BaseDialog.Trigger\n        aria-label={lightboxLabel}\n        className={styles.trigger}\n        data-jaci-component=\"image-trigger\"\n        data-slot=\"image-trigger\"\n      >\n        {content}\n      </BaseDialog.Trigger>\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"image-lightbox-backdrop\" />\n        <BaseDialog.Viewport className={styles.viewport} data-slot=\"image-lightbox-viewport\">\n          <BaseDialog.Popup\n            aria-label={alt || lightboxLabel}\n            className={styles.popup}\n            data-jaci-component=\"image-lightbox\"\n            data-slot=\"image-lightbox-popup\"\n          >\n            <BaseDialog.Title className={styles.title}>{alt || lightboxLabel}</BaseDialog.Title>\n            <BaseDialog.Close\n              aria-label=\"Close image\"\n              className={styles.close}\n              data-slot=\"image-lightbox-close\"\n            >\n              ×\n            </BaseDialog.Close>\n            <img\n              alt={alt}\n              className={styles.lightboxImage}\n              data-slot=\"image-lightbox-content\"\n              src={src}\n              style={{ objectPosition: position }}\n            />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\n"],"mappings":";;;;;;;AA0BA,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,KACA,aACA,WACA,aACA,UACA,MAAM,SACN,WAAW,OACX,gBAAgB,cAChB,SACA,QACA,cACA,gBACA,MACA,UACA,KACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAsB,SAAS;CAI3D,gBAAgB;EACd,UAAU,SAAS;CACrB,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;EACd,iBAAiB,MAAM;CACzB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,MAAM,SAAS,MAAM;EAAE;EAAK;CAAO,CAAC;CACpC,MAAM,YAAY;EAChB,GAAI,eAAe,OAAO,SAAS,WAAW,KAAK,cAAc,IAC7D,EAAE,YAAY,IACd,KAAA;EACJ,GAAG;CACL;CAEA,MAAM,UACJ,qBAAC,QAAD;EACE,aAAW,WAAW,aAAa,KAAA;EACnC,WAAW,OAAO;EAClB,YAAU;EACV,uBAAoB;EACpB,aAAU;EACV,eAAa;EACb,OAAO;YAPT,CASE,oBAAC,OAAD;GACE,GAAI;GACC;GACA;GACL,WAAW,GAAG,OAAO,OAAO,SAAS;GACrC,aAAU;GACV,UAAU,UAAU;IAClB,UAAU,OAAO;IACjB,UAAU,KAAK;GACjB;GACA,SAAS,UAAU;IACjB,UAAU,QAAQ;IAClB,SAAS,KAAK;GAChB;GACK;GACL,OAAO,EAAE,gBAAgB,SAAS;EACnC,CAAA,GACA,WAAW,WAAW,WACrB,oBAAC,QAAD;GAAM,aAAU;GAAS,WAAW,OAAO;GAAU,aAAU;aAC5D;EACG,CAAA,IACJ,IACA;;CAGR,IAAI,CAAC,UACH,OAAO;CAGT,OACE,qBAACA,OAAW,MAAZ;EACe;EACb,eAAe,aAAa,eAAe,QAAQ;EAC7C;YAHR,CAKE,oBAACA,OAAW,SAAZ;GACE,cAAY;GACZ,WAAW,OAAO;GAClB,uBAAoB;GACpB,aAAU;aAET;EACiB,CAAA,GACpB,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;EAA2B,CAAA,GACtF,oBAACA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;aACzD,qBAACA,OAAW,OAAZ;IACE,cAAY,OAAO;IACnB,WAAW,OAAO;IAClB,uBAAoB;IACpB,aAAU;cAJZ;KAME,oBAACA,OAAW,OAAZ;MAAkB,WAAW,OAAO;gBAAQ,OAAO;KAAgC,CAAA;KACnF,oBAACA,OAAW,OAAZ;MACE,cAAW;MACX,WAAW,OAAO;MAClB,aAAU;gBACX;KAEiB,CAAA;KAClB,oBAAC,OAAD;MACO;MACL,WAAW,OAAO;MAClB,aAAU;MACL;MACL,OAAO,EAAE,gBAAgB,SAAS;KACnC,CAAA;IACe;;EACC,CAAA,CACJ,EAAA,CAAA,CACJ;;AAErB,CAAC"}
+{"version":3,"file":"image.js","names":["BaseDialog"],"sources":["../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { image } from \"../../styled-system/recipes\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type ImageFit = \"contain\" | \"cover\" | \"fill\" | \"none\";\nexport type ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\nexport interface ImageProps extends Omit<ComponentPropsWithoutRef<\"img\">, \"children\"> {\n  alt: string;\n  aspectRatio?: number;\n  defaultOpen?: boolean;\n  fallback?: ReactNode;\n  fit?: ImageFit;\n  lightbox?: boolean;\n  lightboxLabel?: string;\n  onOpenChange?: (open: boolean) => void;\n  onStatusChange?: (status: ImageStatus) => void;\n  open?: boolean;\n  position?: string;\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    alt,\n    aspectRatio,\n    className,\n    defaultOpen,\n    fallback,\n    fit = \"cover\",\n    lightbox = false,\n    lightboxLabel = \"Open image\",\n    onError,\n    onLoad,\n    onOpenChange,\n    onStatusChange,\n    open,\n    position,\n    src,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [status, setStatus] = useState<ImageStatus>(\"loading\");\n\n  // The source is intentionally the reset key for the native image lifecycle.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: changing src starts a new lifecycle.\n  useEffect(() => {\n    setStatus(\"loading\");\n  }, [src]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [onStatusChange, status]);\n\n  const styles = image({ fit, status });\n  const scopedPortalProps = useThemePortalProps({});\n  const rootStyle = {\n    ...(aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0\n      ? { aspectRatio }\n      : undefined),\n    ...style,\n  };\n\n  const content = (\n    <span\n      aria-busy={status === \"loading\" || undefined}\n      className={styles.root}\n      data-fit={fit}\n      data-jaci-component=\"image\"\n      data-slot=\"image\"\n      data-status={status}\n      style={rootStyle}\n    >\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        className={cx(styles.image, className)}\n        data-slot=\"image-content\"\n        onError={(event) => {\n          setStatus(\"error\");\n          onError?.(event);\n        }}\n        onLoad={(event) => {\n          setStatus(\"loaded\");\n          onLoad?.(event);\n        }}\n        src={src}\n        style={{ objectPosition: position }}\n      />\n      {status === \"error\" && fallback ? (\n        <span aria-live=\"polite\" className={styles.fallback} data-slot=\"image-fallback\">\n          {fallback}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Root\n      defaultOpen={defaultOpen}\n      onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n      open={open}\n    >\n      <BaseDialog.Trigger\n        aria-label={lightboxLabel}\n        className={styles.trigger}\n        data-jaci-component=\"image-trigger\"\n        data-slot=\"image-trigger\"\n      >\n        {content}\n      </BaseDialog.Trigger>\n      <BaseDialog.Portal {...scopedPortalProps}>\n        <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"image-lightbox-backdrop\" />\n        <BaseDialog.Viewport className={styles.viewport} data-slot=\"image-lightbox-viewport\">\n          <BaseDialog.Popup\n            aria-label={alt || lightboxLabel}\n            className={styles.popup}\n            data-jaci-component=\"image-lightbox\"\n            data-slot=\"image-lightbox-popup\"\n          >\n            <BaseDialog.Title className={styles.title}>{alt || lightboxLabel}</BaseDialog.Title>\n            <div className={styles.closeRow} data-slot=\"image-lightbox-close-row\">\n              <BaseDialog.Close\n                aria-label=\"Close image\"\n                className={styles.close}\n                data-slot=\"image-lightbox-close\"\n              >\n                ×\n              </BaseDialog.Close>\n            </div>\n            <img\n              alt={alt}\n              className={styles.lightboxImage}\n              data-slot=\"image-lightbox-content\"\n              src={src}\n              style={{ objectPosition: position }}\n            />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\n"],"mappings":";;;;;;;;AA2BA,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,KACA,aACA,WACA,aACA,UACA,MAAM,SACN,WAAW,OACX,gBAAgB,cAChB,SACA,QACA,cACA,gBACA,MACA,UACA,KACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAsB,SAAS;CAI3D,gBAAgB;EACd,UAAU,SAAS;CACrB,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;EACd,iBAAiB,MAAM;CACzB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,MAAM,SAAS,MAAM;EAAE;EAAK;CAAO,CAAC;CACpC,MAAM,oBAAoB,oBAAoB,CAAC,CAAC;CAChD,MAAM,YAAY;EAChB,GAAI,eAAe,OAAO,SAAS,WAAW,KAAK,cAAc,IAC7D,EAAE,YAAY,IACd,KAAA;EACJ,GAAG;CACL;CAEA,MAAM,UACJ,qBAAC,QAAD;EACE,aAAW,WAAW,aAAa,KAAA;EACnC,WAAW,OAAO;EAClB,YAAU;EACV,uBAAoB;EACpB,aAAU;EACV,eAAa;EACb,OAAO;YAPT,CASE,oBAAC,OAAD;GACE,GAAI;GACC;GACA;GACL,WAAW,GAAG,OAAO,OAAO,SAAS;GACrC,aAAU;GACV,UAAU,UAAU;IAClB,UAAU,OAAO;IACjB,UAAU,KAAK;GACjB;GACA,SAAS,UAAU;IACjB,UAAU,QAAQ;IAClB,SAAS,KAAK;GAChB;GACK;GACL,OAAO,EAAE,gBAAgB,SAAS;EACnC,CAAA,GACA,WAAW,WAAW,WACrB,oBAAC,QAAD;GAAM,aAAU;GAAS,WAAW,OAAO;GAAU,aAAU;aAC5D;EACG,CAAA,IACJ,IACA;;CAGR,IAAI,CAAC,UACH,OAAO;CAGT,OACE,qBAACA,OAAW,MAAZ;EACe;EACb,eAAe,aAAa,eAAe,QAAQ;EAC7C;YAHR,CAKE,oBAACA,OAAW,SAAZ;GACE,cAAY;GACZ,WAAW,OAAO;GAClB,uBAAoB;GACpB,aAAU;aAET;EACiB,CAAA,GACpB,qBAACA,OAAW,QAAZ;GAAmB,GAAI;aAAvB,CACE,oBAACA,OAAW,UAAZ;IAAqB,WAAW,OAAO;IAAU,aAAU;GAA2B,CAAA,GACtF,oBAACA,OAAW,UAAZ;IAAqB,WAAW,OAAO;IAAU,aAAU;cACzD,qBAACA,OAAW,OAAZ;KACE,cAAY,OAAO;KACnB,WAAW,OAAO;KAClB,uBAAoB;KACpB,aAAU;eAJZ;MAME,oBAACA,OAAW,OAAZ;OAAkB,WAAW,OAAO;iBAAQ,OAAO;MAAgC,CAAA;MACnF,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAU,aAAU;iBACzC,oBAACA,OAAW,OAAZ;QACE,cAAW;QACX,WAAW,OAAO;QAClB,aAAU;kBACX;OAEiB,CAAA;MACf,CAAA;MACL,oBAAC,OAAD;OACO;OACL,WAAW,OAAO;OAClB,aAAU;OACL;OACL,OAAO,EAAE,gBAAgB,SAAS;MACnC,CAAA;KACe;;GACC,CAAA,CACJ;IACJ;;AAErB,CAAC"}

package/dist/components/menu/menu.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_base_ui = require("../base-ui.cjs");
 const require_menu = require("../../styled-system/recipes/menu.cjs");
+const require_theme_scope = require("../../theme/theme-scope.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_menu = require("@base-ui/react/menu");
@@ -18,7 +19,9 @@ const MenuTrigger = (0, react.forwardRef)(function MenuTrigger({ className, ...p
 	});
 });
 /** Preserves Base UI's portal and optional container APIs. */
-const MenuPortal = _base_ui_react_menu.Menu.Portal;
+function MenuPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const MenuPositioner = (0, react.forwardRef)(function MenuPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Positioner, {
 		...props,

package/dist/components/menu/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.cjs","names":["BaseMenu","withRecipeClassName","menu"],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot, MenuTrigger as BaseMenuTrigger } from \"@base-ui/react/menu\";\n\nimport { menu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups the menu parts. It keeps Base UI's controlled `open`/\n * `onOpenChange` API and uncontrolled `defaultOpen` API intact.\n */\nexport type MenuRootProps<Payload = unknown> = BaseMenuRoot.Props<Payload>;\n\nexport function MenuRoot<Payload = unknown>(props: MenuRootProps<Payload>) {\n  return <BaseMenu.Root {...props} />;\n}\n\nexport type MenuTriggerProps<Payload = unknown> = BaseMenuTrigger.Props<Payload>;\n\nexport const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Trigger\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().trigger, className)}\n      data-jaci-component=\"menu\"\n      data-slot=\"menu-trigger\"\n    />\n  );\n});\n\n/** Preserves Base UI's portal and optional container APIs. */\nexport const MenuPortal = BaseMenu.Portal;\n\nexport type MenuPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(\n  function MenuPositioner({ className, ...props }, ref) {\n    return (\n      <BaseMenu.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(menu().positioner, className)}\n        data-slot=\"menu-positioner\"\n      />\n    );\n  },\n);\n\nexport type MenuPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().popup, className)}\n      data-slot=\"menu-popup\"\n    />\n  );\n});\n\nexport type MenuItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().item, className)}\n      data-slot=\"menu-item\"\n    />\n  );\n});\n\nexport type MenuLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\n/**\n * A navigational item. It retains Base UI's keyboard navigation.\n */\nexport const MenuLinkItem = forwardRef<Element, MenuLinkItemProps>(function MenuLinkItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.LinkItem\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().item, className)}\n      data-slot=\"menu-link-item\"\n    />\n  );\n});\n\nexport type MenuSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Separator\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().separator, className)}\n      data-slot=\"menu-separator\"\n    />\n  );\n});\n\nexport type MenuGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().group, className)}\n      data-slot=\"menu-group\"\n    />\n  );\n});\n\nexport type MenuGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(\n  function MenuGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseMenu.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(menu().groupLabel, className)}\n        data-slot=\"menu-group-label\"\n      />\n    );\n  },\n);\n\nexport const Menu = {\n  Root: MenuRoot,\n  Trigger: MenuTrigger,\n  Portal: MenuPortal,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Item: MenuItem,\n  LinkItem: MenuLinkItem,\n  Separator: MenuSeparator,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  createHandle: BaseMenu.createHandle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"menu.cjs","names":["BaseMenu","withRecipeClassName","menu","useThemePortalProps"],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot, MenuTrigger as BaseMenuTrigger } from \"@base-ui/react/menu\";\n\nimport { menu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/**\n * Groups the menu parts. It keeps Base UI's controlled `open`/\n * `onOpenChange` API and uncontrolled `defaultOpen` API intact.\n */\nexport type MenuRootProps<Payload = unknown> = BaseMenuRoot.Props<Payload>;\n\nexport function MenuRoot<Payload = unknown>(props: MenuRootProps<Payload>) {\n  return <BaseMenu.Root {...props} />;\n}\n\nexport type MenuTriggerProps<Payload = unknown> = BaseMenuTrigger.Props<Payload>;\n\nexport const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(function MenuTrigger(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Trigger\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().trigger, className)}\n      data-jaci-component=\"menu\"\n      data-slot=\"menu-trigger\"\n    />\n  );\n});\n\n/** Preserves Base UI's portal and optional container APIs. */\nexport function MenuPortal(props: ComponentPropsWithoutRef<typeof BaseMenu.Portal>) {\n  return <BaseMenu.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type MenuPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(\n  function MenuPositioner({ className, ...props }, ref) {\n    return (\n      <BaseMenu.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(menu().positioner, className)}\n        data-slot=\"menu-positioner\"\n      />\n    );\n  },\n);\n\nexport type MenuPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().popup, className)}\n      data-slot=\"menu-popup\"\n    />\n  );\n});\n\nexport type MenuItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().item, className)}\n      data-slot=\"menu-item\"\n    />\n  );\n});\n\nexport type MenuLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\n/**\n * A navigational item. It retains Base UI's keyboard navigation.\n */\nexport const MenuLinkItem = forwardRef<Element, MenuLinkItemProps>(function MenuLinkItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.LinkItem\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().item, className)}\n      data-slot=\"menu-link-item\"\n    />\n  );\n});\n\nexport type MenuSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Separator\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().separator, className)}\n      data-slot=\"menu-separator\"\n    />\n  );\n});\n\nexport type MenuGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseMenu.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(menu().group, className)}\n      data-slot=\"menu-group\"\n    />\n  );\n});\n\nexport type MenuGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(\n  function MenuGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseMenu.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(menu().groupLabel, className)}\n        data-slot=\"menu-group-label\"\n      />\n    );\n  },\n);\n\nexport const Menu = {\n  Root: MenuRoot,\n  Trigger: MenuTrigger,\n  Portal: MenuPortal,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Item: MenuItem,\n  LinkItem: MenuLinkItem,\n  Separator: MenuSeparator,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  createHandle: BaseMenu.createHandle,\n};\n"],"mappings":"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"}