@kenpan/zds-r8f3v1 0.1.0

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport IconButton, { type IconButtonProps } from '@mui/material/IconButton'\nimport Collapse from '@mui/material/Collapse'\nimport { useTheme } from '@mui/material/styles'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport type { Theme, SxProps } from '@mui/material/styles'\nimport type { SvgIconProps } from '@mui/material'\nimport { Button, type ButtonProps } from './Button'\nimport { Badge, type BadgeProps } from './badge/Badge'\nimport { Icon } from './Icon'\nimport { overlay } from '../utils/colorUtils'\n\nexport type AlertColor = 'error' | 'gray' | 'primary' | 'warning' | 'success' | 'default'\nexport type AlertSize = 'full-width' | 'floating'\nexport type AlertVariant = 'single' | 'grouped'\nexport type AlertScale = 'sm' | 'md'\n\nexport interface AlertSlots {\n  /** The component used for the close button. */\n  closeButton?: React.ElementType\n  /** The component used for the close icon. */\n  closeIcon?: React.ElementType\n}\n\nexport interface AlertSlotProps {\n  closeButton?: Partial<IconButtonProps>\n  closeIcon?: Partial<SvgIconProps>\n}\n\nexport interface AlertProps {\n  /** The descriptive body text. */\n  body?: React.ReactNode\n  /** The bold header text. */\n  header?: React.ReactNode\n  /** Callback when close button is clicked. */\n  onClose?: () => void\n  /** Props for primary action button. */\n  primaryButtonProps?: ButtonProps\n  /** Props for secondary action button. */\n  secondaryButtonProps?: ButtonProps\n  /** The scale/size of the alert elements. */\n  alertSize?: AlertScale\n  /** The semantic color of the alert. */\n  color?: AlertColor\n  /** Whether the grouped alert is expanded. */\n  groupedAlertExpanded?: boolean\n  /** Items to display in a list when variant is grouped. */\n  groupedAlertItem?: (string | React.ReactNode)[]\n  /** Props for the header badge in grouped variant. */\n  headerBadgeProps?: Partial<BadgeProps>\n  /** Hides the header badge in grouped variant. */\n  hideHeaderBadge?: boolean\n  /** Hides the leading icon. */\n  hideIcon?: boolean\n  /** Hides the primary action button. */\n  hidePrimaryButton?: boolean\n  /** Hides the secondary action button. */\n  hideSecondaryButton?: boolean\n  /** Hides the X close button. */\n  hideXCloseButton?: boolean\n  /** Custom icon to override the default. Can be an icon name or a ReactNode. */\n  icon?: string | React.ReactNode\n  /** The overall size variant. */\n  size?: AlertSize\n  /** The functional variant. */\n  variant?: AlertVariant\n  /** Mobile breakpoint in pixels or true to force mobile view. */\n  mobileBreakpoint?: number | boolean\n  /** Reference for mobile breakpoint calculations. */\n  mobileBreakpointContainerRef?: React.RefObject<HTMLElement>\n  /** Callback when grouped alert expand/collapse is toggled. */\n  onGroupedAlertClick?: (expanded: boolean) => void\n  /** Callback for primary button click. */\n  onPrimaryButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  /** Callback for secondary button click. */\n  onSecondaryButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  /** Primary button content override. */\n  primaryButtonContent?: React.ReactNode\n  /** Primary button end icon override. */\n  primaryButtonEndIcon?: React.ReactNode\n  /** Primary button start icon override. */\n  primaryButtonStartIcon?: React.ReactNode\n  /** Secondary button content override. */\n  secondaryButtonContent?: React.ReactNode\n  /** Secondary button end icon override. */\n  secondaryButtonEndIcon?: React.ReactNode\n  /** Secondary button start icon override. */\n  secondaryButtonStartIcon?: React.ReactNode\n  /** Whether to stack buttons in mobile view. */\n  stackButtonsInMobileView?: boolean\n  /** The props used for each slot inside. */\n  slotProps?: AlertSlotProps\n  /** The components used for each slot inside. */\n  slots?: AlertSlots\n  /** Custom styles. */\n  sx?: SxProps<Theme>\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType\n  /** Reference to the root element. */\n  ref?: React.Ref<HTMLDivElement>\n}\n\n// ============================================================================\n// DESIGN SYSTEM COLOR TOKENS\n// ============================================================================\n// Based on src/theme/design-system-colors.json\n// Text colors (header & body same) use onXxxContainer tokens:\n// - default/gray: onSurface (#364152)\n// - primary: onPrimaryContainer (#175CD3)\n// - success: onSuccessContainer (#067647)\n// - error: onErrorContainer (#B42318)\n// - warning: onWarningContainer (#B54708)\n// Border uses outline colors for each variant\n// Primary bg uses overlay(surface, state-layers-primarycontainer-opacity-12)\n\n// DS Color Tokens\nconst DS_COLORS = {\n  surface: '#FFFFFF',\n  primaryContainerOpacity12: 'rgba(178, 221, 255, 0.12)', // state-layers-primarycontainer-opacity-12\n}\n\nconst ALERT_COLORS = {\n  default: {\n    bg: '#FFFFFF',         // surfaceContainerLowest\n    border: '#D4DCE7',     // outlineVariant\n    headerText: '#364152', // onSurface\n    bodyText: '#697586',   // onSurfaceVariant\n    iconColor: '#8C96A2',  // outline\n  },\n  primary: {\n    bg: null,              // Computed dynamically using overlay()\n    border: '#84CAFF',     // primary[300]\n    headerText: '#175CD3', // onPrimaryContainer\n    bodyText: '#175CD3',   // onPrimaryContainer (same as header)\n    iconColor: '#1570EF',  // primary\n  },\n  gray: {\n    bg: '#F8FAFC',         // surfaceContainer\n    border: '#D4DCE7',     // outlineVariant\n    headerText: '#364152', // onSurface\n    bodyText: '#697586',   // onSurfaceVariant\n    iconColor: '#8C96A2',  // outline\n  },\n  error: {\n    bg: '#FFFBFA',         // errorContainer\n    border: '#FDA29B',     // outlineError\n    headerText: '#B42318', // onErrorContainer\n    bodyText: '#B42318',   // onErrorContainer (same as header)\n    iconColor: '#D92D20',  // error.DEFAULT\n  },\n  warning: {\n    bg: '#FFFCF5',         // warningContainer\n    border: '#FEC84B',     // outlineWarning\n    headerText: '#B54708', // onWarningContainer\n    bodyText: '#B54708',   // onWarningContainer (same as header)\n    iconColor: '#F79009',  // warning[500]\n  },\n  success: {\n    bg: '#F6FEF9',         // successContainer\n    border: '#75E0A7',     // outlineSuccess\n    headerText: '#067647', // onSuccessContainer\n    bodyText: '#067647',   // onSuccessContainer (same as header)\n    iconColor: '#067647',  // success.DEFAULT\n  },\n}\n\nconst getAlertThemeStyles = (_theme: Theme, color: AlertColor) => {\n  const colorConfig = ALERT_COLORS[color] || ALERT_COLORS.default\n  \n  // Compute primary bg using overlay function\n  const bgColor = color === 'primary'\n    ? overlay(DS_COLORS.surface, DS_COLORS.primaryContainerOpacity12)\n    : colorConfig.bg || DS_COLORS.surface\n  \n  const getDefaultIcon = () => {\n    switch (color) {\n      case 'success':\n        return <Icon name=\"CheckCircle\" size={20} color={colorConfig.iconColor} />\n      case 'error':\n        return <Icon name=\"AlertCircle\" size={20} color={colorConfig.iconColor} />\n      case 'warning':\n        return <Icon name=\"AlertTriangle\" size={20} color={colorConfig.iconColor} />\n      case 'primary':\n      case 'gray':\n      case 'default':\n      default:\n        return <Icon name=\"InfoCircle\" size={20} color={colorConfig.iconColor} />\n    }\n  }\n\n  return {\n    bg: bgColor,\n    border: colorConfig.border,\n    headerText: colorConfig.headerText,\n    bodyText: colorConfig.bodyText,\n    iconColor: colorConfig.iconColor,\n    icon: getDefaultIcon(),\n  }\n}\n\nconst DefaultCloseIcon = ({ size = 16, color }: { size?: number; color?: string }) => (\n  <Icon name=\"XClose\" size={size} color={color} />\n)\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n  const {\n    body,\n    header,\n    onClose,\n    primaryButtonProps,\n    secondaryButtonProps,\n    alertSize = 'sm', // Default is sm per Zenith docs\n    color = 'default',\n    groupedAlertExpanded: groupedAlertExpandedProp,\n    groupedAlertItem = [],\n    headerBadgeProps,\n    hideHeaderBadge = false,\n    hideIcon = false,\n    hidePrimaryButton = false,\n    hideSecondaryButton = false,\n    hideXCloseButton = false,\n    icon,\n    size = 'floating',\n    variant = 'single',\n    mobileBreakpoint = 768,\n    mobileBreakpointContainerRef: _mobileBreakpointContainerRef,\n    onGroupedAlertClick,\n    onPrimaryButtonClick,\n    onSecondaryButtonClick,\n    primaryButtonContent,\n    primaryButtonEndIcon,\n    primaryButtonStartIcon,\n    secondaryButtonContent,\n    secondaryButtonEndIcon,\n    secondaryButtonStartIcon,\n    stackButtonsInMobileView = false,\n    slotProps = {},\n    slots = {},\n    sx,\n    component,\n  } = props\n\n  const [expanded, setExpanded] = React.useState(groupedAlertExpandedProp || false)\n\n  React.useEffect(() => {\n    if (groupedAlertExpandedProp !== undefined) {\n      setExpanded(groupedAlertExpandedProp)\n    }\n  }, [groupedAlertExpandedProp])\n\n  const handleToggleExpand = () => {\n    const nextExpanded = !expanded\n    if (groupedAlertExpandedProp === undefined) {\n      setExpanded(nextExpanded)\n    }\n    onGroupedAlertClick?.(nextExpanded)\n  }\n\n  const theme = useTheme()\n  const styles = getAlertThemeStyles(theme, color)\n\n  const isGrouped = variant === 'grouped'\n  const isFullWidth = size === 'full-width'\n  const isSmall = alertSize === 'sm'\n\n  // Mobile view logic\n  const isMobileForce = mobileBreakpoint === true\n  const query = typeof mobileBreakpoint === 'number' ? `(max-width:${mobileBreakpoint}px)` : theme.breakpoints.down('sm')\n  const isMobileQuery = useMediaQuery(query)\n  const isMobile = isMobileForce || isMobileQuery\n\n  const renderIcon = () => {\n    if (hideIcon) return null\n    if (icon) {\n      if (typeof icon === 'string') {\n        switch (icon) {\n          case 'AlertTriangle':\n            return <Icon name=\"AlertTriangle\" size={20} color={styles.iconColor} />\n          case 'AlertCircle':\n            return <Icon name=\"AlertCircle\" size={20} color={styles.iconColor} />\n          case 'CheckCircle':\n            return <Icon name=\"CheckCircle\" size={20} color={styles.iconColor} />\n          case 'InfoCircle':\n            return <Icon name=\"InfoCircle\" size={20} color={styles.iconColor} />\n          default:\n            return <Icon name=\"InfoCircle\" size={20} color={styles.iconColor} />\n        }\n      }\n      return icon\n    }\n    return styles.icon\n  }\n\n  const CloseButtonComponent = slots.closeButton || IconButton\n  const CloseIconComponent = slots.closeIcon || DefaultCloseIcon\n\n  const closeButton = !hideXCloseButton && onClose && (\n    <CloseButtonComponent\n      size=\"small\"\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation()\n        onClose()\n      }}\n      {...slotProps.closeButton}\n      sx={[\n        {\n          padding: 0.5,\n          color: styles.iconColor,\n          opacity: 0.6,\n          '&:hover': { opacity: 1, backgroundColor: `${styles.iconColor}10` },\n        },\n        ...(Array.isArray(slotProps.closeButton?.sx)\n          ? slotProps.closeButton.sx\n          : slotProps.closeButton?.sx\n          ? [slotProps.closeButton.sx]\n          : []),\n      ]}\n    >\n      <CloseIconComponent size={16} {...slotProps.closeIcon} />\n    </CloseButtonComponent>\n  )\n\n  const expandButton = isGrouped && (\n    <IconButton\n      size=\"small\"\n      onClick={(e) => {\n        e.stopPropagation()\n        handleToggleExpand()\n      }}\n      sx={{\n        padding: 0.5,\n        color: styles.iconColor,\n      }}\n    >\n      {expanded ? <Icon name=\"ChevronUp\" size={20} /> : <Icon name=\"ChevronDown\" size={20} />}\n    </IconButton>\n  )\n\n  // Action buttons - using Button component with correct variants from Storybook\n  // Secondary: Button variant=\"link-gray\" (MuiButton-link-gray)\n  // Primary: Button variant=\"secondary-gray\" (MuiButton-secondary-gray)\n  \n  const actionButtons = (!hidePrimaryButton || !hideSecondaryButton) && (\n    <Box\n      sx={{\n        display: 'flex',\n        gap: '12px', // 12px gap between buttons\n        mt: isGrouped ? '4px' : '12px', // mt-1 for grouped, mt-3 for single\n        flexDirection: (stackButtonsInMobileView && isMobile) ? 'column' : 'row',\n        alignItems: 'center',\n      }}\n    >\n      {/* Secondary button: link-gray variant */}\n      {!hideSecondaryButton && (\n        <Button\n          variant=\"link-gray\"\n          size=\"small\"\n          startIcon={secondaryButtonStartIcon}\n          endIcon={secondaryButtonEndIcon}\n          onClick={(e) => {\n            e.stopPropagation()\n            onSecondaryButtonClick?.(e)\n            secondaryButtonProps?.onClick?.(e)\n          }}\n          {...secondaryButtonProps}\n        >\n          {secondaryButtonContent || secondaryButtonProps?.children || 'Secondary'}\n        </Button>\n      )}\n      {/* Primary button: secondary-gray variant */}\n      {!hidePrimaryButton && (\n        <Button\n          variant=\"secondary-gray\"\n          size=\"small\"\n          startIcon={primaryButtonStartIcon}\n          endIcon={primaryButtonEndIcon}\n          onClick={(e) => {\n            e.stopPropagation()\n            onPrimaryButtonClick?.(e)\n            primaryButtonProps?.onClick?.(e)\n          }}\n          {...primaryButtonProps}\n        >\n          {primaryButtonContent || primaryButtonProps?.children || 'Primary'}\n        </Button>\n      )}\n    </Box>\n  )\n\n  // Container styles matching Storybook exactly\n  // - floating: has border all around, border-radius 12px, max-width fit-content\n  // - full-width: no left/right border, no border-radius, 100% width\n  return (\n    <Box\n      ref={ref}\n      component={component || 'div'}\n      onClick={isGrouped ? handleToggleExpand : undefined}\n      sx={[\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          // Width: floating = 360px (Figma spec), full-width = 100%\n          width: isFullWidth ? '100%' : '360px',\n          // Max width for floating to prevent it from being too wide\n          maxWidth: isFullWidth ? '100%' : '360px',\n          backgroundColor: styles.bg,\n          // Border: floating has all borders, full-width only has top/bottom\n          border: isFullWidth ? 'none' : `1px solid ${styles.border}`,\n          borderTop: `1px solid ${styles.border}`,\n          borderBottom: `1px solid ${styles.border}`,\n          // Border radius: 12px for floating, 0 for full-width\n          borderRadius: isFullWidth ? 0 : '12px',\n          // Shadow: none based on Storybook inspection\n          boxShadow: 'none',\n          position: 'relative',\n          cursor: isGrouped ? 'pointer' : 'default',\n          overflow: 'hidden',\n        },\n        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n      ]}\n    >\n      {/* Main content container - padding and gap matching Storybook */}\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: isMobile ? 'column' : 'row',\n          // Padding: sm = 12px 16px, md = 16px\n          padding: isSmall ? '12px 16px' : '16px',\n          // Gap between icon and content: 12px\n          gap: '12px',\n          alignItems: 'flex-start',\n        }}\n      >\n        {isMobile ? (\n          <>\n            <Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>\n              <Box sx={{ display: 'flex', flexShrink: 0 }}>{renderIcon()}</Box>\n              <Box sx={{ display: 'flex', flexShrink: 0 }}>\n                {expandButton}\n                {closeButton}\n              </Box>\n            </Box>\n            <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px', width: '100%' }}>\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>\n                {header && (\n                  <Typography\n                    variant={isSmall ? 'text-sm-semibold' : 'text-sm-bold'}\n                    sx={{ \n                      color: styles.headerText,\n                      fontSize: '14px',\n                      fontWeight: 600,\n                      lineHeight: '20px',\n                    }}\n                  >\n                    {header}\n                  </Typography>\n                )}\n                {isGrouped && !hideHeaderBadge && (\n                  <Badge\n                    size=\"sm\"\n                    color={color === 'primary' ? 'primary' : (color === 'default' || color === 'gray' ? 'gray' : color as any)}\n                    label={String(groupedAlertItem.length)}\n                    {...headerBadgeProps}\n                  />\n                )}\n              </Box>\n              {!isGrouped && body && (\n                <Typography \n                  variant=\"text-sm-regular\" \n                  sx={{ \n                    color: styles.bodyText,\n                    fontSize: '14px',\n                    fontWeight: 400,\n                    lineHeight: '20px',\n                  }}\n                >\n                  {body}\n                </Typography>\n              )}\n              {actionButtons}\n            </Box>\n          </>\n        ) : (\n          <>\n            {!hideIcon && <Box sx={{ mt: 0.25, display: 'flex', flexShrink: 0 }}>{renderIcon()}</Box>}\n            <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>\n                {header && (\n                  <Typography\n                    variant={isSmall ? 'text-sm-semibold' : 'text-sm-bold'}\n                    sx={{ \n                      color: styles.headerText,\n                      fontSize: '14px',\n                      fontWeight: 600,\n                      lineHeight: '20px',\n                    }}\n                  >\n                    {header}\n                  </Typography>\n                )}\n                {isGrouped && !hideHeaderBadge && (\n                  <Badge\n                    size=\"sm\"\n                    color={color === 'primary' ? 'primary' : (color === 'default' || color === 'gray' ? 'gray' : color as any)}\n                    label={String(groupedAlertItem.length)}\n                    {...headerBadgeProps}\n                  />\n                )}\n              </Box>\n              {!isGrouped && body && (\n                <Typography \n                  variant=\"text-sm-regular\" \n                  sx={{ \n                    color: styles.bodyText,\n                    fontSize: '14px',\n                    fontWeight: 400,\n                    lineHeight: '20px',\n                  }}\n                >\n                  {body}\n                </Typography>\n              )}\n              {actionButtons}\n            </Box>\n            <Box sx={{ display: 'flex', flexShrink: 0 }}>\n              {expandButton}\n              {closeButton}\n            </Box>\n          </>\n        )}\n      </Box>\n\n      {/* Grouped Content Collapse */}\n      {isGrouped && groupedAlertItem.length > 0 && (\n        <Collapse in={expanded}>\n          <Box\n            sx={{\n              padding: isMobile ? '0 16px 16px 16px' : '0 16px 16px 48px',\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 1,\n            }}\n          >\n            {groupedAlertItem.map((item, index) => (\n              <Box key={index} sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>\n                <Box\n                  sx={{\n                    width: 4,\n                    height: 4,\n                    borderRadius: '50%',\n                    backgroundColor: styles.bodyText,\n                    mt: 1,\n                    flexShrink: 0,\n                  }}\n                />\n                <Typography variant=\"text-sm-regular\" sx={{ color: styles.bodyText, lineHeight: 1.5 }}>\n                  {item}\n                </Typography>\n              </Box>\n            ))}\n          </Box>\n        </Collapse>\n      )}\n    </Box>\n  )\n})\n\nAlert.displayName = 'Alert'\n"],"names":[],"mappings":"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"}

