jaci-ui 0.7.0 → 0.9.0

package/dist/components/navigation-menu/navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":["NavigationMenuRoot","BaseNavigationMenu","NavigationMenu"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n  close: () => void;\n  orientation: NavigationMenuOrientation;\n  styles: ReturnType<typeof navigationMenu>;\n  value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n  const context = useContext(NavigationMenuContext);\n  if (!context) {\n    throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n  }\n\n  return context;\n}\n\nexport interface NavigationMenuRootProps\n  extends Omit<\n    BaseNavigationMenuRoot.Props<string>,\n    \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n  > {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  orientation?: NavigationMenuOrientation;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n  function NavigationMenuRoot(\n    {\n      children,\n      className,\n      defaultValue,\n      onValueChange,\n      orientation = \"horizontal\",\n      value,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n    const rootElementRef = useRef<HTMLElement | null>(null);\n    // Keep the Base UI primitive controlled by the wrapper state even when the\n    // consumer uses the uncontrolled API. This keeps the viewport and the\n    // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n    // press, Escape or pressing the trigger again).\n    const resolvedValue = value === undefined ? uncontrolledValue : value;\n    const styles = navigationMenu({ orientation });\n    const close = useCallback(() => {\n      if (value === undefined) setUncontrolledValue(null);\n      else onValueChange?.(null);\n    }, [onValueChange, value]);\n\n    useEffect(() => {\n      if (resolvedValue === null) return;\n      const handleOutsidePress = (event: MouseEvent) => {\n        const target = event.target;\n        if (!(target instanceof Element)) return;\n        if (rootElementRef.current?.contains(target)) return;\n        if (\n          target.closest(\n            '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n          )\n        ) {\n          return;\n        }\n        close();\n      };\n      document.addEventListener(\"click\", handleOutsidePress);\n      return () => document.removeEventListener(\"click\", handleOutsidePress);\n    }, [close, resolvedValue]);\n\n    const setRootRef = (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    };\n\n    return (\n      <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n        <BaseNavigationMenu.Root\n          {...props}\n          onValueChange={(next) => {\n            if (value === undefined) setUncontrolledValue(next);\n            onValueChange?.(next);\n          }}\n          orientation={orientation}\n          ref={setRootRef}\n          value={resolvedValue}\n          className={withRecipeClassName(styles.root, className)}\n          data-jaci-component=\"navigation-menu\"\n          data-orientation={orientation}\n          data-slot=\"navigation-menu\"\n        >\n          {children}\n        </BaseNavigationMenu.Root>\n      </NavigationMenuContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  function NavigationMenuList({ className, ...props }, ref) {\n    const { styles, orientation } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.List\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.list, className)}\n        data-orientation={orientation}\n        data-slot=\"navigation-menu-list\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  function NavigationMenuItem({ children, className, value, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    const generatedValue = useId();\n    const itemValue = value ?? generatedValue;\n    return (\n      <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n        <BaseNavigationMenu.Item\n          {...props}\n          ref={ref}\n          value={itemValue}\n          className={withRecipeClassName(styles.item, className)}\n          data-slot=\"navigation-menu-item\"\n        >\n          {children}\n        </BaseNavigationMenu.Item>\n      </NavigationMenuItemContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n    const { close, styles, value } = useNavigationMenuContext();\n    const item = useContext(NavigationMenuItemContext);\n    return (\n      <BaseNavigationMenu.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.trigger, className)}\n        data-slot=\"navigation-menu-trigger\"\n        onClick={(event) => {\n          // Base UI intentionally keeps a hover-opened menu open for a brief\n          // patient-click window. For a component library trigger, a second\n          // click should always be an explicit close action.\n          if (item?.value !== undefined && value === item.value) {\n            event.preventDefault();\n            close();\n          }\n          onClick?.(event);\n        }}\n      />\n    );\n  },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  function NavigationMenuContent({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Content\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.content, className)}\n        data-slot=\"navigation-menu-content\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  function NavigationMenuLink({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Link\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.link, className)}\n        data-slot=\"navigation-menu-link\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n  function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Icon\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.icon, className)}\n        data-slot=\"navigation-menu-icon\"\n      >\n        {children}\n      </BaseNavigationMenu.Icon>\n    );\n  },\n);\n\nexport const NavigationMenuPortal = BaseNavigationMenu.Portal;\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n  function NavigationMenuPositioner({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.positioner, className)}\n        data-slot=\"navigation-menu-positioner\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n  function NavigationMenuViewport({ className, ...props }, ref) {\n    const { styles, value } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.viewport, className)}\n        data-open={value !== null ? \"true\" : \"false\"}\n        data-slot=\"navigation-menu-viewport\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n  function NavigationMenuPopup({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.popup, className)}\n        data-slot=\"navigation-menu-popup\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n  function NavigationMenuBackdrop({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.backdrop, className)}\n        data-slot=\"navigation-menu-backdrop\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n  function NavigationMenuArrow({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Arrow\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.arrow, className)}\n        data-slot=\"navigation-menu-arrow\"\n      />\n    );\n  },\n);\n\nexport const NavigationMenu = {\n  Root: NavigationMenuRoot,\n  List: NavigationMenuList,\n  Item: NavigationMenuItem,\n  Trigger: NavigationMenuTrigger,\n  Content: NavigationMenuContent,\n  Link: NavigationMenuLink,\n  Icon: NavigationMenuIcon,\n  Portal: NavigationMenuPortal,\n  Positioner: NavigationMenuPositioner,\n  Viewport: NavigationMenuViewport,\n  Popup: NavigationMenuPopup,\n  Backdrop: NavigationMenuBackdrop,\n  Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}
+{"version":3,"file":"navigation-menu.js","names":["NavigationMenuRoot","BaseNavigationMenu","NavigationMenu"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n  close: () => void;\n  orientation: NavigationMenuOrientation;\n  styles: ReturnType<typeof navigationMenu>;\n  value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n  const context = useContext(NavigationMenuContext);\n  if (!context) {\n    throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n  }\n\n  return context;\n}\n\nexport interface NavigationMenuRootProps\n  extends Omit<\n    BaseNavigationMenuRoot.Props<string>,\n    \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n  > {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  orientation?: NavigationMenuOrientation;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n  function NavigationMenuRoot(\n    {\n      children,\n      className,\n      defaultValue,\n      onValueChange,\n      orientation = \"horizontal\",\n      value,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n    const rootElementRef = useRef<HTMLElement | null>(null);\n    // Keep the Base UI primitive controlled by the wrapper state even when the\n    // consumer uses the uncontrolled API. This keeps the viewport and the\n    // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n    // press, Escape or pressing the trigger again).\n    const resolvedValue = value === undefined ? uncontrolledValue : value;\n    const styles = navigationMenu({ orientation });\n    const close = useCallback(() => {\n      if (value === undefined) setUncontrolledValue(null);\n      else onValueChange?.(null);\n    }, [onValueChange, value]);\n\n    useEffect(() => {\n      if (resolvedValue === null) return;\n      const handleOutsidePress = (event: MouseEvent) => {\n        const target = event.target;\n        if (!(target instanceof Element)) return;\n        if (rootElementRef.current?.contains(target)) return;\n        if (\n          target.closest(\n            '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n          )\n        ) {\n          return;\n        }\n        close();\n      };\n      document.addEventListener(\"click\", handleOutsidePress);\n      return () => document.removeEventListener(\"click\", handleOutsidePress);\n    }, [close, resolvedValue]);\n\n    const setRootRef = (element: HTMLElement | null) => {\n      rootElementRef.current = element;\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    };\n\n    return (\n      <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n        <BaseNavigationMenu.Root\n          {...props}\n          onValueChange={(next) => {\n            if (value === undefined) setUncontrolledValue(next);\n            onValueChange?.(next);\n          }}\n          orientation={orientation}\n          ref={setRootRef}\n          value={resolvedValue}\n          className={withRecipeClassName(styles.root, className)}\n          data-jaci-component=\"navigation-menu\"\n          data-orientation={orientation}\n          data-slot=\"navigation-menu\"\n        >\n          {children}\n        </BaseNavigationMenu.Root>\n      </NavigationMenuContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  function NavigationMenuList({ className, ...props }, ref) {\n    const { styles, orientation } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.List\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.list, className)}\n        data-orientation={orientation}\n        data-slot=\"navigation-menu-list\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  function NavigationMenuItem({ children, className, value, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    const generatedValue = useId();\n    const itemValue = value ?? generatedValue;\n    return (\n      <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n        <BaseNavigationMenu.Item\n          {...props}\n          ref={ref}\n          value={itemValue}\n          className={withRecipeClassName(styles.item, className)}\n          data-slot=\"navigation-menu-item\"\n        >\n          {children}\n        </BaseNavigationMenu.Item>\n      </NavigationMenuItemContext.Provider>\n    );\n  },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n    const { close, styles, value } = useNavigationMenuContext();\n    const item = useContext(NavigationMenuItemContext);\n    return (\n      <BaseNavigationMenu.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.trigger, className)}\n        data-slot=\"navigation-menu-trigger\"\n        onClick={(event) => {\n          // Base UI intentionally keeps a hover-opened menu open for a brief\n          // patient-click window. For a component library trigger, a second\n          // click should always be an explicit close action.\n          if (item?.value !== undefined && value === item.value) {\n            event.preventDefault();\n            close();\n          }\n          onClick?.(event);\n        }}\n      />\n    );\n  },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  function NavigationMenuContent({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Content\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.content, className)}\n        data-slot=\"navigation-menu-content\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  function NavigationMenuLink({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Link\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.link, className)}\n        data-slot=\"navigation-menu-link\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n  function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Icon\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.icon, className)}\n        data-slot=\"navigation-menu-icon\"\n      >\n        {children}\n      </BaseNavigationMenu.Icon>\n    );\n  },\n);\n\nexport function NavigationMenuPortal(\n  props: ComponentPropsWithoutRef<typeof BaseNavigationMenu.Portal>,\n) {\n  return <BaseNavigationMenu.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n  function NavigationMenuPositioner({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.positioner, className)}\n        data-slot=\"navigation-menu-positioner\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n  function NavigationMenuViewport({ className, ...props }, ref) {\n    const { styles, value } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Viewport\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.viewport, className)}\n        data-open={value !== null ? \"true\" : \"false\"}\n        data-slot=\"navigation-menu-viewport\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n  function NavigationMenuPopup({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Popup\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.popup, className)}\n        data-slot=\"navigation-menu-popup\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n  typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n  function NavigationMenuBackdrop({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Backdrop\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.backdrop, className)}\n        data-slot=\"navigation-menu-backdrop\"\n      />\n    );\n  },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n  function NavigationMenuArrow({ className, ...props }, ref) {\n    const { styles } = useNavigationMenuContext();\n    return (\n      <BaseNavigationMenu.Arrow\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.arrow, className)}\n        data-slot=\"navigation-menu-arrow\"\n      />\n    );\n  },\n);\n\nexport const NavigationMenu = {\n  Root: NavigationMenuRoot,\n  List: NavigationMenuList,\n  Item: NavigationMenuItem,\n  Trigger: NavigationMenuTrigger,\n  Content: NavigationMenuContent,\n  Link: NavigationMenuLink,\n  Icon: NavigationMenuIcon,\n  Portal: NavigationMenuPortal,\n  Positioner: NavigationMenuPositioner,\n  Viewport: NavigationMenuViewport,\n  Popup: NavigationMenuPopup,\n  Backdrop: NavigationMenuBackdrop,\n  Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}

package/dist/components/popover/popover.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_base_ui = require("../base-ui.cjs");
 const require_popover = require("../../styled-system/recipes/popover.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_popover = require("@base-ui/react/popover");
@@ -18,7 +19,9 @@ const PopoverTrigger = (0, react.forwardRef)(function PopoverTrigger({ className
 	});
 });
 /** Preserves Base UI's optional portal container and mount controls. */
-const PopoverPortal = _base_ui_react_popover.Popover.Portal;
+function PopoverPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const PopoverPositioner = (0, react.forwardRef)(function PopoverPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
 		...props,

package/dist/components/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["BasePopover","withRecipeClassName","popover"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { popover } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/** Preserves Base UI's controlled `open` API and uncontrolled `defaultOpen` API. */\nexport type PopoverRootProps<Payload = unknown> = BasePopoverRoot.Props<Payload>;\n\nexport function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>) {\n  return <BasePopover.Root {...props} />;\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\n\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  function PopoverTrigger({ className, ...props }, ref) {\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().trigger, className)}\n        data-jaci-component=\"popover\"\n        data-slot=\"popover-trigger\"\n      />\n    );\n  },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const PopoverPortal: typeof BasePopover.Portal = BasePopover.Portal;\n\nexport type PopoverPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\n\nexport const PopoverPositioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(\n  function PopoverPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().positioner, className)}\n        data-slot=\"popover-positioner\"\n      />\n    );\n  },\n);\n\nexport type PopoverPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().popup, className)}\n      data-jaci-component=\"popover\"\n      data-slot=\"popover-popup\"\n    />\n  );\n});\n\nexport type PopoverTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;\n\nexport const PopoverTitle = forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().title, className)}\n      data-slot=\"popover-title\"\n    />\n  );\n});\n\nexport type PopoverDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;\n\nexport const PopoverDescription = forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(\n  function PopoverDescription({ className, ...props }, ref) {\n    return (\n      <BasePopover.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().description, className)}\n        data-slot=\"popover-description\"\n      />\n    );\n  },\n);\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;\n\nexport const PopoverClose = forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BasePopover.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close popover\")}\n      ref={ref}\n      className={withRecipeClassName(popover().close, className)}\n      data-slot=\"popover-close\"\n    >\n      {children ?? \"×\"}\n    </BasePopover.Close>\n  );\n});\n\nexport type PopoverArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = forwardRef<HTMLDivElement, PopoverArrowProps>(function PopoverArrow(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Arrow\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().arrow, className)}\n      data-slot=\"popover-arrow\"\n    />\n  );\n});\n\nexport const Popover = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Portal: PopoverPortal,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n  Arrow: PopoverArrow,\n  createHandle: BasePopover.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,CAAiE,SAAS,aACrF,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;AAID,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,aAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,aAAa,SAAS;EAC/D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAAgE,SAAS,aACpF,EAAE,cAAc,WAAW,UAAU,WAAW,GAAG,SACnD,KACA;CACA,MAAM,kBAAkB,YAAY;CAEpC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACJ,cAAY,cAAc,kBAAkB,KAAA,IAAY;EACnD;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;YAET,YAAY;CACI,CAAA;AAEvB,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,aAAa;CACb,OAAO;CACP,OAAO;CACP,cAAcF,uBAAAA,QAAY;AAC5B"}
+{"version":3,"file":"popover.cjs","names":["BasePopover","withRecipeClassName","popover","useThemePortalProps"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { popover } 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 PopoverRootProps<Payload = unknown> = BasePopoverRoot.Props<Payload>;\n\nexport function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>) {\n  return <BasePopover.Root {...props} />;\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\n\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  function PopoverTrigger({ className, ...props }, ref) {\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().trigger, className)}\n        data-jaci-component=\"popover\"\n        data-slot=\"popover-trigger\"\n      />\n    );\n  },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport function PopoverPortal(props: ComponentPropsWithoutRef<typeof BasePopover.Portal>) {\n  return <BasePopover.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type PopoverPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\n\nexport const PopoverPositioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(\n  function PopoverPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().positioner, className)}\n        data-slot=\"popover-positioner\"\n      />\n    );\n  },\n);\n\nexport type PopoverPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().popup, className)}\n      data-jaci-component=\"popover\"\n      data-slot=\"popover-popup\"\n    />\n  );\n});\n\nexport type PopoverTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;\n\nexport const PopoverTitle = forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().title, className)}\n      data-slot=\"popover-title\"\n    />\n  );\n});\n\nexport type PopoverDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;\n\nexport const PopoverDescription = forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(\n  function PopoverDescription({ className, ...props }, ref) {\n    return (\n      <BasePopover.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().description, className)}\n        data-slot=\"popover-description\"\n      />\n    );\n  },\n);\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;\n\nexport const PopoverClose = forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BasePopover.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close popover\")}\n      ref={ref}\n      className={withRecipeClassName(popover().close, className)}\n      data-slot=\"popover-close\"\n    >\n      {children ?? \"×\"}\n    </BasePopover.Close>\n  );\n});\n\nexport type PopoverArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = forwardRef<HTMLDivElement, PopoverArrowProps>(function PopoverArrow(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Arrow\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().arrow, className)}\n      data-slot=\"popover-arrow\"\n    />\n  );\n});\n\nexport const Popover = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Portal: PopoverPortal,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n  Arrow: PopoverArrow,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":"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"}

package/dist/components/popover/popover.d.cts

@@ -19,7 +19,7 @@ declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<imp
   closeDelay?: number | undefined;
 } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Preserves Base UI's optional portal container and mount controls. */
-declare const PopoverPortal: typeof Popover.Portal;
+declare function PopoverPortal(props: ComponentPropsWithoutRef<typeof Popover.Portal>): import("react").JSX.Element;
 type PopoverPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
 declare const PopoverPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type PopoverPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
@@ -47,7 +47,7 @@ declare const Popover$1: {
     delay?: number | undefined;
     closeDelay?: number | undefined;
   } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof PopoverPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/popover/popover.d.ts

@@ -19,7 +19,7 @@ declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<imp
   closeDelay?: number | undefined;
 } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Preserves Base UI's optional portal container and mount controls. */
-declare const PopoverPortal: typeof Popover.Portal;
+declare function PopoverPortal(props: ComponentPropsWithoutRef<typeof Popover.Portal>): import("react").JSX.Element;
 type PopoverPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
 declare const PopoverPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 type PopoverPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
@@ -47,7 +47,7 @@ declare const Popover$1: {
     delay?: number | undefined;
     closeDelay?: number | undefined;
   } & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Portal: typeof PopoverPortal;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/popover/popover.js

@@ -1,6 +1,7 @@
 "use client";
 import { withRecipeClassName } from "../base-ui.js";
 import { popover } from "../../styled-system/recipes/popover.js";
+import { useThemePortalProps } from "../../theme/theme-scope.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -18,7 +19,9 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ className, ...props
 	});
 });
 /** Preserves Base UI's optional portal container and mount controls. */
