@kenpan/zds-r8f3v1 0.1.0

package/dist/components/navigation/TabButton.js

@@ -0,0 +1,403 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { overlayMultiple } from "../../utils/colorUtils.js";
+import { Icon } from "../Icon.js";
+import { Tooltip } from "../Tooltip.js";
+import { DropdownMenu } from "../DropdownMenu.js";
+import useTheme from "../../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import { Badge } from "../badge/Badge.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+const padValue = (value) => value !== void 0 ? `${value}px` : void 0;
+const PADDING_MAP = {
+  buttonPrimary: {
+    sm: { py: 8, px: 12 },
+    md: { py: 10, px: 14 }
+  },
+  buttonGray: {
+    sm: { py: 8, px: 12 },
+    md: { py: 10, px: 14 }
+  },
+  // Storybook uses uniform padding: sm=4px, md=6px (all directions)
+  buttonPrimaryBorder: {
+    sm: { py: 4, px: 4 },
+    md: { py: 6, px: 6 }
+  },
+  // Storybook uses uniform padding: sm=4px, md=6px (all directions)
+  buttonWhiteBorder: {
+    sm: { py: 4, px: 4 },
+    md: { py: 6, px: 6 }
+  },
+  underline: {
+    sm: { pt: 0, pb: 12, px: 4 },
+    md: { pt: 0, pb: 12, px: 4 }
+  },
+  // Storybook uses uniform 12px padding (all directions, both sizes)
+  underlineFilled: {
+    sm: { py: 12, px: 12 },
+    md: { py: 12, px: 12 }
+  },
+  lineVertical: {
+    sm: { py: 9, px: 12 },
+    md: { py: 10, px: 14 }
+  }
+};
+const getVariantColors = (theme) => {
+  const buttonTokens = theme.palette.buttonTokens;
+  const componentStateLayers = theme.componentTokens?.stateLayers;
+  const outline = buttonTokens?.outline ?? theme.palette.dsTokens?.semantic.outline;
+  const onSurfaceVariant = buttonTokens?.onSurfaceVariant ?? theme.palette.dsTokens?.semantic.onsurfacevariant ?? theme.palette.text.secondary;
+  const disabledText = componentStateLayers?.["state-layers-onsurface-opacity-38"] ?? theme.palette.text.disabled;
+  const overlayPrimary = componentStateLayers?.["state-layers-primary-opacity-8"] ?? theme.componentTokens?.stateLayers["state-layers-primary-opacity-8"] ?? theme.palette.action.hover;
+  const overlayPrimary10 = componentStateLayers?.["state-layers-primary-opacity-10"] ?? theme.componentTokens?.stateLayers["state-layers-primary-opacity-10"] ?? theme.palette.action.focus;
+  const overlaySurface = componentStateLayers?.["state-layers-onsurface-opacity-8"] ?? theme.componentTokens?.stateLayers["state-layers-onsurface-opacity-8"] ?? theme.palette.action.selected;
+  const overlayOnSurface10 = componentStateLayers?.["state-layers-onsurface-opacity-10"] ?? theme.componentTokens?.stateLayers["state-layers-onsurface-opacity-10"] ?? theme.palette.action.focus;
+  const disabledOverlay = componentStateLayers?.["state-layers-onsurfacevariant-opacity-12"] ?? theme.componentTokens?.stateLayers["state-layers-onsurfacevariant-opacity-12"] ?? theme.palette.action.disabledBackground;
+  const onPrimary = theme.palette.dsTokens?.semantic.onprimary ?? theme.palette.common.white;
+  const surfaceContainer = theme.palette.dsTokens?.semantic.surfacecontainer ?? theme.palette.background.default;
+  const shadowDefault = theme.shadows[2];
+  const shadowLifted = theme.shadows[3];
+  return {
+    buttonPrimary: {
+      text: {
+        default: onSurfaceVariant,
+        hover: theme.palette.primary.main,
+        current: theme.palette.primary.main,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        hover: overlayPrimary,
+        current: overlayPrimary,
+        focus: overlayPrimary10,
+        disabled: disabledOverlay
+      },
+      border: {
+        default: "transparent",
+        current: "transparent",
+        disabled: "transparent"
+      },
+      focusRadius: "6px",
+      focusRing: "primary"
+    },
+    buttonGray: {
+      text: {
+        default: onSurfaceVariant,
+        hover: onSurfaceVariant,
+        current: onSurfaceVariant,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        hover: overlaySurface,
+        current: surfaceContainer,
+        focus: overlayMultiple(surfaceContainer, [overlayOnSurface10]),
+        disabled: disabledOverlay
+      },
+      border: {
+        default: "transparent",
+        current: "transparent",
+        disabled: "transparent"
+      },
+      focusRadius: "6px",
+      focusRing: "gray"
+    },
+    // Storybook: default border = transparent, current border = rgb(209, 233, 255)
+    buttonPrimaryBorder: {
+      text: {
+        default: onSurfaceVariant,
+        hover: theme.palette.primary.main,
+        current: theme.palette.primary.main,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        hover: overlayMultiple(onPrimary, [overlayPrimary]),
+        current: onPrimary,
+        // Storybook: rgb(255, 255, 255)
+        focus: overlayMultiple(onPrimary, [overlayPrimary]),
+        disabled: disabledOverlay
+      },
+      border: {
+        default: "transparent",
+        // Storybook: rgba(0, 0, 0, 0)
+        current: "#D1E9FF",
+        // Storybook: rgb(209, 233, 255)
+        disabled: "transparent",
+        // Storybook: rgba(0, 0, 0, 0)
+        hover: theme.palette.primary.main
+      },
+      focusRadius: "6px",
+      focusRing: "primary",
+      shadow: {
+        default: shadowDefault,
+        hover: shadowLifted,
+        current: shadowDefault,
+        focus: shadowLifted
+      }
+    },
+    // Storybook: default border = transparent, current border = rgb(212, 220, 231)
+    buttonWhiteBorder: {
+      text: {
+        default: onSurfaceVariant,
+        hover: onSurfaceVariant,
+        current: theme.palette.dsTokens?.semantic.onsurface ?? theme.palette.text.primary,
+        currentHover: theme.palette.dsTokens?.semantic.onsurface ?? theme.palette.text.primary,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        hover: overlaySurface,
+        current: onPrimary,
+        // Storybook: rgb(255, 255, 255)
+        disabled: disabledOverlay
+      },
+      border: {
+        default: "transparent",
+        // Storybook: rgba(0, 0, 0, 0)
+        current: "#D4DCE7",
+        // Storybook: rgb(212, 220, 231)
+        disabled: "transparent",
+        // Storybook: rgba(0, 0, 0, 0)
+        hover: "transparent"
+      },
+      focusRadius: "6px",
+      focusRing: "gray",
+      shadow: {
+        default: "none",
+        // Storybook: none for default
+        hover: shadowLifted,
+        current: shadowDefault,
+        // Storybook has shadow for current
+        focus: shadowLifted
+      }
+    },
+    underline: {
+      text: {
+        default: onSurfaceVariant,
+        hover: theme.palette.primary.main,
+        current: theme.palette.primary.main,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        current: "transparent",
+        disabled: "transparent"
+      },
+      border: {
+        default: "transparent",
+        current: "transparent",
+        disabled: "transparent"
+      },
+      focusRadius: 0,
+      focusRing: "primary"
+    },
+    underlineFilled: {
+      text: {
+        default: onSurfaceVariant,
+        hover: theme.palette.primary.main,
+        current: theme.palette.primary.main,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        hover: overlayPrimary,
+        current: overlayPrimary,
+        disabled: disabledOverlay
+      },
+      border: {
+        default: "transparent",
+        current: "transparent",
+        disabled: "transparent"
+      },
+      focusRadius: 0,
+      focusRing: "primary"
+    },
+    lineVertical: {
+      text: {
+        default: onSurfaceVariant,
+        hover: theme.palette.primary.main,
+        current: theme.palette.primary.main,
+        disabled: disabledText
+      },
+      background: {
+        default: "transparent",
+        hover: overlaySurface,
+        current: "transparent",
+        disabled: "transparent"
+      },
+      border: {
+        default: outline,
+        current: theme.palette.primary.main,
+        disabled: outline,
+        hover: theme.palette.primary.main
+      },
+      focusRadius: 0,
+      focusRing: "gray"
+    }
+  };
+};
+function TabButton({
+  label,
+  badge,
+  badgeLabel,
+  badgeColor,
+  badgeIcon,
+  badgeIconType,
+  badgeType,
+  leadingIcon,
+  size = "sm",
+  type = "buttonPrimary",
+  current = false,
+  disabled = false,
+  labelTooltipProps,
+  dropdownMenu,
+  dropdownMenuProps,
+  fullWidth = false,
+  textAlign = "center",
+  component: RootComponent = "button",
+  key: _k,
+  _containerPaddingLR: _cp,
+  _tabType: _tt,
+  _truncateLabelTextWidth: _tltw
+}) {
+  const theme = useTheme();
+  const isSm = size === "sm";
+  const variantColors = getVariantColors(theme)[type];
+  const padding = PADDING_MAP[type][size];
+  const isStandaloneTab = RootComponent === "button";
+  const isUnderlineVariant = type === "underline";
+  const isUnderlineFilledVariant = type === "underlineFilled";
+  const isUnderlineLike = isUnderlineVariant || isUnderlineFilledVariant;
+  const paddingStyles = {
+    paddingTop: padValue(padding.py ?? padding.pt),
+    paddingBottom: padValue(padding.py ?? padding.pb),
+    paddingLeft: padValue(padding.px ?? padding.pl),
+    paddingRight: padValue(padding.px ?? padding.pr)
+  };
+  const backgroundColor = disabled ? variantColors.background.disabled : current ? variantColors.background.current : variantColors.background.default;
+  const textColor = disabled ? variantColors.text.disabled : current ? variantColors.text.current : variantColors.text.default;
+  const hoverTextColor = disabled ? variantColors.text.disabled : current ? variantColors.text.currentHover ?? variantColors.text.current : variantColors.text.hover ?? variantColors.text.default;
+  const borderColor = disabled ? variantColors.border.disabled : current ? variantColors.border.current : variantColors.border.default;
+  const hasBorder = type === "buttonPrimaryBorder" || type === "buttonWhiteBorder" || type === "lineVertical";
+  const isVerticalLine = type === "lineVertical";
+  const focusRingKey = variantColors.focusRing;
+  const focusRingShadow = !disabled && focusRingKey ? theme.componentTokens?.focusRings?.[focusRingKey]?.[100] ?? theme.focusRings?.[focusRingKey]?.[100] : void 0;
+  const baseShadow = disabled ? void 0 : current ? variantColors.shadow?.current ?? variantColors.shadow?.default : variantColors.shadow?.default;
+  const hoverBackground = current ? variantColors.background.currentHover ?? variantColors.background.current : variantColors.background.hover ?? variantColors.background.default;
+  const hoverBorderColor = current ? variantColors.border.currentHover ?? variantColors.border.current : variantColors.border.hover ?? variantColors.border.default;
+  const hoverShadow = disabled ? baseShadow : current ? variantColors.shadow?.hover ?? variantColors.shadow?.current ?? baseShadow : variantColors.shadow?.hover ?? baseShadow;
+  const focusBackground = disabled ? backgroundColor : variantColors.background.focus ?? backgroundColor;
+  const focusShadow = disabled ? void 0 : variantColors.shadow?.focus ?? hoverShadow ?? baseShadow;
+  const focusBoxShadow = focusRingShadow ? [focusShadow ?? baseShadow, focusRingShadow].filter(Boolean).join(", ") : focusShadow ?? baseShadow;
+  const borderStyles = isVerticalLine ? {
+    borderLeft: `1px solid ${borderColor}`,
+    borderTop: "none",
+    borderRight: "none",
+    borderBottom: "none"
+  } : hasBorder ? { border: `1px solid ${borderColor}` } : isUnderlineLike && isStandaloneTab ? {
+    borderBottom: disabled ? "none" : "2px solid transparent",
+    borderLeft: "none",
+    borderTop: "none",
+    borderRight: "none",
+    ...current && !disabled ? { borderBottomColor: theme.palette.primary.main } : {}
+  } : {};
+  const labelContent = /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      variant: isSm ? "text-sm-semibold" : "text-md-semibold",
+      sx: {
+        whiteSpace: "nowrap",
+        color: "inherit",
+        textAlign: textAlign === "left" ? "left" : "center"
+      },
+      children: label
+    }
+  );
+  const content = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: RootComponent,
+      type: RootComponent === "button" ? "button" : void 0,
+      role: isStandaloneTab ? "tab" : void 0,
+      "aria-selected": isStandaloneTab ? current : void 0,
+      disabled: RootComponent === "button" ? disabled : void 0,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: textAlign === "left" ? "flex-start" : "center",
+        width: fullWidth ? "100%" : "auto",
+        gap: 2,
+        minHeight: 0,
+        borderRadius: variantColors.focusRadius,
+        overflow: "visible",
+        // Reset default button styles
+        border: "none",
+        cursor: disabled ? "default" : "pointer",
+        // Apply variant-specific border styles
+        ...borderStyles,
+        ...paddingStyles,
+        backgroundColor,
+        color: textColor,
+        boxShadow: baseShadow,
+        transition: theme.transitions.create(
+          ["background-color", "color", "border-color", "box-shadow"],
+          { duration: theme.transitions.duration.short }
+        ),
+        ...disabled ? {} : {
+          "&:hover": {
+            ...hoverBackground !== void 0 ? { backgroundColor: hoverBackground } : {},
+            color: hoverTextColor,
+            ...isVerticalLine ? { borderLeftColor: hoverBorderColor } : hasBorder ? { borderColor: hoverBorderColor } : isUnderlineLike && isStandaloneTab ? { borderBottomColor: theme.palette.primary.main } : {},
+            boxShadow: hoverShadow
+          }
+        },
+        // Remove default browser focus outline
+        "&:focus": {
+          outline: "none"
+        },
+        "&:focus-visible": {
+          outline: "none",
+          ...focusBackground !== backgroundColor ? { backgroundColor: focusBackground } : {},
+          boxShadow: disabled ? void 0 : focusBoxShadow,
+          borderRadius: variantColors.focusRadius,
+          ...disabled ? {} : { color: hoverTextColor },
+          ...isVerticalLine && !disabled && hoverBorderColor ? { borderLeftColor: hoverBorderColor } : {},
+          ...isUnderlineLike && isStandaloneTab && !disabled ? { borderBottomColor: theme.palette.primary.main } : {}
+        }
+      },
+      children: [
+        leadingIcon ? /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex" }, children: /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: isSm ? 16 : 20 }) }) : null,
+        labelTooltipProps && labelTooltipProps.title ? /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            ...labelTooltipProps,
+            title: labelTooltipProps.title,
+            children: labelContent
+          }
+        ) : labelContent,
+        badge ? /* @__PURE__ */ jsx(
+          Badge,
+          {
+            label: badgeLabel,
+            color: badgeColor,
+            icon: badgeIcon,
+            iconType: badgeIconType,
+            type: badgeType,
+            size: size === "md" ? "sm" : "xs"
+          }
+        ) : null,
+        dropdownMenu && /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", ml: 1 }, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 12 }) })
+      ]
+    }
+  );
+  if (dropdownMenu && dropdownMenuProps) {
+    return /* @__PURE__ */ jsx(DropdownMenu, { ...dropdownMenuProps, children: content });
+  }
+  return content;
+}
+export {
+  TabButton
+};
+//# sourceMappingURL=TabButton.js.map

