jaci-ui 0.7.0 → 0.8.0

package/dist/components/sidebar/sidebar.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_sidebar = require("../../styled-system/recipes/sidebar.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");
@@ -45,6 +46,7 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 		toggle
 	]);
 	const styles = require_sidebar.sidebar({ open });
+	const scopedPortalProps = require_theme_scope.useThemePortalProps({});
 	const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 		...props,
 		ref,
@@ -67,23 +69,26 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 				}
 				setOpen(nextOpen);
 			},
-			children: /* @__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: require_cx.cx(styles.backdrop),
-				"data-jaci-component": "sidebar",
-				"data-slot": "sidebar-backdrop"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
-				className: require_cx.cx(styles.viewport),
-				"data-slot": "sidebar-viewport",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
-					"aria-label": props["aria-label"] ?? "Sidebar navigation",
-					className: require_cx.cx(styles.popup),
+			children: /* @__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: require_cx.cx(styles.backdrop),
 					"data-jaci-component": "sidebar",
-					"data-slot": "sidebar-popup",
-					finalFocus: restoreFocus,
-					initialFocus: true,
-					children: surface
-				})
-			})] })
+					"data-slot": "sidebar-backdrop"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+					className: require_cx.cx(styles.viewport),
+					"data-slot": "sidebar-viewport",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+						"aria-label": props["aria-label"] ?? "Sidebar navigation",
+						className: require_cx.cx(styles.popup),
+						"data-jaci-component": "sidebar",
+						"data-slot": "sidebar-popup",
+						finalFocus: restoreFocus,
+						initialFocus: true,
+						children: surface
+					})
+				})]
+			})
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContext.Provider, {
@@ -91,7 +96,9 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 		children: surface
 	});
 });
-const SidebarPortal = _base_ui_react_dialog.Dialog.Portal;
+function SidebarPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const SidebarBackdrop = (0, react.forwardRef)(function SidebarBackdrop({ className, ...props }, ref) {
 	const { open } = useSidebar();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {

package/dist/components/sidebar/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","names":["sidebar","cx","BaseDialog","withRecipeClassName"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport const SidebarPortal: typeof BaseDialog.Portal = BaseDialog.Portal;\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.cjs","names":["sidebar","useThemePortalProps","cx","BaseDialog","withRecipeClassName"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n  const scopedPortalProps = useThemePortalProps({});\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal {...scopedPortalProps}>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport function SidebarPortal(props: SidebarPortalProps) {\n  return <BaseDialog.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}

package/dist/components/sidebar/sidebar.d.cts

@@ -38,6 +38,8 @@ interface SidebarRootProps extends ComponentPropsWithoutRef<"aside"> {
  * The sidebar container. It supports both controlled and uncontrolled state.
  */
 declare const SidebarRoot: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
+type SidebarPortalProps = ComponentPropsWithoutRef<typeof Dialog.Portal>;
+declare function SidebarPortal(props: SidebarPortalProps): import("react").JSX.Element;
 type SidebarToggleProps = ComponentPropsWithoutRef<"button">;
 /**
  * A floating, accessible control that expands or collapses the sidebar.
@@ -63,7 +65,7 @@ type SidebarLabelProps = ComponentPropsWithoutRef<"span">;
 declare const SidebarLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const Sidebar: {
   Root: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof SidebarPortal;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -73,5 +75,5 @@ declare const Sidebar: {
   Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
+export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarPortal, SidebarPortalProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
 //# sourceMappingURL=sidebar.d.cts.map

package/dist/components/sidebar/sidebar.d.ts

@@ -38,6 +38,8 @@ interface SidebarRootProps extends ComponentPropsWithoutRef<"aside"> {
  * The sidebar container. It supports both controlled and uncontrolled state.
  */
 declare const SidebarRoot: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