package/dist/components/BackgroundOverlay.d.ts

@@ -0,0 +1,23 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import * as React from 'react';
+export type BackgroundOverlayVariant = 'default' | 'white';
+export type BackgroundOverlayBlur = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export interface BackgroundOverlayProps {
+    /** Whether the overlay is open */
+    open: boolean;
+    /** Overlay variant: default (dark) or white */
+    variant?: BackgroundOverlayVariant;
+    /** Blur level */
+    blur?: BackgroundOverlayBlur;
+    /** Children content to display on top of the overlay */
+    children?: React.ReactNode;
+    /** Click handler for the backdrop */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Custom sx styles */
+    sx?: SxProps<Theme>;
+    /** Custom className */
+    className?: string;
+}
+export declare const BackgroundOverlay: React.FC<BackgroundOverlayProps>;
+export default BackgroundOverlay;
+//# sourceMappingURL=BackgroundOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundOverlay.d.ts","sourceRoot":"","sources":["../../src/components/BackgroundOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,OAAO,CAAA;AAC1D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtE,MAAM,WAAW,sBAAsB;IACrC,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,+CAA+C;IAC/C,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,iBAAiB;IACjB,IAAI,CAAC,EAAE,qBAAqB,CAAA;IAC5B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACxD,uBAAuB;IACvB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwB9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/BackgroundOverlay.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+import Backdrop from "../packages/zenith-ui/node_modules/@mui/material/esm/Backdrop/Backdrop.js";
+const StyledBackdrop = styled(Backdrop, {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "blurLevel"
+})(({ theme, variant, blurLevel }) => {
+  const isWhite = variant === "white";
+  return {
+    zIndex: theme.zIndex.drawer + 1,
+    backgroundColor: isWhite ? "rgba(255, 255, 255, 0.7)" : theme.palette.ds?.scrim ? `${theme.palette.ds.scrim}B3` : "rgba(18, 25, 38, 0.7)",
+    // B3 is ~70% opacity in hex
+    backdropFilter: blurLevel !== "0px" ? `blur(${blurLevel})` : "none",
+    WebkitBackdropFilter: blurLevel !== "0px" ? `blur(${blurLevel})` : "none",
+    color: isWhite ? theme.palette.text.primary : "#fff"
+  };
+});
+const BackgroundOverlay = ({
+  open,
+  variant = "default",
+  blur = "md",
+  children,
+  onClick,
+  sx,
+  className
+}) => {
+  const theme = useTheme();
+  const blurLevel = theme.blurs?.[blur] || "0px";
+  return /* @__PURE__ */ jsx(
+    StyledBackdrop,
+    {
+      open,
+      variant,
+      blurLevel,
+      onClick,
+      className,
+      sx,
+      children
+    }
+  );
+};
+export {
+  BackgroundOverlay
+};
+//# sourceMappingURL=BackgroundOverlay.js.map

