@kenpan/zds-r8f3v1 0.1.0

package/dist/components/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["/**\n * Dropdown menu component\n *\n * Features:\n * - Multiple trigger types (button, icon, avatar, custom)\n * - Menu item grouping with dividers\n * - Menu header (text or avatar)\n * - Menu item features: checkbox, badge, icon, shortcut\n * - Controlled and uncontrolled modes\n */\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Menu from '@mui/material/Menu'\nimport MenuItem from '@mui/material/MenuItem'\nimport Typography from '@mui/material/Typography'\nimport { useTheme } from '@mui/material/styles'\nimport type { Theme, SxProps } from '@mui/material/styles'\nimport type { PaperProps } from '@mui/material/Paper'\nimport type { PopoverProps } from '@mui/material/Popover'\nimport type { ElementType, RefObject, FC, ReactNode } from 'react'\n\nimport { Button, type ButtonProps } from './Button'\nimport { Icon, type SupportedIconName } from './Icon'\nimport { BadgePillColor, type BadgeColor } from './badge/BadgePillColor'\nimport { Checkbox, type CheckboxProps } from './forms/Checkbox'\nimport { overlay } from '../utils/colorUtils'\nimport { Avatar } from './avatar'\nimport { BaseDropdownListItem } from './BaseDropdownListItem'\n\n/**\n * Avatar props type (simplified)\n */\nexport interface AvatarProps {\n  image?: string\n  initials?: string\n  alt?: string\n}\n\n/**\n * Text leading type for menu items\n */\nexport type MenuItemTextLeadingType = 'iconLeading' | 'avatarLeading' | 'dotLeading'\n\n/**\n * Avatar props for menu items\n */\nexport interface MenuItemAvatarProps {\n  src?: string\n  alt?: string\n  initials?: string\n}\n\n/**\n * Menu item option\n */\nexport interface MenuItemOption {\n  id: string\n  content: string\n  icon?: ReactNode\n  supportingText?: string\n  shortcut?: string\n  selected?: boolean\n  destructive?: boolean\n  disabled?: boolean\n  isHeader?: boolean\n  badgeProps?: {\n    label: string\n    color?: BadgeColor\n    size?: 'xs' | 'sm' | 'md' | 'lg'\n  }\n  checkboxProps?: CheckboxProps\n  onClick?: () => void\n  /**\n   * Places the supporting text underneath the primary text\n   * When true, text will wrap to multiple lines as needed\n   */\n  stacked?: boolean\n  /**\n   * Type of leading element\n   * - iconLeading: Shows an icon (default)\n   * - avatarLeading: Shows an avatar\n   * - dotLeading: Shows a colored dot\n   */\n  textLeadingType?: MenuItemTextLeadingType\n  /**\n   * Avatar props (used when textLeadingType is 'avatarLeading')\n   */\n  avatar?: MenuItemAvatarProps\n  /**\n   * Dot color (used when textLeadingType is 'dotLeading')\n   */\n  dotColor?: string\n}\n\n/**\n * Menu header props\n */\nexport interface MenuHeaderProps {\n  type?: 'avatar' | 'text'\n  headerContent?: string | ReactNode\n  bodyContent?: string | ReactNode\n  image?: string\n  initials?: string\n  divider?: boolean\n}\n\n/**\n * Menu trigger props\n */\nexport interface MenuTriggerProps {\n  AvatarProps?: AvatarProps\n  CustomTrigger?: FC<{\n    onTriggerClick: (event?: React.MouseEvent<HTMLElement>) => void\n    open?: boolean\n  }>\n  buttonText?: ReactNode\n  iconName?: SupportedIconName\n  variant?: ButtonProps['variant']\n  size?: ButtonProps['size']\n  [key: string]: any // For additional button props\n}\n\n/**\n * Dropdown menu component props\n */\nexport interface DropdownMenuProps {\n  /**\n   * An array of menu items to be rendered in the menu when it is open.\n   * You may use an array of menu item arrays in order to separate the nested arrays by a visible divider on the menu.\n   */\n  menuItemProps: MenuItemOption[] | MenuItemOption[][]\n\n  /**\n   * Props to control the element which is used to trigger the menu to open.\n   */\n  menuTriggerProps: MenuTriggerProps\n\n  /**\n   * Props to control the header section of the menu when it is open.\n   * If not supplied, the menu header will be hidden.\n   */\n  menuHeaderProps?: MenuHeaderProps\n\n  /**\n   * Maximum height for the menu\n   */\n  menuMaxHeight?: string\n\n  /**\n   * Maximum width for the menu\n   */\n  menuMaxWidth?: string\n\n  /**\n   * Paper props for the menu\n   */\n  menuPaperProps?: PaperProps\n\n  /**\n   * Controlled open state\n   */\n  open?: boolean\n\n  /**\n   * Popper props (excluding 'open')\n   */\n  popperProps?: Omit<PopoverProps, 'open'>\n\n  /**\n   * Component to render as root\n   */\n  component?: ElementType<any>\n\n  /**\n   * Ref callback\n   */\n  ref?:\n    | ((instance: HTMLDivElement | null) => void)\n    | RefObject<HTMLDivElement>\n    | null\n\n  /**\n   * Whether the dropdown is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Input ref\n   */\n  inputRef?: RefObject<HTMLInputElement>\n\n  /**\n   * Callback when open state changes\n   */\n  onOpenChange?: (open: boolean) => void\n\n  /**\n   * Additional sx props\n   */\n  sx?: SxProps<Theme>\n}\n\nconst ZENITH_MENU_SHADOW =\n  'rgba(18, 25, 38, 0.03) 0px 4px 6px -2px, rgba(18, 25, 38, 0.08) 0px 12px 16px -4px'\nconst ZENITH_HOVER_BG = '#F8FAFC'\nconst ZENITH_DESTRUCTIVE = '#B42318'\nconst ZENITH_MENU_PADDING = '6px'\nconst ZENITH_MENU_GAP = '2px'\n\n/**\n * Get design token colors from theme\n * Provides color fallback mechanism to ensure compatibility across different theme configurations\n */\nconst getDesignTokenColors = (theme: Theme) => {\n  const onprimary =\n    theme.palette.dsTokens?.semantic?.onprimary ??\n    theme.palette.ds?.onprimary ??\n    '#FFFFFF'\n  const outlinevariant =\n    theme.palette.dsTokens?.semantic?.outlinevariant ??\n    theme.palette.buttonTokens?.outlineVariant ??\n    theme.palette.ds?.outlinevariant ??\n    '#D4DCE7'\n  const onsurface =\n    theme.palette.dsTokens?.semantic?.onsurface ??\n    theme.palette.ds?.onsurface ??\n    theme.palette.text.primary ??\n    '#364152'\n  const onsurfacevariant =\n    theme.palette.dsTokens?.semantic?.onsurfacevariant ??\n    theme.palette.ds?.onsurfacevariant ??\n    '#697586'\n  const onsecondarycontainer =\n    theme.palette.dsTokens?.semantic?.onsecondarycontainer ??\n    theme.palette.ds?.onsecondarycontainer ??\n    '#364152'\n  const secondary =\n    theme.palette.dsTokens?.semantic?.secondary ??\n    theme.palette.ds?.secondary ??\n    '#697586'\n  const error =\n    theme.palette.error.main ?? theme.palette.error?.main ?? '#D92D20'\n  const onsurfaceOpacity8 =\n    theme.palette.dsTokens?.stateLayers?.['state-layers-onsurface-opacity-8'] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity8 ??\n    '#36415214' // rgba(54, 65, 82, 0.08)\n  const onsurfaceOpacity12 =\n    theme.palette.dsTokens?.stateLayers?.[\n      'state-layers-onsurface-opacity-12'\n    ] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity12 ??\n    '#3641521F' // rgba(54, 65, 82, 0.12)\n  const onsurfaceOpacity38 =\n    theme.palette.dsTokens?.stateLayers?.[\n      'state-layers-onsurface-opacity-38'\n    ] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity38 ??\n    '#36415261' // rgba(54, 65, 82, 0.38)\n  const errorOpacity8 =\n    theme.palette.dsTokens?.stateLayers?.['state-layers-error-opacity-8'] ??\n    theme.palette.buttonTokens?.stateLayers?.errorOpacity8 ??\n    '#B4231814' // rgba(180, 35, 24, 0.08)\n\n  return {\n    onprimary,\n    outlinevariant,\n    onsurface,\n    onsurfacevariant,\n    onsecondarycontainer,\n    secondary,\n    error,\n    onsurfaceOpacity8,\n    onsurfaceOpacity12,\n    onsurfaceOpacity38,\n    errorOpacity8,\n  }\n}\n\nexport const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  function DropdownMenu(props, ref) {\n    const {\n      menuItemProps,\n      menuTriggerProps,\n      menuHeaderProps,\n      menuMaxHeight,\n      menuMaxWidth,\n      menuPaperProps,\n      open: controlledOpen,\n      popperProps,\n      disabled = false,\n      onOpenChange,\n      sx,\n    } = props\n\n    const theme = useTheme()\n    const designTokens = getDesignTokenColors(theme)\n\n    const [internalOpen, setInternalOpen] = React.useState(false)\n    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)\n    const customTriggerRef = React.useRef<HTMLElement | null>(null)\n\n    const isControlled = controlledOpen !== undefined\n    const open = isControlled ? controlledOpen : internalOpen\n    const { disablePortal: disablePortalOverride, ...restPopoverProps } =\n      (popperProps ?? {}) as Omit<PopoverProps, 'open'>\n\n    /**\n     * Process menu items - handle both flat and nested arrays\n     * Nested arrays automatically add dividers between groups\n     */\n    const groups = React.useMemo(() => {\n      const asArray = menuItemProps ?? []\n      if (!Array.isArray(asArray)) return []\n      if (!asArray.length) return []\n\n      // Check if first item is an array (nested structure)\n      if (Array.isArray(asArray[0])) {\n        return asArray as MenuItemOption[][]\n      }\n      // Flat structure - return as single group\n      return [asArray as MenuItemOption[]]\n    }, [menuItemProps])\n\n    // Ensure anchorEl is set when using CustomTrigger and menu is open\n    React.useEffect(() => {\n      if (open && customTriggerRef.current && !anchorEl) {\n        setAnchorEl(customTriggerRef.current)\n      }\n    }, [open, anchorEl])\n\n    const handleToggle = (event: React.MouseEvent<HTMLElement>) => {\n      if (disabled) return\n      const newOpen = !open\n      const targetEl = event?.currentTarget || customTriggerRef.current\n      if (!isControlled) {\n        setInternalOpen(newOpen)\n        setAnchorEl(newOpen ? targetEl : null)\n      } else {\n        setAnchorEl(newOpen ? targetEl : null)\n      }\n      onOpenChange?.(newOpen)\n    }\n\n    const handleClose = () => {\n      if (!isControlled) {\n        setInternalOpen(false)\n        setAnchorEl(null)\n      } else {\n        setAnchorEl(null)\n      }\n      onOpenChange?.(false)\n    }\n\n    /**\n     * Handle menu item click\n     * Checkbox items don't close menu on click, other types do\n     */\n    const handleItemClick = (item: MenuItemOption) => {\n      if (item.disabled) return\n      item.onClick?.()\n      // Only close if not a checkbox item (checkbox items should stay open)\n      if (!item.checkboxProps) {\n        handleClose()\n      }\n    }\n\n    /**\n     * Render trigger element\n     * Supports: custom component, avatar, icon button, text button\n     */\n    const renderTrigger = () => {\n      const {\n        AvatarProps: avatarProps,\n        CustomTrigger,\n        buttonText,\n        iconName = 'dots-vertical',\n        variant = 'secondary-gray',\n        size = 'md',\n        ...restTriggerProps\n      } = menuTriggerProps\n\n      // Custom trigger component\n      if (CustomTrigger) {\n        return (\n          <Box\n            ref={(el: HTMLElement | null) => {\n              if (el) {\n                // Find the button element inside the Box\n                const buttonEl = el.querySelector('button') || el\n                customTriggerRef.current = buttonEl as HTMLElement\n              }\n            }}\n            sx={{ display: 'inline-block' }}\n          >\n            <CustomTrigger\n              onTriggerClick={(event?: React.MouseEvent<HTMLElement>) => {\n                // Use the actual event target if available, otherwise use the ref\n                const target = (event?.currentTarget as HTMLElement) || customTriggerRef.current\n                if (target) {\n                  const syntheticEvent = {\n                    currentTarget: target,\n                  } as React.MouseEvent<HTMLElement>\n                  handleToggle(syntheticEvent)\n                }\n              }}\n              open={open}\n            />\n          </Box>\n        )\n      }\n\n      // Avatar trigger\n      if (avatarProps) {\n        const initials =\n          avatarProps.initials ??\n          avatarProps.alt?.slice(0, 2).toUpperCase() ??\n          'U'\n\n        return (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={handleToggle}\n            disabled={disabled}\n            aria-haspopup=\"menu\"\n            aria-expanded={open ? 'true' : undefined}\n            sx={{\n              padding: 0.5,\n              borderRadius: '999px',\n              border: open ? '4px solid' : '1px solid transparent',\n              borderColor: open\n                ? theme.palette.primary?.main ?? '#175CD3'\n                : 'transparent',\n              cursor: disabled ? 'not-allowed' : 'pointer',\n              background: 'transparent',\n              '&:hover': {\n                backgroundColor: disabled\n                  ? 'transparent'\n                  : overlay('#FFFFFF', designTokens.onsurfaceOpacity8),\n              },\n              '&:focus-visible': {\n                outline: 'none',\n                boxShadow: theme.focusRings?.primary?.[100],\n              },\n            }}\n          >\n            <Avatar\n              src={avatarProps.image}\n              alt={avatarProps.alt ?? 'User avatar'}\n              size=\"sm\"\n              shape=\"circle\"\n              initials={initials}\n            />\n          </Box>\n        )\n      }\n\n      // Icon trigger\n      if (iconName && !buttonText) {\n        return (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={handleToggle}\n            disabled={disabled}\n            aria-haspopup=\"menu\"\n            aria-expanded={open ? 'true' : undefined}\n            style={{ all: 'unset' }}\n            // Zenith：40x40, padding 10, radius 32, open/hover bg #EEF2F6, icon 20\n            sx={{\n              width: '40px',\n              height: '40px',\n              padding: '10px',\n              borderRadius: '32px',\n              boxSizing: 'border-box',\n              cursor: disabled ? 'not-allowed' : 'pointer',\n              backgroundColor: open ? '#EEF2F6' : 'transparent',\n              color: theme.palette.dsTokens?.semantic?.onsurface ?? '#364152',\n              '&:hover': {\n                backgroundColor: disabled ? 'transparent' : '#EEF2F6',\n              },\n              '&:focus-visible': {\n                outline: 'none',\n                boxShadow: theme.focusRings?.primary?.[100],\n              },\n            }}\n            {...restTriggerProps}\n          >\n            <Icon name={iconName} size={20} />\n          </Box>\n        )\n      }\n\n      // Button trigger (default)\n      return (\n        <Button\n          {...restTriggerProps}\n          variant={variant as any}\n          size={size as any}\n          onClick={handleToggle}\n          disabled={disabled}\n          startIcon={iconName ? <Icon name={iconName} size={20} /> : undefined}\n          endIcon={!iconName ? (open ? <Icon name=\"ChevronUp\" /> : <Icon name=\"ChevronDown\" />) : undefined}\n        >\n          {buttonText || 'Menu'}\n        </Button>\n      )\n    }\n\n    /**\n     * Render menu header\n     * Supports text type and avatar type\n     */\n    const renderMenuHeader = () => {\n      if (!menuHeaderProps) return null\n\n      const headerType = menuHeaderProps.type ?? 'text'\n      const showDivider = menuHeaderProps.divider ?? true\n\n      if (headerType === 'avatar') {\n        const initials =\n          menuHeaderProps.initials ??\n          (typeof menuHeaderProps.headerContent === 'string'\n            ? menuHeaderProps.headerContent.slice(0, 2).toUpperCase()\n            : 'U')\n\n        return (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              paddingTop: '12px',\n              paddingRight: '16px',\n              paddingBottom: '12px',\n              paddingLeft: '16px',\n              width: '100%',\n              height: '64px',\n              boxSizing: 'border-box',\n              ...(showDivider && {\n                borderBottom: `1px solid ${designTokens.outlinevariant}`,\n              }),\n            }}\n          >\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: '12px',\n                width: '100%',\n                height: '100%',\n              }}\n            >\n              <Avatar\n                src={menuHeaderProps.image}\n                alt={\n                  typeof menuHeaderProps.headerContent === 'string'\n                    ? menuHeaderProps.headerContent\n                    : 'User avatar'\n                }\n                size=\"md\"\n                shape=\"circle\"\n                initials={initials}\n              />\n              <Box\n                sx={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  flex: 1,\n                  minWidth: 0,\n                  justifyContent: 'center',\n                }}\n              >\n                {menuHeaderProps.headerContent && (\n                  <Typography\n                    variant=\"text-sm-semibold\"\n                    sx={{\n                      color:\n                        theme.palette.dsTokens?.semantic?.onsurface ??\n                        theme.palette.text.primary ??\n                        '#364152',\n                      lineHeight: '20px',\n                    }}\n                  >\n                    {menuHeaderProps.headerContent}\n                  </Typography>\n                )}\n                {menuHeaderProps.bodyContent && (\n                  <Typography\n                    variant=\"text-sm-regular\"\n                    sx={{\n                      color: designTokens.secondary,\n                      lineHeight: '20px',\n                    }}\n                  >\n                    {menuHeaderProps.bodyContent}\n                  </Typography>\n                )}\n              </Box>\n            </Box>\n          </Box>\n        )\n      }\n\n      // Text header\n      return (\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            paddingTop: '12px',\n            paddingRight: '16px',\n            paddingBottom: '12px',\n            paddingLeft: '16px',\n            width: '100%',\n            height: '44px',\n            boxSizing: 'border-box',\n            ...(showDivider && {\n              borderBottom: `1px solid ${designTokens.outlinevariant}`,\n            }),\n          }}\n        >\n          {menuHeaderProps.headerContent && (\n            <Typography\n              variant=\"text-sm-semibold\"\n              sx={{\n                color:\n                  theme.palette.dsTokens?.semantic?.onsurface ??\n                  theme.palette.text.primary ??\n                  '#364152',\n                lineHeight: '20px',\n              }}\n            >\n              {menuHeaderProps.headerContent}\n            </Typography>\n          )}\n        </Box>\n      )\n    }\n\n    const renderSectionHeaderItem = (item: MenuItemOption) => {\n      return (\n        <Box\n          key={item.id}\n          sx={{\n            // Zenith: section header full width (ignores menu padding), padding 12/16, height 44\n            mx: `calc(-1 * ${ZENITH_MENU_PADDING})`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            paddingTop: '12px',\n            paddingRight: '16px',\n            paddingBottom: '12px',\n            paddingLeft: '16px',\n            width: `calc(100% + (${ZENITH_MENU_PADDING} * 2))`,\n            minHeight: '44px',\n            boxSizing: 'border-box',\n          }}\n        >\n          <Typography\n            variant=\"text-sm-semibold\"\n            sx={{\n              color:\n                theme.palette.dsTokens?.semantic?.onsurface ??\n                theme.palette.text.primary ??\n                '#364152',\n              lineHeight: '20px',\n            }}\n          >\n            {item.content}\n          </Typography>\n        </Box>\n      )\n    }\n\n    const commonMenuItemSx = (opts: {\n      destructive: boolean\n      disabled: boolean\n    }) => {\n      const { destructive, disabled } = opts\n      return {\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center',\n        width: '100%',\n        minHeight: '44px',\n        paddingTop: '9px',\n        paddingRight: '10px',\n        paddingBottom: '9px',\n        paddingLeft: '10px',\n        borderRadius: '6px',\n        boxSizing: 'border-box',\n        color: destructive ? ZENITH_DESTRUCTIVE : designTokens.onsurface,\n        backgroundColor: 'transparent',\n        '&:hover': {\n          backgroundColor: disabled ? 'transparent' : `${ZENITH_HOVER_BG} !important`,\n        },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: theme.focusRings?.primary?.[100],\n          backgroundColor: disabled ? 'transparent' : ZENITH_HOVER_BG,\n        },\n        '&.Mui-disabled': {\n          opacity: 0.38,\n          color: designTokens.onsurface,\n        },\n      } as const\n    }\n\n    /**\n     * Render menu item\n     * Supports multiple types: header item, regular item, item with checkbox, item with badge\n     */\n    const renderMenuItem = (item: MenuItemOption) => {\n      // Header item\n      if (item.isHeader) {\n        return renderSectionHeaderItem(item)\n      }\n\n      const isSelected = item.selected ?? false\n      const isDestructive = item.destructive ?? false\n      const isDisabled = item.disabled ?? false\n      const hasCheckbox = !!item.checkboxProps\n      const hasBadge = !!item.badgeProps\n\n      // Use BaseDropdownListItem for simple items without checkbox or badge\n      if (!hasCheckbox && !hasBadge) {\n        return (\n          <BaseDropdownListItem\n            key={item.id}\n            id={item.id}\n            content={item.content}\n            supportingText={item.supportingText}\n            icon={item.icon}\n            shortcut={item.shortcut}\n            selected={isSelected}\n            destructive={isDestructive}\n            disabled={isDisabled}\n            onClick={() => handleItemClick(item)}\n            stacked={item.stacked}\n            textLeadingType={item.textLeadingType}\n            avatar={item.avatar}\n            dotColor={item.dotColor}\n          />\n        )\n      }\n\n      // For items with checkbox or badge, use custom MenuItem implementation\n      return (\n        <MenuItem\n          key={item.id}\n          onClick={() => handleItemClick(item)}\n          disabled={isDisabled}\n          selected={isSelected && !hasCheckbox}\n          sx={commonMenuItemSx({\n            destructive: isDestructive,\n            disabled: isDisabled,\n          })}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '8px',\n              width: '100%',\n              flex: 1,\n            }}\n          >\n            {/* Checkbox */}\n            {hasCheckbox && (\n              <Box\n                sx={{\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                  flexShrink: 0,\n                }}\n                onClick={(e) => e.stopPropagation()}\n              >\n                <Checkbox\n                  {...item.checkboxProps}\n                  checked={item.checkboxProps?.checked ?? false}\n                  disabled={isDisabled}\n                  size=\"sm\"\n                  onChange={(event, checked) => {\n                    item.checkboxProps?.onChange?.(event, checked)\n                  }}\n                  sx={{\n                    padding: 0,\n                    color: 'inherit',\n                    ...item.checkboxProps?.sx,\n                  }}\n                />\n              </Box>\n            )}\n\n            {/* Icon */}\n            <ListItemIcon\n              sx={{\n                minWidth: item.icon ? 24 : 0,\n                color: item.icon ? 'inherit' : 'transparent',\n                margin: 0,\n              }}\n            >\n              {item.icon ?? null}\n            </ListItemIcon>\n\n            {/* Content */}\n            <ListItemText\n              primary={item.content}\n              secondary={item.supportingText}\n              primaryTypographyProps={{\n                variant: 'text-sm-medium', // Zenith: 14/20, 500\n                color: 'inherit',\n                sx: {\n                  fontFamily: 'Inter',\n                  fontWeight: 500,\n                },\n              }}\n              secondaryTypographyProps={{\n                variant: 'text-xs-regular', // text-xs-regular: fontSize 12, lineHeight 18, fontWeight 400\n                sx: {\n                  color: designTokens.onsurfacevariant,\n                  fontFamily: 'Inter',\n                  fontWeight: 400,\n                  fontSize: 12,\n                  lineHeight: '18px',\n                },\n              }}\n              sx={{\n                flex: 1,\n                margin: 0,\n              }}\n            />\n\n            {/* Badge */}\n            {item.badgeProps && (\n              <Box\n                sx={{\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                  flexShrink: 0,\n                  marginLeft: 'auto',\n                  marginRight: item.shortcut || item.selected ? 1 : 0,\n                }}\n              >\n                <BadgePillColor\n                  label={item.badgeProps.label}\n                  color={item.badgeProps.color}\n                  size={item.badgeProps.size ?? 'xs'}\n                  state={isDisabled ? 'disabled' : 'default'}\n                />\n              </Box>\n            )}\n\n            {/* Shortcut and Selected indicator */}\n            {(item.shortcut || (item.selected && !hasCheckbox)) && (\n              <Box\n                component=\"span\"\n                sx={{\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  gap: '10px',\n                  paddingTop: '1px',\n                  minWidth: 'auto',\n                  marginLeft: 'auto',\n                }}\n              >\n                {item.shortcut && (\n                  <Typography\n                    variant=\"text-xs-regular\"\n                    sx={{\n                      color: 'inherit',\n                      opacity: 0.7,\n                    }}\n                  >\n                    {item.shortcut}\n                  </Typography>\n                )}\n                {item.selected && !hasCheckbox && (\n                  <Box\n                    component=\"span\"\n                    sx={{\n                      display: 'inline-flex',\n                      alignItems: 'center',\n                      justifyContent: 'center',\n                      minWidth: 20,\n                      height: 20,\n                    }}\n                  >\n                    <Icon name=\"Check\" size={16} color=\"currentColor\" />\n                  </Box>\n                )}\n              </Box>\n            )}\n          </Box>\n        </MenuItem>\n      )\n    }\n\n    return (\n      <Box ref={ref} sx={sx}>\n        {renderTrigger()}\n\n        <Menu\n          anchorEl={anchorEl as any}\n          open={open}\n          onClose={handleClose}\n          disablePortal={disablePortalOverride ?? false}\n          anchorOrigin={restPopoverProps?.anchorOrigin ?? { vertical: 'bottom', horizontal: 'left' }}\n          transformOrigin={restPopoverProps?.transformOrigin ?? { vertical: 'top', horizontal: 'left' }}\n          MenuListProps={{\n            'aria-label': 'Dropdown menu',\n            disablePadding: true,\n            sx: {\n              // Override MUI default hover styles to ensure our hover styles take effect\n              '& .MuiMenuItem-root:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              '& .MuiMenuItem-root.Mui-selected:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              '& .MuiMenuItem-root.Mui-selected:hover.Mui-selected': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              // Override all possible hover state combinations - including ListItemButton\n              '& .MuiButtonBase-root.MuiListItemButton-root:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              '& .MuiButtonBase-root.MuiListItemButton-root.Mui-selected:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              '& .MuiListItemButton-root:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              '& .MuiListItemButton-root.Mui-selected:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n              // Override all possible class combinations\n              '& [role=\"menuitem\"]:hover': {\n                backgroundColor: `${ZENITH_HOVER_BG} !important`,\n              },\n            },\n          }}\n          slotProps={\n            {\n              paper: {\n                sx: {\n                  mt: 1.5,\n                  borderRadius: '8px',\n                  border: '1px solid',\n                  borderColor: designTokens.outlinevariant,\n                  backgroundColor: designTokens.onprimary,\n                  boxShadow: ZENITH_MENU_SHADOW,\n                  maxHeight: menuMaxHeight,\n                  maxWidth: menuMaxWidth,\n                  // Zenith: Paper overflow is observed as visible; scrolling is controlled by internal container\n                  overflow: 'visible',\n                  ...menuPaperProps?.sx,\n                },\n                ...(menuPaperProps ? { ...menuPaperProps } : {}),\n              },\n            } as any\n          }\n          {...restPopoverProps}\n        >\n          <Box>\n            {renderMenuHeader()}\n            <Box\n              sx={{\n                // Zenith: menu items area has 6px padding overall, item spacing 2px\n                p: ZENITH_MENU_PADDING,\n                display: 'flex',\n                flexDirection: 'column',\n                gap: ZENITH_MENU_GAP,\n                // Scrolling: align with Paper overflow=visible implementation approach\n                maxHeight: menuMaxHeight,\n                overflowY: menuMaxHeight ? 'auto' : 'visible',\n              }}\n            >\n              {groups.map((items, groupIndex) => (\n                <Box key={`dropdown-group-${groupIndex}`}>\n                  {items.map((it) => renderMenuItem(it))}\n                  {groupIndex < groups.length - 1 && (\n                    <Divider\n                      sx={{\n                        // Group divider spans full width (offsetting left/right padding)\n                        mx: `calc(-1 * ${ZENITH_MENU_PADDING})`,\n                        borderColor: designTokens.outlinevariant,\n                        my: ZENITH_MENU_PADDING,\n                      }}\n                    />\n                  )}\n                </Box>\n              ))}\n            </Box>\n          </Box>\n        </Menu>\n      </Box>\n    )\n  },\n)\n\nexport default DropdownMenu\n"],"names":["DropdownMenu","disabled"],"mappings":"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"}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,73 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import { FeaturedIconProps } from './FeaturedIcon';
+import { SupportedIconName } from './Icon';
+import * as React from 'react';
+export type EmptyStateType = 'featured-icon' | 'illustration' | 'file-type-icon';
+export type EmptyStateSize = 'sm' | 'md';
+export type EmptyStateAlignment = 'center' | 'left';
+export type EmptyStateIllustrationId = 'image' | 'security' | 'search' | 'document' | 'bin' | 'broken' | 'empty' | 'error' | 'folder' | 'lock' | 'mail' | 'maintenance' | 'network' | 'notification' | 'payment' | 'settings' | 'time' | 'upload' | 'user';
+export type FileTypeIconId = 'AEP' | 'AI' | 'AVI' | 'Audio' | 'CSS' | 'CSV' | 'Code' | 'DMG' | 'DOC' | 'DOCX' | 'EPS' | 'EPUB' | 'EXE' | 'FIG' | 'FLAC' | 'GIF' | 'HTML' | 'ICO' | 'INDD' | 'ISO' | 'JAVA' | 'JPEG' | 'JPG' | 'JS' | 'JSON' | 'MD' | 'MOV' | 'MP3' | 'MP4' | 'MPG' | 'ODP' | 'ODS' | 'ODT' | 'OTF' | 'PDF' | 'PHP' | 'PNG' | 'PPT' | 'PPTX' | 'PSD' | 'RAR' | 'RAW' | 'RTF' | 'SASS' | 'SQL' | 'SVG' | 'TAR' | 'TIFF' | 'TS' | 'TXT' | 'Video' | 'WAV' | 'WEBP' | 'XLS' | 'XLSX' | 'XML' | 'ZIP';
+export interface EmptyStateAction {
+    label: string;
+    onClick?: () => void;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+export interface EmptyStateProps {
+    /** The size for the component. (Storybook: default "sm") */
+    size?: EmptyStateSize;
+    /** The main text to display. (Storybook API) */
+    text?: string;
+    /** The text that gets displayed under the main text. (Storybook API) */
+    supportingText?: React.ReactNode;
+    /** Toggle the visual on or off. (Storybook: default true) */
+    visual?: boolean;
+    /**
+     * Sets the type of visual to render.
+     * - featured-icon: Use featuredIconId to select icon
+     * - illustration: Use emptyStateId to select illustration
+     * - file-type-icon: Use fileTypeId to select file icon
+     */
+    type?: EmptyStateType;
+    /**
+     * The name of the empty state illustration (type='illustration').
+     * Options: image, security, search, document, bin, broken, empty, etc.
+     */
+    emptyStateId?: EmptyStateIllustrationId;
+    /**
+     * The name of the featured icon (type='featured-icon').
+     * Default: "SearchLg"
+     */
+    featuredIconId?: SupportedIconName;
+    /** Props to pass to the FeaturedIcon component. */
+    featuredIconProps?: Partial<FeaturedIconProps>;
+    /**
+     * The name of the file type icon (type='file-type-icon').
+     * Options: PDF, DOC, XLS, ZIP, etc.
+     */
+    fileTypeId?: FileTypeIconId;
+    /**
+     * Reverse the order of the buttons when stacked responsively
+     * due to small screen size. (Storybook: default false)
+     */
+    reverseButtonStackOrder?: boolean;
+    /** @deprecated Use `text` instead. Title text. */
+    title?: string;
+    /** @deprecated Use `supportingText` instead. Description message. */
+    description?: React.ReactNode;
+    /** @deprecated Use `featuredIconId` or custom render. Icon/Illustration content as ReactNode. */
+    media?: React.ReactNode;
+    /** @deprecated Use `featuredIconId`. Alias for media when type is featured-icon. */
+    featuredIcon?: React.ReactNode;
+    /** Text alignment. (Local extension, not in Storybook) */
+    alignment?: EmptyStateAlignment;
+    /** Primary and secondary actions. (Local extension) */
+    actions?: EmptyStateAction[];
+    /** Custom children. (Local extension) */
+    children?: React.ReactNode;
+    /** Reference to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Custom styles. (Local extension) */
+    sx?: SxProps<Theme>;
+}
+export declare const EmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"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"}

