jaci-ui 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- cd7966c: Harden package compatibility, tarball validation, tree-shaking and CI coverage for React and framework consumers.
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -2,6 +2,9 @@
 
 Accessible, themeable React components for React 18.2 and React 19 applications.
 
+The published package supports Node 18.18 or newer. Node 22.18 or newer is required only for
+working on the repository because it is used by the build toolchain.
+
 ## Installation
 
 ```sh
@@ -18,6 +21,11 @@ import "jaci-ui/styles.css";
 The package declares `react` and `react-dom` as peer dependencies. `@base-ui/react` is installed
 as a runtime dependency for accessible interactive primitives.
 
+The package publishes ESM and CommonJS entry points, TypeScript declarations and sourcemaps.
+`jaci-ui/styles.css` is the only declared side effect, so bundlers can tree-shake unused
+component modules. Import `jaci-ui/panda-preset` only when an application also uses Panda CSS;
+the regular package does not require Panda at runtime.
+
 ## Usage
 
 Components use named exports and compound APIs where several accessible parts work together:
@@ -338,6 +346,15 @@ export function App() {
 mounting. The provider is a client module, so Next.js App Router applications should place it
 inside a client boundary. Direct `data-jaci-theme` and `--jaci-*` variables remain supported.
 
+Popups rendered through Jaci portal slots inherit the nearest `ThemeProvider` scope, including
+local accent tokens. An explicit `container` prop on a portal still takes precedence. Without a
+provider, portals keep Base UI's default document-level behavior.
+
+When combining responsive utility classes with `Sidebar` or `BottomNavigation`, import
+`jaci-ui/styles.css` before the application's utility stylesheet. Their structural display rule
+uses a low-specificity selector, so classes such as `hidden md:flex` and `md:hidden` can control
+visibility without inline styles.
+
 The package exposes semantic surface, foreground, border, status, spacing, radius, shadow and
 transition tokens. See the Theming guide in Storybook for the complete token vocabulary.
 

package/dist/components/alert-dialog/alert-dialog.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_dialog = require("../../styled-system/recipes/dialog.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_alert_dialog = require("@base-ui/react/alert-dialog");
@@ -17,7 +18,9 @@ const AlertDialogTrigger = (0, react.forwardRef)(function AlertDialogTrigger({ c
 		"data-slot": "alert-dialog-trigger"
 	});
 });
-const AlertDialogPortal = _base_ui_react_alert_dialog.AlertDialog.Portal;
+function AlertDialogPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const AlertDialogBackdrop = (0, react.forwardRef)(function AlertDialogBackdrop({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Backdrop, {
 		...props,

package/dist/components/alert-dialog/alert-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.cjs","names":["BaseAlertDialog","withRecipeClassName","dialog","cx"],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { AlertDialogRoot as BaseAlertDialogRoot } from \"@base-ui/react/alert-dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dialog } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport type { DialogSize } from \"../dialog\";\n\n/**\n * A modal confirmation primitive with Base UI's focus trap, Escape handling,\n * and accessible alert-dialog semantics.\n */\nexport type AlertDialogRootProps<Payload = unknown> = BaseAlertDialogRoot.Props<Payload>;\n\nexport function AlertDialogRoot<Payload = unknown>(props: AlertDialogRootProps<Payload>) {\n  return <BaseAlertDialog.Root {...props} />;\n}\n\nexport type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Trigger>;\n\nexport const AlertDialogTrigger = forwardRef<HTMLButtonElement, AlertDialogTriggerProps>(\n  function AlertDialogTrigger({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().trigger, className)}\n        data-slot=\"alert-dialog-trigger\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogPortalProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Portal>;\nexport const AlertDialogPortal: typeof BaseAlertDialog.Portal = BaseAlertDialog.Portal;\n\nexport type AlertDialogBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\n\nexport const AlertDialogBackdrop = forwardRef<HTMLDivElement, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().backdrop, className)}\n        data-slot=\"alert-dialog-backdrop\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogViewportProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Viewport>;\n\nexport const AlertDialogViewport = forwardRef<HTMLDivElement, AlertDialogViewportProps>(\n  function AlertDialogViewport({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().viewport, className)}\n        data-slot=\"alert-dialog-viewport\"\n      />\n    );\n  },\n);\n\nexport interface AlertDialogPopupProps\n  extends ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> {\n  size?: DialogSize;\n}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(\n  function AlertDialogPopup({ className, size = \"md\", ...props }, ref) {\n    return (\n      <BaseAlertDialog.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog({ size }).popup, className)}\n        data-jaci-component=\"alert-dialog\"\n        data-slot=\"alert-dialog-popup\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogHeader = forwardRef<HTMLDivElement, AlertDialogHeaderProps>(\n  function AlertDialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().header, className)}\n        data-slot=\"alert-dialog-header\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\n\nexport const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(\n  function AlertDialogTitle({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Title\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().title, className)}\n        data-slot=\"alert-dialog-title\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof BaseAlertDialog.Description\n>;\n\nexport const AlertDialogDescription = forwardRef<HTMLParagraphElement, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().description, className)}\n        data-slot=\"alert-dialog-description\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogBodyProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogBody = forwardRef<HTMLDivElement, AlertDialogBodyProps>(\n  function AlertDialogBody({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().body, className)}\n        data-slot=\"alert-dialog-body\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(\n  function AlertDialogFooter({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().footer, className)}\n        data-slot=\"alert-dialog-footer\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogCloseProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Close> & {\n  \"data-slot\"?: string;\n};\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(\n  function AlertDialogClose(\n    { \"aria-label\": ariaLabel, children, className, \"data-slot\": dataSlot, ...props },\n    ref,\n  ) {\n    const hasVisibleLabel = children != null;\n\n    return (\n      <BaseAlertDialog.Close\n        {...props}\n        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close alert dialog\")}\n        ref={ref}\n        className={withRecipeClassName(\n          hasVisibleLabel ? dialog().action : dialog().close,\n          className,\n        )}\n        data-slot={dataSlot ?? \"alert-dialog-close\"}\n      >\n        {children ?? \"×\"}\n      </BaseAlertDialog.Close>\n    );\n  },\n);\n\nexport type AlertDialogCancelProps = AlertDialogCloseProps;\n\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(\n  function AlertDialogCancel({ children = \"Cancel\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-cancel\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport type AlertDialogActionProps = AlertDialogCloseProps;\n\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(\n  function AlertDialogAction({ children = \"Continue\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-action\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Header: AlertDialogHeader,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Body: AlertDialogBody,\n  Footer: AlertDialogFooter,\n  Close: AlertDialogClose,\n  Cancel: AlertDialogCancel,\n  Action: AlertDialogAction,\n  createHandle: BaseAlertDialog.createHandle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.cjs","names":["BaseAlertDialog","withRecipeClassName","dialog","useThemePortalProps","cx"],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { AlertDialogRoot as BaseAlertDialogRoot } from \"@base-ui/react/alert-dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dialog } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport type { DialogSize } from \"../dialog\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/**\n * A modal confirmation primitive with Base UI's focus trap, Escape handling,\n * and accessible alert-dialog semantics.\n */\nexport type AlertDialogRootProps<Payload = unknown> = BaseAlertDialogRoot.Props<Payload>;\n\nexport function AlertDialogRoot<Payload = unknown>(props: AlertDialogRootProps<Payload>) {\n  return <BaseAlertDialog.Root {...props} />;\n}\n\nexport type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Trigger>;\n\nexport const AlertDialogTrigger = forwardRef<HTMLButtonElement, AlertDialogTriggerProps>(\n  function AlertDialogTrigger({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().trigger, className)}\n        data-slot=\"alert-dialog-trigger\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogPortalProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Portal>;\nexport function AlertDialogPortal(props: AlertDialogPortalProps) {\n  return <BaseAlertDialog.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type AlertDialogBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\n\nexport const AlertDialogBackdrop = forwardRef<HTMLDivElement, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().backdrop, className)}\n        data-slot=\"alert-dialog-backdrop\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogViewportProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Viewport>;\n\nexport const AlertDialogViewport = forwardRef<HTMLDivElement, AlertDialogViewportProps>(\n  function AlertDialogViewport({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().viewport, className)}\n        data-slot=\"alert-dialog-viewport\"\n      />\n    );\n  },\n);\n\nexport interface AlertDialogPopupProps\n  extends ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> {\n  size?: DialogSize;\n}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(\n  function AlertDialogPopup({ className, size = \"md\", ...props }, ref) {\n    return (\n      <BaseAlertDialog.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog({ size }).popup, className)}\n        data-jaci-component=\"alert-dialog\"\n        data-slot=\"alert-dialog-popup\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogHeader = forwardRef<HTMLDivElement, AlertDialogHeaderProps>(\n  function AlertDialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().header, className)}\n        data-slot=\"alert-dialog-header\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\n\nexport const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(\n  function AlertDialogTitle({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Title\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().title, className)}\n        data-slot=\"alert-dialog-title\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof BaseAlertDialog.Description\n>;\n\nexport const AlertDialogDescription = forwardRef<HTMLParagraphElement, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().description, className)}\n        data-slot=\"alert-dialog-description\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogBodyProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogBody = forwardRef<HTMLDivElement, AlertDialogBodyProps>(\n  function AlertDialogBody({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().body, className)}\n        data-slot=\"alert-dialog-body\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(\n  function AlertDialogFooter({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().footer, className)}\n        data-slot=\"alert-dialog-footer\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogCloseProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Close> & {\n  \"data-slot\"?: string;\n};\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(\n  function AlertDialogClose(\n    { \"aria-label\": ariaLabel, children, className, \"data-slot\": dataSlot, ...props },\n    ref,\n  ) {\n    const hasVisibleLabel = children != null;\n\n    return (\n      <BaseAlertDialog.Close\n        {...props}\n        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close alert dialog\")}\n        ref={ref}\n        className={withRecipeClassName(\n          hasVisibleLabel ? dialog().action : dialog().close,\n          className,\n        )}\n        data-slot={dataSlot ?? \"alert-dialog-close\"}\n      >\n        {children ?? \"×\"}\n      </BaseAlertDialog.Close>\n    );\n  },\n);\n\nexport type AlertDialogCancelProps = AlertDialogCloseProps;\n\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(\n  function AlertDialogCancel({ children = \"Cancel\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-cancel\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport type AlertDialogActionProps = AlertDialogCloseProps;\n\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(\n  function AlertDialogAction({ children = \"Continue\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-action\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Header: AlertDialogHeader,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Body: AlertDialogBody,\n  Footer: AlertDialogFooter,\n  Close: AlertDialogClose,\n  Cancel: AlertDialogCancel,\n  Action: AlertDialogAction,\n  createHandle: BaseAlertDialog.createHandle,\n};\n"],"mappings":"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"}

package/dist/components/alert-dialog/alert-dialog.d.cts

@@ -12,7 +12,7 @@ declare function AlertDialogRoot$1<Payload = unknown>(props: AlertDialogRootProp
 type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof AlertDialog.Trigger>;
 declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTriggerProps<unknown>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 type AlertDialogPortalProps = ComponentPropsWithoutRef<typeof AlertDialog.Portal>;
-declare const AlertDialogPortal: typeof AlertDialog.Portal;
+declare function AlertDialogPortal(props: AlertDialogPortalProps): import("react").JSX.Element;
 type AlertDialogBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;
 declare const AlertDialogBackdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type AlertDialogViewportProps = ComponentPropsWithoutRef<typeof AlertDialog.Viewport>;
@@ -48,7 +48,7 @@ declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<
 declare const AlertDialog$1: {
   Root: typeof AlertDialogRoot$1;
   Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTriggerProps<unknown>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof AlertDialogPortal;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Viewport: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<AlertDialogPopupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -12,7 +12,7 @@ declare function AlertDialogRoot$1<Payload = unknown>(props: AlertDialogRootProp
 type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof AlertDialog.Trigger>;
 declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTriggerProps<unknown>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 type AlertDialogPortalProps = ComponentPropsWithoutRef<typeof AlertDialog.Portal>;
-declare const AlertDialogPortal: typeof AlertDialog.Portal;
+declare function AlertDialogPortal(props: AlertDialogPortalProps): import("react").JSX.Element;
 type AlertDialogBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;
 declare const AlertDialogBackdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type AlertDialogViewportProps = ComponentPropsWithoutRef<typeof AlertDialog.Viewport>;
@@ -48,7 +48,7 @@ declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<
 declare const AlertDialog$1: {
   Root: typeof AlertDialogRoot$1;
   Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTriggerProps<unknown>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof AlertDialogPortal;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Viewport: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<AlertDialogPopupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/alert-dialog/alert-dialog.js

@@ -2,6 +2,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { dialog } from "../../styled-system/recipes/dialog.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
@@ -17,7 +18,9 @@ const AlertDialogTrigger = forwardRef(function AlertDialogTrigger({ className, .
 		"data-slot": "alert-dialog-trigger"
 	});
 });
-const AlertDialogPortal = AlertDialog.Portal;
+function AlertDialogPortal(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, { ...useThemePortalProps(props) });
+}
 const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
 		...props,

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialogRoot","BaseAlertDialog","AlertDialog"],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { AlertDialogRoot as BaseAlertDialogRoot } from \"@base-ui/react/alert-dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dialog } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport type { DialogSize } from \"../dialog\";\n\n/**\n * A modal confirmation primitive with Base UI's focus trap, Escape handling,\n * and accessible alert-dialog semantics.\n */\nexport type AlertDialogRootProps<Payload = unknown> = BaseAlertDialogRoot.Props<Payload>;\n\nexport function AlertDialogRoot<Payload = unknown>(props: AlertDialogRootProps<Payload>) {\n  return <BaseAlertDialog.Root {...props} />;\n}\n\nexport type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Trigger>;\n\nexport const AlertDialogTrigger = forwardRef<HTMLButtonElement, AlertDialogTriggerProps>(\n  function AlertDialogTrigger({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().trigger, className)}\n        data-slot=\"alert-dialog-trigger\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogPortalProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Portal>;\nexport const AlertDialogPortal: typeof BaseAlertDialog.Portal = BaseAlertDialog.Portal;\n\nexport type AlertDialogBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\n\nexport const AlertDialogBackdrop = forwardRef<HTMLDivElement, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().backdrop, className)}\n        data-slot=\"alert-dialog-backdrop\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogViewportProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Viewport>;\n\nexport const AlertDialogViewport = forwardRef<HTMLDivElement, AlertDialogViewportProps>(\n  function AlertDialogViewport({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().viewport, className)}\n        data-slot=\"alert-dialog-viewport\"\n      />\n    );\n  },\n);\n\nexport interface AlertDialogPopupProps\n  extends ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> {\n  size?: DialogSize;\n}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(\n  function AlertDialogPopup({ className, size = \"md\", ...props }, ref) {\n    return (\n      <BaseAlertDialog.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog({ size }).popup, className)}\n        data-jaci-component=\"alert-dialog\"\n        data-slot=\"alert-dialog-popup\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogHeader = forwardRef<HTMLDivElement, AlertDialogHeaderProps>(\n  function AlertDialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().header, className)}\n        data-slot=\"alert-dialog-header\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\n\nexport const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(\n  function AlertDialogTitle({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Title\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().title, className)}\n        data-slot=\"alert-dialog-title\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof BaseAlertDialog.Description\n>;\n\nexport const AlertDialogDescription = forwardRef<HTMLParagraphElement, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().description, className)}\n        data-slot=\"alert-dialog-description\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogBodyProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogBody = forwardRef<HTMLDivElement, AlertDialogBodyProps>(\n  function AlertDialogBody({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().body, className)}\n        data-slot=\"alert-dialog-body\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(\n  function AlertDialogFooter({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().footer, className)}\n        data-slot=\"alert-dialog-footer\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogCloseProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Close> & {\n  \"data-slot\"?: string;\n};\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(\n  function AlertDialogClose(\n    { \"aria-label\": ariaLabel, children, className, \"data-slot\": dataSlot, ...props },\n    ref,\n  ) {\n    const hasVisibleLabel = children != null;\n\n    return (\n      <BaseAlertDialog.Close\n        {...props}\n        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close alert dialog\")}\n        ref={ref}\n        className={withRecipeClassName(\n          hasVisibleLabel ? dialog().action : dialog().close,\n          className,\n        )}\n        data-slot={dataSlot ?? \"alert-dialog-close\"}\n      >\n        {children ?? \"×\"}\n      </BaseAlertDialog.Close>\n    );\n  },\n);\n\nexport type AlertDialogCancelProps = AlertDialogCloseProps;\n\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(\n  function AlertDialogCancel({ children = \"Cancel\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-cancel\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport type AlertDialogActionProps = AlertDialogCloseProps;\n\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(\n  function AlertDialogAction({ children = \"Continue\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-action\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Header: AlertDialogHeader,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Body: AlertDialogBody,\n  Footer: AlertDialogFooter,\n  Close: AlertDialogClose,\n  Cancel: AlertDialogCancel,\n  Action: AlertDialogAction,\n  createHandle: BaseAlertDialog.createHandle,\n};\n"],"mappings":";;;;;;;;AAkBA,SAAgBA,kBAAmC,OAAsC;CACvF,OAAO,oBAACC,YAAgB,MAAjB,EAAsB,GAAI,MAAQ,CAAA;AAC3C;AAIA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACA,YAAgB,SAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,CAAC,CAAC,SAAS,SAAS;EAC1D,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,oBAAmDA,YAAgB;AAIhF,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,OACE,oBAACA,YAAgB,UAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,CAAC,CAAC,UAAU,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,OACE,oBAACA,YAAgB,UAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,CAAC,CAAC,UAAU,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAOA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,OAAO,MAAM,GAAG,SAAS,KAAK;CACnE,OACE,oBAACA,YAAgB,OAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,SAAS;EAChE,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,CAAC,CAAC,QAAQ,SAAS;EACxC,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAACA,YAAgB,OAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,CAAC,CAAC,OAAO,SAAS;EACxD,aAAU;CACX,CAAA;AAEL,CACF;AAMA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,oBAACA,YAAgB,aAAjB;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,CAAC,CAAC,aAAa,SAAS;EAC9D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,CAAC,CAAC,MAAM,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,CAAC,CAAC,QAAQ,SAAS;EACxC,aAAU;CACX,CAAA;AAEL,CACF;AAMA,MAAa,mBAAmB,WAC9B,SAAS,iBACP,EAAE,cAAc,WAAW,UAAU,WAAW,aAAa,UAAU,GAAG,SAC1E,KACA;CACA,MAAM,kBAAkB,YAAY;CAEpC,OACE,oBAACA,YAAgB,OAAjB;EACE,GAAI;EACJ,cAAY,cAAc,kBAAkB,KAAA,IAAY;EACnD;EACL,WAAW,oBACT,kBAAkB,OAAO,CAAC,CAAC,SAAS,OAAO,CAAC,CAAC,OAC7C,SACF;EACA,aAAW,YAAY;YAEtB,YAAY;CACQ,CAAA;AAE3B,CACF;AAIA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CACjE,OACE,oBAAC,kBAAD;EAAkB,GAAI;EAAY;EAAK,aAAU;EAC9C;CACe,CAAA;AAEtB,CACF;AAIA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,YAAY,GAAG,SAAS,KAAK;CACnE,OACE,oBAAC,kBAAD;EAAkB,GAAI;EAAY;EAAK,aAAU;EAC9C;CACe,CAAA;AAEtB,CACF;AAEA,MAAaC,gBAAc;CACzB,MAAMF;CACN,SAAS;CACT,QAAQ;CACR,UAAU;CACV,UAAU;CACV,OAAO;CACP,QAAQ;CACR,OAAO;CACP,aAAa;CACb,MAAM;CACN,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,cAAcC,YAAgB;AAChC"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialogRoot","BaseAlertDialog","AlertDialog"],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { AlertDialogRoot as BaseAlertDialogRoot } from \"@base-ui/react/alert-dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dialog } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport type { DialogSize } from \"../dialog\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/**\n * A modal confirmation primitive with Base UI's focus trap, Escape handling,\n * and accessible alert-dialog semantics.\n */\nexport type AlertDialogRootProps<Payload = unknown> = BaseAlertDialogRoot.Props<Payload>;\n\nexport function AlertDialogRoot<Payload = unknown>(props: AlertDialogRootProps<Payload>) {\n  return <BaseAlertDialog.Root {...props} />;\n}\n\nexport type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Trigger>;\n\nexport const AlertDialogTrigger = forwardRef<HTMLButtonElement, AlertDialogTriggerProps>(\n  function AlertDialogTrigger({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().trigger, className)}\n        data-slot=\"alert-dialog-trigger\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogPortalProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Portal>;\nexport function AlertDialogPortal(props: AlertDialogPortalProps) {\n  return <BaseAlertDialog.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type AlertDialogBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\n\nexport const AlertDialogBackdrop = forwardRef<HTMLDivElement, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().backdrop, className)}\n        data-slot=\"alert-dialog-backdrop\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogViewportProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Viewport>;\n\nexport const AlertDialogViewport = forwardRef<HTMLDivElement, AlertDialogViewportProps>(\n  function AlertDialogViewport({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().viewport, className)}\n        data-slot=\"alert-dialog-viewport\"\n      />\n    );\n  },\n);\n\nexport interface AlertDialogPopupProps\n  extends ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> {\n  size?: DialogSize;\n}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(\n  function AlertDialogPopup({ className, size = \"md\", ...props }, ref) {\n    return (\n      <BaseAlertDialog.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog({ size }).popup, className)}\n        data-jaci-component=\"alert-dialog\"\n        data-slot=\"alert-dialog-popup\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogHeader = forwardRef<HTMLDivElement, AlertDialogHeaderProps>(\n  function AlertDialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().header, className)}\n        data-slot=\"alert-dialog-header\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\n\nexport const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(\n  function AlertDialogTitle({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Title\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().title, className)}\n        data-slot=\"alert-dialog-title\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof BaseAlertDialog.Description\n>;\n\nexport const AlertDialogDescription = forwardRef<HTMLParagraphElement, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(dialog().description, className)}\n        data-slot=\"alert-dialog-description\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogBodyProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogBody = forwardRef<HTMLDivElement, AlertDialogBodyProps>(\n  function AlertDialogBody({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().body, className)}\n        data-slot=\"alert-dialog-body\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(\n  function AlertDialogFooter({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dialog().footer, className)}\n        data-slot=\"alert-dialog-footer\"\n      />\n    );\n  },\n);\n\nexport type AlertDialogCloseProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Close> & {\n  \"data-slot\"?: string;\n};\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(\n  function AlertDialogClose(\n    { \"aria-label\": ariaLabel, children, className, \"data-slot\": dataSlot, ...props },\n    ref,\n  ) {\n    const hasVisibleLabel = children != null;\n\n    return (\n      <BaseAlertDialog.Close\n        {...props}\n        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close alert dialog\")}\n        ref={ref}\n        className={withRecipeClassName(\n          hasVisibleLabel ? dialog().action : dialog().close,\n          className,\n        )}\n        data-slot={dataSlot ?? \"alert-dialog-close\"}\n      >\n        {children ?? \"×\"}\n      </BaseAlertDialog.Close>\n    );\n  },\n);\n\nexport type AlertDialogCancelProps = AlertDialogCloseProps;\n\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(\n  function AlertDialogCancel({ children = \"Cancel\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-cancel\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport type AlertDialogActionProps = AlertDialogCloseProps;\n\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(\n  function AlertDialogAction({ children = \"Continue\", ...props }, ref) {\n    return (\n      <AlertDialogClose {...props} ref={ref} data-slot=\"alert-dialog-action\">\n        {children}\n      </AlertDialogClose>\n    );\n  },\n);\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Header: AlertDialogHeader,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Body: AlertDialogBody,\n  Footer: AlertDialogFooter,\n  Close: AlertDialogClose,\n  Cancel: AlertDialogCancel,\n  Action: AlertDialogAction,\n  createHandle: BaseAlertDialog.createHandle,\n};\n"],"mappings":"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"}

package/dist/components/color-picker/color-picker.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_color_picker = require("../../styled-system/recipes/color-picker.cjs");
+const require_theme_scope = require("../../theme/theme-scope.cjs");
 const require_color_utils = require("./color-utils.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -102,7 +103,9 @@ const ColorPickerValue = (0, react.forwardRef)(function ColorPickerValue({ class
 		children: props.children ?? value
 	});
 });
-const ColorPickerPortal = _base_ui_react_popover.Popover.Portal;
+function ColorPickerPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const ColorPickerPositioner = (0, react.forwardRef)(function ColorPickerPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
 		...props,

package/dist/components/color-picker/color-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.cjs","names":["defaultColor","parseColor","formatColor","BasePopover","cx","colorPicker","withRecipeClassName"],"sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, PointerEvent, ReactNode } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { colorPicker } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { defaultColor, formatColor, parseColor } from \"./color-utils\";\nimport type { ColorFormat, ColorModel } from \"./color-utils\";\n\nexport type { ColorFormat, ColorModel } from \"./color-utils\";\nexport { defaultColor, formatColor, parseColor } from \"./color-utils\";\n\ninterface ColorPickerContextValue {\n  color: ColorModel;\n  disabled: boolean;\n  format: ColorFormat;\n  inputId: string;\n  setColor: (color: ColorModel) => void;\n  showAlpha: boolean;\n  swatches: string[];\n  value: string;\n}\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n\nfunction useColorPicker() {\n  const context = useContext(ColorPickerContext);\n  if (!context) throw new Error(\"ColorPicker parts must be rendered inside ColorPicker.Root.\");\n  return context;\n}\n\nexport interface ColorPickerRootProps extends Omit<BasePopoverRoot.Props, \"children\"> {\n  children?: ReactNode;\n  defaultValue?: string;\n  disabled?: boolean;\n  format?: ColorFormat;\n  id?: string;\n  name?: string;\n  onValueChange?: (value: string) => void;\n  showAlpha?: boolean;\n  swatches?: string[];\n  value?: string;\n}\n\nexport function ColorPickerRoot({\n  children,\n  defaultValue = \"#000000\",\n  disabled = false,\n  format = \"hex\",\n  id,\n  name,\n  onValueChange,\n  showAlpha = false,\n  swatches = [],\n  value: controlledValue,\n  ...popoverProps\n}: ColorPickerRootProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [uncontrolledColor, setUncontrolledColor] = useState<ColorModel>(() =>\n    defaultColor(defaultValue),\n  );\n  const parsedControlled = parseColor(controlledValue);\n  const color = parsedControlled ?? uncontrolledColor;\n  const formattedValue = formatColor(color, format, showAlpha);\n  const setColor = (nextColor: ColorModel) => {\n    setUncontrolledColor(nextColor);\n    onValueChange?.(formatColor(nextColor, format, showAlpha));\n  };\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        color,\n        disabled,\n        format,\n        inputId,\n        setColor,\n        showAlpha,\n        swatches,\n        value: formattedValue,\n      }}\n    >\n      <BasePopover.Root {...popoverProps}>\n        {children}\n        {name ? (\n          <input\n            aria-hidden=\"true\"\n            id={`${inputId}-value`}\n            name={name}\n            type=\"hidden\"\n            value={formattedValue}\n          />\n        ) : null}\n      </BasePopover.Root>\n    </ColorPickerContext.Provider>\n  );\n}\n\nexport interface ColorPickerLabelProps extends ComponentPropsWithoutRef<\"label\"> {}\nexport const ColorPickerLabel = forwardRef<HTMLLabelElement, ColorPickerLabelProps>(\n  function ColorPickerLabel({ children, className, htmlFor, ...props }, ref) {\n    const { inputId } = useColorPicker();\n    return (\n      <label\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().label, className)}\n        data-slot=\"color-picker-label\"\n        htmlFor={htmlFor ?? inputId}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type ColorPickerControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const ColorPickerControl = forwardRef<HTMLDivElement, ColorPickerControlProps>(\n  function ColorPickerControl({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().control, className)}\n        data-slot=\"color-picker-control\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\nexport const ColorPickerTrigger = forwardRef<HTMLButtonElement, ColorPickerTriggerProps>(\n  function ColorPickerTrigger({ className, disabled, ...props }, ref) {\n    const context = useColorPicker();\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().trigger, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-trigger\"\n        disabled={disabled ?? context.disabled}\n        id={props.id ?? context.inputId}\n      />\n    );\n  },\n);\n\nexport type ColorPickerPreviewProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerPreview = forwardRef<HTMLSpanElement, ColorPickerPreviewProps>(\n  function ColorPickerPreview({ className, style, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? value}\n        className={cx(colorPicker().preview, className)}\n        data-slot=\"color-picker-preview\"\n        role=\"img\"\n        style={{ backgroundColor: value, ...style }}\n      />\n    );\n  },\n);\n\nexport type ColorPickerValueProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerValue = forwardRef<HTMLSpanElement, ColorPickerValueProps>(\n  function ColorPickerValue({ className, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().value, className)}\n        data-slot=\"color-picker-value\"\n      >\n        {props.children ?? value}\n      </span>\n    );\n  },\n);\n\nexport const ColorPickerPortal: typeof BasePopover.Portal = BasePopover.Portal;\nexport type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\nexport const ColorPickerPositioner = forwardRef<HTMLDivElement, ColorPickerPositionerProps>(\n  function ColorPickerPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().positioner, className)}\n        data-slot=\"color-picker-positioner\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\nexport const ColorPickerPopup = forwardRef<HTMLDivElement, ColorPickerPopupProps>(\n  function ColorPickerPopup({ className, ...props }, ref) {\n    return (\n      <BasePopover.Popup\n        {...props}\n        aria-label={props[\"aria-label\"] ?? \"Color picker\"}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().popup, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-popup\"\n      />\n    );\n  },\n);\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction formatPalettePercentage(value: number) {\n  return `${Number(value.toFixed(2))}%`;\n}\n\nfunction hslToPalettePosition(color: ColorModel) {\n  const lightness = clamp(color.lightness / 100, 0, 1);\n  const saturation = clamp(color.saturation / 100, 0, 1);\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;\n  const value = lightness + chroma / 2;\n\n  return {\n    lightness: (1 - value) * 100,\n    saturation: value === 0 ? 0 : (chroma / value) * 100,\n  };\n}\n\nfunction palettePositionToHsl(\n  saturation: number,\n  lightness: number,\n  color: ColorModel,\n): ColorModel {\n  const hsvSaturation = clamp(saturation / 100, 0, 1);\n  const value = 1 - clamp(lightness / 100, 0, 1);\n  const hslLightness = value * (1 - hsvSaturation / 2);\n  const hslSaturation =\n    hslLightness === 0 || hslLightness === 1\n      ? 0\n      : ((value - hslLightness) / Math.min(hslLightness, 1 - hslLightness)) * 100;\n\n  return {\n    ...color,\n    lightness: hslLightness * 100,\n    saturation: clamp(hslSaturation, 0, 100),\n  };\n}\n\nfunction updateFromPoint(\n  event: PointerEvent<HTMLDivElement>,\n  setColor: (color: ColorModel) => void,\n  color: ColorModel,\n) {\n  const rect = event.currentTarget.getBoundingClientRect();\n  const saturation = Math.round(clamp((event.clientX - rect.left) / rect.width, 0, 1) * 100);\n  const lightness = Math.round(clamp((event.clientY - rect.top) / rect.height, 0, 1) * 100);\n  setColor(palettePositionToHsl(saturation, lightness, color));\n}\n\nexport type ColorPickerPaletteProps = Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">;\nexport const ColorPickerPalette = forwardRef<HTMLDivElement, ColorPickerPaletteProps>(\n  function ColorPickerPalette(\n    {\n      children,\n      className,\n      onKeyDown,\n      onPointerCancel,\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const { color, disabled, setColor, value } = useColorPicker();\n    const [isDragging, setIsDragging] = useState(false);\n    const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;\n    const palettePosition = hslToPalettePosition(color);\n    const paletteStyle = {\n      \"--jaci-color-palette-lightness\": formatPalettePercentage(palettePosition.lightness),\n      \"--jaci-color-palette-saturation\": formatPalettePercentage(palettePosition.saturation),\n      background,\n      ...style,\n    } as CSSProperties;\n\n    const releasePointer = (event: PointerEvent<HTMLDivElement>) => {\n      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n        event.currentTarget.releasePointerCapture(event.pointerId);\n      }\n      setIsDragging(false);\n    };\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-disabled={disabled || undefined}\n        aria-label={props[\"aria-label\"] ?? \"Color saturation and lightness\"}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(palettePosition.saturation)}\n        aria-valuetext={value}\n        className={cx(colorPicker().palette, className)}\n        data-disabled={disabled || undefined}\n        data-dragging={isDragging || undefined}\n        data-slot=\"color-picker-palette\"\n        onKeyDown={(event) => {\n          const step = event.shiftKey ? 10 : 1;\n          if (\n            event.key === \"ArrowLeft\" ||\n            event.key === \"ArrowRight\" ||\n            event.key === \"ArrowUp\" ||\n            event.key === \"ArrowDown\"\n          ) {\n            event.preventDefault();\n            const saturation =\n              event.key === \"ArrowLeft\"\n                ? Math.max(0, palettePosition.saturation - step)\n                : event.key === \"ArrowRight\"\n                  ? Math.min(100, palettePosition.saturation + step)\n                  : palettePosition.saturation;\n            const lightness =\n              event.key === \"ArrowDown\"\n                ? Math.min(100, palettePosition.lightness + step)\n                : event.key === \"ArrowUp\"\n                  ? Math.max(0, palettePosition.lightness - step)\n                  : palettePosition.lightness;\n            setColor(palettePositionToHsl(saturation, lightness, color));\n          }\n          onKeyDown?.(event);\n        }}\n        onPointerDown={(event) => {\n          if (!disabled) {\n            updateFromPoint(event, setColor, color);\n            setIsDragging(true);\n            try {\n              event.currentTarget.setPointerCapture(event.pointerId);\n            } catch {\n              // Pointer capture is not available in every test environment.\n            }\n          }\n          onPointerDown?.(event);\n        }}\n        onPointerMove={(event) => {\n          if (!disabled && isDragging) updateFromPoint(event, setColor, color);\n          onPointerMove?.(event);\n        }}\n        onPointerUp={(event) => {\n          releasePointer(event);\n          onPointerUp?.(event);\n        }}\n        onPointerCancel={(event) => {\n          releasePointer(event);\n          onPointerCancel?.(event);\n        }}\n        role=\"slider\"\n        style={paletteStyle}\n        tabIndex={props.tabIndex ?? (disabled ? -1 : 0)}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={colorPicker().paletteIndicator}\n          data-slot=\"color-picker-palette-indicator\"\n        />\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ColorPickerHueProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerHue = forwardRef<HTMLInputElement, ColorPickerHueProps>(\n  function ColorPickerHue({ className, onInput, ...props }, ref) {\n    const { color, setColor } = useColorPicker();\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Hue\"}\n        className={cx(colorPicker().hue, className)}\n        data-slot=\"color-picker-hue\"\n        max={360}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, hue: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={1}\n        type=\"range\"\n        value={color.hue}\n      />\n    );\n  },\n);\n\nexport type ColorPickerAlphaProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerAlpha = forwardRef<HTMLInputElement, ColorPickerAlphaProps>(\n  function ColorPickerAlpha({ className, onInput, style, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    if (!showAlpha) return null;\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Opacity\"}\n        className={cx(colorPicker().alpha, className)}\n        data-slot=\"color-picker-alpha\"\n        max={1}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, alpha: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={0.01}\n        style={{\n          ...style,\n          background: `linear-gradient(to right, transparent, ${formatColor({ ...color, alpha: 1 }, \"rgb\")})`,\n        }}\n        type=\"range\"\n        value={color.alpha}\n      />\n    );\n  },\n);\n\nexport type ColorPickerSwatchesProps = ComponentPropsWithoutRef<\"fieldset\">;\nexport const ColorPickerSwatches = forwardRef<HTMLFieldSetElement, ColorPickerSwatchesProps>(\n  function ColorPickerSwatches({ children, className, ...props }, ref) {\n    const { swatches } = useColorPicker();\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().swatches, className)}\n        data-slot=\"color-picker-swatches\"\n      >\n        {children ?? swatches.map((color) => <ColorPickerSwatch color={color} key={color} />)}\n      </fieldset>\n    );\n  },\n);\n\nexport interface ColorPickerSwatchProps extends ComponentPropsWithoutRef<\"button\"> {\n  color: string;\n}\nexport const ColorPickerSwatch = forwardRef<HTMLButtonElement, ColorPickerSwatchProps>(\n  function ColorPickerSwatch({ children, className, color, style, ...props }, ref) {\n    const context = useColorPicker();\n    const parsed = parseColor(color);\n    const selected =\n      parsed && formatColor(parsed, context.format, context.showAlpha) === context.value;\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? color}\n        aria-pressed={selected || undefined}\n        className={cx(colorPicker().swatch, className)}\n        data-selected={selected || undefined}\n        data-slot=\"color-picker-swatch\"\n        onClick={(event) => {\n          if (parsed) context.setColor(parsed);\n          props.onClick?.(event);\n        }}\n        style={{ backgroundColor: color, ...style }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nexport type ColorPickerInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(\n  function ColorPickerInput({ className, onBlur, onKeyDown, ...props }, ref) {\n    const { format, setColor, showAlpha, value } = useColorPicker();\n    const [draft, setDraft] = useState(value);\n    const [invalid, setInvalid] = useState(false);\n    useEffect(() => setDraft(value), [value]);\n    const commit = () => {\n      const parsed = parseColor(draft);\n      if (!parsed) {\n        setInvalid(true);\n        setDraft(value);\n        return;\n      }\n      setInvalid(false);\n      setColor(parsed);\n      setDraft(formatColor(parsed, format, showAlpha));\n    };\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color value\"}\n        aria-invalid={invalid || undefined}\n        className={cx(colorPicker().input, className)}\n        data-slot=\"color-picker-input\"\n        onBlur={(event) => {\n          commit();\n          onBlur?.(event);\n        }}\n        onChange={(event) => {\n          setDraft(event.currentTarget.value);\n          setInvalid(false);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commit();\n          }\n          onKeyDown?.(event);\n        }}\n        type=\"text\"\n        value={draft}\n      />\n    );\n  },\n);\n\nexport type ColorPickerNativeInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerNativeInput = forwardRef<HTMLInputElement, ColorPickerNativeInputProps>(\n  function ColorPickerNativeInput({ className, onInput, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    const value = formatColor({ ...color, alpha: 1 }, \"hex\");\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Choose a color\"}\n        className={cx(colorPicker().nativeInput, className)}\n        data-slot=\"color-picker-native-input\"\n        onInput={(event) => {\n          const parsed = parseColor(event.currentTarget.value);\n          if (parsed) setColor({ ...parsed, alpha: showAlpha ? color.alpha : 1 });\n          onInput?.(event);\n        }}\n        type=\"color\"\n        value={value.slice(0, 7)}\n      />\n    );\n  },\n);\n\nexport const ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Trigger: ColorPickerTrigger,\n  Preview: ColorPickerPreview,\n  Value: ColorPickerValue,\n  Portal: ColorPickerPortal,\n  Positioner: ColorPickerPositioner,\n  Popup: ColorPickerPopup,\n  Palette: ColorPickerPalette,\n  Hue: ColorPickerHue,\n  Alpha: ColorPickerAlpha,\n  Swatches: ColorPickerSwatches,\n  Swatch: ColorPickerSwatch,\n  Input: ColorPickerInput,\n  NativeInput: ColorPickerNativeInput,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"color-picker.cjs","names":["defaultColor","parseColor","formatColor","BasePopover","cx","colorPicker","withRecipeClassName","useThemePortalProps"],"sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { createContext, forwardRef, useContext, useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, PointerEvent, ReactNode } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { colorPicker } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\nimport { defaultColor, formatColor, parseColor } from \"./color-utils\";\nimport type { ColorFormat, ColorModel } from \"./color-utils\";\n\nexport type { ColorFormat, ColorModel } from \"./color-utils\";\nexport { defaultColor, formatColor, parseColor } from \"./color-utils\";\n\ninterface ColorPickerContextValue {\n  color: ColorModel;\n  disabled: boolean;\n  format: ColorFormat;\n  inputId: string;\n  setColor: (color: ColorModel) => void;\n  showAlpha: boolean;\n  swatches: string[];\n  value: string;\n}\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n\nfunction useColorPicker() {\n  const context = useContext(ColorPickerContext);\n  if (!context) throw new Error(\"ColorPicker parts must be rendered inside ColorPicker.Root.\");\n  return context;\n}\n\nexport interface ColorPickerRootProps extends Omit<BasePopoverRoot.Props, \"children\"> {\n  children?: ReactNode;\n  defaultValue?: string;\n  disabled?: boolean;\n  format?: ColorFormat;\n  id?: string;\n  name?: string;\n  onValueChange?: (value: string) => void;\n  showAlpha?: boolean;\n  swatches?: string[];\n  value?: string;\n}\n\nexport function ColorPickerRoot({\n  children,\n  defaultValue = \"#000000\",\n  disabled = false,\n  format = \"hex\",\n  id,\n  name,\n  onValueChange,\n  showAlpha = false,\n  swatches = [],\n  value: controlledValue,\n  ...popoverProps\n}: ColorPickerRootProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [uncontrolledColor, setUncontrolledColor] = useState<ColorModel>(() =>\n    defaultColor(defaultValue),\n  );\n  const parsedControlled = parseColor(controlledValue);\n  const color = parsedControlled ?? uncontrolledColor;\n  const formattedValue = formatColor(color, format, showAlpha);\n  const setColor = (nextColor: ColorModel) => {\n    setUncontrolledColor(nextColor);\n    onValueChange?.(formatColor(nextColor, format, showAlpha));\n  };\n\n  return (\n    <ColorPickerContext.Provider\n      value={{\n        color,\n        disabled,\n        format,\n        inputId,\n        setColor,\n        showAlpha,\n        swatches,\n        value: formattedValue,\n      }}\n    >\n      <BasePopover.Root {...popoverProps}>\n        {children}\n        {name ? (\n          <input\n            aria-hidden=\"true\"\n            id={`${inputId}-value`}\n            name={name}\n            type=\"hidden\"\n            value={formattedValue}\n          />\n        ) : null}\n      </BasePopover.Root>\n    </ColorPickerContext.Provider>\n  );\n}\n\nexport interface ColorPickerLabelProps extends ComponentPropsWithoutRef<\"label\"> {}\nexport const ColorPickerLabel = forwardRef<HTMLLabelElement, ColorPickerLabelProps>(\n  function ColorPickerLabel({ children, className, htmlFor, ...props }, ref) {\n    const { inputId } = useColorPicker();\n    return (\n      <label\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().label, className)}\n        data-slot=\"color-picker-label\"\n        htmlFor={htmlFor ?? inputId}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type ColorPickerControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const ColorPickerControl = forwardRef<HTMLDivElement, ColorPickerControlProps>(\n  function ColorPickerControl({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().control, className)}\n        data-slot=\"color-picker-control\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\nexport const ColorPickerTrigger = forwardRef<HTMLButtonElement, ColorPickerTriggerProps>(\n  function ColorPickerTrigger({ className, disabled, ...props }, ref) {\n    const context = useColorPicker();\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().trigger, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-trigger\"\n        disabled={disabled ?? context.disabled}\n        id={props.id ?? context.inputId}\n      />\n    );\n  },\n);\n\nexport type ColorPickerPreviewProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerPreview = forwardRef<HTMLSpanElement, ColorPickerPreviewProps>(\n  function ColorPickerPreview({ className, style, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? value}\n        className={cx(colorPicker().preview, className)}\n        data-slot=\"color-picker-preview\"\n        role=\"img\"\n        style={{ backgroundColor: value, ...style }}\n      />\n    );\n  },\n);\n\nexport type ColorPickerValueProps = ComponentPropsWithoutRef<\"span\">;\nexport const ColorPickerValue = forwardRef<HTMLSpanElement, ColorPickerValueProps>(\n  function ColorPickerValue({ className, ...props }, ref) {\n    const { value } = useColorPicker();\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().value, className)}\n        data-slot=\"color-picker-value\"\n      >\n        {props.children ?? value}\n      </span>\n    );\n  },\n);\n\nexport function ColorPickerPortal(props: ComponentPropsWithoutRef<typeof BasePopover.Portal>) {\n  return <BasePopover.Portal {...useThemePortalProps(props)} />;\n}\nexport type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\nexport const ColorPickerPositioner = forwardRef<HTMLDivElement, ColorPickerPositionerProps>(\n  function ColorPickerPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().positioner, className)}\n        data-slot=\"color-picker-positioner\"\n      />\n    );\n  },\n);\n\nexport type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\nexport const ColorPickerPopup = forwardRef<HTMLDivElement, ColorPickerPopupProps>(\n  function ColorPickerPopup({ className, ...props }, ref) {\n    return (\n      <BasePopover.Popup\n        {...props}\n        aria-label={props[\"aria-label\"] ?? \"Color picker\"}\n        ref={ref}\n        className={withRecipeClassName(colorPicker().popup, className)}\n        data-jaci-component=\"color-picker\"\n        data-slot=\"color-picker-popup\"\n      />\n    );\n  },\n);\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction formatPalettePercentage(value: number) {\n  return `${Number(value.toFixed(2))}%`;\n}\n\nfunction hslToPalettePosition(color: ColorModel) {\n  const lightness = clamp(color.lightness / 100, 0, 1);\n  const saturation = clamp(color.saturation / 100, 0, 1);\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;\n  const value = lightness + chroma / 2;\n\n  return {\n    lightness: (1 - value) * 100,\n    saturation: value === 0 ? 0 : (chroma / value) * 100,\n  };\n}\n\nfunction palettePositionToHsl(\n  saturation: number,\n  lightness: number,\n  color: ColorModel,\n): ColorModel {\n  const hsvSaturation = clamp(saturation / 100, 0, 1);\n  const value = 1 - clamp(lightness / 100, 0, 1);\n  const hslLightness = value * (1 - hsvSaturation / 2);\n  const hslSaturation =\n    hslLightness === 0 || hslLightness === 1\n      ? 0\n      : ((value - hslLightness) / Math.min(hslLightness, 1 - hslLightness)) * 100;\n\n  return {\n    ...color,\n    lightness: hslLightness * 100,\n    saturation: clamp(hslSaturation, 0, 100),\n  };\n}\n\nfunction updateFromPoint(\n  event: PointerEvent<HTMLDivElement>,\n  setColor: (color: ColorModel) => void,\n  color: ColorModel,\n) {\n  const rect = event.currentTarget.getBoundingClientRect();\n  const saturation = Math.round(clamp((event.clientX - rect.left) / rect.width, 0, 1) * 100);\n  const lightness = Math.round(clamp((event.clientY - rect.top) / rect.height, 0, 1) * 100);\n  setColor(palettePositionToHsl(saturation, lightness, color));\n}\n\nexport type ColorPickerPaletteProps = Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">;\nexport const ColorPickerPalette = forwardRef<HTMLDivElement, ColorPickerPaletteProps>(\n  function ColorPickerPalette(\n    {\n      children,\n      className,\n      onKeyDown,\n      onPointerCancel,\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const { color, disabled, setColor, value } = useColorPicker();\n    const [isDragging, setIsDragging] = useState(false);\n    const background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.hue} 100% 50%))`;\n    const palettePosition = hslToPalettePosition(color);\n    const paletteStyle = {\n      \"--jaci-color-palette-lightness\": formatPalettePercentage(palettePosition.lightness),\n      \"--jaci-color-palette-saturation\": formatPalettePercentage(palettePosition.saturation),\n      background,\n      ...style,\n    } as CSSProperties;\n\n    const releasePointer = (event: PointerEvent<HTMLDivElement>) => {\n      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n        event.currentTarget.releasePointerCapture(event.pointerId);\n      }\n      setIsDragging(false);\n    };\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-disabled={disabled || undefined}\n        aria-label={props[\"aria-label\"] ?? \"Color saturation and lightness\"}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(palettePosition.saturation)}\n        aria-valuetext={value}\n        className={cx(colorPicker().palette, className)}\n        data-disabled={disabled || undefined}\n        data-dragging={isDragging || undefined}\n        data-slot=\"color-picker-palette\"\n        onKeyDown={(event) => {\n          const step = event.shiftKey ? 10 : 1;\n          if (\n            event.key === \"ArrowLeft\" ||\n            event.key === \"ArrowRight\" ||\n            event.key === \"ArrowUp\" ||\n            event.key === \"ArrowDown\"\n          ) {\n            event.preventDefault();\n            const saturation =\n              event.key === \"ArrowLeft\"\n                ? Math.max(0, palettePosition.saturation - step)\n                : event.key === \"ArrowRight\"\n                  ? Math.min(100, palettePosition.saturation + step)\n                  : palettePosition.saturation;\n            const lightness =\n              event.key === \"ArrowDown\"\n                ? Math.min(100, palettePosition.lightness + step)\n                : event.key === \"ArrowUp\"\n                  ? Math.max(0, palettePosition.lightness - step)\n                  : palettePosition.lightness;\n            setColor(palettePositionToHsl(saturation, lightness, color));\n          }\n          onKeyDown?.(event);\n        }}\n        onPointerDown={(event) => {\n          if (!disabled) {\n            updateFromPoint(event, setColor, color);\n            setIsDragging(true);\n            try {\n              event.currentTarget.setPointerCapture(event.pointerId);\n            } catch {\n              // Pointer capture is not available in every test environment.\n            }\n          }\n          onPointerDown?.(event);\n        }}\n        onPointerMove={(event) => {\n          if (!disabled && isDragging) updateFromPoint(event, setColor, color);\n          onPointerMove?.(event);\n        }}\n        onPointerUp={(event) => {\n          releasePointer(event);\n          onPointerUp?.(event);\n        }}\n        onPointerCancel={(event) => {\n          releasePointer(event);\n          onPointerCancel?.(event);\n        }}\n        role=\"slider\"\n        style={paletteStyle}\n        tabIndex={props.tabIndex ?? (disabled ? -1 : 0)}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={colorPicker().paletteIndicator}\n          data-slot=\"color-picker-palette-indicator\"\n        />\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ColorPickerHueProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerHue = forwardRef<HTMLInputElement, ColorPickerHueProps>(\n  function ColorPickerHue({ className, onInput, ...props }, ref) {\n    const { color, setColor } = useColorPicker();\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Hue\"}\n        className={cx(colorPicker().hue, className)}\n        data-slot=\"color-picker-hue\"\n        max={360}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, hue: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={1}\n        type=\"range\"\n        value={color.hue}\n      />\n    );\n  },\n);\n\nexport type ColorPickerAlphaProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"max\" | \"min\" | \"onChange\" | \"step\" | \"type\" | \"value\"\n>;\nexport const ColorPickerAlpha = forwardRef<HTMLInputElement, ColorPickerAlphaProps>(\n  function ColorPickerAlpha({ className, onInput, style, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    if (!showAlpha) return null;\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Opacity\"}\n        className={cx(colorPicker().alpha, className)}\n        data-slot=\"color-picker-alpha\"\n        max={1}\n        min={0}\n        onInput={(event) => {\n          setColor({ ...color, alpha: Number(event.currentTarget.value) });\n          onInput?.(event);\n        }}\n        step={0.01}\n        style={{\n          ...style,\n          background: `linear-gradient(to right, transparent, ${formatColor({ ...color, alpha: 1 }, \"rgb\")})`,\n        }}\n        type=\"range\"\n        value={color.alpha}\n      />\n    );\n  },\n);\n\nexport type ColorPickerSwatchesProps = ComponentPropsWithoutRef<\"fieldset\">;\nexport const ColorPickerSwatches = forwardRef<HTMLFieldSetElement, ColorPickerSwatchesProps>(\n  function ColorPickerSwatches({ children, className, ...props }, ref) {\n    const { swatches } = useColorPicker();\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        className={cx(colorPicker().swatches, className)}\n        data-slot=\"color-picker-swatches\"\n      >\n        {children ?? swatches.map((color) => <ColorPickerSwatch color={color} key={color} />)}\n      </fieldset>\n    );\n  },\n);\n\nexport interface ColorPickerSwatchProps extends ComponentPropsWithoutRef<\"button\"> {\n  color: string;\n}\nexport const ColorPickerSwatch = forwardRef<HTMLButtonElement, ColorPickerSwatchProps>(\n  function ColorPickerSwatch({ children, className, color, style, ...props }, ref) {\n    const context = useColorPicker();\n    const parsed = parseColor(color);\n    const selected =\n      parsed && formatColor(parsed, context.format, context.showAlpha) === context.value;\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? color}\n        aria-pressed={selected || undefined}\n        className={cx(colorPicker().swatch, className)}\n        data-selected={selected || undefined}\n        data-slot=\"color-picker-swatch\"\n        onClick={(event) => {\n          if (parsed) context.setColor(parsed);\n          props.onClick?.(event);\n        }}\n        style={{ backgroundColor: color, ...style }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nexport type ColorPickerInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(\n  function ColorPickerInput({ className, onBlur, onKeyDown, ...props }, ref) {\n    const { format, setColor, showAlpha, value } = useColorPicker();\n    const [draft, setDraft] = useState(value);\n    const [invalid, setInvalid] = useState(false);\n    useEffect(() => setDraft(value), [value]);\n    const commit = () => {\n      const parsed = parseColor(draft);\n      if (!parsed) {\n        setInvalid(true);\n        setDraft(value);\n        return;\n      }\n      setInvalid(false);\n      setColor(parsed);\n      setDraft(formatColor(parsed, format, showAlpha));\n    };\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Color value\"}\n        aria-invalid={invalid || undefined}\n        className={cx(colorPicker().input, className)}\n        data-slot=\"color-picker-input\"\n        onBlur={(event) => {\n          commit();\n          onBlur?.(event);\n        }}\n        onChange={(event) => {\n          setDraft(event.currentTarget.value);\n          setInvalid(false);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commit();\n          }\n          onKeyDown?.(event);\n        }}\n        type=\"text\"\n        value={draft}\n      />\n    );\n  },\n);\n\nexport type ColorPickerNativeInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"onChange\" | \"type\" | \"value\"\n>;\nexport const ColorPickerNativeInput = forwardRef<HTMLInputElement, ColorPickerNativeInputProps>(\n  function ColorPickerNativeInput({ className, onInput, ...props }, ref) {\n    const { color, setColor, showAlpha } = useColorPicker();\n    const value = formatColor({ ...color, alpha: 1 }, \"hex\");\n    return (\n      <input\n        {...props}\n        ref={ref}\n        aria-label={props[\"aria-label\"] ?? \"Choose a color\"}\n        className={cx(colorPicker().nativeInput, className)}\n        data-slot=\"color-picker-native-input\"\n        onInput={(event) => {\n          const parsed = parseColor(event.currentTarget.value);\n          if (parsed) setColor({ ...parsed, alpha: showAlpha ? color.alpha : 1 });\n          onInput?.(event);\n        }}\n        type=\"color\"\n        value={value.slice(0, 7)}\n      />\n    );\n  },\n);\n\nexport const ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Trigger: ColorPickerTrigger,\n  Preview: ColorPickerPreview,\n  Value: ColorPickerValue,\n  Portal: ColorPickerPortal,\n  Positioner: ColorPickerPositioner,\n  Popup: ColorPickerPopup,\n  Palette: ColorPickerPalette,\n  Hue: ColorPickerHue,\n  Alpha: ColorPickerAlpha,\n  Swatches: ColorPickerSwatches,\n  Swatch: ColorPickerSwatch,\n  Input: ColorPickerInput,\n  NativeInput: ColorPickerNativeInput,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":"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"}

package/dist/components/color-picker/color-picker.d.cts

@@ -37,7 +37,7 @@ type ColorPickerPreviewProps = ComponentPropsWithoutRef<"span">;
 declare const ColorPickerPreview: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 type ColorPickerValueProps = ComponentPropsWithoutRef<"span">;
 declare const ColorPickerValue: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-declare const ColorPickerPortal: typeof Popover.Portal;
+declare function ColorPickerPortal(props: ComponentPropsWithoutRef<typeof Popover.Portal>): import("react").JSX.Element;
 type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
 declare const ColorPickerPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
@@ -77,7 +77,7 @@ declare const ColorPicker: {
   } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Preview: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Value: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof ColorPickerPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Palette: import("react").ForwardRefExoticComponent<ColorPickerPaletteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker.d.ts

@@ -37,7 +37,7 @@ type ColorPickerPreviewProps = ComponentPropsWithoutRef<"span">;
 declare const ColorPickerPreview: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 type ColorPickerValueProps = ComponentPropsWithoutRef<"span">;
 declare const ColorPickerValue: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-declare const ColorPickerPortal: typeof Popover.Portal;
+declare function ColorPickerPortal(props: ComponentPropsWithoutRef<typeof Popover.Portal>): import("react").JSX.Element;
 type ColorPickerPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
 declare const ColorPickerPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type ColorPickerPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
@@ -77,7 +77,7 @@ declare const ColorPicker: {
   } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Preview: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Value: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof ColorPickerPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Palette: import("react").ForwardRefExoticComponent<ColorPickerPaletteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker.js

@@ -2,6 +2,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { colorPicker } from "../../styled-system/recipes/color-picker.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { defaultColor, formatColor, parseColor } from "./color-utils.js";
 import { createContext, forwardRef, useContext, useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -102,7 +103,9 @@ const ColorPickerValue = forwardRef(function ColorPickerValue({ className, ...pr
 		children: props.children ?? value
 	});
 });
-const ColorPickerPortal = Popover.Portal;
+function ColorPickerPortal(props) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { ...useThemePortalProps(props) });
+}
 const ColorPickerPositioner = forwardRef(function ColorPickerPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		...props,