package/dist/components/BackgroundOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundOverlay.js","sources":["../../src/components/BackgroundOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport Backdrop from '@mui/material/Backdrop'\nimport { useTheme, styled } from '@mui/material/styles'\nimport type { Theme, SxProps } from '@mui/material/styles'\n\nexport type BackgroundOverlayVariant = 'default' | 'white'\nexport type BackgroundOverlayBlur = 'none' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface BackgroundOverlayProps {\n  /** Whether the overlay is open */\n  open: boolean\n  /** Overlay variant: default (dark) or white */\n  variant?: BackgroundOverlayVariant\n  /** Blur level */\n  blur?: BackgroundOverlayBlur\n  /** Children content to display on top of the overlay */\n  children?: React.ReactNode\n  /** Click handler for the backdrop */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void\n  /** Custom sx styles */\n  sx?: SxProps<Theme>\n  /** Custom className */\n  className?: string\n}\n\nconst StyledBackdrop = styled(Backdrop, {\n  shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'blurLevel',\n})<{ variant: BackgroundOverlayVariant; blurLevel: string }>(({ theme, variant, blurLevel }) => {\n  const isWhite = variant === 'white'\n\n  return {\n    zIndex: theme.zIndex.drawer + 1,\n    backgroundColor: isWhite\n      ? 'rgba(255, 255, 255, 0.7)'\n      : theme.palette.ds?.scrim ? `${theme.palette.ds.scrim}B3` : 'rgba(18, 25, 38, 0.7)', // B3 is ~70% opacity in hex\n    backdropFilter: blurLevel !== '0px' ? `blur(${blurLevel})` : 'none',\n    WebkitBackdropFilter: blurLevel !== '0px' ? `blur(${blurLevel})` : 'none',\n    color: isWhite ? theme.palette.text.primary : '#fff',\n  }\n})\n\nexport const BackgroundOverlay: React.FC<BackgroundOverlayProps> = ({\n  open,\n  variant = 'default',\n  blur = 'md',\n  children,\n  onClick,\n  sx,\n  className,\n}) => {\n  const theme = useTheme()\n  const blurLevel = theme.blurs?.[blur] || '0px'\n\n  return (\n    <StyledBackdrop\n      open={open}\n      variant={variant}\n      blurLevel={blurLevel}\n      onClick={onClick}\n      className={className}\n      sx={sx}\n    >\n      {children}\n    </StyledBackdrop>\n  )\n}\n\nexport default BackgroundOverlay\n\n"],"names":[],"mappings":";;;;;AAyBA,MAAM,iBAAiB,OAAO,UAAU;AAAA,EACtC,mBAAmB,CAAC,SAAS,SAAS,aAAa,SAAS;AAC9D,CAAC,EAA4D,CAAC,EAAE,OAAO,SAAS,gBAAgB;AAC9F,QAAM,UAAU,YAAY;AAE5B,SAAO;AAAA,IACL,QAAQ,MAAM,OAAO,SAAS;AAAA,IAC9B,iBAAiB,UACb,6BACA,MAAM,QAAQ,IAAI,QAAQ,GAAG,MAAM,QAAQ,GAAG,KAAK,OAAO;AAAA;AAAA,IAC9D,gBAAgB,cAAc,QAAQ,QAAQ,SAAS,MAAM;AAAA,IAC7D,sBAAsB,cAAc,QAAQ,QAAQ,SAAS,MAAM;AAAA,IACnE,OAAO,UAAU,MAAM,QAAQ,KAAK,UAAU;AAAA,EAAA;AAElD,CAAC;AAEM,MAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAA;AACd,QAAM,YAAY,MAAM,QAAQ,IAAI,KAAK;AAEzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/BaseDropdownListItem.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+/**
+ * Text leading type for menu items
+ * - iconLeading: Shows an icon before the text
+ * - avatarLeading: Shows an avatar before the text
+ * - dotLeading: Shows a colored dot before the text
+ */
+export type TextLeadingType = 'iconLeading' | 'avatarLeading' | 'dotLeading';
+/**
+ * Avatar props for menu items
+ */
+export interface MenuItemAvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+}
+export interface BaseDropdownListItemProps {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Primary text content
+     */
+    content: string;
+    /**
+     * Optional secondary/supporting text
+     */
+    supportingText?: string;
+    /**
+     * Optional icon element (used when textLeadingType is 'iconLeading' or undefined)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional keyboard shortcut text
+     */
+    shortcut?: string;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Whether the item is destructive (error state)
+     */
+    destructive?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Background color for state layers (default: theme.palette.background.paper)
+     */
+    backgroundColor?: string;
+    /**
+     * Places the supporting text underneath the primary text
+     * When true, text will wrap to multiple lines as needed
+     */
+    stacked?: boolean;
+    /**
+     * Type of leading element
+     * - iconLeading: Shows an icon (default)
+     * - avatarLeading: Shows an avatar
+     * - dotLeading: Shows a colored dot
+     */
+    textLeadingType?: TextLeadingType;
+    /**
+     * Avatar props (used when textLeadingType is 'avatarLeading')
+     */
+    avatar?: MenuItemAvatarProps;
+    /**
+     * Dot color (used when textLeadingType is 'dotLeading')
+     * Supports any valid CSS color value
+     */
+    dotColor?: string;
+}
+/**
+ * .BASE Dropdown list item component
+ * Implements the design spec for dropdown menu items with all states:
+ * - Default, Hover, Focused, Disabled
+ * - Selected (with Check icon)
+ * - Destructive (error state)
+ */
+export declare const BaseDropdownListItem: React.ForwardRefExoticComponent<BaseDropdownListItemProps & React.RefAttributes<HTMLLIElement>>;
+export default BaseDropdownListItem;
+//# sourceMappingURL=BaseDropdownListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDropdownListItem.d.ts","sourceRoot":"","sources":["../../src/components/BaseDropdownListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAA;AAE5E;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IAEjC;;OAEG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAmDD;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,iGA8Q/B,CAAA;AAEF,eAAe,oBAAoB,CAAA"}

package/dist/components/BaseDropdownListItem.js

@@ -0,0 +1,295 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import MenuItem from "../packages/zenith-ui/node_modules/@mui/material/esm/MenuItem/MenuItem.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 ListItemText from "../packages/zenith-ui/node_modules/@mui/material/esm/ListItemText/ListItemText.js";
+import ListItemIcon from "../packages/zenith-ui/node_modules/@mui/material/esm/ListItemIcon/ListItemIcon.js";
+import { Avatar } from "./avatar/Avatar.js";
+const getDesignTokenColors = (theme) => {
+  const onprimary = theme.palette.dsTokens?.semantic?.onprimary ?? theme.palette.ds?.onprimary ?? theme.palette.common.white;
+  const onsurface = theme.palette.dsTokens?.semantic?.onsurface ?? theme.palette.ds?.onsurface ?? theme.palette.text.primary;
+  const onsurfacevariant = theme.palette.dsTokens?.semantic?.onsurfacevariant ?? theme.palette.ds?.onsurfacevariant ?? theme.palette.text.secondary;
+  const error = theme.palette.error.main;
+  const onsurfaceOpacity8 = theme.palette.dsTokens?.stateLayers?.["state-layers-onsurface-opacity-8"] ?? theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity8 ?? theme.componentTokens?.actions.hover;
+  const onsurfaceOpacity12 = theme.palette.dsTokens?.stateLayers?.["state-layers-onsurface-opacity-12"] ?? theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity12 ?? theme.componentTokens?.actions.selected;
+  const onsurfaceOpacity38 = theme.palette.dsTokens?.stateLayers?.["state-layers-onsurface-opacity-38"] ?? theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity38 ?? theme.componentTokens?.actions.disabled;
+  const errorOpacity8 = theme.palette.dsTokens?.stateLayers?.["state-layers-error-opacity-8"] ?? theme.palette.buttonTokens?.stateLayers?.errorOpacity8;
+  return {
+    onprimary,
+    onsurface,
+    onsurfacevariant,
+    error,
+    onsurfaceOpacity8,
+    onsurfaceOpacity12,
+    onsurfaceOpacity38,
+    errorOpacity8
+  };
+};
+const BaseDropdownListItem = React.forwardRef(function BaseDropdownListItem2(props, ref) {
+  const {
+    id: _id,
+    // id is kept for API consistency but not used internally
+    content,
+    supportingText,
+    icon,
+    shortcut,
+    selected = false,
+    destructive = false,
+    disabled = false,
+    onClick,
+    stacked = false,
+    textLeadingType = "iconLeading",
+    avatar,
+    dotColor = "#17B26A"
+    // Default green dot color
+  } = props;
+  const theme = useTheme();
+  const designTokens = getDesignTokenColors(theme);
+  const renderLeadingElement = () => {
+    switch (textLeadingType) {
+      case "avatarLeading":
+        if (avatar) {
+          const initials = avatar.initials ?? avatar.alt?.slice(0, 2).toUpperCase() ?? "U";
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 32,
+                marginRight: "8px"
+              },
+              children: /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  src: avatar.src,
+                  alt: avatar.alt ?? "Avatar",
+                  size: "xs",
+                  shape: "circle",
+                  initials
+                }
+              )
+            }
+          );
+        }
+        return null;
+      case "dotLeading":
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: 24,
+              marginRight: "8px"
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: dotColor
+                }
+              }
+            )
+          }
+        );
+      case "iconLeading":
+      default:
+        if (icon) {
+          return /* @__PURE__ */ jsx(
+            ListItemIcon,
+            {
+              sx: {
+                minWidth: 24,
+                color: "inherit",
+                margin: 0,
+                marginRight: "8px"
+              },
+              children: icon
+            }
+          );
+        }
+        return null;
+    }
+  };
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+  const zenithHoverBg = "#F8FAFC";
+  const zenithDestructive = "#B42318";
+  const hasLeadingElement = textLeadingType === "avatarLeading" ? !!avatar : textLeadingType === "dotLeading" ? true : !!icon;
+  return /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      ref,
+      onClick: handleClick,
+      disabled,
+      selected,
+      disableRipple: true,
+      disableTouchRipple: true,
+      sx: {
+        // Zenith: MenuItem root directly handles layout and padding/radius
+        display: "flex",
+        flexDirection: "row",
+        alignItems: stacked ? "flex-start" : "center",
+        width: "100%",
+        minHeight: "44px",
+        paddingTop: "9px",
+        paddingRight: "10px",
+        paddingBottom: "9px",
+        paddingLeft: "10px",
+        borderRadius: "6px",
+        // Default text color: onSurface (or destructive)
+        color: destructive ? zenithDestructive : designTokens.onsurface,
+        backgroundColor: "transparent",
+        transition: theme.transitions.create(["background-color"], {
+          duration: theme.transitions.duration.shorter
+        }),
+        "&:hover": {
+          backgroundColor: disabled ? "transparent" : `${zenithHoverBg} !important`
+        },
+        "&:focus-visible": {
+          outline: "none",
+          // Zenith doesn't explicitly define focus ring in docs; we maintain a consistent focus ring system
+          boxShadow: theme.focusRings?.primary?.[100],
+          backgroundColor: disabled ? "transparent" : zenithHoverBg
+        },
+        // Disabled state: opacity 0.38, color onSurface
+        "&.Mui-disabled": {
+          opacity: 0.38,
+          // Design constant for disabled state
+          color: designTokens.onsurface
+        },
+        "&.Mui-selected": {
+          backgroundColor: "transparent",
+          "&:hover": {
+            backgroundColor: disabled ? "transparent" : `${zenithHoverBg} !important`
+          },
+          "&:active": {
+            backgroundColor: disabled ? "transparent" : zenithHoverBg
+          }
+        },
+        "&:active": {
+          backgroundColor: disabled ? "transparent" : zenithHoverBg
+        },
+        "&.Mui-focusVisible": {
+          backgroundColor: disabled ? "transparent" : zenithHoverBg
+        }
+      },
+      children: [
+        hasLeadingElement && renderLeadingElement(),
+        stacked ? /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, display: "flex", flexDirection: "column", gap: "2px" }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "text-sm-medium",
+              sx: {
+                color: "inherit",
+                whiteSpace: "normal",
+                wordBreak: "break-word"
+              },
+              children: content
+            }
+          ),
+          supportingText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "text-xs-regular",
+              sx: {
+                color: designTokens.onsurfacevariant,
+                whiteSpace: "normal",
+                wordBreak: "break-word"
+              },
+              children: supportingText
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: content,
+            secondary: supportingText,
+            primaryTypographyProps: {
+              variant: "text-sm-medium",
+              // Zenith: 14/20, 500
+              color: "inherit"
+            },
+            secondaryTypographyProps: {
+              variant: "text-xs-regular",
+              // 12/18, 400
+              sx: {
+                color: designTokens.onsurfacevariant
+              }
+            },
+            sx: {
+              flex: 1,
+              margin: 0,
+              // For inline mode, show text side by side
+              "& .MuiListItemText-primary, & .MuiListItemText-secondary": {
+                display: "inline"
+              },
+              "& .MuiListItemText-secondary": {
+                marginLeft: "4px"
+              }
+            }
+          }
+        ),
+        (shortcut || selected) && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "span",
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "10px",
+              pt: stacked ? "2px" : "1px",
+              ml: "auto",
+              flexShrink: 0
+            },
+            children: [
+              shortcut && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "text-xs-regular",
+                  sx: {
+                    color: "inherit",
+                    opacity: 0.7
+                  },
+                  children: shortcut
+                }
+              ),
+              selected && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minWidth: 20,
+                    height: 20
+                  },
+                  children: /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16, color: "currentColor" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  BaseDropdownListItem
+};
+//# sourceMappingURL=BaseDropdownListItem.js.map

