@veracity/vui 5.4.0-alpha.452398.2610161016 → 5.4.0-alpha.452398.2610190944

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/sidemenuV2/sidemenuItemV2.d.ts.map +1 -1
  2. package/dist/sidemenuV2/sidemenuItemV2.js +4 -2
  3. package/dist/sidemenuV2/sidemenuItemV2.js.map +1 -1
  4. package/dist/sidemenuV2/sidemenuV2.js +4 -2
  5. package/dist/sidemenuV2/sidemenuV2.js.map +1 -1
  6. package/dist/sidemenuV2/theme.js +5 -2
  7. package/dist/sidemenuV2/theme.js.map +1 -1
  8. package/dist/theme/components.d.ts +1 -0
  9. package/dist/theme/defaultTheme.d.ts +1 -0
  10. package/package.json +1 -1
package/dist/sidemenuV2/sidemenuItemV2.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"mappings":";;;;;cAqFa,gBAoOP,oBAAoB"}
1
+ {"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"mappings":";;;;;cAqFa,gBAsOP,oBAAoB"}
package/dist/sidemenuV2/sidemenuItemV2.js CHANGED
@@ -124,7 +124,8 @@ const SidemenuItemV2 = vui((props, ref) => {
124
124
  size: computedStates.buttonSize,
125
125
  h: computedStates.buttonSize === "lg" ? 40 : 36,
126
126
  iconSize: computedStates.iconSize,
127
- variant: "tertiaryBrand",
127
+ variant: "tertiary",
128
+ intent: "brand",
128
129
  onClick: handleClick,
129
130
  disabled: computedStates.isDisabled,
130
131
  role: "button",
@@ -145,7 +146,8 @@ const SidemenuItemV2 = vui((props, ref) => {
145
146
  return {
146
147
  "aria-label": isExpanded ? "Collapse" : "Expand",
147
148
  className: "vui-sidemenu-item-expand",
148
- variant: "tertiaryBrand",
149
+ variant: "tertiary",
150
+ intent: "brand",
149
151
  icon: isExpanded ? "falChevronUp" : "falChevronDown",
150
152
  size: "sm",
151
153
  pl: "4px",
package/dist/sidemenuV2/sidemenuItemV2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenuItemV2.js","names":["colors"],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\n\nimport { useEffect, useMemo, useCallback } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SidemenuItemV2Props } from './sidemenuV2.types'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { omitThemingProps, styled, th, vui } from '../core'\nimport Popover from '../popover'\nimport { colors } from '../theme'\nimport Tooltip from '../tooltip'\nimport { cs, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport SidemenuItemContent from './SidemenuItemContent'\nimport useSidemenuItem from './useSidemenuItem'\n\nexport const PopoverHovered = styled.div<{ hoverColor: string }>`\n &:hover .vui-sidemenu-item-popover .vui-button.vui-button {\n background: ${p => th.color(p.hoverColor)};\n }\n &:hover div:last-child .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {\n background: ${p => th.color(p.hoverColor)};\n }\n`\n\n// SidemenuPopover component extracted from inline Popover logic\nconst SidemenuPopover = ({\n isDark,\n className,\n buttonStyles,\n isExactlyActive,\n icon,\n title,\n isMenuExpanded,\n children,\n}: {\n isDark: boolean\n className?: string\n buttonStyles: any\n isExactlyActive: boolean\n icon?: any\n title: string\n isMenuExpanded: boolean\n children: React.ReactNode\n}) => (\n <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n {({ isOpen }: { isOpen: boolean }) => (\n <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>\n <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n <Button\n {...buttonStyles}\n borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}\n isActive={isExactlyActive}\n className={cs('focusAsBorder')}\n >\n <SidemenuItemContent\n icon={icon}\n iconSize={buttonStyles.iconSize}\n title={title}\n isMenuExpanded={isMenuExpanded}\n />\n </Button>\n </Popover.Trigger>\n <Popover.Content elevation=\"none\" className={cs('vui-sidemenu-item-content', className)}>\n <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n <Button\n {...buttonStyles}\n borderLeftColor={'transparent!important'}\n minW={'240px'}\n isActive={isOpen && isExactlyActive}\n className={cs('focusAsBorder')}\n >\n <SidemenuItemContent title={title} isInPopover={true} />\n </Button>\n {children}\n </Box>\n </Popover.Content>\n </PopoverHovered>\n )}\n </Popover>\n)\n\n/** A menu item. */\nexport const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {\n const {\n children,\n className,\n disabled = false,\n icon,\n isActive = false,\n isExpanded = true,\n itemId,\n level = 0,\n onBottom = false,\n onClick,\n onCollapse,\n onExpand,\n title,\n ...rest\n } = omitThemingProps(props)\n\n // Use consistent itemId generation - prioritize provided itemId, then use utility function\n const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`\n\n const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)\n\n // Use the isActive prop directly - parent should handle exact path matching\n const isExactlyActive = isActive\n\n useEffect(() => {\n // Only call onExpand/onCollapse if the main menu is expanded\n // This prevents child items from expanding the main menu when it's collapsed\n if (isMenuExpanded) {\n if (isSubmenuOpen) onExpand?.()\n if (!isSubmenuOpen) onCollapse?.()\n }\n }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])\n\n // Memoized computed values for better performance\n const computedStates = useMemo(() => {\n const hasChildren = !!children\n const isSubmenuCollapsed = hasChildren && !isSubmenuOpen\n // Only allow submenu expansion when main menu is expanded\n const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded\n const shouldShowExpandButton = hasChildren && isMenuExpanded\n const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)\n const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)\n\n const states = {\n hasChildren,\n hasChildrenCollapsed: isSubmenuCollapsed,\n hasChildrenExpanded: isSubmenuExpanded,\n shouldShowExpandButton,\n buttonSize,\n iconSize,\n isDisabled: disabled,\n shouldShowBorder: !hasChildren || isSubmenuOpen,\n }\n\n return states\n }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])\n\n // Memoized theme values to prevent recalculation\n const themeValues = useMemo(\n () => ({\n activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',\n }),\n [isDark],\n )\n\n // Optimized stable callback\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (!computedStates.isDisabled) {\n const targetTag = event.target as HTMLElement\n if (\n (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&\n typeof window !== 'undefined' &&\n (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)\n ) {\n const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')\n window.open(url, '_blank', 'noopener,noreferrer')\n } else {\n event?.stopPropagation?.()\n onClick?.()\n }\n }\n toggleSubmenu?.()\n },\n [onClick, computedStates.isDisabled],\n )\n\n // Memoized button styles - Major performance improvement\n const buttonStyles = useMemo(\n () => ({\n // Get base item styles from theme\n ...(styles && 'item' in styles && styles.item ? styles.item : {}),\n\n // Apply button theme styles from SideMenuV2 theme (replaces removed menuLight/menuDark variants)\n ...(styles && 'button' in styles && styles.button ? styles.button : {}),\n\n // Dynamic border color based on active state\n borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',\n\n // Animation properties (enhanced from theme)\n transitionProperty: 'background-color, border-color, color, transform, opacity',\n\n // Button specific properties\n size: computedStates.buttonSize,\n h: computedStates.buttonSize === 'lg' ? 40 : 36,\n iconSize: computedStates.iconSize,\n variant: 'tertiaryBrand', // Use base variant, theme overrides applied above\n\n // Event handlers\n onClick: handleClick,\n disabled: computedStates.isDisabled,\n\n // Accessibility\n role: 'button',\n tabIndex: computedStates.isDisabled ? -1 : 0,\n 'aria-disabled': computedStates.isDisabled,\n 'aria-pressed': isExactlyActive,\n\n // Merge custom props\n ...rest,\n }),\n [\n // Dependencies grouped logically - simplified since computedStates contains most values\n styles,\n computedStates,\n isExactlyActive,\n themeValues,\n handleClick,\n rest,\n ],\n )\n\n // Memoized expand/collapse button properties\n const expandButtonProps = useMemo(() => {\n const isExpanded = isSubmenuOpen\n const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'\n const ariaLabel = isExpanded ? 'Collapse' : 'Expand'\n\n return {\n 'aria-label': ariaLabel,\n className: 'vui-sidemenu-item-expand',\n variant: 'tertiaryBrand', // Use base variant, styling from parent\n icon: chevronIcon,\n size: 'sm' as const,\n pl: '4px',\n pr: '16px',\n ml: 'auto',\n h: '100%',\n border: 'none',\n bg: 'transparent',\n hoverBg: 'transparent',\n activeBg: 'transparent',\n }\n }, [isSubmenuOpen])\n\n // Helper: Render collapsed popover\n const renderPopover = () => (\n <SidemenuPopover\n isDark={isDark}\n className={className}\n buttonStyles={buttonStyles}\n isExactlyActive={isExactlyActive}\n icon={icon}\n title={title}\n isMenuExpanded={isMenuExpanded}\n >\n {children ? children : undefined}\n </SidemenuPopover>\n )\n\n // Helper: Render expanded button\n const renderButton = () => {\n if (level === 0 && !isMenuExpanded) {\n return (\n <Tooltip text={title} placement=\"right\" offset={[0, -200]}>\n <Button\n className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n {...buttonStyles}\n isActive={isExactlyActive}\n >\n <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />\n {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n </Button>\n </Tooltip>\n )\n }\n\n return (\n <Button\n className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n {...buttonStyles}\n isActive={isExactlyActive}\n title={!isMenuExpanded ? title : undefined}\n >\n <SidemenuItemContent\n icon={icon}\n iconSize={buttonStyles.iconSize}\n title={title}\n isMenuExpanded={isMenuExpanded}\n badge={props.badge}\n badgeLinkUrl={props.badgeLinkUrl}\n />\n {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n {/* Expand/Collapse button */}\n </Button>\n )\n // No leftover return, handled above\n }\n\n // Helper: Render expanded children\n const renderChildren = () => (\n <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n {children}\n </Box>\n )\n\n const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)\n const shouldShowChildren = computedStates.hasChildrenExpanded\n\n return (\n <Box flexDirection=\"column\" ref={ref} w=\"100%\" mt={onBottom ? 'auto' : 0} id={computedItemId}>\n {shouldShowPopover && renderPopover()}\n {!shouldShowPopover && renderButton()}\n {shouldShowChildren && renderChildren()}\n </Box>\n )\n}) as VuiComponent<'div', SidemenuItemV2Props>\n\nSidemenuItemV2.displayName = 'SidemenuItemV2'\n\nexport default SidemenuItemV2\n"],"mappings":"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"}
1
+ {"version":3,"file":"sidemenuItemV2.js","names":["colors"],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\n\nimport { useEffect, useMemo, useCallback } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SidemenuItemV2Props } from './sidemenuV2.types'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { omitThemingProps, styled, th, vui } from '../core'\nimport Popover from '../popover'\nimport { colors } from '../theme'\nimport Tooltip from '../tooltip'\nimport { cs, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport SidemenuItemContent from './SidemenuItemContent'\nimport useSidemenuItem from './useSidemenuItem'\n\nexport const PopoverHovered = styled.div<{ hoverColor: string }>`\n &:hover .vui-sidemenu-item-popover .vui-button.vui-button {\n background: ${p => th.color(p.hoverColor)};\n }\n &:hover div:last-child .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {\n background: ${p => th.color(p.hoverColor)};\n }\n`\n\n// SidemenuPopover component extracted from inline Popover logic\nconst SidemenuPopover = ({\n isDark,\n className,\n buttonStyles,\n isExactlyActive,\n icon,\n title,\n isMenuExpanded,\n children,\n}: {\n isDark: boolean\n className?: string\n buttonStyles: any\n isExactlyActive: boolean\n icon?: any\n title: string\n isMenuExpanded: boolean\n children: React.ReactNode\n}) => (\n <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n {({ isOpen }: { isOpen: boolean }) => (\n <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>\n <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n <Button\n {...buttonStyles}\n borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}\n isActive={isExactlyActive}\n className={cs('focusAsBorder')}\n >\n <SidemenuItemContent\n icon={icon}\n iconSize={buttonStyles.iconSize}\n title={title}\n isMenuExpanded={isMenuExpanded}\n />\n </Button>\n </Popover.Trigger>\n <Popover.Content elevation=\"none\" className={cs('vui-sidemenu-item-content', className)}>\n <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n <Button\n {...buttonStyles}\n borderLeftColor={'transparent!important'}\n minW={'240px'}\n isActive={isOpen && isExactlyActive}\n className={cs('focusAsBorder')}\n >\n <SidemenuItemContent title={title} isInPopover={true} />\n </Button>\n {children}\n </Box>\n </Popover.Content>\n </PopoverHovered>\n )}\n </Popover>\n)\n\n/** A menu item. */\nexport const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {\n const {\n children,\n className,\n disabled = false,\n icon,\n isActive = false,\n isExpanded = true,\n itemId,\n level = 0,\n onBottom = false,\n onClick,\n onCollapse,\n onExpand,\n title,\n ...rest\n } = omitThemingProps(props)\n\n // Use consistent itemId generation - prioritize provided itemId, then use utility function\n const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`\n\n const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)\n\n // Use the isActive prop directly - parent should handle exact path matching\n const isExactlyActive = isActive\n\n useEffect(() => {\n // Only call onExpand/onCollapse if the main menu is expanded\n // This prevents child items from expanding the main menu when it's collapsed\n if (isMenuExpanded) {\n if (isSubmenuOpen) onExpand?.()\n if (!isSubmenuOpen) onCollapse?.()\n }\n }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])\n\n // Memoized computed values for better performance\n const computedStates = useMemo(() => {\n const hasChildren = !!children\n const isSubmenuCollapsed = hasChildren && !isSubmenuOpen\n // Only allow submenu expansion when main menu is expanded\n const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded\n const shouldShowExpandButton = hasChildren && isMenuExpanded\n const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)\n const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)\n\n const states = {\n hasChildren,\n hasChildrenCollapsed: isSubmenuCollapsed,\n hasChildrenExpanded: isSubmenuExpanded,\n shouldShowExpandButton,\n buttonSize,\n iconSize,\n isDisabled: disabled,\n shouldShowBorder: !hasChildren || isSubmenuOpen,\n }\n\n return states\n }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])\n\n // Memoized theme values to prevent recalculation\n const themeValues = useMemo(\n () => ({\n activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',\n }),\n [isDark],\n )\n\n // Optimized stable callback\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (!computedStates.isDisabled) {\n const targetTag = event.target as HTMLElement\n if (\n (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&\n typeof window !== 'undefined' &&\n (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)\n ) {\n const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')\n window.open(url, '_blank', 'noopener,noreferrer')\n } else {\n event?.stopPropagation?.()\n onClick?.()\n }\n }\n toggleSubmenu?.()\n },\n [onClick, computedStates.isDisabled],\n )\n\n // Memoized button styles - Major performance improvement\n const buttonStyles = useMemo(\n () => ({\n // Get base item styles from theme\n ...(styles && 'item' in styles && styles.item ? styles.item : {}),\n\n // Apply button theme styles from SideMenuV2 theme (replaces removed menuLight/menuDark variants)\n ...(styles && 'button' in styles && styles.button ? styles.button : {}),\n\n // Dynamic border color based on active state\n borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',\n\n // Animation properties (enhanced from theme)\n transitionProperty: 'background-color, border-color, color, transform, opacity',\n\n // Button specific properties\n size: computedStates.buttonSize,\n h: computedStates.buttonSize === 'lg' ? 40 : 36,\n iconSize: computedStates.iconSize,\n variant: 'tertiary', // Use base variant, theme overrides applied above\n intent: 'brand',\n\n // Event handlers\n onClick: handleClick,\n disabled: computedStates.isDisabled,\n\n // Accessibility\n role: 'button',\n tabIndex: computedStates.isDisabled ? -1 : 0,\n 'aria-disabled': computedStates.isDisabled,\n 'aria-pressed': isExactlyActive,\n\n // Merge custom props\n ...rest,\n }),\n [\n // Dependencies grouped logically - simplified since computedStates contains most values\n styles,\n computedStates,\n isExactlyActive,\n themeValues,\n handleClick,\n rest,\n ],\n )\n\n // Memoized expand/collapse button properties\n const expandButtonProps = useMemo(() => {\n const isExpanded = isSubmenuOpen\n const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'\n const ariaLabel = isExpanded ? 'Collapse' : 'Expand'\n\n return {\n 'aria-label': ariaLabel,\n className: 'vui-sidemenu-item-expand',\n variant: 'tertiary', // Use base variant, styling from parent\n intent: 'brand',\n icon: chevronIcon,\n size: 'sm' as const,\n pl: '4px',\n pr: '16px',\n ml: 'auto',\n h: '100%',\n border: 'none',\n bg: 'transparent',\n hoverBg: 'transparent',\n activeBg: 'transparent',\n }\n }, [isSubmenuOpen])\n\n // Helper: Render collapsed popover\n const renderPopover = () => (\n <SidemenuPopover\n isDark={isDark}\n className={className}\n buttonStyles={buttonStyles}\n isExactlyActive={isExactlyActive}\n icon={icon}\n title={title}\n isMenuExpanded={isMenuExpanded}\n >\n {children ? children : undefined}\n </SidemenuPopover>\n )\n\n // Helper: Render expanded button\n const renderButton = () => {\n if (level === 0 && !isMenuExpanded) {\n return (\n <Tooltip text={title} placement=\"right\" offset={[0, -200]}>\n <Button\n className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n {...buttonStyles}\n isActive={isExactlyActive}\n >\n <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />\n {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n </Button>\n </Tooltip>\n )\n }\n\n return (\n <Button\n className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n {...buttonStyles}\n isActive={isExactlyActive}\n title={!isMenuExpanded ? title : undefined}\n >\n <SidemenuItemContent\n icon={icon}\n iconSize={buttonStyles.iconSize}\n title={title}\n isMenuExpanded={isMenuExpanded}\n badge={props.badge}\n badgeLinkUrl={props.badgeLinkUrl}\n />\n {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n {/* Expand/Collapse button */}\n </Button>\n )\n // No leftover return, handled above\n }\n\n // Helper: Render expanded children\n const renderChildren = () => (\n <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n {children}\n </Box>\n )\n\n const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)\n const shouldShowChildren = computedStates.hasChildrenExpanded\n\n return (\n <Box flexDirection=\"column\" ref={ref} w=\"100%\" mt={onBottom ? 'auto' : 0} id={computedItemId}>\n {shouldShowPopover && renderPopover()}\n {!shouldShowPopover && renderButton()}\n {shouldShowChildren && renderChildren()}\n </Box>\n )\n}) as VuiComponent<'div', SidemenuItemV2Props>\n\nSidemenuItemV2.displayName = 'SidemenuItemV2'\n\nexport default SidemenuItemV2\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAa,iBAAiB,OAAO,GAA2B;;mBAE9C,MAAK,GAAG,MAAM,EAAE,UAAU,EAAE;;;mBAG5B,MAAK,GAAG,MAAM,EAAE,UAAU,EAAE;;;AAK9C,MAAM,mBAAmB,EACvB,QACA,WACA,cACA,iBACA,MACA,OACA,gBACA,eAWA,oBAAC,SAAD;CAAS,QAAQ,CAAC,cAAoC,CAAC;CAAG,WAAU;CAAc,SAAQ;YACtF,EAAE,aACF,qBAAC,gBAAD;EAAgB,YAAY,SAASA,eAAO,QAAQ,OAAOA,eAAO,QAAQ;YAA1E,CACE,oBAAC,QAAQ,SAAT;GAAiB,IAAI;GAAK,WAAW,GAAG,6BAA6B,SAAS;aAC5E,oBAAC,QAAD;IACE,GAAI;IACJ,YAAY,aAAa,SAAS,mBAAmB;IACrD,UAAU;IACV,WAAW,GAAG,eAAe;cAE7B,oBAAC,qBAAD;KACQ;KACN,UAAU,aAAa;KAChB;KACS;IACjB;GACK;EACO,IACjB,oBAAC,QAAQ,SAAT;GAAiB,WAAU;GAAO,WAAW,GAAG,6BAA6B,SAAS;aACpF,qBAAC,KAAD;IAAK,eAAc;IAAS,gBAAe;IAAQ,GAAE;cAArD,CACE,oBAAC,QAAD;KACE,GAAI;KACJ,iBAAiB;KACjB,MAAM;KACN,UAAU,UAAU;KACpB,WAAW,GAAG,eAAe;eAE7B,oBAAC,qBAAD;MAA4B;MAAO,aAAa;KAAO;IACjD,IACP,QACE;;EACU,EACH;;AAEX;;AAIX,MAAa,iBAAiB,KAAoC,OAAO,QAAQ;CAC/E,MAAM,EACJ,UACA,WACA,WAAW,OACX,MACA,WAAW,OACX,aAAa,MACb,QACA,QAAQ,GACR,WAAW,OACX,SACA,YACA,UACA,OACA,GAAG,SACD,iBAAiB,KAAK;CAG1B,MAAM,iBAAiB,UAAU,mBAAmB,OAAO,KAAK,KAAK,QAAQ,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC;CAEnH,MAAM,EAAE,QAAQ,gBAAgB,QAAQ,MAAM,eAAe,kBAAkB,gBAAgB,cAAc;CAG7G,MAAM,kBAAkB;CAExB,gBAAgB;EAGd,IAAI,gBAAgB;GAClB,IAAI,eAAe,WAAW;GAC9B,IAAI,CAAC,eAAe,aAAa;EACnC;CACF,GAAG;EAAC;EAAe;EAAU;EAAY;CAAc,CAAC;CAGxD,MAAM,iBAAiB,cAAc;EACnC,MAAM,cAAc,CAAC,CAAC;EAmBtB,OAAO;GAVL;GACA,sBATyB,eAAe,CAAC;GAUzC,qBARwB,eAAe,iBAAiB;GASxD,wBAR6B,eAAe;GAS5C,YARiB,QAAQ,IAAK,OAAkB;GAShD,UARe,QAAQ,IAAK,OAAkB;GAS9C,YAAY;GACZ,kBAAkB,CAAC,eAAe;EAGxB;CACd,GAAG;EAAC;EAAU;EAAe;EAAgB;EAAU;EAAM;CAAK,CAAC;CAGnE,MAAM,cAAc,eACX,EACL,aAAa,SAAS,mBAAmB,eAC3C,IACA,CAAC,MAAM,CACT;CAGA,MAAM,cAAc,aACjB,UAAsB;EACrB,IAAI,CAAC,eAAe,YAAY;GAC9B,MAAM,YAAY,MAAM;GACxB,KACG,UAAU,UAAU,SAAS,aAAa,KAAK,UAAU,UAAU,SAAS,SAAS,MACtF,OAAO,WAAW,gBACjB,UAAU,eAAe,QAAQ,QAAQ,WAAW,QAAQ,OAC7D;IACA,MAAM,MAAM,KAAK,UAAU,eAAe,QAAQ,QAAQ,WAAW,QAAQ,QAAQ,EAAE;IACvF,OAAO,KAAK,KAAK,UAAU,qBAAqB;GAClD,OAAO;IACL,OAAO,kBAAkB;IACzB,UAAU;GACZ;EACF;EACA,gBAAgB;CAClB,GACA,CAAC,SAAS,eAAe,UAAU,CACrC;CAGA,MAAM,eAAe,eACZ;EAEL,GAAI,UAAU,UAAU,UAAU,OAAO,OAAO,OAAO,OAAO,CAAC;EAG/D,GAAI,UAAU,YAAY,UAAU,OAAO,SAAS,OAAO,SAAS,CAAC;EAGrE,iBAAiB,kBAAkB,YAAY,cAAc;EAG7D,oBAAoB;EAGpB,MAAM,eAAe;EACrB,GAAG,eAAe,eAAe,OAAO,KAAK;EAC7C,UAAU,eAAe;EACzB,SAAS;EACT,QAAQ;EAGR,SAAS;EACT,UAAU,eAAe;EAGzB,MAAM;EACN,UAAU,eAAe,aAAa,KAAK;EAC3C,iBAAiB,eAAe;EAChC,gBAAgB;EAGhB,GAAG;CACL,IACA;EAEE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAGA,MAAM,oBAAoB,cAAc;EACtC,MAAM,aAAa;EAInB,OAAO;GACL,cAHgB,aAAa,aAAa;GAI1C,WAAW;GACX,SAAS;GACT,QAAQ;GACR,MARkB,aAAa,iBAAiB;GAShD,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,QAAQ;GACR,IAAI;GACJ,SAAS;GACT,UAAU;EACZ;CACF,GAAG,CAAC,aAAa,CAAC;CAGlB,MAAM,sBACJ,oBAAC,iBAAD;EACU;EACG;EACG;EACG;EACX;EACC;EACS;YAEf,WAAW,WAAW;CACR;CAInB,MAAM,qBAAqB;EACzB,IAAI,UAAU,KAAK,CAAC,gBAClB,OACE,oBAAC,SAAD;GAAS,MAAM;GAAO,WAAU;GAAQ,QAAQ,CAAC,GAAG,IAAI;aACtD,qBAAC,QAAD;IACE,WAAW,GAAG,mCAAmC,mBAAmB,6BAA6B,SAAS;IAC1G,GAAI;IACJ,UAAU;cAHZ;KAKE,oBAAC,qBAAD;MAA2B;MAAM,UAAU,aAAa;KAAW;KAClE,kBAAkB,eAAe,0BAA0B,oBAAC,QAAD,EAAQ,GAAI,kBAAoB;KAAG;IACzF;;EACD;EAIb,OACE,qBAAC,QAAD;GACE,WAAW,GAAG,mCAAmC,mBAAmB,6BAA6B,SAAS;GAC1G,GAAI;GACJ,UAAU;GACV,OAAO,CAAC,iBAAiB,QAAQ;aAJnC;IAME,oBAAC,qBAAD;KACQ;KACN,UAAU,aAAa;KAChB;KACS;KAChB,OAAO,MAAM;KACb,cAAc,MAAM;IACrB;IACA,kBAAkB,eAAe,0BAA0B,oBAAC,QAAD,EAAQ,GAAI,kBAAoB;IAAG;GAEzF;;CAGZ;CAGA,MAAM,uBACJ,oBAAC,KAAD;EAAK,eAAc;EAAS,gBAAe;EAAQ,GAAE;EAClD;CACE;CAGP,MAAM,oBAAoB,QAAQ,CAAC,kBAAkB,UAAU,KAAK,CAAC,CAAC,QAAQ;CAC9E,MAAM,qBAAqB,eAAe;CAE1C,OACE,qBAAC,KAAD;EAAK,eAAc;EAAc;EAAK,GAAE;EAAO,IAAI,WAAW,SAAS;EAAG,IAAI;YAA9E;GACG,qBAAqB,cAAc;GACnC,CAAC,qBAAqB,aAAa;GACnC,sBAAsB,eAAe;EACnC;;AAET,CAAC;AAED,eAAe,cAAc"}
package/dist/sidemenuV2/sidemenuV2.js CHANGED
@@ -75,7 +75,8 @@ const SidemenuInner = vui((props, ref) => {
75
75
  menuWidth: conditions.isMenuExpanded ? width : 52,
76
76
  toggleArrowDirection: conditions.isMenuExpanded ? "Left" : "Right",
77
77
  toggleButtonJustification: conditions.isMenuExpanded ? "flex-end" : "center",
78
- toggleButtonVariant: styles.toggleButton?.variant || (conditions.isDark ? "tertiaryLight" : "tertiaryDark"),
78
+ toggleButtonVariant: styles.toggleButton?.variant || "tertiary",
79
+ toggleButtonIntent: styles.toggleButton?.intent || (conditions.isDark ? "contrast" : "brand"),
79
80
  toggleAriaLabel: conditions.isMenuExpanded ? "Collapse menu" : "Expand menu",
80
81
  toggleButtonPadding: toggleConfig.basePadding,
81
82
  toggleButtonVerticalPadding: conditions.isMenuExpanded ? toggleConfig.basePadding * toggleConfig.expandedPaddingMultiplier : toggleConfig.basePadding,
@@ -181,6 +182,7 @@ const SidemenuInner = vui((props, ref) => {
181
182
  py: `${computedValues.toggleButtonVerticalPadding}px`,
182
183
  size: "lg",
183
184
  variant: computedValues.toggleButtonVariant,
185
+ ...computedValues.toggleButtonVariant === "tertiary" ? { intent: computedValues.toggleButtonIntent } : {},
184
186
  w: computedValues.toggleButtonWidth,
185
187
  flexShrink: 0,
186
188
  transition: styles.toggleButton?.transition || "padding 0.2s ease-in-out, width 0.2s ease-in-out"
@@ -188,7 +190,7 @@ const SidemenuInner = vui((props, ref) => {
188
190
  computedValues.toggleAriaLabel,
189
191
  computedValues.toggleButtonJustification,
190
192
  computedValues.toggleButtonVariant,
191
- computedValues.toggleButtonPadding,
193
+ computedValues.toggleButtonIntent,
192
194
  computedValues.toggleButtonVerticalPadding,
193
195
  computedValues.toggleButtonHeight,
194
196
  computedValues.toggleButtonWidth,
package/dist/sidemenuV2/sidemenuV2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidemenuV2.js","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SidemenuItemV2Props, SidemenuV2Props } from './sidemenuV2.types'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, isActivePath, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuStateProvider, useSidemenuContext } from './context'\nimport SidemenuItemV2 from './sidemenuItemV2'\nimport SidemenuTopV2 from './sidemenuTopV2'\n\n// Re-export context provider and hook\nexport { SidemenuStateProvider, useSidemenuContext }\n\n/** A collapsible side menu for navigation. */\nexport const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {\n const {\n isExpandedInitial = true, // Uncontrolled: only affects initial state\n onExpandedChange, // Extract this to prevent it from being passed to DOM\n size,\n variant = 'light',\n children,\n className,\n items,\n shouldExpand,\n isSticky,\n width,\n top,\n onNavigate,\n ...restProps // Only DOM-safe props remain\n } = props\n\n return (\n <SidemenuStateProvider\n isExpandedInitial={isExpandedInitial}\n onExpandedChange={onExpandedChange}\n variant={variant}\n size={size}\n isDark={variant === 'dark'}\n >\n <SidemenuInner\n ref={ref}\n // Only pass DOM-safe props, not onExpandedChange\n className={className}\n items={items}\n shouldExpand={shouldExpand}\n isSticky={isSticky}\n size={size}\n variant={variant}\n width={width}\n top={top}\n onNavigate={onNavigate}\n {...restProps} // Remaining DOM-safe props\n >\n {children}\n </SidemenuInner>\n </SidemenuStateProvider>\n )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n Item: typeof SidemenuItemV2\n Top: typeof SidemenuTopV2\n}\n\n// Inner component that uses context\nconst SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {\n const {\n children,\n className,\n items,\n shouldExpand, // Callback: fine-grained control over expansion\n isSticky = false,\n size,\n variant = 'light',\n width = expandedWidth,\n top,\n onNavigate,\n ...rest\n } = props\n\n // Get state from context\n const context = useSidemenuContext()\n const { isMenuExpanded = false, setIsExpanded } = context || {}\n\n // Get styles configuration early\n const styles = useStyleConfig('SidemenuV2', props)\n\n // Memoized boolean conditions\n const conditions = useMemo(\n () => ({\n isDark: variant === 'dark',\n hasItems: !!items,\n shouldShowItems: !!items && items.length > 0,\n isMenuSticky: isSticky,\n isMenuExpanded: isMenuExpanded,\n }),\n [variant, items, isSticky, isMenuExpanded],\n )\n\n // Memoized computed values for styling and behavior\n const computedValues = useMemo(() => {\n // Get toggle button config from theme\n const toggleButtonTheme = styles.toggleButton || {}\n const currentSize = size || 'md' // Ensure we have a valid size\n const sizeStyles = (styles as any).sizes?.[currentSize] || {}\n const toggleButtonSizeTheme = sizeStyles.toggleButton || {}\n\n // Merge base theme with size-specific overrides\n const toggleConfig = {\n baseHeight: toggleButtonSizeTheme.baseHeight || toggleButtonTheme.baseHeight || 52,\n basePadding: toggleButtonSizeTheme.basePadding || toggleButtonTheme.basePadding || 2,\n expandedPaddingMultiplier: toggleButtonTheme.expandedPaddingMultiplier || 5,\n expandedWidth: toggleButtonTheme.expandedWidth || '52px',\n collapsedWidth: toggleButtonTheme.collapsedWidth || '100%',\n }\n\n // Helper function for consistent top position formatting\n const getMenuTopPosition = (isSticky: boolean, topValue?: any): string => {\n if (!isSticky) return 'auto'\n\n if (typeof topValue === 'string') return topValue\n if (typeof topValue === 'number') return `${topValue}px`\n\n return '0px' // fallback for undefined/null/complex types\n }\n\n return {\n menuWidth: conditions.isMenuExpanded ? width : collapsedWidth,\n toggleArrowDirection: conditions.isMenuExpanded ? 'Left' : 'Right',\n toggleButtonJustification: conditions.isMenuExpanded ? 'flex-end' : 'center',\n toggleButtonVariant: styles.toggleButton?.variant || (conditions.isDark ? 'tertiaryLight' : 'tertiaryDark'),\n toggleAriaLabel: conditions.isMenuExpanded ? 'Collapse menu' : 'Expand menu',\n toggleButtonPadding: toggleConfig.basePadding,\n toggleButtonVerticalPadding: conditions.isMenuExpanded\n ? toggleConfig.basePadding * toggleConfig.expandedPaddingMultiplier\n : toggleConfig.basePadding,\n toggleButtonHeight: toggleConfig.baseHeight,\n toggleButtonWidth: conditions.isMenuExpanded ? toggleConfig.expandedWidth : toggleConfig.collapsedWidth,\n menuPosition: conditions.isMenuSticky ? 'sticky' : 'static',\n menuTopPosition: getMenuTopPosition(conditions.isMenuSticky, top),\n }\n }, [conditions, width, top, styles, size])\n\n // Memoized icon name\n const toggleIcon = useMemo(\n () => `falArrow${computedValues.toggleArrowDirection}` as const,\n [computedValues.toggleArrowDirection],\n )\n\n // Stable callback for toggle (simplified)\n const handleToggle = useCallback(() => {\n const newExpandedState = !conditions.isMenuExpanded\n\n // Check if expansion should be allowed via callback\n if (shouldExpand && !shouldExpand('toggle', conditions.isMenuExpanded)) {\n return // Block the toggle\n }\n\n // Update state via context\n setIsExpanded?.(newExpandedState)\n }, [conditions.isMenuExpanded, shouldExpand, setIsExpanded])\n\n // Stable callback for item click - with expansion control\n const handleItemClick = useCallback(\n (item: SidemenuItemV2Props) => {\n // Early return for clarity\n if (shouldExpand && item?.path) {\n const shouldExpandOnNav = shouldExpand('navigation', conditions.isMenuExpanded)\n if (typeof shouldExpandOnNav === 'boolean' && shouldExpandOnNav !== conditions.isMenuExpanded) {\n setIsExpanded?.(shouldExpandOnNav)\n }\n }\n // Call item click handler\n item?.onClick?.()\n // Navigate if path exists\n if (item?.path) onNavigate?.(item.path)\n },\n [onNavigate, shouldExpand, conditions.isMenuExpanded, setIsExpanded],\n )\n\n // Create stable item click handlers\n const itemClickHandlers = useMemo(() => {\n return (items ?? []).reduce<Record<string, () => void>>((handlers, item, index) => {\n const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n handlers[itemId] = () => handleItemClick(item)\n return handlers\n }, {})\n }, [items, handleItemClick])\n\n // Memoized items rendering\n const renderedItems = useMemo(() => {\n if (!conditions.shouldShowItems) return children\n\n return items?.map?.((item: SidemenuItemV2Props, index: number) => {\n // Use consistent itemId generation that matches the component's logic\n const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n\n // Use explicit isActive prop if provided, otherwise calculate from path\n const calculatedIsActive = item.isActive !== undefined ? item.isActive : isActivePath(item?.path || '')\n\n return (\n <SidemenuItemV2\n isActive={calculatedIsActive}\n onBottom={item.onBottom}\n key={itemId}\n itemId={itemId}\n level={item.level || 0}\n {...item}\n onClick={itemClickHandlers[itemId]}\n />\n )\n })\n }, [conditions.shouldShowItems, conditions.isMenuExpanded, items, children, itemClickHandlers])\n\n // Memoized CSS class names\n const cssClasses = useMemo(\n () =>\n cs(\n 'vui-sidemenu',\n `vui-sidemenu--${variant}`,\n conditions.isMenuExpanded && 'vui-sidemenu--expanded',\n !conditions.isMenuExpanded && 'vui-sidemenu--collapsed',\n conditions.isDark && 'vui-sidemenu--dark',\n conditions.isMenuSticky && 'vui-sidemenu--sticky',\n className,\n ),\n [variant, conditions, className],\n )\n\n // Memoized container props\n const containerProps = useMemo(\n () => ({\n className: cssClasses,\n flexDirection: 'column' as const,\n overflowX: 'hidden' as const,\n position: computedValues.menuPosition,\n ref,\n top: computedValues.menuTopPosition,\n transitionDuration: 'normal' as const,\n transitionProperty: 'width' as const,\n w: computedValues.menuWidth,\n\n ...styles.container,\n ...rest,\n }),\n [\n cssClasses,\n computedValues.menuPosition,\n computedValues.menuTopPosition,\n computedValues.menuWidth,\n ref,\n styles.container,\n rest,\n ],\n )\n\n // Memoized toggle button props with complete dependencies\n const toggleButtonProps = useMemo(\n () => ({\n 'aria-expanded': conditions.isMenuExpanded,\n 'aria-label': computedValues.toggleAriaLabel,\n border: 0,\n borderRadius: 0,\n justifyContent: computedValues.toggleButtonJustification,\n minHeight: `${computedValues.toggleButtonHeight}px`,\n minWidth: 0,\n onClick: handleToggle,\n px: computedValues.toggleButtonPadding,\n py: `${computedValues.toggleButtonVerticalPadding}px`,\n size: 'lg' as const,\n variant: computedValues.toggleButtonVariant,\n w: computedValues.toggleButtonWidth,\n flexShrink: 0,\n transition: styles.toggleButton?.transition || 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n }),\n [\n computedValues.toggleAriaLabel,\n computedValues.toggleButtonJustification,\n computedValues.toggleButtonVariant,\n computedValues.toggleButtonPadding,\n computedValues.toggleButtonVerticalPadding,\n computedValues.toggleButtonHeight,\n computedValues.toggleButtonWidth,\n conditions.isMenuExpanded,\n handleToggle,\n styles.toggleButton,\n ],\n )\n\n return (\n <Box elevation=\"1\" {...containerProps}>\n <Box\n className=\"vui-sidemenu-content\"\n flexDirection=\"column\"\n flexGrow={1}\n justifyContent=\"flex-start\"\n minW={expandedWidth}\n overflowX=\"hidden\"\n overflowY=\"auto\"\n w=\"100%\"\n role=\"navigation\"\n aria-label=\"Main navigation\"\n >\n {renderedItems}\n </Box>\n\n <Box\n className=\"vui-sidemenu-bottom\"\n justifyContent={conditions.isMenuExpanded ? 'flex-end' : 'flex-start'}\n borderTop=\"1px solid sandstone.main\"\n >\n <Button key=\"sidemenu-toggle-button\" {...toggleButtonProps}>\n <Icon name={toggleIcon} size=\"sm\" aria-hidden=\"true\" />\n </Button>\n </Box>\n </Box>\n )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n Top: typeof SidemenuTopV2\n Item: typeof SidemenuItemV2\n}\n\nSidemenuV2.Item = SidemenuItemV2\nSidemenuV2.Top = SidemenuTopV2\nSidemenuV2.displayName = 'SidemenuV2'\n\nexport default SidemenuV2\n"],"mappings":"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"}
1
+ {"version":3,"file":"sidemenuV2.js","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SidemenuItemV2Props, SidemenuV2Props } from './sidemenuV2.types'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, isActivePath, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuStateProvider, useSidemenuContext } from './context'\nimport SidemenuItemV2 from './sidemenuItemV2'\nimport SidemenuTopV2 from './sidemenuTopV2'\n\n// Re-export context provider and hook\nexport { SidemenuStateProvider, useSidemenuContext }\n\n/** A collapsible side menu for navigation. */\nexport const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {\n const {\n isExpandedInitial = true, // Uncontrolled: only affects initial state\n onExpandedChange, // Extract this to prevent it from being passed to DOM\n size,\n variant = 'light',\n children,\n className,\n items,\n shouldExpand,\n isSticky,\n width,\n top,\n onNavigate,\n ...restProps // Only DOM-safe props remain\n } = props\n\n return (\n <SidemenuStateProvider\n isExpandedInitial={isExpandedInitial}\n onExpandedChange={onExpandedChange}\n variant={variant}\n size={size}\n isDark={variant === 'dark'}\n >\n <SidemenuInner\n ref={ref}\n // Only pass DOM-safe props, not onExpandedChange\n className={className}\n items={items}\n shouldExpand={shouldExpand}\n isSticky={isSticky}\n size={size}\n variant={variant}\n width={width}\n top={top}\n onNavigate={onNavigate}\n {...restProps} // Remaining DOM-safe props\n >\n {children}\n </SidemenuInner>\n </SidemenuStateProvider>\n )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n Item: typeof SidemenuItemV2\n Top: typeof SidemenuTopV2\n}\n\n// Inner component that uses context\nconst SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {\n const {\n children,\n className,\n items,\n shouldExpand, // Callback: fine-grained control over expansion\n isSticky = false,\n size,\n variant = 'light',\n width = expandedWidth,\n top,\n onNavigate,\n ...rest\n } = props\n\n // Get state from context\n const context = useSidemenuContext()\n const { isMenuExpanded = false, setIsExpanded } = context || {}\n\n // Get styles configuration early\n const styles = useStyleConfig('SidemenuV2', props)\n\n // Memoized boolean conditions\n const conditions = useMemo(\n () => ({\n isDark: variant === 'dark',\n hasItems: !!items,\n shouldShowItems: !!items && items.length > 0,\n isMenuSticky: isSticky,\n isMenuExpanded: isMenuExpanded,\n }),\n [variant, items, isSticky, isMenuExpanded],\n )\n\n // Memoized computed values for styling and behavior\n const computedValues = useMemo(() => {\n // Get toggle button config from theme\n const toggleButtonTheme = styles.toggleButton || {}\n const currentSize = size || 'md' // Ensure we have a valid size\n const sizeStyles = (styles as any).sizes?.[currentSize] || {}\n const toggleButtonSizeTheme = sizeStyles.toggleButton || {}\n\n // Merge base theme with size-specific overrides\n const toggleConfig = {\n baseHeight: toggleButtonSizeTheme.baseHeight || toggleButtonTheme.baseHeight || 52,\n basePadding: toggleButtonSizeTheme.basePadding || toggleButtonTheme.basePadding || 2,\n expandedPaddingMultiplier: toggleButtonTheme.expandedPaddingMultiplier || 5,\n expandedWidth: toggleButtonTheme.expandedWidth || '52px',\n collapsedWidth: toggleButtonTheme.collapsedWidth || '100%',\n }\n\n // Helper function for consistent top position formatting\n const getMenuTopPosition = (isSticky: boolean, topValue?: any): string => {\n if (!isSticky) return 'auto'\n\n if (typeof topValue === 'string') return topValue\n if (typeof topValue === 'number') return `${topValue}px`\n\n return '0px' // fallback for undefined/null/complex types\n }\n\n return {\n menuWidth: conditions.isMenuExpanded ? width : collapsedWidth,\n toggleArrowDirection: conditions.isMenuExpanded ? 'Left' : 'Right',\n toggleButtonJustification: conditions.isMenuExpanded ? 'flex-end' : 'center',\n toggleButtonVariant: styles.toggleButton?.variant || 'tertiary',\n toggleButtonIntent: styles.toggleButton?.intent || (conditions.isDark ? 'contrast' : 'brand'),\n toggleAriaLabel: conditions.isMenuExpanded ? 'Collapse menu' : 'Expand menu',\n toggleButtonPadding: toggleConfig.basePadding,\n toggleButtonVerticalPadding: conditions.isMenuExpanded\n ? toggleConfig.basePadding * toggleConfig.expandedPaddingMultiplier\n : toggleConfig.basePadding,\n toggleButtonHeight: toggleConfig.baseHeight,\n toggleButtonWidth: conditions.isMenuExpanded ? toggleConfig.expandedWidth : toggleConfig.collapsedWidth,\n menuPosition: conditions.isMenuSticky ? 'sticky' : 'static',\n menuTopPosition: getMenuTopPosition(conditions.isMenuSticky, top),\n }\n }, [conditions, width, top, styles, size])\n\n // Memoized icon name\n const toggleIcon = useMemo(\n () => `falArrow${computedValues.toggleArrowDirection}` as const,\n [computedValues.toggleArrowDirection],\n )\n\n // Stable callback for toggle (simplified)\n const handleToggle = useCallback(() => {\n const newExpandedState = !conditions.isMenuExpanded\n\n // Check if expansion should be allowed via callback\n if (shouldExpand && !shouldExpand('toggle', conditions.isMenuExpanded)) {\n return // Block the toggle\n }\n\n // Update state via context\n setIsExpanded?.(newExpandedState)\n }, [conditions.isMenuExpanded, shouldExpand, setIsExpanded])\n\n // Stable callback for item click - with expansion control\n const handleItemClick = useCallback(\n (item: SidemenuItemV2Props) => {\n // Early return for clarity\n if (shouldExpand && item?.path) {\n const shouldExpandOnNav = shouldExpand('navigation', conditions.isMenuExpanded)\n if (typeof shouldExpandOnNav === 'boolean' && shouldExpandOnNav !== conditions.isMenuExpanded) {\n setIsExpanded?.(shouldExpandOnNav)\n }\n }\n // Call item click handler\n item?.onClick?.()\n // Navigate if path exists\n if (item?.path) onNavigate?.(item.path)\n },\n [onNavigate, shouldExpand, conditions.isMenuExpanded, setIsExpanded],\n )\n\n // Create stable item click handlers\n const itemClickHandlers = useMemo(() => {\n return (items ?? []).reduce<Record<string, () => void>>((handlers, item, index) => {\n const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n handlers[itemId] = () => handleItemClick(item)\n return handlers\n }, {})\n }, [items, handleItemClick])\n\n // Memoized items rendering\n const renderedItems = useMemo(() => {\n if (!conditions.shouldShowItems) return children\n\n return items?.map?.((item: SidemenuItemV2Props, index: number) => {\n // Use consistent itemId generation that matches the component's logic\n const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n\n // Use explicit isActive prop if provided, otherwise calculate from path\n const calculatedIsActive = item.isActive !== undefined ? item.isActive : isActivePath(item?.path || '')\n\n return (\n <SidemenuItemV2\n isActive={calculatedIsActive}\n onBottom={item.onBottom}\n key={itemId}\n itemId={itemId}\n level={item.level || 0}\n {...item}\n onClick={itemClickHandlers[itemId]}\n />\n )\n })\n }, [conditions.shouldShowItems, conditions.isMenuExpanded, items, children, itemClickHandlers])\n\n // Memoized CSS class names\n const cssClasses = useMemo(\n () =>\n cs(\n 'vui-sidemenu',\n `vui-sidemenu--${variant}`,\n conditions.isMenuExpanded && 'vui-sidemenu--expanded',\n !conditions.isMenuExpanded && 'vui-sidemenu--collapsed',\n conditions.isDark && 'vui-sidemenu--dark',\n conditions.isMenuSticky && 'vui-sidemenu--sticky',\n className,\n ),\n [variant, conditions, className],\n )\n\n // Memoized container props\n const containerProps = useMemo(\n () => ({\n className: cssClasses,\n flexDirection: 'column' as const,\n overflowX: 'hidden' as const,\n position: computedValues.menuPosition,\n ref,\n top: computedValues.menuTopPosition,\n transitionDuration: 'normal' as const,\n transitionProperty: 'width' as const,\n w: computedValues.menuWidth,\n\n ...styles.container,\n ...rest,\n }),\n [\n cssClasses,\n computedValues.menuPosition,\n computedValues.menuTopPosition,\n computedValues.menuWidth,\n ref,\n styles.container,\n rest,\n ],\n )\n\n // Memoized toggle button props with complete dependencies\n const toggleButtonProps = useMemo(\n () => ({\n 'aria-expanded': conditions.isMenuExpanded,\n 'aria-label': computedValues.toggleAriaLabel,\n border: 0,\n borderRadius: 0,\n justifyContent: computedValues.toggleButtonJustification,\n minHeight: `${computedValues.toggleButtonHeight}px`,\n minWidth: 0,\n onClick: handleToggle,\n px: computedValues.toggleButtonPadding,\n py: `${computedValues.toggleButtonVerticalPadding}px`,\n size: 'lg' as const,\n variant: computedValues.toggleButtonVariant,\n ...(computedValues.toggleButtonVariant === 'tertiary' ? { intent: computedValues.toggleButtonIntent } : {}),\n w: computedValues.toggleButtonWidth,\n flexShrink: 0,\n transition: styles.toggleButton?.transition || 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n }),\n [\n computedValues.toggleAriaLabel,\n computedValues.toggleButtonJustification,\n computedValues.toggleButtonVariant,\n computedValues.toggleButtonIntent,\n computedValues.toggleButtonVerticalPadding,\n computedValues.toggleButtonHeight,\n computedValues.toggleButtonWidth,\n conditions.isMenuExpanded,\n handleToggle,\n styles.toggleButton,\n ],\n )\n\n return (\n <Box elevation=\"1\" {...containerProps}>\n <Box\n className=\"vui-sidemenu-content\"\n flexDirection=\"column\"\n flexGrow={1}\n justifyContent=\"flex-start\"\n minW={expandedWidth}\n overflowX=\"hidden\"\n overflowY=\"auto\"\n w=\"100%\"\n role=\"navigation\"\n aria-label=\"Main navigation\"\n >\n {renderedItems}\n </Box>\n\n <Box\n className=\"vui-sidemenu-bottom\"\n justifyContent={conditions.isMenuExpanded ? 'flex-end' : 'flex-start'}\n borderTop=\"1px solid sandstone.main\"\n >\n <Button key=\"sidemenu-toggle-button\" {...toggleButtonProps}>\n <Icon name={toggleIcon} size=\"sm\" aria-hidden=\"true\" />\n </Button>\n </Box>\n </Box>\n )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n Top: typeof SidemenuTopV2\n Item: typeof SidemenuItemV2\n}\n\nSidemenuV2.Item = SidemenuItemV2\nSidemenuV2.Top = SidemenuTopV2\nSidemenuV2.displayName = 'SidemenuV2'\n\nexport default SidemenuV2\n"],"mappings":"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"}
package/dist/sidemenuV2/theme.js CHANGED
@@ -78,7 +78,7 @@ const variants = {
78
78
  light: {
79
79
  container: { bg: "white" },
80
80
  toggleButton: {
81
- variant: "tertiaryBrand",
81
+ variant: "tertiary",
82
82
  hoverBg: "sandstone.95"
83
83
  },
84
84
  item: { color: "darkBlue.main" },
@@ -109,7 +109,10 @@ const variants = {
109
109
  borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
110
110
  bg: "darkBlue.main"
111
111
  },
112
- toggleButton: { variant: "tertiaryLight" },
112
+ toggleButton: {
113
+ variant: "tertiary",
114
+ intent: "contrast"
115
+ },
113
116
  item: { color: "white" },
114
117
  button: {
115
118
  bg: "#0F204B",
package/dist/sidemenuV2/theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","names":[],"sources":["../../src/sidemenuV2/theme.ts"],"sourcesContent":["const baseStyle = {\n container: {\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n transition: 'width 0.2s ease-in-out',\n },\n content: {\n flex: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n },\n bottom: {\n flexShrink: 0,\n borderTop: `1px solid transparent`,\n display: 'flex',\n alignItems: 'center',\n },\n item: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n flexDirection: 'row',\n w: '100%',\n border: 'none',\n cursor: 'pointer',\n transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\n textDecoration: 'none',\n outline: 'none',\n px: 0,\n borderLeft: '3px solid transparent',\n },\n sidemenuTop: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '12px 16px',\n minHeight: '64px',\n },\n // Add toggle button configuration\n toggleButton: {\n baseHeight: 52,\n basePadding: 2,\n expandedPaddingMultiplier: 5,\n collapsedWidth: '100%',\n expandedWidth: '52px',\n transition: 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n },\n}\n\nconst defaultProps = {\n size: 'md',\n variant: 'light',\n}\n\nconst parts = ['container', 'content', 'bottom', 'toggleButton', 'item', 'sidemenuTop', 'button']\n\nconst sizes = {\n sm: {\n toggleButton: {\n baseHeight: 44,\n basePadding: 1.5,\n },\n },\n md: {\n toggleButton: {\n baseHeight: 52,\n basePadding: 2,\n },\n },\n lg: {\n toggleButton: {\n baseHeight: 60,\n basePadding: 2.5,\n },\n },\n}\n\nconst variants = {\n light: {\n container: {\n bg: 'white',\n },\n toggleButton: {\n variant: 'tertiaryBrand',\n hoverBg: 'sandstone.95',\n },\n item: {\n color: 'darkBlue.main',\n },\n button: {\n bg: '#ffffff',\n hoverBg: '#D3EEF8',\n activeBg: '#E9F7FC',\n disabledBg: '#F8F7F7',\n borderColor: 'transparent',\n hoverBorderColor: '#003591',\n activeBorderColor: '#003591',\n color: '#1A1A19',\n hoverColor: '#1A1A19',\n activeColor: '#003591',\n disabledColor: '#908D89',\n disabledBorderColor: 'transparent',\n disabledOpacity: '1',\n },\n },\n dark: {\n container: {\n bg: 'darkBlue.main',\n color: 'white',\n boxShadow: '2px 0 4px rgba(0, 0, 0, 0.3)',\n },\n bottom: {\n borderTopColor: 'rgba(255, 255, 255, 0.1)',\n },\n sidemenuTop: {\n borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n bg: 'darkBlue.main',\n },\n toggleButton: {\n variant: 'tertiaryLight',\n },\n item: {\n color: 'white',\n },\n button: {\n bg: '#0F204B',\n hoverBg: '#003591',\n activeBg: '#0041B2',\n disabledBg: '#0F204B',\n borderColor: 'transparent',\n hoverBorderColor: '#91FFB4',\n activeBorderColor: '#91FFB4',\n color: '#FFFFFF',\n hoverColor: '#FFFFFF',\n activeColor: '#91FFBA',\n disabledColor: '#FFFFFF',\n disabledBorderColor: 'transparent',\n disabledOpacity: '1',\n },\n },\n}\n\nexport default {\n baseStyle,\n defaultProps,\n parts,\n sizes,\n variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,WAAW;EACT,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;CACd;CACA,SAAS;EACP,MAAM;EACN,WAAW;EACX,WAAW;CACb;CACA,QAAQ;EACN,YAAY;EACZ,WAAW;EACX,SAAS;EACT,YAAY;CACd;CACA,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,GAAG;EACH,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,IAAI;EACJ,YAAY;CACd;CACA,aAAa;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,WAAW;CACb;CAEA,cAAc;EACZ,YAAY;EACZ,aAAa;EACb,2BAA2B;EAC3B,gBAAgB;EAChB,eAAe;EACf,YAAY;CACd;AACF;AAEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;AACX;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAgB;CAAQ;CAAe;AAAQ;AAEhG,MAAM,QAAQ;CACZ,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;CACf,EACF;CACA,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;CACf,EACF;CACA,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;CACf,EACF;AACF;AAEA,MAAM,WAAW;CACf,OAAO;EACL,WAAW,EACT,IAAI,QACN;EACA,cAAc;GACZ,SAAS;GACT,SAAS;EACX;EACA,MAAM,EACJ,OAAO,gBACT;EACA,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,aAAa;GACb,kBAAkB;GAClB,mBAAmB;GACnB,OAAO;GACP,YAAY;GACZ,aAAa;GACb,eAAe;GACf,qBAAqB;GACrB,iBAAiB;EACnB;CACF;CACA,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,OAAO;GACP,WAAW;EACb;EACA,QAAQ,EACN,gBAAgB,2BAClB;EACA,aAAa;GACX,cAAc;GACd,IAAI;EACN;EACA,cAAc,EACZ,SAAS,gBACX;EACA,MAAM,EACJ,OAAO,QACT;EACA,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,aAAa;GACb,kBAAkB;GAClB,mBAAmB;GACnB,OAAO;GACP,YAAY;GACZ,aAAa;GACb,eAAe;GACf,qBAAqB;GACrB,iBAAiB;EACnB;CACF;AACF;AAEA,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}
1
+ {"version":3,"file":"theme.js","names":[],"sources":["../../src/sidemenuV2/theme.ts"],"sourcesContent":["const baseStyle = {\n container: {\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n transition: 'width 0.2s ease-in-out',\n },\n content: {\n flex: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n },\n bottom: {\n flexShrink: 0,\n borderTop: `1px solid transparent`,\n display: 'flex',\n alignItems: 'center',\n },\n item: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n flexDirection: 'row',\n w: '100%',\n border: 'none',\n cursor: 'pointer',\n transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\n textDecoration: 'none',\n outline: 'none',\n px: 0,\n borderLeft: '3px solid transparent',\n },\n sidemenuTop: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '12px 16px',\n minHeight: '64px',\n },\n // Add toggle button configuration\n toggleButton: {\n baseHeight: 52,\n basePadding: 2,\n expandedPaddingMultiplier: 5,\n collapsedWidth: '100%',\n expandedWidth: '52px',\n transition: 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n },\n}\n\nconst defaultProps = {\n size: 'md',\n variant: 'light',\n}\n\nconst parts = ['container', 'content', 'bottom', 'toggleButton', 'item', 'sidemenuTop', 'button']\n\nconst sizes = {\n sm: {\n toggleButton: {\n baseHeight: 44,\n basePadding: 1.5,\n },\n },\n md: {\n toggleButton: {\n baseHeight: 52,\n basePadding: 2,\n },\n },\n lg: {\n toggleButton: {\n baseHeight: 60,\n basePadding: 2.5,\n },\n },\n}\n\nconst variants = {\n light: {\n container: {\n bg: 'white',\n },\n toggleButton: {\n variant: 'tertiary',\n hoverBg: 'sandstone.95',\n },\n item: {\n color: 'darkBlue.main',\n },\n button: {\n bg: '#ffffff',\n hoverBg: '#D3EEF8',\n activeBg: '#E9F7FC',\n disabledBg: '#F8F7F7',\n borderColor: 'transparent',\n hoverBorderColor: '#003591',\n activeBorderColor: '#003591',\n color: '#1A1A19',\n hoverColor: '#1A1A19',\n activeColor: '#003591',\n disabledColor: '#908D89',\n disabledBorderColor: 'transparent',\n disabledOpacity: '1',\n },\n },\n dark: {\n container: {\n bg: 'darkBlue.main',\n color: 'white',\n boxShadow: '2px 0 4px rgba(0, 0, 0, 0.3)',\n },\n bottom: {\n borderTopColor: 'rgba(255, 255, 255, 0.1)',\n },\n sidemenuTop: {\n borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n bg: 'darkBlue.main',\n },\n toggleButton: {\n variant: 'tertiary',\n intent: 'contrast',\n },\n item: {\n color: 'white',\n },\n button: {\n bg: '#0F204B',\n hoverBg: '#003591',\n activeBg: '#0041B2',\n disabledBg: '#0F204B',\n borderColor: 'transparent',\n hoverBorderColor: '#91FFB4',\n activeBorderColor: '#91FFB4',\n color: '#FFFFFF',\n hoverColor: '#FFFFFF',\n activeColor: '#91FFBA',\n disabledColor: '#FFFFFF',\n disabledBorderColor: 'transparent',\n disabledOpacity: '1',\n },\n },\n}\n\nexport default {\n baseStyle,\n defaultProps,\n parts,\n sizes,\n variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,WAAW;EACT,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;CACd;CACA,SAAS;EACP,MAAM;EACN,WAAW;EACX,WAAW;CACb;CACA,QAAQ;EACN,YAAY;EACZ,WAAW;EACX,SAAS;EACT,YAAY;CACd;CACA,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,GAAG;EACH,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,IAAI;EACJ,YAAY;CACd;CACA,aAAa;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,WAAW;CACb;CAEA,cAAc;EACZ,YAAY;EACZ,aAAa;EACb,2BAA2B;EAC3B,gBAAgB;EAChB,eAAe;EACf,YAAY;CACd;AACF;AAEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;AACX;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAgB;CAAQ;CAAe;AAAQ;AAEhG,MAAM,QAAQ;CACZ,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;CACf,EACF;CACA,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;CACf,EACF;CACA,IAAI,EACF,cAAc;EACZ,YAAY;EACZ,aAAa;CACf,EACF;AACF;AAEA,MAAM,WAAW;CACf,OAAO;EACL,WAAW,EACT,IAAI,QACN;EACA,cAAc;GACZ,SAAS;GACT,SAAS;EACX;EACA,MAAM,EACJ,OAAO,gBACT;EACA,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,aAAa;GACb,kBAAkB;GAClB,mBAAmB;GACnB,OAAO;GACP,YAAY;GACZ,aAAa;GACb,eAAe;GACf,qBAAqB;GACrB,iBAAiB;EACnB;CACF;CACA,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,OAAO;GACP,WAAW;EACb;EACA,QAAQ,EACN,gBAAgB,2BAClB;EACA,aAAa;GACX,cAAc;GACd,IAAI;EACN;EACA,cAAc;GACZ,SAAS;GACT,QAAQ;EACV;EACA,MAAM,EACJ,OAAO,QACT;EACA,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,YAAY;GACZ,aAAa;GACb,kBAAkB;GAClB,mBAAmB;GACnB,OAAO;GACP,YAAY;GACZ,aAAa;GACb,eAAe;GACf,qBAAqB;GACrB,iBAAiB;EACnB;CACF;AACF;AAEA,oBAAe;CACb;CACA;CACA;CACA;CACA;AACF"}
package/dist/theme/components.d.ts CHANGED
@@ -2297,6 +2297,7 @@ declare const _default: {
2297
2297
  };
2298
2298
  toggleButton: {
2299
2299
  variant: string;
2300
+ intent: string;
2300
2301
  };
2301
2302
  item: {
2302
2303
  color: string;
package/dist/theme/defaultTheme.d.ts CHANGED
@@ -2839,6 +2839,7 @@ declare const defaultTheme: {
2839
2839
  };
2840
2840
  toggleButton: {
2841
2841
  variant: string;
2842
+ intent: string;
2842
2843
  };
2843
2844
  item: {
2844
2845
  color: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "5.4.0-alpha.452398.2610161016",
3
+ "version": "5.4.0-alpha.452398.2610190944",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "keywords": [
6
6
  "tanstack-intent"