even-toolkit 1.4.2 → 1.5.1

package/web/components/multi-select.tsx

@@ -0,0 +1,118 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '../utils/cn';
+import { IcStatusCheckbox, IcStatusSelectedBox } from '../icons/svg-icons';
+
+interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+interface MultiSelectProps {
+  values: string[];
+  options: MultiSelectOption[];
+  onValuesChange: (values: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Custom multi-select dropdown with checkboxes. No native <select>.
+ */
+function MultiSelect({ values, options, onValuesChange, placeholder, className, disabled }: MultiSelectProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const selectedLabels = options
+    .filter((o) => values.includes(o.value))
+    .map((o) => o.label);
+
+  const displayText = selectedLabels.length > 0
+    ? selectedLabels.join(', ')
+    : 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 toggleValue = useCallback((v: string) => {
+    if (values.includes(v)) {
+      onValuesChange(values.filter((x) => x !== v));
+    } else {
+      onValuesChange([...values, v]);
+    }
+  }, [values, onValuesChange]);
+
+  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',
+          selectedLabels.length === 0 && 'text-text-dim',
+        )}
+      >
+        <span className="truncate flex-1">{displayText}</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="absolute z-50 top-full left-0 right-0 mt-1 bg-surface rounded-[6px] border border-border overflow-hidden"
+          style={{ maxHeight: 200, overflowY: 'auto', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
+        >
+          {options.map((o) => {
+            const checked = values.includes(o.value);
+            return (
+              <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 flex items-center gap-2',
+                  checked ? 'bg-accent/5' : 'bg-transparent hover:bg-surface-light',
+                )}
+                onClick={() => toggleValue(o.value)}
+              >
+                {checked
+                  ? <IcStatusSelectedBox width={18} height={18} className="shrink-0" />
+                  : <IcStatusCheckbox width={18} height={18} className="shrink-0 text-text-dim" />
+                }
+                <span className="text-text">{o.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+MultiSelect.displayName = 'MultiSelect';
+
+export { MultiSelect };
+export type { MultiSelectProps, MultiSelectOption };

package/web/components/paged-carousel.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+interface PagedCarouselProps {
+  children: React.ReactNode;
+  currentIndex?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  className?: string;
+  viewportClassName?: string;
+  trackClassName?: string;
+  slideClassName?: string;
+  allowWheel?: boolean;
+  allowSwipe?: boolean;
+}
+
+interface CardCarouselProps extends PagedCarouselProps {}
+
+function useCarouselIndex(
+  slideCount: number,
+  currentIndex?: number,
+  defaultIndex?: number,
+  onIndexChange?: (index: number) => void,
+) {
+  const [internalIndex, setInternalIndex] = React.useState(defaultIndex ?? 0);
+  const controlled = typeof currentIndex === 'number';
+  const activeIndex = controlled ? currentIndex! : internalIndex;
+
+  const setIndex = React.useCallback((nextIndex: number) => {
+    if (slideCount <= 0) return;
+    const clamped = Math.max(0, Math.min(nextIndex, slideCount - 1));
+    if (!controlled) setInternalIndex(clamped);
+    onIndexChange?.(clamped);
+  }, [controlled, onIndexChange, slideCount]);
+
+  return { activeIndex, setIndex };
+}
+
+function PagedCarousel({
+  children,
+  currentIndex,
+  defaultIndex = 0,
+  onIndexChange,
+  className,
+  viewportClassName,
+  trackClassName,
+  slideClassName,
+  allowWheel = true,
+  allowSwipe = true,
+}: PagedCarouselProps) {
+  const slides = React.Children.toArray(children);
+  const slideCount = slides.length;
+  const { activeIndex, setIndex } = useCarouselIndex(slideCount, currentIndex, defaultIndex, onIndexChange);
+
+  const touchStartRef = React.useRef<{ x: number; y: number } | null>(null);
+  const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
+  const wheelLockRef = React.useRef(0);
+
+  const moveBy = React.useCallback((delta: number) => {
+    setIndex(activeIndex + delta);
+  }, [activeIndex, setIndex]);
+
+  const handleTouchStart = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {
+    if (!allowSwipe) return;
+    const touch = event.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+  }, [allowSwipe]);
+
+  const handleTouchMove = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {
+    if (!allowSwipe) return;
+    const start = touchStartRef.current;
+    const touch = event.touches[0];
+    if (!start || !touch) return;
+
+    const deltaX = touch.clientX - start.x;
+    const deltaY = touch.clientY - start.y;
+    if (Math.abs(deltaX) < 32 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
+
+    touchStartRef.current = null;
+    event.preventDefault();
+    if (deltaX < 0) moveBy(1);
+    else moveBy(-1);
+  }, [allowSwipe, moveBy]);
+
+  const handleTouchEnd = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {
+    if (!allowSwipe) return;
+    const start = touchStartRef.current;
+    const touch = event.changedTouches[0];
+    touchStartRef.current = null;
+    if (!start || !touch) return;
+
+    const deltaX = touch.clientX - start.x;
+    const deltaY = touch.clientY - start.y;
+    if (Math.abs(deltaX) < 32 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
+
+    if (deltaX < 0) moveBy(1);
+    else moveBy(-1);
+  }, [allowSwipe, moveBy]);
+
+  const handlePointerDown = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (!allowSwipe) return;
+    if (event.pointerType !== 'mouse' && event.pointerType !== 'pen') return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    pointerStartRef.current = { x: event.clientX, y: event.clientY };
+  }, [allowSwipe]);
+
+  const handlePointerMove = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (!allowSwipe) return;
+    const start = pointerStartRef.current;
+    if (!start) return;
+
+    const deltaX = event.clientX - start.x;
+    const deltaY = event.clientY - start.y;
+    if (Math.abs(deltaX) < 32 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
+
+    pointerStartRef.current = null;
+    if (deltaX < 0) moveBy(1);
+    else moveBy(-1);
+  }, [allowSwipe, moveBy]);
+
+  const handlePointerUp = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (!allowSwipe) return;
+    const start = pointerStartRef.current;
+    pointerStartRef.current = null;
+    if (!start) return;
+
+    const deltaX = event.clientX - start.x;
+    const deltaY = event.clientY - start.y;
+    if (Math.abs(deltaX) < 32 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
+
+    if (deltaX < 0) moveBy(1);
+    else moveBy(-1);
+  }, [allowSwipe, moveBy]);
+
+  const handleWheel = React.useCallback((event: React.WheelEvent<HTMLDivElement>) => {
+    if (!allowWheel) return;
+    if (Math.abs(event.deltaX) < 18 || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
+
+    const now = Date.now();
+    if (now - wheelLockRef.current < 280) return;
+    wheelLockRef.current = now;
+
+    event.preventDefault();
+    if (event.deltaX > 0) moveBy(1);
+    else moveBy(-1);
+  }, [allowWheel, moveBy]);
+
+  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      moveBy(1);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      moveBy(-1);
+    }
+  }, [moveBy]);
+
+  return (
+    <div className={cn('min-w-0', className)}>
+      <div
+        role="region"
+        aria-roledescription="carousel"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        onWheel={handleWheel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        className={cn('min-w-0 overflow-hidden outline-none', viewportClassName)}
+        style={{ touchAction: 'none' }}
+      >
+        <div className={cn('min-w-0', trackClassName)}>
+          <div
+            key={activeIndex}
+            className={cn('w-full min-w-0', slideClassName)}
+            aria-hidden={false}
+          >
+            {slides[activeIndex] ?? null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CardCarousel(props: CardCarouselProps) {
+  return (
+    <PagedCarousel
+      {...props}
+      className={cn('min-w-0', props.className)}
+      viewportClassName={cn('rounded-[6px]', props.viewportClassName)}
+      slideClassName={cn('min-w-0', props.slideClassName)}
+    />
+  );
+}
+
+export { PagedCarousel, CardCarousel };
+export type { PagedCarouselProps, CardCarouselProps };

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';
 
@@ -118,6 +121,9 @@ export type { RadioGroupProps, RadioOption } from './components/radio-group';
 export { Slider } from './components/slider';
 export type { SliderProps } from './components/slider';
 
+export { PagedCarousel, CardCarousel } from './components/paged-carousel';
+export type { PagedCarouselProps, CardCarouselProps } from './components/paged-carousel';
+
 export { Skeleton, skeletonVariants } from './components/skeleton';
 export type { SkeletonProps } from './components/skeleton';
 

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%); }