package/dist/components/navigation/TabButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabButton.js","sources":["../../../src/components/navigation/TabButton.tsx"],"sourcesContent":["// src/components/zenith/TabButton.tsx\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport { useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\nimport { overlayMultiple } from '../../utils/colorUtils'\nimport { Badge, type BadgeColor, type BadgeIconType, type BadgeType } from '../badge'\nimport { Icon } from '../Icon'\nimport { Tooltip, type TooltipProps } from '../Tooltip'\nimport { DropdownMenu } from '../DropdownMenu'\n\nexport interface TabButtonProps {\n  /** The content to be displayed on the tab button */\n  label: React.ReactNode\n  /** Controls visibility of the badge component on the tab. */\n  badge?: boolean\n  /** Sets the label of the badge. Badge must be set to true to appear. */\n  badgeLabel?: string\n  /** Sets the color of the badge. Badge must be set to true to appear. */\n  badgeColor?: BadgeColor\n  /** Sets the icon of the badge. Badge must be set to true to appear. */\n  badgeIcon?: string\n  /** Sets the icon type of the badge. Badge must be set to true to appear. */\n  badgeIconType?: BadgeIconType\n  /** Sets the variant of the badge. Badge must be set to true to appear. */\n  badgeType?: BadgeType\n  /** If provided, displays a leading icon on the tab. */\n  leadingIcon?: string\n  /** Controls the size of the tabs. */\n  size?: 'sm' | 'md'\n  /** Type applies different styles to the tabs. */\n  type?: TabButtonType\n  /** Whether the tab is currently selected. */\n  current?: boolean\n  /** Whether the tab is disabled. */\n  disabled?: boolean\n  /** If present, displays a tooltip on the tab's label node. */\n  labelTooltipProps?: Partial<TooltipProps>\n  /** If true, displays a dropdown menu on the tab. */\n  dropdownMenu?: boolean\n  /** Props for the dropdown menu. */\n  dropdownMenuProps?: any\n  /** If true, the tab will expand to fill the width of its container. */\n  fullWidth?: boolean\n  /** Alignment for the tab button text. */\n  textAlign?: 'center' | 'left'\n  /** The component used for the root node. */\n  component?: React.ElementType\n  /** Unique key for the tab. */\n  key?: string\n  /** Internal use only */\n  _containerPaddingLR?: number\n  /** Internal use only */\n  _tabType?: 'horizontal' | 'vertical'\n  /** Internal use only */\n  _truncateLabelTextWidth?: number\n}\n\nexport type TabButtonType =\n  | 'buttonPrimary'\n  | 'buttonGray'\n  | 'buttonWhiteBorder'\n  | 'buttonPrimaryBorder'\n  | 'underline'\n  | 'underlineFilled'\n  | 'lineVertical'\n\ntype PaddingDefinition = {\n  px?: number\n  py?: number\n  pt?: number\n  pr?: number\n  pb?: number\n  pl?: number\n}\n\ntype SizeKey = 'sm' | 'md'\n\nconst padValue = (value?: number) =>\n  value !== undefined ? `${value}px` : undefined\n\n// Padding values aligned with Storybook\nconst PADDING_MAP: Record<TabButtonType, Record<SizeKey, PaddingDefinition>> = {\n  buttonPrimary: {\n    sm: { py: 8, px: 12 },\n    md: { py: 10, px: 14 },\n  },\n  buttonGray: {\n    sm: { py: 8, px: 12 },\n    md: { py: 10, px: 14 },\n  },\n  // Storybook uses uniform padding: sm=4px, md=6px (all directions)\n  buttonPrimaryBorder: {\n    sm: { py: 4, px: 4 },\n    md: { py: 6, px: 6 },\n  },\n  // Storybook uses uniform padding: sm=4px, md=6px (all directions)\n  buttonWhiteBorder: {\n    sm: { py: 4, px: 4 },\n    md: { py: 6, px: 6 },\n  },\n  underline: {\n    sm: { pt: 0, pb: 12, px: 4 },\n    md: { pt: 0, pb: 12, px: 4 },\n  },\n  // Storybook uses uniform 12px padding (all directions, both sizes)\n  underlineFilled: {\n    sm: { py: 12, px: 12 },\n    md: { py: 12, px: 12 },\n  },\n  lineVertical: {\n    sm: { py: 9, px: 12 },\n    md: { py: 10, px: 14 },\n  },\n}\n\ntype FocusRingColor = keyof Theme['focusRings']\n\ntype VariantColors = {\n  text: {\n    default: string\n    hover?: string\n    current: string\n    currentHover?: string\n    disabled: string\n  }\n  background: {\n    default: string\n    hover?: string\n    current: string\n    currentHover?: string\n    focus?: string\n    disabled: string\n  }\n  border: {\n    default: string\n    current: string\n    disabled: string\n    hover?: string\n    currentHover?: string\n  }\n  focusRadius: number | string\n  focusRing: FocusRingColor | null\n  shadow?: {\n    default?: string\n    hover?: string\n    current?: string\n    focus?: string\n  }\n}\n\nconst getVariantColors = (\n  theme: Theme,\n): Record<TabButtonType, VariantColors> => {\n  const buttonTokens = theme.palette.buttonTokens\n  const componentStateLayers = theme.componentTokens?.stateLayers\n  const outline =\n    buttonTokens?.outline ?? theme.palette.dsTokens?.semantic.outline\n  const onSurfaceVariant =\n    buttonTokens?.onSurfaceVariant ??\n    theme.palette.dsTokens?.semantic.onsurfacevariant ??\n    theme.palette.text.secondary\n  const disabledText =\n    componentStateLayers?.['state-layers-onsurface-opacity-38'] ??\n    theme.palette.text.disabled\n  const overlayPrimary =\n    componentStateLayers?.['state-layers-primary-opacity-8'] ??\n    theme.componentTokens?.stateLayers['state-layers-primary-opacity-8'] ??\n    theme.palette.action.hover\n  const overlayPrimary10 =\n    componentStateLayers?.['state-layers-primary-opacity-10'] ??\n    theme.componentTokens?.stateLayers['state-layers-primary-opacity-10'] ??\n    theme.palette.action.focus\n  const overlaySurface =\n    componentStateLayers?.['state-layers-onsurface-opacity-8'] ??\n    theme.componentTokens?.stateLayers['state-layers-onsurface-opacity-8'] ??\n    theme.palette.action.selected\n  const overlayOnSurface10 =\n    componentStateLayers?.['state-layers-onsurface-opacity-10'] ??\n    theme.componentTokens?.stateLayers['state-layers-onsurface-opacity-10'] ??\n    theme.palette.action.focus\n  const disabledOverlay =\n    componentStateLayers?.['state-layers-onsurfacevariant-opacity-12'] ??\n    theme.componentTokens?.stateLayers[\n      'state-layers-onsurfacevariant-opacity-12'\n    ] ??\n    theme.palette.action.disabledBackground\n\n  // Design tokens for current states\n  const onPrimary =\n    theme.palette.dsTokens?.semantic.onprimary ?? theme.palette.common.white\n  const surfaceContainer =\n    theme.palette.dsTokens?.semantic.surfacecontainer ??\n    theme.palette.background.default\n\n  const shadowDefault = theme.shadows[2]\n  const shadowLifted = theme.shadows[3]\n\n  return {\n    buttonPrimary: {\n      text: {\n        default: onSurfaceVariant,\n        hover: theme.palette.primary.main,\n        current: theme.palette.primary.main,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        hover: overlayPrimary,\n        current: overlayPrimary,\n        focus: overlayPrimary10,\n        disabled: disabledOverlay,\n      },\n      border: {\n        default: 'transparent',\n        current: 'transparent',\n        disabled: 'transparent',\n      },\n      focusRadius: '6px',\n      focusRing: 'primary',\n    },\n    buttonGray: {\n      text: {\n        default: onSurfaceVariant,\n        hover: onSurfaceVariant,\n        current: onSurfaceVariant,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        hover: overlaySurface,\n        current: surfaceContainer,\n        focus: overlayMultiple(surfaceContainer, [overlayOnSurface10]),\n        disabled: disabledOverlay,\n      },\n      border: {\n        default: 'transparent',\n        current: 'transparent',\n        disabled: 'transparent',\n      },\n      focusRadius: '6px',\n      focusRing: 'gray',\n    },\n    // Storybook: default border = transparent, current border = rgb(209, 233, 255)\n    buttonPrimaryBorder: {\n      text: {\n        default: onSurfaceVariant,\n        hover: theme.palette.primary.main,\n        current: theme.palette.primary.main,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        hover: overlayMultiple(onPrimary, [overlayPrimary]),\n        current: onPrimary, // Storybook: rgb(255, 255, 255)\n        focus: overlayMultiple(onPrimary, [overlayPrimary]),\n        disabled: disabledOverlay,\n      },\n      border: {\n        default: 'transparent', // Storybook: rgba(0, 0, 0, 0)\n        current: '#D1E9FF', // Storybook: rgb(209, 233, 255)\n        disabled: 'transparent', // Storybook: rgba(0, 0, 0, 0)\n        hover: theme.palette.primary.main,\n      },\n      focusRadius: '6px',\n      focusRing: 'primary',\n      shadow: {\n        default: shadowDefault,\n        hover: shadowLifted,\n        current: shadowDefault,\n        focus: shadowLifted,\n      },\n    },\n    // Storybook: default border = transparent, current border = rgb(212, 220, 231)\n    buttonWhiteBorder: {\n      text: {\n        default: onSurfaceVariant,\n        hover: onSurfaceVariant,\n        current:\n          theme.palette.dsTokens?.semantic.onsurface ??\n          theme.palette.text.primary,\n        currentHover:\n          theme.palette.dsTokens?.semantic.onsurface ??\n          theme.palette.text.primary,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        hover: overlaySurface,\n        current: onPrimary, // Storybook: rgb(255, 255, 255)\n        disabled: disabledOverlay,\n      },\n      border: {\n        default: 'transparent', // Storybook: rgba(0, 0, 0, 0)\n        current: '#D4DCE7', // Storybook: rgb(212, 220, 231)\n        disabled: 'transparent', // Storybook: rgba(0, 0, 0, 0)\n        hover: 'transparent',\n      },\n      focusRadius: '6px',\n      focusRing: 'gray',\n      shadow: {\n        default: 'none', // Storybook: none for default\n        hover: shadowLifted,\n        current: shadowDefault, // Storybook has shadow for current\n        focus: shadowLifted,\n      },\n    },\n    underline: {\n      text: {\n        default: onSurfaceVariant,\n        hover: theme.palette.primary.main,\n        current: theme.palette.primary.main,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        current: 'transparent',\n        disabled: 'transparent',\n      },\n      border: {\n        default: 'transparent',\n        current: 'transparent',\n        disabled: 'transparent',\n      },\n      focusRadius: 0,\n      focusRing: 'primary',\n    },\n    underlineFilled: {\n      text: {\n        default: onSurfaceVariant,\n        hover: theme.palette.primary.main,\n        current: theme.palette.primary.main,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        hover: overlayPrimary,\n        current: overlayPrimary,\n        disabled: disabledOverlay,\n      },\n      border: {\n        default: 'transparent',\n        current: 'transparent',\n        disabled: 'transparent',\n      },\n      focusRadius: 0,\n      focusRing: 'primary',\n    },\n    lineVertical: {\n      text: {\n        default: onSurfaceVariant,\n        hover: theme.palette.primary.main,\n        current: theme.palette.primary.main,\n        disabled: disabledText,\n      },\n      background: {\n        default: 'transparent',\n        hover: overlaySurface,\n        current: 'transparent',\n        disabled: 'transparent',\n      },\n      border: {\n        default: outline,\n        current: theme.palette.primary.main,\n        disabled: outline,\n        hover: theme.palette.primary.main,\n      },\n      focusRadius: 0,\n      focusRing: 'gray',\n    },\n  }\n}\n\nexport function TabButton({\n  label,\n  badge,\n  badgeLabel,\n  badgeColor,\n  badgeIcon,\n  badgeIconType,\n  badgeType,\n  leadingIcon,\n  size = 'sm',\n  type = 'buttonPrimary',\n  current = false,\n  disabled = false,\n  labelTooltipProps,\n  dropdownMenu,\n  dropdownMenuProps,\n  fullWidth = false,\n  textAlign = 'center',\n  component: RootComponent = 'button',\n  key: _k,\n  _containerPaddingLR: _cp,\n  _tabType: _tt,\n  _truncateLabelTextWidth: _tltw,\n}: TabButtonProps) {\n  const theme = useTheme()\n  const isSm = size === 'sm'\n  const variantColors = getVariantColors(theme)[type]\n  const padding = PADDING_MAP[type][size]\n  const isStandaloneTab = RootComponent === 'button'\n  const isUnderlineVariant = type === 'underline'\n  const isUnderlineFilledVariant = type === 'underlineFilled'\n  const isUnderlineLike = isUnderlineVariant || isUnderlineFilledVariant\n\n  const paddingStyles = {\n    paddingTop: padValue(padding.py ?? padding.pt),\n    paddingBottom: padValue(padding.py ?? padding.pb),\n    paddingLeft: padValue(padding.px ?? padding.pl),\n    paddingRight: padValue(padding.px ?? padding.pr),\n  }\n  const backgroundColor = disabled\n    ? variantColors.background.disabled\n    : current\n      ? variantColors.background.current\n      : variantColors.background.default\n  const textColor = disabled\n    ? variantColors.text.disabled\n    : current\n      ? variantColors.text.current\n      : variantColors.text.default\n  const hoverTextColor = disabled\n    ? variantColors.text.disabled\n    : current\n      ? variantColors.text.currentHover ?? variantColors.text.current\n      : variantColors.text.hover ?? variantColors.text.default\n  const borderColor = disabled\n    ? variantColors.border.disabled\n    : current\n      ? variantColors.border.current\n      : variantColors.border.default\n  const hasBorder =\n    type === 'buttonPrimaryBorder' ||\n    type === 'buttonWhiteBorder' ||\n    type === 'lineVertical'\n  const isVerticalLine = type === 'lineVertical'\n  const focusRingKey = variantColors.focusRing\n  const focusRingShadow =\n    !disabled && focusRingKey\n      ? theme.componentTokens?.focusRings?.[focusRingKey]?.[100] ??\n        theme.focusRings?.[focusRingKey]?.[100]\n      : undefined\n  const baseShadow = disabled\n    ? undefined\n    : current\n      ? variantColors.shadow?.current ?? variantColors.shadow?.default\n      : variantColors.shadow?.default\n  const hoverBackground = current\n    ? variantColors.background.currentHover ?? variantColors.background.current\n    : variantColors.background.hover ?? variantColors.background.default\n  const hoverBorderColor = current\n    ? variantColors.border.currentHover ?? variantColors.border.current\n    : variantColors.border.hover ?? variantColors.border.default\n  const hoverShadow = disabled\n    ? baseShadow\n    : current\n      ? variantColors.shadow?.hover ??\n        variantColors.shadow?.current ??\n        baseShadow\n      : variantColors.shadow?.hover ?? baseShadow\n  const focusBackground = disabled\n    ? backgroundColor\n    : variantColors.background.focus ?? backgroundColor\n  const focusShadow = disabled\n    ? undefined\n    : variantColors.shadow?.focus ?? hoverShadow ?? baseShadow\n  const focusBoxShadow = focusRingShadow\n    ? [focusShadow ?? baseShadow, focusRingShadow].filter(Boolean).join(', ')\n    : focusShadow ?? baseShadow\n  const borderStyles = isVerticalLine\n    ? {\n        borderLeft: `1px solid ${borderColor}`,\n        borderTop: 'none',\n        borderRight: 'none',\n        borderBottom: 'none',\n      }\n    : hasBorder\n      ? { border: `1px solid ${borderColor}` }\n      : isUnderlineLike && isStandaloneTab\n        ? {\n            borderBottom: disabled ? 'none' : '2px solid transparent',\n            borderLeft: 'none',\n            borderTop: 'none',\n            borderRight: 'none',\n            ...(current && !disabled\n              ? { borderBottomColor: theme.palette.primary.main }\n              : {}),\n          }\n      : {}\n\n  const labelContent = (\n    <Typography\n      component=\"span\"\n      variant={isSm ? 'text-sm-semibold' : 'text-md-semibold'}\n      sx={{\n        whiteSpace: 'nowrap',\n        color: 'inherit',\n        textAlign: textAlign === 'left' ? 'left' : 'center',\n      }}\n    >\n      {label}\n    </Typography>\n  )\n\n  const content = (\n    <Box\n      component={RootComponent}\n      type={RootComponent === 'button' ? 'button' : undefined}\n      role={isStandaloneTab ? 'tab' : undefined}\n      aria-selected={isStandaloneTab ? current : undefined}\n      disabled={RootComponent === 'button' ? disabled : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: textAlign === 'left' ? 'flex-start' : 'center',\n        width: fullWidth ? '100%' : 'auto',\n        gap: 2,\n        minHeight: 0,\n        borderRadius: variantColors.focusRadius,\n        overflow: 'visible',\n        // Reset default button styles\n        border: 'none',\n        cursor: disabled ? 'default' : 'pointer',\n        // Apply variant-specific border styles\n        ...borderStyles,\n        ...paddingStyles,\n        backgroundColor,\n        color: textColor,\n        boxShadow: baseShadow,\n        transition: theme.transitions.create(\n          ['background-color', 'color', 'border-color', 'box-shadow'],\n          { duration: theme.transitions.duration.short },\n        ),\n        ...(disabled\n          ? {}\n          : {\n              '&:hover': {\n                ...(hoverBackground !== undefined\n                  ? { backgroundColor: hoverBackground }\n                  : {}),\n                color: hoverTextColor,\n                ...(isVerticalLine\n                  ? { borderLeftColor: hoverBorderColor }\n                  : hasBorder\n                    ? { borderColor: hoverBorderColor }\n                    : isUnderlineLike && isStandaloneTab\n                      ? { borderBottomColor: theme.palette.primary.main }\n                    : {}),\n                boxShadow: hoverShadow,\n              },\n            }),\n        // Remove default browser focus outline\n        '&:focus': {\n          outline: 'none',\n        },\n        '&:focus-visible': {\n          outline: 'none',\n          ...(focusBackground !== backgroundColor\n            ? { backgroundColor: focusBackground }\n            : {}),\n          boxShadow: disabled ? undefined : focusBoxShadow,\n          borderRadius: variantColors.focusRadius,\n          ...(disabled ? {} : { color: hoverTextColor }),\n          ...(isVerticalLine && !disabled && hoverBorderColor\n            ? { borderLeftColor: hoverBorderColor }\n            : {}),\n          ...(isUnderlineLike && isStandaloneTab && !disabled\n            ? { borderBottomColor: theme.palette.primary.main }\n            : {}),\n        },\n      }}\n    >\n      {leadingIcon ? (\n        <Box component=\"span\" sx={{ display: 'inline-flex' }}>\n          <Icon name={leadingIcon as any} size={isSm ? 16 : 20} />\n        </Box>\n      ) : null}\n\n      {labelTooltipProps && labelTooltipProps.title ? (\n        <Tooltip\n          {...labelTooltipProps}\n          title={labelTooltipProps.title}\n        >\n          {labelContent}\n        </Tooltip>\n      ) : (\n        labelContent\n      )}\n\n      {badge ? (\n        <Badge\n          label={badgeLabel}\n          color={badgeColor}\n          icon={badgeIcon}\n          iconType={badgeIconType}\n          type={badgeType}\n          size={size === 'md' ? 'sm' : 'xs'}\n        />\n      ) : null}\n\n      {dropdownMenu && (\n        <Box component=\"span\" sx={{ display: 'inline-flex', ml: 1 }}>\n          <Icon name=\"chevron-down\" size={12} />\n        </Box>\n      )}\n    </Box>\n  )\n\n  if (dropdownMenu && dropdownMenuProps) {\n    return (\n      <DropdownMenu {...dropdownMenuProps}>\n        {content}\n      </DropdownMenu>\n    )\n  }\n\n  return content\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation/TabPanel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface TabPanelProps {
+    children?: React.ReactNode;
+    /** Value of the currently selected tab */
+    value: string;
+    /** The key of this tab panel. If it matches the value, children will be shown. */
+    tabKey: string;
+    /** Optional class name */
+    className?: string;
+    /** Optional styles */
+    sx?: any;
+}
+/**
+ * TabPanel is a helper component to manage the display of tab content.
+ * It only renders its children if the current selected value matches its tabKey.
+ */
+export declare function TabPanel(props: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/navigation/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,kFAAkF;IAClF,MAAM,EAAE,MAAM,CAAA;IACd,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,EAAE,CAAC,EAAE,GAAG,CAAA;CACT;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkB5C"}

package/dist/components/navigation/TabPanel.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { toDomIdToken } from "./tabUtils.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+function TabPanel(props) {
+  const { children, value, tabKey, className, sx, ...other } = props;
+  const isSelected = value === tabKey;
+  const token = toDomIdToken(tabKey);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "tabpanel",
+      hidden: !isSelected,
+      id: `tabpanel-${token}`,
+      "aria-labelledby": `tab-${token}`,
+      className,
+      sx,
+      ...other,
+      children: isSelected ? children : null
+    }
+  );
+}
+export {
+  TabPanel
+};
+//# sourceMappingURL=TabPanel.js.map

