@bioturing/components 0.29.2 → 0.31.0

package/dist/components/dropdown-menu/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { useControlled } from \"@base-ui-components/utils/useControlled\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport {\n  clsx,\n  DROPDOWN_COLLISION_AVOIDANCE,\n  parseAntdPlacement,\n  useAntdCssVarClassname,\n  useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\nimport { DropdownMenuItem } from \"./item\";\n\nimport \"./style.css\";\nimport { DropdownMenuDivider } from \"./divider\";\n\nexport type DropdownMenuItemType =\n  | {\n      /**\n       * The type of the menu item\n       */\n      type: \"item\";\n      /**\n       * The label of the menu item\n       */\n      label?: React.ReactNode;\n      /**\n       * Whether the menu item is disabled\n       */\n      disabled?: boolean;\n      /**\n       * The icon of the menu item\n       */\n      icon?: React.ReactNode;\n      /**\n       * The key of the menu item\n       */\n      key: React.Key;\n      /**\n       * The onClick event handler of the menu item\n       */\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      /**\n       * The onMouseEnter event handler of the menu item\n       */\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      /**\n       * The onMouseLeave event handler of the menu item\n       */\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      /**\n       * The onMouseOver event handler of the menu item\n       */\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      /**\n       * The onMouseOut event handler of the menu item\n       */\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      /**\n       * The className of the menu item\n       */\n      className?: string;\n      /**\n       * Whether the menu item is a danger item\n       */\n      danger?: boolean;\n      /**\n       * The ref of the menu item\n       */\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      /**\n       * The type of the menu item\n       */\n      type: \"divider\";\n    }\n  | {\n      /**\n       * The type of the menu item\n       */\n      type: \"header\";\n      /**\n       * The title of the menu item\n       */\n      title?: React.ReactNode;\n      /**\n       * The className of the menu item\n       */\n      className?: string;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to show search input\n   * @default false\n   */\n  showSearch?: boolean;\n  /**\n   * Size of the dropdown menu\n   * @default \"auto\"\n   */\n  size?: \"auto\" | keyof typeof PopupPanelSize;\n  /**\n   * Search placeholder\n   */\n  searchProps?: Omit<\n    React.ComponentProps<typeof Command.Input>,\n    \"size\" | \"ref\"\n  >;\n  /**\n   * Whether to match the width of the popup with the trigger\n   * @default false\n   */\n  popupMatchTriggerWidth?: boolean;\n\n  /**\n   * Content to display before the list\n   */\n  beforeList?: React.ReactNode;\n  /**\n   * Content to display after the list\n   */\n  afterList?: React.ReactNode;\n  /**\n   * Whether to keep the dropdown open when an item is selected\n   * @default false\n   */\n  keepOpenOnSelect?: boolean;\n  /**\n   * Control the highlighted state of the menu item\n   */\n  highlightedItemKey?: React.Key;\n  /**\n   * Control the selected state of the menu item\n   */\n  selectedItemKeys?: React.Key[];\n  /**\n   * Whether to show checkbox\n   * @default false\n   */\n  showCheckbox?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n  size = \"auto\",\n  showSearch,\n  searchProps = {\n    placeholder: \"Search...\",\n  },\n  popupMatchTriggerWidth,\n  beforeList,\n  afterList,\n  keepOpenOnSelect,\n  highlightedItemKey,\n  selectedItemKeys,\n  showCheckbox,\n  getItemKeywords,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const baseUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      if (item.type === \"item\") {\n        return (\n          <DropdownMenuItem\n            key={i + \"-\" + j}\n            item={item}\n            inCombobox={showSearch}\n            selected={selectedItemKeys?.includes(item.key)}\n            onSelect={\n              showSearch\n                ? () => {\n                    const e = new MouseEvent(\"click\", {\n                      bubbles: true,\n                      cancelable: true,\n                    }) as unknown as React.MouseEvent<HTMLElement, MouseEvent>;\n                    item.onClick(e);\n                    if (!keepOpenOnSelect) onOpenChange?.(false);\n                  }\n                : undefined\n            }\n            itemRender={itemRender}\n            showCheckbox={showCheckbox}\n            getItemKeywords={getItemKeywords}\n          />\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <DropdownMenuDivider\n            key={i + \"-\" + j}\n            inCombobox={showSearch}\n            className={classNames?.separator}\n          />\n        );\n      }\n      return null;\n    },\n    [\n      classNames,\n      itemRender,\n      onOpenChange,\n      showSearch,\n      keepOpenOnSelect,\n      selectedItemKeys,\n      showCheckbox,\n    ]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel\n            )}\n          >\n            <span>{group.label}</span>\n          </Menu.GroupLabel>\n        )}\n        {group.items.map((item, j) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupShowSearch = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <Menu.GroupLabel\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel\n              )}\n            >\n              <span>{group.label}</span>\n            </Menu.GroupLabel>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderMenuInner = useCallback(\n    () =>\n      showSearch ? (\n        <Command\n          className={cls(\"dropdown-menu-container\")}\n          disablePointerSelection={showSearch}\n          defaultValue={\n            highlightedItemKey ? String(highlightedItemKey) : undefined\n          }\n        >\n          <FormItemInputContext.Provider value={{}}>\n            <Command.Input\n              {...searchProps}\n              key=\"search\"\n              render={\n                <Input\n                  allowClear\n                  className={cls(\"dropdown-menu-search\")}\n                  placeholder=\"Search\"\n                />\n              }\n            />\n          </FormItemInputContext.Provider>\n          {beforeList}\n          <ScrollArea fadeEdges>\n            <Command.List className={cls(\"dropdown-menu-list\")}>\n              <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n                No results found.\n              </Command.Empty>\n              {itemGroups.map(renderGroupShowSearch)}\n            </Command.List>\n          </ScrollArea>\n          {afterList}\n        </Command>\n      ) : (\n        <div className={cls(\"dropdown-menu-container\")}>\n          {beforeList}\n          <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\n          {afterList}\n        </div>\n      ),\n    [\n      showSearch,\n      cls,\n      highlightedItemKey,\n      searchProps,\n      beforeList,\n      itemGroups,\n      renderGroupShowSearch,\n      afterList,\n      renderGroup,\n    ]\n  );\n\n  const BaseComponent = showSearch ? Popover : Menu;\n\n  return (\n    <BaseComponent.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <BaseComponent.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      />\n      <BaseComponent.Portal>\n        <BaseComponent.Positioner\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n          collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n        >\n          <BaseComponent.Popup\n            className={clsx(\n              cls(\n                \"dropdown-menu\",\n                showCheckbox && \"dropdown-menu-show-checkbox\",\n                popupMatchTriggerWidth && \"dropdown-menu-match-trigger-width\"\n              ),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            style={\n              {\n                \"--size-width\":\n                  size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n              } as React.CSSProperties\n            }\n          >\n            {renderMenuInner()}\n          </BaseComponent.Popup>\n        </BaseComponent.Positioner>\n      </BaseComponent.Portal>\n    </BaseComponent.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","popupMatchTriggerWidth","beforeList","afterList","keepOpenOnSelect","highlightedItemKey","selectedItemKeys","showCheckbox","getItemKeywords","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","renderMenuItem","item","i","j","jsx","DropdownMenuItem","e","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupShowSearch","Command","renderMenuInner","FormItemInputContext","createElement","Input","ScrollArea","BaseComponent","Popover","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport {\n  clsx,\n  DROPDOWN_COLLISION_AVOIDANCE,\n  parseAntdPlacement,\n  useAntdCssVarClassname,\n  useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport { DropdownMenuItemType } from \"./types\";\nimport { useDropdownMenu, UseDropdownMenuProps } from \"./useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\n\nimport \"./style.css\";\n\nexport interface DropdownMenuProps\n  extends Omit<UseDropdownMenuProps, \"classNames\"> {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Default open state of the dropdown\n   */\n  defaultOpen?: boolean;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    itemIcon?: string;\n    itemText?: string;\n    positioner?: string;\n  } & UseDropdownMenuProps[\"classNames\"];\n\n  /**\n   * Whether to show search input\n   * @default false\n   */\n  showSearch?: boolean;\n  /**\n   * Size of the dropdown menu\n   * @default \"auto\"\n   */\n  size?: \"auto\" | keyof typeof PopupPanelSize;\n  /**\n   * Search placeholder\n   */\n  searchProps?: Omit<\n    React.ComponentProps<typeof Command.Input>,\n    \"size\" | \"ref\"\n  >;\n  /**\n   * Whether to match the width of the popup with the trigger\n   * @default false\n   */\n  popupMatchTriggerWidth?: boolean;\n  /**\n   * Content to display before the list\n   */\n  beforeList?: React.ReactNode;\n  /**\n   * Content to display after the list\n   */\n  afterList?: React.ReactNode;\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  defaultOpen,\n  className,\n  itemRender,\n  classNames,\n  size = \"auto\",\n  showSearch,\n  inCombobox: inComboboxProp,\n  searchProps = {\n    placeholder: \"Search...\",\n  },\n  popupMatchTriggerWidth,\n  beforeList,\n  afterList,\n  keepOpenOnSelect,\n  highlightedItemKey,\n  selectedItemKeys,\n  getItemKeywords,\n  showCheckbox,\n}: DropdownMenuProps) => {\n  const inCombobox =\n    typeof inComboboxProp === \"boolean\" ? inComboboxProp : showSearch;\n  const [open, onOpenChange] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen,\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const baseUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { itemGroups, renderGroup } = useDropdownMenu({\n    items,\n    keepOpenOnSelect,\n    highlightedItemKey,\n    selectedItemKeys,\n    showCheckbox,\n    getItemKeywords,\n    itemRender,\n    inCombobox,\n    onOpenChange,\n    classNames: {\n      item: classNames?.item,\n      itemIcon: classNames?.itemIcon,\n      itemSuffix: classNames?.itemSuffix,\n      group: classNames?.group,\n      groupLabel: classNames?.groupLabel,\n      divider: classNames?.divider,\n    },\n  });\n  const renderMenuInner = useCallback(\n    () =>\n      showSearch ? (\n        <Command\n          className={cls(\"dropdown-menu-container\")}\n          disablePointerSelection={showSearch}\n          defaultValue={\n            highlightedItemKey ? String(highlightedItemKey) : undefined\n          }\n        >\n          <FormItemInputContext.Provider value={{}}>\n            <Command.Input\n              {...searchProps}\n              key=\"search\"\n              render={\n                <Input\n                  allowClear\n                  className={cls(\"dropdown-menu-search\")}\n                  placeholder=\"Search\"\n                />\n              }\n            />\n          </FormItemInputContext.Provider>\n          {beforeList}\n          <ScrollArea fadeEdges>\n            <Command.List className={cls(\"dropdown-menu-list\")}>\n              <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n                No results found.\n              </Command.Empty>\n              {itemGroups.map(renderGroup)}\n            </Command.List>\n          </ScrollArea>\n          {afterList}\n        </Command>\n      ) : (\n        <div className={cls(\"dropdown-menu-container\")}>\n          {beforeList}\n          <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\n          {afterList}\n        </div>\n      ),\n    [\n      showSearch,\n      cls,\n      highlightedItemKey,\n      searchProps,\n      beforeList,\n      itemGroups,\n      afterList,\n      renderGroup,\n    ],\n  );\n  const BaseComponent = showSearch ? Popover : Menu;\n\n  return (\n    <BaseComponent.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <BaseComponent.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname,\n        )}\n      />\n      <BaseComponent.Portal>\n        <BaseComponent.Positioner\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n          collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n        >\n          <BaseComponent.Popup\n            className={clsx(\n              cls(\n                \"dropdown-menu\",\n                showCheckbox && \"dropdown-menu-show-checkbox\",\n                popupMatchTriggerWidth && \"dropdown-menu-match-trigger-width\",\n              ),\n              className,\n              classNames?.popup,\n              antdCssVarClassname,\n            )}\n            style={\n              {\n                \"--size-width\":\n                  size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n              } as React.CSSProperties\n            }\n          >\n            {renderMenuInner()}\n          </BaseComponent.Popup>\n        </BaseComponent.Positioner>\n      </BaseComponent.Portal>\n    </BaseComponent.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","defaultOpen","className","itemRender","classNames","size","showSearch","inComboboxProp","searchProps","popupMatchTriggerWidth","beforeList","afterList","keepOpenOnSelect","highlightedItemKey","selectedItemKeys","getItemKeywords","showCheckbox","inCombobox","open","onOpenChange","useControlledState","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","renderGroup","useDropdownMenu","renderMenuInner","useCallback","jsxs","Command","jsx","FormItemInputContext","createElement","Input","ScrollArea","BaseComponent","Popover","Menu","clsx","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":";;;;;;;;;;;;;;;;;AAuGO,MAAMA,KAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,YAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,aAAAC,IAAc;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,wBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AACF,MAAyB;AACvB,QAAMC,IACJ,OAAOV,KAAmB,YAAYA,IAAiBD,GACnD,CAACY,GAAMC,CAAY,IAAIC;AAAA,IAC3BrB;AAAA,IACAC;AAAA,IACAC;AAAA,EACF,GACMoB,IAAMC,EAAO,GACbC,IAAsBC,EAAuB,GAC7CC,IAAkBC,EAAmB7B,CAAS,GAC9C8B,IAAYC,EAA0B,IAAI,GAC1C,EAAE,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAgB;AAAA,IAClD,OAAAnC;AAAA,IACA,kBAAAgB;AAAA,IAEA,kBAAAE;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAD;AAAA,IACA,YAAAZ;AAAA,IACA,YAAAc;AAAA,IACA,cAAAE;AAAA,IACA,YAAY;AAAA,MACV,MAAMf,KAAA,gBAAAA,EAAY;AAAA,MAClB,UAAUA,KAAA,gBAAAA,EAAY;AAAA,MACtB,YAAYA,KAAA,gBAAAA,EAAY;AAAA,MACxB,OAAOA,KAAA,gBAAAA,EAAY;AAAA,MACnB,YAAYA,KAAA,gBAAAA,EAAY;AAAA,MACxB,SAASA,KAAA,gBAAAA,EAAY;AAAA,IAAA;AAAA,EACvB,CACD,GACK4B,IAAkBC;AAAA,IACtB,MACE3B,IACE,gBAAA4B;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAWd,EAAI,yBAAyB;AAAA,QACxC,yBAAyBf;AAAA,QACzB,cACEO,IAAqB,OAAOA,CAAkB,IAAI;AAAA,QAGpD,UAAA;AAAA,UAAA,gBAAAuB,EAACC,EAAqB,UAArB,EAA8B,OAAO,CAAA,GACpC,UAAA,gBAAAC;AAAA,YAACH,EAAQ;AAAA,YAAR;AAAA,cACE,GAAG3B;AAAA,cACJ,KAAI;AAAA,cACJ,QACE,gBAAA4B;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,YAAU;AAAA,kBACV,WAAWlB,EAAI,sBAAsB;AAAA,kBACrC,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA,GAGN;AAAA,UACCX;AAAA,UACD,gBAAA0B,EAACI,GAAW,EAAA,WAAS,IACnB,UAAA,gBAAAN,EAACC,EAAQ,MAAR,EAAa,WAAWd,EAAI,oBAAoB,GAC/C,UAAA;AAAA,YAAA,gBAAAe,EAACD,EAAQ,OAAR,EAAc,WAAWd,EAAI,qBAAqB,GAAG,UAEtD,qBAAA;AAAA,YACCQ,EAAW,IAAIC,CAAW;AAAA,UAAA,EAAA,CAC7B,EACF,CAAA;AAAA,UACCnB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGF,gBAAAuB,EAAA,OAAA,EAAI,WAAWb,EAAI,yBAAyB,GAC1C,UAAA;AAAA,MAAAX;AAAA,wBACA8B,GAAW,EAAA,WAAS,IAAE,UAAWX,EAAA,IAAIC,CAAW,GAAE;AAAA,MAClDnB;AAAA,IAAA,GACH;AAAA,IAEJ;AAAA,MACEL;AAAA,MACAe;AAAA,MACAR;AAAA,MACAL;AAAA,MACAE;AAAA,MACAmB;AAAA,MACAlB;AAAA,MACAmB;AAAA,IAAA;AAAA,EAEJ,GACMW,IAAgBnC,IAAaoC,IAAUC;AAG3C,SAAA,gBAAAT;AAAA,IAACO,EAAc;AAAA,IAAd;AAAA,MACC,aAAA3C;AAAA,MACA,MAAAoB;AAAA,MACA,cAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAACK,EAAc;AAAA,UAAd;AAAA,YACC,QAAQ9C;AAAA,YACR,KAAKgC;AAAA,YACL,WAAWiB;AAAA,cACTvB,EAAI,uBAAuB;AAAA,cAC3BjB,KAAA,gBAAAA,EAAY;AAAA,cACZmB;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAAA,QACA,gBAAAa,EAACK,EAAc,QAAd,EACC,UAAA,gBAAAL;AAAA,UAACK,EAAc;AAAA,UAAd;AAAA,YACC,MAAMhB,EAAgB;AAAA,YACtB,OAAOA,EAAgB;AAAA,YACvB,YAAY;AAAA,YACZ,WAAWmB,EAAKvB,EAAI,oBAAoB,GAAGjB,KAAA,gBAAAA,EAAY,IAAI;AAAA,YAC3D,oBAAoByC;AAAA,YAEpB,UAAA,gBAAAT;AAAA,cAACK,EAAc;AAAA,cAAd;AAAA,gBACC,WAAWG;AAAA,kBACTvB;AAAA,oBACE;AAAA,oBACAL,KAAgB;AAAA,oBAChBP,KAA0B;AAAA,kBAC5B;AAAA,kBACAP;AAAA,kBACAE,KAAA,gBAAAA,EAAY;AAAA,kBACZmB;AAAA,gBACF;AAAA,gBACA,OACE;AAAA,kBACE,gBACElB,KAAQyC,IAAiBA,EAAezC,CAAI,IAAI;AAAA,gBACpD;AAAA,gBAGD,UAAgB2B,EAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/dropdown-menu/item.css