-const PopoverPortal = Popover.Portal;
+function PopoverPortal(props) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { ...useThemePortalProps(props) });
+}
 const PopoverPositioner = forwardRef(function PopoverPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		...props,

package/dist/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["PopoverRoot","BasePopover","Popover"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { popover } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/** Preserves Base UI's controlled `open` API and uncontrolled `defaultOpen` API. */\nexport type PopoverRootProps<Payload = unknown> = BasePopoverRoot.Props<Payload>;\n\nexport function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>) {\n  return <BasePopover.Root {...props} />;\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\n\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  function PopoverTrigger({ className, ...props }, ref) {\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().trigger, className)}\n        data-jaci-component=\"popover\"\n        data-slot=\"popover-trigger\"\n      />\n    );\n  },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const PopoverPortal: typeof BasePopover.Portal = BasePopover.Portal;\n\nexport type PopoverPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\n\nexport const PopoverPositioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(\n  function PopoverPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().positioner, className)}\n        data-slot=\"popover-positioner\"\n      />\n    );\n  },\n);\n\nexport type PopoverPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().popup, className)}\n      data-jaci-component=\"popover\"\n      data-slot=\"popover-popup\"\n    />\n  );\n});\n\nexport type PopoverTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;\n\nexport const PopoverTitle = forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().title, className)}\n      data-slot=\"popover-title\"\n    />\n  );\n});\n\nexport type PopoverDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;\n\nexport const PopoverDescription = forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(\n  function PopoverDescription({ className, ...props }, ref) {\n    return (\n      <BasePopover.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().description, className)}\n        data-slot=\"popover-description\"\n      />\n    );\n  },\n);\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;\n\nexport const PopoverClose = forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BasePopover.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close popover\")}\n      ref={ref}\n      className={withRecipeClassName(popover().close, className)}\n      data-slot=\"popover-close\"\n    >\n      {children ?? \"×\"}\n    </BasePopover.Close>\n  );\n});\n\nexport type PopoverArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = forwardRef<HTMLDivElement, PopoverArrowProps>(function PopoverArrow(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Arrow\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().arrow, className)}\n      data-slot=\"popover-arrow\"\n    />\n  );\n});\n\nexport const Popover = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Portal: PopoverPortal,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n  Arrow: PopoverArrow,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":";;;;;;;AAaA,SAAgBA,cAA+B,OAAkC;CAC/E,OAAO,oBAACC,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAIA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,SAAS,SAAS;EAC3D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;;AAGA,MAAa,gBAA2CA,QAAY;AAIpE,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACA,QAAY,YAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,YAAY,SAAS;EAC9D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,eAAe,WAAkD,SAAS,aACrF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACA,QAAY,aAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,aAAa,SAAS;EAC/D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,eAAe,WAAiD,SAAS,aACpF,EAAE,cAAc,WAAW,UAAU,WAAW,GAAG,SACnD,KACA;CACA,MAAM,kBAAkB,YAAY;CAEpC,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACJ,cAAY,cAAc,kBAAkB,KAAA,IAAY;EACnD;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;YAET,YAAY;CACI,CAAA;AAEvB,CAAC;AAID,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAaC,YAAU;CACrB,MAAMF;CACN,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,OAAO;CACP,aAAa;CACb,OAAO;CACP,OAAO;CACP,cAAcC,QAAY;AAC5B"}
+{"version":3,"file":"popover.js","names":["PopoverRoot","BasePopover","Popover"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { popover } 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 PopoverRootProps<Payload = unknown> = BasePopoverRoot.Props<Payload>;\n\nexport function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>) {\n  return <BasePopover.Root {...props} />;\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\n\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  function PopoverTrigger({ className, ...props }, ref) {\n    return (\n      <BasePopover.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().trigger, className)}\n        data-jaci-component=\"popover\"\n        data-slot=\"popover-trigger\"\n      />\n    );\n  },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport function PopoverPortal(props: ComponentPropsWithoutRef<typeof BasePopover.Portal>) {\n  return <BasePopover.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type PopoverPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\n\nexport const PopoverPositioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(\n  function PopoverPositioner({ className, ...props }, ref) {\n    return (\n      <BasePopover.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().positioner, className)}\n        data-slot=\"popover-positioner\"\n      />\n    );\n  },\n);\n\nexport type PopoverPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().popup, className)}\n      data-jaci-component=\"popover\"\n      data-slot=\"popover-popup\"\n    />\n  );\n});\n\nexport type PopoverTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;\n\nexport const PopoverTitle = forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Title\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().title, className)}\n      data-slot=\"popover-title\"\n    />\n  );\n});\n\nexport type PopoverDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;\n\nexport const PopoverDescription = forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(\n  function PopoverDescription({ className, ...props }, ref) {\n    return (\n      <BasePopover.Description\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(popover().description, className)}\n        data-slot=\"popover-description\"\n      />\n    );\n  },\n);\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;\n\nexport const PopoverClose = forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose(\n  { \"aria-label\": ariaLabel, children, className, ...props },\n  ref,\n) {\n  const hasVisibleLabel = children != null;\n\n  return (\n    <BasePopover.Close\n      {...props}\n      aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close popover\")}\n      ref={ref}\n      className={withRecipeClassName(popover().close, className)}\n      data-slot=\"popover-close\"\n    >\n      {children ?? \"×\"}\n    </BasePopover.Close>\n  );\n});\n\nexport type PopoverArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = forwardRef<HTMLDivElement, PopoverArrowProps>(function PopoverArrow(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BasePopover.Arrow\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(popover().arrow, className)}\n      data-slot=\"popover-arrow\"\n    />\n  );\n});\n\nexport const Popover = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Portal: PopoverPortal,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n  Arrow: PopoverArrow,\n  createHandle: BasePopover.createHandle,\n};\n"],"mappings":";;;;;;;;AAcA,SAAgBA,cAA+B,OAAkC;CAC/E,OAAO,oBAACC,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAIA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,SAAS,SAAS;EAC3D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;;AAGA,SAAgB,cAAc,OAA4D;CACxF,OAAO,oBAACA,QAAY,QAAb,EAAoB,GAAI,oBAAoB,KAAK,EAAI,CAAA;AAC9D;AAIA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACA,QAAY,YAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,YAAY,SAAS;EAC9D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,eAAe,WAAkD,SAAS,aACrF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACA,QAAY,aAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,aAAa,SAAS;EAC/D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,eAAe,WAAiD,SAAS,aACpF,EAAE,cAAc,WAAW,UAAU,WAAW,GAAG,SACnD,KACA;CACA,MAAM,kBAAkB,YAAY;CAEpC,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACJ,cAAY,cAAc,kBAAkB,KAAA,IAAY;EACnD;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;YAET,YAAY;CACI,CAAA;AAEvB,CAAC;AAID,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAaC,YAAU;CACrB,MAAMF;CACN,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,OAAO;CACP,aAAa;CACb,OAAO;CACP,OAAO;CACP,cAAcC,QAAY;AAC5B"}

