@lobehub/ui 5.51.2 → 5.52.0

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 { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type ComponentProps,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { styles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport Switch from '@/base-ui/Switch';\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 { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport {\n  type ContextMenuCheckboxItem,\n  type ContextMenuItem,\n  type ContextMenuSwitchItem,\n} from './type';\n\ntype ContextMenuPositionerProps = ComponentProps<typeof ContextMenu.Positioner>;\n\n/**\n * Submenu positioners are portaled outside the root menu, so they must allocate\n * their own layer z-index (same pattern as DropdownMenu) rather than relying on\n * the fixed CSS fallback that can fall behind after repeated root openings (#608).\n */\nconst ContextMenuSubmenuPositioner = memo(\n  ({ collisionPadding, style, ...rest }: ContextMenuPositionerProps) => {\n    const explicitZIndex =\n      typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n        ? style.zIndex\n        : undefined;\n    const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n\n    const resolvedStyle =\n      typeof style === 'function'\n        ? (state: any) => ({ zIndex, ...style(state) })\n        : { zIndex, ...style };\n\n    return (\n      <ContextMenu.Positioner\n        {...rest}\n        collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n        ref={zRef as any}\n        style={resolvedStyle}\n      />\n    );\n  },\n);\n\nContextMenuSubmenuPositioner.displayName = 'ContextMenuSubmenuPositioner';\n\nexport type { IconAlign, IconSpaceMode } from '@/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          <SubmenuArrowIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n  items: ContextMenuItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n      const checkboxItem = item as ContextMenuCheckboxItem;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <ContextMenu.CheckboxItemIndicator>\n          <Icon icon={Check} size={'small'} />\n        </ContextMenu.CheckboxItemIndicator>\n      );\n\n      return (\n        <ContextMenu.CheckboxItem\n          checked={checkboxItem.checked}\n          className={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            <ContextMenuSubmenuPositioner\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            </ContextMenuSubmenuPositioner>\n          </ContextMenu.Portal>\n        </ContextMenu.SubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <ContextMenu.Item\n        className={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 { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { styles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport Switch from '@/base-ui/Switch';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport type { BaseMenuItemGroupType, BaseSubMenuType } from '@/Menu/baseItem';\nimport {\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu/renderUtils';\nimport type { MenuDividerType, MenuInfo, MenuItemType } from '@/Menu/type';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport {\n  type ContextMenuCheckboxItem,\n  type ContextMenuItem,\n  type ContextMenuSwitchItem,\n} from './type';\n\ntype ContextMenuPositionerProps = ComponentProps<typeof ContextMenu.Positioner>;\n\n/**\n * Submenu positioners are portaled outside the root menu, so they must allocate\n * their own layer z-index (same pattern as DropdownMenu) rather than relying on\n * the fixed CSS fallback that can fall behind after repeated root openings (#608).\n */\nconst ContextMenuSubmenuPositioner = memo(\n  ({ collisionPadding, style, ...rest }: ContextMenuPositionerProps) => {\n    const explicitZIndex =\n      typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n        ? style.zIndex\n        : undefined;\n    const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n\n    const resolvedStyle =\n      typeof style === 'function'\n        ? (state: any) => ({ zIndex, ...style(state) })\n        : { zIndex, ...style };\n\n    return (\n      <ContextMenu.Positioner\n        {...rest}\n        collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n        ref={zRef as any}\n        style={resolvedStyle}\n      />\n    );\n  },\n);\n\nContextMenuSubmenuPositioner.displayName = 'ContextMenuSubmenuPositioner';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu/renderUtils';\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          <SubmenuArrowIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n  items: ContextMenuItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n      const checkboxItem = item as ContextMenuCheckboxItem;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <ContextMenu.CheckboxItemIndicator>\n          <Icon icon={Check} size={'small'} />\n        </ContextMenu.CheckboxItemIndicator>\n      );\n\n      return (\n        <ContextMenu.CheckboxItem\n          checked={checkboxItem.checked}\n          className={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            <ContextMenuSubmenuPositioner\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            </ContextMenuSubmenuPositioner>\n          </ContextMenu.Portal>\n        </ContextMenu.SubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <ContextMenu.Item\n        className={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/DatePicker/CalendarPanel.mjs

@@ -0,0 +1,188 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { panelStyles } from "../panelStyles.mjs";
+import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
+import { buildMonthGrid, getWeekStart, getWeekdayLabels, isDayDisabled, isMonthDisabled, isSameDay, isYearDisabled, moveDayFocus, orderRange } from "./calendar.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import dayjs from "dayjs";
+//#region src/base-ui/DatePicker/CalendarPanel.tsx
+const MONTHS = Array.from({ length: 12 }, (_, index) => index);
+const CalendarPanel = memo(({ bounds, hovered, mode, month, onHover, onMonthChange, onSelect, range, selected, showNav = true }) => {
+	const { t } = useTranslation(datePicker_default);
+	const [view, setView] = useState(mode);
+	const [focused, setFocused] = useState(selected ?? month);
+	const gridRef = useRef(null);
+	const weekStart = getWeekStart();
+	const today = /* @__PURE__ */ new Date();
+	const current = dayjs(month);
+	const decadeStart = Math.floor(current.year() / 12) * 12;
+	const days = buildMonthGrid(month, weekStart);
+	const focusDay = dayjs(focused).isSame(month, "month") && !isDayDisabled(focused, bounds) ? focused : days.find((day) => dayjs(day).isSame(month, "month") && !isDayDisabled(day, bounds)) ?? current.startOf("month").toDate();
+	const keyboardMoveRef = useRef(false);
+	useEffect(() => {
+		if (!keyboardMoveRef.current) return;
+		keyboardMoveRef.current = false;
+		gridRef.current?.querySelector("[data-focus-target]")?.focus();
+	}, [focused, month]);
+	const step = (direction) => {
+		const unit = view === "date" ? "month" : "year";
+		const amount = view === "year" ? 12 * direction : direction;
+		onMonthChange(current.add(amount, unit).toDate());
+	};
+	const drillUp = () => setView(view === "date" ? "month" : "year");
+	const handleDayKey = (event) => {
+		let next = moveDayFocus(focusDay, event.key, weekStart);
+		if (!next) return;
+		event.preventDefault();
+		for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) next = moveDayFocus(next, event.key, weekStart);
+		if (!next || isDayDisabled(next, bounds)) return;
+		keyboardMoveRef.current = true;
+		setFocused(next);
+		if (!dayjs(next).isSame(month, "month")) onMonthChange(next);
+	};
+	const band = (() => {
+		if (!range?.[0]) return null;
+		const end = range[1] ?? hovered;
+		return end ? orderRange(range[0], end) : null;
+	})();
+	const renderDays = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			"aria-label": current.format("MMMM YYYY"),
+			className: styles.grid,
+			ref: gridRef,
+			role: "grid",
+			onMouseLeave: () => onHover?.(null),
+			children: [getWeekdayLabels(weekStart).map((label) => /* @__PURE__ */ jsx("span", {
+				className: cx(styles.weekday, panelStyles.label),
+				role: "columnheader",
+				children: label
+			}, label)), days.map((date) => {
+				const outside = !dayjs(date).isSame(month, "month");
+				const isStart = !outside && !!band && isSameDay(date, band[0]);
+				const isEnd = !outside && !!band && isSameDay(date, band[1]);
+				const inBand = !outside && !!band && dayjs(date).isAfter(band[0], "day") && dayjs(date).isBefore(band[1], "day");
+				const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);
+				const focusTarget = isSameDay(date, focusDay) && !outside;
+				return /* @__PURE__ */ jsx("span", {
+					"aria-selected": pressed,
+					role: "gridcell",
+					className: cx(styles.cell, inBand && styles.band, isStart && !isEnd && styles.bandStart, isEnd && !isStart && styles.bandEnd),
+					children: /* @__PURE__ */ jsx("button", {
+						"aria-label": dayjs(date).format("MMMM D, YYYY"),
+						"aria-pressed": pressed,
+						className: styles.day,
+						"data-focus-target": focusTarget ? "" : void 0,
+						"data-outside": outside ? "" : void 0,
+						"data-today": isSameDay(date, today) ? "" : void 0,
+						disabled: isDayDisabled(date, bounds),
+						tabIndex: focusTarget ? 0 : -1,
+						type: "button",
+						onClick: () => onSelect(dayjs(date).startOf("day").toDate()),
+						onKeyDown: handleDayKey,
+						onMouseEnter: () => onHover?.(date),
+						children: date.getDate()
+					})
+				}, date.toISOString());
+			})]
+		});
+	};
+	const renderMonths = () => /* @__PURE__ */ jsx("div", {
+		className: styles.tiles,
+		children: MONTHS.map((index) => {
+			const date = current.month(index).startOf("month").toDate();
+			return /* @__PURE__ */ jsx("button", {
+				"aria-pressed": !!selected && dayjs(selected).isSame(date, "month"),
+				className: styles.tile,
+				"data-today": dayjs(today).isSame(date, "month") ? "" : void 0,
+				disabled: isMonthDisabled(date, bounds),
+				type: "button",
+				onClick: () => {
+					if (mode === "month") return onSelect(date);
+					onMonthChange(date);
+					setView("date");
+				},
+				children: dayjs(date).format("MMM")
+			}, index);
+		})
+	});
+	const renderYears = () => /* @__PURE__ */ jsx("div", {
+		className: styles.tiles,
+		children: MONTHS.map((index) => {
+			const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();
+			return /* @__PURE__ */ jsx("button", {
+				"aria-pressed": !!selected && dayjs(selected).isSame(date, "year"),
+				className: styles.tile,
+				"data-today": dayjs(today).isSame(date, "year") ? "" : void 0,
+				disabled: isYearDisabled(date, bounds),
+				type: "button",
+				onClick: () => {
+					if (mode === "year") return onSelect(date);
+					onMonthChange(current.year(decadeStart + index).toDate());
+					setView("month");
+				},
+				children: decadeStart + index
+			}, index);
+		})
+	});
+	const title = (() => {
+		if (view === "date") return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			current.format("MMMM"),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: panelStyles.titleMuted,
+				children: current.format("YYYY")
+			})
+		] });
+		if (view === "month") return current.format("YYYY");
+		return `${decadeStart} – ${decadeStart + 11}`;
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.calendar,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.header,
+				children: [/* @__PURE__ */ jsx("button", {
+					className: panelStyles.title,
+					disabled: view === "year",
+					type: "button",
+					onClick: drillUp,
+					children: title
+				}), showNav && /* @__PURE__ */ jsxs("div", {
+					className: styles.navGroup,
+					children: [/* @__PURE__ */ jsx("button", {
+						"aria-label": t("datePicker.previous"),
+						className: panelStyles.nav,
+						type: "button",
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: ChevronLeft,
+							size: 14
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": t("datePicker.next"),
+						className: panelStyles.nav,
+						type: "button",
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: ChevronRight,
+							size: 14
+						})
+					})]
+				})]
+			}),
+			view === "date" && renderDays(),
+			view === "month" && renderMonths(),
+			view === "year" && renderYears()
+		]
+	});
+});
+CalendarPanel.displayName = "CalendarPanel";
+//#endregion
+export { CalendarPanel as default };
+
+//# sourceMappingURL=CalendarPanel.mjs.map

