even-toolkit 1.4.2 → 1.5.0

package/web/components/select.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { cn } from '../utils/cn';
 
 interface SelectOption {
@@ -6,30 +6,100 @@ interface SelectOption {
   label: string;
 }
 
-interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+interface SelectProps {
+  value?: string;
   options: SelectOption[];
   onValueChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  dropdownPosition?: 'top' | 'bottom';
 }
 
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className, options, onValueChange, ...props }, ref) => (
-    <select
-      ref={ref}
-      className={cn(
-        'h-9 w-full bg-input-bg text-text rounded-[6px] pl-4 pr-10 text-[17px] tracking-[-0.17px] outline-none transition-colors cursor-pointer',
-        className,
+/**
+ * Custom dropdown — no native <select>. Fully styled, no browser arrow issues.
+ */
+function Select({ value, options, onValueChange, placeholder, className, disabled, dropdownPosition = 'bottom' }: SelectProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const selected = options.find((o) => o.value === value);
+  const label = selected?.label ?? placeholder ?? 'Select...';
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  const handleSelect = useCallback((v: string) => {
+    onValueChange?.(v);
+    setOpen(false);
+  }, [onValueChange]);
+
+  return (
+    <div ref={ref} className={cn('relative', className)} style={{ minWidth: 0 }}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => !disabled && setOpen(!open)}
+        className={cn(
+          'h-9 w-full bg-input-bg text-text rounded-[6px] pl-3 pr-8 text-[13px] tracking-[-0.13px] text-left cursor-pointer border-none flex items-center',
+          'transition-colors hover:bg-surface-light',
+          disabled && 'opacity-50 cursor-default',
+        )}
+      >
+        <span className="truncate flex-1">{label}</span>
+        <svg
+          className="absolute right-3 top-1/2 text-text-dim shrink-0"
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+          style={{ transform: open ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%)', transition: 'transform 150ms ease' }}
+        >
+          <path d="M2.5 3.75L5 6.25L7.5 3.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className={cn(
+            'absolute z-50 left-0 right-0 bg-surface rounded-[6px] border border-border overflow-hidden',
+            dropdownPosition === 'top' ? 'bottom-full mb-1' : 'top-full mt-1',
+          )}
+          style={{ maxHeight: 200, overflowY: 'auto', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
+        >
+          {options.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              className={cn(
+                'w-full text-left px-3 py-2 text-[13px] tracking-[-0.13px] cursor-pointer border-none transition-colors font-normal',
+                o.value === value
+                  ? 'bg-accent text-text-highlight'
+                  : 'bg-transparent text-text hover:bg-surface-light',
+              )}
+              onClick={() => handleSelect(o.value)}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
       )}
-      onChange={(e) => onValueChange?.(e.target.value)}
-      {...props}
-    >
-      {options.map((o) => (
-        <option key={o.value} value={o.value}>
-          {o.label}
-        </option>
-      ))}
-    </select>
-  ),
-);
+    </div>
+  );
+}
 
 Select.displayName = 'Select';
 

package/web/icons/svg-icons.tsx

@@ -486,7 +486,7 @@ export const IcFeatMessage: SvgIcon = (props) => (
 export const IcFeatNavigate: SvgIcon = (props) => (
   <svg viewBox="0 0 32 32" fill="none" {...props}>
     <g clipPath="url(#clip0_10001_76324)">
-<path d="M6 30H4V12H6V30ZM22 20H20V18H22V20ZM24 18H22V16H24V18ZM26 16H24V14H26V16ZM28 14H26V12H28V14ZM26 12H6V10H26V12ZM30 12H28V10H30V12ZM28 10H26V8H28V10ZM26 8H24V6H26V8ZM24 6H22V4H24V6ZM22 2V4H20V2H22Z" fill="#232323"/>
+<path d="M6 30H4V12H6V30ZM22 20H20V18H22V20ZM24 18H22V16H24V18ZM26 16H24V14H26V16ZM28 14H26V12H28V14ZM26 12H6V10H26V12ZM30 12H28V10H30V12ZM28 10H26V8H28V10ZM26 8H24V6H26V8ZM24 6H22V4H24V6ZM22 2V4H20V2H22Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_10001_76324">
@@ -2163,4 +2163,3 @@ export const IcShare = IcEditShare;
 export const IcCopy = IcEditCopy;
 export const IcCheck = IcStatusCheckmark;
 export const IcMore = IcStatusMore;
-

package/web/index.ts

@@ -40,6 +40,9 @@ export type { PillProps } from './components/pill';
 export { Toggle } from './components/toggle';
 export type { ToggleProps } from './components/toggle';
 
+export { MultiSelect } from './components/multi-select';
+export type { MultiSelectProps, MultiSelectOption } from './components/multi-select';
+
 export { SegmentedControl } from './components/segmented-control';
 export type { SegmentedControlProps, SegmentedControlOption } from './components/segmented-control';
 

package/web/theme/utilities.css

@@ -23,6 +23,17 @@
   transition: stroke-dashoffset 0.5s ease;
 }
 
+/* Force hide native select arrow on all browsers */
+select {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  background-image: none !important;
+}
+select::-ms-expand {
+  display: none;
+}
+
 /* Bottom sheet slide-up animation */
 @keyframes slideUp {
   from { transform: translateY(100%); }