package/dist/components/navigation/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../../../src/components/navigation/TabPanel.tsx"],"sourcesContent":["import * as React from 'react'\nimport Box from '@mui/material/Box'\nimport { toDomIdToken } from './tabUtils'\n\nexport interface TabPanelProps {\n  children?: React.ReactNode\n  /** Value of the currently selected tab */\n  value: string\n  /** The key of this tab panel. If it matches the value, children will be shown. */\n  tabKey: string\n  /** Optional class name */\n  className?: string\n  /** Optional styles */\n  sx?: any\n}\n\n/**\n * TabPanel is a helper component to manage the display of tab content.\n * It only renders its children if the current selected value matches its tabKey.\n */\nexport function TabPanel(props: TabPanelProps) {\n  const { children, value, tabKey, className, sx, ...other } = props\n  const isSelected = value === tabKey\n  const token = toDomIdToken(tabKey)\n\n  return (\n    <Box\n      role=\"tabpanel\"\n      hidden={!isSelected}\n      id={`tabpanel-${token}`}\n      aria-labelledby={`tab-${token}`}\n      className={className}\n      sx={sx}\n      {...other}\n    >\n      {isSelected ? children : null}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAoBO,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,UAAU,OAAO,QAAQ,WAAW,IAAI,GAAG,UAAU;AAC7D,QAAM,aAAa,UAAU;AAC7B,QAAM,QAAQ,aAAa,MAAM;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,CAAC;AAAA,MACT,IAAI,YAAY,KAAK;AAAA,MACrB,mBAAiB,OAAO,KAAK;AAAA,MAC7B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,uBAAa,WAAW;AAAA,IAAA;AAAA,EAAA;AAG/B;"}

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,14 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem, } from './Breadcrumbs';
+export { HorizontalTabs } from './HorizontalTabs';
+export type { HorizontalTabsProps, HorizontalTabItem, HorizontalTabsType, } from './HorizontalTabs';
+export { TabButton } from './TabButton';
+export type { TabButtonProps, TabButtonType } from './TabButton';
+export { TabPanel } from './TabPanel';
+export type { TabPanelProps } from './TabPanel';
+export { SlideoutMenu } from './SlideoutMenu';
+export type { SlideoutMenuProps, FeaturedIconProps as SlideoutMenuFeaturedIconProps, HeaderBadgeProps as SlideoutMenuHeaderBadgeProps, BackgroundOverlayProps as SlideoutMenuBackgroundOverlayProps, HorizontalTabsType as SlideoutMenuHorizontalTabsType, } from './SlideoutMenu';
+export type { FeaturedIconColor as SlideoutMenuFeaturedIconColor, FeaturedIconSize as SlideoutMenuFeaturedIconSize, FeaturedIconTheme as SlideoutMenuFeaturedIconTheme, } from '../FeaturedIcon';
+export { SlideoutMenuHeader } from './SlideoutMenuHeader';
+export type { SlideoutMenuHeaderProps, SlideoutMenuHeaderBreakpoint, SlideoutMenuHeaderLeadingBadge, } from './SlideoutMenuHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,gBAAgB,EAChB,cAAc,GACf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EACV,iBAAiB,EACjB,iBAAiB,IAAI,6BAA6B,EAClD,gBAAgB,IAAI,4BAA4B,EAChD,sBAAsB,IAAI,kCAAkC,EAC5D,kBAAkB,IAAI,8BAA8B,GACrD,MAAM,gBAAgB,CAAA;AAEvB,YAAY,EACV,iBAAiB,IAAI,6BAA6B,EAClD,gBAAgB,IAAI,4BAA4B,EAChD,iBAAiB,IAAI,6BAA6B,GACnD,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EACV,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,GAC/B,MAAM,sBAAsB,CAAA"}

