dash-ui-kit 2.0.0-dev → 2.1.1

package/dist/react/components/input/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\n\nconst input = cva(\n  'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20',\n        'light-gray': 'focus:ring-[#6B7280]/20'\n      },\n      size: {\n        sm: 'dash-block-sm font-light',\n        md: 'dash-block-md font-light',\n        xl: 'dash-block-xl font-light'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]',\n        filled: 'border-none'\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        class: 'outline-green-500 focus:outline-green-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'light-gray',\n        class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus:ring-2'\n      },\n      // Outlined variant background\n      {\n        variant: 'outlined',\n        theme: 'light',\n        class: 'bg-white'\n      },\n      {\n        variant: 'outlined',\n        theme: 'dark',\n        class: 'bg-gray-800'\n      },\n      // Filled variant colors\n      {\n        variant: 'filled',\n        colorScheme: 'default',\n        class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'brand',\n        class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'error',\n        class: 'bg-red-500/15 focus:bg-red-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'success',\n        class: 'bg-green-500/15 focus:bg-green-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'light-gray',\n        class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n      },\n      // Filled variant with focus ring\n      {\n        variant: 'filled',\n        class: 'focus:ring-2'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      disabled: false\n    }\n  }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, Omit<InputVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  prefix?: string | React.ReactNode\n  prefixClassName?: string\n  /**\n   * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n   * Defaults to true.\n   */\n  showPasswordToggle?: boolean\n}\n\n/**\n * A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n *\n * @example\n * <Input\n *   type='password'\n *   placeholder='Enter password'\n *   colorScheme='brand'\n *   size='xl'\n *   prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n  className = '',\n  colorScheme,\n  size,\n  variant,\n  error = false,\n  success = false,\n  disabled = false,\n  type,\n  prefix,\n  prefixClassName = '',\n  showPasswordToggle = true,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [showPassword, setShowPassword] = useState(false)\n  const [prefixWidth, setPrefixWidth] = useState(0)\n  const prefixRef = useRef<HTMLDivElement>(null)\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const classes = input({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    disabled\n  }) + ' ' + className\n\n  const isPassword = type === 'password'\n  const inputType = isPassword && showPassword ? 'text' : type\n  const hasPrefix = Boolean(prefix)\n\n  const togglePasswordVisibility = (): void => {\n    setShowPassword(!showPassword)\n  }\n\n  // Measure actual prefix width\n  useEffect(() => {\n    if (prefixRef.current) {\n      const width = prefixRef.current.offsetWidth\n      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n      setPrefixWidth(width / 16 + 1.5)\n    }\n  }, [prefix])\n\n  // Render with prefix\n  if (hasPrefix) {\n    return (\n      <div className='relative'>\n        <div \n          ref={prefixRef}\n          className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n        >\n          {prefix}\n        </div>\n        <input\n          className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n          style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {isPassword && showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Render password input without prefix\n  if (isPassword) {\n    return (\n      <div className='relative'>\n        <input\n          className={classes + (showPasswordToggle ? ' pr-12' : '')}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Regular input without prefix\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      type={inputType}\n      {...props}\n    />\n  )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst input = cva(\n  'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20',\n        'light-gray': 'focus:ring-[#6B7280]/20'\n      },\n      size: {\n        sm: 'dash-block-sm font-light',\n        md: 'dash-block-md font-light',\n        xl: 'dash-block-xl font-light'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]',\n        filled: 'border-none'\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        class: 'outline-green-500 focus:outline-green-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'light-gray',\n        class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus:ring-2'\n      },\n      // Outlined variant background\n      {\n        variant: 'outlined',\n        theme: 'light',\n        class: 'bg-white'\n      },\n      {\n        variant: 'outlined',\n        theme: 'dark',\n        class: 'bg-gray-800'\n      },\n      // Filled variant colors\n      {\n        variant: 'filled',\n        colorScheme: 'default',\n        class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'brand',\n        class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'error',\n        class: 'bg-red-500/15 focus:bg-red-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'success',\n        class: 'bg-green-500/15 focus:bg-green-500/20'\n      },\n      {\n        variant: 'filled',\n        colorScheme: 'light-gray',\n        class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n      },\n      // Filled variant with focus ring\n      {\n        variant: 'filled',\n        class: 'focus:ring-2'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      disabled: false\n    }\n  }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, Omit<InputVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  prefix?: string | React.ReactNode\n  prefixClassName?: string\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'light-gray'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'light-gray'\n  /**\n   * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n   * Defaults to true.\n   */\n  showPasswordToggle?: boolean\n}\n\n/**\n * A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n *\n * @example\n * <Input\n *   type='password'\n *   placeholder='Enter password'\n *   colorScheme='brand'\n *   size='xl'\n *   prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n  className = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  variant,\n  error = false,\n  success = false,\n  disabled = false,\n  type,\n  prefix,\n  prefixClassName = '',\n  showPasswordToggle = true,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [showPassword, setShowPassword] = useState(false)\n  const [prefixWidth, setPrefixWidth] = useState(0)\n  const prefixRef = useRef<HTMLDivElement>(null)\n\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n  // Determine color scheme based on state\n  let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const classes = input({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    disabled\n  }) + ' ' + className\n\n  const isPassword = type === 'password'\n  const inputType = isPassword && showPassword ? 'text' : type\n  const hasPrefix = Boolean(prefix)\n\n  const togglePasswordVisibility = (): void => {\n    setShowPassword(!showPassword)\n  }\n\n  // Measure actual prefix width\n  useEffect(() => {\n    if (prefixRef.current) {\n      const width = prefixRef.current.offsetWidth\n      // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n      setPrefixWidth(width / 16 + 1.5)\n    }\n  }, [prefix])\n\n  // Render with prefix\n  if (hasPrefix) {\n    return (\n      <div className='relative'>\n        <div \n          ref={prefixRef}\n          className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n        >\n          {prefix}\n        </div>\n        <input\n          className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n          style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {isPassword && showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Render password input without prefix\n  if (isPassword) {\n    return (\n      <div className='relative'>\n        <input\n          className={classes + (showPasswordToggle ? ' pr-12' : '')}\n          disabled={disabled}\n          type={inputType}\n          {...props}\n        />\n        {showPasswordToggle && (\n          <button\n            type='button'\n            className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n            onClick={togglePasswordVisibility}\n            tabIndex={-1}\n          >\n            {showPassword\n              ? <EyeClosedIcon size={16} color='#0C1C33' />\n              : <EyeOpenIcon size={16} color='#0C1C33' />}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  // Regular input without prefix\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      type={inputType}\n      {...props}\n    />\n  )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","colorSchemeLight","colorSchemeDark","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","effectiveColorScheme","_b","useColorScheme","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}

package/dist/react/components/overlayMenu/index.cjs.js

@@ -10,6 +10,7 @@ var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
 var index = require('../icons/index.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 
 const overlayMenuTrigger = classVarianceAuthority.cva('w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] inline-flex items-center justify-between', {
   variants: {
@@ -269,11 +270,48 @@ const ChevronDownIcon = ({
  * @param position - Position object for context-menu variant
  * @param width - Custom width (default: 200px for context-menu)
  */
+const closeButtonAlignClasses = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end'
+};
+const OverlayMenuHeader = ({
+  headerClasses,
+  hasContent,
+  showCloseButton,
+  closeButtonAlign,
+  isContextMenu,
+  theme,
+  onClose,
+  children
+}) => {
+  const isCloseOnly = showCloseButton && !hasContent;
+  return jsxRuntime.jsxs("div", {
+    className: `${headerClasses} ${isCloseOnly ? closeButtonAlignClasses[closeButtonAlign] : ''} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
+    onClick: !showCloseButton && !isContextMenu ? onClose : undefined,
+    children: [hasContent && jsxRuntime.jsx("div", {
+      className: 'w-full flex-1',
+      children: children
+    }), showCloseButton && jsxRuntime.jsx("button", {
+      className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
+      onClick: onClose,
+      "aria-label": 'Close menu',
+      children: jsxRuntime.jsx(index.CrossIcon, {
+        size: 16,
+        color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
+      })
+    })]
+  });
+};
 const OverlayMenu = _a => {
+  var _b;
   var {
       className = '',
+      triggerClassName = '',
       contentClassName = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       error = false,
       success = false,
@@ -289,20 +327,24 @@ const OverlayMenu = _a => {
       placeholder = 'Menu',
       showItemBorders = true,
       variant = 'dropdown',
+      align = 'left',
+      wrapperClassName = '',
       headerContent,
       showCloseButton = false,
+      closeButtonAlign = 'right',
       position,
       width,
       onClose
     } = _a,
-    props = tslib.__rest(_a, ["className", "contentClassName", "colorScheme", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "headerContent", "showCloseButton", "position", "width", "onClose"]);
+    props = tslib.__rest(_a, ["className", "triggerClassName", "contentClassName", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "align", "wrapperClassName", "headerContent", "showCloseButton", "closeButtonAlign", "position", "width", "onClose"]);
   const {
     theme
   } = ThemeContext.useTheme();
   const [isOpen, setIsOpen] = React.useState(false);
   const triggerRef = React.useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const isContextMenu = variant === 'context-menu';
   // Handle Escape key
@@ -320,6 +362,11 @@ const OverlayMenu = _a => {
     setIsOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   };
+  const alignClasses = {
+    left: 'left-0',
+    center: 'left-1/2 -translate-x-1/2',
+    right: 'right-0'
+  };
   const triggerClasses = overlayMenuTrigger({
     theme,
     colorScheme: finalColorScheme,
@@ -366,11 +413,11 @@ const OverlayMenu = _a => {
     return styles;
   };
   return jsxRuntime.jsxs("div", {
-    className: isContextMenu ? '' : 'relative',
+    className: isContextMenu ? wrapperClassName : `relative ${wrapperClassName}`,
     children: [!isContextMenu && jsxRuntime.jsxs("button", Object.assign({
       ref: triggerRef,
       type: 'button',
-      className: triggerClasses,
+      className: `${triggerClasses} ${triggerClassName}`,
       onClick: () => !disabled && setIsOpen(!isOpen),
       disabled: disabled,
       name: name
@@ -389,31 +436,28 @@ const OverlayMenu = _a => {
         className: `${isContextMenu ? 'fixed' : 'fixed'} inset-0 z-40`,
         onClick: handleClose
       }), jsxRuntime.jsxs("div", {
-        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? 'top-0 left-0 right-0' : ''} overflow-y-auto ${contentClassName}`,
+        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? `top-0 ${alignClasses[align]}` : ''} overflow-y-auto ${contentClassName}`,
         style: Object.assign({
           maxHeight
         }, getPositionStyles()),
-        children: [(headerContent || overlayLabel) && jsxRuntime.jsxs("div", {
-          className: `${headerClasses} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
-          onClick: !showCloseButton && !isContextMenu ? handleClose : undefined,
-          children: [jsxRuntime.jsx("div", {
-            className: 'w-full flex-1',
-            children: headerContent || overlayLabel
-          }), (showCloseButton || isContextMenu && headerContent) && jsxRuntime.jsx("button", {
-            className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
-            onClick: handleClose,
-            "aria-label": 'Close menu',
-            children: jsxRuntime.jsx(index.CrossIcon, {
-              size: 16,
-              color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
-            })
-          })]
+        children: [(headerContent || overlayLabel || showCloseButton) && jsxRuntime.jsx(OverlayMenuHeader, {
+          headerClasses: headerClasses,
+          hasContent: !!(headerContent || overlayLabel),
+          showCloseButton: showCloseButton || isContextMenu && !!headerContent,
+          closeButtonAlign: closeButtonAlign,
+          isContextMenu: isContextMenu,
+          theme: theme,
+          onClose: handleClose,
+          children: headerContent || overlayLabel
         }), jsxRuntime.jsx("div", {
-          children: items.map((item, index) => jsxRuntime.jsx("div", {
-            className: `${itemClasses} ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''}`,
-            onClick: () => handleItemClick(item),
-            children: item.content
-          }, item.id))
+          children: items.map((item, index) => {
+            var _a;
+            return jsxRuntime.jsx("div", {
+              className: `${itemClasses} ${item.disabled ? 'opacity-50 !cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''} ${(_a = item.className) !== null && _a !== void 0 ? _a : ''}`,
+              onClick: () => handleItemClick(item),
+              children: item.content
+            }, item.id);
+          })
         })]
       })]
     })]

package/dist/react/components/overlayMenu/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/overlayMenu/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\n\nconst overlayMenuTrigger = cva(\n  'w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] inline-flex items-center justify-between',\n  {\n    variants: {\n      theme: {\n        light: 'text-dash-primary-dark-blue',\n        dark: 'text-white'\n      },\n      colorScheme: {\n        default: '',\n        brand: '',\n        error: '',\n        success: '',\n        gray: '',\n        lightGray: ''\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      border: {\n        true: 'outline outline-1 outline-offset-[-1px]',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      },\n      filled: {\n        false: '',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      {\n        colorScheme: 'default',\n        border: true,\n        class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'\n      },\n      {\n        colorScheme: 'brand',\n        border: true,\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        colorScheme: 'error',\n        border: true,\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        colorScheme: 'success',\n        border: true,\n        class: 'outline-green-500 focus:outline-green-500'\n      },\n      {\n        colorScheme: 'gray',\n        border: true,\n        theme: 'light',\n        class: 'outline-[rgba(12,28,51,0.20)] focus:outline-[rgba(12,28,51,0.35)]'\n      },\n      {\n        colorScheme: 'gray',\n        border: true,\n        theme: 'dark',\n        class: 'outline-gray-600/50 focus:outline-gray-500'\n      },\n      {\n        colorScheme: 'lightGray',\n        border: true,\n        theme: 'light',\n        class: 'outline-dash-primary-dark-blue/[0.05] focus:outline-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        border: true,\n        theme: 'dark',\n        class: 'outline-dash-primary-dark-blue/[0.05] focus:outline-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'gray',\n        border: false,\n        theme: 'light',\n        class: 'bg-[rgba(12,28,51,0.03)]'\n      },\n      {\n        colorScheme: 'gray',\n        border: false,\n        theme: 'dark',\n        class: 'bg-gray-700/20'\n      },\n      // New lightGray scheme using dash-primary-dark-blue with 3% base and 5% hover\n      {\n        colorScheme: 'lightGray',\n        border: false,\n        theme: 'light',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        border: false,\n        theme: 'dark',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        filled: true,\n        theme: 'light',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      // Default background when not filled\n      {\n        filled: false,\n        theme: 'light',\n        class: 'bg-white'\n      },\n      {\n        filled: false,\n        theme: 'dark',\n        class: 'bg-gray-800'\n      },\n      // Filled variants\n      {\n        colorScheme: 'default',\n        filled: true,\n        theme: 'light',\n        class: 'bg-white text-gray-900'\n      },\n      {\n        colorScheme: 'default',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-gray-700 text-white'\n      },\n      {\n        colorScheme: 'brand',\n        filled: true,\n        theme: 'light',\n        class: 'bg-blue-50 text-blue-700'\n      },\n      {\n        colorScheme: 'brand',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-blue-900/30 text-blue-300'\n      },\n      {\n        colorScheme: 'error',\n        filled: true,\n        theme: 'light',\n        class: 'bg-red-50 text-red-700'\n      },\n      {\n        colorScheme: 'error',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-red-500/20 text-red-400'\n      },\n      {\n        colorScheme: 'success',\n        filled: true,\n        theme: 'light',\n        class: 'bg-green-50 text-green-700'\n      },\n      {\n        colorScheme: 'success',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-green-500/20 text-green-400'\n      },\n      {\n        colorScheme: 'gray',\n        filled: true,\n        theme: 'light',\n        class: 'bg-gray-200 text-gray-800'\n      },\n      {\n        colorScheme: 'gray',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-gray-600 text-gray-200'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      border: true,\n      disabled: false,\n      filled: false\n    }\n  }\n)\n\nconst overlayContent = cva(\n  'absolute z-50 overflow-hidden',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-[rgba(12,28,51,0.05)]',\n        dark: 'bg-[rgba(255,255,255,0.15)] border border-[rgba(255,255,255,0.15)] backdrop-blur-[256px]'\n      },\n      size: {\n        sm: 'rounded-[0.625rem]',\n        md: 'rounded-[0.75rem]', \n        xl: 'rounded-[0.9375rem]'\n      },\n      variant: {\n        dropdown: 'min-w-full',\n        'context-menu': 'w-[200px]'\n      },\n      hasShadow: {\n        true: 'shadow-[0px_0px_75px_0px_rgba(0,0,0,0.15)]',\n        false: 'shadow-lg'\n      }\n    },\n    defaultVariants: {\n      variant: 'dropdown',\n      hasShadow: false\n    }\n  }\n)\n\nconst overlayHeader = cva(\n  'flex items-center justify-between border-b gap-2',\n  {\n    variants: {\n      theme: {\n        light: 'border-[rgba(12,28,51,0.05)]',\n        dark: 'border-[rgba(255,255,255,0.15)]'\n      },\n      size: {\n        sm: 'px-[0.875rem] py-[0.375rem]',\n        md: 'px-[1rem] py-[0.5rem]',\n        xl: 'px-[1.125rem] py-[0.5rem]'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      size: 'xl'\n    }\n  }\n)\n\nconst overlayItem = cva(\n  'relative flex cursor-pointer select-none items-center outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-none font-medium text-[0.75rem] leading-[1.416em]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] hover:bg-gray-50',\n        dark: 'text-white hover:bg-[rgba(255,255,255,0.1)]'\n      },\n      size: {\n        sm: 'px-[0.875rem] py-[0.625rem]',\n        md: 'px-[1rem] py-[0.6875rem]',\n        xl: 'px-[1.125rem] py-[0.75rem]'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      size: 'xl'\n    }\n  }\n)\n\n// Arrow icon\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    width='15'\n    height='15'\n    viewBox='0 0 15 15'\n    fill='none'\n    xmlns='http://www.w3.org/2000/svg'\n    className={className}\n  >\n    <path\n      d='m4.93179 5.43179c0.20081-0.20081 0.52632-0.20081 0.72713 0l2.34108 2.34108 2.34108-2.34108c0.20081-0.20081 0.52632-0.20081 0.72713 0s0.20081 0.52632 0 0.72713l-2.70455 2.70455c-0.20081 0.20081-0.52632 0.20081-0.72713 0l-2.70455-2.70455c-0.20081-0.20081-0.20081-0.52632 0-0.72713z'\n      fill='currentColor'\n      fillRule='evenodd'\n      clipRule='evenodd'\n    />\n  </svg>\n)\n\ntype OverlayMenuVariants = VariantProps<typeof overlayMenuTrigger>\n\nexport interface OverlayMenuItem {\n  id: string\n  content: React.ReactNode\n  onClick?: () => void\n  disabled?: boolean\n}\n\nexport interface OverlayMenuPosition {\n  top?: number\n  left?: number\n  right?: number\n  bottom?: number\n}\n\nexport interface OverlayMenuProps extends Omit<OverlayMenuVariants, 'theme' | 'disabled'> {\n  className?: string\n  contentClassName?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  filled?: boolean\n  items?: OverlayMenuItem[]\n  showArrow?: boolean\n  disabled?: boolean\n  name?: string\n  overlayLabel?: string\n  maxHeight?: string\n  triggerContent?: React.ReactNode\n  placeholder?: string\n  showItemBorders?: boolean\n  variant?: 'dropdown' | 'context-menu'\n  headerContent?: React.ReactNode\n  showCloseButton?: boolean\n  position?: OverlayMenuPosition\n  width?: string | number\n  onClose?: () => void\n}\n\n/**\n * Overlay menu component that opens above the trigger with overlay positioning.\n * Supports custom content items with onClick handlers.\n * \n * @param variant - 'dropdown' (default) or 'context-menu'\n * @param headerContent - Custom header content (for context-menu variant)\n * @param showCloseButton - Show close button in header\n * @param position - Position object for context-menu variant\n * @param width - Custom width (default: 200px for context-menu)\n */\nexport const OverlayMenu: React.FC<OverlayMenuProps> = ({\n  className = '',\n  contentClassName = '',\n  colorScheme,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  filled = false,\n  disabled = false,\n  items = [],\n  showArrow = true,\n  name,\n  overlayLabel,\n  maxHeight = '200px',\n  triggerContent,\n  placeholder = 'Menu',\n  showItemBorders = true,\n  variant = 'dropdown',\n  headerContent,\n  showCloseButton = false,\n  position,\n  width,\n  onClose,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [isOpen, setIsOpen] = useState(false)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const isContextMenu = variant === 'context-menu'\n\n  // Handle Escape key\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen])\n\n  const handleClose = () => {\n    setIsOpen(false)\n    onClose?.()\n  }\n\n  const triggerClasses = overlayMenuTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    filled,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = overlayContent({ \n    theme, \n    size, \n    variant,\n    hasShadow: isContextMenu \n  })\n  const headerClasses = overlayHeader({ theme, size })\n  const itemClasses = overlayItem({ theme, size })\n\n  const handleItemClick = (item: OverlayMenuItem) => {\n    if (!item.disabled && item.onClick) {\n      item.onClick()\n    }\n    handleClose()\n  }\n\n  // For context-menu variant, show menu immediately if position is provided\n  useEffect(() => {\n    if (isContextMenu && position) {\n      setIsOpen(true)\n    }\n  }, [isContextMenu, position])\n\n  // Calculate position styles for context-menu\n  const getPositionStyles = (): React.CSSProperties => {\n    if (!isContextMenu || !position) return {}\n    \n    const styles: React.CSSProperties = {}\n    if (position.top !== undefined) styles.top = position.top\n    if (position.left !== undefined) styles.left = position.left\n    if (position.right !== undefined) styles.right = position.right\n    if (position.bottom !== undefined) styles.bottom = position.bottom\n    if (width) styles.width = typeof width === 'number' ? `${width}px` : width\n    \n    return styles\n  }\n\n  return (\n    <div className={isContextMenu ? '' : 'relative'}>\n      {/* Trigger button - only for dropdown variant */}\n      {!isContextMenu && (\n        <button\n          ref={triggerRef}\n          type='button'\n          className={triggerClasses}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n          disabled={disabled}\n          name={name}\n          {...props}\n        >\n          <div className='w-full flex-1 text-left'>\n            {triggerContent || (\n              <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}>\n                {placeholder}\n              </span>\n            )}\n          </div>\n          {showArrow && (\n            <ChevronDownIcon \n              className={`transition-transform ${isOpen ? 'rotate-180' : ''} ${\n                size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'\n              }`} \n            />\n          )}\n        </button>\n      )}\n\n      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <div \n            className={`${isContextMenu ? 'fixed' : 'fixed'} inset-0 z-40`}\n            onClick={handleClose}\n          />\n\n          {/* Overlay content */}\n          <div\n            className={`${contentClasses} ${isContextMenu ? 'fixed' : ''} ${\n              !isContextMenu ? 'top-0 left-0 right-0' : ''\n            } overflow-y-auto ${contentClassName}`}\n            style={{ \n              maxHeight,\n              ...getPositionStyles()\n            }}\n          >\n            {/* Custom header for context-menu or overlayLabel for dropdown */}\n            {(headerContent || overlayLabel) && (\n              <div \n                className={`${headerClasses} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`}\n                onClick={!showCloseButton && !isContextMenu ? handleClose : undefined}\n              >\n                <div className='w-full flex-1'>\n                  {headerContent || overlayLabel}\n                </div>\n                {(showCloseButton || (isContextMenu && headerContent)) && (\n                  <button\n                    className='flex items-center cursor-pointer hover:opacity-70 transition-opacity'\n                    onClick={handleClose}\n                    aria-label='Close menu'\n                  >\n                    <CrossIcon \n                      size={16} \n                      color={theme === 'dark' ? '#FFFFFF' : '#0C1C33'}\n                    />\n                  </button>\n                )}\n              </div>\n            )}\n\n            {/* Menu items */}\n            <div>\n              {items.map((item, index) => (\n                <div\n                  key={item.id}\n                  className={`${itemClasses} ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${\n                    showItemBorders && index < items.length - 1 \n                      ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}`\n                      : ''\n                  }`}\n                  onClick={() => handleItemClick(item)}\n                >\n                  {item.content}\n                </div>\n              ))}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default OverlayMenu\n"],"names":["overlayMenuTrigger","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","gray","lightGray","size","sm","md","xl","border","true","false","disabled","filled","compoundVariants","class","defaultVariants","overlayContent","variant","dropdown","hasShadow","overlayHeader","overlayItem","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","OverlayMenu","_a","contentClassName","items","showArrow","name","overlayLabel","maxHeight","triggerContent","placeholder","showItemBorders","headerContent","showCloseButton","position","onClose","props","__rest","useTheme","isOpen","setIsOpen","useState","triggerRef","useRef","finalColorScheme","isContextMenu","useEffect","handleEscape","e","key","handleClose","document","addEventListener","removeEventListener","triggerClasses","contentClasses","headerClasses","itemClasses","handleItemClick","item","onClick","getPositionStyles","styles","top","undefined","left","right","bottom","_jsxs","children","Object","assign","ref","type","_Fragment","style","CrossIcon","color","map","index","length","content","id"],"mappings":";;;;;;;;;;;;;AAKA,MAAMA,kBAAkB,GAAGC,0BAAG,CAC5B,uJAAuJ,EACvJ;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,6BAA6B;AACpCC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,WAAW,EAAE;AACXC,MAAAA,OAAO,EAAE,EAAE;AACXC,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,OAAO,EAAE,EAAE;AACXC,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,SAAS,EAAE;KACZ;AACDC,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,eAAe;AACnBC,MAAAA,EAAE,EAAE,eAAe;AACnBC,MAAAA,EAAE,EAAE;KACL;AACDC,IAAAA,MAAM,EAAE;AACNC,MAAAA,IAAI,EAAE,yCAAyC;AAC/CC,MAAAA,KAAK,EAAE;KACR;AACDC,IAAAA,QAAQ,EAAE;AACRD,MAAAA,KAAK,EAAE,EAAE;AACTD,MAAAA,IAAI,EAAE;KACP;AACDG,IAAAA,MAAM,EAAE;AACNF,MAAAA,KAAK,EAAE,EAAE;AACTD,MAAAA,IAAI,EAAE;AACP;GACF;AACDI,EAAAA,gBAAgB,EAAE,CAChB;AACEhB,IAAAA,WAAW,EAAE,SAAS;AACtBW,IAAAA,MAAM,EAAE,IAAI;AACZM,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,OAAO;AACpBW,IAAAA,MAAM,EAAE,IAAI;AACZM,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,OAAO;AACpBW,IAAAA,MAAM,EAAE,IAAI;AACZM,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,SAAS;AACtBW,IAAAA,MAAM,EAAE,IAAI;AACZM,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,MAAM;AACnBW,IAAAA,MAAM,EAAE,IAAI;AACZd,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,MAAM;AACnBW,IAAAA,MAAM,EAAE,IAAI;AACZd,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,WAAW;AACxBW,IAAAA,MAAM,EAAE,IAAI;AACZd,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,WAAW;AACxBW,IAAAA,MAAM,EAAE,IAAI;AACZd,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,MAAM;AACnBW,IAAAA,MAAM,EAAE,KAAK;AACbd,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,MAAM;AACnBW,IAAAA,MAAM,EAAE,KAAK;AACbd,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEjB,IAAAA,WAAW,EAAE,WAAW;AACxBW,IAAAA,MAAM,EAAE,KAAK;AACbd,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,WAAW;AACxBW,IAAAA,MAAM,EAAE,KAAK;AACbd,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,WAAW;AACxBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,WAAW;AACxBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEF,IAAAA,MAAM,EAAE,KAAK;AACblB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEF,IAAAA,MAAM,EAAE,KAAK;AACblB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEjB,IAAAA,WAAW,EAAE,SAAS;AACtBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,SAAS;AACtBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,OAAO;AACpBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,OAAO;AACpBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,OAAO;AACpBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,OAAO;AACpBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,SAAS;AACtBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,SAAS;AACtBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,MAAM;AACnBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,OAAO;AACdoB,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEjB,IAAAA,WAAW,EAAE,MAAM;AACnBe,IAAAA,MAAM,EAAE,IAAI;AACZlB,IAAAA,KAAK,EAAE,MAAM;AACboB,IAAAA,KAAK,EAAE;AACR,GAAA,CACF;AACDC,EAAAA,eAAe,EAAE;AACfrB,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,WAAW,EAAE,SAAS;AACtBO,IAAAA,IAAI,EAAE,IAAI;AACVI,IAAAA,MAAM,EAAE,IAAI;AACZG,IAAAA,QAAQ,EAAE,KAAK;AACfC,IAAAA,MAAM,EAAE;AACT;AACF,CAAA,CACF;AAED,MAAMI,cAAc,GAAGxB,0BAAG,CACxB,+BAA+B,EAC/B;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,8CAA8C;AACrDC,MAAAA,IAAI,EAAE;KACP;AACDQ,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,oBAAoB;AACxBC,MAAAA,EAAE,EAAE,mBAAmB;AACvBC,MAAAA,EAAE,EAAE;KACL;AACDU,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE,YAAY;AACtB,MAAA,cAAc,EAAE;KACjB;AACDC,IAAAA,SAAS,EAAE;AACTV,MAAAA,IAAI,EAAE,4CAA4C;AAClDC,MAAAA,KAAK,EAAE;AACR;GACF;AACDK,EAAAA,eAAe,EAAE;AACfE,IAAAA,OAAO,EAAE,UAAU;AACnBE,IAAAA,SAAS,EAAE;AACZ;AACF,CAAA,CACF;AAED,MAAMC,aAAa,GAAG5B,0BAAG,CACvB,kDAAkD,EAClD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,8BAA8B;AACrCC,MAAAA,IAAI,EAAE;KACP;AACDQ,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,6BAA6B;AACjCC,MAAAA,EAAE,EAAE,uBAAuB;AAC3BC,MAAAA,EAAE,EAAE;AACL;GACF;AACDQ,EAAAA,eAAe,EAAE;AACfrB,IAAAA,KAAK,EAAE,OAAO;AACdU,IAAAA,IAAI,EAAE;AACP;AACF,CAAA,CACF;AAED,MAAMiB,WAAW,GAAG7B,0BAAG,CACrB,6LAA6L,EAC7L;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,iCAAiC;AACxCC,MAAAA,IAAI,EAAE;KACP;AACDQ,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,6BAA6B;AACjCC,MAAAA,EAAE,EAAE,0BAA0B;AAC9BC,MAAAA,EAAE,EAAE;AACL;GACF;AACDQ,EAAAA,eAAe,EAAE;AACfrB,IAAAA,KAAK,EAAE,OAAO;AACdU,IAAAA,IAAI,EAAE;AACP;AACF,CAAA,CACF;AAED;AACA,MAAMkB,eAAe,GAAqCA,CAAC;AAAEC,EAAAA;CAAW,KACtEC,cACE,CAAA,KAAA,EAAA;AAAAC,EAAAA,KAAK,EAAC,IAAI;AACVC,EAAAA,MAAM,EAAC,IAAI;AACXC,EAAAA,OAAO,EAAC,WAAW;AACnBC,EAAAA,IAAI,EAAC,MAAM;AACXC,EAAAA,KAAK,EAAC,4BAA4B;AAClCN,EAAAA,SAAS,EAAEA,SAAS;YAEpBC,cACE,CAAA,MAAA,EAAA;AAAAM,IAAAA,CAAC,EAAC,yRAAyR;AAC3RF,IAAAA,IAAI,EAAC,cAAc;AACnBG,IAAAA,QAAQ,EAAC,SAAS;AAClBC,IAAAA,QAAQ,EAAC;GAAS;AAEhB,CAAA,CACP;AA0CD;;;;;;;;;AASG;AACUC,MAAAA,WAAW,GAAgCC,EAyBvD,IAAI;EAzBmD,IAAA;AACtDX,MAAAA,SAAS,GAAG,EAAE;AACdY,MAAAA,gBAAgB,GAAG,EAAE;MACrBtC,WAAW;MACXO,IAAI;AACJJ,MAAAA,KAAK,GAAG,KAAK;AACbC,MAAAA,OAAO,GAAG,KAAK;AACfO,MAAAA,MAAM,GAAG,IAAI;AACbI,MAAAA,MAAM,GAAG,KAAK;AACdD,MAAAA,QAAQ,GAAG,KAAK;AAChByB,MAAAA,KAAK,GAAG,EAAE;AACVC,MAAAA,SAAS,GAAG,IAAI;MAChBC,IAAI;MACJC,YAAY;AACZC,MAAAA,SAAS,GAAG,OAAO;MACnBC,cAAc;AACdC,MAAAA,WAAW,GAAG,MAAM;AACpBC,MAAAA,eAAe,GAAG,IAAI;AACtB1B,MAAAA,OAAO,GAAG,UAAU;MACpB2B,aAAa;AACbC,MAAAA,eAAe,GAAG,KAAK;MACvBC,QAAQ;MACRrB,KAAK;AACLsB,MAAAA;AAAO,KAAA,GAAAb,EAER;IADIc,KAAK,GAAAC,YAAA,CAAAf,EAAA,EAxB8C,0SAyBvD,CADS;EAER,MAAM;AAAExC,IAAAA;GAAO,GAAGwD,qBAAQ,EAAE;EAC5B,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAC3C,EAAA,MAAMC,UAAU,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAElD;EACA,IAAIC,gBAAgB,GAAG3D,WAAW;AAClC,EAAA,IAAIG,KAAK,EAAEwD,gBAAgB,GAAG,OAAO,CAAA,KAChC,IAAIvD,OAAO,EAAEuD,gBAAgB,GAAG,SAAS;AAE9C,EAAA,MAAMC,aAAa,GAAGxC,OAAO,KAAK,cAAc;AAEhD;AACAyC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAI,CAACP,MAAM,EAAE;IAEb,MAAMQ,YAAY,GAAIC,CAAgB,IAAI;AACxC,MAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;AACtBC,QAAAA,WAAW,EAAE;AACf;KACD;AAEDC,IAAAA,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEL,YAAY,CAAC;IAClD,OAAO,MAAMI,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEN,YAAY,CAAC;AACpE,GAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEZ,MAAMW,WAAW,GAAGA,MAAK;IACvBV,SAAS,CAAC,KAAK,CAAC;AAChBL,IAAAA,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,MAAA,GAAA,MAAA,GAAAA,OAAO,EAAI;GACZ;EAED,MAAMmB,cAAc,GAAG3E,kBAAkB,CAAC;IACxCG,KAAK;AACLG,IAAAA,WAAW,EAAE2D,gBAAgB;IAC7BpD,IAAI;IACJI,MAAM;IACNI,MAAM;AACND,IAAAA;AACD,GAAA,CAAC,GAAG,GAAG,GAAGY,SAAS;EAEpB,MAAM4C,cAAc,GAAGnD,cAAc,CAAC;IACpCtB,KAAK;IACLU,IAAI;IACJa,OAAO;AACPE,IAAAA,SAAS,EAAEsC;AACZ,GAAA,CAAC;EACF,MAAMW,aAAa,GAAGhD,aAAa,CAAC;IAAE1B,KAAK;AAAEU,IAAAA;AAAM,GAAA,CAAC;EACpD,MAAMiE,WAAW,GAAGhD,WAAW,CAAC;IAAE3B,KAAK;AAAEU,IAAAA;AAAM,GAAA,CAAC;EAEhD,MAAMkE,eAAe,GAAIC,IAAqB,IAAI;IAChD,IAAI,CAACA,IAAI,CAAC5D,QAAQ,IAAI4D,IAAI,CAACC,OAAO,EAAE;MAClCD,IAAI,CAACC,OAAO,EAAE;AAChB;AACAV,IAAAA,WAAW,EAAE;GACd;AAED;AACAJ,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,aAAa,IAAIX,QAAQ,EAAE;MAC7BM,SAAS,CAAC,IAAI,CAAC;AACjB;AACF,GAAC,EAAE,CAACK,aAAa,EAAEX,QAAQ,CAAC,CAAC;AAE7B;EACA,MAAM2B,iBAAiB,GAAGA,MAA0B;IAClD,IAAI,CAAChB,aAAa,IAAI,CAACX,QAAQ,EAAE,OAAO,EAAE;IAE1C,MAAM4B,MAAM,GAAwB,EAAE;AACtC,IAAA,IAAI5B,QAAQ,CAAC6B,GAAG,KAAKC,SAAS,EAAEF,MAAM,CAACC,GAAG,GAAG7B,QAAQ,CAAC6B,GAAG;AACzD,IAAA,IAAI7B,QAAQ,CAAC+B,IAAI,KAAKD,SAAS,EAAEF,MAAM,CAACG,IAAI,GAAG/B,QAAQ,CAAC+B,IAAI;AAC5D,IAAA,IAAI/B,QAAQ,CAACgC,KAAK,KAAKF,SAAS,EAAEF,MAAM,CAACI,KAAK,GAAGhC,QAAQ,CAACgC,KAAK;AAC/D,IAAA,IAAIhC,QAAQ,CAACiC,MAAM,KAAKH,SAAS,EAAEF,MAAM,CAACK,MAAM,GAAGjC,QAAQ,CAACiC,MAAM;AAClE,IAAA,IAAItD,KAAK,EAAEiD,MAAM,CAACjD,KAAK,GAAG,OAAOA,KAAK,KAAK,QAAQ,GAAG,CAAA,EAAGA,KAAK,CAAA,EAAA,CAAI,GAAGA,KAAK;AAE1E,IAAA,OAAOiD,MAAM;GACd;EAED,OACEM,eAAK,CAAA,KAAA,EAAA;AAAAzD,IAAAA,SAAS,EAAEkC,aAAa,GAAG,EAAE,GAAG,UAAU;AAE5CwB,IAAAA,QAAA,EAAA,CAAA,CAACxB,aAAa,IACbuB,eACE,CAAA,QAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;AAAAC,MAAAA,GAAG,EAAE9B,UAAU;AACf+B,MAAAA,IAAI,EAAC,QAAQ;AACb9D,MAAAA,SAAS,EAAE2C,cAAc;MACzBM,OAAO,EAAEA,MAAM,CAAC7D,QAAQ,IAAIyC,SAAS,CAAC,CAACD,MAAM,CAAC;AAC9CxC,MAAAA,QAAQ,EAAEA,QAAQ;AAClB2B,MAAAA,IAAI,EAAEA;KAAI,EACNU,KAAK,EAAA;AAAAiC,MAAAA,QAAA,EAAA,CAETzD;AAAKD,QAAAA,SAAS,EAAC,yBAAyB;AAAA0D,QAAAA,QAAA,EACrCxC,cAAc,IACbjB,cAAM,CAAA,MAAA,EAAA;AAAAD,UAAAA,SAAS,EAAE7B,KAAK,KAAK,MAAM,GAAG,eAAe,GAAG,eAAe;AAClEuF,UAAAA,QAAA,EAAAvC;SACI;QAEL,EACLL,SAAS,IACRb,eAACF,eAAe,EAAA;AACdC,QAAAA,SAAS,EAAE,CAAA,qBAAA,EAAwB4B,MAAM,GAAG,YAAY,GAAG,EAAE,CAC3D/C,CAAAA,EAAAA,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,SAC9B,CAAA;AACA,OAAA,CACH;OAEJ,EAEA+C,MAAM,IACL6B,eAEE,CAAAM,mBAAA,EAAA;AAAAL,MAAAA,QAAA,EAAA,CAAAzD,cAAA,CAAA,KAAA,EAAA;AACED,QAAAA,SAAS,EAAE,CAAGkC,EAAAA,aAAa,GAAG,OAAO,GAAG,OAAO,CAAe,aAAA,CAAA;AAC9De,QAAAA,OAAO,EAAEV;QACT,EAGFkB,eAAA,CAAA,KAAA,EAAA;AACEzD,QAAAA,SAAS,EAAE,CAAG4C,EAAAA,cAAc,IAAIV,aAAa,GAAG,OAAO,GAAG,EAAE,CAC1D,CAAA,EAAA,CAACA,aAAa,GAAG,sBAAsB,GAAG,EAC5C,CAAA,iBAAA,EAAoBtB,gBAAgB,CAAE,CAAA;AACtCoD,QAAAA,KAAK,EAAAL,MAAA,CAAAC,MAAA,CAAA;AACH3C,UAAAA;AAAS,SAAA,EACNiC,iBAAiB,EAAE,CAAA;QAAAQ,QAAA,EAAA,CAIvB,CAACrC,aAAa,IAAIL,YAAY,KAC7ByC;AACEzD,UAAAA,SAAS,EAAE,CAAA,EAAG6C,aAAa,CAAA,CAAA,EAAI,CAACvB,eAAe,IAAI,CAACY,aAAa,GAAG,gBAAgB,GAAG,EAAE,CAAE,CAAA;UAC3Fe,OAAO,EAAE,CAAC3B,eAAe,IAAI,CAACY,aAAa,GAAGK,WAAW,GAAGc,SAAS;AAErEK,UAAAA,QAAA,EAAA,CAAAzD,cAAA,CAAA,KAAA,EAAA;AAAKD,YAAAA,SAAS,EAAC,eAAe;YAC3B0D,QAAA,EAAArC,aAAa,IAAIL;YACd,EACL,CAACM,eAAe,IAAKY,aAAa,IAAIb,aAAc,KACnDpB,cAAA,CAAA,QAAA,EAAA;AACED,YAAAA,SAAS,EAAC,sEAAsE;AAChFiD,YAAAA,OAAO,EAAEV,WAAW;0BACT,YAAY;AAAAmB,YAAAA,QAAA,EAEvBzD,cAAC,CAAAgE,eAAS;AACRpF,cAAAA,IAAI,EAAE,EAAE;AACRqF,cAAAA,KAAK,EAAE/F,KAAK,KAAK,MAAM,GAAG,SAAS,GAAG;;AAEjC,WAAA,CACV;UAEJ,EAGD8B,cACG,CAAA,KAAA,EAAA;AAAAyD,UAAAA,QAAA,EAAA7C,KAAK,CAACsD,GAAG,CAAC,CAACnB,IAAI,EAAEoB,KAAK,KACrBnE,cAEE,CAAA,KAAA,EAAA;AAAAD,YAAAA,SAAS,EAAE,CAAA,EAAG8C,WAAW,CAAA,CAAA,EAAIE,IAAI,CAAC5D,QAAQ,GAAG,+BAA+B,GAAG,EAAE,CAC/EgC,CAAAA,EAAAA,eAAe,IAAIgD,KAAK,GAAGvD,KAAK,CAACwD,MAAM,GAAG,CAAC,GACvC,YAAYlG,KAAK,KAAK,MAAM,GAAG,iCAAiC,GAAG,8BAA8B,CAAE,CAAA,GACnG,EACN,CAAE,CAAA;AACF8E,YAAAA,OAAO,EAAEA,MAAMF,eAAe,CAACC,IAAI,CAAC;YAEnCU,QAAA,EAAAV,IAAI,CAACsB;AARD,WAAA,EAAAtB,IAAI,CAACuB,EAAE,CAUf;AAAC,SAAA,CACE;AACF,OAAA,CAAA;AAAA,KAAA,CAET;AAAA,GAAA,CACG;AAEV;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/overlayMenu/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst overlayMenuTrigger = cva(\n  'w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] inline-flex items-center justify-between',\n  {\n    variants: {\n      theme: {\n        light: 'text-dash-primary-dark-blue',\n        dark: 'text-white'\n      },\n      colorScheme: {\n        default: '',\n        brand: '',\n        error: '',\n        success: '',\n        gray: '',\n        lightGray: ''\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      border: {\n        true: 'outline outline-1 outline-offset-[-1px]',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      },\n      filled: {\n        false: '',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      {\n        colorScheme: 'default',\n        border: true,\n        class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'\n      },\n      {\n        colorScheme: 'brand',\n        border: true,\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        colorScheme: 'error',\n        border: true,\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        colorScheme: 'success',\n        border: true,\n        class: 'outline-green-500 focus:outline-green-500'\n      },\n      {\n        colorScheme: 'gray',\n        border: true,\n        theme: 'light',\n        class: 'outline-[rgba(12,28,51,0.20)] focus:outline-[rgba(12,28,51,0.35)]'\n      },\n      {\n        colorScheme: 'gray',\n        border: true,\n        theme: 'dark',\n        class: 'outline-gray-600/50 focus:outline-gray-500'\n      },\n      {\n        colorScheme: 'lightGray',\n        border: true,\n        theme: 'light',\n        class: 'outline-dash-primary-dark-blue/[0.05] focus:outline-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        border: true,\n        theme: 'dark',\n        class: 'outline-dash-primary-dark-blue/[0.05] focus:outline-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'gray',\n        border: false,\n        theme: 'light',\n        class: 'bg-[rgba(12,28,51,0.03)]'\n      },\n      {\n        colorScheme: 'gray',\n        border: false,\n        theme: 'dark',\n        class: 'bg-gray-700/20'\n      },\n      // New lightGray scheme using dash-primary-dark-blue with 3% base and 5% hover\n      {\n        colorScheme: 'lightGray',\n        border: false,\n        theme: 'light',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        border: false,\n        theme: 'dark',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        filled: true,\n        theme: 'light',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      {\n        colorScheme: 'lightGray',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'\n      },\n      // Default background when not filled\n      {\n        filled: false,\n        theme: 'light',\n        class: 'bg-white'\n      },\n      {\n        filled: false,\n        theme: 'dark',\n        class: 'bg-gray-800'\n      },\n      // Filled variants\n      {\n        colorScheme: 'default',\n        filled: true,\n        theme: 'light',\n        class: 'bg-white text-gray-900'\n      },\n      {\n        colorScheme: 'default',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-gray-700 text-white'\n      },\n      {\n        colorScheme: 'brand',\n        filled: true,\n        theme: 'light',\n        class: 'bg-blue-50 text-blue-700'\n      },\n      {\n        colorScheme: 'brand',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-blue-900/30 text-blue-300'\n      },\n      {\n        colorScheme: 'error',\n        filled: true,\n        theme: 'light',\n        class: 'bg-red-50 text-red-700'\n      },\n      {\n        colorScheme: 'error',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-red-500/20 text-red-400'\n      },\n      {\n        colorScheme: 'success',\n        filled: true,\n        theme: 'light',\n        class: 'bg-green-50 text-green-700'\n      },\n      {\n        colorScheme: 'success',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-green-500/20 text-green-400'\n      },\n      {\n        colorScheme: 'gray',\n        filled: true,\n        theme: 'light',\n        class: 'bg-gray-200 text-gray-800'\n      },\n      {\n        colorScheme: 'gray',\n        filled: true,\n        theme: 'dark',\n        class: 'bg-gray-600 text-gray-200'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      border: true,\n      disabled: false,\n      filled: false\n    }\n  }\n)\n\nconst overlayContent = cva(\n  'absolute z-50 overflow-hidden',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-[rgba(12,28,51,0.05)]',\n        dark: 'bg-[rgba(255,255,255,0.15)] border border-[rgba(255,255,255,0.15)] backdrop-blur-[256px]'\n      },\n      size: {\n        sm: 'rounded-[0.625rem]',\n        md: 'rounded-[0.75rem]', \n        xl: 'rounded-[0.9375rem]'\n      },\n      variant: {\n        dropdown: 'min-w-full',\n        'context-menu': 'w-[200px]'\n      },\n      hasShadow: {\n        true: 'shadow-[0px_0px_75px_0px_rgba(0,0,0,0.15)]',\n        false: 'shadow-lg'\n      }\n    },\n    defaultVariants: {\n      variant: 'dropdown',\n      hasShadow: false\n    }\n  }\n)\n\nconst overlayHeader = cva(\n  'flex items-center justify-between border-b gap-2',\n  {\n    variants: {\n      theme: {\n        light: 'border-[rgba(12,28,51,0.05)]',\n        dark: 'border-[rgba(255,255,255,0.15)]'\n      },\n      size: {\n        sm: 'px-[0.875rem] py-[0.375rem]',\n        md: 'px-[1rem] py-[0.5rem]',\n        xl: 'px-[1.125rem] py-[0.5rem]'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      size: 'xl'\n    }\n  }\n)\n\nconst overlayItem = cva(\n  'relative flex cursor-pointer select-none items-center outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-none font-medium text-[0.75rem] leading-[1.416em]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] hover:bg-gray-50',\n        dark: 'text-white hover:bg-[rgba(255,255,255,0.1)]'\n      },\n      size: {\n        sm: 'px-[0.875rem] py-[0.625rem]',\n        md: 'px-[1rem] py-[0.6875rem]',\n        xl: 'px-[1.125rem] py-[0.75rem]'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      size: 'xl'\n    }\n  }\n)\n\n// Arrow icon\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    width='15'\n    height='15'\n    viewBox='0 0 15 15'\n    fill='none'\n    xmlns='http://www.w3.org/2000/svg'\n    className={className}\n  >\n    <path\n      d='m4.93179 5.43179c0.20081-0.20081 0.52632-0.20081 0.72713 0l2.34108 2.34108 2.34108-2.34108c0.20081-0.20081 0.52632-0.20081 0.72713 0s0.20081 0.52632 0 0.72713l-2.70455 2.70455c-0.20081 0.20081-0.52632 0.20081-0.72713 0l-2.70455-2.70455c-0.20081-0.20081-0.20081-0.52632 0-0.72713z'\n      fill='currentColor'\n      fillRule='evenodd'\n      clipRule='evenodd'\n    />\n  </svg>\n)\n\ntype OverlayMenuVariants = VariantProps<typeof overlayMenuTrigger>\n\nexport interface OverlayMenuItem {\n  id: string\n  content: React.ReactNode\n  onClick?: () => void\n  disabled?: boolean\n  className?: string\n}\n\nexport interface OverlayMenuPosition {\n  top?: number\n  left?: number\n  right?: number\n  bottom?: number\n}\n\nexport interface OverlayMenuProps extends Omit<OverlayMenuVariants, 'theme' | 'disabled'> {\n  className?: string\n  triggerClassName?: string\n  contentClassName?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  filled?: boolean\n  items?: OverlayMenuItem[]\n  showArrow?: boolean\n  disabled?: boolean\n  name?: string\n  overlayLabel?: string\n  maxHeight?: string\n  triggerContent?: React.ReactNode\n  placeholder?: string\n  showItemBorders?: boolean\n  wrapperClassName?: string\n  variant?: 'dropdown' | 'context-menu'\n  align?: 'left' | 'center' | 'right'\n  headerContent?: React.ReactNode\n  showCloseButton?: boolean\n  closeButtonAlign?: 'left' | 'center' | 'right'\n  position?: OverlayMenuPosition\n  width?: string | number\n  onClose?: () => void\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'gray' | 'lightGray'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'gray' | 'lightGray'\n}\n\n/**\n * Overlay menu component that opens above the trigger with overlay positioning.\n * Supports custom content items with onClick handlers.\n * \n * @param variant - 'dropdown' (default) or 'context-menu'\n * @param headerContent - Custom header content (for context-menu variant)\n * @param showCloseButton - Show close button in header\n * @param position - Position object for context-menu variant\n * @param width - Custom width (default: 200px for context-menu)\n */\nconst closeButtonAlignClasses: Record<'left' | 'center' | 'right', string> = {\n  left: 'justify-start',\n  center: 'justify-center',\n  right: 'justify-end',\n}\n\ninterface OverlayMenuHeaderProps {\n  headerClasses: string\n  hasContent: boolean\n  showCloseButton: boolean\n  closeButtonAlign: 'left' | 'center' | 'right'\n  isContextMenu: boolean\n  theme: 'light' | 'dark'\n  onClose: () => void\n  children?: React.ReactNode\n}\n\nconst OverlayMenuHeader: React.FC<OverlayMenuHeaderProps> = ({\n  headerClasses,\n  hasContent,\n  showCloseButton,\n  closeButtonAlign,\n  isContextMenu,\n  theme,\n  onClose,\n  children,\n}) => {\n  const isCloseOnly = showCloseButton && !hasContent\n\n  return (\n    <div\n      className={`${headerClasses} ${isCloseOnly ? closeButtonAlignClasses[closeButtonAlign] : ''} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`}\n      onClick={!showCloseButton && !isContextMenu ? onClose : undefined}\n    >\n      {hasContent && (\n        <div className='w-full flex-1'>{children}</div>\n      )}\n      {showCloseButton && (\n        <button\n          className='flex items-center cursor-pointer hover:opacity-70 transition-opacity'\n          onClick={onClose}\n          aria-label='Close menu'\n        >\n          <CrossIcon\n            size={16}\n            color={theme === 'dark' ? '#FFFFFF' : '#0C1C33'}\n          />\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport const OverlayMenu: React.FC<OverlayMenuProps> = ({\n  className = '',\n  triggerClassName = '',\n  contentClassName = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  filled = false,\n  disabled = false,\n  items = [],\n  showArrow = true,\n  name,\n  overlayLabel,\n  maxHeight = '200px',\n  triggerContent,\n  placeholder = 'Menu',\n  showItemBorders = true,\n  variant = 'dropdown',\n  align = 'left',\n  wrapperClassName = '',\n  headerContent,\n  showCloseButton = false,\n  closeButtonAlign = 'right',\n  position,\n  width,\n  onClose,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [isOpen, setIsOpen] = useState(false)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n  // Determine color scheme based on state\n  let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const isContextMenu = variant === 'context-menu'\n\n  // Handle Escape key\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen])\n\n  const handleClose = () => {\n    setIsOpen(false)\n    onClose?.()\n  }\n\n  const alignClasses: Record<'left' | 'center' | 'right', string> = {\n    left: 'left-0',\n    center: 'left-1/2 -translate-x-1/2',\n    right: 'right-0',\n  }\n\n  const triggerClasses = overlayMenuTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    filled,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = overlayContent({ \n    theme, \n    size, \n    variant,\n    hasShadow: isContextMenu \n  })\n  const headerClasses = overlayHeader({ theme, size })\n  const itemClasses = overlayItem({ theme, size })\n\n  const handleItemClick = (item: OverlayMenuItem) => {\n    if (!item.disabled && item.onClick) {\n      item.onClick()\n    }\n    handleClose()\n  }\n\n  // For context-menu variant, show menu immediately if position is provided\n  useEffect(() => {\n    if (isContextMenu && position) {\n      setIsOpen(true)\n    }\n  }, [isContextMenu, position])\n\n  // Calculate position styles for context-menu\n  const getPositionStyles = (): React.CSSProperties => {\n    if (!isContextMenu || !position) return {}\n    \n    const styles: React.CSSProperties = {}\n    if (position.top !== undefined) styles.top = position.top\n    if (position.left !== undefined) styles.left = position.left\n    if (position.right !== undefined) styles.right = position.right\n    if (position.bottom !== undefined) styles.bottom = position.bottom\n    if (width) styles.width = typeof width === 'number' ? `${width}px` : width\n    \n    return styles\n  }\n\n  return (\n    <div className={isContextMenu ? wrapperClassName : `relative ${wrapperClassName}`}>\n      {/* Trigger button - only for dropdown variant */}\n      {!isContextMenu && (\n        <button\n          ref={triggerRef}\n          type='button'\n          className={`${triggerClasses} ${triggerClassName}`}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n          disabled={disabled}\n          name={name}\n          {...props}\n        >\n          <div className='w-full flex-1 text-left'>\n            {triggerContent || (\n              <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}>\n                {placeholder}\n              </span>\n            )}\n          </div>\n          {showArrow && (\n            <ChevronDownIcon \n              className={`transition-transform ${isOpen ? 'rotate-180' : ''} ${\n                size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'\n              }`} \n            />\n          )}\n        </button>\n      )}\n\n      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <div \n            className={`${isContextMenu ? 'fixed' : 'fixed'} inset-0 z-40`}\n            onClick={handleClose}\n          />\n\n          {/* Overlay content */}\n          <div\n            className={`${contentClasses} ${isContextMenu ? 'fixed' : ''} ${\n              !isContextMenu ? `top-0 ${alignClasses[align]}` : ''\n            } overflow-y-auto ${contentClassName}`}\n            style={{ \n              maxHeight,\n              ...getPositionStyles()\n            }}\n          >\n            {/* Custom header for context-menu or overlayLabel for dropdown */}\n            {(headerContent || overlayLabel || showCloseButton) && (\n              <OverlayMenuHeader\n                headerClasses={headerClasses}\n                hasContent={!!(headerContent || overlayLabel)}\n                showCloseButton={showCloseButton || (isContextMenu && !!headerContent)}\n                closeButtonAlign={closeButtonAlign}\n                isContextMenu={isContextMenu}\n                theme={theme}\n                onClose={handleClose}\n              >\n                {headerContent || overlayLabel}\n              </OverlayMenuHeader>\n            )}\n\n            {/* Menu items */}\n            <div>\n              {items.map((item, index) => (\n                <div\n                  key={item.id}\n                  className={`${itemClasses} ${item.disabled ? 'opacity-50 !cursor-not-allowed' : ''} ${\n                    showItemBorders && index < items.length - 1\n                      ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}`\n                      : ''\n                  } ${item.className ?? ''}`}\n                  onClick={() => handleItemClick(item)}\n                >\n                  {item.content}\n                </div>\n              ))}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default OverlayMenu\n"],"names":["overlayMenuTrigger","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","gray","lightGray","size","sm","md","xl","border","true","false","disabled","filled","compoundVariants","class","defaultVariants","overlayContent","variant","dropdown","hasShadow","overlayHeader","overlayItem","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","closeButtonAlignClasses","left","center","right","OverlayMenuHeader","headerClasses","hasContent","showCloseButton","closeButtonAlign","isContextMenu","onClose","children","isCloseOnly","_jsxs","onClick","undefined","CrossIcon","color","OverlayMenu","_a","triggerClassName","contentClassName","colorSchemeLight","colorSchemeDark","items","showArrow","name","overlayLabel","maxHeight","triggerContent","placeholder","showItemBorders","align","wrapperClassName","headerContent","position","props","__rest","useTheme","isOpen","setIsOpen","useState","triggerRef","useRef","effectiveColorScheme","_b","useColorScheme","finalColorScheme","useEffect","handleEscape","e","key","handleClose","document","addEventListener","removeEventListener","alignClasses","triggerClasses","contentClasses","itemClasses","handleItemClick","item","getPositionStyles","styles","top","bottom","Object","assign","ref","type","_Fragment","style","map","index","length","content","id"],"mappings":"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"}

package/dist/react/components/overlayMenu/index.d.ts

@@ -14,6 +14,7 @@ export interface OverlayMenuItem {
     content: React.ReactNode;
     onClick?: () => void;
     disabled?: boolean;
+    className?: string;
 }
 export interface OverlayMenuPosition {
     top?: number;
@@ -23,6 +24,7 @@ export interface OverlayMenuPosition {
 }
 export interface OverlayMenuProps extends Omit<OverlayMenuVariants, 'theme' | 'disabled'> {
     className?: string;
+    triggerClassName?: string;
     contentClassName?: string;
     error?: boolean;
     success?: boolean;
@@ -37,22 +39,19 @@ export interface OverlayMenuProps extends Omit<OverlayMenuVariants, 'theme' | 'd
     triggerContent?: React.ReactNode;
     placeholder?: string;
     showItemBorders?: boolean;
+    wrapperClassName?: string;
     variant?: 'dropdown' | 'context-menu';
+    align?: 'left' | 'center' | 'right';
     headerContent?: React.ReactNode;
     showCloseButton?: boolean;
+    closeButtonAlign?: 'left' | 'center' | 'right';
     position?: OverlayMenuPosition;
     width?: string | number;
     onClose?: () => void;
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'gray' | 'lightGray';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'gray' | 'lightGray';
 }
-/**
- * Overlay menu component that opens above the trigger with overlay positioning.
- * Supports custom content items with onClick handlers.
- *
- * @param variant - 'dropdown' (default) or 'context-menu'
- * @param headerContent - Custom header content (for context-menu variant)
- * @param showCloseButton - Show close button in header
- * @param position - Position object for context-menu variant
- * @param width - Custom width (default: 200px for context-menu)
- */
 export declare const OverlayMenu: React.FC<OverlayMenuProps>;
 export default OverlayMenu;

package/dist/react/components/overlayMenu/index.esm.js

@@ -6,6 +6,7 @@ import { useState, useRef, useEffect } from 'react';
 import { cva } from 'class-variance-authority';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
 import { CrossIcon } from '../icons/index.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 
 const overlayMenuTrigger = cva('w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] inline-flex items-center justify-between', {
   variants: {
@@ -265,11 +266,48 @@ const ChevronDownIcon = ({
  * @param position - Position object for context-menu variant
  * @param width - Custom width (default: 200px for context-menu)
  */
+const closeButtonAlignClasses = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end'
+};
+const OverlayMenuHeader = ({
+  headerClasses,
+  hasContent,
+  showCloseButton,
+  closeButtonAlign,
+  isContextMenu,
+  theme,
+  onClose,
+  children
+}) => {
+  const isCloseOnly = showCloseButton && !hasContent;
+  return jsxs("div", {
+    className: `${headerClasses} ${isCloseOnly ? closeButtonAlignClasses[closeButtonAlign] : ''} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
+    onClick: !showCloseButton && !isContextMenu ? onClose : undefined,
+    children: [hasContent && jsx("div", {
+      className: 'w-full flex-1',
+      children: children
+    }), showCloseButton && jsx("button", {
+      className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
+      onClick: onClose,
+      "aria-label": 'Close menu',
+      children: jsx(CrossIcon, {
+        size: 16,
+        color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
+      })
+    })]
+  });
+};
 const OverlayMenu = _a => {
+  var _b;
   var {
       className = '',
+      triggerClassName = '',
       contentClassName = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       error = false,
       success = false,
@@ -285,20 +323,24 @@ const OverlayMenu = _a => {
       placeholder = 'Menu',
       showItemBorders = true,
       variant = 'dropdown',
+      align = 'left',
+      wrapperClassName = '',
       headerContent,
       showCloseButton = false,
+      closeButtonAlign = 'right',
       position,
       width,
       onClose
     } = _a,
-    props = __rest(_a, ["className", "contentClassName", "colorScheme", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "headerContent", "showCloseButton", "position", "width", "onClose"]);
+    props = __rest(_a, ["className", "triggerClassName", "contentClassName", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "align", "wrapperClassName", "headerContent", "showCloseButton", "closeButtonAlign", "position", "width", "onClose"]);
   const {
     theme
   } = useTheme();
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const isContextMenu = variant === 'context-menu';
   // Handle Escape key
@@ -316,6 +358,11 @@ const OverlayMenu = _a => {
     setIsOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   };
+  const alignClasses = {
+    left: 'left-0',
+    center: 'left-1/2 -translate-x-1/2',
+    right: 'right-0'
+  };
   const triggerClasses = overlayMenuTrigger({
     theme,
     colorScheme: finalColorScheme,
@@ -362,11 +409,11 @@ const OverlayMenu = _a => {
     return styles;
   };
   return jsxs("div", {
-    className: isContextMenu ? '' : 'relative',
+    className: isContextMenu ? wrapperClassName : `relative ${wrapperClassName}`,
     children: [!isContextMenu && jsxs("button", Object.assign({
       ref: triggerRef,
       type: 'button',
-      className: triggerClasses,
+      className: `${triggerClasses} ${triggerClassName}`,
       onClick: () => !disabled && setIsOpen(!isOpen),
       disabled: disabled,
       name: name
@@ -385,31 +432,28 @@ const OverlayMenu = _a => {
         className: `${isContextMenu ? 'fixed' : 'fixed'} inset-0 z-40`,
         onClick: handleClose
       }), jsxs("div", {
-        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? 'top-0 left-0 right-0' : ''} overflow-y-auto ${contentClassName}`,
+        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? `top-0 ${alignClasses[align]}` : ''} overflow-y-auto ${contentClassName}`,
         style: Object.assign({
           maxHeight
         }, getPositionStyles()),
-        children: [(headerContent || overlayLabel) && jsxs("div", {
-          className: `${headerClasses} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
-          onClick: !showCloseButton && !isContextMenu ? handleClose : undefined,
-          children: [jsx("div", {
-            className: 'w-full flex-1',
-            children: headerContent || overlayLabel
-          }), (showCloseButton || isContextMenu && headerContent) && jsx("button", {
-            className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
-            onClick: handleClose,
-            "aria-label": 'Close menu',
-            children: jsx(CrossIcon, {
-              size: 16,
-              color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
-            })
-          })]
+        children: [(headerContent || overlayLabel || showCloseButton) && jsx(OverlayMenuHeader, {
+          headerClasses: headerClasses,
+          hasContent: !!(headerContent || overlayLabel),
+          showCloseButton: showCloseButton || isContextMenu && !!headerContent,
+          closeButtonAlign: closeButtonAlign,
+          isContextMenu: isContextMenu,
+          theme: theme,
+          onClose: handleClose,
+          children: headerContent || overlayLabel
         }), jsx("div", {
-          children: items.map((item, index) => jsx("div", {
-            className: `${itemClasses} ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''}`,
-            onClick: () => handleItemClick(item),
-            children: item.content
-          }, item.id))
+          children: items.map((item, index) => {
+            var _a;
+            return jsx("div", {
+              className: `${itemClasses} ${item.disabled ? 'opacity-50 !cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''} ${(_a = item.className) !== null && _a !== void 0 ? _a : ''}`,
+              onClick: () => handleItemClick(item),
+              children: item.content
+            }, item.id);
+          })
         })]
       })]
     })]