@lobehub/ui 5.13.0 → 5.14.1

package/es/Menu/baseItem.d.mts

@@ -31,6 +31,10 @@ interface BaseSubMenuType {
   delay?: number;
   desc?: ReactNode;
   disabled?: boolean;
+  /** Pinned footer slot, rendered below the scrollable submenu items with a divider border. */
+  footer?: ReactNode;
+  /** Pinned header slot, rendered above the scrollable submenu items with a divider border. */
+  header?: ReactNode;
   icon?: IconProps['icon'];
   key?: Key;
   label?: ReactNode;

package/es/base-ui/ContextMenu/renderItems.mjs

@@ -186,6 +186,11 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
 			const label = getItemLabel(submenu);
 			const labelText = typeof label === "string" ? label : void 0;
 			const isDanger = "danger" in submenu && Boolean(submenu.danger);
+			const submenuHasSlots = submenu.header != null || submenu.footer != null;
+			const submenuBody = submenu.children && submenu.children.length > 0 ? renderContextMenuItems(submenu.children, nextKeyPath, {
+				iconAlign,
+				iconSpaceMode
+			}) : /* @__PURE__ */ jsx(EmptyMenuItem, {});
 			return /* @__PURE__ */ jsxs(ContextMenu.SubmenuRoot, {
 				defaultOpen: submenu.defaultOpen,
 				open: submenu.open,
@@ -210,12 +215,22 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
 					"data-submenu": "",
 					sideOffset: -1,
 					onContextMenu: preventDefaultAndStopPropagation,
-					children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
-						className: styles.popup,
-						children: submenu.children && submenu.children.length > 0 ? renderContextMenuItems(submenu.children, nextKeyPath, {
-							iconAlign,
-							iconSpaceMode
-						}) : /* @__PURE__ */ jsx(EmptyMenuItem, {})
+					children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
+						className: submenuHasSlots ? cx(styles.popup, styles.popupWithSlots) : styles.popup,
+						children: [
+							submenu.header == null ? null : /* @__PURE__ */ jsx("div", {
+								className: styles.header,
+								children: submenu.header
+							}),
+							submenuHasSlots ? /* @__PURE__ */ jsx("div", {
+								className: styles.slotViewport,
+								children: submenuBody
+							}) : submenuBody,
+							submenu.footer == null ? null : /* @__PURE__ */ jsx("div", {
+								className: styles.footer,
+								children: submenu.footer
+							})
+						]
 					})
 				}) })]
 			}, itemKey);