package/dist/components/navigation/tabUtils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert an arbitrary tab key into a DOM-id-safe token.
+ * HTML id must not contain ASCII whitespace.
+ */
+export declare function toDomIdToken(raw: string): string;
+//# sourceMappingURL=tabUtils.d.ts.map

package/dist/components/navigation/tabUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabUtils.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/tabUtils.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMhD"}

package/dist/components/navigation/tabUtils.js

@@ -0,0 +1,7 @@
+function toDomIdToken(raw) {
+  return String(raw).trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-_.:]/g, "-");
+}
+export {
+  toDomIdToken
+};
+//# sourceMappingURL=tabUtils.js.map

package/dist/components/navigation/tabUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabUtils.js","sources":["../../../src/components/navigation/tabUtils.ts"],"sourcesContent":["// src/components/zenith/navigation/tabUtils.ts\n// Shared helpers for Tabs/TabPanel a11y attributes.\n\n/**\n * Convert an arbitrary tab key into a DOM-id-safe token.\n * HTML id must not contain ASCII whitespace.\n */\nexport function toDomIdToken(raw: string): string {\n  return String(raw)\n    .trim()\n    .toLowerCase()\n    .replace(/\\s+/g, '-')\n    .replace(/[^a-z0-9\\-_.:]/g, '-')\n}\n"],"names":[],"mappings":"AAOO,SAAS,aAAa,KAAqB;AAChD,SAAO,OAAO,GAAG,EACd,KAAA,EACA,YAAA,EACA,QAAQ,QAAQ,GAAG,EACnB,QAAQ,mBAAmB,GAAG;AACnC;"}

