@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Drawer/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Drawer/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst softEase = 'cubic-bezier(0.32, 0.72, 0, 1)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst pushTransform = 'translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0))';\nconst edge = `var(--drawer-edge-width, 1px)`;\n\n/* antd's boxShadowDrawer{Left,Right,Up,Down} geometry and alphas, scaled against colorShadow's own\n   alpha (opaque black in light, rgba(255,255,255,0.2) in dark). Direction styles set the cast sign\n   and weight styles scale the alpha, so the two compose without a style per combination. */\nconst castShadow = (x: number, y: number, blur: number, spread: number, alpha: number) =>\n  `calc(var(--drawer-cast-x, 0) * ${x}px) calc(var(--drawer-cast-y, 0) * ${y}px) ${blur}px ${spread}px color-mix(in srgb, var(--lobe-color-shadow, #000) calc(${alpha}% * var(--drawer-cast-alpha, 1)), transparent)`;\n\nconst panelShadow = `${castShadow(6, 6, 16, 0, 8)}, ${castShadow(3, 3, 6, -4, 12)}, ${castShadow(9, 9, 28, 8, 5)}`;\n\nexport const styles = stylex.create({\n  backdrop: {\n    inset: 0,\n    transition: `opacity 180ms ${softEase}`,\n    backgroundColor: cssVar.colorBgMask,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'fixed',\n    zIndex: 1200,\n  },\n\n  popup: {\n    display: 'flex',\n    pointerEvents: 'none',\n    position: 'fixed',\n    zIndex: 1201,\n    /* Clamped here rather than on the panel, so an oversized size prop shrinks the box instead of\n       detaching the panel from its anchored edge. */\n    maxHeight: '100dvh',\n    maxWidth: '100dvw',\n  },\n\n  popupLeft: {\n    insetBlock: 0,\n    insetInlineStart: 0,\n  },\n\n  popupRight: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n  },\n\n  popupTop: {\n    insetInline: 0,\n    insetBlockStart: 0,\n  },\n\n  popupBottom: {\n    insetInline: 0,\n    insetBlockEnd: 0,\n  },\n\n  panel: {\n    flex: '1',\n    overflow: 'hidden',\n    transition: `transform 300ms ${softEase}`,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: panelShadow,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    pointerEvents: 'auto',\n    position: 'relative',\n    transform: pushTransform,\n    minHeight: 0,\n    minWidth: 0,\n  },\n\n  panelLeft: {\n    '--drawer-cast-x': '1',\n    'borderInlineEndColor': cssVar.colorBorder,\n    'borderInlineEndStyle': 'solid',\n    'borderInlineEndWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateX(-100%)' },\n  },\n\n  panelRight: {\n    '--drawer-cast-x': '-1',\n    'borderInlineStartColor': cssVar.colorBorder,\n    'borderInlineStartStyle': 'solid',\n    'borderInlineStartWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateX(100%)' },\n  },\n\n  panelTop: {\n    '--drawer-cast-y': '1',\n    'borderBlockEndColor': cssVar.colorBorder,\n    'borderBlockEndStyle': 'solid',\n    'borderBlockEndWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateY(-100%)' },\n  },\n\n  panelBottom: {\n    '--drawer-cast-y': '-1',\n    'borderBlockStartColor': cssVar.colorBorder,\n    'borderBlockStartStyle': 'solid',\n    'borderBlockStartWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateY(100%)' },\n  },\n\n  panelRoundedLeft: {\n    borderEndEndRadius: 12,\n    borderStartEndRadius: 12,\n  },\n\n  panelRoundedRight: {\n    borderEndStartRadius: 12,\n    borderStartStartRadius: 12,\n  },\n\n  panelRoundedTop: {\n    borderEndEndRadius: 12,\n    borderEndStartRadius: 12,\n  },\n\n  panelRoundedBottom: {\n    borderStartEndRadius: 12,\n    borderStartStartRadius: 12,\n  },\n\n  panelFlush: {\n    '--drawer-cast-alpha': '0',\n    '--drawer-edge-width': '0',\n  },\n\n  panelBoosted: {\n    '--drawer-cast-alpha': '1.75',\n  },\n\n  panelRecessed: {\n    '--drawer-cast-alpha': '0.5',\n  },\n\n  header: {\n    flex: 'none',\n    gap: 8,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n    minHeight: 56,\n  },\n\n  containerInner: {\n    flex: '1',\n    gap: 8,\n    marginInline: 'auto',\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n\n  containerInnerFooter: {\n    justifyContent: 'flex-end',\n  },\n\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 17,\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    lineHeight: 1.4,\n  },\n\n  extra: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineEnd: -4,\n  },\n\n  extraFloating: {\n    insetBlockStart: 12,\n    insetInlineEnd: 12,\n    marginInlineEnd: 0,\n    position: 'absolute',\n    zIndex: 1,\n  },\n\n  close: {\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderRadius': 8,\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'transition': `color 160ms ${softEase}, background 160ms ${softEase}, transform 160ms ${softEase}`,\n    'alignItems': 'center',\n    'backgroundColor': { default: 'transparent', ':hover': cssVar.colorFillSecondary },\n    'color': { default: cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    'cursor': 'pointer',\n    'display': 'flex',\n    'justifyContent': 'center',\n    'position': 'relative',\n    'transform': {\n      default: null,\n      ':hover:not(:active)': 'scale(1.04)',\n      ':active': 'scale(0.96)',\n    },\n    'height': 32,\n    'width': 32,\n    '::after': {\n      inset: -4,\n      content: '\"\"',\n      position: 'absolute',\n    },\n  },\n\n  content: {\n    flex: '1',\n    display: 'flex',\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  bodyContent: {\n    marginInline: 'auto',\n    paddingBlock: 12,\n    paddingInline: 16,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '100%',\n    width: '100%',\n  },\n\n  contentSidebar: {\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n  },\n\n  bodyContentSidebar: {\n    paddingBlock: 0,\n    paddingInline: 0,\n    flexDirection: 'row',\n    height: '100%',\n    minHeight: 0,\n  },\n\n  sidebar: {\n    flex: 'none',\n    paddingBlock: 12,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgLayout,\n    borderInlineEndColor: cssVar.colorBorderSecondary,\n    borderInlineEndStyle: 'solid',\n    borderInlineEndWidth: 1,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  sidebarContent: {\n    flex: '1',\n    paddingBlock: 12,\n    paddingInline: 16,\n    minWidth: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  footer: {\n    flex: 'none',\n    gap: 8,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockStartColor: cssVar.colorSplit,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    justifyContent: 'flex-end',\n  },\n});\n"],"mappings":"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"}

package/es/Drawer/type.d.mts

@@ -1,30 +1,64 @@
-import { ActionIconProps } from "../base-ui/ActionIcon/type.mjs";
-import "../base-ui/ActionIcon/index.mjs";
-import { CSSProperties, ReactNode, Ref } from "react";
-import { DrawerProps } from "antd";
+import { CSSProperties, ReactNode } from "react";
 //#region src/Drawer/type.d.ts
-interface DrawerProps$1 extends Omit<DrawerProps, 'styles' | 'classNames'> {
-  classNames?: DrawerProps['classNames'] & {
-    bodyContent?: string;
-    extra?: string;
-    sidebar?: string;
-    sidebarContent?: string;
-    title?: string;
-  };
-  closeIconProps?: ActionIconProps;
+export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
+export type DrawerPush = boolean | {
+  distance?: number;
+};
+export interface DrawerSemanticNames {
+  backdrop?: string;
+  bodyContent?: string;
+  close?: string;
+  content?: string;
+  extra?: string;
+  footer?: string;
+  header?: string;
+  panel?: string;
+  popup?: string;
+  sidebar?: string;
+  sidebarContent?: string;
+  title?: string;
+}
+export interface DrawerSemanticStyles {
+  backdrop?: CSSProperties;
+  bodyContent?: CSSProperties;
+  close?: CSSProperties;
+  content?: CSSProperties;
+  extra?: CSSProperties;
+  footer?: CSSProperties;
+  header?: CSSProperties;
+  panel?: CSSProperties;
+  popup?: CSSProperties;
+  sidebar?: CSSProperties;
+  sidebarContent?: CSSProperties;
+  title?: CSSProperties;
+}
+export interface DrawerProps {
+  afterOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+  classNames?: DrawerSemanticNames;
+  closable?: boolean;
+  closeIcon?: ReactNode;
   containerMaxWidth?: number | string;
+  extra?: ReactNode;
+  footer?: ReactNode;
+  getContainer?: HTMLElement | false | null;
+  height?: number | string;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
   noHeader?: boolean;
-  ref?: Ref<HTMLDivElement>;
+  onClose?: () => void;
+  open?: boolean;
+  placement?: DrawerPlacement;
+  push?: DrawerPush;
   sidebar?: ReactNode;
-  sidebarWidth?: number;
-  styles?: DrawerProps['styles'] & {
-    bodyContent?: CSSProperties;
-    extra?: CSSProperties;
-    sidebar?: CSSProperties;
-    sidebarContent?: CSSProperties;
-    title?: CSSProperties;
-  };
+  sidebarWidth?: number | string;
+  style?: CSSProperties;
+  styles?: DrawerSemanticStyles;
+  title?: ReactNode;
+  width?: number | string;
+  zIndex?: number;
 }
 //#endregion
-export { DrawerProps$1 as DrawerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/DropdownMenu/DropdownMenu.d.mts

@@ -0,0 +1,6 @@
+import { DropdownMenuProps } from "./type.mjs";
+//#region src/DropdownMenu/DropdownMenu.d.ts
+declare const DropdownMenu: import("react").NamedExoticComponent<DropdownMenuProps<unknown>>;
+//#endregion
+export { DropdownMenu as default };
+//# sourceMappingURL=DropdownMenu.d.mts.map

package/es/DropdownMenu/DropdownMenu.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { menuStyles } from "./style.mjs";
+import { DropdownMenuFooter, DropdownMenuHeader, DropdownMenuPopupImpl, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuScrollViewport, DropdownMenuTrigger } from "./atoms.mjs";
+import { parseTrigger } from "../utils/parseTrigger.mjs";
+import { renderDropdownMenuItems } from "./renderItems.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/DropdownMenu/DropdownMenu.tsx
+const DropdownMenu = memo(({ children, defaultOpen, footer, header, iconAlign, iconSpaceMode, items, listItemHeight, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, trigger = "click", triggerProps, virtual, ...rest }) => {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+	const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);
+	const resolvedOpenOnHover = triggerProps?.openOnHover ?? openOnHover;
+	useEffect(() => {
+		if (open === void 0) return;
+		setUncontrolledOpen(open);
+	}, [open]);
+	const handleOpenChange = useCallback((nextOpen, details) => {
+		onOpenChange?.(nextOpen, details);
+		if (open === void 0) setUncontrolledOpen(nextOpen);
+	}, [onOpenChange, open]);
+	const menuItemsRef = useRef(null);
+	const isOpen = open ?? uncontrolledOpen;
+	const menuItems = useMemo(() => {
+		if (isOpen) {
+			const resolvedItems = typeof items === "function" ? items() : items;
+			const renderedItems = renderDropdownMenuItems(resolvedItems, [], {
+				iconAlign,
+				iconSpaceMode
+			});
+			menuItemsRef.current = renderedItems;
+			return renderedItems;
+		}
+		return menuItemsRef.current;
+	}, [
+		isOpen,
+		items,
+		iconAlign,
+		iconSpaceMode
+	]);
+	const handleOpenChangeComplete = useCallback((nextOpen) => {
+		onOpenChangeComplete?.(nextOpen);
+		if (!nextOpen) menuItemsRef.current = null;
+	}, [onOpenChangeComplete]);
+	const { container: portalContainer, ...restPortalProps } = portalProps ?? {};
+	const { resolvedNativeButton } = useNativeButton({
+		children,
+		nativeButton,
+		triggerNativeButton: triggerProps?.nativeButton
+	});
+	const hasSlots = header != null || footer != null;
+	const triggerElement = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		...triggerProps,
+		nativeButton: resolvedNativeButton,
+		openOnHover: resolvedOpenOnHover,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		...rest,
+		defaultOpen,
+		modal: false,
+		open,
+		onOpenChange: handleOpenChange,
+		onOpenChangeComplete: handleOpenChangeComplete,
+		children: [triggerElement, /* @__PURE__ */ jsx(DropdownMenuPortal, {
+			container: portalContainer,
+			...restPortalProps,
+			children: /* @__PURE__ */ jsx(DropdownMenuPositioner, {
+				...positionerProps,
+				hoverTrigger: resolvedOpenOnHover,
+				placement,
+				children: /* @__PURE__ */ jsxs(DropdownMenuPopupImpl, {
+					...popupProps,
+					"data-has-footer": footer == null ? void 0 : "",
+					"data-has-header": header == null ? void 0 : "",
+					xstyle: hasSlots && menuStyles.popupWithSlots,
+					children: [
+						header == null ? null : /* @__PURE__ */ jsx(DropdownMenuHeader, { children: header }),
+						hasSlots || virtual ? /* @__PURE__ */ jsx(DropdownMenuScrollViewport, {
+							listItemHeight,
+							virtual,
+							children: menuItems
+						}) : menuItems,
+						footer == null ? null : /* @__PURE__ */ jsx(DropdownMenuFooter, { children: footer })
+					]
+				})
+			})
+		})]
+	});
+});
+DropdownMenu.displayName = "DropdownMenuV2";
+//#endregion
+export { DropdownMenu as default };
+
+//# sourceMappingURL=DropdownMenu.mjs.map

