@lobehub/ui 6.0.0-beta.6 → 6.0.0-beta.8

package/es/ColorPicker/type.d.mts

@@ -1,18 +1,33 @@
 import { InputSize } from "../Input/type.mjs";
 import { CSSProperties, ReactElement } from "react";
 //#region src/ColorPicker/type.d.ts
+export type ColorPickerFormat = 'hex' | 'rgb' | 'hsl';
+export type ColorPickerTrigger = 'swatch' | 'field' | 'chip';
 export interface ColorPickerProps {
   alpha?: boolean;
   children?: ReactElement;
   className?: string;
+  defaultFormat?: ColorPickerFormat;
   defaultValue?: string;
   disabled?: boolean;
   onChange?: (hex: string) => void;
   onChangeComplete?: (hex: string) => void;
   presets?: string[];
+  /**
+   * Show the colours committed in this session under a Recent tab. Defaults to `true`.
+   */
+  recent?: boolean;
+  /**
+   * Same as `trigger="field"`.
+   */
   showText?: boolean;
   size?: InputSize;
   style?: CSSProperties;
+  /**
+   * `swatch` (default) is a colour tile; `field` is an input-like control with the hex,
+   * alpha and a caret; `chip` is a rounded pill for toolbars.
+   */
+  trigger?: ColorPickerTrigger;
   value?: string;
 }
 //#endregion

package/es/ColorSwatches/type.d.mts

@@ -26,8 +26,8 @@ export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   shape?: 'circle' | 'square';
   size?: number;
   texts?: {
-    custom: string;
-    presets: string;
+    custom?: string;
+    presets?: string;
   };
   value?: string;
 }

package/es/ContextMenu/ContextMenuHost.mjs

@@ -12,7 +12,7 @@ import { renderContextMenuItems } from "./renderItems.mjs";
 import { closeContextMenu, getServerSnapshot, getSnapshot, setContextMenuState, subscribe, updateLastPointer } from "./store.mjs";
 import { memo, useEffect, useMemo, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ContextMenu } from "@base-ui/react/context-menu";
 //#region src/ContextMenu/ContextMenuHost.tsx