package/es/base-ui/DatePicker/CalendarPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPanel.mjs","names":["datePickerMessages"],"sources":["../../../src/base-ui/DatePicker/CalendarPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport dayjs from 'dayjs';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { type KeyboardEvent, memo, useEffect, useRef, useState } from 'react';\n\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport {\n  buildMonthGrid,\n  type CalendarMode,\n  type DateBounds,\n  getWeekdayLabels,\n  getWeekStart,\n  isDayDisabled,\n  isMonthDisabled,\n  isSameDay,\n  isYearDisabled,\n  moveDayFocus,\n  orderRange,\n} from './calendar';\nimport { styles } from './style';\n\nexport interface CalendarPanelProps {\n  bounds: DateBounds;\n  hovered?: Date | null;\n  mode: CalendarMode;\n  month: Date;\n  onHover?: (date: Date | null) => void;\n  onMonthChange: (month: Date) => void;\n  onSelect: (date: Date) => void;\n  range?: [Date | null, Date | null];\n  selected?: Date | null;\n  showNav?: boolean;\n}\n\nconst MONTHS = Array.from({ length: 12 }, (_, index) => index);\n\nconst CalendarPanel = memo<CalendarPanelProps>(\n  ({\n    bounds,\n    hovered,\n    mode,\n    month,\n    onHover,\n    onMonthChange,\n    onSelect,\n    range,\n    selected,\n    showNav = true,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [view, setView] = useState<CalendarMode>(mode);\n    const [focused, setFocused] = useState<Date>(selected ?? month);\n    const gridRef = useRef<HTMLDivElement>(null);\n    const weekStart = getWeekStart();\n    const today = new Date();\n    const current = dayjs(month);\n    const decadeStart = Math.floor(current.year() / 12) * 12;\n    const days = buildMonthGrid(month, weekStart);\n    const focusDay =\n      dayjs(focused).isSame(month, 'month') && !isDayDisabled(focused, bounds)\n        ? focused\n        : (days.find((day) => dayjs(day).isSame(month, 'month') && !isDayDisabled(day, bounds)) ??\n          current.startOf('month').toDate());\n    const keyboardMoveRef = useRef(false);\n\n    useEffect(() => {\n      if (!keyboardMoveRef.current) return;\n      keyboardMoveRef.current = false;\n      gridRef.current?.querySelector<HTMLButtonElement>('[data-focus-target]')?.focus();\n    }, [focused, month]);\n\n    const step = (direction: 1 | -1) => {\n      const unit = view === 'date' ? 'month' : 'year';\n      const amount = view === 'year' ? 12 * direction : direction;\n      onMonthChange(current.add(amount, unit).toDate());\n    };\n\n    const drillUp = () => setView(view === 'date' ? 'month' : 'year');\n\n    const handleDayKey = (event: KeyboardEvent<HTMLButtonElement>) => {\n      let next = moveDayFocus(focusDay, event.key, weekStart);\n      if (!next) return;\n      event.preventDefault();\n      for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) {\n        next = moveDayFocus(next, event.key, weekStart);\n      }\n      if (!next || isDayDisabled(next, bounds)) return;\n      keyboardMoveRef.current = true;\n      setFocused(next);\n      if (!dayjs(next).isSame(month, 'month')) onMonthChange(next);\n    };\n\n    const band = (() => {\n      if (!range?.[0]) return null;\n      const end = range[1] ?? hovered;\n      return end ? orderRange(range[0], end) : null;\n    })();\n\n    const renderDays = () => {\n      return (\n        <div\n          aria-label={current.format('MMMM YYYY')}\n          className={styles.grid}\n          ref={gridRef}\n          role=\"grid\"\n          onMouseLeave={() => onHover?.(null)}\n        >\n          {getWeekdayLabels(weekStart).map((label) => (\n            <span className={cx(styles.weekday, panelStyles.label)} key={label} role=\"columnheader\">\n              {label}\n            </span>\n          ))}\n          {days.map((date) => {\n            const outside = !dayjs(date).isSame(month, 'month');\n            const isStart = !outside && !!band && isSameDay(date, band[0]);\n            const isEnd = !outside && !!band && isSameDay(date, band[1]);\n            const inBand =\n              !outside &&\n              !!band &&\n              dayjs(date).isAfter(band[0], 'day') &&\n              dayjs(date).isBefore(band[1], 'day');\n            const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);\n            const focusTarget = isSameDay(date, focusDay) && !outside;\n\n            return (\n              <span\n                aria-selected={pressed}\n                key={date.toISOString()}\n                role=\"gridcell\"\n                className={cx(\n                  styles.cell,\n                  inBand && styles.band,\n                  isStart && !isEnd && styles.bandStart,\n                  isEnd && !isStart && styles.bandEnd,\n                )}\n              >\n                <button\n                  aria-label={dayjs(date).format('MMMM D, YYYY')}\n                  aria-pressed={pressed}\n                  className={styles.day}\n                  data-focus-target={focusTarget ? '' : undefined}\n                  data-outside={outside ? '' : undefined}\n                  data-today={isSameDay(date, today) ? '' : undefined}\n                  disabled={isDayDisabled(date, bounds)}\n                  tabIndex={focusTarget ? 0 : -1}\n                  type=\"button\"\n                  onClick={() => onSelect(dayjs(date).startOf('day').toDate())}\n                  onKeyDown={handleDayKey}\n                  onMouseEnter={() => onHover?.(date)}\n                >\n                  {date.getDate()}\n                </button>\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    const renderMonths = () => (\n      <div className={styles.tiles}>\n        {MONTHS.map((index) => {\n          const date = current.month(index).startOf('month').toDate();\n          return (\n            <button\n              aria-pressed={!!selected && dayjs(selected).isSame(date, 'month')}\n              className={styles.tile}\n              data-today={dayjs(today).isSame(date, 'month') ? '' : undefined}\n              disabled={isMonthDisabled(date, bounds)}\n              key={index}\n              type=\"button\"\n              onClick={() => {\n                if (mode === 'month') return onSelect(date);\n                onMonthChange(date);\n                setView('date');\n              }}\n            >\n              {dayjs(date).format('MMM')}\n            </button>\n          );\n        })}\n      </div>\n    );\n\n    const renderYears = () => (\n      <div className={styles.tiles}>\n        {MONTHS.map((index) => {\n          const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();\n          return (\n            <button\n              aria-pressed={!!selected && dayjs(selected).isSame(date, 'year')}\n              className={styles.tile}\n              data-today={dayjs(today).isSame(date, 'year') ? '' : undefined}\n              disabled={isYearDisabled(date, bounds)}\n              key={index}\n              type=\"button\"\n              onClick={() => {\n                if (mode === 'year') return onSelect(date);\n                onMonthChange(current.year(decadeStart + index).toDate());\n                setView('month');\n              }}\n            >\n              {decadeStart + index}\n            </button>\n          );\n        })}\n      </div>\n    );\n\n    const title = (() => {\n      if (view === 'date')\n        return (\n          <>\n            {current.format('MMMM')}{' '}\n            <span className={panelStyles.titleMuted}>{current.format('YYYY')}</span>\n          </>\n        );\n      if (view === 'month') return current.format('YYYY');\n      return `${decadeStart} – ${decadeStart + 11}`;\n    })();\n\n    return (\n      <div className={styles.calendar}>\n        <div className={styles.header}>\n          <button\n            className={panelStyles.title}\n            disabled={view === 'year'}\n            type=\"button\"\n            onClick={drillUp}\n          >\n            {title}\n          </button>\n          {showNav && (\n            <div className={styles.navGroup}>\n              <button\n                aria-label={t('datePicker.previous')}\n                className={panelStyles.nav}\n                type=\"button\"\n                onClick={() => step(-1)}\n              >\n                <Icon icon={ChevronLeft} size={14} />\n              </button>\n              <button\n                aria-label={t('datePicker.next')}\n                className={panelStyles.nav}\n                type=\"button\"\n                onClick={() => step(1)}\n              >\n                <Icon icon={ChevronRight} size={14} />\n              </button>\n            </div>\n          )}\n        </div>\n        {view === 'date' && renderDays()}\n        {view === 'month' && renderMonths()}\n        {view === 'year' && renderYears()}\n      </div>\n    );\n  },\n);\n\nCalendarPanel.displayName = 'CalendarPanel';\n\nexport default CalendarPanel;\n"],"mappings":"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"}

package/es/base-ui/DatePicker/DatePicker.d.mts

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

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

@@ -0,0 +1,88 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
+import { DEFAULT_FORMAT, clampToBounds } from "./calendar.mjs";
+import { styles } from "./style.mjs";
+import CalendarPanel from "./CalendarPanel.mjs";
+import PickerShell from "./PickerShell.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMergeState from "use-merge-value";
+import { CalendarIcon } from "lucide-react";
+import dayjs from "dayjs";
+//#region src/base-ui/DatePicker/DatePicker.tsx
+const PLACEHOLDER_KEY = {
+	date: "datePicker.placeholder",
+	month: "datePicker.monthPlaceholder",
+	year: "datePicker.yearPlaceholder"
+};
+const formatDate = (date, format, fallback) => typeof format === "function" ? format(date) : dayjs(date).format(format ?? fallback);
+const DatePicker = memo(({ allowClear = true, className, defaultValue = null, disabled, disabledDate, footer, format, max, min, mode = "date", onChange, placeholder, shadow, size, style, value, variant }) => {
+	const { t } = useTranslation(datePicker_default);
+	const [current, setCurrent] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange,
+		value
+	});
+	const [open, setOpen] = useState(false);
+	const [month, setMonth] = useState(() => current ?? /* @__PURE__ */ new Date());
+	const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;
+	return /* @__PURE__ */ jsxs(PickerShell, {
+		className,
+		disabled,
+		open,
+		shadow,
+		showClear: allowClear && !!current,
+		size,
+		style,
+		variant,
+		icon: /* @__PURE__ */ jsx("span", {
+			className: styles.icon,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: CalendarIcon,
+				size: 14
+			})
+		}),
+		trigger: /* @__PURE__ */ jsx("button", {
+			className: styles.trigger,
+			disabled,
+			type: "button",
+			children: text ?? /* @__PURE__ */ jsx("span", {
+				className: styles.placeholder,
+				children: placeholder ?? t(PLACEHOLDER_KEY[mode])
+			})
+		}),
+		onClear: () => setCurrent(null),
+		onOpenChange: (next) => {
+			if (next) setMonth(current ?? clampToBounds(/* @__PURE__ */ new Date(), {
+				max,
+				min
+			}));
+			setOpen(next);
+		},
+		children: [/* @__PURE__ */ jsx(CalendarPanel, {
+			bounds: {
+				disabledDate,
+				max,
+				min
+			},
+			mode,
+			month,
+			selected: current,
+			onMonthChange: setMonth,
+			onSelect: (date) => {
+				setCurrent(date);
+				setOpen(false);
+			}
+		}), footer && /* @__PURE__ */ jsx("div", {
+			className: styles.footer,
+			children: footer
+		})]
+	});
+});
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker as default, formatDate };
+
+//# sourceMappingURL=DatePicker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","names":["datePickerMessages","useControlledState"],"sources":["../../../src/base-ui/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport dayjs from 'dayjs';\nimport { CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport { clampToBounds, DEFAULT_FORMAT } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DatePickerProps } from './type';\n\nconst PLACEHOLDER_KEY = {\n  date: 'datePicker.placeholder',\n  month: 'datePicker.monthPlaceholder',\n  year: 'datePicker.yearPlaceholder',\n} as const;\n\nexport const formatDate = (date: Date, format: DatePickerProps['format'], fallback: string) =>\n  typeof format === 'function' ? format(date) : dayjs(date).format(format ?? fallback);\n\nconst DatePicker = memo<DatePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = null,\n    disabled,\n    disabledDate,\n    footer,\n    format,\n    max,\n    min,\n    mode = 'date',\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<Date | null>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [month, setMonth] = useState<Date>(() => current ?? new Date());\n\n    const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!current}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span className={styles.icon}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button className={styles.trigger} disabled={disabled} type=\"button\">\n            {text ?? (\n              <span className={styles.placeholder}>{placeholder ?? t(PLACEHOLDER_KEY[mode])}</span>\n            )}\n          </button>\n        }\n        onClear={() => setCurrent(null)}\n        onOpenChange={(next) => {\n          if (next) setMonth(current ?? clampToBounds(new Date(), { max, min }));\n          setOpen(next);\n        }}\n      >\n        <CalendarPanel\n          bounds={{ disabledDate, max, min }}\n          mode={mode}\n          month={month}\n          selected={current}\n          onMonthChange={setMonth}\n          onSelect={(date) => {\n            setCurrent(date);\n            setOpen(false);\n          }}\n        />\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </PickerShell>\n    );\n  },\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,MAAM;AACR;AAEA,MAAa,cAAc,MAAY,QAAmC,aACxE,OAAO,WAAW,aAAa,OAAO,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,QAAQ;AAErF,MAAM,aAAa,MAChB,EACC,aAAa,MACb,WACA,eAAe,MACf,UACA,cACA,QACA,QACA,KACA,KACA,OAAO,QACP,UACA,aACA,QACA,MACA,OACA,OACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAeA,kBAAkB;CAC/C,MAAM,CAAC,SAAS,cAAcC,cAAgC,cAAc;EAC1E;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,eAAqB,2BAAW,IAAI,KAAK,CAAC;CAEpE,MAAM,OAAO,UAAU,WAAW,SAAS,QAAQ,eAAe,KAAK,IAAI;CAE3E,OACE,qBAAC,aAAD;EACa;EACD;EACJ;EACE;EACR,WAAW,cAAc,CAAC,CAAC;EACrB;EACC;EACE;EACT,MACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GACtB,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAc,MAAM;GAAK,CAAA;EACjC,CAAA;EAER,SACE,oBAAC,UAAD;GAAQ,WAAW,OAAO;GAAmB;GAAU,MAAK;GACzD,UAAA,QACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAc,UAAA,eAAe,EAAE,gBAAgB,KAAK;GAAQ,CAAA;EAEhF,CAAA;EAEV,eAAe,WAAW,IAAI;EAC9B,eAAe,SAAS;GACtB,IAAI,MAAM,SAAS,WAAW,8BAAc,IAAI,KAAK,GAAG;IAAE;IAAK;GAAI,CAAC,CAAC;GACrE,QAAQ,IAAI;EACd;EAzBF,UAAA,CA2BE,oBAAC,eAAD;GACE,QAAQ;IAAE;IAAc;IAAK;GAAI;GAC3B;GACC;GACP,UAAU;GACV,eAAe;GACf,WAAW,SAAS;IAClB,WAAW,IAAI;IACf,QAAQ,KAAK;GACf;EACD,CAAA,GACA,UAAU,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAS,UAAA;EAAY,CAAA,CAC5C;;AAEjB,CACF;AAEA,WAAW,cAAc"}