package/es/base-ui/ContextMenu/renderItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport { Check, ChevronRight } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport {\n  type BaseMenuItemGroupType,\n  type BaseSubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  type MenuDividerType,\n  type MenuItemType,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu';\nimport { styles } from '@/Menu/sharedStyle';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport {\n  type ContextMenuCheckboxItem,\n  type ContextMenuItem,\n  type ContextMenuSwitchItem,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n  const { t } = useTranslation(common);\n  return (\n    <ContextMenu.Item disabled className={cx(styles.item, styles.empty)}>\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={cx(styles.item, danger && styles.danger)}\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 className={cx(styles.itemContent, alignStart && styles.itemContentAlignStart)}>\n      {shouldRenderIcon ? (\n        <span\n          aria-hidden={!hasIcon}\n          className={cx(styles.icon, alignStart && styles.iconAlignStart)}\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          <ChevronRight size={16} />\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={cx(styles.item, isDanger && styles.danger)}\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\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={cx(styles.item, isDanger && styles.danger)}\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            <ContextMenu.Positioner\n              alignOffset={-4}\n              className={styles.positioner}\n              data-submenu=\"\"\n              sideOffset={-1}\n              onContextMenu={preventDefaultAndStopPropagation}\n            >\n              <ContextMenu.Popup className={styles.popup}>\n                {submenu.children && submenu.children.length > 0 ? (\n                  renderContextMenuItems(submenu.children, nextKeyPath, {\n                    iconAlign,\n                    iconSpaceMode,\n                  })\n                ) : (\n                  <EmptyMenuItem />\n                )}\n              </ContextMenu.Popup>\n            </ContextMenu.Positioner>\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={cx(styles.item, isDanger && styles.danger)}\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"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport { Check, ChevronRight } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport {\n  type BaseMenuItemGroupType,\n  type BaseSubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  type MenuDividerType,\n  type MenuItemType,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu';\nimport { styles } from '@/Menu/sharedStyle';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport {\n  type ContextMenuCheckboxItem,\n  type ContextMenuItem,\n  type ContextMenuSwitchItem,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n  const { t } = useTranslation(common);\n  return (\n    <ContextMenu.Item disabled className={cx(styles.item, styles.empty)}>\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={cx(styles.item, danger && styles.danger)}\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 className={cx(styles.itemContent, alignStart && styles.itemContentAlignStart)}>\n      {shouldRenderIcon ? (\n        <span\n          aria-hidden={!hasIcon}\n          className={cx(styles.icon, alignStart && styles.iconAlignStart)}\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          <ChevronRight size={16} />\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={cx(styles.item, isDanger && styles.danger)}\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={cx(styles.item, isDanger && styles.danger)}\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            <ContextMenu.Positioner\n              alignOffset={-4}\n              className={styles.positioner}\n              data-submenu=\"\"\n              sideOffset={-1}\n              onContextMenu={preventDefaultAndStopPropagation}\n            >\n              <ContextMenu.Popup\n                className={submenuHasSlots ? cx(styles.popup, styles.popupWithSlots) : styles.popup}\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            </ContextMenu.Positioner>\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={cx(styles.item, isDanger && styles.danger)}\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/base-ui/DropdownMenu/renderItems.mjs

@@ -1,5 +1,5 @@
 import { styles } from "../../Menu/sharedStyle.mjs";
-import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem } from "./atoms.mjs";
+import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem } from "./atoms.mjs";
 import { getItemKey, getItemLabel, hasAnyIcon, hasCheckboxAndIcon, renderIcon } from "../../Menu/renderUtils.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight } from "lucide-react";
@@ -106,6 +106,11 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 			const label = getItemLabel(submenu);
 			const labelText = typeof label === "string" ? label : void 0;
 			const isDanger = "danger" in submenu && Boolean(submenu.danger);
+			const submenuHasSlots = submenu.header != null || submenu.footer != null;
+			const submenuItems = submenu.children ? renderDropdownMenuItems(submenu.children, nextKeyPath, {
+				iconAlign,
+				iconSpaceMode
+			}) : null;
 			return /* @__PURE__ */ jsxs(DropdownMenuSubmenuRoot, {
 				defaultOpen: submenu.defaultOpen,
 				open: submenu.open,
@@ -128,10 +133,14 @@ const renderDropdownMenuItems = (items, keyPath = [], options) => {
 					alignOffset: -4,
 					"data-submenu": "",
 					sideOffset: -1,
-					children: /* @__PURE__ */ jsx(DropdownMenuPopup, { children: submenu.children ? renderDropdownMenuItems(submenu.children, nextKeyPath, {
-						iconAlign,
-						iconSpaceMode
-					}) : null })
+					children: /* @__PURE__ */ jsxs(DropdownMenuPopup, {
+						className: submenuHasSlots ? styles.popupWithSlots : void 0,
+						children: [
+							submenu.header == null ? null : /* @__PURE__ */ jsx(DropdownMenuHeader, { children: submenu.header }),
+							submenuHasSlots ? /* @__PURE__ */ jsx(DropdownMenuScrollViewport, { children: submenuItems }) : submenuItems,
+							submenu.footer == null ? null : /* @__PURE__ */ jsx(DropdownMenuFooter, { children: submenu.footer })
+						]
+					})
 				}) })]
 			}, itemKey);
 		}