package/dist/components/BaseDropdownListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDropdownListItem.js","sources":["../../src/components/BaseDropdownListItem.tsx"],"sourcesContent":["// src/components/zenith/BaseDropdownListItem.tsx - BaseDropdownListItem\n// .BASE Dropdown list item component\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport MenuItem from '@mui/material/MenuItem'\nimport Typography from '@mui/material/Typography'\nimport { useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\nimport { Icon } from './Icon'\nimport { Avatar } from './avatar'\n\n/**\n * Text leading type for menu items\n * - iconLeading: Shows an icon before the text\n * - avatarLeading: Shows an avatar before the text\n * - dotLeading: Shows a colored dot before the text\n */\nexport type TextLeadingType = '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\nexport interface BaseDropdownListItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n\n  /**\n   * Primary text content\n   */\n  content: string\n\n  /**\n   * Optional secondary/supporting text\n   */\n  supportingText?: string\n\n  /**\n   * Optional icon element (used when textLeadingType is 'iconLeading' or undefined)\n   */\n  icon?: React.ReactNode\n\n  /**\n   * Optional keyboard shortcut text\n   */\n  shortcut?: string\n\n  /**\n   * Whether the item is selected\n   */\n  selected?: boolean\n\n  /**\n   * Whether the item is destructive (error state)\n   */\n  destructive?: boolean\n\n  /**\n   * Whether the item is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Click handler\n   */\n  onClick?: () => void\n\n  /**\n   * Background color for state layers (default: theme.palette.background.paper)\n   */\n  backgroundColor?: string\n\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  /**\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?: TextLeadingType\n\n  /**\n   * Avatar props (used when textLeadingType is 'avatarLeading')\n   */\n  avatar?: MenuItemAvatarProps\n\n  /**\n   * Dot color (used when textLeadingType is 'dotLeading')\n   * Supports any valid CSS color value\n   */\n  dotColor?: string\n}\n\n/**\n * Get design token colors from theme\n */\nconst getDesignTokenColors = (theme: Theme) => {\n  const onprimary =\n    theme.palette.dsTokens?.semantic?.onprimary ??\n    theme.palette.ds?.onprimary ??\n    theme.palette.common.white\n  const onsurface =\n    theme.palette.dsTokens?.semantic?.onsurface ??\n    theme.palette.ds?.onsurface ??\n    theme.palette.text.primary\n  const onsurfacevariant =\n    theme.palette.dsTokens?.semantic?.onsurfacevariant ??\n    theme.palette.ds?.onsurfacevariant ??\n    theme.palette.text.secondary\n  const error = theme.palette.error.main\n  const onsurfaceOpacity8 =\n    theme.palette.dsTokens?.stateLayers?.['state-layers-onsurface-opacity-8'] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity8 ??\n    theme.componentTokens?.actions.hover\n  const onsurfaceOpacity12 =\n    theme.palette.dsTokens?.stateLayers?.[\n      'state-layers-onsurface-opacity-12'\n    ] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity12 ??\n    theme.componentTokens?.actions.selected\n  const onsurfaceOpacity38 =\n    theme.palette.dsTokens?.stateLayers?.[\n      'state-layers-onsurface-opacity-38'\n    ] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity38 ??\n    theme.componentTokens?.actions.disabled\n  const errorOpacity8 =\n    theme.palette.dsTokens?.stateLayers?.['state-layers-error-opacity-8'] ??\n    theme.palette.buttonTokens?.stateLayers?.errorOpacity8\n\n  return {\n    onprimary,\n    onsurface,\n    onsurfacevariant,\n    error,\n    onsurfaceOpacity8,\n    onsurfaceOpacity12,\n    onsurfaceOpacity38,\n    errorOpacity8,\n  }\n}\n\n/**\n * .BASE Dropdown list item component\n * Implements the design spec for dropdown menu items with all states:\n * - Default, Hover, Focused, Disabled\n * - Selected (with Check icon)\n * - Destructive (error state)\n */\nexport const BaseDropdownListItem = React.forwardRef<\n  HTMLLIElement,\n  BaseDropdownListItemProps\n>(function BaseDropdownListItem(props, ref) {\n  const {\n    id: _id, // id is kept for API consistency but not used internally\n    content,\n    supportingText,\n    icon,\n    shortcut,\n    selected = false,\n    destructive = false,\n    disabled = false,\n    onClick,\n    stacked = false,\n    textLeadingType = 'iconLeading',\n    avatar,\n    dotColor = '#17B26A', // Default green dot color\n  } = props\n\n  const theme = useTheme()\n  const designTokens = getDesignTokenColors(theme)\n\n  /**\n   * Render the leading element based on textLeadingType\n   */\n  const renderLeadingElement = () => {\n    switch (textLeadingType) {\n      case 'avatarLeading':\n        if (avatar) {\n          const initials = avatar.initials ?? avatar.alt?.slice(0, 2).toUpperCase() ?? 'U'\n          return (\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                minWidth: 32,\n                marginRight: '8px',\n              }}\n            >\n              <Avatar\n                src={avatar.src}\n                alt={avatar.alt ?? 'Avatar'}\n                size=\"xs\"\n                shape=\"circle\"\n                initials={initials}\n              />\n            </Box>\n          )\n        }\n        return null\n\n      case 'dotLeading':\n        return (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              minWidth: 24,\n              marginRight: '8px',\n            }}\n          >\n            <Box\n              sx={{\n                width: 8,\n                height: 8,\n                borderRadius: '50%',\n                backgroundColor: dotColor,\n              }}\n            />\n          </Box>\n        )\n\n      case 'iconLeading':\n      default:\n        if (icon) {\n          return (\n            <ListItemIcon\n              sx={{\n                minWidth: 24,\n                color: 'inherit',\n                margin: 0,\n                marginRight: '8px',\n              }}\n            >\n              {icon}\n            </ListItemIcon>\n          )\n        }\n        return null\n    }\n  }\n\n  const handleClick = () => {\n    if (!disabled && onClick) {\n      onClick()\n    }\n  }\n\n  // Zenith actual measurement: hover background is #F8FAFC\n  const zenithHoverBg = '#F8FAFC'\n  // Zenith destructive actual measurement: #B42318\n  const zenithDestructive = '#B42318'\n\n  // Determine if we should show leading element\n  const hasLeadingElement = textLeadingType === 'avatarLeading'\n    ? !!avatar\n    : textLeadingType === 'dotLeading'\n      ? true\n      : !!icon\n\n  return (\n    <MenuItem\n      ref={ref as any}\n      onClick={handleClick}\n      disabled={disabled}\n      selected={selected}\n      disableRipple\n      disableTouchRipple\n      sx={{\n        // Zenith: MenuItem root directly handles layout and padding/radius\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: stacked ? 'flex-start' : 'center',\n        width: '100%',\n        minHeight: '44px',\n        paddingTop: '9px',\n        paddingRight: '10px',\n        paddingBottom: '9px',\n        paddingLeft: '10px',\n        borderRadius: '6px',\n        // Default text color: onSurface (or destructive)\n        color: destructive ? zenithDestructive : designTokens.onsurface,\n        backgroundColor: 'transparent',\n        transition: theme.transitions.create(['background-color'], {\n          duration: theme.transitions.duration.shorter,\n        }),\n        '&:hover': {\n          backgroundColor: disabled ? 'transparent' : `${zenithHoverBg} !important`,\n        },\n        '&:focus-visible': {\n          outline: 'none',\n          // Zenith doesn't explicitly define focus ring in docs; we maintain a consistent focus ring system\n          boxShadow: theme.focusRings?.primary?.[100],\n          backgroundColor: disabled ? 'transparent' : zenithHoverBg,\n        },\n        // Disabled state: opacity 0.38, color onSurface\n        '&.Mui-disabled': {\n          opacity: 0.38, // Design constant for disabled state\n          color: designTokens.onsurface,\n        },\n        '&.Mui-selected': {\n          backgroundColor: 'transparent',\n          '&:hover': {\n            backgroundColor: disabled ? 'transparent' : `${zenithHoverBg} !important`,\n          },\n          '&:active': {\n            backgroundColor: disabled ? 'transparent' : zenithHoverBg,\n          },\n        },\n        '&:active': {\n          backgroundColor: disabled ? 'transparent' : zenithHoverBg,\n        },\n        '&.Mui-focusVisible': {\n          backgroundColor: disabled ? 'transparent' : zenithHoverBg,\n        },\n      }}\n    >\n      {/* Leading element (icon, avatar, or dot) */}\n      {hasLeadingElement && renderLeadingElement()}\n\n      {/* Text content - supports stacked layout */}\n      {stacked ? (\n        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '2px' }}>\n          <Typography\n            variant=\"text-sm-medium\"\n            sx={{\n              color: 'inherit',\n              whiteSpace: 'normal',\n              wordBreak: 'break-word',\n            }}\n          >\n            {content}\n          </Typography>\n          {supportingText && (\n            <Typography\n              variant=\"text-xs-regular\"\n              sx={{\n                color: designTokens.onsurfacevariant,\n                whiteSpace: 'normal',\n                wordBreak: 'break-word',\n              }}\n            >\n              {supportingText}\n            </Typography>\n          )}\n        </Box>\n      ) : (\n        <ListItemText\n          primary={content}\n          secondary={supportingText}\n          primaryTypographyProps={{\n            variant: 'text-sm-medium', // Zenith: 14/20, 500\n            color: 'inherit',\n          }}\n          secondaryTypographyProps={{\n            variant: 'text-xs-regular', // 12/18, 400\n            sx: {\n              color: designTokens.onsurfacevariant,\n            },\n          }}\n          sx={{\n            flex: 1,\n            margin: 0,\n            // For inline mode, show text side by side\n            '& .MuiListItemText-primary, & .MuiListItemText-secondary': {\n              display: 'inline',\n            },\n            '& .MuiListItemText-secondary': {\n              marginLeft: '4px',\n            },\n          }}\n        />\n      )}\n\n      {/* Trailing element (shortcut and/or selected check) */}\n      {(shortcut || selected) && (\n        <Box\n          component=\"span\"\n          sx={{\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: '10px',\n            pt: stacked ? '2px' : '1px',\n            ml: 'auto',\n            flexShrink: 0,\n          }}\n        >\n          {shortcut && (\n            <Typography\n              variant=\"text-xs-regular\"\n              sx={{\n                color: 'inherit',\n                opacity: 0.7,\n              }}\n            >\n              {shortcut}\n            </Typography>\n          )}\n          {selected && (\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    </MenuItem>\n  )\n})\n\nexport default BaseDropdownListItem\n"],"names":["BaseDropdownListItem"],"mappings":"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"}