package/dist/components/qr-code/index.d.cts

@@ -0,0 +1,2 @@
+import { QRCode, QRCodeErrorCorrectionLevel, QRCodeProps } from "./qr-code.cjs";
+export { QRCode, type QRCodeErrorCorrectionLevel, type QRCodeProps };

package/dist/components/qr-code/index.d.ts

@@ -0,0 +1,2 @@
+import { QRCode, QRCodeErrorCorrectionLevel, QRCodeProps } from "./qr-code.js";
+export { QRCode, type QRCodeErrorCorrectionLevel, type QRCodeProps };

package/dist/components/qr-code/qr-code.cjs

@@ -0,0 +1,118 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_qr_code = require("../../styled-system/recipes/qr-code.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let qrcode = require("qrcode");
+qrcode = require_runtime.__toESM(qrcode, 1);
+//#region src/components/qr-code/qr-code.tsx
+function isFinderCell(row, column, size) {
+	return row < 7 && column < 7 || row < 7 && column >= size - 7 || row >= size - 7 && column < 7;
+}
+function Finder({ x, y, color, background }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		"data-slot": "qr-code-eye",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				fill: color,
+				height: "7",
+				rx: "1",
+				width: "7",
+				x,
+				y
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				fill: background,
+				height: "5",
+				rx: "0.75",
+				width: "5",
+				x: x + 1,
+				y: y + 1
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				fill: color,
+				height: "3",
+				rx: "0.5",
+				width: "3",
+				x: x + 2,
+				y: y + 2
+			})
+		]
+	});
+}
+const QRCode = (0, react.forwardRef)(function QRCode({ background = "transparent", className, errorCorrectionLevel = "Q", fallback, foreground = "currentColor", label = "QR code", margin = 2, size = 192, style, value, ...props }, ref) {
+	const safeSize = Number.isFinite(size) && size > 0 ? size : 192;
+	const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;
+	const finderBackground = background === "transparent" ? "white" : background;
+	try {
+		const code = qrcode.create(value, { errorCorrectionLevel });
+		const moduleCount = code.modules.size;
+		const viewBoxSize = moduleCount + safeMargin * 2;
+		const modules = [];
+		for (let row = 0; row < moduleCount; row += 1) for (let column = 0; column < moduleCount; column += 1) if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) modules.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: safeMargin + column + .5,
+			cy: safeMargin + row + .5,
+			"data-slot": "qr-code-dot",
+			fill: foreground,
+			r: "0.43"
+		}, `${row}-${column}`));
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			...props,
+			ref,
+			"aria-label": label,
+			className: require_cx.cx(require_qr_code.qrCode(), className),
+			"data-dot-shape": "circle",
+			"data-eye-shape": "rounded-square",
+			"data-jaci-component": "qr-code",
+			"data-slot": "qr-code",
+			height: safeSize,
+			role: "img",
+			style,
+			viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+			width: safeSize,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: label }),
+				background !== "transparent" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					fill: background,
+					height: viewBoxSize,
+					width: viewBoxSize,
+					x: "0",
+					y: "0"
+				}) : null,
+				modules,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
+					background: finderBackground,
+					color: foreground,
+					x: safeMargin,
+					y: safeMargin
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
+					background: finderBackground,
+					color: foreground,
+					x: safeMargin + moduleCount - 7,
+					y: safeMargin
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Finder, {
+					background: finderBackground,
+					color: foreground,
+					x: safeMargin,
+					y: safeMargin + moduleCount - 7
+				})
+			]
+		});
+	} catch {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-label": label,
+			className: require_cx.cx(require_qr_code.qrCode(), className),
+			"data-jaci-component": "qr-code",
+			"data-slot": "qr-code",
+			"data-status": "error",
+			role: "img",
+			children: fallback ?? "Unable to generate QR code"
+		});
+	}
+});
+//#endregion
+exports.QRCode = QRCode;
+
+//# sourceMappingURL=qr-code.cjs.map

