even-toolkit 1.4.1 → 1.5.0

package/web/components/list-item.tsx

@@ -2,6 +2,7 @@ import { cn } from '../utils/cn';
 import { useRef, useState, useCallback } from 'react';
 import type { ReactNode, TouchEvent as ReactTouchEvent } from 'react';
 import { IcEditTrash } from '../icons/svg-icons';
+import { Loading } from './loading';
 
 interface ListItemProps {
   title: string;
@@ -9,7 +10,7 @@ interface ListItemProps {
   leading?: ReactNode;
   trailing?: ReactNode;
   onPress?: () => void;
-  onDelete?: () => void;
+  onDelete?: () => void | Promise<void>;
   className?: string;
 }
 
@@ -20,22 +21,23 @@ const DIRECTION_LOCK_PX = 10;
 function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, className }: ListItemProps) {
   const [offset, setOffset] = useState(0);
   const [swiping, setSwiping] = useState(false);
+  const [deleting, setDeleting] = useState(false);
   const startX = useRef(0);
   const startY = useRef(0);
   const currentOffset = useRef(0);
   const direction = useRef<'none' | 'horizontal' | 'vertical'>('none');
 
   const onTouchStart = useCallback((e: ReactTouchEvent) => {
-    if (!onDelete) return;
+    if (!onDelete || deleting) return;
     startX.current = e.touches[0].clientX;
     startY.current = e.touches[0].clientY;
     currentOffset.current = offset;
     direction.current = 'none';
     setSwiping(true);
-  }, [onDelete, offset]);
+  }, [deleting, onDelete, offset]);
 
   const onTouchMove = useCallback((e: ReactTouchEvent) => {
-    if (!swiping) return;
+    if (!swiping || deleting) return;
     const dx = e.touches[0].clientX - startX.current;
     const dy = e.touches[0].clientY - startY.current;
 
@@ -52,7 +54,7 @@ function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, class
 
     const next = Math.min(0, Math.max(-DELETE_WIDTH, currentOffset.current + dx));
     setOffset(next);
-  }, [swiping]);
+  }, [deleting, swiping]);
 
   const onTouchEnd = useCallback(() => {
     if (!swiping) return;
@@ -61,6 +63,18 @@ function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, class
     setOffset(offset < -SWIPE_THRESHOLD / 2 ? -DELETE_WIDTH : 0);
   }, [swiping, offset]);
 