@@ -1 +1 @@
-@layer components{.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);cursor:pointer;display:flex;align-items:center;transition:all .3s var(--ds-motion-ease-out)}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover,.ds-dropdown-menu-item[data-active=true],.ds-dropdown-menu-item[data-selected=true],.ds-dropdown-menu-item[data-highlighted=true]{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true]{background:var(--ds-control-item-bg-active);font-weight:500}.ds-dropdown-menu:not(.ds-dropdown-menu-show-checkbox) .ds-dropdown-menu-item[data-actual-selected=true]{background:var(--ds-control-item-bg-active);font-weight:500}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-item .ds-checkbox-wrapper{margin-right:.5rem}.ds-dropdown-menu-item .ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}[data-danger=true] .ds-dropdown-menu-item .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}}
+@layer components{.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-dropdown-menu-match-trigger-width{width:min(var(--anchor-width),var(--available-width))}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);cursor:pointer;display:flex;align-items:center;transition:all .3s var(--ds-motion-ease-out);color:var(--ds-color-text)}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover,.ds-dropdown-menu-item[data-active=true],.ds-dropdown-menu-item[data-selected=true],.ds-dropdown-menu-item[data-highlighted=true]{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu:not(.ds-dropdown-menu-show-checkbox) .ds-dropdown-menu-item[data-actual-selected=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item .ds-checkbox-wrapper{margin-right:.5rem}.ds-dropdown-menu-item .ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}.ds-dropdown-menu-item .ds-dropdown-menu-item-text{flex-grow:1}.ds-dropdown-menu-item .ds-dropdown-menu-item-suffix{margin-left:.75rem;font-size:.75rem;line-height:1.25rem;color:var(--color-ds-color-text-tertiary);display:flex;flex-grow:0;flex-shrink:0;align-items:flex-end}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-item[data-danger=true] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}}