package/dist/components/qr-code/qr-code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.cjs","names":["QRCodeEncoder","cx","qrCode"],"sources":["../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["import * as QRCodeEncoder from \"qrcode\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { qrCode } from \"../../styled-system/recipes\";\n\nexport type QRCodeErrorCorrectionLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QRCodeProps extends Omit<ComponentPropsWithoutRef<\"svg\">, \"children\"> {\n  value: string;\n  size?: number;\n  margin?: number;\n  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;\n  foreground?: string;\n  background?: string;\n  label?: string;\n  fallback?: ReactNode;\n}\n\nfunction isFinderCell(row: number, column: number, size: number) {\n  return (\n    (row < 7 && column < 7) || (row < 7 && column >= size - 7) || (row >= size - 7 && column < 7)\n  );\n}\n\nfunction Finder({\n  x,\n  y,\n  color,\n  background,\n}: {\n  x: number;\n  y: number;\n  color: string;\n  background: string;\n}) {\n  return (\n    <g data-slot=\"qr-code-eye\">\n      <rect fill={color} height=\"7\" rx=\"1\" width=\"7\" x={x} y={y} />\n      <rect fill={background} height=\"5\" rx=\"0.75\" width=\"5\" x={x + 1} y={y + 1} />\n      <rect fill={color} height=\"3\" rx=\"0.5\" width=\"3\" x={x + 2} y={y + 2} />\n    </g>\n  );\n}\n\nexport const QRCode = forwardRef<SVGSVGElement, QRCodeProps>(function QRCode(\n  {\n    background = \"transparent\",\n    className,\n    errorCorrectionLevel = \"Q\",\n    fallback,\n    foreground = \"currentColor\",\n    label = \"QR code\",\n    margin = 2,\n    size = 192,\n    style,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const safeSize = Number.isFinite(size) && size > 0 ? size : 192;\n  const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;\n  // Finder patterns need a contrasting quiet area between the frame and the\n  // eyeball. Keep the overall SVG transparent by default, but use a white\n  // cutout when no background was supplied so the code remains scannable.\n  const finderBackground = background === \"transparent\" ? \"white\" : background;\n\n  try {\n    const code = QRCodeEncoder.create(value, { errorCorrectionLevel });\n    const moduleCount = code.modules.size;\n    const viewBoxSize = moduleCount + safeMargin * 2;\n    const modules: ReactNode[] = [];\n\n    for (let row = 0; row < moduleCount; row += 1) {\n      for (let column = 0; column < moduleCount; column += 1) {\n        if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {\n          modules.push(\n            <circle\n              cx={safeMargin + column + 0.5}\n              cy={safeMargin + row + 0.5}\n              data-slot=\"qr-code-dot\"\n              fill={foreground}\n              key={`${row}-${column}`}\n              r=\"0.43\"\n            />,\n          );\n        }\n      }\n    }\n\n    return (\n      <svg\n        {...props}\n        ref={ref}\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-dot-shape=\"circle\"\n        data-eye-shape=\"rounded-square\"\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        height={safeSize}\n        role=\"img\"\n        style={style}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        width={safeSize}\n      >\n        <title>{label}</title>\n        {background !== \"transparent\" ? (\n          <rect fill={background} height={viewBoxSize} width={viewBoxSize} x=\"0\" y=\"0\" />\n        ) : null}\n        {modules}\n        <Finder background={finderBackground} color={foreground} x={safeMargin} y={safeMargin} />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin + moduleCount - 7}\n          y={safeMargin}\n        />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin}\n          y={safeMargin + moduleCount - 7}\n        />\n      </svg>\n    );\n  } catch {\n    return (\n      <span\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        data-status=\"error\"\n        role=\"img\"\n      >\n        {fallback ?? \"Unable to generate QR code\"}\n      </span>\n    );\n  }\n});\n"],"mappings":"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"}

