dash-ui-kit 1.0.93 → 2.0.0-dev

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

@@ -0,0 +1,340 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { CrossIcon } from '../icons/index.esm.js';
+
+const overlaySelectTrigger = 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: {
+    theme: {
+      light: 'text-dash-primary-dark-blue',
+      dark: 'text-white'
+    },
+    colorScheme: {
+      default: '',
+      brand: '',
+      error: '',
+      success: '',
+      gray: '',
+      lightGray: ''
+    },
+    size: {
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    border: {
+      true: 'outline outline-1 outline-offset-[-1px]',
+      false: ''
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    },
+    filled: {
+      false: '',
+      true: ''
+    }
+  },
+  compoundVariants: [{
+    colorScheme: 'default',
+    border: true,
+    class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'
+  }, {
+    colorScheme: 'brand',
+    border: true,
+    class: 'outline-dash-brand/30 focus:outline-dash-brand'
+  }, {
+    colorScheme: 'error',
+    border: true,
+    class: 'outline-red-500 focus:outline-red-500'
+  }, {
+    colorScheme: 'success',
+    border: true,
+    class: 'outline-green-500 focus:outline-green-500'
+  }, {
+    colorScheme: 'gray',
+    border: true,
+    theme: 'light',
+    class: 'outline-[rgba(12,28,51,0.20)] focus:outline-[rgba(12,28,51,0.35)]'
+  }, {
+    colorScheme: 'gray',
+    border: true,
+    theme: 'dark',
+    class: 'outline-gray-600/50 focus:outline-gray-500'
+  }, {
+    colorScheme: 'lightGray',
+    border: true,
+    theme: 'light',
+    class: 'outline-dash-primary-dark-blue/[0.05] focus:outline-dash-primary-dark-blue/[0.05]'
+  }, {
+    colorScheme: 'lightGray',
+    border: true,
+    theme: 'dark',
+    class: 'outline-dash-primary-dark-blue/[0.05] focus:outline-dash-primary-dark-blue/[0.05]'
+  }, {
+    colorScheme: 'gray',
+    border: false,
+    theme: 'light',
+    class: 'bg-[rgba(12,28,51,0.03)]'
+  }, {
+    colorScheme: 'gray',
+    border: false,
+    theme: 'dark',
+    class: 'bg-gray-700/20'
+  },
+  // New lightGray scheme using dash-primary-dark-blue with 3% base and 5% hover
+  {
+    colorScheme: 'lightGray',
+    border: false,
+    theme: 'light',
+    class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'
+  }, {
+    colorScheme: 'lightGray',
+    border: false,
+    theme: 'dark',
+    class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'
+  }, {
+    colorScheme: 'lightGray',
+    filled: true,
+    theme: 'light',
+    class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'
+  }, {
+    colorScheme: 'lightGray',
+    filled: true,
+    theme: 'dark',
+    class: 'bg-dash-primary-dark-blue/[0.03] hover:bg-dash-primary-dark-blue/[0.05]'
+  },
+  // Default background when not filled
+  {
+    filled: false,
+    theme: 'light',
+    class: 'bg-white'
+  }, {
+    filled: false,
+    theme: 'dark',
+    class: 'bg-gray-800'
+  },
+  // Filled variants
+  {
+    colorScheme: 'default',
+    filled: true,
+    theme: 'light',
+    class: 'bg-white text-gray-900'
+  }, {
+    colorScheme: 'default',
+    filled: true,
+    theme: 'dark',
+    class: 'bg-gray-700 text-white'
+  }, {
+    colorScheme: 'brand',
+    filled: true,
+    theme: 'light',
+    class: 'bg-blue-50 text-blue-700'
+  }, {
+    colorScheme: 'brand',
+    filled: true,
+    theme: 'dark',
+    class: 'bg-blue-900/30 text-blue-300'
+  }, {
+    colorScheme: 'error',
+    filled: true,
+    theme: 'light',
+    class: 'bg-red-50 text-red-700'
+  }, {
+    colorScheme: 'error',
+    filled: true,
+    theme: 'dark',
+    class: 'bg-red-500/20 text-red-400'
+  }, {
+    colorScheme: 'success',
+    filled: true,
+    theme: 'light',
+    class: 'bg-green-50 text-green-700'
+  }, {
+    colorScheme: 'success',
+    filled: true,
+    theme: 'dark',
+    class: 'bg-green-500/20 text-green-400'
+  }, {
+    colorScheme: 'gray',
+    filled: true,
+    theme: 'light',
+    class: 'bg-gray-200 text-gray-800'
+  }, {
+    colorScheme: 'gray',
+    filled: true,
+    theme: 'dark',
+    class: 'bg-gray-600 text-gray-200'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    colorScheme: 'default',
+    size: 'xl',
+    border: true,
+    disabled: false,
+    filled: false
+  }
+});
+const overlayContent = cva('absolute z-50 min-w-full overflow-hidden shadow-lg', {
+  variants: {
+    theme: {
+      light: 'bg-white border border-[rgba(12,28,51,0.05)]',
+      dark: 'bg-[rgba(255,255,255,0.15)] border border-[rgba(255,255,255,0.15)] backdrop-blur-[256px]'
+    },
+    size: {
+      sm: 'rounded-[0.625rem]',
+      md: 'rounded-[0.875rem]',
+      xl: 'rounded-[1rem]'
+    }
+  }
+});
+const overlayItem = cva('relative flex cursor-pointer select-none items-center outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-none', {
+  variants: {
+    theme: {
+      light: 'text-[#0C1C33] hover:bg-gray-50',
+      dark: 'text-white hover:bg-[rgba(255,255,255,0.1)]'
+    },
+    size: {
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    }
+  }
+});
+// Arrow icon
+const ChevronDownIcon = ({
+  className
+}) => jsx("svg", {
+  width: '15',
+  height: '15',
+  viewBox: '0 0 15 15',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  children: jsx("path", {
+    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',
+    fill: 'currentColor',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  })
+});
+/**
+ * Overlay select component that opens above the trigger with overlay positioning.
+ * Simple select component without additional button functionality.
+ */
+const OverlaySelect = _a => {
+  var {
+      className = '',
+      colorScheme,
+      size,
+      error = false,
+      success = false,
+      border = true,
+      filled = false,
+      disabled = false,
+      options = [],
+      showArrow = true,
+      value,
+      defaultValue,
+      onValueChange,
+      placeholder = 'Select an option...',
+      name,
+      overlayLabel,
+      maxHeight = '200px'
+    } = _a;
+    __rest(_a, ["className", "colorScheme", "size", "error", "success", "border", "filled", "disabled", "options", "showArrow", "value", "defaultValue", "onValueChange", "placeholder", "name", "overlayLabel", "maxHeight"]);
+  const {
+    theme
+  } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  // Determine color scheme based on state
+  let finalColorScheme = colorScheme;
+  if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
+  const triggerClasses = overlaySelectTrigger({
+    theme,
+    colorScheme: finalColorScheme,
+    size,
+    border,
+    filled,
+    disabled
+  }) + ' ' + className;
+  const contentClasses = overlayContent({
+    theme,
+    size
+  });
+  const itemClasses = overlayItem({
+    theme,
+    size
+  });
+  const selectedOption = options.find(opt => opt.value === value);
+  const handleOptionClick = optionValue => {
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(optionValue);
+    setIsOpen(false);
+  };
+  return jsxs("div", {
+    className: 'relative',
+    children: [jsxs("button", {
+      ref: triggerRef,
+      type: 'button',
+      className: triggerClasses,
+      onClick: () => !disabled && setIsOpen(!isOpen),
+      disabled: disabled,
+      name: name,
+      children: [jsx("div", {
+        className: 'w-full flex-1 text-left',
+        children: selectedOption ? selectedOption.content || selectedOption.label : jsx("span", {
+          className: theme === 'dark' ? 'text-gray-400' : 'text-gray-500',
+          children: placeholder
+        })
+      }), showArrow && jsx(ChevronDownIcon, {
+        className: `transition-transform ${isOpen ? 'rotate-180' : ''} ${size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'}`
+      })]
+    }), isOpen && jsxs(Fragment, {
+      children: [jsx("div", {
+        className: 'fixed inset-0 z-40',
+        onClick: () => setIsOpen(false)
+      }), jsxs("div", {
+        className: `${contentClasses} top-0 left-0 right-0`,
+        style: {
+          maxHeight
+        },
+        children: [overlayLabel && jsxs("div", {
+          className: `${itemClasses} font-medium border-b rounded-b-none cursor-pointer ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}`,
+          onClick: () => setIsOpen(false),
+          children: [jsx("div", {
+            className: 'w-full flex-1',
+            children: overlayLabel
+          }), jsx("div", {
+            className: 'flex items-center pl-1',
+            children: jsx(CrossIcon, {
+              size: 16,
+              color: theme === 'dark' ? '#FFFFFF' : '#0C1C33',
+              className: 'cursor-pointer'
+            })
+          })]
+        }), jsx("div", {
+          className: 'overflow-y-auto',
+          style: {
+            maxHeight: `calc(${maxHeight} - ${overlayLabel ? '50px' : '0px'})`
+          },
+          children: options.map((option, index) => jsx("div", {
+            className: `${itemClasses} ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${index < options.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''}`,
+            onClick: () => !option.disabled && handleOptionClick(option.value),
+            children: jsx("div", {
+              className: 'w-full flex-1 text-left',
+              children: option.content || option.label
+            })
+          }, option.value))
+        })]
+      })]
+    })]
+  });
+};
+
+export { OverlaySelect, OverlaySelect as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/overlaySelect/index.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\n\nconst overlaySelectTrigger = 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 min-w-full overflow-hidden shadow-lg',\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.875rem]',\n        xl: 'rounded-[1rem]'\n      }\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',\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: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      }\n    }\n  }\n)\n\n\n\ntype OverlaySelectVariants = VariantProps<typeof overlaySelectTrigger>\n\nexport interface OverlaySelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n  content?: React.ReactNode\n}\n\nexport interface OverlaySelectProps extends Omit<OverlaySelectVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  filled?: boolean\n  options?: OverlaySelectOption[]\n  showArrow?: boolean\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  placeholder?: string\n  disabled?: boolean\n  name?: string\n  overlayLabel?: string\n  maxHeight?: string\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\n\n\n\n\n/**\n * Overlay select component that opens above the trigger with overlay positioning.\n * Simple select component without additional button functionality.\n */\nexport const OverlaySelect: React.FC<OverlaySelectProps> = ({\n  className = '',\n  colorScheme,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  filled = false,\n  disabled = false,\n  options = [],\n  showArrow = true,\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = 'Select an option...',\n  name,\n  overlayLabel,\n  maxHeight = '200px',\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 triggerClasses = overlaySelectTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    filled,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = overlayContent({ theme, size })\n  const itemClasses = overlayItem({ theme, size })\n\n\n  const selectedOption = options.find(opt => opt.value === value)\n\n  const handleOptionClick = (optionValue: string) => {\n    onValueChange?.(optionValue)\n    setIsOpen(false)\n  }\n\n\n\n  return (\n    <div className='relative'>\n      <button\n        ref={triggerRef}\n        type='button'\n        className={triggerClasses}\n        onClick={() => !disabled && setIsOpen(!isOpen)}\n        disabled={disabled}\n        name={name}\n      >\n        <div className='w-full flex-1 text-left'>\n          {selectedOption ? (\n            selectedOption.content || selectedOption.label\n          ) : (\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      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <div \n            className='fixed inset-0 z-40' \n            onClick={() => setIsOpen(false)}\n          />\n          \n          {/* Overlay content */}\n          <div\n            className={`${contentClasses} top-0 left-0 right-0`}\n            style={{ maxHeight }}\n          >\n            {/* Overlay label */}\n            {overlayLabel && (\n              <div \n                className={`${itemClasses} font-medium border-b rounded-b-none cursor-pointer ${\n                  theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'\n                }`}\n                onClick={() => setIsOpen(false)}\n              >\n                <div className='w-full flex-1'>\n                  {overlayLabel}\n                </div>\n                <div className='flex items-center pl-1'>\n                  <CrossIcon\n                    size={16} \n                    color={theme === 'dark' ? '#FFFFFF' : '#0C1C33'}\n                    className='cursor-pointer'\n                  />\n                </div>\n              </div>\n            )}\n            \n            {/* Options */}\n            <div className='overflow-y-auto' style={{ maxHeight: `calc(${maxHeight} - ${overlayLabel ? '50px' : '0px'})` }}>\n              {options.map((option, index) => (\n                <div\n                  key={option.value}\n                  className={`${itemClasses} ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${\n                    index < options.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={() => !option.disabled && handleOptionClick(option.value)}\n                >\n                  <div className='w-full flex-1 text-left'>\n                    {option.content || option.label}\n                  </div>\n                </div>\n              ))}\n            </div>\n            \n\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default OverlaySelect\n"],"names":["overlaySelectTrigger","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","overlayItem","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","OverlaySelect","_a","options","showArrow","value","defaultValue","onValueChange","placeholder","name","overlayLabel","maxHeight","props","__rest","useTheme","isOpen","setIsOpen","useState","triggerRef","useRef","finalColorScheme","triggerClasses","contentClasses","itemClasses","selectedOption","find","opt","handleOptionClick","optionValue","_jsxs","children","ref","type","onClick","content","label","style","CrossIcon","color","map","option","index","length"],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+"use client";
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const colorConfig = {
+  blue: {
+    active: 'bg-[var(--color-dash-brand)]',
+    activeDark: 'bg-[var(--color-dash-brand-dim)]',
+    inactive: 'bg-[rgba(76,126,255,0.16)]',
+    inactiveDark: 'bg-gray-700'
+  },
+  red: {
+    active: 'bg-[var(--color-dash-red)]',
+    activeDark: 'bg-[var(--color-dash-red-75)]',
+    inactive: 'bg-[var(--color-dash-red-15)]',
+    inactiveDark: 'bg-gray-700'
+  },
+  orange: {
+    active: 'bg-[var(--color-dash-orange)]',
+    activeDark: 'bg-[var(--color-dash-orange-75)]',
+    inactive: 'bg-[var(--color-dash-orange-15)]',
+    inactiveDark: 'bg-gray-700'
+  }
+};
+function ProgressStepBar({
+  currentStep,
+  totalSteps,
+  className = '',
+  color = 'blue'
+}) {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const colors = colorConfig[color];
+  return jsxRuntime.jsx("div", {
+    className: `flex gap-2 w-full ${className}`,
+    children: Array.from({
+      length: totalSteps
+    }, (_, index) => jsxRuntime.jsx("div", {
+      className: `h-1.5 rounded-2xl flex-1 transition-colors ${index < currentStep ? theme === 'dark' ? colors.activeDark : colors.active : theme === 'dark' ? colors.inactiveDark : colors.inactive}`
+    }, index))
+  });
+}
+
+exports.ProgressStepBar = ProgressStepBar;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/progressStepBar/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface ProgressStepBarProps {\n  currentStep: number\n  totalSteps: number\n  className?: string\n  color?: 'blue' | 'red' | 'orange'\n}\n\nconst colorConfig = {\n  blue: {\n    active: 'bg-[var(--color-dash-brand)]',\n    activeDark: 'bg-[var(--color-dash-brand-dim)]',\n    inactive: 'bg-[rgba(76,126,255,0.16)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  red: {\n    active: 'bg-[var(--color-dash-red)]',\n    activeDark: 'bg-[var(--color-dash-red-75)]',\n    inactive: 'bg-[var(--color-dash-red-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  orange: {\n    active: 'bg-[var(--color-dash-orange)]',\n    activeDark: 'bg-[var(--color-dash-orange-75)]',\n    inactive: 'bg-[var(--color-dash-orange-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n}\n\nexport function ProgressStepBar({ \n  currentStep, \n  totalSteps, \n  className = '',\n  color = 'blue'\n}: ProgressStepBarProps): React.JSX.Element {\n  const { theme } = useTheme()\n  const colors = colorConfig[color]\n  \n  return (\n    <div className={`flex gap-2 w-full ${className}`}>\n      {Array.from({ length: totalSteps }, (_, index) => (\n        <div\n          key={index}\n          className={`h-1.5 rounded-2xl flex-1 transition-colors ${\n            index < currentStep \n              ? theme === 'dark' \n                ? colors.activeDark \n                : colors.active\n              : theme === 'dark' \n                ? colors.inactiveDark \n                : colors.inactive\n          }`}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport type { ProgressStepBarProps } "],"names":["colorConfig","blue","active","activeDark","inactive","inactiveDark","red","orange","ProgressStepBar","currentStep","totalSteps","className","color","theme","useTheme","colors","_jsx","children","Array","from","length","_","index"],"mappings":";;;;;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,8BAA8B;AACtCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,4BAA4B;AACtCC,IAAAA,YAAY,EAAE;GACf;AACDC,EAAAA,GAAG,EAAE;AACHJ,IAAAA,MAAM,EAAE,4BAA4B;AACpCC,IAAAA,UAAU,EAAE,+BAA+B;AAC3CC,IAAAA,QAAQ,EAAE,+BAA+B;AACzCC,IAAAA,YAAY,EAAE;GACf;AACDE,EAAAA,MAAM,EAAE;AACNL,IAAAA,MAAM,EAAE,+BAA+B;AACvCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,YAAY,EAAE;AACf;CACF;AAEe,SAAAG,eAAeA,CAAC;EAC9BC,WAAW;EACXC,UAAU;AACVC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,KAAK,GAAG;AACa,CAAA,EAAA;EACrB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;AAC5B,EAAA,MAAMC,MAAM,GAAGf,WAAW,CAACY,KAAK,CAAC;EAEjC,OACEI,cAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAE,CAAqBA,kBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC7CM,IAAAA,QAAA,EAAAC,KAAK,CAACC,IAAI,CAAC;AAAEC,MAAAA,MAAM,EAAEV;KAAY,EAAE,CAACW,CAAC,EAAEC,KAAK,KAC3CN,cAAA,CAAA,KAAA,EAAA;AAEEL,MAAAA,SAAS,EAAE,CAAA,2CAAA,EACTW,KAAK,GAAGb,WAAW,GACfI,KAAK,KAAK,MAAM,GACdE,MAAM,CAACZ,UAAU,GACjBY,MAAM,CAACb,MAAM,GACfW,KAAK,KAAK,MAAM,GACdE,MAAM,CAACV,YAAY,GACnBU,MAAM,CAACX,QACf,CAAA;KAAE,EATGkB,KAAK,CAWb;AACG,GAAA,CAAA;AAEV;;;;"}

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

@@ -3,6 +3,7 @@ interface ProgressStepBarProps {
     currentStep: number;
     totalSteps: number;
     className?: string;
+    color?: 'blue' | 'red' | 'orange';
 }
-export declare function ProgressStepBar({ currentStep, totalSteps, className }: ProgressStepBarProps): React.JSX.Element;
+export declare function ProgressStepBar({ currentStep, totalSteps, className, color }: ProgressStepBarProps): React.JSX.Element;
 export type { ProgressStepBarProps };

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const colorConfig = {
+  blue: {
+    active: 'bg-[var(--color-dash-brand)]',
+    activeDark: 'bg-[var(--color-dash-brand-dim)]',
+    inactive: 'bg-[rgba(76,126,255,0.16)]',
+    inactiveDark: 'bg-gray-700'
+  },
+  red: {
+    active: 'bg-[var(--color-dash-red)]',
+    activeDark: 'bg-[var(--color-dash-red-75)]',
+    inactive: 'bg-[var(--color-dash-red-15)]',
+    inactiveDark: 'bg-gray-700'
+  },
+  orange: {
+    active: 'bg-[var(--color-dash-orange)]',
+    activeDark: 'bg-[var(--color-dash-orange-75)]',
+    inactive: 'bg-[var(--color-dash-orange-15)]',
+    inactiveDark: 'bg-gray-700'
+  }
+};
+function ProgressStepBar({
+  currentStep,
+  totalSteps,
+  className = '',
+  color = 'blue'
+}) {
+  const {
+    theme
+  } = useTheme();
+  const colors = colorConfig[color];
+  return jsx("div", {
+    className: `flex gap-2 w-full ${className}`,
+    children: Array.from({
+      length: totalSteps
+    }, (_, index) => jsx("div", {
+      className: `h-1.5 rounded-2xl flex-1 transition-colors ${index < currentStep ? theme === 'dark' ? colors.activeDark : colors.active : theme === 'dark' ? colors.inactiveDark : colors.inactive}`
+    }, index))
+  });
+}
+
+export { ProgressStepBar };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/progressStepBar/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface ProgressStepBarProps {\n  currentStep: number\n  totalSteps: number\n  className?: string\n  color?: 'blue' | 'red' | 'orange'\n}\n\nconst colorConfig = {\n  blue: {\n    active: 'bg-[var(--color-dash-brand)]',\n    activeDark: 'bg-[var(--color-dash-brand-dim)]',\n    inactive: 'bg-[rgba(76,126,255,0.16)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  red: {\n    active: 'bg-[var(--color-dash-red)]',\n    activeDark: 'bg-[var(--color-dash-red-75)]',\n    inactive: 'bg-[var(--color-dash-red-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  orange: {\n    active: 'bg-[var(--color-dash-orange)]',\n    activeDark: 'bg-[var(--color-dash-orange-75)]',\n    inactive: 'bg-[var(--color-dash-orange-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n}\n\nexport function ProgressStepBar({ \n  currentStep, \n  totalSteps, \n  className = '',\n  color = 'blue'\n}: ProgressStepBarProps): React.JSX.Element {\n  const { theme } = useTheme()\n  const colors = colorConfig[color]\n  \n  return (\n    <div className={`flex gap-2 w-full ${className}`}>\n      {Array.from({ length: totalSteps }, (_, index) => (\n        <div\n          key={index}\n          className={`h-1.5 rounded-2xl flex-1 transition-colors ${\n            index < currentStep \n              ? theme === 'dark' \n                ? colors.activeDark \n                : colors.active\n              : theme === 'dark' \n                ? colors.inactiveDark \n                : colors.inactive\n          }`}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport type { ProgressStepBarProps } "],"names":["colorConfig","blue","active","activeDark","inactive","inactiveDark","red","orange","ProgressStepBar","currentStep","totalSteps","className","color","theme","useTheme","colors","_jsx","children","Array","from","length","_","index"],"mappings":";;;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,8BAA8B;AACtCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,4BAA4B;AACtCC,IAAAA,YAAY,EAAE;GACf;AACDC,EAAAA,GAAG,EAAE;AACHJ,IAAAA,MAAM,EAAE,4BAA4B;AACpCC,IAAAA,UAAU,EAAE,+BAA+B;AAC3CC,IAAAA,QAAQ,EAAE,+BAA+B;AACzCC,IAAAA,YAAY,EAAE;GACf;AACDE,EAAAA,MAAM,EAAE;AACNL,IAAAA,MAAM,EAAE,+BAA+B;AACvCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,YAAY,EAAE;AACf;CACF;AAEe,SAAAG,eAAeA,CAAC;EAC9BC,WAAW;EACXC,UAAU;AACVC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,KAAK,GAAG;AACa,CAAA,EAAA;EACrB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;AAC5B,EAAA,MAAMC,MAAM,GAAGf,WAAW,CAACY,KAAK,CAAC;EAEjC,OACEI,GAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAE,CAAqBA,kBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC7CM,IAAAA,QAAA,EAAAC,KAAK,CAACC,IAAI,CAAC;AAAEC,MAAAA,MAAM,EAAEV;KAAY,EAAE,CAACW,CAAC,EAAEC,KAAK,KAC3CN,GAAA,CAAA,KAAA,EAAA;AAEEL,MAAAA,SAAS,EAAE,CAAA,2CAAA,EACTW,KAAK,GAAGb,WAAW,GACfI,KAAK,KAAK,MAAM,GACdE,MAAM,CAACZ,UAAU,GACjBY,MAAM,CAACb,MAAM,GACfW,KAAK,KAAK,MAAM,GACdE,MAAM,CAACV,YAAY,GACnBU,MAAM,CAACX,QACf,CAAA;KAAE,EATGkB,KAAK,CAWb;AACG,GAAA,CAAA;AAEV;;;;"}