package/dist/components/dropdown-menu/item.js

@@ -1,32 +1,32 @@
 "use client";
-import { jsxs as I, Fragment as x, jsx as r } from "react/jsx-runtime";
-import { useMemo as h } from "react";
+import { jsxs as I, Fragment as h, jsx as r } from "react/jsx-runtime";
+import { useMemo as e } from "react";
 import { Command as j } from "../cmdk/index.js";
 import { Menu as E } from "@base-ui-components/react/menu";
 import './item.css';/* empty css         */
 import { Checkbox as w } from "antd";
 import { reactNodeToString as L } from "../utils/reactToString.js";
 import { useCls as D } from "../utils/antdUtils.js";
-import { clsx as t } from "../utils/cn.js";
+import { clsx as u } from "../utils/cn.js";
 const J = ({
   item: o,
-  inCombobox: u = !1,
+  inCombobox: p = !1,
   selected: f = !1,
-  itemRender: p,
-  itemProps: y = {},
+  itemRender: t,
+  itemProps: S = {},
   classNames: n,
   onSelect: k,
-  showCheckbox: M,
-  indeterminate: e,
-  renderAsNativeElement: O,
+  showCheckbox: x,
+  indeterminate: M,
+  renderAsNativeElement: y,
   getItemKeywords: g
 }) => {
-  const d = D(), T = h(
-    () => u ? j.Item : E.Item,
-    [u]
-  ), i = h(() => ({
-    className: t(
-      d("dropdown-menu-item", u && "dropdown-menu-item-combobox"),
+  const d = D(), O = e(
+    () => p ? j.Item : E.Item,
+    [p]
+  ), i = e(() => ({
+    className: u(
+      d("dropdown-menu-item", p && "dropdown-menu-item-combobox"),
       n == null ? void 0 : n.item,
       o.className
     ),
@@ -40,20 +40,20 @@ const J = ({
     onMouseOver: o.onMouseOver,
     onMouseOut: o.onMouseOut,
     "data-value": typeof o.label == "string" ? o.label : String(o.key),
-    render: p ? (b) => p(o, b) : void 0,
-    children: u ? /* @__PURE__ */ I(x, { children: [
-      M && /* @__PURE__ */ r(
+    render: t ? (b) => t(o, b) : void 0,
+    children: p ? /* @__PURE__ */ I(h, { children: [
+      x && /* @__PURE__ */ r(
         w,
         {
           checked: f,
           tabIndex: -1,
-          indeterminate: e
+          indeterminate: M
         }
       ),
       o.icon && /* @__PURE__ */ r(
         "span",
         {
-          className: t(
+          className: u(
             d("dropdown-menu-item-icon"),
             n == null ? void 0 : n.itemIcon
           ),
@@ -63,26 +63,26 @@ const J = ({
       /* @__PURE__ */ r(
         "span",
         {
-          className: t(
+          className: u(
             d("dropdown-menu-item-text"),
             n == null ? void 0 : n.itemText
           ),
           children: o.label
         }
       )
-    ] }) : /* @__PURE__ */ I(x, { children: [
-      M && /* @__PURE__ */ r(
+    ] }) : /* @__PURE__ */ I(h, { children: [
+      x && /* @__PURE__ */ r(
         w,
         {
           checked: f,
           tabIndex: -1,
-          indeterminate: e
+          indeterminate: M
         }
       ),
       o.icon && /* @__PURE__ */ r(
         "span",
         {
-          className: t(
+          className: u(
             d("dropdown-menu-item-icon"),
             n == null ? void 0 : n.itemIcon
           ),
@@ -92,38 +92,51 @@ const J = ({
       /* @__PURE__ */ r(
         "span",
         {
-          className: t(
+          className: u(
             d("dropdown-menu-item-text"),
             n == null ? void 0 : n.itemText
           ),
           children: o.label
         }
+      ),
+      o.suffix && /* @__PURE__ */ r(
+        "span",
+        {
+          className: u(
+            d("dropdown-menu-item-suffix"),
+            n == null ? void 0 : n.itemSuffix
+          ),
+          children: o.suffix
+        }
       )
     ] })
   }), [
     n == null ? void 0 : n.item,
     n == null ? void 0 : n.itemIcon,
     n == null ? void 0 : n.itemText,
+    n == null ? void 0 : n.itemSuffix,
     d,
-    u,
-    e,
-    o,
     p,
+    M,
+    o,
+    t,
     f,
-    M
+    x
   ]);
-  if (p)
-    return p(o, {
+  if (t)
+    return t(o, {
       ...i,
-      ...y
+      ...S
     });
-  const { render: v, ...S } = i;
-  return O ? v ? v(i) : /* @__PURE__ */ r("div", { onClick: k, ...S }) : /* @__PURE__ */ r(
-    T,
+  const { render: v, ...T } = i;
+  return y ? v ? v(i) : /* @__PURE__ */ r("div", { onClick: k, ...T }) : /* @__PURE__ */ r(
+    O,
     {
       value: String(o.key),
       keywords: g ? g(o) : [String(o.key), L(o.label)],
-      onSelect: k,
+      onSelect: () => {
+        k(o);
+      },
       ...i
     }
   );

package/dist/components/dropdown-menu/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useMemo } from \"react\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\nimport type { DropdownMenuItemType } from \"./component\";\nimport { Command } from \"../cmdk\";\nimport { Menu } from \"@base-ui-components/react/menu\";\n\nimport \"./item.css\";\nimport { Checkbox } from \"antd\";\n\nexport interface DropdownMenuItemProps {\n  /** The menu item data */\n  item: DropdownMenuItemType & { type: \"item\" };\n  /** Custom render function for the item */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /** Additional props to pass to the item */\n  itemProps?: React.HTMLAttributes<HTMLElement>;\n  /** Class names from parent DropdownMenu */\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n  };\n  onSelect?: () => void;\n  /**\n   * Whether the menu item is in a combobox\n   */\n  inCombobox?: boolean;\n  /**\n   * Whether the menu item is in a menu\n   */\n  renderAsNativeElement?: boolean;\n  /**\n   * Whether the menu item is selected (for combobox)\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * Whether to show checkbox (only for decoration purpose)\n   */\n  showCheckbox?: boolean;\n  /**\n   * Whether the menu item checkbox is indeterminate (for combobox)\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n  item,\n  inCombobox = false,\n  selected = false,\n  itemRender,\n  itemProps = {},\n  classNames,\n  onSelect,\n  showCheckbox,\n  indeterminate,\n  renderAsNativeElement,\n  getItemKeywords,\n}) => {\n  const cls = useCls();\n\n  const MenuItem = useMemo(\n    () => (inCombobox ? Command.Item : Menu.Item),\n    [inCombobox]\n  );\n\n  const props = useMemo(() => {\n    return {\n      className: clsx(\n        cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n        classNames?.item,\n        item.className\n      ),\n      disabled: item.disabled,\n      \"data-danger\": item.danger,\n      \"data-actual-selected\": selected,\n      ref: item.ref as Ref<HTMLDivElement>,\n      onClick: item.onClick,\n      onMouseEnter: item.onMouseEnter,\n      onMouseLeave: item.onMouseLeave,\n      onMouseOver: item.onMouseOver,\n      onMouseOut: item.onMouseOut,\n      \"data-value\":\n        typeof item.label === \"string\" ? item.label : String(item.key),\n      render: itemRender\n        ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n            itemRender(item, itemProps)\n        : undefined,\n      children: inCombobox ? (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ) : (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ),\n    };\n  }, [\n    classNames?.item,\n    classNames?.itemIcon,\n    classNames?.itemText,\n    cls,\n    inCombobox,\n    indeterminate,\n    item,\n    itemRender,\n    selected,\n    showCheckbox,\n  ]);\n  // If custom render function is provided, use it\n  if (itemRender) {\n    return itemRender(item, {\n      ...props,\n      ...itemProps,\n    });\n  }\n  const { render, ...restProps } = props;\n  // Default rendering\n  return renderAsNativeElement ? (\n    render ? (\n      render(props)\n    ) : (\n      <div onClick={onSelect} {...restProps} />\n    )\n  ) : (\n    <MenuItem\n      value={String(item.key)}\n      keywords={getItemKeywords ? getItemKeywords(item) : [String(item.key), reactNodeToString(item.label)]}\n      onSelect={onSelect}\n      {...props}\n    ></MenuItem>\n  );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemProps","classNames","onSelect","showCheckbox","indeterminate","renderAsNativeElement","getItemKeywords","cls","useCls","MenuItem","useMemo","Command","Menu","props","clsx","jsxs","Fragment","jsx","Checkbox","render","restProps","reactNodeToString"],"mappings":"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"}
+{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useMemo } from \"react\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\nimport type { DropdownMenuItemType } from \"./types\";\nimport { Command } from \"../cmdk\";\nimport { Menu } from \"@base-ui-components/react/menu\";\n\nimport \"./item.css\";\nimport { Checkbox } from \"antd\";\n\nexport interface DropdownMenuItemProps {\n  /** The menu item data */\n  item: DropdownMenuItemType & { type: \"item\" };\n  /** Custom render function for the item */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>,\n  ) => React.ReactElement;\n  /** Additional props to pass to the item */\n  itemProps?: React.HTMLAttributes<HTMLElement>;\n  /** Class names from parent DropdownMenu */\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    itemSuffix?: string;\n  };\n  onSelect?: (item: DropdownMenuItemType & { type: \"item\" }) => void;\n  /**\n   * Whether the menu item is in a combobox\n   */\n  inCombobox?: boolean;\n  /**\n   * Whether the menu item is in a menu\n   */\n  renderAsNativeElement?: boolean;\n  /**\n   * Whether the menu item is selected (for combobox)\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * Whether to show checkbox (only for decoration purpose)\n   */\n  showCheckbox?: boolean;\n  /**\n   * Whether the menu item checkbox is indeterminate (for combobox)\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n  item,\n  inCombobox = false,\n  selected = false,\n  itemRender,\n  itemProps = {},\n  classNames,\n  onSelect,\n  showCheckbox,\n  indeterminate,\n  renderAsNativeElement,\n  getItemKeywords,\n}) => {\n  const cls = useCls();\n\n  const MenuItem = useMemo(\n    () => (inCombobox ? Command.Item : Menu.Item),\n    [inCombobox],\n  );\n\n  const props = useMemo(() => {\n    return {\n      className: clsx(\n        cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n        classNames?.item,\n        item.className,\n      ),\n      disabled: item.disabled,\n      \"data-danger\": item.danger,\n      \"data-actual-selected\": selected,\n      ref: item.ref as Ref<HTMLDivElement>,\n      onClick: item.onClick,\n      onMouseEnter: item.onMouseEnter,\n      onMouseLeave: item.onMouseLeave,\n      onMouseOver: item.onMouseOver,\n      onMouseOut: item.onMouseOut,\n      \"data-value\":\n        typeof item.label === \"string\" ? item.label : String(item.key),\n      render: itemRender\n        ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n            itemRender(item, itemProps)\n        : undefined,\n      children: inCombobox ? (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon,\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText,\n            )}\n          >\n            {item.label}\n          </span>\n        </>\n      ) : (\n        <>\n          {showCheckbox && (\n            <Checkbox\n              checked={selected}\n              tabIndex={-1}\n              indeterminate={indeterminate}\n            />\n          )}\n          {item.icon && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-icon\"),\n                classNames?.itemIcon,\n              )}\n            >\n              {item.icon}\n            </span>\n          )}\n          <span\n            className={clsx(\n              cls(\"dropdown-menu-item-text\"),\n              classNames?.itemText,\n            )}\n          >\n            {item.label}\n          </span>\n          {item.suffix && (\n            <span\n              className={clsx(\n                cls(\"dropdown-menu-item-suffix\"),\n                classNames?.itemSuffix,\n              )}\n            >\n              {item.suffix}\n            </span>\n          )}\n        </>\n      ),\n    };\n  }, [\n    classNames?.item,\n    classNames?.itemIcon,\n    classNames?.itemText,\n    classNames?.itemSuffix,\n    cls,\n    inCombobox,\n    indeterminate,\n    item,\n    itemRender,\n    selected,\n    showCheckbox,\n  ]);\n  // If custom render function is provided, use it\n  if (itemRender) {\n    return itemRender(item, {\n      ...props,\n      ...itemProps,\n    });\n  }\n  const { render, ...restProps } = props;\n  // Default rendering\n  return renderAsNativeElement ? (\n    render ? (\n      render(props)\n    ) : (\n      <div onClick={onSelect} {...restProps} />\n    )\n  ) : (\n    <MenuItem\n      value={String(item.key)}\n      keywords={\n        getItemKeywords\n          ? getItemKeywords(item)\n          : [String(item.key), reactNodeToString(item.label)]\n      }\n      onSelect={() => {\n        onSelect(item);\n      }}\n      {...props}\n    ></MenuItem>\n  );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemProps","classNames","onSelect","showCheckbox","indeterminate","renderAsNativeElement","getItemKeywords","cls","useCls","MenuItem","useMemo","Command","Menu","props","clsx","jsxs","Fragment","jsx","Checkbox","render","restProps","reactNodeToString"],"mappings":"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"}

package/dist/components/dropdown-menu/style.css

@@ -1 +1 @@
-@layer components{.ds-dropdown-menu-root{z-index:2000}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list,.ds-dropdown-menu .ds-dropdown-menu-list [cmdk-list-sizer]{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-dropdown-menu-match-trigger-width{width:min(var(--anchor-width),var(--available-width))}}
+@layer components{.ds-dropdown-menu-root{z-index:var(--ds-z-index-dropdown)}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list,.ds-dropdown-menu .ds-dropdown-menu-list [cmdk-list-sizer]{flex-shrink:1;min-height:0;display:flex;flex-direction:column}}

package/dist/components/dropdown-menu/useDropdownMenu.js

@@ -0,0 +1,124 @@
+import { jsx as e, jsxs as D } from "react/jsx-runtime";
+import { useCallback as b, useMemo as L } from "react";
+import { DropdownMenuItem as y } from "./item.js";
+import { DropdownMenuDivider as j } from "./divider.js";
+import { Menu as G } from "@base-ui-components/react";
+import { Command as E } from "../cmdk/index.js";
+import { useCls as T } from "../utils/antdUtils.js";
+import { reactNodeToString as q } from "../utils/reactToString.js";
+import { clsx as h } from "../utils/cn.js";
+const W = ({
+  items: M,
+  inCombobox: n = !1,
+  classNames: o = {},
+  selectedItemKeys: f,
+  keepOpenOnSelect: v,
+  showCheckbox: w = !1,
+  getItemKeywords: S = (u) => [String(u.key), q(u.label)],
+  onOpenChange: l,
+  itemRender: g
+}) => {
+  const u = T(), d = b(
+    (r, i, p) => r.type === "item" ? /* @__PURE__ */ e(
+      y,
+      {
+        item: r,
+        inCombobox: n,
+        selected: f == null ? void 0 : f.includes(r.key),
+        onSelect: n ? r.onSelect ? r.onSelect : () => {
+          const t = new MouseEvent("click", {
+            bubbles: !0,
+            cancelable: !0
+          });
+          r.onClick(t), v || l == null || l(!1);
+        } : void 0,
+        itemRender: g,
+        showCheckbox: w,
+        getItemKeywords: S,
+        classNames: {
+          item: o.item,
+          itemIcon: o.itemIcon,
+          itemSuffix: o.itemSuffix
+        }
+      },
+      i + "-" + p
+    ) : r.type === "divider" ? /* @__PURE__ */ e(
+      j,
+      {
+        inCombobox: n,
+        className: o == null ? void 0 : o.divider
+      },
+      i + "-" + p
+    ) : null,
+    [
+      o,
+      g,
+      l,
+      n,
+      v,
+      f,
+      w,
+      S
+    ]
+  ), k = b(
+    (r, i) => /* @__PURE__ */ D(
+      G.Group,
+      {
+        className: h(u("dropdown-menu-group"), o == null ? void 0 : o.group),
+        children: [
+          r.label && /* @__PURE__ */ e(
+            G.GroupLabel,
+            {
+              className: h(
+                u("dropdown-menu-header"),
+                o == null ? void 0 : o.groupLabel
+              ),
+              children: /* @__PURE__ */ e("span", { children: r.label })
+            }
+          ),
+          r.items.map((p, t) => d(p, i, t))
+        ]
+      },
+      "group" + i
+    ),
+    [u, o, d]
+  ), m = b(
+    (r, i) => r.label ? /* @__PURE__ */ e(
+      E.Group,
+      {
+        className: h(u("dropdown-menu-group"), o == null ? void 0 : o.group),
+        heading: /* @__PURE__ */ e(
+          G.GroupLabel,
+          {
+            className: h(
+              u("dropdown-menu-header"),
+              o == null ? void 0 : o.groupLabel
+            ),
+            children: /* @__PURE__ */ e("span", { children: r.label })
+          }
+        ),
+        children: r.items.map((p, t) => d(p, i, t))
+      },
+      "group" + i
+    ) : r.items.map((p, t) => d(p, i, t)),
+    [u, o, d]
+  );
+  return {
+    itemGroups: L(
+      () => M.reduce((r, i) => (r.length === 0 && i.type !== "header" && r.push({
+        label: null,
+        items: []
+      }), i.type === "header" ? r.push({
+        label: i.title,
+        items: []
+      }) : (i.type === "item" || i.type === "divider") && r.length > 0 && r[r.length - 1].items.push(i), r), []),
+      [M]
+    ),
+    renderMenuItem: d,
+    renderGroup: n ? m : k
+  };
+};
+export {
+  W as useDropdownMenu
+};
+//# sourceMappingURL=useDropdownMenu.js.map

package/dist/components/dropdown-menu/useDropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownMenu.js","sources":["../../../src/components/dropdown-menu/useDropdownMenu.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport { DropdownMenuItemType, DropdownMenuGroup } from \"./types\";\nimport { DropdownMenuItem } from \"./item\";\nimport { DropdownMenuDivider } from \"./divider\";\nimport { reactNodeToString, clsx, useCls } from \"../utils\";\nimport { Menu } from \"@base-ui-components/react\";\nimport { Command } from \"../cmdk\";\n\nexport interface UseDropdownMenuProps {\n  /**\n   * Callback function to handle the open state change of the dropdown menu.\n   */\n  onOpenChange?: (open: boolean) => void;\n  items: DropdownMenuItemType[];\n  inCombobox?: boolean;\n  classNames?: {\n    item?: string;\n    itemIcon?: string;\n    itemSuffix?: string;\n    group?: string;\n    groupLabel?: string;\n    divider?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>,\n  ) => React.ReactElement;\n\n  /**\n   * Whether to keep the dropdown open when an item is selected\n   * @default false\n   */\n  keepOpenOnSelect?: boolean;\n  /**\n   * Control the highlighted state of the menu item\n   */\n  highlightedItemKey?: React.Key;\n  /**\n   * Control the selected state of the menu item\n   */\n  selectedItemKeys?: React.Key[];\n  /**\n   * Whether to show checkbox\n   * @default false\n   */\n  showCheckbox?: boolean;\n  /**\n   * Function to extract keywords from the item for search filtering\n   * @default (item) => [String(item.key), reactNodeToString(item.label)]\n   */\n  getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const useDropdownMenu = ({\n  items,\n  inCombobox = false,\n  classNames = {},\n  selectedItemKeys,\n  keepOpenOnSelect,\n  showCheckbox = false,\n  getItemKeywords = (item) => [String(item.key), reactNodeToString(item.label)],\n  onOpenChange,\n  itemRender,\n}: UseDropdownMenuProps) => {\n  const cls = useCls();\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      if (item.type === \"item\") {\n        return (\n          <DropdownMenuItem\n            key={i + \"-\" + j}\n            item={item}\n            inCombobox={inCombobox}\n            selected={selectedItemKeys?.includes(item.key)}\n            onSelect={\n              inCombobox\n                ? item.onSelect\n                  ? item.onSelect\n                  : () => {\n                      const e = new MouseEvent(\"click\", {\n                        bubbles: true,\n                        cancelable: true,\n                      }) as unknown as React.MouseEvent<\n                        HTMLElement,\n                        MouseEvent\n                      >;\n                      item.onClick(e);\n                      if (!keepOpenOnSelect) onOpenChange?.(false);\n                    }\n                : undefined\n            }\n            itemRender={itemRender}\n            showCheckbox={showCheckbox}\n            getItemKeywords={getItemKeywords}\n            classNames={{\n              item: classNames.item,\n              itemIcon: classNames.itemIcon,\n              itemSuffix: classNames.itemSuffix,\n            }}\n          />\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <DropdownMenuDivider\n            key={i + \"-\" + j}\n            inCombobox={inCombobox}\n            className={classNames?.divider}\n          />\n        );\n      }\n      return null;\n    },\n    [\n      classNames,\n      itemRender,\n      onOpenChange,\n      inCombobox,\n      keepOpenOnSelect,\n      selectedItemKeys,\n      showCheckbox,\n      getItemKeywords,\n    ],\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel,\n            )}\n          >\n            <span>{group.label}</span>\n          </Menu.GroupLabel>\n        )}\n        {group.items.map((item, j) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem],\n  );\n\n  const renderGroupCombobox = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <Menu.GroupLabel\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel,\n              )}\n            >\n              <span>{group.label}</span>\n            </Menu.GroupLabel>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem],\n  );\n\n  const itemGroups = useMemo(\n    () =>\n      items.reduce<DropdownMenuGroup[]>((acc, current) => {\n        // If no groups exist yet and current item is not a header, create default group\n        if (acc.length === 0 && current.type !== \"header\") {\n          acc.push({\n            label: null,\n            items: [],\n          });\n        }\n\n        // If it's a header, create a new group\n        if (current.type === \"header\") {\n          acc.push({\n            label: current.title,\n            items: [],\n          });\n        }\n        // If it's an item and we have at least one group, add it to the last group's items\n        else if (\n          (current.type === \"item\" || current.type === \"divider\") &&\n          acc.length > 0\n        ) {\n          acc[acc.length - 1].items.push(current);\n        }\n        // Skip dividers\n        return acc;\n      }, []),\n    [items],\n  );\n  return {\n    itemGroups,\n    renderMenuItem,\n    renderGroup: inCombobox ? renderGroupCombobox : renderGroup,\n  };\n};\n"],"names":["useDropdownMenu","items","inCombobox","classNames","selectedItemKeys","keepOpenOnSelect","showCheckbox","getItemKeywords","item","reactNodeToString","onOpenChange","itemRender","cls","useCls","renderMenuItem","useCallback","j","jsx","DropdownMenuItem","e","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupCombobox","Command","useMemo","acc","current"],"mappings":"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"}

package/dist/components/hooks/antd.js

@@ -1,23 +1,21 @@
 "use client";
 import s from "antd/es/theme";
-import t from "antd/es/grid";
 import o from "antd/es/app/useApp";
-import { default as d } from "antd/es/app/useApp";
-import { useForm as l, useWatch as x } from "antd/es/form/Form";
-const m = s.useToken, p = t.useBreakpoint, a = () => {
+import { default as c } from "antd/es/app/useApp";
+import { useForm as l, useWatch as d } from "antd/es/form/Form";
+const u = s.useToken, m = () => {
   const { message: e } = o();
   return e;
-}, c = () => {
+}, n = () => {
   const { modal: e } = o();
   return e;
 };
 export {
-  d as useApp,
-  p as useBreakpoint,
+  c as useApp,
   l as useForm,
-  a as useMessage,
-  c as useModal,
-  m as useToken,
-  x as useWatch
+  m as useMessage,
+  n as useModal,
+  u as useToken,
+  d as useWatch
 };
 //# sourceMappingURL=antd.js.map

package/dist/components/hooks/antd.js.map

@@ -1 +1 @@
-{"version":3,"file":"antd.js","sources":["../../../src/components/hooks/antd.ts"],"sourcesContent":["\"use client\";\nimport theme from \"antd/es/theme\";\nimport Grid from \"antd/es/grid\";\nimport useApp from \"antd/es/app/useApp\";\n\nexport const useToken = theme.useToken;\nexport const useBreakpoint = Grid.useBreakpoint;\n\nexport { useForm, useWatch } from \"antd/es/form/Form\";\n\nexport const useMessage = () => {\n  const { message } = useApp();\n  return message;\n};\n\nexport const useModal = () => {\n  const { modal } = useApp();\n  return modal;\n};\n\nexport { useApp };\n"],"names":["useToken","theme","useBreakpoint","Grid","useMessage","message","useApp","useModal","modal"],"mappings":";;;;;;AAKO,MAAMA,IAAWC,EAAM,UACjBC,IAAgBC,EAAK,eAIrBC,IAAa,MAAM;AACxB,QAAA,EAAE,SAAAC,EAAQ,IAAIC,EAAO;AACpB,SAAAD;AACT,GAEaE,IAAW,MAAM;AACtB,QAAA,EAAE,OAAAC,EAAM,IAAIF,EAAO;AAClB,SAAAE;AACT;"}
+{"version":3,"file":"antd.js","sources":["../../../src/components/hooks/antd.ts"],"sourcesContent":["\"use client\";\nimport theme from \"antd/es/theme\";\n// import Grid from \"antd/es/grid\";\nimport useApp from \"antd/es/app/useApp\";\n\nexport const useToken = theme.useToken;\n// export const useBreakpoint = Grid.useBreakpoint;\n\nexport { useForm, useWatch } from \"antd/es/form/Form\";\n\nexport const useMessage = () => {\n  const { message } = useApp();\n  return message;\n};\n\nexport const useModal = () => {\n  const { modal } = useApp();\n  return modal;\n};\n\nexport { useApp };\n"],"names":["useToken","theme","useMessage","message","useApp","useModal","modal"],"mappings":";;;;;AAKO,MAAMA,IAAWC,EAAM,UAKjBC,IAAa,MAAM;AACxB,QAAA,EAAE,SAAAC,EAAQ,IAAIC,EAAO;AACpB,SAAAD;AACT,GAEaE,IAAW,MAAM;AACtB,QAAA,EAAE,OAAAC,EAAM,IAAIF,EAAO;AAClB,SAAAE;AACT;"}

package/dist/components/hooks/useBreakpoint.js

@@ -0,0 +1,50 @@
+"use client";
+import { useState as r, useMemo as M, useEffect as x, useCallback as w } from "react";
+const e = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+}, q = (h = "lg") => {
+  const [i, l] = r(h), [d, u] = r(!1), a = M(() => {
+    const t = {};
+    return typeof window < "u" && (t.sm = window.matchMedia(`(max-width: ${e.md - 1}px)`), t.md = window.matchMedia(`(min-width: ${e.md}px) and (max-width: ${e.lg - 1}px)`), t.lg = window.matchMedia(`(min-width: ${e.lg}px) and (max-width: ${e.xl - 1}px)`), t.xl = window.matchMedia(`(min-width: ${e.xl}px) and (max-width: ${e["2xl"] - 1}px)`), t["2xl"] = window.matchMedia(`(min-width: ${e["2xl"]}px)`)), t;
+  }, []);
+  x(() => {
+    u(!0);
+  }, []), x(() => {
+    if (typeof window > "u" || !d) return;
+    const t = () => {
+      var m, o, s, c;
+      let n = "sm";
+      (m = a["2xl"]) != null && m.matches ? n = "2xl" : (o = a.xl) != null && o.matches ? n = "xl" : (s = a.lg) != null && s.matches ? n = "lg" : (c = a.md) != null && c.matches ? n = "md" : n = "sm", l(n);
+    };
+    return t(), Object.values(a).forEach((n) => {
+      n && n.addEventListener("change", t);
+    }), () => {
+      Object.values(a).forEach((n) => {
+        n && n.removeEventListener("change", t);
+      });
+    };
+  }, [a, d]);
+  const f = w((t) => typeof window > "u" || !d ? e[i] >= e[t] : window.matchMedia(`(min-width: ${e[t]}px)`).matches, [d, i]), p = w((t) => typeof window > "u" || !d ? e[i] < e[t] : window.matchMedia(`(max-width: ${e[t] - 1}px)`).matches, [d, i]), $ = w((t, n) => typeof window > "u" || !d ? e[i] >= e[t] && e[i] < e[n] : window.matchMedia(`(min-width: ${e[t]}px) and (max-width: ${e[n] - 1}px)`).matches, [d, i]), y = w((t) => {
+    if (typeof window > "u" || !d)
+      return i === t;
+    const n = Object.keys(e), m = n.indexOf(t), o = n[m + 1];
+    let s;
+    return m === 0 ? s = `(max-width: ${e.md - 1}px)` : o ? s = `(min-width: ${e[t]}px) and (max-width: ${e[o] - 1}px)` : s = `(min-width: ${e[t]}px)`, window.matchMedia(s).matches;
+  }, [d, i]);
+  return {
+    breakpoint: i,
+    up: f,
+    down: p,
+    between: $,
+    only: y
+  };
+};
+export {
+  e as BREAKPOINTS,
+  q as useBreakpoint
+};
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/components/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sources":["../../../src/components/hooks/useBreakpoint.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\n\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n};\n\n/**\n * A responsive breakpoint hook using window.matchMedia for optimal performance.\n *\n * @param ssrBreakpoint - The breakpoint to use during SSR and before hydration.\n *                       Defaults to \"lg\" for better SEO (search engines typically use desktop viewports).\n *\n * @example\n * ```tsx\n * // Default: uses \"lg\" for SSR\n * const bp = useBreakpoint();\n *\n * // Custom SSR breakpoint\n * const bp = useBreakpoint(\"md\");\n *\n * // Usage\n * bp.breakpoint     // Current breakpoint: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"\n * bp.up(\"md\")       // true if screen >= 768px\n * bp.down(\"lg\")     // true if screen < 1024px\n * bp.between(\"md\", \"xl\")  // true if 768px <= screen < 1280px\n * bp.only(\"lg\")     // true if screen is exactly in \"lg\" range\n * ```\n */\nexport const useBreakpoint = (ssrBreakpoint: Breakpoint = \"lg\") => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(ssrBreakpoint);\n  const [isHydrated, setIsHydrated] = useState(false);\n\n  // Generate media queries\n  const mediaQueries = useMemo(() => {\n    const queries: Record<Breakpoint, MediaQueryList> = {} as any;\n    if (typeof window !== 'undefined') {\n      queries.sm = window.matchMedia(`(max-width: ${BREAKPOINTS.md - 1}px)`);\n      queries.md = window.matchMedia(`(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`);\n      queries.lg = window.matchMedia(`(min-width: ${BREAKPOINTS.lg}px) and (max-width: ${BREAKPOINTS.xl - 1}px)`);\n      queries.xl = window.matchMedia(`(min-width: ${BREAKPOINTS.xl}px) and (max-width: ${BREAKPOINTS[\"2xl\"] - 1}px)`);\n      queries[\"2xl\"] = window.matchMedia(`(min-width: ${BREAKPOINTS[\"2xl\"]}px)`);\n    }\n    return queries;\n  }, []);\n\n  useEffect(() => {\n    setIsHydrated(true);\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !isHydrated) return;\n\n    const updateBreakpoint = () => {\n      let currentBp: Breakpoint = \"sm\";\n\n      if (mediaQueries[\"2xl\"]?.matches) currentBp = \"2xl\";\n      else if (mediaQueries.xl?.matches) currentBp = \"xl\";\n      else if (mediaQueries.lg?.matches) currentBp = \"lg\";\n      else if (mediaQueries.md?.matches) currentBp = \"md\";\n      else currentBp = \"sm\";\n\n      setBreakpoint(currentBp);\n    };\n\n    // Initial check\n    updateBreakpoint();\n\n    // Add listeners\n    Object.values(mediaQueries).forEach(mq => {\n      if (mq) mq.addEventListener('change', updateBreakpoint);\n    });\n\n    return () => {\n      Object.values(mediaQueries).forEach(mq => {\n        if (mq) mq.removeEventListener('change', updateBreakpoint);\n      });\n    };\n  }, [mediaQueries, isHydrated]);\n\n  // Min width check: is current width >= breakpoint\n  const up = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint >= bp\n      return BREAKPOINTS[breakpoint] >= BREAKPOINTS[bp];\n    }\n    const mq = window.matchMedia(`(min-width: ${BREAKPOINTS[bp]}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Max width check: is current width < breakpoint\n  const down = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint < bp\n      return BREAKPOINTS[breakpoint] < BREAKPOINTS[bp];\n    }\n    const mq = window.matchMedia(`(max-width: ${BREAKPOINTS[bp] - 1}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Range check: is current width between min and max breakpoints\n  const between = useCallback((minBp: Breakpoint, maxBp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if minBp <= ssrBreakpoint < maxBp\n      return BREAKPOINTS[breakpoint] >= BREAKPOINTS[minBp] && BREAKPOINTS[breakpoint] < BREAKPOINTS[maxBp];\n    }\n    const mq = window.matchMedia(`(min-width: ${BREAKPOINTS[minBp]}px) and (max-width: ${BREAKPOINTS[maxBp] - 1}px)`);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  // Only check: is current width only within this breakpoint range\n  const only = useCallback((bp: Breakpoint) => {\n    if (typeof window === 'undefined' || !isHydrated) {\n      // SSR fallback: check if ssrBreakpoint === bp\n      return breakpoint === bp;\n    }\n\n    const breakpointKeys = Object.keys(BREAKPOINTS) as Breakpoint[];\n    const currentIndex = breakpointKeys.indexOf(bp);\n    const nextBp = breakpointKeys[currentIndex + 1];\n\n    let query: string;\n    if (currentIndex === 0) {\n      // For 'sm', check if width < md\n      query = `(max-width: ${BREAKPOINTS.md - 1}px)`;\n    } else if (!nextBp) {\n      // For highest breakpoint, check if width >= current\n      query = `(min-width: ${BREAKPOINTS[bp]}px)`;\n    } else {\n      // For middle breakpoints, check range\n      query = `(min-width: ${BREAKPOINTS[bp]}px) and (max-width: ${BREAKPOINTS[nextBp] - 1}px)`;\n    }\n\n    const mq = window.matchMedia(query);\n    return mq.matches;\n  }, [isHydrated, breakpoint]);\n\n  return {\n    breakpoint,\n    up,\n    down,\n    between,\n    only,\n  };\n};\n"],"names":["BREAKPOINTS","useBreakpoint","ssrBreakpoint","breakpoint","setBreakpoint","useState","isHydrated","setIsHydrated","mediaQueries","useMemo","queries","useEffect","updateBreakpoint","currentBp","_a","_b","_c","_d","mq","up","useCallback","bp","down","between","minBp","maxBp","only","breakpointKeys","currentIndex","nextBp","query"],"mappings":"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"}

package/dist/components/hooks/useResizeObserver.js

@@ -0,0 +1,52 @@
+"use client";
+import { useRef as l, useState as R, useMemo as d, useEffect as z } from "react";
+const S = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function x(o) {
+  const n = l(0), e = l(null), [r, u] = R(S), c = d(
+    () => typeof window < "u" ? new ResizeObserver((m) => {
+      const t = m[0];
+      t && (cancelAnimationFrame(n.current), n.current = requestAnimationFrame(() => {
+        var s, f;
+        if (e.current) {
+          const i = ((s = t.borderBoxSize) == null ? void 0 : s[0]) || ((f = t.contentBoxSize) == null ? void 0 : f[0]);
+          if (i) {
+            const a = i.inlineSize, h = i.blockSize;
+            u({
+              width: a,
+              height: h,
+              x: t.contentRect.x,
+              y: t.contentRect.y,
+              top: t.contentRect.top,
+              left: t.contentRect.left,
+              bottom: t.contentRect.bottom,
+              right: t.contentRect.right
+            });
+          } else
+            u(t.contentRect);
+        }
+      }));
+    }) : null,
+    []
+  );
+  return z(() => (e.current && (c == null || c.observe(e.current, o)), () => {
+    c == null || c.disconnect(), n.current && cancelAnimationFrame(n.current);
+  }), [e.current]), [e, r];
+}
+function g(o) {
+  const [n, { width: e, height: r }] = x(o);
+  return { ref: n, width: e, height: r };
+}
+export {
+  g as useElementSize,
+  x as useResizeObserver
+};
+//# sourceMappingURL=useResizeObserver.js.map