package/es/base-ui/DatePicker/DateRangePicker.d.mts

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

package/es/base-ui/DatePicker/DateRangePicker.mjs

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

package/es/base-ui/DatePicker/DateRangePicker.mjs.map

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

package/es/base-ui/DatePicker/PickerShell.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { rootVariants } from "../Input/style.mjs";
+import ClearButton from "../Input/ClearButton.mjs";
+import { panelStyles } from "../panelStyles.mjs";
+import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
+import { memo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+//#region src/base-ui/DatePicker/PickerShell.tsx
+const PickerShell = memo(({ children, className, disabled, icon, onClear, onOpenChange, open, shadow, showClear, size = "middle", style, trigger, variant }) => {
+	const { isDarkMode } = useThemeMode();
+	const anchorRef = useRef(null);
+	const popupRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-disabled": disabled ? "" : void 0,
+		ref: anchorRef,
+		style,
+		className: cx(rootVariants({
+			shadow,
+			size,
+			variant: variant || (isDarkMode ? "filled" : "outlined")
+		}), className),
+		children: [/* @__PURE__ */ jsxs(PopoverRoot, {
+			open,
+			onOpenChange: (next) => !disabled && onOpenChange(next),
+			children: [/* @__PURE__ */ jsx(PopoverTriggerElement, { children: trigger }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+				anchor: anchorRef,
+				placement: "bottomLeft",
+				children: /* @__PURE__ */ jsx(PopoverPopup, {
+					className: panelStyles.popup,
+					ref: popupRef,
+					initialFocus: () => popupRef.current?.querySelector("[data-focus-target]") ?? true,
+					children
+				})
+			}) })]
+		}), showClear && !disabled ? /* @__PURE__ */ jsx(ClearButton, { onClear }) : icon]
+	});
+});
+PickerShell.displayName = "PickerShell";
+//#endregion
+export { PickerShell as default };
+
+//# sourceMappingURL=PickerShell.mjs.map