package/es/base-ui/DropdownMenu/renderItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderItems.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check, ChevronRight } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\n\nimport {\n  type BaseMenuItemGroupType,\n  type BaseSubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  type MenuDividerType,\n  type MenuItemType,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu';\nimport { styles } from '@/Menu/sharedStyle';\n\nimport {\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuItemContent,\n  DropdownMenuItemDesc,\n  DropdownMenuItemExtra,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  DropdownMenuItemLabelGroup,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuSeparator,\n  DropdownMenuSubmenuArrow,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuSwitchItem,\n} from './atoms';\nimport {\n  type DropdownItem,\n  type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n  type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n  item: MenuItemType | BaseSubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\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\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    <DropdownMenuItemLabelGroup>\n      <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n      <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n    </DropdownMenuItemLabelGroup>\n  ) : (\n    <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n  );\n\n  return (\n    <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n      {shouldRenderIcon ? (\n        <DropdownMenuItemIcon\n          aria-hidden={!hasIcon}\n          className={alignStart ? styles.iconAlignStart : undefined}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </DropdownMenuItemIcon>\n      ) : null}\n      {labelNode}\n      {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <DropdownMenuSubmenuArrow>\n          <ChevronRight size={16} />\n        </DropdownMenuSubmenuArrow>\n      ) : null}\n    </DropdownMenuItemContent>\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 renderDropdownMenuItems = (\n  items: DropdownItem[],\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 DropdownMenuCheckboxItemType).type === 'checkbox') {\n      const checkboxItem = item as DropdownMenuCheckboxItemType;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n      );\n\n      return (\n        <DropdownMenuCheckboxItemPrimitive\n          checked={checkboxItem.checked}\n          closeOnClick={checkboxItem.closeOnClick}\n          danger={isDanger}\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        </DropdownMenuCheckboxItemPrimitive>\n      );\n    }\n\n    if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n      const switchItem = item as DropdownMenuSwitchItemType;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <DropdownMenuSwitchItem\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={(checked) => switchItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </DropdownMenuSwitchItem>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <DropdownMenuSeparator 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        <DropdownMenuGroup key={itemKey}>\n          {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n          {group.children\n            ? renderDropdownMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </DropdownMenuGroup>\n      );\n    }\n\n    if ((item as BaseSubMenuType).type === 'submenu' || 'children' in item) {\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\n      return (\n        <DropdownMenuSubmenuRoot\n          defaultOpen={submenu.defaultOpen}\n          key={itemKey}\n          open={submenu.open}\n          onOpenChange={submenu.onOpenChange}\n        >\n          <DropdownMenuSubmenuTrigger\n            {...submenu.triggerProps}\n            closeDelay={submenu.closeDelay}\n            danger={isDanger}\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          </DropdownMenuSubmenuTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n              <DropdownMenuPopup>\n                {submenu.children\n                  ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n                      iconAlign,\n                      iconSpaceMode,\n                    })\n                  : null}\n              </DropdownMenuPopup>\n            </DropdownMenuPositioner>\n          </DropdownMenuPortal>\n        </DropdownMenuSubmenuRoot>\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      <DropdownMenuItem\n        closeOnClick={menuItem.closeOnClick}\n        danger={isDanger}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </DropdownMenuItem>\n    );\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"renderItems.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check, ChevronRight } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\n\nimport {\n  type BaseMenuItemGroupType,\n  type BaseSubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  type MenuDividerType,\n  type MenuItemType,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu';\nimport { styles } from '@/Menu/sharedStyle';\n\nimport {\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuFooter,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuHeader,\n  DropdownMenuItem,\n  DropdownMenuItemContent,\n  DropdownMenuItemDesc,\n  DropdownMenuItemExtra,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  DropdownMenuItemLabelGroup,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuScrollViewport,\n  DropdownMenuSeparator,\n  DropdownMenuSubmenuArrow,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuSwitchItem,\n} from './atoms';\nimport {\n  type DropdownItem,\n  type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n  type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n  item: MenuItemType | BaseSubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\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\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    <DropdownMenuItemLabelGroup>\n      <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n      <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n    </DropdownMenuItemLabelGroup>\n  ) : (\n    <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n  );\n\n  return (\n    <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n      {shouldRenderIcon ? (\n        <DropdownMenuItemIcon\n          aria-hidden={!hasIcon}\n          className={alignStart ? styles.iconAlignStart : undefined}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </DropdownMenuItemIcon>\n      ) : null}\n      {labelNode}\n      {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <DropdownMenuSubmenuArrow>\n          <ChevronRight size={16} />\n        </DropdownMenuSubmenuArrow>\n      ) : null}\n    </DropdownMenuItemContent>\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 renderDropdownMenuItems = (\n  items: DropdownItem[],\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 DropdownMenuCheckboxItemType).type === 'checkbox') {\n      const checkboxItem = item as DropdownMenuCheckboxItemType;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n      );\n\n      return (\n        <DropdownMenuCheckboxItemPrimitive\n          checked={checkboxItem.checked}\n          closeOnClick={checkboxItem.closeOnClick}\n          danger={isDanger}\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        </DropdownMenuCheckboxItemPrimitive>\n      );\n    }\n\n    if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n      const switchItem = item as DropdownMenuSwitchItemType;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <DropdownMenuSwitchItem\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={(checked) => switchItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </DropdownMenuSwitchItem>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <DropdownMenuSeparator 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        <DropdownMenuGroup key={itemKey}>\n          {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n          {group.children\n            ? renderDropdownMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </DropdownMenuGroup>\n      );\n    }\n\n    if ((item as BaseSubMenuType).type === 'submenu' || 'children' in item) {\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 submenuItems = submenu.children\n        ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n            iconAlign,\n            iconSpaceMode,\n          })\n        : null;\n\n      return (\n        <DropdownMenuSubmenuRoot\n          defaultOpen={submenu.defaultOpen}\n          key={itemKey}\n          open={submenu.open}\n          onOpenChange={submenu.onOpenChange}\n        >\n          <DropdownMenuSubmenuTrigger\n            {...submenu.triggerProps}\n            closeDelay={submenu.closeDelay}\n            danger={isDanger}\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          </DropdownMenuSubmenuTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n              <DropdownMenuPopup className={submenuHasSlots ? styles.popupWithSlots : undefined}>\n                {submenu.header == null ? null : (\n                  <DropdownMenuHeader>{submenu.header}</DropdownMenuHeader>\n                )}\n                {submenuHasSlots ? (\n                  <DropdownMenuScrollViewport>{submenuItems}</DropdownMenuScrollViewport>\n                ) : (\n                  submenuItems\n                )}\n                {submenu.footer == null ? null : (\n                  <DropdownMenuFooter>{submenu.footer}</DropdownMenuFooter>\n                )}\n              </DropdownMenuPopup>\n            </DropdownMenuPositioner>\n          </DropdownMenuPortal>\n        </DropdownMenuSubmenuRoot>\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      <DropdownMenuItem\n        closeOnClick={menuItem.closeOnClick}\n        danger={isDanger}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </DropdownMenuItem>\n    );\n  });\n};\n"],"mappings":"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"}