package/dist/components/qr-code/qr-code.d.cts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/qr-code/qr-code.d.ts
+type QRCodeErrorCorrectionLevel = "L" | "M" | "Q" | "H";
+interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children"> {
+  value: string;
+  size?: number;
+  margin?: number;
+  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+  foreground?: string;
+  background?: string;
+  label?: string;
+  fallback?: ReactNode;
+}
+declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+export { QRCode, QRCodeErrorCorrectionLevel, QRCodeProps };
+//# sourceMappingURL=qr-code.d.cts.map

package/dist/components/qr-code/qr-code.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/qr-code/qr-code.d.ts
+type QRCodeErrorCorrectionLevel = "L" | "M" | "Q" | "H";
+interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children"> {
+  value: string;
+  size?: number;
+  margin?: number;
+  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+  foreground?: string;
+  background?: string;
+  label?: string;
+  fallback?: ReactNode;
+}
+declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+//#endregion
+export { QRCode, QRCodeErrorCorrectionLevel, QRCodeProps };
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/components/qr-code/qr-code.js

@@ -0,0 +1,116 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { qrCode } from "../../styled-system/recipes/qr-code.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as QRCodeEncoder from "qrcode";
+//#region src/components/qr-code/qr-code.tsx
+function isFinderCell(row, column, size) {
+	return row < 7 && column < 7 || row < 7 && column >= size - 7 || row >= size - 7 && column < 7;
+}
+function Finder({ x, y, color, background }) {
+	return /* @__PURE__ */ jsxs("g", {
+		"data-slot": "qr-code-eye",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				fill: color,
+				height: "7",
+				rx: "1",
+				width: "7",
+				x,
+				y
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				fill: background,
+				height: "5",
+				rx: "0.75",
+				width: "5",
+				x: x + 1,
+				y: y + 1
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				fill: color,
+				height: "3",
+				rx: "0.5",
+				width: "3",
+				x: x + 2,
+				y: y + 2
+			})
+		]
+	});
+}
+const QRCode = forwardRef(function QRCode({ background = "transparent", className, errorCorrectionLevel = "Q", fallback, foreground = "currentColor", label = "QR code", margin = 2, size = 192, style, value, ...props }, ref) {
+	const safeSize = Number.isFinite(size) && size > 0 ? size : 192;
+	const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;
+	const finderBackground = background === "transparent" ? "white" : background;
+	try {
+		const code = QRCodeEncoder.create(value, { errorCorrectionLevel });
+		const moduleCount = code.modules.size;
+		const viewBoxSize = moduleCount + safeMargin * 2;
+		const modules = [];
+		for (let row = 0; row < moduleCount; row += 1) for (let column = 0; column < moduleCount; column += 1) if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) modules.push(/* @__PURE__ */ jsx("circle", {
+			cx: safeMargin + column + .5,
+			cy: safeMargin + row + .5,
+			"data-slot": "qr-code-dot",
+			fill: foreground,
+			r: "0.43"
+		}, `${row}-${column}`));
+		return /* @__PURE__ */ jsxs("svg", {
+			...props,
+			ref,
+			"aria-label": label,
+			className: cx(qrCode(), className),
+			"data-dot-shape": "circle",
+			"data-eye-shape": "rounded-square",
+			"data-jaci-component": "qr-code",
+			"data-slot": "qr-code",
+			height: safeSize,
+			role: "img",
+			style,
+			viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+			width: safeSize,
+			children: [
+				/* @__PURE__ */ jsx("title", { children: label }),
+				background !== "transparent" ? /* @__PURE__ */ jsx("rect", {
+					fill: background,
+					height: viewBoxSize,
+					width: viewBoxSize,
+					x: "0",
+					y: "0"
+				}) : null,
+				modules,
+				/* @__PURE__ */ jsx(Finder, {
+					background: finderBackground,
+					color: foreground,
+					x: safeMargin,
+					y: safeMargin
+				}),
+				/* @__PURE__ */ jsx(Finder, {
+					background: finderBackground,
+					color: foreground,
+					x: safeMargin + moduleCount - 7,
+					y: safeMargin
+				}),
+				/* @__PURE__ */ jsx(Finder, {
+					background: finderBackground,
+					color: foreground,
+					x: safeMargin,
+					y: safeMargin + moduleCount - 7
+				})
+			]
+		});
+	} catch {
+		return /* @__PURE__ */ jsx("span", {
+			"aria-label": label,
+			className: cx(qrCode(), className),
+			"data-jaci-component": "qr-code",
+			"data-slot": "qr-code",
+			"data-status": "error",
+			role: "img",
+			children: fallback ?? "Unable to generate QR code"
+		});
+	}
+});
+//#endregion
+export { QRCode };
+
+//# sourceMappingURL=qr-code.js.map