package/dist/components/BasePaginationNumber.d.ts

@@ -0,0 +1,33 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import * as React from 'react';
+export type BasePaginationNumberState = 'default' | 'disabled' | 'focused' | 'hover' | 'active';
+export interface BasePaginationNumberProps {
+    /** The page number to display */
+    children: React.ReactNode;
+    /** Current state of the pagination number */
+    state?: BasePaginationNumberState;
+    /** Whether the pagination number is disabled */
+    disabled?: boolean;
+    /** Whether the pagination number is currently active/selected */
+    active?: boolean;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Custom sx for the component */
+    sx?: SxProps<Theme>;
+    /** Aria label for accessibility */
+    ariaLabel?: string;
+}
+/**
+ * BasePaginationNumber component
+ * A circular pagination number button with multiple states
+ *
+ * States:
+ * - Default: Normal state
+ * - Hover: Mouse hover state
+ * - Active: Currently selected page
+ * - Focused: Keyboard focus state
+ * - Disabled: Cannot be interacted with
+ */
+export declare const BasePaginationNumber: React.ForwardRefExoticComponent<BasePaginationNumberProps & React.RefAttributes<HTMLButtonElement>>;
+export default BasePaginationNumber;
+//# sourceMappingURL=BasePaginationNumber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BasePaginationNumber.d.ts","sourceRoot":"","sources":["../../src/components/BasePaginationNumber.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,yBAAyB,GACjC,SAAS,GACT,UAAU,GACV,SAAS,GACT,OAAO,GACP,QAAQ,CAAA;AAEZ,MAAM,WAAW,yBAAyB;IACxC,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,kCAAkC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB,qGAkH/B,CAAA;AAEF,eAAe,oBAAoB,CAAA"}