+type SidebarPortalProps = ComponentPropsWithoutRef<typeof Dialog.Portal>;
+declare function SidebarPortal(props: SidebarPortalProps): import("react").JSX.Element;
 type SidebarToggleProps = ComponentPropsWithoutRef<"button">;
 /**
  * A floating, accessible control that expands or collapses the sidebar.
@@ -63,7 +65,7 @@ type SidebarLabelProps = ComponentPropsWithoutRef<"span">;
 declare const SidebarLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const Sidebar: {
   Root: import("react").ForwardRefExoticComponent<SidebarRootProps & import("react").RefAttributes<HTMLElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof SidebarPortal;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -73,5 +75,5 @@ declare const Sidebar: {
   Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
+export { Sidebar, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemProps, SidebarLabel, SidebarLabelProps, SidebarPortal, SidebarPortalProps, SidebarRoot, SidebarRootProps, SidebarToggle, SidebarToggleProps, useSidebar };
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/components/sidebar/sidebar.js

@@ -2,6 +2,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { sidebar } from "../../styled-system/recipes/sidebar.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
@@ -45,6 +46,7 @@ const SidebarRoot = forwardRef(function SidebarRoot({ children, className, close
 		toggle
 	]);
 	const styles = sidebar({ open });
+	const scopedPortalProps = useThemePortalProps({});
 	const surface = /* @__PURE__ */ jsx("aside", {
 		...props,
 		ref,
@@ -67,23 +69,26 @@ const SidebarRoot = forwardRef(function SidebarRoot({ children, className, close
 				}
 				setOpen(nextOpen);
 			},
-			children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
-				className: cx(styles.backdrop),
-				"data-jaci-component": "sidebar",
-				"data-slot": "sidebar-backdrop"
-			}), /* @__PURE__ */ jsx(Dialog.Viewport, {
-				className: cx(styles.viewport),
-				"data-slot": "sidebar-viewport",
-				children: /* @__PURE__ */ jsx(Dialog.Popup, {
-					"aria-label": props["aria-label"] ?? "Sidebar navigation",
-					className: cx(styles.popup),
+			children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+				...scopedPortalProps,
+				children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+					className: cx(styles.backdrop),
 					"data-jaci-component": "sidebar",
-					"data-slot": "sidebar-popup",
-					finalFocus: restoreFocus,
-					initialFocus: true,
-					children: surface
-				})
-			})] })
+					"data-slot": "sidebar-backdrop"
+				}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+					className: cx(styles.viewport),
+					"data-slot": "sidebar-viewport",
+					children: /* @__PURE__ */ jsx(Dialog.Popup, {
+						"aria-label": props["aria-label"] ?? "Sidebar navigation",
+						className: cx(styles.popup),
+						"data-jaci-component": "sidebar",
+						"data-slot": "sidebar-popup",
+						finalFocus: restoreFocus,
+						initialFocus: true,
+						children: surface
+					})
+				})]
+			})
 		})
 	});
 	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
@@ -91,7 +96,9 @@ const SidebarRoot = forwardRef(function SidebarRoot({ children, className, close
 		children: surface
 	});
 });
