@hilum/ui 3.3.4 → 3.5.0

package/src/components/select.tsx

@@ -1,146 +1,733 @@
 "use client";
 
-import * as React from "react";
-import { Select } from "radix-ui";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { cn } from "../lib/utils";
 import {
-  mobilePopperSheetMotionClassName,
-  mobilePopperSheetPositionClassName,
-  mobilePopperSheetStyle,
-  mobilePopperSheetSurfaceClassName,
-} from "../lib/mobile-popper-sheet";
-
-const SelectRoot = Select.Root;
-const SelectGroup = Select.Group;
-const SelectValue = Select.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ComponentRef<typeof Select.Trigger>,
-  React.ComponentPropsWithoutRef<typeof Select.Trigger>
->(({ className, children, ...props }, ref) => (
-  <Select.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
-      "body text-foreground shadow-natural",
-      "focus:outline-none focus:ring-2 focus:ring-ring/20",
-      "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-muted-foreground",
-      "[&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <Select.Icon asChild>
-      <ChevronDown size={15} className="text-muted-foreground shrink-0" />
-    </Select.Icon>
-  </Select.Trigger>
-));
+  forwardRef,
+  useRef,
+  useEffect,
+  useState,
+  useCallback,
+  createContext,
+  useContext,
+  Children,
+  cloneElement,
+  isValidElement,
+  type ReactNode,
+  type HTMLAttributes,
+} from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { IconComponent } from "../lib/icon-context";
+import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
+import { useProximityHover } from "../hooks/use-proximity-hover";
+import { useShape } from "../lib/shape-context";
+import { useScrollEdges, ScrollEdgeCue } from "../lib/scroll-fade";
+import { Elevated } from "../lib/elevated";
+
+// ---------------------------------------------------------------------------
+// Select context
+// ---------------------------------------------------------------------------
+
+interface SelectContextValue {
+  value: string;
+  onChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled: boolean;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  labelMap: React.MutableRefObject<Map<string, string>>;
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null);
+
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx) throw new Error("Select compound components must be inside <Select>");
+  return ctx;
+}
+
+// Content context for proximity hover
+interface SelectContentContextValue {
+  registerItem: (index: number, element: HTMLElement | null) => void;
+  activeIndex: number | null;
+  checkedIndex?: number;
+}
+
+const SelectContentContext = createContext<SelectContentContextValue | null>(null);
+
+// ---------------------------------------------------------------------------
+// Select (root)
+// ---------------------------------------------------------------------------
+
+interface SelectProps {
+  children: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  name?: string;
+  required?: boolean;
+}
+
+function Select({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  name,
+  required,
+}: SelectProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [open, setOpen] = useState(false);
+  const currentValue = value !== undefined ? value : internalValue;
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const labelMap = useRef(new Map<string, string>());
+
+  const onChange = useCallback(
+    (v: string) => {
+      if (value === undefined) setInternalValue(v);
+      onValueChange?.(v);
+      setOpen(false);
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    },
+    [value, onValueChange],
+  );
+
+  return (
+    <SelectContext.Provider
+      value={{
+        value: currentValue,
+        onChange,
+        open,
+        setOpen,
+        disabled,
+        triggerRef,
+        labelMap,
+      }}
+    >
+      {children}
+      {name && <input type="hidden" name={name} value={currentValue} required={required} />}
+    </SelectContext.Provider>
+  );
+}
+
+Select.displayName = "Select";
+
+// ---------------------------------------------------------------------------
+// SelectTrigger
+// ---------------------------------------------------------------------------
+
+const triggerVariants = cva(
+  [
+    "group inline-flex items-center justify-between gap-2 outline-none cursor-pointer",
+    "text-[13px] h-9 px-3 min-w-[160px]",
+    "transition-all duration-80",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+  ],
+  {
+    variants: {
+      variant: {
+        bordered: "border border-border bg-transparent text-foreground hover:bg-hover",
+        borderless: "border border-transparent bg-transparent text-foreground hover:bg-hover",
+      },
+    },
+    defaultVariants: {
+      variant: "bordered",
+    },
+  },
+);
+
+interface SelectTriggerProps
+  extends HTMLAttributes<HTMLButtonElement>, VariantProps<typeof triggerVariants> {
+  icon?: IconComponent;
+  placeholder?: string;
+  error?: string;
+}
+
+const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  ({ className, variant, icon: Icon, placeholder = "Select…", error, children, ...props }, ref) => {
+    const { value, open, setOpen, disabled, triggerRef, labelMap } = useSelectContext();
+    const shape = useShape();
+    const label = value ? (labelMap.current.get(value) ?? value) : undefined;
+
+    return (
+      <div className="flex flex-col gap-1">
+        <button
+          ref={(node) => {
+            (triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+          }}
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          disabled={disabled}
+          onClick={() => setOpen(!open)}
+          onKeyDown={(e) => {
+            if (
+              !open &&
+              (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ")
+            ) {
+              e.preventDefault();
+              setOpen(true);
+            }
+          }}
+          aria-invalid={!!error || undefined}
+          className={cn(
+            triggerVariants({ variant }),
+            shape.input,
+            error && "border-destructive/50 hover:border-destructive/50",
+            className,
+          )}
+          {...props}
+        >
+          <span className="flex items-center gap-2 min-w-0 flex-1">
+            {Icon && (
+              <Icon
+                size={16}
+                strokeWidth={1.5}
+                className="shrink-0 text-muted-foreground transition-[color,stroke-width] duration-80 group-hover:text-foreground group-hover:stroke-[2]"
+              />
+            )}
+            {children ?? (
+              <span className="min-w-0 flex-1 text-left truncate">
+                {label ?? <span className="text-muted-foreground">{placeholder}</span>}
+              </span>
+            )}
+          </span>
+
+          <svg
+            width={16}
+            height={16}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="shrink-0 text-muted-foreground transition-colors duration-80 group-hover:text-foreground"
+          >
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+        {error && <span className="text-[12px] text-destructive pl-3">{error}</span>}
+      </div>
+    );
+  },
+);
+
 SelectTrigger.displayName = "SelectTrigger";
 
-const SelectContent = React.forwardRef<
-  React.ComponentRef<typeof Select.Content>,
-  React.ComponentPropsWithoutRef<typeof Select.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <>
-    <style>{mobilePopperSheetStyle}</style>
-    <Select.Portal>
-      <Select.Content
-        ref={ref}
-        data-hilum-mobile-sheet="true"
+// ---------------------------------------------------------------------------
+// SelectContent
+// ---------------------------------------------------------------------------
+
+interface SelectContentProps {
+  className?: string;
+  children: ReactNode;
+  /** Show a fade + chevron cue at the scroll edges when the list overflows its
+   *  max-height, signalling there's more to scroll. Auto-activates on overflow;
+   *  set to `false` to disable. Defaults to `true`. */
+  scrollFade?: boolean;
+}
+
+const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ className, children, scrollFade = true }, ref) => {
+    const { open, setOpen, value, triggerRef } = useSelectContext();
+    const shape = useShape();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+
+    // Scroll-edge cues show only when there's more content above/below the
+    // visible area. `triggerRect !== null` gates attachment until the portal
+    // (and thus containerRef.current) has mounted.
+    const edges = useScrollEdges(containerRef, {
+      enabled: open && scrollFade && triggerRect !== null,
+    });
+
+    const {
+      activeIndex,
+      setActiveIndex,
+      itemRects,
+      sessionRef,
+      handlers,
+      registerItem,
+      measureItems,
+    } = useProximityHover(containerRef);
+
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const [checkedIndex, setCheckedIndex] = useState<number | undefined>(undefined);
+
+    // Capture trigger rect synchronously when opening
+    useEffect(() => {
+      if (open && triggerRef.current) {
+        setTriggerRect(triggerRef.current.getBoundingClientRect());
+      }
+    }, [open, triggerRef]);
+
+    // Measure items + detect checked AFTER the portal has mounted
+    // triggerRect being set means the portal will render on the next commit
+    useEffect(() => {
+      if (!open || !triggerRect) return;
+      // Double rAF: first waits for React commit, second for layout
+      let outer: number;
+      let inner: number;
+      outer = requestAnimationFrame(() => {
+        inner = requestAnimationFrame(() => {
+          measureItems();
+          const container = containerRef.current;
+          if (container) {
+            const items = Array.from(
+              container.querySelectorAll("[data-proximity-index]"),
+            ) as HTMLElement[];
+            const idx = items.findIndex((el) => el.getAttribute("data-value") === value);
+            if (idx !== -1) setCheckedIndex(idx);
+            else setCheckedIndex(undefined);
+
+            // Focus the container so keyboard events work;
+            // don't focus an item directly to avoid showing a focus ring
+            containerRef.current?.focus({ preventScroll: true });
+          }
+        });
+      });
+      return () => {
+        cancelAnimationFrame(outer);
+        cancelAnimationFrame(inner);
+      };
+    }, [open, triggerRect, measureItems, value]);
+
+    // Close on escape
+    useEffect(() => {
+      if (!open) return;
+      const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          setOpen(false);
+          triggerRef.current?.focus();
+        }
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [open, setOpen, triggerRef]);
+
+    // Close on click outside
+    useEffect(() => {
+      if (!open) return;
+      const onPointer = (e: MouseEvent) => {
+        if (
+          !containerRef.current?.contains(e.target as Node) &&
+          !triggerRef.current?.contains(e.target as Node)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onPointer);
+      return () => document.removeEventListener("mousedown", onPointer);
+    }, [open, setOpen, triggerRef]);
+
+    // Close on scroll (instead of locking body scroll, which causes layout shift)
+    useEffect(() => {
+      if (!open) return;
+      const onScroll = () => setOpen(false);
+      window.addEventListener("scroll", onScroll, { passive: true });
+      return () => window.removeEventListener("scroll", onScroll);
+    }, [open, setOpen]);
+
+    // Keyboard nav inside content
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        const items = Array.from(
+          containerRef.current?.querySelectorAll('[role="option"]:not([data-disabled])') ?? [],
+        ) as HTMLElement[];
+        const currentIdx = items.indexOf(e.target as HTMLElement);
+
+        if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) {
+          e.preventDefault();
+          if (currentIdx === -1) {
+            // No item focused yet — focus checked or first item
+            const checked =
+              value !== "" ? items.find((item) => item.getAttribute("data-value") === value) : null;
+            (checked ?? items[0])?.focus();
+          } else {
+            const next = ["ArrowDown", "ArrowRight"].includes(e.key)
+              ? (currentIdx + 1) % items.length
+              : (currentIdx - 1 + items.length) % items.length;
+            items[next]?.focus();
+          }
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        }
+      },
+      [value],
+    );
+
+    const indexedChildren = Children.map(children, (child, index) => {
+      if (!isValidElement(child)) return child;
+      const childProps = child.props as { index?: number };
+      if (childProps.index !== undefined) return child;
+      return cloneElement(child, { index } as Record<string, unknown>);
+    });
+
+    // Render hidden when closed so items can register labels
+    if (!open) {
+      return (
+        <div hidden aria-hidden="true">
+          {indexedChildren}
+        </div>
+      );
+    }
+
+    if (!triggerRect) return null;
+
+    const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
+    const checkedRect = checkedIndex != null ? itemRects[checkedIndex] : null;
+    const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+    const isHoveringOther = activeIndex !== null && activeIndex !== checkedIndex;
+
+    return createPortal(
+      <SelectContentContext.Provider
+        value={
+          checkedIndex === undefined
+            ? { registerItem, activeIndex }
+            : { registerItem, activeIndex, checkedIndex }
+        }
+      >
+        <div
+          style={{
+            position: "fixed",
+            top: triggerRect.bottom + 6,
+            left: triggerRect.left,
+            minWidth: triggerRect.width,
+            zIndex: 50,
+          }}
+        >
+          <motion.div
+            initial={{ opacity: 0, y: -4, scaleY: 0.96 }}
+            animate={{ opacity: 1, y: 0, scaleY: 1 }}
+            transition={spring.fast}
+            style={{ transformOrigin: "top center" }}
+          >
+            <Elevated
+              offset={2}
+              shadowLevel={3}
+              ref={(node) => {
+                (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+                if (typeof ref === "function") ref(node);
+                else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+              }}
+              role="listbox"
+              data-hilum-mobile-sheet="true"
+              tabIndex={-1}
+              onMouseEnter={() => {
+                handlers.onMouseEnter();
+                setFocusedIndex(null);
+              }}
+              onMouseMove={handlers.onMouseMove}
+              onMouseLeave={handlers.onMouseLeave}
+              onFocus={(e) => {
+                const indexAttr = (e.target as HTMLElement)
+                  .closest("[data-proximity-index]")
+                  ?.getAttribute("data-proximity-index");
+                if (indexAttr != null) {
+                  const idx = Number(indexAttr);
+                  setActiveIndex(idx);
+                  setFocusedIndex((e.target as HTMLElement).matches(":focus-visible") ? idx : null);
+                }
+              }}
+              onBlur={(e) => {
+                if (containerRef.current?.contains(e.relatedTarget as Node)) return;
+                setFocusedIndex(null);
+                setActiveIndex(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className={cn(
+                `relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape.container} p-1 select-none outline-none max-sm:!fixed max-sm:rounded-2xl max-sm:data-[state=open]:slide-in-from-bottom`,
+                className,
+              )}
+            >
+              {/* Selected background */}
+              <AnimatePresence>
+                {checkedRect && (
+                  <motion.div
+                    className={`absolute ${shape.bg} bg-active pointer-events-none`}
+                    initial={false}
+                    animate={{
+                      top: checkedRect.top,
+                      left: checkedRect.left,
+                      width: checkedRect.width,
+                      height: checkedRect.height,
+                      opacity: isHoveringOther ? 0.8 : 1,
+                    }}
+                    exit={{ opacity: 0, transition: spring.moderate.exit }}
+                    transition={{
+                      ...spring.moderate,
+                      opacity: { duration: 0.08 },
+                    }}
+                  />
+                )}
+              </AnimatePresence>
+
+              {/* Hover background */}
+              <AnimatePresence>
+                {activeRect && (
+                  <motion.div
+                    key={sessionRef.current}
+                    className={`absolute ${shape.bg} bg-hover pointer-events-none`}
+                    initial={{
+                      opacity: 0,
+                      top: checkedRect?.top ?? activeRect.top,
+                      left: checkedRect?.left ?? activeRect.left,
+                      width: checkedRect?.width ?? activeRect.width,
+                      height: checkedRect?.height ?? activeRect.height,
+                    }}
+                    animate={{
+                      opacity: 1,
+                      top: activeRect.top,
+                      left: activeRect.left,
+                      width: activeRect.width,
+                      height: activeRect.height,
+                    }}
+                    exit={{ opacity: 0, transition: spring.fast.exit }}
+                    transition={{
+                      ...spring.fast,
+                      opacity: { duration: 0.08 },
+                    }}
+                  />
+                )}
+              </AnimatePresence>
+
+              {/* Focus ring */}
+              <AnimatePresence>
+                {focusRect && (
+                  <motion.div
+                    className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-[#6B97FF]`}
+                    initial={false}
+                    animate={{
+                      left: focusRect.left - 2,
+                      top: focusRect.top - 2,
+                      width: focusRect.width + 4,
+                      height: focusRect.height + 4,
+                    }}
+                    exit={{ opacity: 0, transition: spring.fast.exit }}
+                    transition={{
+                      ...spring.fast,
+                      opacity: { duration: 0.08 },
+                    }}
+                  />
+                )}
+              </AnimatePresence>
+
+              {/* Cues read the elevated surface level from Elevated's provider,
+                so the gradient matches the menu background at any depth. */}
+              {scrollFade && <ScrollEdgeCue edge="top" visible={edges.top} />}
+
+              {indexedChildren}
+
+              {scrollFade && <ScrollEdgeCue edge="bottom" visible={edges.bottom} />}
+            </Elevated>
+          </motion.div>
+        </div>
+      </SelectContentContext.Provider>,
+      document.body,
+    );
+  },
+);
+
+SelectContent.displayName = "SelectContent";
+
+// ---------------------------------------------------------------------------
+// SelectItem
+// ---------------------------------------------------------------------------
+
+interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: IconComponent;
+  index?: number;
+  value: string;
+  disabled?: boolean;
+}
+
+const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ className, children, icon: Icon, value, index = 0, disabled = false, ...props }, ref) => {
+    const selectCtx = useSelectContext();
+    const contentCtx = useContext(SelectContentContext);
+    const internalRef = useRef<HTMLDivElement>(null);
+    const shape = useShape();
+    const hasMounted = useRef(false);
+
+    useEffect(() => {
+      hasMounted.current = true;
+    }, []);
+
+    // Register label with root context
+    useEffect(() => {
+      if (typeof children === "string") {
+        selectCtx.labelMap.current.set(value, children);
+      }
+    }, [value, children, selectCtx.labelMap]);
+
+    // Register with proximity hover (only when content context exists = open)
+    useEffect(() => {
+      contentCtx?.registerItem(index, internalRef.current);
+      return () => contentCtx?.registerItem(index, null);
+    }, [index, contentCtx]);
+
+    const isActive = contentCtx?.activeIndex === index;
+    const isChecked = selectCtx.value === value;
+    const skipAnimation = !hasMounted.current;
+
+    return (
+      <div
+        ref={(node) => {
+          (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
+        data-proximity-index={index}
+        data-value={value}
+        data-disabled={disabled || undefined}
+        role="option"
+        aria-selected={isChecked}
+        aria-label={typeof children === "string" ? children : undefined}
+        tabIndex={isChecked ? 0 : index === (contentCtx?.checkedIndex ?? 0) ? 0 : -1}
+        onClick={() => {
+          if (!disabled) selectCtx.onChange(value);
+        }}
+        onKeyDown={(e) => {
+          if ((e.key === "Enter" || e.key === " ") && !disabled) {
+            e.preventDefault();
+            selectCtx.onChange(value);
+          }
+        }}
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
-          "bg-card rounded-xl shadow-natural p-1",
-          mobilePopperSheetPositionClassName,
-          mobilePopperSheetSurfaceClassName,
-          "max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          mobilePopperSheetMotionClassName,
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+          `relative z-10 flex items-center gap-2 ${shape.item} px-2 py-2 text-[13px] cursor-pointer outline-none select-none`,
+          "transition-[color] duration-80",
+          isActive || isChecked ? "text-foreground" : "text-muted-foreground",
+          disabled && "opacity-50 pointer-events-none",
           className,
         )}
-        position={position}
         {...props}
       >
-        <Select.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
-          <ChevronUp size={14} className="text-muted-foreground" />
-        </Select.ScrollUpButton>
-        <Select.Viewport
-          className={cn(
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-            "max-sm:!h-auto max-sm:max-h-[calc(min(70dvh,28rem)-3rem)] max-sm:!w-full max-sm:!min-w-0",
+        {Icon && (
+          <Icon
+            size={16}
+            strokeWidth={isActive || isChecked ? 2 : 1.5}
+            className="shrink-0 transition-[color,stroke-width] duration-80"
+          />
+        )}
+
+        <span className="flex-1 min-w-0 truncate">{children}</span>
+
+        <AnimatePresence>
+          {isChecked && (
+            <motion.svg
+              key="check"
+              width={16}
+              height={16}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="shrink-0 text-foreground"
+              initial={{ opacity: 1 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 1 }}
+            >
+              <motion.path
+                d="M4 12L9 17L20 6"
+                initial={{ pathLength: skipAnimation ? 1 : 0 }}
+                animate={{
+                  pathLength: 1,
+                  transition: { duration: 0.08, ease: "easeOut" },
+                }}
+                exit={{
+                  pathLength: 0,
+                  transition: { duration: 0.04, ease: "easeIn" },
+                }}
+              />
+            </motion.svg>
           )}
-        >
-          {children}
-        </Select.Viewport>
-        <Select.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
-          <ChevronDown size={14} className="text-muted-foreground" />
-        </Select.ScrollDownButton>
-      </Select.Content>
-    </Select.Portal>
-  </>
-));
-SelectContent.displayName = "SelectContent";
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
 
-const SelectItem = React.forwardRef<
-  React.ComponentRef<typeof Select.Item>,
-  React.ComponentPropsWithoutRef<typeof Select.Item>
->(({ className, children, ...props }, ref) => (
-  <Select.Item
-    ref={ref}
-    className={cn(
-      "relative flex min-h-10 w-full cursor-default select-none items-center rounded-md px-2.5 py-2",
-      "body text-muted-foreground outline-none",
-      "focus:bg-muted focus:text-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex size-3.5 items-center justify-center">
-      <Select.ItemIndicator>
-        <Check size={13} className="text-foreground" />
-      </Select.ItemIndicator>
-    </span>
-    <Select.ItemText>{children}</Select.ItemText>
-  </Select.Item>
-));
 SelectItem.displayName = "SelectItem";
 
-const SelectLabel = React.forwardRef<
-  React.ComponentRef<typeof Select.Label>,
-  React.ComponentPropsWithoutRef<typeof Select.Label>
->(({ className, ...props }, ref) => (
-  <Select.Label
-    ref={ref}
-    className={cn("px-2.5 py-1 label text-muted-foreground", className)}
-    {...props}
-  />
-));
+// ---------------------------------------------------------------------------
+// SelectGroup + SelectLabel + SelectSeparator
+// ---------------------------------------------------------------------------
+
+function SelectGroup({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div role="group" className={className} {...props}>
+      {children}
+    </div>
+  );
+}
+
+SelectGroup.displayName = "SelectGroup";
+
+const SelectLabel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("px-2 py-1.5 text-[11px] text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+
 SelectLabel.displayName = "SelectLabel";
 
-const SelectSeparator = React.forwardRef<
-  React.ComponentRef<typeof Select.Separator>,
-  React.ComponentPropsWithoutRef<typeof Select.Separator>
->(({ className, ...props }, ref) => (
-  <Select.Separator ref={ref} className={cn("mx-1 my-1 h-px bg-muted", className)} {...props} />
-));
+const SelectSeparator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      className={cn("my-1 -mx-1 h-px bg-border/60", className)}
+      {...props}
+    />
+  ),
+);
+
 SelectSeparator.displayName = "SelectSeparator";
 
+function SelectValue({ placeholder }: { placeholder?: string }) {
+  const { value, labelMap } = useSelectContext();
+  const label = value ? (labelMap.current.get(value) ?? value) : undefined;
+  return (
+    <span className="min-w-0 flex-1 text-left truncate">
+      {label ?? <span className="text-muted-foreground">{placeholder}</span>}
+    </span>
+  );
+}
+
+SelectValue.displayName = "SelectValue";
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
 export {
-  SelectRoot as Select,
-  SelectGroup,
-  SelectValue,
+  Select,
   SelectTrigger,
   SelectContent,
   SelectItem,
+  SelectValue,
+  SelectGroup,
   SelectLabel,
   SelectSeparator,
+  triggerVariants,
 };
+
+export type { SelectProps, SelectTriggerProps, SelectContentProps, SelectItemProps };