package/es/DropdownMenu/DropdownMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n  DropdownMenuFooter,\n  DropdownMenuHeader,\n  DropdownMenuPopupImpl,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuScrollViewport,\n  DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport { menuStyles } from './style';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n  ({\n    children,\n    defaultOpen,\n    footer,\n    header,\n    iconAlign,\n    iconSpaceMode,\n    items,\n    listItemHeight,\n    nativeButton,\n    onOpenChange,\n    onOpenChangeComplete,\n    open,\n    placement = 'bottomLeft',\n    popupProps,\n    portalProps,\n    positionerProps,\n    trigger = 'click',\n    triggerProps,\n    virtual,\n    ...rest\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n    const resolvedOpenOnHover = (triggerProps as any)?.openOnHover ?? openOnHover;\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n        onOpenChange?.(nextOpen, details);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open],\n    );\n\n    const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n    const isOpen = open ?? uncontrolledOpen;\n    const menuItems = useMemo(() => {\n      if (isOpen) {\n        const resolvedItems = typeof items === 'function' ? items() : items;\n        const renderedItems = renderDropdownMenuItems(resolvedItems, [], {\n          iconAlign,\n          iconSpaceMode,\n        });\n        menuItemsRef.current = renderedItems;\n        return renderedItems;\n      }\n      return menuItemsRef.current;\n    }, [isOpen, items, iconAlign, iconSpaceMode]);\n    const handleOpenChangeComplete = useCallback(\n      (nextOpen: boolean) => {\n        onOpenChangeComplete?.(nextOpen);\n        if (!nextOpen) {\n          menuItemsRef.current = null;\n        }\n      },\n      [onOpenChangeComplete],\n    );\n    const { container: portalContainer, ...restPortalProps } = (portalProps ?? {}) as any;\n\n    const { resolvedNativeButton } = useNativeButton({\n      children,\n      nativeButton,\n      triggerNativeButton: triggerProps?.nativeButton,\n    });\n\n    const hasSlots = header != null || footer != null;\n\n    const triggerElement = (\n      <DropdownMenuTrigger\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        openOnHover={resolvedOpenOnHover}\n      >\n        {children}\n      </DropdownMenuTrigger>\n    );\n\n    return (\n      <Menu.Root\n        {...rest}\n        defaultOpen={defaultOpen}\n        modal={false}\n        open={open}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={handleOpenChangeComplete}\n      >\n        {triggerElement}\n        <DropdownMenuPortal container={portalContainer} {...restPortalProps}>\n          <DropdownMenuPositioner\n            {...positionerProps}\n            hoverTrigger={resolvedOpenOnHover}\n            placement={placement}\n          >\n            <DropdownMenuPopupImpl\n              {...popupProps}\n              data-has-footer={footer == null ? undefined : ''}\n              data-has-header={header == null ? undefined : ''}\n              xstyle={hasSlots && menuStyles.popupWithSlots}\n            >\n              {header == null ? null : <DropdownMenuHeader>{header}</DropdownMenuHeader>}\n              {hasSlots || virtual ? (\n                <DropdownMenuScrollViewport listItemHeight={listItemHeight} virtual={virtual}>\n                  {menuItems}\n                </DropdownMenuScrollViewport>\n              ) : (\n                menuItems\n              )}\n              {footer == null ? null : <DropdownMenuFooter>{footer}</DropdownMenuFooter>}\n            </DropdownMenuPopupImpl>\n          </DropdownMenuPositioner>\n        </DropdownMenuPortal>\n      </Menu.Root>\n    );\n  },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,UACA,aACA,QACA,QACA,WACA,eACA,OACA,gBACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,UAAU,SACV,cACA,SACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,WAAW,CAAC;CAE7E,MAAM,EAAE,gBAAgB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CACtE,MAAM,sBAAuB,cAAsB,eAAe;CAElE,gBAAgB;EACd,IAAI,SAAS,KAAA,GAAW;EACxB,oBAAoB,IAAI;CAC1B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;EAC/E,eAAe,UAAU,OAAO;EAChC,IAAI,SAAS,KAAA,GACX,oBAAoB,QAAQ;CAEhC,GACA,CAAC,cAAc,IAAI,CACrB;CAEA,MAAM,eAAe,OAA0D,IAAI;CACnF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;EAC9B,IAAI,QAAQ;GACV,MAAM,gBAAgB,OAAO,UAAU,aAAa,MAAM,IAAI;GAC9D,MAAM,gBAAgB,wBAAwB,eAAe,CAAC,GAAG;IAC/D;IACA;GACF,CAAC;GACD,aAAa,UAAU;GACvB,OAAO;EACT;EACA,OAAO,aAAa;CACtB,GAAG;EAAC;EAAQ;EAAO;EAAW;CAAa,CAAC;CAC5C,MAAM,2BAA2B,aAC9B,aAAsB;EACrB,uBAAuB,QAAQ;EAC/B,IAAI,CAAC,UACH,aAAa,UAAU;CAE3B,GACA,CAAC,oBAAoB,CACvB;CACA,MAAM,EAAE,WAAW,iBAAiB,GAAG,oBAAqB,eAAe,CAAC;CAE5E,MAAM,EAAE,yBAAyB,gBAAgB;EAC/C;EACA;EACA,qBAAqB,cAAc;CACrC,CAAC;CAED,MAAM,WAAW,UAAU,QAAQ,UAAU;CAE7C,MAAM,iBACJ,oBAAC,qBAAD;EACE,GAAI;EACJ,cAAc;EACd,aAAa;EAEZ;CACkB,CAAA;CAGvB,OACE,qBAAC,KAAK,MAAN;EACE,GAAI;EACS;EACb,OAAO;EACD;EACN,cAAc;EACd,sBAAsB;EANxB,UAAA,CAQG,gBACD,oBAAC,oBAAD;GAAoB,WAAW;GAAiB,GAAI;GAClD,UAAA,oBAAC,wBAAD;IACE,GAAI;IACJ,cAAc;IACH;IAEX,UAAA,qBAAC,uBAAD;KACE,GAAI;KACJ,mBAAiB,UAAU,OAAO,KAAA,IAAY;KAC9C,mBAAiB,UAAU,OAAO,KAAA,IAAY;KAC9C,QAAQ,YAAY,WAAW;KAJjC,UAAA;MAMG,UAAU,OAAO,OAAO,oBAAC,oBAAD,EAAA,UAAqB,OAA2B,CAAA;MACxE,YAAY,UACX,oBAAC,4BAAD;OAA4C;OAAyB;OAClE,UAAA;MACyB,CAAA,IAE5B;MAED,UAAU,OAAO,OAAO,oBAAC,oBAAD,EAAA,UAAqB,OAA2B,CAAA;KACpD;;GACD,CAAA;EACN,CAAA,CACX;;AAEf,CACF;AAEA,aAAa,cAAc"}