-const SidebarPortal = Dialog.Portal;
+function SidebarPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { ...useThemePortalProps(props) });
+}
 const SidebarBackdrop = forwardRef(function SidebarBackdrop({ className, ...props }, ref) {
 	const { open } = useSidebar();
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {

package/dist/components/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":["BaseDialog"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport const SidebarPortal: typeof BaseDialog.Portal = BaseDialog.Portal;\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":["BaseDialog"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n  const scopedPortalProps = useThemePortalProps({});\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal {...scopedPortalProps}>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport function SidebarPortal(props: SidebarPortalProps) {\n  return <BaseDialog.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}

package/dist/components/toast/toast.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_toast = require("../../styled-system/recipes/toast.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_toast = require("@base-ui/react/toast");
@@ -107,7 +108,9 @@ const ToastAction = (0, react.forwardRef)(function ToastAction({ className, ...p
 	});
 });
 /** Base UI's portal is preserved for rendering the viewport at document level. */
-const ToastPortal = _base_ui_react_toast.Toast.Portal;
+function ToastPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const Toast = {
 	Provider: ToastProvider,
 	Viewport: ToastViewport,

package/dist/components/toast/toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.cjs","names":["BaseToast","withRecipeClassName","toastRecipe","cx"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n  danger: \"danger\",\n  error: \"danger\",\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n  return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n  return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n  { \"aria-label\": ariaLabel, \"aria-live\": ariaLive, className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Viewport\n      {...props}\n      aria-label={ariaLabel ?? \"Notifications\"}\n      aria-live={ariaLive ?? \"polite\"}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().viewport, className)}\n      data-jaci-component=\"toast-viewport\"\n      data-slot=\"toast-viewport\"\n    />\n  );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n  /**\n   * Visual status. When omitted, the value is inferred from the toast's\n   * `type` (`error` maps to `danger`) and otherwise remains neutral.\n   */\n  tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n  { className, toast: toastObject, tone, ...props },\n  ref,\n) {\n  const resolvedTone = resolveTone(toastObject.type, tone);\n\n  return (\n    <BaseToast.Root\n      {...props}\n      ref={ref}\n      toast={toastObject}\n      className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n      data-jaci-component=\"toast\"\n      data-jaci-tone={resolvedTone}\n      data-slot=\"toast\"\n    />\n  );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Content\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().content, className)}\n      data-slot=\"toast-content\"\n    />\n  );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(toastRecipe().text, className)}\n      data-slot=\"toast-text\"\n    />\n  );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().title, className)}\n      data-slot=\"toast-title\"\n    />\n  );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n  function ToastDescription({ className, ...props }, ref) {\n    return (\n      <BaseToast.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(toastRecipe().description, className)}\n        data-slot=\"toast-description\"\n      />\n    );\n  },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseToast.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().close, className)}\n      data-slot=\"toast-close\"\n    >\n      {children ?? \"×\"}\n    </BaseToast.Close>\n  );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Action\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().action, className)}\n      data-slot=\"toast-action\"\n    />\n  );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n  Provider: typeof ToastProvider;\n  Viewport: typeof ToastViewport;\n  Root: typeof ToastRoot;\n  Content: typeof ToastContent;\n  Text: typeof ToastText;\n  Title: typeof ToastTitle;\n  Description: typeof ToastDescription;\n  Close: typeof ToastClose;\n  Action: typeof ToastAction;\n  Portal: typeof ToastPortal;\n  useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n  Provider: ToastProvider,\n  Viewport: ToastViewport,\n  Root: ToastRoot,\n  Content: ToastContent,\n  Text: ToastText,\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Close: ToastClose,\n  Action: ToastAction,\n  Portal: ToastPortal,\n  useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
+{"version":3,"file":"toast.cjs","names":["BaseToast","withRecipeClassName","toastRecipe","cx","useThemePortalProps"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n  danger: \"danger\",\n  error: \"danger\",\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n  return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n  return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n  { \"aria-label\": ariaLabel, \"aria-live\": ariaLive, className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Viewport\n      {...props}\n      aria-label={ariaLabel ?? \"Notifications\"}\n      aria-live={ariaLive ?? \"polite\"}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().viewport, className)}\n      data-jaci-component=\"toast-viewport\"\n      data-slot=\"toast-viewport\"\n    />\n  );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n  /**\n   * Visual status. When omitted, the value is inferred from the toast's\n   * `type` (`error` maps to `danger`) and otherwise remains neutral.\n   */\n  tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n  { className, toast: toastObject, tone, ...props },\n  ref,\n) {\n  const resolvedTone = resolveTone(toastObject.type, tone);\n\n  return (\n    <BaseToast.Root\n      {...props}\n      ref={ref}\n      toast={toastObject}\n      className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n      data-jaci-component=\"toast\"\n      data-jaci-tone={resolvedTone}\n      data-slot=\"toast\"\n    />\n  );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Content\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().content, className)}\n      data-slot=\"toast-content\"\n    />\n  );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(toastRecipe().text, className)}\n      data-slot=\"toast-text\"\n    />\n  );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().title, className)}\n      data-slot=\"toast-title\"\n    />\n  );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n  function ToastDescription({ className, ...props }, ref) {\n    return (\n      <BaseToast.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(toastRecipe().description, className)}\n        data-slot=\"toast-description\"\n      />\n    );\n  },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseToast.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().close, className)}\n      data-slot=\"toast-close\"\n    >\n      {children ?? \"×\"}\n    </BaseToast.Close>\n  );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Action\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().action, className)}\n      data-slot=\"toast-action\"\n    />\n  );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport function ToastPortal(props: ComponentPropsWithoutRef<typeof BaseToast.Portal>) {\n  return <BaseToast.Portal {...useThemePortalProps(props)} />;\n}\n\nexport interface ToastComponent {\n  Provider: typeof ToastProvider;\n  Viewport: typeof ToastViewport;\n  Root: typeof ToastRoot;\n  Content: typeof ToastContent;\n  Text: typeof ToastText;\n  Title: typeof ToastTitle;\n  Description: typeof ToastDescription;\n  Close: typeof ToastClose;\n  Action: typeof ToastAction;\n  Portal: typeof ToastPortal;\n  useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n  Provider: ToastProvider,\n  Viewport: ToastViewport,\n  Root: ToastRoot,\n  Content: ToastContent,\n  Text: ToastText,\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Close: ToastClose,\n  Action: ToastAction,\n  Portal: ToastPortal,\n  useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}

package/dist/components/toast/toast.d.cts

@@ -41,7 +41,7 @@ declare const ToastClose: import("react").ForwardRefExoticComponent<Omit<Omit<im
 type ToastActionProps = ComponentPropsWithoutRef<typeof Toast.Action>;
 declare const ToastAction: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Base UI's portal is preserved for rendering the viewport at document level. */
-declare const ToastPortal: typeof Toast.Portal;
+declare function ToastPortal(props: ComponentPropsWithoutRef<typeof Toast.Portal>): import("react").JSX.Element;
 interface ToastComponent {
   Provider: typeof ToastProvider;
   Viewport: typeof ToastViewport;

package/dist/components/toast/toast.d.ts

@@ -41,7 +41,7 @@ declare const ToastClose: import("react").ForwardRefExoticComponent<Omit<Omit<im
 type ToastActionProps = ComponentPropsWithoutRef<typeof Toast.Action>;
 declare const ToastAction: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Base UI's portal is preserved for rendering the viewport at document level. */
-declare const ToastPortal: typeof Toast.Portal;
+declare function ToastPortal(props: ComponentPropsWithoutRef<typeof Toast.Portal>): import("react").JSX.Element;
 interface ToastComponent {
   Provider: typeof ToastProvider;
   Viewport: typeof ToastViewport;

package/dist/components/toast/toast.js

@@ -2,6 +2,7 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { toast } from "../../styled-system/recipes/toast.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
@@ -107,7 +108,9 @@ const ToastAction = forwardRef(function ToastAction({ className, ...props }, ref
 	});
 });
 /** Base UI's portal is preserved for rendering the viewport at document level. */
-const ToastPortal = Toast.Portal;
+function ToastPortal(props) {
+	return /* @__PURE__ */ jsx(Toast.Portal, { ...useThemePortalProps(props) });
+}
 const Toast$1 = {
 	Provider: ToastProvider,
 	Viewport: ToastViewport,

package/dist/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["BaseToast","toastRecipe","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n  danger: \"danger\",\n  error: \"danger\",\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n  return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n  return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n  { \"aria-label\": ariaLabel, \"aria-live\": ariaLive, className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Viewport\n      {...props}\n      aria-label={ariaLabel ?? \"Notifications\"}\n      aria-live={ariaLive ?? \"polite\"}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().viewport, className)}\n      data-jaci-component=\"toast-viewport\"\n      data-slot=\"toast-viewport\"\n    />\n  );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n  /**\n   * Visual status. When omitted, the value is inferred from the toast's\n   * `type` (`error` maps to `danger`) and otherwise remains neutral.\n   */\n  tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n  { className, toast: toastObject, tone, ...props },\n  ref,\n) {\n  const resolvedTone = resolveTone(toastObject.type, tone);\n\n  return (\n    <BaseToast.Root\n      {...props}\n      ref={ref}\n      toast={toastObject}\n      className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n      data-jaci-component=\"toast\"\n      data-jaci-tone={resolvedTone}\n      data-slot=\"toast\"\n    />\n  );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Content\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().content, className)}\n      data-slot=\"toast-content\"\n    />\n  );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(toastRecipe().text, className)}\n      data-slot=\"toast-text\"\n    />\n  );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().title, className)}\n      data-slot=\"toast-title\"\n    />\n  );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n  function ToastDescription({ className, ...props }, ref) {\n    return (\n      <BaseToast.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(toastRecipe().description, className)}\n        data-slot=\"toast-description\"\n      />\n    );\n  },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseToast.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().close, className)}\n      data-slot=\"toast-close\"\n    >\n      {children ?? \"×\"}\n    </BaseToast.Close>\n  );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Action\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().action, className)}\n      data-slot=\"toast-action\"\n    />\n  );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n  Provider: typeof ToastProvider;\n  Viewport: typeof ToastViewport;\n  Root: typeof ToastRoot;\n  Content: typeof ToastContent;\n  Text: typeof ToastText;\n  Title: typeof ToastTitle;\n  Description: typeof ToastDescription;\n  Close: typeof ToastClose;\n  Action: typeof ToastAction;\n  Portal: typeof ToastPortal;\n  useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n  Provider: ToastProvider,\n  Viewport: ToastViewport,\n  Root: ToastRoot,\n  Content: ToastContent,\n  Text: ToastText,\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Close: ToastClose,\n  Action: ToastAction,\n  Portal: ToastPortal,\n  useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":["BaseToast","toastRecipe","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n  danger: \"danger\",\n  error: \"danger\",\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n  return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n  return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n  { \"aria-label\": ariaLabel, \"aria-live\": ariaLive, className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Viewport\n      {...props}\n      aria-label={ariaLabel ?? \"Notifications\"}\n      aria-live={ariaLive ?? \"polite\"}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().viewport, className)}\n      data-jaci-component=\"toast-viewport\"\n      data-slot=\"toast-viewport\"\n    />\n  );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n  /**\n   * Visual status. When omitted, the value is inferred from the toast's\n   * `type` (`error` maps to `danger`) and otherwise remains neutral.\n   */\n  tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n  { className, toast: toastObject, tone, ...props },\n  ref,\n) {\n  const resolvedTone = resolveTone(toastObject.type, tone);\n\n  return (\n    <BaseToast.Root\n      {...props}\n      ref={ref}\n      toast={toastObject}\n      className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n      data-jaci-component=\"toast\"\n      data-jaci-tone={resolvedTone}\n      data-slot=\"toast\"\n    />\n  );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Content\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().content, className)}\n      data-slot=\"toast-content\"\n    />\n  );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(toastRecipe().text, className)}\n      data-slot=\"toast-text\"\n    />\n  );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().title, className)}\n      data-slot=\"toast-title\"\n    />\n  );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n  function ToastDescription({ className, ...props }, ref) {\n    return (\n      <BaseToast.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(toastRecipe().description, className)}\n        data-slot=\"toast-description\"\n      />\n    );\n  },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BaseToast.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().close, className)}\n      data-slot=\"toast-close\"\n    >\n      {children ?? \"×\"}\n    </BaseToast.Close>\n  );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseToast.Action\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(toastRecipe().action, className)}\n      data-slot=\"toast-action\"\n    />\n  );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport function ToastPortal(props: ComponentPropsWithoutRef<typeof BaseToast.Portal>) {\n  return <BaseToast.Portal {...useThemePortalProps(props)} />;\n}\n\nexport interface ToastComponent {\n  Provider: typeof ToastProvider;\n  Viewport: typeof ToastViewport;\n  Root: typeof ToastRoot;\n  Content: typeof ToastContent;\n  Text: typeof ToastText;\n  Title: typeof ToastTitle;\n  Description: typeof ToastDescription;\n  Close: typeof ToastClose;\n  Action: typeof ToastAction;\n  Portal: typeof ToastPortal;\n  useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n  Provider: ToastProvider,\n  Viewport: ToastViewport,\n  Root: ToastRoot,\n  Content: ToastContent,\n  Text: ToastText,\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Close: ToastClose,\n  Action: ToastAction,\n  Portal: ToastPortal,\n  useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}

package/dist/components/tooltip/tooltip.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_base_ui = require("../base-ui.cjs");
 const require_tooltip = require("../../styled-system/recipes/tooltip.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_tooltip = require("@base-ui/react/tooltip");
@@ -18,7 +19,9 @@ const TooltipTrigger = (0, react.forwardRef)(function TooltipTrigger({ className
 	});
 });
 /** Preserves Base UI's optional portal container and mount controls. */
-const TooltipPortal = _base_ui_react_tooltip.Tooltip.Portal;
+function TooltipPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const TooltipPositioner = (0, react.forwardRef)(function TooltipPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Positioner, {
 		...props,

package/dist/components/tooltip/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["BaseTooltip","withRecipeClassName","tooltip"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { TooltipRoot as BaseTooltipRoot } from \"@base-ui/react/tooltip\";\n\nimport { tooltip } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/** Preserves Base UI's controlled `open` API and uncontrolled `defaultOpen` API. */\nexport type TooltipRootProps<Payload = unknown> = BaseTooltipRoot.Props<Payload>;\n\nexport function TooltipRoot<Payload = unknown>(props: TooltipRootProps<Payload>) {\n  return <BaseTooltip.Root {...props} />;\n}\n\nexport type TooltipTriggerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Trigger>;\n\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(\n  function TooltipTrigger({ className, ...props }, ref) {\n    return (\n      <BaseTooltip.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(tooltip().trigger, className)}\n        data-jaci-component=\"tooltip\"\n        data-slot=\"tooltip-trigger\"\n      />\n    );\n  },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const TooltipPortal: typeof BaseTooltip.Portal = BaseTooltip.Portal;\n\nexport type TooltipPositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;\n\nexport const TooltipPositioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(\n  function TooltipPositioner({ className, ...props }, ref) {\n    return (\n      <BaseTooltip.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(tooltip().positioner, className)}\n        data-slot=\"tooltip-positioner\"\n      />\n    );\n  },\n);\n\nexport type TooltipPopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;\n\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseTooltip.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(tooltip().popup, className)}\n      data-jaci-component=\"tooltip\"\n      data-slot=\"tooltip-popup\"\n    />\n  );\n});\n\nexport type TooltipArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;\n\nexport const TooltipArrow = forwardRef<HTMLDivElement, TooltipArrowProps>(function TooltipArrow(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseTooltip.Arrow\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(tooltip().arrow, className)}\n      data-slot=\"tooltip-arrow\"\n    />\n  );\n});\n\nexport const Tooltip = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Portal: TooltipPortal,\n  Positioner: TooltipPositioner,\n  Popup: TooltipPopup,\n  Arrow: TooltipArrow,\n  createHandle: BaseTooltip.createHandle,\n};\n"],"mappings":";;;;;;;AAaA,SAAgB,YAA+B,OAAkC;CAC/E,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAIA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,SAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,SAAS,SAAS;EAC3D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;;AAGA,MAAa,gBAA2CF,uBAAAA,QAAY;AAIpE,MAAa,qBAAA,GAAA,MAAA,WAAA,CACX,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,YAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,YAAY,SAAS;EAC9D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,UAAU;CACrB,MAAM;CACN,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,OAAO;CACP,cAAcF,uBAAAA,QAAY;AAC5B"}
+{"version":3,"file":"tooltip.cjs","names":["BaseTooltip","withRecipeClassName","tooltip","useThemePortalProps"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { TooltipRoot as BaseTooltipRoot } from \"@base-ui/react/tooltip\";\n\nimport { tooltip } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/** Preserves Base UI's controlled `open` API and uncontrolled `defaultOpen` API. */\nexport type TooltipRootProps<Payload = unknown> = BaseTooltipRoot.Props<Payload>;\n\nexport function TooltipRoot<Payload = unknown>(props: TooltipRootProps<Payload>) {\n  return <BaseTooltip.Root {...props} />;\n}\n\nexport type TooltipTriggerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Trigger>;\n\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(\n  function TooltipTrigger({ className, ...props }, ref) {\n    return (\n      <BaseTooltip.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(tooltip().trigger, className)}\n        data-jaci-component=\"tooltip\"\n        data-slot=\"tooltip-trigger\"\n      />\n    );\n  },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport function TooltipPortal(props: ComponentPropsWithoutRef<typeof BaseTooltip.Portal>) {\n  return <BaseTooltip.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type TooltipPositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;\n\nexport const TooltipPositioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(\n  function TooltipPositioner({ className, ...props }, ref) {\n    return (\n      <BaseTooltip.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(tooltip().positioner, className)}\n        data-slot=\"tooltip-positioner\"\n      />\n    );\n  },\n);\n\nexport type TooltipPopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;\n\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseTooltip.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(tooltip().popup, className)}\n      data-jaci-component=\"tooltip\"\n      data-slot=\"tooltip-popup\"\n    />\n  );\n});\n\nexport type TooltipArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;\n\nexport const TooltipArrow = forwardRef<HTMLDivElement, TooltipArrowProps>(function TooltipArrow(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseTooltip.Arrow\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(tooltip().arrow, className)}\n      data-slot=\"tooltip-arrow\"\n    />\n  );\n});\n\nexport const Tooltip = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Portal: TooltipPortal,\n  Positioner: TooltipPositioner,\n  Popup: TooltipPopup,\n  Arrow: TooltipArrow,\n  createHandle: BaseTooltip.createHandle,\n};\n"],"mappings":";;;;;;;;AAcA,SAAgB,YAA+B,OAAkC;CAC/E,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAIA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,SAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,SAAS,SAAS;EAC3D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;;AAGA,SAAgB,cAAc,OAA4D;CACxF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,QAAb,EAAoB,GAAIG,oBAAAA,oBAAoB,KAAK,EAAI,CAAA;AAC9D;AAIA,MAAa,qBAAA,GAAA,MAAA,WAAA,CACX,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,uBAAAA,QAAY,YAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,YAAY,SAAS;EAC9D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,UAAU;CACrB,MAAM;CACN,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,OAAO;CACP,cAAcF,uBAAAA,QAAY;AAC5B"}

package/dist/components/tooltip/tooltip.d.cts

@@ -7,7 +7,7 @@ declare function TooltipRoot$1<Payload = unknown>(props: TooltipRootProps<Payloa
 type TooltipTriggerProps = ComponentPropsWithoutRef<typeof Tooltip.Trigger>;
 declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Omit<Tooltip.Trigger.Props<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Preserves Base UI's optional portal container and mount controls. */
-declare const TooltipPortal: typeof Tooltip.Portal;
+declare function TooltipPortal(props: ComponentPropsWithoutRef<typeof Tooltip.Portal>): import("react").JSX.Element;
 type TooltipPositionerProps = ComponentPropsWithoutRef<typeof Tooltip.Positioner>;
 declare const TooltipPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type TooltipPopupProps = ComponentPropsWithoutRef<typeof Tooltip.Popup>;
@@ -17,7 +17,7 @@ declare const TooltipArrow: import("react").ForwardRefExoticComponent<Omit<Omit<
 declare const Tooltip$1: {
   Root: typeof TooltipRoot$1;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Tooltip.Trigger.Props<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof TooltipPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tooltip/tooltip.d.ts

@@ -7,7 +7,7 @@ declare function TooltipRoot$1<Payload = unknown>(props: TooltipRootProps<Payloa
 type TooltipTriggerProps = ComponentPropsWithoutRef<typeof Tooltip.Trigger>;
 declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Omit<Tooltip.Trigger.Props<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Preserves Base UI's optional portal container and mount controls. */
-declare const TooltipPortal: typeof Tooltip.Portal;
+declare function TooltipPortal(props: ComponentPropsWithoutRef<typeof Tooltip.Portal>): import("react").JSX.Element;
 type TooltipPositionerProps = ComponentPropsWithoutRef<typeof Tooltip.Positioner>;
 declare const TooltipPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type TooltipPopupProps = ComponentPropsWithoutRef<typeof Tooltip.Popup>;
@@ -17,7 +17,7 @@ declare const TooltipArrow: import("react").ForwardRefExoticComponent<Omit<Omit<
 declare const Tooltip$1: {
   Root: typeof TooltipRoot$1;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Tooltip.Trigger.Props<unknown> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof TooltipPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;