package/dist/components/qr-code/qr-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.js","names":[],"sources":["../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["import * as QRCodeEncoder from \"qrcode\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { qrCode } from \"../../styled-system/recipes\";\n\nexport type QRCodeErrorCorrectionLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QRCodeProps extends Omit<ComponentPropsWithoutRef<\"svg\">, \"children\"> {\n  value: string;\n  size?: number;\n  margin?: number;\n  errorCorrectionLevel?: QRCodeErrorCorrectionLevel;\n  foreground?: string;\n  background?: string;\n  label?: string;\n  fallback?: ReactNode;\n}\n\nfunction isFinderCell(row: number, column: number, size: number) {\n  return (\n    (row < 7 && column < 7) || (row < 7 && column >= size - 7) || (row >= size - 7 && column < 7)\n  );\n}\n\nfunction Finder({\n  x,\n  y,\n  color,\n  background,\n}: {\n  x: number;\n  y: number;\n  color: string;\n  background: string;\n}) {\n  return (\n    <g data-slot=\"qr-code-eye\">\n      <rect fill={color} height=\"7\" rx=\"1\" width=\"7\" x={x} y={y} />\n      <rect fill={background} height=\"5\" rx=\"0.75\" width=\"5\" x={x + 1} y={y + 1} />\n      <rect fill={color} height=\"3\" rx=\"0.5\" width=\"3\" x={x + 2} y={y + 2} />\n    </g>\n  );\n}\n\nexport const QRCode = forwardRef<SVGSVGElement, QRCodeProps>(function QRCode(\n  {\n    background = \"transparent\",\n    className,\n    errorCorrectionLevel = \"Q\",\n    fallback,\n    foreground = \"currentColor\",\n    label = \"QR code\",\n    margin = 2,\n    size = 192,\n    style,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const safeSize = Number.isFinite(size) && size > 0 ? size : 192;\n  const safeMargin = Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 2;\n  // Finder patterns need a contrasting quiet area between the frame and the\n  // eyeball. Keep the overall SVG transparent by default, but use a white\n  // cutout when no background was supplied so the code remains scannable.\n  const finderBackground = background === \"transparent\" ? \"white\" : background;\n\n  try {\n    const code = QRCodeEncoder.create(value, { errorCorrectionLevel });\n    const moduleCount = code.modules.size;\n    const viewBoxSize = moduleCount + safeMargin * 2;\n    const modules: ReactNode[] = [];\n\n    for (let row = 0; row < moduleCount; row += 1) {\n      for (let column = 0; column < moduleCount; column += 1) {\n        if (code.modules.get(row, column) && !isFinderCell(row, column, moduleCount)) {\n          modules.push(\n            <circle\n              cx={safeMargin + column + 0.5}\n              cy={safeMargin + row + 0.5}\n              data-slot=\"qr-code-dot\"\n              fill={foreground}\n              key={`${row}-${column}`}\n              r=\"0.43\"\n            />,\n          );\n        }\n      }\n    }\n\n    return (\n      <svg\n        {...props}\n        ref={ref}\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-dot-shape=\"circle\"\n        data-eye-shape=\"rounded-square\"\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        height={safeSize}\n        role=\"img\"\n        style={style}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        width={safeSize}\n      >\n        <title>{label}</title>\n        {background !== \"transparent\" ? (\n          <rect fill={background} height={viewBoxSize} width={viewBoxSize} x=\"0\" y=\"0\" />\n        ) : null}\n        {modules}\n        <Finder background={finderBackground} color={foreground} x={safeMargin} y={safeMargin} />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin + moduleCount - 7}\n          y={safeMargin}\n        />\n        <Finder\n          background={finderBackground}\n          color={foreground}\n          x={safeMargin}\n          y={safeMargin + moduleCount - 7}\n        />\n      </svg>\n    );\n  } catch {\n    return (\n      <span\n        aria-label={label}\n        className={cx(qrCode(), className)}\n        data-jaci-component=\"qr-code\"\n        data-slot=\"qr-code\"\n        data-status=\"error\"\n        role=\"img\"\n      >\n        {fallback ?? \"Unable to generate QR code\"}\n      </span>\n    );\n  }\n});\n"],"mappings":";;;;;;AAoBA,SAAS,aAAa,KAAa,QAAgB,MAAc;CAC/D,OACG,MAAM,KAAK,SAAS,KAAO,MAAM,KAAK,UAAU,OAAO,KAAO,OAAO,OAAO,KAAK,SAAS;AAE/F;AAEA,SAAS,OAAO,EACd,GACA,GACA,OACA,cAMC;CACD,OACE,qBAAC,KAAD;EAAG,aAAU;YAAb;GACE,oBAAC,QAAD;IAAM,MAAM;IAAO,QAAO;IAAI,IAAG;IAAI,OAAM;IAAO;IAAM;GAAI,CAAA;GAC5D,oBAAC,QAAD;IAAM,MAAM;IAAY,QAAO;IAAI,IAAG;IAAO,OAAM;IAAI,GAAG,IAAI;IAAG,GAAG,IAAI;GAAI,CAAA;GAC5E,oBAAC,QAAD;IAAM,MAAM;IAAO,QAAO;IAAI,IAAG;IAAM,OAAM;IAAI,GAAG,IAAI;IAAG,GAAG,IAAI;GAAI,CAAA;EACrE;;AAEP;AAEA,MAAa,SAAS,WAAuC,SAAS,OACpE,EACE,aAAa,eACb,WACA,uBAAuB,KACvB,UACA,aAAa,gBACb,QAAQ,WACR,SAAS,GACT,OAAO,KACP,OACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,WAAW,OAAO,SAAS,IAAI,KAAK,OAAO,IAAI,OAAO;CAC5D,MAAM,aAAa,OAAO,SAAS,MAAM,KAAK,UAAU,IAAI,KAAK,MAAM,MAAM,IAAI;CAIjF,MAAM,mBAAmB,eAAe,gBAAgB,UAAU;CAElE,IAAI;EACF,MAAM,OAAO,cAAc,OAAO,OAAO,EAAE,qBAAqB,CAAC;EACjE,MAAM,cAAc,KAAK,QAAQ;EACjC,MAAM,cAAc,cAAc,aAAa;EAC/C,MAAM,UAAuB,CAAC;EAE9B,KAAK,IAAI,MAAM,GAAG,MAAM,aAAa,OAAO,GAC1C,KAAK,IAAI,SAAS,GAAG,SAAS,aAAa,UAAU,GACnD,IAAI,KAAK,QAAQ,IAAI,KAAK,MAAM,KAAK,CAAC,aAAa,KAAK,QAAQ,WAAW,GACzE,QAAQ,KACN,oBAAC,UAAD;GACE,IAAI,aAAa,SAAS;GAC1B,IAAI,aAAa,MAAM;GACvB,aAAU;GACV,MAAM;GAEN,GAAE;EACH,GAFM,GAAG,IAAI,GAAG,QAEhB,CACH;EAKN,OACE,qBAAC,OAAD;GACE,GAAI;GACC;GACL,cAAY;GACZ,WAAW,GAAG,OAAO,GAAG,SAAS;GACjC,kBAAe;GACf,kBAAe;GACf,uBAAoB;GACpB,aAAU;GACV,QAAQ;GACR,MAAK;GACE;GACP,SAAS,OAAO,YAAY,GAAG;GAC/B,OAAO;aAbT;IAeE,oBAAC,SAAD,EAAA,UAAQ,MAAa,CAAA;IACpB,eAAe,gBACd,oBAAC,QAAD;KAAM,MAAM;KAAY,QAAQ;KAAa,OAAO;KAAa,GAAE;KAAI,GAAE;IAAK,CAAA,IAC5E;IACH;IACD,oBAAC,QAAD;KAAQ,YAAY;KAAkB,OAAO;KAAY,GAAG;KAAY,GAAG;IAAa,CAAA;IACxF,oBAAC,QAAD;KACE,YAAY;KACZ,OAAO;KACP,GAAG,aAAa,cAAc;KAC9B,GAAG;IACJ,CAAA;IACD,oBAAC,QAAD;KACE,YAAY;KACZ,OAAO;KACP,GAAG;KACH,GAAG,aAAa,cAAc;IAC/B,CAAA;GACE;;CAET,QAAQ;EACN,OACE,oBAAC,QAAD;GACE,cAAY;GACZ,WAAW,GAAG,OAAO,GAAG,SAAS;GACjC,uBAAoB;GACpB,aAAU;GACV,eAAY;GACZ,MAAK;aAEJ,YAAY;EACT,CAAA;CAEV;AACF,CAAC"}

package/dist/components/select/select.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_select = require("../../styled-system/recipes/select.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_select = require("@base-ui/react/select");
@@ -80,7 +81,9 @@ const SelectIcon = (0, react.forwardRef)(function SelectIcon({ children = "⌄",
 	});
 });
 /** Preserves Base UI's optional portal container and mount controls. */
-const SelectPortal = _base_ui_react_select.Select.Portal;
+function SelectPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const SelectPositioner = (0, react.forwardRef)(function SelectPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
 		...props,