package/dist/components/EmptyState.js

@@ -0,0 +1,272 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "./Button.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+const MediaContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "type" && prop !== "alignment" && prop !== "emptyStateSize"
+})(({ theme, type, alignment, emptyStateSize }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: alignment === "center" ? "center" : "flex-start",
+  marginBottom: emptyStateSize === "sm" ? theme.spacing(2) : theme.spacing(3),
+  // 16px or 24px
+  ...type === "illustration" && {
+    width: "100%",
+    maxWidth: 352,
+    height: "auto",
+    "& img, & svg": {
+      width: "100%",
+      height: "auto",
+      maxHeight: 200
+    }
+  },
+  ...type === "file-type-icon" && {
+    width: 56,
+    height: 56
+  }
+}));
+const IllustrationPlaceholder = ({ id }) => {
+  const iconMap = {
+    image: "Image01",
+    security: "Shield01",
+    search: "SearchLg",
+    document: "File02",
+    bin: "Trash01",
+    broken: "AlertCircle",
+    empty: "Inbox01",
+    error: "AlertTriangle",
+    folder: "Folder",
+    lock: "Lock01",
+    mail: "Mail01",
+    maintenance: "Tool01",
+    network: "Globe01",
+    notification: "Bell01",
+    payment: "CreditCard01",
+    settings: "Settings01",
+    time: "Clock",
+    upload: "Upload01",
+    user: "User01"
+  };
+  const iconName = iconMap[id] || "SearchLg";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        width: 200,
+        height: 160,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#F9FAFB",
+        borderRadius: 2,
+        border: "1px dashed #D0D5DD"
+      },
+      children: /* @__PURE__ */ jsx(
+        FeaturedIcon,
+        {
+          icon: iconName,
+          color: "gray",
+          size: "xl",
+          iconTheme: "light-circle"
+        }
+      )
+    }
+  );
+};
+const FileTypeIconPlaceholder = ({ id }) => {
+  const getFileTypeColor = (fileTypeId) => {
+    const colorMap = {
+      PDF: "#FF0000",
+      DOC: "#2B579A",
+      DOCX: "#2B579A",
+      XLS: "#217346",
+      XLSX: "#217346",
+      PPT: "#D24726",
+      PPTX: "#D24726",
+      ZIP: "#F2C811",
+      RAR: "#6B2F96",
+      default: "#667085"
+    };
+    return colorMap[fileTypeId] || colorMap.default;
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        width: 48,
+        height: 56,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#F9FAFB",
+        borderRadius: 1,
+        border: "1px solid #EAECF0",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            fontSize: 10,
+            fontWeight: 600,
+            color: getFileTypeColor(id),
+            textTransform: "uppercase"
+          },
+          children: id
+        }
+      )
+    }
+  );
+};
+const EmptyState = React.forwardRef(
+  (props, ref) => {
+    const {
+      // Storybook API props
+      size = "sm",
+      // Changed default from 'md' to 'sm' to match Storybook
+      text,
+      supportingText,
+      visual = true,
+      type = "featured-icon",
+      emptyStateId,
+      featuredIconId = "SearchLg",
+      featuredIconProps,
+      fileTypeId,
+      reverseButtonStackOrder = false,
+      // Backward compatible props
+      title,
+      description,
+      media,
+      featuredIcon,
+      alignment = "center",
+      actions = [],
+      children,
+      sx
+    } = props;
+    const displayText = text ?? title;
+    const displaySupportingText = supportingText ?? description;
+    const renderVisual = () => {
+      if (!visual) return null;
+      if (media) return media;
+      if (featuredIcon) return featuredIcon;
+      switch (type) {
+        case "featured-icon":
+          return /* @__PURE__ */ jsx(
+            FeaturedIcon,
+            {
+              icon: featuredIconId,
+              color: "gray",
+              size: "lg",
+              iconTheme: "light-circle-outline",
+              ...featuredIconProps
+            }
+          );
+        case "illustration":
+          if (emptyStateId) {
+            return /* @__PURE__ */ jsx(IllustrationPlaceholder, { id: emptyStateId });
+          }
+          return null;
+        case "file-type-icon":
+          if (fileTypeId) {
+            return /* @__PURE__ */ jsx(FileTypeIconPlaceholder, { id: fileTypeId });
+          }
+          return null;
+        default:
+          return null;
+      }
+    };
+    const visualContent = renderVisual();
+    const containerStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: alignment === "center" ? "center" : "flex-start",
+      textAlign: alignment === "center" ? "center" : "left",
+      width: "100%",
+      maxWidth: type === "illustration" ? 640 : 480,
+      padding: size === "sm" ? 2 : 3
+      // 16px or 24px
+    };
+    const textVariant = size === "sm" ? "text-md-semibold" : "text-lg-semibold";
+    const supportingTextVariant = size === "sm" ? "text-sm-regular" : "text-md-regular";
+    const displayActions = reverseButtonStackOrder ? [...actions].reverse() : actions;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        "data-component": "EmptyState",
+        sx: [
+          containerStyles,
+          ...Array.isArray(sx) ? sx : sx ? [sx] : []
+        ],
+        children: [
+          visualContent && /* @__PURE__ */ jsx(
+            MediaContainer,
+            {
+              type,
+              alignment,
+              emptyStateSize: size,
+              children: visualContent
+            }
+          ),
+          displayText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: textVariant,
+              sx: {
+                color: "text.primary",
+                mb: displaySupportingText ? 1 : 0
+                // 8px gap if there's supporting text
+              },
+              children: displayText
+            }
+          ),
+          displaySupportingText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: supportingTextVariant,
+              sx: {
+                color: "text.secondary",
+                mb: actions.length > 0 || children ? 3 : 0,
+                // 24px gap if there are actions
+                maxWidth: 400
+              },
+              children: displaySupportingText
+            }
+          ),
+          children,
+          displayActions.length > 0 && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                gap: 1.5,
+                // 12px
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: alignment === "center" ? "center" : "flex-start"
+              },
+              children: displayActions.map((action, i) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: action.variant === "primary" ? "primary" : action.variant === "tertiary" ? "tertiary" : "secondary",
+                  size: "small",
+                  onClick: action.onClick,
+                  children: action.label
+                },
+                i
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+export {
+  EmptyState
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../src/components/EmptyState.tsx"],"sourcesContent":["// src/components/zenith/EmptyState.tsx\n// EmptyState component\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport { styled } from '@mui/material/styles'\nimport type { Theme, SxProps } from '@mui/material/styles'\nimport { Button } from './Button'\nimport { FeaturedIcon, type FeaturedIconProps } from './FeaturedIcon'\nimport type { SupportedIconName } from './Icon'\n\n// ============================================================================\n// TYPES - Matching Storybook API\n// ============================================================================\n\nexport type EmptyStateType = 'featured-icon' | 'illustration' | 'file-type-icon'\nexport type EmptyStateSize = 'sm' | 'md'\nexport type EmptyStateAlignment = 'center' | 'left'\n\n// Empty state illustration IDs from Storybook\nexport type EmptyStateIllustrationId = \n  | 'image' \n  | 'security' \n  | 'search' \n  | 'document' \n  | 'bin' \n  | 'broken' \n  | 'empty' \n  | 'error' \n  | 'folder' \n  | 'lock' \n  | 'mail' \n  | 'maintenance' \n  | 'network' \n  | 'notification' \n  | 'payment' \n  | 'settings' \n  | 'time' \n  | 'upload' \n  | 'user'\n\n// File type icon IDs from Storybook\nexport type FileTypeIconId = \n  | 'AEP' | 'AI' | 'AVI' | 'Audio' | 'CSS' | 'CSV' | 'Code' | 'DMG' \n  | 'DOC' | 'DOCX' | 'EPS' | 'EPUB' | 'EXE' | 'FIG' | 'FLAC' | 'GIF' \n  | 'HTML' | 'ICO' | 'INDD' | 'ISO' | 'JAVA' | 'JPEG' | 'JPG' | 'JS' \n  | 'JSON' | 'MD' | 'MOV' | 'MP3' | 'MP4' | 'MPG' | 'ODP' | 'ODS' \n  | 'ODT' | 'OTF' | 'PDF' | 'PHP' | 'PNG' | 'PPT' | 'PPTX' | 'PSD' \n  | 'RAR' | 'RAW' | 'RTF' | 'SASS' | 'SQL' | 'SVG' | 'TAR' | 'TIFF' \n  | 'TS' | 'TXT' | 'Video' | 'WAV' | 'WEBP' | 'XLS' | 'XLSX' | 'XML' \n  | 'ZIP'\n\n// Action definition for buttons\nexport interface EmptyStateAction {\n  label: string\n  onClick?: () => void\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\n// ============================================================================\n// PROPS - Matching Storybook API + backward compatible\n// ============================================================================\n\nexport interface EmptyStateProps {\n  // === Storybook API Props ===\n  \n  /** The size for the component. (Storybook: default \"sm\") */\n  size?: EmptyStateSize\n  \n  /** The main text to display. (Storybook API) */\n  text?: string\n  \n  /** The text that gets displayed under the main text. (Storybook API) */\n  supportingText?: React.ReactNode\n  \n  /** Toggle the visual on or off. (Storybook: default true) */\n  visual?: boolean\n  \n  /** \n   * Sets the type of visual to render. \n   * - featured-icon: Use featuredIconId to select icon\n   * - illustration: Use emptyStateId to select illustration\n   * - file-type-icon: Use fileTypeId to select file icon\n   */\n  type?: EmptyStateType\n  \n  /** \n   * The name of the empty state illustration (type='illustration'). \n   * Options: image, security, search, document, bin, broken, empty, etc.\n   */\n  emptyStateId?: EmptyStateIllustrationId\n  \n  /** \n   * The name of the featured icon (type='featured-icon'). \n   * Default: \"SearchLg\"\n   */\n  featuredIconId?: SupportedIconName\n  \n  /** Props to pass to the FeaturedIcon component. */\n  featuredIconProps?: Partial<FeaturedIconProps>\n  \n  /** \n   * The name of the file type icon (type='file-type-icon'). \n   * Options: PDF, DOC, XLS, ZIP, etc.\n   */\n  fileTypeId?: FileTypeIconId\n  \n  /** \n   * Reverse the order of the buttons when stacked responsively \n   * due to small screen size. (Storybook: default false) \n   */\n  reverseButtonStackOrder?: boolean\n  \n  // === Backward Compatible Props (local extensions) ===\n  \n  /** @deprecated Use `text` instead. Title text. */\n  title?: string\n  \n  /** @deprecated Use `supportingText` instead. Description message. */\n  description?: React.ReactNode\n  \n  /** @deprecated Use `featuredIconId` or custom render. Icon/Illustration content as ReactNode. */\n  media?: React.ReactNode\n  \n  /** @deprecated Use `featuredIconId`. Alias for media when type is featured-icon. */\n  featuredIcon?: React.ReactNode\n  \n  /** Text alignment. (Local extension, not in Storybook) */\n  alignment?: EmptyStateAlignment\n  \n  /** Primary and secondary actions. (Local extension) */\n  actions?: EmptyStateAction[]\n  \n  /** Custom children. (Local extension) */\n  children?: React.ReactNode\n  \n  /** Reference to the root element. */\n  ref?: React.Ref<HTMLDivElement>\n  \n  /** Custom styles. (Local extension) */\n  sx?: SxProps<Theme>\n}\n\n// ============================================================================\n// STYLES\n// ============================================================================\n\nconst MediaContainer = styled(Box, {\n  shouldForwardProp: (prop) => \n    prop !== 'type' && prop !== 'alignment' && prop !== 'emptyStateSize',\n})<{ \n  type: EmptyStateType\n  alignment: EmptyStateAlignment\n  emptyStateSize: EmptyStateSize\n}>(({ theme, type, alignment, emptyStateSize }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: alignment === 'center' ? 'center' : 'flex-start',\n  marginBottom: emptyStateSize === 'sm' ? theme.spacing(2) : theme.spacing(3), // 16px or 24px\n  \n  ...(type === 'illustration' && {\n    width: '100%',\n    maxWidth: 352,\n    height: 'auto',\n    '& img, & svg': {\n      width: '100%',\n      height: 'auto',\n      maxHeight: 200,\n    }\n  }),\n  \n  ...(type === 'file-type-icon' && {\n    width: 56,\n    height: 56,\n  })\n}))\n\n// ============================================================================\n// ILLUSTRATION PLACEHOLDERS\n// ============================================================================\n\n// Simple illustration placeholder - in production, these would be actual SVG illustrations\nconst IllustrationPlaceholder: React.FC<{ id: EmptyStateIllustrationId }> = ({ id }) => {\n  // Map illustration ID to a visual representation\n  const iconMap: Record<EmptyStateIllustrationId, SupportedIconName> = {\n    image: 'Image01',\n    security: 'Shield01',\n    search: 'SearchLg',\n    document: 'File02',\n    bin: 'Trash01',\n    broken: 'AlertCircle',\n    empty: 'Inbox01',\n    error: 'AlertTriangle',\n    folder: 'Folder',\n    lock: 'Lock01',\n    mail: 'Mail01',\n    maintenance: 'Tool01',\n    network: 'Globe01',\n    notification: 'Bell01',\n    payment: 'CreditCard01',\n    settings: 'Settings01',\n    time: 'Clock',\n    upload: 'Upload01',\n    user: 'User01',\n  }\n  \n  const iconName = iconMap[id] || 'SearchLg'\n  \n  return (\n    <Box\n      sx={{\n        width: 200,\n        height: 160,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: '#F9FAFB',\n        borderRadius: 2,\n        border: '1px dashed #D0D5DD',\n      }}\n    >\n      <FeaturedIcon\n        icon={iconName}\n        color=\"gray\"\n        size=\"xl\"\n        iconTheme=\"light-circle\"\n      />\n    </Box>\n  )\n}\n\n// File type icon placeholder\nconst FileTypeIconPlaceholder: React.FC<{ id: FileTypeIconId }> = ({ id }) => {\n  // Get color based on file type\n  const getFileTypeColor = (fileTypeId: FileTypeIconId): string => {\n    const colorMap: Record<string, string> = {\n      PDF: '#FF0000',\n      DOC: '#2B579A',\n      DOCX: '#2B579A',\n      XLS: '#217346',\n      XLSX: '#217346',\n      PPT: '#D24726',\n      PPTX: '#D24726',\n      ZIP: '#F2C811',\n      RAR: '#6B2F96',\n      default: '#667085',\n    }\n    return colorMap[fileTypeId] || colorMap.default\n  }\n  \n  return (\n    <Box\n      sx={{\n        width: 48,\n        height: 56,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: '#F9FAFB',\n        borderRadius: 1,\n        border: '1px solid #EAECF0',\n        position: 'relative',\n      }}\n    >\n      <Typography\n        sx={{\n          fontSize: 10,\n          fontWeight: 600,\n          color: getFileTypeColor(id),\n          textTransform: 'uppercase',\n        }}\n      >\n        {id}\n      </Typography>\n    </Box>\n  )\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (props, ref) => {\n    const {\n      // Storybook API props\n      size = 'sm', // Changed default from 'md' to 'sm' to match Storybook\n      text,\n      supportingText,\n      visual = true,\n      type = 'featured-icon',\n      emptyStateId,\n      featuredIconId = 'SearchLg',\n      featuredIconProps,\n      fileTypeId,\n      reverseButtonStackOrder = false,\n      \n      // Backward compatible props\n      title,\n      description,\n      media,\n      featuredIcon,\n      alignment = 'center',\n      actions = [],\n      children,\n      sx,\n    } = props\n\n    // Resolve text: prefer Storybook API, fallback to local\n    const displayText = text ?? title\n    const displaySupportingText = supportingText ?? description\n    \n    // Resolve visual content\n    const renderVisual = () => {\n      if (!visual) return null\n      \n      // Priority 1: Custom ReactNode (backward compatible)\n      if (media) return media\n      if (featuredIcon) return featuredIcon\n      \n      // Priority 2: Storybook ID-based rendering\n      switch (type) {\n        case 'featured-icon':\n          return (\n            <FeaturedIcon\n              icon={featuredIconId}\n              color=\"gray\"\n              size=\"lg\"\n              iconTheme=\"light-circle-outline\"\n              {...featuredIconProps}\n            />\n          )\n        \n        case 'illustration':\n          if (emptyStateId) {\n            return <IllustrationPlaceholder id={emptyStateId} />\n          }\n          return null\n        \n        case 'file-type-icon':\n          if (fileTypeId) {\n            return <FileTypeIconPlaceholder id={fileTypeId} />\n          }\n          return null\n        \n        default:\n          return null\n      }\n    }\n    \n    const visualContent = renderVisual()\n    \n    // Size-based styles matching Storybook\n    const containerStyles = {\n      display: 'flex',\n      flexDirection: 'column' as const,\n      alignItems: alignment === 'center' ? 'center' : 'flex-start',\n      textAlign: alignment === 'center' ? 'center' as const : 'left' as const,\n      width: '100%',\n      maxWidth: type === 'illustration' ? 640 : 480,\n      padding: size === 'sm' ? 2 : 3, // 16px or 24px\n    }\n    \n    // Typography variants based on size\n    const textVariant = size === 'sm' ? 'text-md-semibold' : 'text-lg-semibold'\n    const supportingTextVariant = size === 'sm' ? 'text-sm-regular' : 'text-md-regular'\n    \n    // Action buttons with optional reverse order\n    const displayActions = reverseButtonStackOrder ? [...actions].reverse() : actions\n    \n    return (\n      <Box\n        ref={ref}\n        data-component=\"EmptyState\"\n        sx={[\n          containerStyles,\n          ...(Array.isArray(sx) ? sx : sx ? [sx] : [])\n        ]}\n      >\n        {visualContent && (\n          <MediaContainer \n            type={type} \n            alignment={alignment}\n            emptyStateSize={size}\n          >\n            {visualContent}\n          </MediaContainer>\n        )}\n\n        {displayText && (\n          <Typography\n            variant={textVariant}\n            sx={{ \n              color: 'text.primary', \n              mb: displaySupportingText ? 1 : 0, // 8px gap if there's supporting text\n            }}\n          >\n            {displayText}\n          </Typography>\n        )}\n\n        {displaySupportingText && (\n          <Typography\n            variant={supportingTextVariant}\n            sx={{ \n              color: 'text.secondary', \n              mb: (actions.length > 0 || children) ? 3 : 0, // 24px gap if there are actions\n              maxWidth: 400,\n            }}\n          >\n            {displaySupportingText}\n          </Typography>\n        )}\n\n        {children}\n\n        {displayActions.length > 0 && (\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 1.5, // 12px\n              flexDirection: 'row',\n              flexWrap: 'wrap',\n              justifyContent: alignment === 'center' ? 'center' : 'flex-start',\n            }}\n          >\n            {displayActions.map((action, i) => (\n              <Button\n                key={i}\n                variant={action.variant === 'primary' ? 'primary' : action.variant === 'tertiary' ? 'tertiary' : 'secondary'}\n                size=\"small\"\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </Box>\n        )}\n      </Box>\n    )\n  }\n)\n\nEmptyState.displayName = 'EmptyState'\n"],"names":[],"mappings":"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"}

package/dist/components/FeaturedIcon.d.ts

@@ -0,0 +1,74 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { SupportedIconName } from './Icon';
+import * as React from 'react';
+export type FeaturedIconColor = 'error' | 'gray' | 'primary' | 'warning' | 'success';
+export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+export type FeaturedIconTheme = 'outline' | 'light-circle' | 'light-circle-outline' | 'dark-circle' | 'light' | 'dark';
+export interface FeaturedIconProps {
+    /** Icon name to display (required in Storybook, optional here with default "Placeholder") */
+    icon?: SupportedIconName | 'Circle' | 'Placeholder';
+    /** Color theme of the featured icon */
+    color?: FeaturedIconColor;
+    /** Size of the featured icon: sm, md, lg, xl */
+    size?: FeaturedIconSize;
+    /**
+     * Visual theme (iconTheme in Storybook):
+     * - outline: white bg with border
+     * - light-circle: colored bg (same as 'light')
+     * - light-circle-outline: colored bg with border
+     * - dark-circle: dark bg with white icon (same as 'dark')
+     */
+    iconTheme?: FeaturedIconTheme;
+    /** @deprecated Use iconTheme instead. Kept for backward compatibility */
+    theme?: FeaturedIconTheme;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom sx styles */
+    sx?: SxProps<Theme>;
+}
+export declare const getFeaturedIconStyles: (color?: FeaturedIconColor, iconTheme?: FeaturedIconTheme, size?: FeaturedIconSize) => {
+    container: {
+        backgroundColor: string;
+        border: string;
+        boxShadow: string;
+        width: number;
+        height: number;
+        borderRadius: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        boxSizing: "border-box";
+    };
+    iconColor: string;
+    iconSize: number;
+} | {
+    container: {
+        backgroundColor: string;
+        width: number;
+        height: number;
+        borderRadius: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        boxSizing: "border-box";
+    };
+    iconColor: string;
+    iconSize: number;
+} | {
+    container: {
+        backgroundColor: string;
+        border: string;
+        width: number;
+        height: number;
+        borderRadius: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        boxSizing: "border-box";
+    };
+    iconColor: string;
+    iconSize: number;
+};
+export declare const FeaturedIcon: React.ForwardRefExoticComponent<FeaturedIconProps & React.RefAttributes<HTMLDivElement>>;
+export default FeaturedIcon;
+//# sourceMappingURL=FeaturedIcon.d.ts.map

package/dist/components/FeaturedIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturedIcon.d.ts","sourceRoot":"","sources":["../../src/components/FeaturedIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAM/C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AACpF,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAGxD,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,cAAc,GACd,sBAAsB,GACtB,aAAa,GAEb,OAAO,GACP,MAAM,CAAA;AAMV,MAAM,WAAW,iBAAiB;IAChC,6FAA6F;IAC7F,IAAI,CAAC,EAAE,iBAAiB,GAAG,QAAQ,GAAG,aAAa,CAAA;IACnD,uCAAuC;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,yEAAyE;IACzE,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,uBAAuB;IACvB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB;AAiCD,eAAO,MAAM,qBAAqB,GAChC,QAAO,iBAA0B,EACjC,YAAW,iBAA6B,EACxC,OAAM,gBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE9B,CAAA;AAMD,eAAO,MAAM,YAAY,0FAmDxB,CAAA;AAID,eAAe,YAAY,CAAA"}