package/es/DropdownMenu/atoms.d.mts

@@ -0,0 +1,135 @@
+import "../styles/stylex/props.mjs";
+import { VirtualListProps } from "../internal/virtual/type.mjs";
+import "../internal/virtual/index.mjs";
+import { DropdownMenuPlacement } from "./type.mjs";
+import React from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/DropdownMenu/atoms.d.ts
+export declare const DropdownMenuRoot: typeof Menu.Root;
+export declare const DropdownMenuSubmenuRoot: typeof Menu.SubmenuRoot;
+export declare const DropdownMenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type DropdownMenuTriggerProps = Omit<React.ComponentPropsWithRef<typeof Menu.Trigger>, 'children' | 'render'> & {
+  children: React.ReactNode;
+};
+export declare const DropdownMenuTrigger: {
+  ({ children, className, nativeButton, ref: refProp, ...rest }: DropdownMenuTriggerProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {
+  /**
+   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.
+   */
+  container?: HTMLElement | null;
+};
+export declare const DropdownMenuPortal: {
+  ({ container, ...rest }: DropdownMenuPortalProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {
+  hoverTrigger?: boolean;
+  placement?: DropdownMenuPlacement;
+};
+export declare const DropdownMenuPositioner: {
+  ({ className, collisionPadding, placement, hoverTrigger, align, side, sideOffset, children, style, ...rest }: DropdownMenuPositionerProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;
+export declare const DropdownMenuPopup: {
+  (props: DropdownMenuPopupProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const DropdownMenuHeader: {
+  ({ className, ...rest }: DropdownMenuHeaderProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const DropdownMenuFooter: {
+  ({ className, ...rest }: DropdownMenuFooterProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement> & VirtualListProps;
+export declare const DropdownMenuScrollViewport: {
+  ({ children, className, getItemLabel, keepMounted, listItemHeight, virtual, ...rest }: DropdownMenuScrollViewportProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & {
+  danger?: boolean;
+};
+export declare const DropdownMenuItem: {
+  ({ className, danger, ...rest }: DropdownMenuItemProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {
+  danger?: boolean;
+};
+export declare const DropdownMenuCheckboxItemPrimitive: {
+  ({ className, danger, ...rest }: DropdownMenuCheckboxItemProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;
+export declare const DropdownMenuSeparator: {
+  ({ className, ...rest }: DropdownMenuSeparatorProps): React.JSX.Element;
+  displayName: string;
+};
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;
+export declare const DropdownMenuGroupLabel: {
+  ({ className, ...rest }: DropdownMenuGroupLabelProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {
+  danger?: boolean;
+};
+export declare const DropdownMenuSubmenuTrigger: {
+  ({ className, danger, ...rest }: DropdownMenuSubmenuTriggerProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const DropdownMenuItemContent: {
+  (props: DropdownMenuItemContentProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const DropdownMenuItemIcon: {
+  (props: DropdownMenuItemIconProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const DropdownMenuItemLabelGroup: {
+  ({ className, ...rest }: DropdownMenuItemLabelGroupProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const DropdownMenuItemLabel: {
+  ({ className, ...rest }: DropdownMenuItemLabelProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const DropdownMenuItemDesc: {
+  ({ className, ...rest }: DropdownMenuItemDescProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const DropdownMenuItemExtra: {
+  ({ className, ...rest }: DropdownMenuItemExtraProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const DropdownMenuSubmenuArrow: {
+  ({ className, ...rest }: DropdownMenuSubmenuArrowProps): React.JSX.Element;
+  displayName: string;
+};
+export type DropdownMenuSwitchItemProps = Omit<React.ComponentProps<typeof Menu.Item>, 'onClick'> & {
+  checked?: boolean;
+  closeOnClick?: boolean;
+  danger?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+export declare const DropdownMenuSwitchItem: {
+  ({ checked: checkedProp, className, closeOnClick, danger, defaultChecked, disabled, onCheckedChange, children, ...rest }: DropdownMenuSwitchItemProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=atoms.d.mts.map

package/es/DropdownMenu/atoms.mjs

@@ -0,0 +1,272 @@
+"use client";
+import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
+import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
+import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
+import { placementMap } from "../utils/placement.mjs";
+import { MenuVirtualList } from "../internal/virtual/MenuVirtualList.mjs";
+import { CLASSNAMES } from "../styles/classNames.mjs";
+import Switch from "../Switch/Switch.mjs";
+import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
+import { menuClassNames, menuStyles } from "./style.mjs";
+import { cloneElement, isValidElement, useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { mergeRefs, useMergeRefs } from "react-merge-refs";
+import { Menu } from "@base-ui/react/menu";
+//#region src/DropdownMenu/atoms.tsx
+const DropdownMenuRoot = (props) => /* @__PURE__ */ jsx(Menu.Root, {
+	modal: false,
+	...props
+});
+const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;
+const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;
+const mergeStateClassName = (base, className) => {
+	if (typeof className === "function") return (state) => clsx(base, className(state));
+	return clsx(base, className);
+};
+const sx = (styles, stableClassName) => clsx(stylex.props(styles).className, stableClassName);
+const itemClassName = (danger) => sx([menuStyles.item, danger && menuStyles.danger]);
+const DropdownMenuTrigger = ({ children, className, nativeButton, ref: refProp, ...rest }) => {
+	const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
+		children,
+		nativeButton
+	});
+	const renderer = (props) => {
+		const resolvedProps = (() => {
+			if (isNativeButtonTriggerElement) return props;
+			const { type, ...restProps } = props;
+			return restProps;
+		})();
+		const mergedProps = mergeProps(children.props, resolvedProps);
+		return cloneElement(children, {
+			...mergedProps,
+			className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),
+			ref: mergeRefs([
+				children.ref,
+				props.ref,
+				refProp
+			])
+		});
+	};
+	if (isValidElement(children)) return /* @__PURE__ */ jsx(Menu.Trigger, {
+		...rest,
+		nativeButton: resolvedNativeButton,
+		render: renderer
+	});
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		...rest,
+		className: clsx(CLASSNAMES.DropdownMenuTrigger, className),
+		nativeButton: resolvedNativeButton,
+		ref: refProp,
+		children
+	});
+};
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuPortal = ({ container, ...rest }) => {
+	const appElement = useAppElement();
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		container: container ?? appElement ?? void 0,
+		...rest
+	});
+};
+DropdownMenuPortal.displayName = "DropdownMenuPortal";
+const DropdownMenuPositioner = ({ className, collisionPadding, placement, hoverTrigger, align, side, sideOffset, children, style, ...rest }) => {
+	const placementConfig = placement ? placementMap[placement] : void 0;
+	const [positionerNode, setPositionerNode] = useState(null);
+	const explicitZIndex = typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0;
+	const { zIndex, ref: zRef } = useLayerZIndex("floating", explicitZIndex);
+	const composedRef = useMergeRefs([setPositionerNode, zRef]);
+	const resolvedStyle = typeof style === "function" ? (state) => ({
+		zIndex,
+		...style(state)
+	}) : {
+		zIndex,
+		...style
+	};
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		...rest,
+		align: align ?? placementConfig?.align,
+		collisionPadding: collisionPadding ?? getFloatingCollisionPadding(),
+		"data-hover-trigger": hoverTrigger || void 0,
+		"data-placement": placement,
+		ref: composedRef,
+		side: side ?? placementConfig?.side,
+		sideOffset: sideOffset ?? (placementConfig ? 6 : void 0),
+		style: resolvedStyle,
+		className: mergeStateClassName(sx(menuStyles.positioner, menuClassNames.positioner), className),
+		children: /* @__PURE__ */ jsx(FloatingLayerProvider, {
+			value: positionerNode,
+			children
+		})
+	});
+};
+DropdownMenuPositioner.displayName = "DropdownMenuPositioner";
+const DropdownMenuPopupImpl = ({ className, xstyle, ...rest }) => {
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		...rest,
+		className: mergeStateClassName(sx([menuStyles.popup, xstyle], menuClassNames.popup), className)
+	});
+};
+const DropdownMenuPopup = (props) => /* @__PURE__ */ jsx(DropdownMenuPopupImpl, { ...props });
+DropdownMenuPopup.displayName = "DropdownMenuPopup";
+const DropdownMenuHeader = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(sx(menuStyles.header), className),
+		"data-slot": "header"
+	});
+};
+DropdownMenuHeader.displayName = "DropdownMenuHeader";
+const DropdownMenuFooter = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(sx(menuStyles.footer), className),
+		"data-slot": "footer"
+	});
+};
+DropdownMenuFooter.displayName = "DropdownMenuFooter";
+const DropdownMenuScrollViewport = ({ children, className, getItemLabel, keepMounted, listItemHeight, virtual, ...rest }) => {
+	if (!virtual) return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(sx(menuStyles.slotViewport), className),
+		children
+	});
+	return /* @__PURE__ */ jsx(MenuVirtualList, {
+		...rest,
+		className,
+		getItemLabel,
+		itemSize: listItemHeight,
+		keepMounted,
+		children
+	});
+};
+DropdownMenuScrollViewport.displayName = "DropdownMenuScrollViewport";
+const DropdownMenuItem = ({ className, danger, ...rest }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		...rest,
+		className: (state) => clsx(itemClassName(danger), typeof className === "function" ? className(state) : className)
+	});
+};
+DropdownMenuItem.displayName = "DropdownMenuItem";
+const DropdownMenuCheckboxItemPrimitive = ({ className, danger, ...rest }) => {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		...rest,
+		className: (state) => clsx(itemClassName(danger), typeof className === "function" ? className(state) : className)
+	});
+};
+DropdownMenuCheckboxItemPrimitive.displayName = "DropdownMenuCheckboxItemPrimitive";
+const DropdownMenuSeparator = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		...rest,
+		className: (state) => clsx(sx(menuStyles.separator), typeof className === "function" ? className(state) : className)
+	});
+};
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+const DropdownMenuGroup = Menu.Group;
+const DropdownMenuGroupLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		...rest,
+		className: (state) => clsx(sx(menuStyles.groupLabel), typeof className === "function" ? className(state) : className)
+	});
+};
+DropdownMenuGroupLabel.displayName = "DropdownMenuGroupLabel";
+const DropdownMenuSubmenuTrigger = ({ className, danger, ...rest }) => {
+	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+		...rest,
+		className: (state) => clsx(itemClassName(danger), typeof className === "function" ? className(state) : className)
+	});
+};
+DropdownMenuSubmenuTrigger.displayName = "DropdownMenuSubmenuTrigger";
+const DropdownMenuItemContentImpl = ({ className, xstyle, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(sx([menuStyles.itemContent, xstyle]), className)
+	});
+};
+const DropdownMenuItemContent = (props) => /* @__PURE__ */ jsx(DropdownMenuItemContentImpl, { ...props });
+DropdownMenuItemContent.displayName = "DropdownMenuItemContent";
+const DropdownMenuItemIconImpl = ({ className, xstyle, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: clsx(sx([menuStyles.icon, xstyle], menuClassNames.icon), className)
+	});
+};
+const DropdownMenuItemIcon = (props) => /* @__PURE__ */ jsx(DropdownMenuItemIconImpl, { ...props });
+DropdownMenuItemIcon.displayName = "DropdownMenuItemIcon";
+const DropdownMenuItemLabelGroup = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(sx(menuStyles.labelGroup), className)
+	});
+};
+DropdownMenuItemLabelGroup.displayName = "DropdownMenuItemLabelGroup";
+const DropdownMenuItemLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: clsx(sx(menuStyles.label, menuClassNames.label), className)
+	});
+};
+DropdownMenuItemLabel.displayName = "DropdownMenuItemLabel";
+const DropdownMenuItemDesc = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: clsx(sx(menuStyles.desc), className)
+	});
+};
+DropdownMenuItemDesc.displayName = "DropdownMenuItemDesc";
+const DropdownMenuItemExtra = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: clsx(sx(menuStyles.extra), className)
+	});
+};
+DropdownMenuItemExtra.displayName = "DropdownMenuItemExtra";
+const DropdownMenuSubmenuArrow = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: clsx(sx(menuStyles.submenuArrow, menuClassNames.submenuArrow), className)
+	});
+};
+DropdownMenuSubmenuArrow.displayName = "DropdownMenuSubmenuArrow";
+const DropdownMenuSwitchItem = ({ checked: checkedProp, className, closeOnClick = false, danger, defaultChecked, disabled, onCheckedChange, children, ...rest }) => {
+	const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+	const isControlled = checkedProp !== void 0;
+	const checked = isControlled ? checkedProp : internalChecked;
+	const handleCheckedChange = useCallback((newChecked) => {
+		if (!isControlled) setInternalChecked(newChecked);
+		onCheckedChange?.(newChecked);
+	}, [isControlled, onCheckedChange]);
+	return /* @__PURE__ */ jsxs(Menu.Item, {
+		...rest,
+		closeOnClick,
+		disabled,
+		className: (state) => clsx(itemClassName(danger), typeof className === "function" ? className(state) : className),
+		onClick: (e) => {
+			e.preventDefault();
+			if (!disabled) handleCheckedChange(!checked);
+		},
+		children: [children, /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "inline-flex",
+				marginInlineStart: 16
+			},
+			onFocus: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Switch, {
+				checked,
+				disabled,
+				size: "small",
+				tabIndex: -1,
+				onChange: handleCheckedChange,
+				onClick: (_, e) => e.stopPropagation()
+			})
+		})]
+	});
+};
+DropdownMenuSwitchItem.displayName = "DropdownMenuSwitchItem";
+//#endregion
+export { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentImpl, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemIconImpl, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPopupImpl, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger };
+
+//# sourceMappingURL=atoms.mjs.map