+  const handleDeleteClick = useCallback(async () => {
+    if (!onDelete || deleting) return;
+    setDeleting(true);
+    try {
+      await Promise.resolve(onDelete());
+    } finally {
+      setDeleting(false);
+      setOffset(0);
+      direction.current = 'none';
+    }
+  }, [deleting, onDelete]);
+
   const Comp = onPress ? 'button' : 'div';
 
   return (
@@ -68,22 +82,23 @@ function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, class
       {onDelete && offset < 0 && (
         <button
           type="button"
-          onClick={onDelete}
-          className="absolute right-0 top-0 bottom-0 flex items-center justify-center bg-negative text-text-highlight cursor-pointer"
+          onClick={handleDeleteClick}
+          disabled={deleting}
+          className="absolute right-0 top-0 bottom-0 flex items-center justify-center bg-negative text-text-highlight cursor-pointer disabled:cursor-default"
           style={{ width: DELETE_WIDTH }}
         >
-          <IcEditTrash width={20} height={20} />
+          {deleting ? <Loading size={18} className="text-text-highlight" /> : <IcEditTrash width={20} height={20} />}
         </button>
       )}
       <Comp
         type={onPress ? 'button' : undefined}
-        onClick={onPress}
+        onClick={deleting ? undefined : onPress}
         onTouchStart={onTouchStart}
         onTouchMove={onTouchMove}
         onTouchEnd={onTouchEnd}
         className={cn(
           'flex items-center gap-4 w-full bg-surface p-4 text-left transition-colors relative',
-          onPress && 'cursor-pointer hover:bg-surface-light',
+          onPress && !deleting && 'cursor-pointer hover:bg-surface-light',
           className,
         )}
         style={{

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/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/components/side-drawer.tsx

@@ -0,0 +1,246 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from 'react';
+import { cn } from '../utils/cn';
+
+/* ── Types ── */
+
+interface SideDrawerItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  section?: string;
+}
+
+interface SideDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  onNavigate: (id: string) => void;
+  activeId: string;
+  items: SideDrawerItem[];
+  bottomItems?: SideDrawerItem[];
+  title?: string;
+  footer?: ReactNode;
+  children: ReactNode;
+  width?: number;
+  className?: string;
+}
+
+/* ── Constants ── */
+
+const DEFAULT_WIDTH = 280;
+const SHIFT_EXTRA = 20;
+const MAIN_SCALE = 0.985;
+const TRANSITION = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 300ms ease';
+const SIDEBAR_TRANSITION = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease';
+
+/* ── Shared item renderer ── */
+
+function renderItemSection(
+  sectionName: string,
+  sectionItems: SideDrawerItem[],
+  activeId: string,
+  onNavigate: (id: string) => void,
+) {
+  return (
+    <div key={sectionName || '__default'}>
+      {sectionName && (
+        <div className="px-3 pt-4 pb-1.5">
+          <span className="text-[11px] tracking-[-0.11px] text-text-dim font-normal uppercase">
+            {sectionName}
+          </span>
+        </div>
+      )}
+      {sectionItems.map((item) => {
+        const isActive = activeId === item.id || (item.id !== '/' && activeId.startsWith(item.id));
+        return (
+          <button
+            key={item.id}
+            onClick={() => onNavigate(item.id)}
+            className={cn(
+              'w-full flex items-center gap-3 px-3 h-11 rounded-[6px] mb-0.5 text-left cursor-pointer border-none',
+              'transition-colors',
+              isActive
+                ? 'bg-surface-light text-accent'
+                : 'text-text hover:bg-surface-light/50',
+            )}
+          >
+            {item.icon && <span className="shrink-0 w-5 flex items-center justify-center">{item.icon}</span>}
+            <span className="text-[15px] tracking-[-0.15px] font-normal">{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function groupBySection(items: SideDrawerItem[]): Map<string, SideDrawerItem[]> {
+  const sections = new Map<string, SideDrawerItem[]>();
+  for (const item of items) {
+    const key = item.section ?? '';
+    if (!sections.has(key)) sections.set(key, []);
+    sections.get(key)!.push(item);
+  }
+  return sections;
+}
+
+/* ── SideDrawer ── */
+
+function SideDrawer({
+  open,
+  onClose,
+  onNavigate,
+  activeId,
+  items,
+  bottomItems,
+  title,
+  footer,
+  children,
+  width = DEFAULT_WIDTH,
+  className,
+}: SideDrawerProps) {
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  const shift = width + SHIFT_EXTRA;
+  const sections = groupBySection(items);
+  const bottomSections = bottomItems ? groupBySection(bottomItems) : null;
+
+  return (
+    <div className={cn('relative h-dvh w-full overflow-hidden bg-bg', className)}>
+      {/* Sidebar panel */}
+      <div
+        className="absolute top-0 left-0 bottom-0 flex flex-col bg-bg z-0"
+        style={{
+          width: `${width}px`,
+          transform: open ? 'translateX(0)' : `translateX(-${width * 0.3}px)`,
+          opacity: open ? 1 : 0,
+          transition: SIDEBAR_TRANSITION,
+          pointerEvents: open ? 'auto' : 'none',
+        }}
+      >
+        {/* Header */}
+        {title && (
+          <div className="shrink-0 px-4 pt-4 pb-3">
+            <span className="text-[20px] tracking-[-0.6px] font-normal text-text">{title}</span>
+          </div>
+        )}
+
+        {/* Menu items */}
+        <div className="flex-1 overflow-y-auto px-2 py-1">
+          {[...sections.entries()].map(([name, items]) =>
+            renderItemSection(name, items, activeId, onNavigate),
+          )}
+        </div>
+
+        {/* Bottom items */}
+        {bottomSections && (
+          <div className="shrink-0 border-t border-border px-2 py-1">
+            {[...bottomSections.entries()].map(([name, items]) =>
+              renderItemSection(name, items, activeId, onNavigate),
+            )}
+          </div>
+        )}
+
+        {/* Footer */}
+        {footer && (
+          <div className={cn('shrink-0 px-2 py-2', !bottomSections && 'border-t border-border')}>
+            {footer}
+          </div>
+        )}
+      </div>
+
+      {/* Main content */}
+      <div
+        className="relative h-full w-full z-[1] bg-bg overflow-hidden"
+        style={{
+          transform: open
+            ? `translateX(${shift}px) scale(${MAIN_SCALE})`
+            : 'translateX(0) scale(1)',
+          borderRadius: open ? '16px' : '0px',
+          transition: TRANSITION,
+          transformOrigin: 'left center',
+        }}
+      >
+        {children}
+
+        {/* Dark overlay */}
+        <div
+          onClick={onClose}
+          className="absolute inset-0 bg-black cursor-pointer z-[2]"
+          style={{
+            opacity: open ? 0.45 : 0,
+            pointerEvents: open ? 'auto' : 'none',
+            transition: 'opacity 300ms ease',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ── DrawerTrigger (hamburger button) ── */
+
+function DrawerTrigger({ onClick, className }: { onClick: () => void; className?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'flex items-center justify-center w-9 h-9 rounded-[6px] cursor-pointer border-none bg-transparent',
+        'text-text hover:bg-surface-light transition-colors',
+        className,
+      )}
+      aria-label="Open menu"
+    >
+      <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1h16M1 7h16M1 13h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      </svg>
+    </button>
+  );
+}
+
+/* ── Drawer Header Context ── */
+
+interface DrawerHeaderConfig {
+  title?: string;
+  left?: ReactNode;
+  right?: ReactNode;
+  below?: ReactNode;
+  footer?: ReactNode;
+  backTo?: string;
+  hidden?: boolean;
+}
+
+interface DrawerHeaderContextValue {
+  setHeader: (config: DrawerHeaderConfig) => void;
+  resetHeader: () => void;
+}
+
+const DrawerHeaderContext = createContext<DrawerHeaderContextValue | null>(null);
+
+function useDrawerHeader(config: DrawerHeaderConfig): void {
+  const ctx = useContext(DrawerHeaderContext);
+  const configRef = useMemo(() => config, [
+    config.title,
+    config.left,
+    config.right,
+    config.below,
+    config.footer,
+    config.backTo,
+    config.hidden,
+  ]);
+
+  useLayoutEffect(() => {
+    if (!ctx) return;
+    ctx.setHeader(configRef);
+    return () => ctx.resetHeader();
+  }, [ctx, configRef]);
+}
+
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader };
+export type { SideDrawerProps, SideDrawerItem, DrawerHeaderConfig, DrawerHeaderContextValue };

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';
 
@@ -167,6 +170,12 @@ export type { AudioPlayerProps } from './components/audio-player';
 export { AppShell } from './components/app-shell';
 export type { AppShellProps } from './components/app-shell';
 
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader } from './components/side-drawer';
+export type { SideDrawerProps, SideDrawerItem, DrawerHeaderConfig, DrawerHeaderContextValue } from './components/side-drawer';
+
+export { DrawerShell } from './components/drawer-shell';
+export type { DrawerShellProps } from './components/drawer-shell';
+
 // Scroll Picker
 export { ScrollPicker, DatePicker, TimePicker, SelectionPicker } from './components/scroll-picker';
 export type { ScrollPickerProps, ScrollColumn, DatePickerProps, TimePickerProps, SelectionPickerProps } from './components/scroll-picker';

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