package/es/base-ui/DatePicker/PickerShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerShell.mjs","names":[],"sources":["../../../src/base-ui/DatePicker/PickerShell.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, type ReactElement, type ReactNode, useRef } from 'react';\n\nimport ClearButton from '@/base-ui/Input/ClearButton';\nimport { rootVariants } from '@/base-ui/Input/style';\nimport type { InputSize, InputVariant } from '@/base-ui/Input/type';\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/base-ui/Popover';\n\nexport interface PickerShellProps {\n  children: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  icon: ReactNode;\n  onClear: () => void;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n  shadow?: boolean;\n  showClear: boolean;\n  size?: InputSize;\n  style?: CSSProperties;\n  trigger: ReactElement;\n  variant?: InputVariant;\n}\n\nconst PickerShell = memo<PickerShellProps>(\n  ({\n    children,\n    className,\n    disabled,\n    icon,\n    onClear,\n    onOpenChange,\n    open,\n    shadow,\n    showClear,\n    size = 'middle',\n    style,\n    trigger,\n    variant,\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        ref={anchorRef}\n        style={style}\n        className={cx(\n          rootVariants({ shadow, size, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n      >\n        <PopoverRoot open={open} onOpenChange={(next) => !disabled && onOpenChange(next)}>\n          <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n          <PopoverPortal>\n            <PopoverPositioner anchor={anchorRef} placement=\"bottomLeft\">\n              <PopoverPopup\n                className={panelStyles.popup}\n                ref={popupRef}\n                initialFocus={() =>\n                  popupRef.current?.querySelector<HTMLElement>('[data-focus-target]') ?? true\n                }\n              >\n                {children}\n              </PopoverPopup>\n            </PopoverPositioner>\n          </PopoverPortal>\n        </PopoverRoot>\n        {showClear && !disabled ? <ClearButton onClear={onClear} /> : icon}\n      </div>\n    );\n  },\n);\n\nPickerShell.displayName = 'PickerShell';\n\nexport default PickerShell;\n"],"mappings":";;;;;;;;;AAiCA,MAAM,cAAc,MACjB,EACC,UACA,WACA,UACA,MACA,SACA,cACA,MACA,QACA,WACA,OAAO,UACP,OACA,SACA,cACI;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,WAAW,OAAuB,IAAI;CAE5C,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,KAAK;EACE;EACP,WAAW,GACT,aAAa;GAAE;GAAQ;GAAM,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GACvF,SACF;EAPF,UAAA,CASE,qBAAC,aAAD;GAAmB;GAAM,eAAe,SAAS,CAAC,YAAY,aAAa,IAAI;GAA/E,UAAA,CACE,oBAAC,uBAAD,EAAA,UAAwB,QAA+B,CAAA,GACvD,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;IAAmB,QAAQ;IAAW,WAAU;IAC9C,UAAA,oBAAC,cAAD;KACE,WAAW,YAAY;KACvB,KAAK;KACL,oBACE,SAAS,SAAS,cAA2B,qBAAqB,KAAK;KAGxE;IACW,CAAA;GACG,CAAA,EACN,CAAA,CACJ;EACZ,CAAA,GAAA,aAAa,CAAC,WAAW,oBAAC,aAAD,EAAsB,QAAU,CAAA,IAAI,IAC3D;;AAET,CACF;AAEA,YAAY,cAAc"}

package/es/base-ui/DatePicker/calendar.d.mts

@@ -0,0 +1,5 @@
+//#region src/base-ui/DatePicker/calendar.d.ts
+type CalendarMode = 'date' | 'month' | 'year';
+//#endregion
+export { CalendarMode };
+//# sourceMappingURL=calendar.d.mts.map