@@ -71,7 +71,7 @@ const ContextMenuHost = memo(() => {
 				children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
 					"data-has-footer": state.footer == null ? void 0 : "",
 					"data-has-header": state.header == null ? void 0 : "",
-					className: clsx(stylex.props(menuStyles.popup, hasSlots && menuStyles.popupWithSlots).className, menuClassNames.popup),
+					className: clsx$1(stylex.props(menuStyles.popup, hasSlots && menuStyles.popupWithSlots).className, menuClassNames.popup),
 					onContextMenu: preventDefaultAndStopPropagation,
 					children: [
 						state.header == null ? null : /* @__PURE__ */ jsx("div", {

package/es/ContextMenu/ContextMenuHost.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../src/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { MenuVirtualList } from '@/internal/virtual';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n  closeContextMenu,\n  getServerSnapshot,\n  getSnapshot,\n  setContextMenuState,\n  subscribe,\n  updateLastPointer,\n} from './store';\nimport { menuClassNames, menuStyles, styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n  const isClient = useIsClient();\n  const appElement = useAppElement();\n  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  useEffect(() => {\n    const DEV = process.env.NODE_ENV === 'development';\n    if (!isClient || !DEV) return;\n    return registerDevSingleton('ContextMenuHost', document.body);\n  }, [isClient]);\n\n  useEffect(() => {\n    const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n    window.addEventListener('pointerdown', handler, true);\n    window.addEventListener('contextmenu', handler, true);\n    return () => {\n      window.removeEventListener('pointerdown', handler, true);\n      window.removeEventListener('contextmenu', handler, true);\n    };\n  }, []);\n\n  const menuItems = useMemo(\n    () =>\n      renderContextMenuItems(state.items, [], {\n        iconAlign: state.iconAlign,\n        iconSpaceMode: state.iconSpaceMode,\n      }),\n    [state.items, state.iconAlign, state.iconSpaceMode],\n  );\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n  const hasSlots = state.header != null || state.footer != null;\n  if (!isClient) return null;\n  if (!state.open && state.items.length === 0) return null;\n\n  return (\n    <ContextMenu.Root\n      open={state.open}\n      onOpenChange={(open) => {\n        if (open) {\n          setContextMenuState({ open });\n          return;\n        }\n        closeContextMenu();\n      }}\n    >\n      <ContextMenu.Portal container={appElement}>\n        <ContextMenu.Positioner\n          anchor={state.anchor ?? undefined}\n          className={styles.positioner}\n          collisionPadding={getFloatingCollisionPadding()}\n          ref={zRef as any}\n          sideOffset={6}\n          style={{ ...noAnimationStyles, zIndex }}\n        >\n          <ContextMenu.Popup\n            data-has-footer={state.footer == null ? undefined : ''}\n            data-has-header={state.header == null ? undefined : ''}\n            className={clsx(\n              stylex.props(menuStyles.popup, hasSlots && menuStyles.popupWithSlots).className,\n              menuClassNames.popup,\n            )}\n            onContextMenu={preventDefaultAndStopPropagation}\n          >\n            {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n            {state.virtual ? (\n              <MenuVirtualList itemSize={state.listItemHeight}>{menuItems}</MenuVirtualList>\n            ) : hasSlots ? (\n              <div className={styles.slotViewport}>{menuItems}</div>\n            ) : (\n              menuItems\n            )}\n            {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAM,oBAAoB,EACxB,sCAAsC,MACxC;AACA,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,cAAc;CACjC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAC5E,gBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;EACrC,IAAI,CAAC,YAAY,CAAC,KAAK;EACvB,OAAO,qBAAqB,mBAAmB,SAAS,IAAI;CAC9D,GAAG,CAAC,QAAQ,CAAC;CACb,gBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,KAAK;EAC7E,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,aAAa;GACX,OAAO,oBAAoB,eAAe,SAAS,IAAI;GACvD,OAAO,oBAAoB,eAAe,SAAS,IAAI;EACzD;CACF,GAAG,CAAC,CAAC;CACL,MAAM,YAAY,cAAc,uBAAuB,MAAM,OAAO,CAAC,GAAG;EACtE,WAAW,MAAM;EACjB,eAAe,MAAM;CACvB,CAAC,GAAG;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;CAAa,CAAC;CACvD,MAAM,EACJ,QACA,KAAK,SACH,eAA+B,UAAU;CAC7C,MAAM,WAAW,MAAM,UAAU,QAAQ,MAAM,UAAU;CACzD,IAAI,CAAC,UAAU,OAAO;CACtB,IAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,GAAG,OAAO;CACpD,OAAO,oBAAC,YAAY,MAAb;EAAkB,MAAM,MAAM;EAAM,eAAc,SAAQ;GAC/D,IAAI,MAAM;IACR,oBAAoB,EAClB,KACF,CAAC;IACD;GACF;GACA,iBAAiB;EACnB;EACI,UAAA,oBAAC,YAAY,QAAb;GAAoB,WAAW;GAC7B,UAAA,oBAAC,YAAY,YAAb;IAAwB,QAAQ,MAAM,UAAU,KAAA;IAAW,WAAW,OAAO;IAAY,kBAAkB,4BAA4B;IAAG,KAAK;IAAa,YAAY;IAAG,OAAO;KAClL,GAAG;KACH;IACF;IACI,UAAA,qBAAC,YAAY,OAAb;KAAmB,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KAAI,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KAAI,WAAW,KAAK,OAAO,MAAM,WAAW,OAAO,YAAY,WAAW,cAAc,CAAC,CAAC,WAAW,eAAe,KAAK;KAAG,eAAe;KAA1Q,UAAA;MACG,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;MAChF,MAAM,UAAU,oBAAC,iBAAD;OAAiB,UAAU,MAAM;OAAiB,UAAA;MAA2B,CAAA,IAAI,WAAW,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAe,UAAA;MAAe,CAAA,IAAI;MACrK,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;KAChE;;GACG,CAAA;EACN,CAAA;CACJ,CAAA;AACtB,CAAC;AACD,gBAAgB,cAAc"}
+{"version":3,"file":"ContextMenuHost.mjs","names":["clsx"],"sources":["../../src/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { MenuVirtualList } from '@/internal/virtual';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n  closeContextMenu,\n  getServerSnapshot,\n  getSnapshot,\n  setContextMenuState,\n  subscribe,\n  updateLastPointer,\n} from './store';\nimport { menuClassNames, menuStyles, styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n  const isClient = useIsClient();\n  const appElement = useAppElement();\n  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n  useEffect(() => {\n    const DEV = process.env.NODE_ENV === 'development';\n    if (!isClient || !DEV) return;\n    return registerDevSingleton('ContextMenuHost', document.body);\n  }, [isClient]);\n\n  useEffect(() => {\n    const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n    window.addEventListener('pointerdown', handler, true);\n    window.addEventListener('contextmenu', handler, true);\n    return () => {\n      window.removeEventListener('pointerdown', handler, true);\n      window.removeEventListener('contextmenu', handler, true);\n    };\n  }, []);\n\n  const menuItems = useMemo(\n    () =>\n      renderContextMenuItems(state.items, [], {\n        iconAlign: state.iconAlign,\n        iconSpaceMode: state.iconSpaceMode,\n      }),\n    [state.items, state.iconAlign, state.iconSpaceMode],\n  );\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n  const hasSlots = state.header != null || state.footer != null;\n  if (!isClient) return null;\n  if (!state.open && state.items.length === 0) return null;\n\n  return (\n    <ContextMenu.Root\n      open={state.open}\n      onOpenChange={(open) => {\n        if (open) {\n          setContextMenuState({ open });\n          return;\n        }\n        closeContextMenu();\n      }}\n    >\n      <ContextMenu.Portal container={appElement}>\n        <ContextMenu.Positioner\n          anchor={state.anchor ?? undefined}\n          className={styles.positioner}\n          collisionPadding={getFloatingCollisionPadding()}\n          ref={zRef as any}\n          sideOffset={6}\n          style={{ ...noAnimationStyles, zIndex }}\n        >\n          <ContextMenu.Popup\n            data-has-footer={state.footer == null ? undefined : ''}\n            data-has-header={state.header == null ? undefined : ''}\n            className={clsx(\n              stylex.props(menuStyles.popup, hasSlots && menuStyles.popupWithSlots).className,\n              menuClassNames.popup,\n            )}\n            onContextMenu={preventDefaultAndStopPropagation}\n          >\n            {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n            {state.virtual ? (\n              <MenuVirtualList itemSize={state.listItemHeight}>{menuItems}</MenuVirtualList>\n            ) : hasSlots ? (\n              <div className={styles.slotViewport}>{menuItems}</div>\n            ) : (\n              menuItems\n            )}\n            {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n          </ContextMenu.Popup>\n        </ContextMenu.Positioner>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAM,oBAAoB,EACxB,sCAAsC,MACxC;AACA,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,cAAc;CACjC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAC5E,gBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;EACrC,IAAI,CAAC,YAAY,CAAC,KAAK;EACvB,OAAO,qBAAqB,mBAAmB,SAAS,IAAI;CAC9D,GAAG,CAAC,QAAQ,CAAC;CACb,gBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,KAAK;EAC7E,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,aAAa;GACX,OAAO,oBAAoB,eAAe,SAAS,IAAI;GACvD,OAAO,oBAAoB,eAAe,SAAS,IAAI;EACzD;CACF,GAAG,CAAC,CAAC;CACL,MAAM,YAAY,cAAc,uBAAuB,MAAM,OAAO,CAAC,GAAG;EACtE,WAAW,MAAM;EACjB,eAAe,MAAM;CACvB,CAAC,GAAG;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;CAAa,CAAC;CACvD,MAAM,EACJ,QACA,KAAK,SACH,eAA+B,UAAU;CAC7C,MAAM,WAAW,MAAM,UAAU,QAAQ,MAAM,UAAU;CACzD,IAAI,CAAC,UAAU,OAAO;CACtB,IAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,GAAG,OAAO;CACpD,OAAO,oBAAC,YAAY,MAAb;EAAkB,MAAM,MAAM;EAAM,eAAc,SAAQ;GAC/D,IAAI,MAAM;IACR,oBAAoB,EAClB,KACF,CAAC;IACD;GACF;GACA,iBAAiB;EACnB;EACI,UAAA,oBAAC,YAAY,QAAb;GAAoB,WAAW;GAC7B,UAAA,oBAAC,YAAY,YAAb;IAAwB,QAAQ,MAAM,UAAU,KAAA;IAAW,WAAW,OAAO;IAAY,kBAAkB,4BAA4B;IAAG,KAAK;IAAa,YAAY;IAAG,OAAO;KAClL,GAAG;KACH;IACF;IACI,UAAA,qBAAC,YAAY,OAAb;KAAmB,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KAAI,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KAAI,WAAWA,OAAK,OAAO,MAAM,WAAW,OAAO,YAAY,WAAW,cAAc,CAAC,CAAC,WAAW,eAAe,KAAK;KAAG,eAAe;KAA1Q,UAAA;MACG,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;MAChF,MAAM,UAAU,oBAAC,iBAAD;OAAiB,UAAU,MAAM;OAAiB,UAAA;MAA2B,CAAA,IAAI,WAAW,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAe,UAAA;MAAe,CAAA,IAAI;MACrK,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;KAChE;;GACG,CAAA;EACN,CAAA;CACJ,CAAA;AACtB,CAAC;AACD,gBAAgB,cAAc"}

package/es/ContextMenu/ContextMenuTrigger.mjs

@@ -3,7 +3,7 @@ import { CLASSNAMES } from "../styles/classNames.mjs";
 import { getServerSnapshot, getSnapshot, showContextMenu, subscribe } from "./store.mjs";
 import React, { cloneElement, isValidElement, memo, useCallback, useId, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/ContextMenu/ContextMenuTrigger.tsx
 const styles = { trigger: { display: "contents" } };
@@ -34,7 +34,7 @@ const ContextMenuTrigger = memo(({ children, footer, header, items, listItemHeig
 	const triggerProps = {
 		...rest,
 		"aria-expanded": open || void 0,
-		"className": clsx(CLASSNAMES.ContextTrigger, rest.className),
+		"className": clsx$1(CLASSNAMES.ContextTrigger, rest.className),
 		"data-contextmenu-trigger": triggerId,
 		"data-popup-open": open ? "" : void 0,
 		"data-state": open ? "open" : void 0,

package/es/ContextMenu/ContextMenuTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuTrigger.mjs","names":[],"sources":["../../src/ContextMenu/ContextMenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport clsx from 'clsx';\nimport React, {\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  memo,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useId,\n  useSyncExternalStore,\n} from 'react';\n\nimport type { VirtualListProps } from '@/internal/virtual';\nimport { CLASSNAMES } from '@/styles/classNames';\n\nimport { getServerSnapshot, getSnapshot, showContextMenu, subscribe } from './store';\nimport { type ContextMenuItem } from './type';\n\nexport type ContextMenuTriggerProps = Pick<VirtualListProps, 'virtual' | 'listItemHeight'> & {\n  children: ReactNode;\n  /**\n   * Footer slot pinned below the scrollable items area, with a divider border.\n   */\n  footer?: ReactNode;\n  /**\n   * Header slot pinned above the scrollable items area, with a divider border.\n   */\n  header?: ReactNode;\n  /**\n   * Menu items to display. Supports lazy rendering via function.\n   * When provided, context menu will be automatically shown on right-click.\n   */\n  items?: ContextMenuItem[] | (() => ContextMenuItem[]);\n  /**\n   * Custom context menu handler. If `items` is provided, this is optional.\n   */\n  onContextMenu?: (event: MouseEvent<HTMLElement>) => void;\n} & Omit<HTMLAttributes<HTMLElement>, 'onContextMenu' | 'children'>;\n\nconst styles = {\n  trigger: {\n    display: 'contents',\n  },\n};\n\nexport const ContextMenuTrigger = memo<ContextMenuTriggerProps>(\n  ({ children, footer, header, items, listItemHeight, onContextMenu, virtual, ...rest }) => {\n    const triggerId = useId();\n    const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const open = state.open && state.triggerId === triggerId;\n\n    const handleContextMenu = useCallback(\n      (event: MouseEvent<HTMLElement>) => {\n        if (items) {\n          event.preventDefault();\n          const resolvedItems = typeof items === 'function' ? items() : items;\n          showContextMenu(resolvedItems, { footer, header, listItemHeight, virtual });\n        }\n        onContextMenu?.(event);\n      },\n      [items, onContextMenu, footer, header, listItemHeight, virtual],\n    );\n\n    const triggerProps = {\n      ...rest,\n      'aria-expanded': open || undefined,\n      'className': clsx(CLASSNAMES.ContextTrigger, rest.className),\n      'data-contextmenu-trigger': triggerId,\n      'data-popup-open': open ? '' : undefined,\n      'data-state': open ? 'open' : undefined,\n      'onContextMenu': handleContextMenu,\n    };\n\n    if (isValidElement(children) && React.Children.only(children)) {\n      return cloneElement(children, mergeProps(children.props as any, triggerProps));\n    }\n\n    return (\n      <span style={styles.trigger} {...triggerProps}>\n        {children}\n      </span>\n    );\n  },\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n"],"mappings":";;;;;;;;AA2CA,MAAM,SAAS,EACb,SAAS,EACP,SAAS,WACX,EACF;AAEA,MAAa,qBAAqB,MAC/B,EAAE,UAAU,QAAQ,QAAQ,OAAO,gBAAgB,eAAe,SAAS,GAAG,WAAW;CACxF,MAAM,YAAY,MAAM;CACxB,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAC5E,MAAM,OAAO,MAAM,QAAQ,MAAM,cAAc;CAE/C,MAAM,oBAAoB,aACvB,UAAmC;EAClC,IAAI,OAAO;GACT,MAAM,eAAe;GACrB,MAAM,gBAAgB,OAAO,UAAU,aAAa,MAAM,IAAI;GAC9D,gBAAgB,eAAe;IAAE;IAAQ;IAAQ;IAAgB;GAAQ,CAAC;EAC5E;EACA,gBAAgB,KAAK;CACvB,GACA;EAAC;EAAO;EAAe;EAAQ;EAAQ;EAAgB;CAAO,CAChE;CAEA,MAAM,eAAe;EACnB,GAAG;EACH,iBAAiB,QAAQ,KAAA;EACzB,aAAa,KAAK,WAAW,gBAAgB,KAAK,SAAS;EAC3D,4BAA4B;EAC5B,mBAAmB,OAAO,KAAK,KAAA;EAC/B,cAAc,OAAO,SAAS,KAAA;EAC9B,iBAAiB;CACnB;CAEA,IAAI,eAAe,QAAQ,KAAK,MAAM,SAAS,KAAK,QAAQ,GAC1D,OAAO,aAAa,UAAU,WAAW,SAAS,OAAc,YAAY,CAAC;CAG/E,OACE,oBAAC,QAAD;EAAM,OAAO,OAAO;EAAS,GAAI;EAC9B;CACG,CAAA;AAEV,CACF;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"ContextMenuTrigger.mjs","names":["clsx"],"sources":["../../src/ContextMenu/ContextMenuTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport clsx from 'clsx';\nimport React, {\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  memo,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useId,\n  useSyncExternalStore,\n} from 'react';\n\nimport type { VirtualListProps } from '@/internal/virtual';\nimport { CLASSNAMES } from '@/styles/classNames';\n\nimport { getServerSnapshot, getSnapshot, showContextMenu, subscribe } from './store';\nimport { type ContextMenuItem } from './type';\n\nexport type ContextMenuTriggerProps = Pick<VirtualListProps, 'virtual' | 'listItemHeight'> & {\n  children: ReactNode;\n  /**\n   * Footer slot pinned below the scrollable items area, with a divider border.\n   */\n  footer?: ReactNode;\n  /**\n   * Header slot pinned above the scrollable items area, with a divider border.\n   */\n  header?: ReactNode;\n  /**\n   * Menu items to display. Supports lazy rendering via function.\n   * When provided, context menu will be automatically shown on right-click.\n   */\n  items?: ContextMenuItem[] | (() => ContextMenuItem[]);\n  /**\n   * Custom context menu handler. If `items` is provided, this is optional.\n   */\n  onContextMenu?: (event: MouseEvent<HTMLElement>) => void;\n} & Omit<HTMLAttributes<HTMLElement>, 'onContextMenu' | 'children'>;\n\nconst styles = {\n  trigger: {\n    display: 'contents',\n  },\n};\n\nexport const ContextMenuTrigger = memo<ContextMenuTriggerProps>(\n  ({ children, footer, header, items, listItemHeight, onContextMenu, virtual, ...rest }) => {\n    const triggerId = useId();\n    const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const open = state.open && state.triggerId === triggerId;\n\n    const handleContextMenu = useCallback(\n      (event: MouseEvent<HTMLElement>) => {\n        if (items) {\n          event.preventDefault();\n          const resolvedItems = typeof items === 'function' ? items() : items;\n          showContextMenu(resolvedItems, { footer, header, listItemHeight, virtual });\n        }\n        onContextMenu?.(event);\n      },\n      [items, onContextMenu, footer, header, listItemHeight, virtual],\n    );\n\n    const triggerProps = {\n      ...rest,\n      'aria-expanded': open || undefined,\n      'className': clsx(CLASSNAMES.ContextTrigger, rest.className),\n      'data-contextmenu-trigger': triggerId,\n      'data-popup-open': open ? '' : undefined,\n      'data-state': open ? 'open' : undefined,\n      'onContextMenu': handleContextMenu,\n    };\n\n    if (isValidElement(children) && React.Children.only(children)) {\n      return cloneElement(children, mergeProps(children.props as any, triggerProps));\n    }\n\n    return (\n      <span style={styles.trigger} {...triggerProps}>\n        {children}\n      </span>\n    );\n  },\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n"],"mappings":";;;;;;;;AA2CA,MAAM,SAAS,EACb,SAAS,EACP,SAAS,WACX,EACF;AAEA,MAAa,qBAAqB,MAC/B,EAAE,UAAU,QAAQ,QAAQ,OAAO,gBAAgB,eAAe,SAAS,GAAG,WAAW;CACxF,MAAM,YAAY,MAAM;CACxB,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAC5E,MAAM,OAAO,MAAM,QAAQ,MAAM,cAAc;CAE/C,MAAM,oBAAoB,aACvB,UAAmC;EAClC,IAAI,OAAO;GACT,MAAM,eAAe;GACrB,MAAM,gBAAgB,OAAO,UAAU,aAAa,MAAM,IAAI;GAC9D,gBAAgB,eAAe;IAAE;IAAQ;IAAQ;IAAgB;GAAQ,CAAC;EAC5E;EACA,gBAAgB,KAAK;CACvB,GACA;EAAC;EAAO;EAAe;EAAQ;EAAQ;EAAgB;CAAO,CAChE;CAEA,MAAM,eAAe;EACnB,GAAG;EACH,iBAAiB,QAAQ,KAAA;EACzB,aAAaA,OAAK,WAAW,gBAAgB,KAAK,SAAS;EAC3D,4BAA4B;EAC5B,mBAAmB,OAAO,KAAK,KAAA;EAC/B,cAAc,OAAO,SAAS,KAAA;EAC9B,iBAAiB;CACnB;CAEA,IAAI,eAAe,QAAQ,KAAK,MAAM,SAAS,KAAK,QAAQ,GAC1D,OAAO,aAAa,UAAU,WAAW,SAAS,OAAc,YAAY,CAAC;CAG/E,OACE,oBAAC,QAAD;EAAM,OAAO,OAAO;EAAS,GAAI;EAC9B;CACG,CAAA;AAEV,CACF;AAEA,mBAAmB,cAAc"}

package/es/ContextMenu/renderItems.mjs

@@ -11,7 +11,7 @@ import { styles } from "../DropdownMenu/sharedStyle.mjs";
 import { preventDefaultAndStopPropagation } from "../utils/dom.mjs";
 import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { Check } from "lucide-react";
 import { ContextMenu } from "@base-ui/react/context-menu";
@@ -115,7 +115,7 @@ const renderItemContent = (item, options, iconNode) => {
 		children: [
 			shouldRenderIcon ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": !hasIcon,
-				className: clsx(stylex.props(menuStyles.icon, alignStart && menuStyles.iconAlignStart).className, menuClassNames.icon),
+				className: clsx$1(stylex.props(menuStyles.icon, alignStart && menuStyles.iconAlignStart).className, menuClassNames.icon),
 				children: hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, "small") : null
 			}) : null,
 			labelNode,
@@ -245,7 +245,7 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
 					sideOffset: -1,
 					onContextMenu: preventDefaultAndStopPropagation,
 					children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
-						className: clsx(stylex.props(menuStyles.popup, submenuHasSlots && menuStyles.popupWithSlots).className, menuClassNames.popup),
+						className: clsx$1(stylex.props(menuStyles.popup, submenuHasSlots && menuStyles.popupWithSlots).className, menuClassNames.popup),
 						children: [
 							submenu.header == null ? null : /* @__PURE__ */ jsx("div", {
 								className: styles.header,

package/es/ContextMenu/renderItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../src/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { menuClassNames, menuStyles, styles } from '@/DropdownMenu/sharedStyle';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport type { BaseMenuItemGroupType, BaseSubMenuType } from '@/internal/menu/baseItem';\nimport {\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/internal/menu/renderUtils';\nimport type { MenuDividerType, MenuInfo, MenuItemType } from '@/internal/menu/type';\nimport { SubmenuArrowIcon } from '@/internal/SubmenuArrowIcon';\nimport Switch from '@/Switch';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport {\n  type ContextMenuCheckboxItem,\n  type ContextMenuItem,\n  type ContextMenuSwitchItem,\n} from './type';\n\ntype ContextMenuPositionerProps = ComponentProps<typeof ContextMenu.Positioner>;\n\n/**\n * Submenu positioners are portaled outside the root menu, so they must allocate\n * their own layer z-index (same pattern as DropdownMenu) rather than relying on\n * the fixed CSS fallback that can fall behind after repeated root openings (#608).\n */\nconst ContextMenuSubmenuPositioner = memo(\n  ({ collisionPadding, style, ...rest }: ContextMenuPositionerProps) => {\n    const explicitZIndex =\n      typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n        ? style.zIndex\n        : undefined;\n    const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n\n    const resolvedStyle =\n      typeof style === 'function'\n        ? (state: any) => ({ zIndex, ...style(state) })\n        : { zIndex, ...style };\n\n    return (\n      <ContextMenu.Positioner\n        {...rest}\n        collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n        ref={zRef as any}\n        style={resolvedStyle}\n      />\n    );\n  },\n);\n\nContextMenuSubmenuPositioner.displayName = 'ContextMenuSubmenuPositioner';\n\nexport type { IconAlign, IconSpaceMode } from '@/internal/menu/renderUtils';\n\nconst EmptyMenuItem = memo(() => {\n  const { t } = useTranslation(common);\n  return (\n    <ContextMenu.Item\n      disabled\n      className={stylex.props(menuStyles.item, menuStyles.empty).className}\n    >\n      <div className={styles.itemContent}>\n        <span className={styles.label}>{t('common.empty')}</span>\n      </div>\n    </ContextMenu.Item>\n  );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n  checked?: boolean;\n  children: ReactNode;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n  checked: checkedProp,\n  children,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  label,\n  onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <ContextMenu.Item\n      className={stylex.props(menuStyles.item, danger && menuStyles.danger).className}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      label={label}\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </ContextMenu.Item>\n  );\n};\n\nconst renderItemContent = (\n  item: MenuItemType | BaseSubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const desc = 'desc' in item ? item.desc : undefined;\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  const labelNode = desc ? (\n    <div className={styles.labelGroup}>\n      <span className={styles.label}>{label}</span>\n      <span className={styles.desc}>{desc}</span>\n    </div>\n  ) : (\n    <span className={styles.label}>{label}</span>\n  );\n\n  return (\n    <div\n      className={\n        stylex.props(menuStyles.itemContent, alignStart && menuStyles.itemContentAlignStart)\n          .className\n      }\n    >\n      {shouldRenderIcon ? (\n        <span\n          aria-hidden={!hasIcon}\n          className={clsx(\n            stylex.props(menuStyles.icon, alignStart && menuStyles.iconAlignStart).className,\n            menuClassNames.icon,\n          )}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n        </span>\n      ) : null}\n      {labelNode}\n      {extra ? <span className={styles.extra}>{extra}</span> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <span className={styles.submenuArrow}>\n          <SubmenuArrowIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n  items: ContextMenuItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n      const checkboxItem = item as ContextMenuCheckboxItem;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <ContextMenu.CheckboxItemIndicator>\n          <Icon icon={Check} size={'small'} />\n        </ContextMenu.CheckboxItemIndicator>\n      );\n\n      return (\n        <ContextMenu.CheckboxItem\n          checked={checkboxItem.checked}\n          className={stylex.props(menuStyles.item, isDanger && menuStyles.danger).className}\n          closeOnClick={checkboxItem.closeOnClick}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(\n            checkboxItem,\n            { iconAlign, indicatorOnRight, reserveIconSpace },\n            indicator,\n          )}\n        </ContextMenu.CheckboxItem>\n      );\n    }\n\n    if ((item as ContextMenuSwitchItem).type === 'switch') {\n      const switchItem = item as ContextMenuSwitchItem;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <ContextMenuSwitchItemInternal\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={switchItem.onCheckedChange}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </ContextMenuSwitchItemInternal>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <ContextMenu.Separator className={styles.separator} key={itemKey} />;\n    }\n\n    if ((item as BaseMenuItemGroupType).type === 'group') {\n      const group = item as BaseMenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <ContextMenu.Group key={itemKey}>\n          {group.label ? (\n            <ContextMenu.GroupLabel className={styles.groupLabel}>\n              {group.label}\n            </ContextMenu.GroupLabel>\n          ) : null}\n          {group.children\n            ? renderContextMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </ContextMenu.Group>\n      );\n    }\n\n    if (\n      (item as BaseSubMenuType).type === 'submenu' ||\n      ('children' in item && (item as BaseSubMenuType).children)\n    ) {\n      const submenu = item as BaseSubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n      const submenuHasSlots = submenu.header != null || submenu.footer != null;\n      const submenuBody =\n        submenu.children && submenu.children.length > 0 ? (\n          renderContextMenuItems(submenu.children, nextKeyPath, {\n            iconAlign,\n            iconSpaceMode,\n          })\n        ) : (\n          <EmptyMenuItem />\n        );\n\n      return (\n        <ContextMenu.SubmenuRoot\n          defaultOpen={submenu.defaultOpen}\n          key={itemKey}\n          open={submenu.open}\n          onOpenChange={submenu.onOpenChange}\n        >\n          <ContextMenu.SubmenuTrigger\n            {...submenu.triggerProps}\n            className={stylex.props(menuStyles.item, isDanger && menuStyles.danger).className}\n            closeDelay={submenu.closeDelay}\n            delay={submenu.delay}\n            disabled={submenu.disabled}\n            label={labelText}\n            openOnHover={submenu.openOnHover}\n            onClick={submenu.onClick}\n          >\n            {renderItemContent(submenu, {\n              iconAlign,\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </ContextMenu.SubmenuTrigger>\n          <ContextMenu.Portal>\n            <ContextMenuSubmenuPositioner\n              alignOffset={-4}\n              className={styles.positioner}\n              data-submenu=\"\"\n              sideOffset={-1}\n              onContextMenu={preventDefaultAndStopPropagation}\n            >\n              <ContextMenu.Popup\n                className={clsx(\n                  stylex.props(menuStyles.popup, submenuHasSlots && menuStyles.popupWithSlots)\n                    .className,\n                  menuClassNames.popup,\n                )}\n              >\n                {submenu.header == null ? null : (\n                  <div className={styles.header}>{submenu.header}</div>\n                )}\n                {submenuHasSlots ? (\n                  <div className={styles.slotViewport}>{submenuBody}</div>\n                ) : (\n                  submenuBody\n                )}\n                {submenu.footer == null ? null : (\n                  <div className={styles.footer}>{submenu.footer}</div>\n                )}\n              </ContextMenu.Popup>\n            </ContextMenuSubmenuPositioner>\n          </ContextMenu.Portal>\n        </ContextMenu.SubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <ContextMenu.Item\n        className={stylex.props(menuStyles.item, isDanger && menuStyles.danger).className}\n        closeOnClick={menuItem.closeOnClick}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </ContextMenu.Item>\n    );\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"renderItems.mjs","names":["common","clsx"],"sources":["../../src/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { menuClassNames, menuStyles, styles } from '@/DropdownMenu/sharedStyle';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport type { BaseMenuItemGroupType, BaseSubMenuType } from '@/internal/menu/baseItem';\nimport {\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/internal/menu/renderUtils';\nimport type { MenuDividerType, MenuInfo, MenuItemType } from '@/internal/menu/type';\nimport { SubmenuArrowIcon } from '@/internal/SubmenuArrowIcon';\nimport Switch from '@/Switch';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport {\n  type ContextMenuCheckboxItem,\n  type ContextMenuItem,\n  type ContextMenuSwitchItem,\n} from './type';\n\ntype ContextMenuPositionerProps = ComponentProps<typeof ContextMenu.Positioner>;\n\n/**\n * Submenu positioners are portaled outside the root menu, so they must allocate\n * their own layer z-index (same pattern as DropdownMenu) rather than relying on\n * the fixed CSS fallback that can fall behind after repeated root openings (#608).\n */\nconst ContextMenuSubmenuPositioner = memo(\n  ({ collisionPadding, style, ...rest }: ContextMenuPositionerProps) => {\n    const explicitZIndex =\n      typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n        ? style.zIndex\n        : undefined;\n    const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n\n    const resolvedStyle =\n      typeof style === 'function'\n        ? (state: any) => ({ zIndex, ...style(state) })\n        : { zIndex, ...style };\n\n    return (\n      <ContextMenu.Positioner\n        {...rest}\n        collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n        ref={zRef as any}\n        style={resolvedStyle}\n      />\n    );\n  },\n);\n\nContextMenuSubmenuPositioner.displayName = 'ContextMenuSubmenuPositioner';\n\nexport type { IconAlign, IconSpaceMode } from '@/internal/menu/renderUtils';\n\nconst EmptyMenuItem = memo(() => {\n  const { t } = useTranslation(common);\n  return (\n    <ContextMenu.Item\n      disabled\n      className={stylex.props(menuStyles.item, menuStyles.empty).className}\n    >\n      <div className={styles.itemContent}>\n        <span className={styles.label}>{t('common.empty')}</span>\n      </div>\n    </ContextMenu.Item>\n  );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n  checked?: boolean;\n  children: ReactNode;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n  checked: checkedProp,\n  children,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  label,\n  onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <ContextMenu.Item\n      className={stylex.props(menuStyles.item, danger && menuStyles.danger).className}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      label={label}\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </ContextMenu.Item>\n  );\n};\n\nconst renderItemContent = (\n  item: MenuItemType | BaseSubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const desc = 'desc' in item ? item.desc : undefined;\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  const labelNode = desc ? (\n    <div className={styles.labelGroup}>\n      <span className={styles.label}>{label}</span>\n      <span className={styles.desc}>{desc}</span>\n    </div>\n  ) : (\n    <span className={styles.label}>{label}</span>\n  );\n\n  return (\n    <div\n      className={\n        stylex.props(menuStyles.itemContent, alignStart && menuStyles.itemContentAlignStart)\n          .className\n      }\n    >\n      {shouldRenderIcon ? (\n        <span\n          aria-hidden={!hasIcon}\n          className={clsx(\n            stylex.props(menuStyles.icon, alignStart && menuStyles.iconAlignStart).className,\n            menuClassNames.icon,\n          )}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n        </span>\n      ) : null}\n      {labelNode}\n      {extra ? <span className={styles.extra}>{extra}</span> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <span className={styles.submenuArrow}>\n          <SubmenuArrowIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n  items: ContextMenuItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n      const checkboxItem = item as ContextMenuCheckboxItem;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <ContextMenu.CheckboxItemIndicator>\n          <Icon icon={Check} size={'small'} />\n        </ContextMenu.CheckboxItemIndicator>\n      );\n\n      return (\n        <ContextMenu.CheckboxItem\n          checked={checkboxItem.checked}\n          className={stylex.props(menuStyles.item, isDanger && menuStyles.danger).className}\n          closeOnClick={checkboxItem.closeOnClick}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(\n            checkboxItem,\n            { iconAlign, indicatorOnRight, reserveIconSpace },\n            indicator,\n          )}\n        </ContextMenu.CheckboxItem>\n      );\n    }\n\n    if ((item as ContextMenuSwitchItem).type === 'switch') {\n      const switchItem = item as ContextMenuSwitchItem;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <ContextMenuSwitchItemInternal\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={switchItem.onCheckedChange}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </ContextMenuSwitchItemInternal>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <ContextMenu.Separator className={styles.separator} key={itemKey} />;\n    }\n\n    if ((item as BaseMenuItemGroupType).type === 'group') {\n      const group = item as BaseMenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <ContextMenu.Group key={itemKey}>\n          {group.label ? (\n            <ContextMenu.GroupLabel className={styles.groupLabel}>\n              {group.label}\n            </ContextMenu.GroupLabel>\n          ) : null}\n          {group.children\n            ? renderContextMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </ContextMenu.Group>\n      );\n    }\n\n    if (\n      (item as BaseSubMenuType).type === 'submenu' ||\n      ('children' in item && (item as BaseSubMenuType).children)\n    ) {\n      const submenu = item as BaseSubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n      const submenuHasSlots = submenu.header != null || submenu.footer != null;\n      const submenuBody =\n        submenu.children && submenu.children.length > 0 ? (\n          renderContextMenuItems(submenu.children, nextKeyPath, {\n            iconAlign,\n            iconSpaceMode,\n          })\n        ) : (\n          <EmptyMenuItem />\n        );\n\n      return (\n        <ContextMenu.SubmenuRoot\n          defaultOpen={submenu.defaultOpen}\n          key={itemKey}\n          open={submenu.open}\n          onOpenChange={submenu.onOpenChange}\n        >\n          <ContextMenu.SubmenuTrigger\n            {...submenu.triggerProps}\n            className={stylex.props(menuStyles.item, isDanger && menuStyles.danger).className}\n            closeDelay={submenu.closeDelay}\n            delay={submenu.delay}\n            disabled={submenu.disabled}\n            label={labelText}\n            openOnHover={submenu.openOnHover}\n            onClick={submenu.onClick}\n          >\n            {renderItemContent(submenu, {\n              iconAlign,\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </ContextMenu.SubmenuTrigger>\n          <ContextMenu.Portal>\n            <ContextMenuSubmenuPositioner\n              alignOffset={-4}\n              className={styles.positioner}\n              data-submenu=\"\"\n              sideOffset={-1}\n              onContextMenu={preventDefaultAndStopPropagation}\n            >\n              <ContextMenu.Popup\n                className={clsx(\n                  stylex.props(menuStyles.popup, submenuHasSlots && menuStyles.popupWithSlots)\n                    .className,\n                  menuClassNames.popup,\n                )}\n              >\n                {submenu.header == null ? null : (\n                  <div className={styles.header}>{submenu.header}</div>\n                )}\n                {submenuHasSlots ? (\n                  <div className={styles.slotViewport}>{submenuBody}</div>\n                ) : (\n                  submenuBody\n                )}\n                {submenu.footer == null ? null : (\n                  <div className={styles.footer}>{submenu.footer}</div>\n                )}\n              </ContextMenu.Popup>\n            </ContextMenuSubmenuPositioner>\n          </ContextMenu.Portal>\n        </ContextMenu.SubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <ContextMenu.Item\n        className={stylex.props(menuStyles.item, isDanger && menuStyles.danger).className}\n        closeOnClick={menuItem.closeOnClick}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </ContextMenu.Item>\n    );\n  });\n};\n"],"mappings":"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"}

package/es/DatePicker/DatePicker.d.mts

@@ -1,6 +1,11 @@
-import { DatePickerProps } from "./type.mjs";
+import { DatePickerType } from "./type.mjs";
 //#region src/DatePicker/DatePicker.d.ts
-declare const DatePicker: import("react").NamedExoticComponent<DatePickerProps>;
+/**
+ * DatePicker over Dayjs, with antd's statics: `DatePicker.RangePicker`, `WeekPicker`,
+ * `MonthPicker`, `YearPicker`, `QuarterPicker`, `TimePicker`, the debug-only pure panels
+ * and `generatePicker`.
+ */
+declare const DatePicker: DatePickerType;
 //#endregion
 export { DatePicker as default };
 //# sourceMappingURL=DatePicker.d.mts.map

package/es/DatePicker/DatePicker.mjs

@@ -1,90 +1,18 @@
 "use client";
-import { focusRing } from "../styles/stylex/focusRing.mjs";
-import Icon from "../Icon/Icon.mjs";
-import { useControlledState } from "../hooks/useControlledState.mjs";
-import { useTranslation } from "../i18n/useTranslation.mjs";
-import datePicker_default from "../i18n/resources/en/datePicker.mjs";
-import { DEFAULT_FORMAT, clampToBounds } from "./calendar.mjs";
-import { styles } from "./style.mjs";
-import CalendarPanel from "./CalendarPanel.mjs";
-import PickerShell from "./PickerShell.mjs";
-import { memo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as stylex from "@stylexjs/stylex";
-import { CalendarIcon } from "lucide-react";
-import dayjs from "dayjs";
+import generateConfig from "./generateConfig.mjs";
+import generatePicker from "./generatePicker.mjs";
+import genPurePanel from "./PurePanel.mjs";
 //#region src/DatePicker/DatePicker.tsx
-const PLACEHOLDER_KEY = {
-	date: "datePicker.placeholder",
-	month: "datePicker.monthPlaceholder",
-	year: "datePicker.yearPlaceholder"
-};
-const formatDate = (date, format, fallback) => typeof format === "function" ? format(date) : dayjs(date).format(format ?? fallback);
-const DatePicker = memo(({ allowClear = true, className, defaultValue = null, disabled, disabledDate, footer, format, max, min, mode = "date", onChange, placeholder, shadow, size, style, value, variant }) => {
-	const { t } = useTranslation(datePicker_default);
-	const [current, setCurrent] = useControlledState(defaultValue, {
-		defaultValue,
-		onChange,
-		value
-	});
-	const [open, setOpen] = useState(false);
-	const [month, setMonth] = useState(() => current ?? /* @__PURE__ */ new Date());
-	const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;
-	return /* @__PURE__ */ jsxs(PickerShell, {
-		className,
-		disabled,
-		open,
-		shadow,
-		showClear: allowClear && !!current,
-		size,
-		style,
-		variant,
-		icon: /* @__PURE__ */ jsx("span", {
-			...stylex.props(styles.icon),
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: CalendarIcon,
-				size: 14
-			})
-		}),
-		trigger: /* @__PURE__ */ jsx("button", {
-			...stylex.props(focusRing.info, styles.trigger),
-			disabled,
-			type: "button",
-			children: text ?? /* @__PURE__ */ jsx("span", {
-				...stylex.props(styles.placeholder),
-				children: placeholder ?? t(PLACEHOLDER_KEY[mode])
-			})
-		}),
-		onClear: () => setCurrent(null),
-		onOpenChange: (next) => {
-			if (next) setMonth(current ?? clampToBounds(/* @__PURE__ */ new Date(), {
-				max,
-				min
-			}));
-			setOpen(next);
-		},
-		children: [/* @__PURE__ */ jsx(CalendarPanel, {
-			bounds: {
-				disabledDate,
-				max,
-				min
-			},
-			mode,
-			month,
-			selected: current,
-			onMonthChange: setMonth,
-			onSelect: (date) => {
-				setCurrent(date);
-				setOpen(false);
-			}
-		}), footer && /* @__PURE__ */ jsx("div", {
-			...stylex.props(styles.footer),
-			children: footer
-		})]
-	});
-});
-DatePicker.displayName = "DatePicker";
+/**
+* DatePicker over Dayjs, with antd's statics: `DatePicker.RangePicker`, `WeekPicker`,
+* `MonthPicker`, `YearPicker`, `QuarterPicker`, `TimePicker`, the debug-only pure panels
+* and `generatePicker`.
+*/
+const DatePicker = generatePicker(generateConfig);
+DatePicker._InternalPanelDoNotUseOrYouWillBeFired = genPurePanel(DatePicker);
+DatePicker._InternalRangePanelDoNotUseOrYouWillBeFired = genPurePanel(DatePicker.RangePicker);
+DatePicker.generatePicker = generatePicker;
 //#endregion
-export { DatePicker as default, formatDate };
+export { DatePicker as default };
 
 //# sourceMappingURL=DatePicker.mjs.map

package/es/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DatePickerProps } from './type';\n\nconst PLACEHOLDER_KEY = {\n  date: 'datePicker.placeholder',\n  month: 'datePicker.monthPlaceholder',\n  year: 'datePicker.yearPlaceholder',\n} as const;\n\nexport const formatDate = (date: Date, format: DatePickerProps['format'], fallback: string) =>\n  typeof format === 'function' ? format(date) : dayjs(date).format(format ?? fallback);\n\nconst DatePicker = memo<DatePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = null,\n    disabled,\n    disabledDate,\n    footer,\n    format,\n    max,\n    min,\n    mode = 'date',\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<Date | null>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [month, setMonth] = useState<Date>(() => current ?? new Date());\n\n    const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!current}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button\n            {...stylex.props(focusRing.info, styles.trigger)}\n            disabled={disabled}\n            type=\"button\"\n          >\n            {text ?? (\n              <span {...stylex.props(styles.placeholder)}>\n                {placeholder ?? t(PLACEHOLDER_KEY[mode])}\n              </span>\n            )}\n          </button>\n        }\n        onClear={() => setCurrent(null)}\n        onOpenChange={(next) => {\n          if (next) setMonth(current ?? clampToBounds(new Date(), { max, min }));\n          setOpen(next);\n        }}\n      >\n        <CalendarPanel\n          bounds={{ disabledDate, max, min }}\n          mode={mode}\n          month={month}\n          selected={current}\n          onMonthChange={setMonth}\n          onSelect={(date) => {\n            setCurrent(date);\n            setOpen(false);\n          }}\n        />\n        {footer && <div {...stylex.props(styles.footer)}>{footer}</div>}\n      </PickerShell>\n    );\n  },\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,MAAM;AACR;AACA,MAAa,cAAc,MAAY,QAAmC,aAAqB,OAAO,WAAW,aAAa,OAAO,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,QAAQ;AAClL,MAAM,aAAa,MAAuB,EACxC,aAAa,MACb,WACA,eAAe,MACf,UACA,cACA,QACA,QACA,KACA,KACA,OAAO,QACP,UACA,aACA,QACA,MACA,OACA,OACA,cACI;CACJ,MAAM,EACJ,MACE,eAAeA,kBAAkB;CACrC,MAAM,CAAC,SAAS,cAAc,mBAAgC,cAAc;EAC1E;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,eAAqB,2BAAW,IAAI,KAAK,CAAC;CACpE,MAAM,OAAO,UAAU,WAAW,SAAS,QAAQ,eAAe,KAAK,IAAI;CAC3E,OAAO,qBAAC,aAAD;EAAwB;EAAqB;EAAgB;EAAc;EAAQ,WAAW,cAAc,CAAC,CAAC;EAAe;EAAa;EAAgB;EAAS,MAAM,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GACxM,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAc,MAAM;GAAK,CAAA;EACjC,CAAA;EAAG,SAAS,oBAAC,UAAD;GAAQ,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,OAAO;GAAa;GAAU,MAAK;GAClG,UAAA,QAAQ,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,WAAW;IAC7C,UAAA,eAAe,EAAE,gBAAgB,KAAK;GACnC,CAAA;EACF,CAAA;EAAG,eAAe,WAAW,IAAI;EAAG,eAAc,SAAQ;GACxE,IAAI,MAAM,SAAS,WAAW,8BAAc,IAAI,KAAK,GAAG;IACtD;IACA;GACF,CAAC,CAAC;GACF,QAAQ,IAAI;EACd;EAZO,UAAA,CAaD,oBAAC,eAAD;GAAe,QAAQ;IACzB;IACA;IACA;GACF;GAAS;GAAa;GAAO,UAAU;GAAS,eAAe;GAAU,WAAU,SAAQ;IACzF,WAAW,IAAI;IACf,QAAQ,KAAK;GACf;EAAI,CAAA,GACC,UAAU,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,MAAM;GAAI,UAAA;EAAY,CAAA,CACnD;;AACnB,CAAC;AACD,WAAW,cAAc"}
+{"version":3,"file":"DatePicker.mjs","names":["dayjsGenerateConfig"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport dayjsGenerateConfig from './generateConfig';\nimport generatePicker from './generatePicker';\nimport genPurePanel from './PurePanel';\nimport type { DatePickerType } from './type';\n\n/**\n * DatePicker over Dayjs, with antd's statics: `DatePicker.RangePicker`, `WeekPicker`,\n * `MonthPicker`, `YearPicker`, `QuarterPicker`, `TimePicker`, the debug-only pure panels\n * and `generatePicker`.\n */\nconst DatePicker = generatePicker(dayjsGenerateConfig) as DatePickerType;\n\nDatePicker._InternalPanelDoNotUseOrYouWillBeFired = genPurePanel(DatePicker);\nDatePicker._InternalRangePanelDoNotUseOrYouWillBeFired = genPurePanel(DatePicker.RangePicker);\nDatePicker.generatePicker = generatePicker;\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,aAAa,eAAeA,cAAmB;AAErD,WAAW,yCAAyC,aAAa,UAAU;AAC3E,WAAW,8CAA8C,aAAa,WAAW,WAAW;AAC5F,WAAW,iBAAiB"}

package/es/DatePicker/DateRangePicker.d.mts

@@ -1,6 +1,7 @@
-import { DateRangePickerProps } from "./type.mjs";
+import { RangePickerComponent } from "./type.mjs";
 //#region src/DatePicker/DateRangePicker.d.ts
-declare const DateRangePicker: import("react").NamedExoticComponent<DateRangePickerProps>;
+/** `DatePicker.RangePicker`, kept as a standalone export. */
+declare const DateRangePicker: RangePickerComponent<import("dayjs").Dayjs>;
 //#endregion
 export { DateRangePicker as default };
 //# sourceMappingURL=DateRangePicker.d.mts.map

package/es/DatePicker/DateRangePicker.mjs

@@ -1,129 +1,7 @@
-"use client";
-import { focusRing } from "../styles/stylex/focusRing.mjs";
-import Icon from "../Icon/Icon.mjs";
-import { useControlledState } from "../hooks/useControlledState.mjs";
-import { useTranslation } from "../i18n/useTranslation.mjs";
-import datePicker_default from "../i18n/resources/en/datePicker.mjs";
-import { DEFAULT_FORMAT, clampToBounds, orderRange } from "./calendar.mjs";
-import { styles } from "./style.mjs";
-import CalendarPanel from "./CalendarPanel.mjs";
-import PickerShell from "./PickerShell.mjs";
-import { formatDate } from "./DatePicker.mjs";
-import { memo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as stylex from "@stylexjs/stylex";
-import { ArrowRight, CalendarIcon } from "lucide-react";
-import dayjs from "dayjs";
+import DatePicker from "./DatePicker.mjs";
 //#region src/DatePicker/DateRangePicker.tsx
-const EMPTY = [null, null];
-const DateRangePicker = memo(({ allowClear = true, className, defaultValue = EMPTY, disabled, disabledDate, format, max, min, onChange, placeholder, shadow, size, style, value, variant }) => {
-	const { t } = useTranslation(datePicker_default);
-	const [current, setCurrent] = useControlledState(defaultValue, {
-		defaultValue,
-		onChange,
-		value
-	});
-	const [open, setOpen] = useState(false);
-	const [draft, setDraft] = useState(EMPTY);
-	const [hovered, setHovered] = useState(null);
-	const [month, setMonth] = useState(() => current[0] ?? /* @__PURE__ */ new Date());
-	const shown = open && draft[0] ? draft : current;
-	const nextMonth = dayjs(month).add(1, "month").toDate();
-	const bounds = {
-		disabledDate,
-		max,
-		min
-	};
-	const half = (date, fallback, active) => /* @__PURE__ */ jsx("span", {
-		...stylex.props(styles.rangeHalf),
-		"data-active": active ? "" : void 0,
-		children: date ? formatDate(date, format, DEFAULT_FORMAT.date) : /* @__PURE__ */ jsx("span", {
-			...stylex.props(styles.placeholder),
-			children: fallback
-		})
-	});
-	const select = (date) => {
-		if (!draft[0] || draft[1]) {
-			setDraft([date, null]);
-			return;
-		}
-		const ordered = orderRange(draft[0], date);
-		setDraft(EMPTY);
-		setCurrent(ordered);
-		setOpen(false);
-	};
-	return /* @__PURE__ */ jsx(PickerShell, {
-		className,
-		disabled,
-		open,
-		shadow,
-		showClear: allowClear && !!(current[0] || current[1]),
-		size,
-		style,
-		variant,
-		icon: /* @__PURE__ */ jsx("span", {
-			...stylex.props(styles.icon),
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: CalendarIcon,
-				size: 14
-			})
-		}),
-		trigger: /* @__PURE__ */ jsx("button", {
-			...stylex.props(focusRing.info, styles.trigger),
-			disabled,
-			type: "button",
-			children: /* @__PURE__ */ jsxs("span", {
-				...stylex.props(styles.rangeTrigger),
-				children: [
-					half(shown[0], placeholder?.[0] ?? t("datePicker.startPlaceholder"), open && !draft[0]),
-					/* @__PURE__ */ jsx("span", {
-						...stylex.props(styles.icon),
-						children: /* @__PURE__ */ jsx(Icon, {
-							icon: ArrowRight,
-							size: 14
-						})
-					}),
-					half(shown[1], placeholder?.[1] ?? t("datePicker.endPlaceholder"), open && !!draft[0])
-				]
-			})
-		}),
-		onClear: () => setCurrent(EMPTY),
-		onOpenChange: (next) => {
-			if (next) {
-				setMonth(current[0] ?? clampToBounds(/* @__PURE__ */ new Date(), {
-					max,
-					min
-				}));
-				setDraft(EMPTY);
-			}
-			setOpen(next);
-		},
-		children: /* @__PURE__ */ jsxs("div", {
-			...stylex.props(styles.range),
-			children: [/* @__PURE__ */ jsx(CalendarPanel, {
-				bounds,
-				hovered,
-				mode: "date",
-				month,
-				range: draft[0] ? draft : current,
-				showNav: false,
-				onHover: setHovered,
-				onMonthChange: setMonth,
-				onSelect: select
-			}), /* @__PURE__ */ jsx(CalendarPanel, {
-				bounds,
-				hovered,
-				mode: "date",
-				month: nextMonth,
-				range: draft[0] ? draft : current,
-				onHover: setHovered,
-				onMonthChange: (next) => setMonth(dayjs(next).subtract(1, "month").toDate()),
-				onSelect: select
-			})]
-		})
-	});
-});
-DateRangePicker.displayName = "DateRangePicker";
+/** `DatePicker.RangePicker`, kept as a standalone export. */
+const DateRangePicker = DatePicker.RangePicker;
 //#endregion
 export { DateRangePicker as default };
 

package/es/DatePicker/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport { formatDate } from './DatePicker';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DateRangePickerProps, DateRangeValue } from './type';\n\nconst EMPTY: DateRangeValue = [null, null];\n\nconst DateRangePicker = memo<DateRangePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = EMPTY,\n    disabled,\n    disabledDate,\n    format,\n    max,\n    min,\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\n    const [hovered, setHovered] = useState<Date | null>(null);\n    const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\n\n    const shown = open && draft[0] ? draft : current;\n    const nextMonth = dayjs(month).add(1, 'month').toDate();\n    const bounds = { disabledDate, max, min };\n\n    const half = (date: Date | null, fallback: string, active: boolean) => (\n      <span {...stylex.props(styles.rangeHalf)} data-active={active ? '' : undefined}>\n        {date ? (\n          formatDate(date, format, DEFAULT_FORMAT.date)\n        ) : (\n          <span {...stylex.props(styles.placeholder)}>{fallback}</span>\n        )}\n      </span>\n    );\n\n    const select = (date: Date) => {\n      if (!draft[0] || draft[1]) {\n        setDraft([date, null]);\n        return;\n      }\n      const ordered = orderRange(draft[0], date);\n      setDraft(EMPTY);\n      setCurrent(ordered);\n      setOpen(false);\n    };\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!(current[0] || current[1])}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button\n            {...stylex.props(focusRing.info, styles.trigger)}\n            disabled={disabled}\n            type=\"button\"\n          >\n            <span {...stylex.props(styles.rangeTrigger)}>\n              {half(\n                shown[0],\n                placeholder?.[0] ?? t('datePicker.startPlaceholder'),\n                open && !draft[0],\n              )}\n              <span {...stylex.props(styles.icon)}>\n                <Icon icon={ArrowRight} size={14} />\n              </span>\n              {half(\n                shown[1],\n                placeholder?.[1] ?? t('datePicker.endPlaceholder'),\n                open && !!draft[0],\n              )}\n            </span>\n          </button>\n        }\n        onClear={() => setCurrent(EMPTY)}\n        onOpenChange={(next) => {\n          if (next) {\n            setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\n            setDraft(EMPTY);\n          }\n          setOpen(next);\n        }}\n      >\n        <div {...stylex.props(styles.range)}>\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={month}\n            range={draft[0] ? draft : current}\n            showNav={false}\n            onHover={setHovered}\n            onMonthChange={setMonth}\n            onSelect={select}\n          />\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={nextMonth}\n            range={draft[0] ? draft : current}\n            onHover={setHovered}\n            onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\n            onSelect={select}\n          />\n        </div>\n      </PickerShell>\n    );\n  },\n);\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.mjs","names":[],"sources":["../../src/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import DatePicker from './DatePicker';\n\n/** `DatePicker.RangePicker`, kept as a standalone export. */\nconst DateRangePicker = DatePicker.RangePicker;\n\nexport default DateRangePicker;\n"],"mappings":";;;AAGA,MAAM,kBAAkB,WAAW"}