package/es/base-ui/ScrollArea/ScrollArea.mjs

@@ -2,7 +2,14 @@
 import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./atoms.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/base-ui/ScrollArea/ScrollArea.tsx
-const ScrollArea = ({ children, contentProps, corner = false, cornerProps, scrollFade = false, scrollbarProps, thumbProps, viewportProps, ...rest }) => {
+const ScrollArea = ({ children, contentProps, corner = false, cornerProps, disableContentFit = false, scrollFade = false, scrollbarProps, thumbProps, viewportProps, ...rest }) => {
+	const mergedContentProps = disableContentFit ? {
+		...contentProps,
+		style: {
+			minWidth: 0,
+			...contentProps?.style
+		}
+	} : contentProps;
 	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
 		...rest,
 		children: [
@@ -10,7 +17,7 @@ const ScrollArea = ({ children, contentProps, corner = false, cornerProps, scrol
 				scrollFade,
 				...viewportProps,
 				children: /* @__PURE__ */ jsx(ScrollAreaContent, {
-					...contentProps,
+					...mergedContentProps,
 					children
 				})
 			}),

package/es/base-ui/ScrollArea/ScrollArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n  ScrollAreaContent,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nexport const ScrollArea: FC<ScrollAreaProps> = ({\n  children,\n  contentProps,\n  corner = false,\n  cornerProps,\n  scrollFade = false,\n  scrollbarProps,\n  thumbProps,\n  viewportProps,\n  ...rest\n}) => {\n  return (\n    <ScrollAreaRoot {...rest}>\n      <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n        <ScrollAreaContent {...contentProps}>{children}</ScrollAreaContent>\n      </ScrollAreaViewport>\n      <ScrollAreaScrollbar {...scrollbarProps}>\n        <ScrollAreaThumb {...thumbProps} />\n      </ScrollAreaScrollbar>\n      {corner && <ScrollAreaCorner {...cornerProps} />}\n    </ScrollAreaRoot>\n  );\n};\n"],"mappings":";;;;AAcA,MAAa,cAAmC,EAC9C,UACA,cACA,SAAS,OACT,aACA,aAAa,OACb,gBACA,YACA,eACA,GAAG,WACC;AACJ,QACE,qBAAC,gBAAD;EAAgB,GAAI;YAApB;GACE,oBAAC,oBAAD;IAAgC;IAAY,GAAI;cAC9C,oBAAC,mBAAD;KAAmB,GAAI;KAAe;KAA6B,CAAA;IAChD,CAAA;GACrB,oBAAC,qBAAD;IAAqB,GAAI;cACvB,oBAAC,iBAAD,EAAiB,GAAI,YAAc,CAAA;IACf,CAAA;GACrB,UAAU,oBAAC,kBAAD,EAAkB,GAAI,aAAe,CAAA;GACjC"}
+{"version":3,"file":"ScrollArea.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n  ScrollAreaContent,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nexport const ScrollArea: FC<ScrollAreaProps> = ({\n  children,\n  contentProps,\n  corner = false,\n  cornerProps,\n  disableContentFit = false,\n  scrollFade = false,\n  scrollbarProps,\n  thumbProps,\n  viewportProps,\n  ...rest\n}) => {\n  const mergedContentProps = disableContentFit\n    ? { ...contentProps, style: { minWidth: 0, ...contentProps?.style } }\n    : contentProps;\n\n  return (\n    <ScrollAreaRoot {...rest}>\n      <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n        <ScrollAreaContent {...mergedContentProps}>{children}</ScrollAreaContent>\n      </ScrollAreaViewport>\n      <ScrollAreaScrollbar {...scrollbarProps}>\n        <ScrollAreaThumb {...thumbProps} />\n      </ScrollAreaScrollbar>\n      {corner && <ScrollAreaCorner {...cornerProps} />}\n    </ScrollAreaRoot>\n  );\n};\n"],"mappings":";;;;AAcA,MAAa,cAAmC,EAC9C,UACA,cACA,SAAS,OACT,aACA,oBAAoB,OACpB,aAAa,OACb,gBACA,YACA,eACA,GAAG,WACC;CACJ,MAAM,qBAAqB,oBACvB;EAAE,GAAG;EAAc,OAAO;GAAE,UAAU;GAAG,GAAG,cAAc;GAAO;EAAE,GACnE;AAEJ,QACE,qBAAC,gBAAD;EAAgB,GAAI;YAApB;GACE,oBAAC,oBAAD;IAAgC;IAAY,GAAI;cAC9C,oBAAC,mBAAD;KAAmB,GAAI;KAAqB;KAA6B,CAAA;IACtD,CAAA;GACrB,oBAAC,qBAAD;IAAqB,GAAI;cACvB,oBAAC,iBAAD,EAAiB,GAAI,YAAc,CAAA;IACf,CAAA;GACrB,UAAU,oBAAC,kBAAD,EAAkB,GAAI,aAAe,CAAA;GACjC"}

package/es/base-ui/ScrollArea/type.d.mts

@@ -7,6 +7,15 @@ interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
   contentProps?: Omit<ScrollAreaContentProps, 'children'>;
   corner?: boolean;
   cornerProps?: ScrollAreaCornerProps;
+  /**
+   * Override Base UI's default `min-width: fit-content` on the content node by
+   * setting `min-width: 0`. Use this when an unbreakable wide child (e.g. a
+   * `<pre>` code block) would otherwise propagate its intrinsic width up the
+   * ancestor chain and stretch the scroll container past its parent.
+   *
+   * @default false
+   */
+  disableContentFit?: boolean;
   scrollbarProps?: Omit<ScrollAreaScrollbarProps, 'children'>;
   /**
    * Enable gradient scroll fade on the viewport edges.

package/es/base-ui/Toast/Toast.mjs

@@ -39,6 +39,7 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 	const iconColor = typeColors[type];
 	const IconComponent = icon ?? typeIcons[type];
 	const isLoading = type === "loading";
+	const standaloneDescriptionClassName = cx(styles.description, styles.descriptionStandalone, classNames?.description);
 	const renderIcon = () => {
 		if (!IconComponent) return null;
 		return /* @__PURE__ */ jsx("div", {
@@ -108,7 +109,7 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 					})] }) : description && /* @__PURE__ */ jsxs("div", {
 						className: styles.titleRow,
 						children: [/* @__PURE__ */ jsx(Toast.Description, {
-							className: cx(styles.description, classNames?.description),
+							className: standaloneDescriptionClassName,
 							style: customStyles?.description,
 							children: description
 						}), showCloseButton && /* @__PURE__ */ jsx(Toast.Close, {

package/es/base-ui/Toast/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport { type ToastOptions, type ToastProps, type ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n  default: Info,\n  error: XCircle,\n  info: Info,\n  loading: Loader2,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n  default: cssVar.colorText,\n  error: cssVar.colorError,\n  info: cssVar.colorInfo,\n  loading: cssVar.colorPrimary,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n  const { position, swipeDirection } = useToastContext();\n  const toastData = toast.data as ToastOptions | undefined;\n  const type = toastData?.type ?? 'default';\n  const closable = toastData?.closable ?? true;\n  const hideCloseButton = toastData?.hideCloseButton ?? false;\n  const showCloseButton = closable && !hideCloseButton;\n  const icon = toastData?.icon;\n  const title = toast.title ?? toastData?.title;\n  const description = toast.description ?? toastData?.description;\n  const actionProps = toast.actionProps ?? toastData?.actionProps;\n  const actions = toastData?.actions;\n\n  const iconColor = typeColors[type];\n  const IconComponent = icon ?? typeIcons[type];\n  const isLoading = type === 'loading';\n\n  const renderIcon = (): ReactNode => {\n    if (!IconComponent) return null;\n    return (\n      <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n        <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n      </div>\n    );\n  };\n\n  const renderActions = (): ReactNode => {\n    if (actions && actions.length > 0) {\n      return (\n        <div className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n          {actions.map((action, index) => (\n            <BaseToast.Action\n              key={index}\n              style={customStyles?.action}\n              className={cx(\n                actionVariants({ variant: action.variant ?? 'primary' }),\n                classNames?.action,\n              )}\n              onClick={action.onClick}\n              {...action.props}\n            >\n              {action.label}\n            </BaseToast.Action>\n          ))}\n        </div>\n      );\n    }\n    if (actionProps) {\n      return (\n        <BaseToast.Action\n          className={cx(actionVariants({ variant: 'primary' }), classNames?.action)}\n          style={customStyles?.action}\n          {...actionProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <BaseToast.Root\n      className={cx(rootVariants({ position }), classNames?.root)}\n      swipeDirection={swipeDirection}\n      toast={toast}\n      style={{\n        ...customStyles?.root,\n        ...toastData?.style,\n      }}\n    >\n      <BaseToast.Content\n        className={cx(styles.content, classNames?.content)}\n        style={customStyles?.content}\n      >\n        <div className={title ? styles.toastBody : styles.toastBodyCenter}>\n          {renderIcon()}\n          <div className={styles.contentArea}>\n            {title ? (\n              <>\n                <div className={styles.titleRow}>\n                  <BaseToast.Title\n                    className={cx(styles.title, classNames?.title)}\n                    style={customStyles?.title}\n                  >\n                    {title}\n                  </BaseToast.Title>\n                  {showCloseButton && (\n                    <BaseToast.Close\n                      aria-label=\"Close\"\n                      className={cx(styles.close, classNames?.close)}\n                      style={customStyles?.close}\n                    >\n                      <X size={14} />\n                    </BaseToast.Close>\n                  )}\n                </div>\n                {description && (\n                  <BaseToast.Description\n                    className={cx(styles.description, classNames?.description)}\n                    style={{\n                      marginBlockStart: 4,\n                      ...customStyles?.description,\n                    }}\n                  >\n                    {description}\n                  </BaseToast.Description>\n                )}\n              </>\n            ) : (\n              description && (\n                <div className={styles.titleRow}>\n                  <BaseToast.Description\n                    className={cx(styles.description, classNames?.description)}\n                    style={customStyles?.description}\n                  >\n                    {description}\n                  </BaseToast.Description>\n                  {showCloseButton && (\n                    <BaseToast.Close\n                      aria-label=\"Close\"\n                      className={cx(styles.close, classNames?.close)}\n                      style={customStyles?.close}\n                    >\n                      <X size={14} />\n                    </BaseToast.Close>\n                  )}\n                </div>\n              )\n            )}\n            {renderActions()}\n          </div>\n        </div>\n      </BaseToast.Content>\n    </BaseToast.Root>\n  );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":"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"}
+{"version":3,"file":"Toast.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport { type ToastOptions, type ToastProps, type ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n  default: Info,\n  error: XCircle,\n  info: Info,\n  loading: Loader2,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n  default: cssVar.colorText,\n  error: cssVar.colorError,\n  info: cssVar.colorInfo,\n  loading: cssVar.colorPrimary,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n  const { position, swipeDirection } = useToastContext();\n  const toastData = toast.data as ToastOptions | undefined;\n  const type = toastData?.type ?? 'default';\n  const closable = toastData?.closable ?? true;\n  const hideCloseButton = toastData?.hideCloseButton ?? false;\n  const showCloseButton = closable && !hideCloseButton;\n  const icon = toastData?.icon;\n  const title = toast.title ?? toastData?.title;\n  const description = toast.description ?? toastData?.description;\n  const actionProps = toast.actionProps ?? toastData?.actionProps;\n  const actions = toastData?.actions;\n\n  const iconColor = typeColors[type];\n  const IconComponent = icon ?? typeIcons[type];\n  const isLoading = type === 'loading';\n  const standaloneDescriptionClassName = cx(\n    styles.description,\n    styles.descriptionStandalone,\n    classNames?.description,\n  );\n\n  const renderIcon = (): ReactNode => {\n    if (!IconComponent) return null;\n    return (\n      <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n        <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n      </div>\n    );\n  };\n\n  const renderActions = (): ReactNode => {\n    if (actions && actions.length > 0) {\n      return (\n        <div className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n          {actions.map((action, index) => (\n            <BaseToast.Action\n              key={index}\n              style={customStyles?.action}\n              className={cx(\n                actionVariants({ variant: action.variant ?? 'primary' }),\n                classNames?.action,\n              )}\n              onClick={action.onClick}\n              {...action.props}\n            >\n              {action.label}\n            </BaseToast.Action>\n          ))}\n        </div>\n      );\n    }\n    if (actionProps) {\n      return (\n        <BaseToast.Action\n          className={cx(actionVariants({ variant: 'primary' }), classNames?.action)}\n          style={customStyles?.action}\n          {...actionProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <BaseToast.Root\n      className={cx(rootVariants({ position }), classNames?.root)}\n      swipeDirection={swipeDirection}\n      toast={toast}\n      style={{\n        ...customStyles?.root,\n        ...toastData?.style,\n      }}\n    >\n      <BaseToast.Content\n        className={cx(styles.content, classNames?.content)}\n        style={customStyles?.content}\n      >\n        <div className={title ? styles.toastBody : styles.toastBodyCenter}>\n          {renderIcon()}\n          <div className={styles.contentArea}>\n            {title ? (\n              <>\n                <div className={styles.titleRow}>\n                  <BaseToast.Title\n                    className={cx(styles.title, classNames?.title)}\n                    style={customStyles?.title}\n                  >\n                    {title}\n                  </BaseToast.Title>\n                  {showCloseButton && (\n                    <BaseToast.Close\n                      aria-label=\"Close\"\n                      className={cx(styles.close, classNames?.close)}\n                      style={customStyles?.close}\n                    >\n                      <X size={14} />\n                    </BaseToast.Close>\n                  )}\n                </div>\n                {description && (\n                  <BaseToast.Description\n                    className={cx(styles.description, classNames?.description)}\n                    style={{\n                      marginBlockStart: 4,\n                      ...customStyles?.description,\n                    }}\n                  >\n                    {description}\n                  </BaseToast.Description>\n                )}\n              </>\n            ) : (\n              description && (\n                <div className={styles.titleRow}>\n                  <BaseToast.Description\n                    className={standaloneDescriptionClassName}\n                    style={customStyles?.description}\n                  >\n                    {description}\n                  </BaseToast.Description>\n                  {showCloseButton && (\n                    <BaseToast.Close\n                      aria-label=\"Close\"\n                      className={cx(styles.close, classNames?.close)}\n                      style={customStyles?.close}\n                    >\n                      <X size={14} />\n                    </BaseToast.Close>\n                  )}\n                </div>\n              )\n            )}\n            {renderActions()}\n          </div>\n        </div>\n      </BaseToast.Content>\n    </BaseToast.Root>\n  );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":"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"}

package/es/base-ui/Toast/style.mjs

@@ -121,7 +121,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border: none;
     border-radius: ${cssVar.borderRadiusSM};
 
-    color: ${cssVar.colorTextTertiary};
+    color: ${cssVar.colorTextSecondary};
 
     background: transparent;
 
@@ -157,6 +157,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     font-size: 13px;
     line-height: 1.5;
     color: ${cssVar.colorTextSecondary};
+  `,
+	descriptionStandalone: css`
+    color: ${cssVar.colorText};
   `,
 	icon: css`
     display: flex;
@@ -297,7 +300,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	titleRow: css`
     display: flex;
     gap: 8px;
-    align-items: center;
+    align-items: flex-start;
   `,
 	toastBody: css`
     display: flex;
@@ -307,7 +310,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	toastBodyCenter: css`
     display: flex;
     gap: 12px;
-    align-items: center;
+    align-items: flex-start;
   `,
 	viewport: css`
     position: fixed;

package/es/base-ui/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;;2BAWhB,OAAO,mBAAmB;;;;CAKnD,cAAc,GAAG;aACN,OAAO,oBAAoB;kBACtB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;;uBAIrB,OAAO,iBAAiB;;;CAI7C,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,oBAAoB;kBACtB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;qBAmBU,OAAO,eAAe;;aAE9B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;qCAGJ,OAAO,aAAa;4CACb,OAAO,aAAa;4CACpB,OAAO,aAAa;0CACtB,OAAO,aAAa;4CAClB,OAAO,aAAa;6CACnB,OAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;CAItB,EAAE;AAEH,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;EACd,EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.13.0",
+  "version": "5.14.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",