package/dist/components/product/ProductBadges.d.ts

@@ -0,0 +1,58 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import { BadgeProps } from '../badge/Badge';
+import { PopperProps } from '@mui/material/Popper';
+/**
+ * ProductBadges component
+ *
+ * Reusable component to display a series of product badges.
+ * Based on Zenith Design System ProductBadges subcomponent.
+ *
+ * Features:
+ * - Displays badges in a flex row with wrapping
+ * - Supports maxLines truncation with overflow badge in popover
+ * - Supports tooltips for individual badges
+ * - Supports custom badge types (badgeColor, pillColor, pillOutline)
+ */
+import * as React from 'react';
+export interface ProductBadgeItem extends BadgeProps {
+    /**
+     * Whether to show tooltip for this badge
+     */
+    showTooltip?: boolean;
+    /**
+     * Tooltip label (shown when showTooltip is true)
+     */
+    tooltipLabel?: string;
+}
+export interface ProductBadgesProps {
+    /**
+     * Array of badges to display, or custom ReactNode
+     */
+    badges: React.ReactNode | BadgeProps[] | ProductBadgeItem[];
+    /**
+     * Badge color (applied to all badges if not specified per badge)
+     * @default 'primary'
+     */
+    color?: BadgeProps['color'];
+    /**
+     * Badge type (applied to all badges if not specified per badge)
+     * @default 'pillColor'
+     */
+    type?: 'badgeColor' | 'pillColor' | 'pillOutline';
+    /**
+     * Maximum number of lines before truncating
+     * When truncated, an overflow badge appears showing remaining badges in a popover
+     */
+    maxLines?: number;
+    /**
+     * Popper props for the overflow popover
+     */
+    popperProps?: Omit<PopperProps, 'open'>;
+    /**
+     * Custom sx styles
+     */
+    sx?: SxProps<Theme>;
+}
+export declare const ProductBadges: React.ForwardRefExoticComponent<ProductBadgesProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductBadges;
+//# sourceMappingURL=ProductBadges.d.ts.map

package/dist/components/product/ProductBadges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductBadges.d.ts","sourceRoot":"","sources":["../../../src/components/product/ProductBadges.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAE3D;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAE3B;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,WAAW,GAAG,aAAa,CAAA;IAEjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB;AAED,eAAO,MAAM,aAAa,2FA6IzB,CAAA;AAED,eAAe,aAAa,CAAA"}