@hilum/ui 3.4.0 → 3.5.0

package/src/components/status-badge.tsx

@@ -72,6 +72,8 @@ const DEFAULT_STATUS_VARIANT: Record<string, StatusBadgeVariant> = {
 
 const DEFAULT_DOT_CLASS: Record<StatusBadgeVariant, string> = {
   default: "bg-background",
+  solid: "bg-background",
+  dot: "bg-muted-foreground",
   secondary: "bg-muted-foreground",
   outline: "bg-muted-foreground",
   brand: "bg-background",

package/src/components/switch.tsx

@@ -1,33 +1,250 @@
 "use client";
 
-import * as React from "react";
-import { Switch } from "radix-ui";
+import { forwardRef, useRef, useState, useEffect, useCallback, type HTMLAttributes } from "react";
+import { motion, useMotionValue, animate, type Transition } from "framer-motion";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
 
-const SwitchRoot = React.forwardRef<
-  React.ComponentRef<typeof Switch.Root>,
-  React.ComponentPropsWithoutRef<typeof Switch.Root>
->(({ className, ...props }, ref) => (
-  <Switch.Root
-    ref={ref}
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
-      "border-2 border-transparent transition-[background-color,border-color,box-shadow] duration-150",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=unchecked]:bg-muted data-[state=checked]:bg-brand-primary",
+interface SwitchProps extends Omit<HTMLAttributes<HTMLDivElement>, "onToggle"> {
+  label?: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  onToggle?: (checked: boolean) => void;
+  disabled?: boolean;
+  thumbTransition?: Transition;
+}
+
+const TRACK_WIDTH = 34;
+const TRACK_HEIGHT = 20;
+const THUMB_SIZE = 16;
+const THUMB_OFFSET = 2;
+const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
+const PILL_EXTEND = 2;
+const PRESS_EXTEND = 4;
+const PRESS_SHRINK = 4;
+const DRAG_DEAD_ZONE = 2;
+
+const Switch = forwardRef<HTMLDivElement, SwitchProps>(
+  (
+    {
+      label,
+      checked: checkedProp,
+      defaultChecked = false,
+      onCheckedChange,
+      onToggle,
+      disabled = false,
+      thumbTransition,
       className,
-    )}
-    {...props}
-  >
-    <Switch.Thumb
-      className={cn(
-        "pointer-events-none block size-5 rounded-full bg-card shadow-natural",
-        "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
-      )}
-    />
-  </Switch.Root>
-));
-SwitchRoot.displayName = "Switch";
-
-export { SwitchRoot as Switch };
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+    const checked = checkedProp ?? uncontrolledChecked;
+    const hasMounted = useRef(false);
+    const [hovered, setHovered] = useState(false);
+    const [pressed, setPressed] = useState(false);
+
+    // Drag refs (not state to avoid re-renders during drag)
+    const dragging = useRef(false);
+    const didDrag = useRef(false);
+    const pointerStart = useRef<{
+      clientX: number;
+      originX: number;
+    } | null>(null);
+
+    // Motion value for thumb x-axis
+    const motionX = useMotionValue(checked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET);
+
+    useEffect(() => {
+      hasMounted.current = true;
+    }, []);
+
+    // Compute thumb shape
+    const thumbWidth = pressed
+      ? THUMB_SIZE + PRESS_EXTEND
+      : hovered
+        ? THUMB_SIZE + PILL_EXTEND
+        : THUMB_SIZE;
+    const thumbHeight = pressed ? THUMB_SIZE - PRESS_SHRINK : THUMB_SIZE;
+    const thumbY = pressed ? THUMB_OFFSET + PRESS_SHRINK / 2 : THUMB_OFFSET;
+    const extraWidth = thumbWidth - THUMB_SIZE;
+    const thumbX = checked ? THUMB_OFFSET + THUMB_TRAVEL - extraWidth : THUMB_OFFSET;
+
+    const setChecked = useCallback(
+      (nextChecked: boolean) => {
+        if (checkedProp === undefined) setUncontrolledChecked(nextChecked);
+        onCheckedChange?.(nextChecked);
+        onToggle?.(nextChecked);
+      },
+      [checkedProp, onCheckedChange, onToggle],
+    );
+
+    // Sync motionX when thumbX changes (hover/press/checked) and not dragging
+    useEffect(() => {
+      if (dragging.current) return;
+      if (!hasMounted.current) {
+        motionX.set(thumbX);
+      } else {
+        animate(motionX, thumbX, thumbTransition ?? spring.moderate);
+      }
+    }, [thumbX, motionX, thumbTransition]);
+
+    // --- Pointer handlers ---
+
+    const handlePointerDown = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        if (disabled) return;
+        if (e.pointerType === "mouse" && e.button !== 0) return;
+        setPressed(true);
+        dragging.current = false;
+        didDrag.current = false;
+        pointerStart.current = {
+          clientX: e.clientX,
+          originX: motionX.get(),
+        };
+        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      },
+      [disabled, motionX],
+    );
+
+    const handlePointerMove = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!pointerStart.current) return;
+        const delta = e.clientX - pointerStart.current.clientX;
+
+        if (!dragging.current) {
+          if (Math.abs(delta) < DRAG_DEAD_ZONE) return;
+          dragging.current = true;
+        }
+
+        const dragMin = THUMB_OFFSET;
+        const pressedThumbWidth = THUMB_SIZE + PRESS_EXTEND;
+        const dragMax = TRACK_WIDTH - THUMB_OFFSET - pressedThumbWidth;
+        const rawX = pointerStart.current.originX + delta;
+        motionX.set(Math.max(dragMin, Math.min(dragMax, rawX)));
+      },
+      [motionX],
+    );
+
+    const handlePointerUp = useCallback(() => {
+      if (!pointerStart.current) return;
+      setPressed(false);
+
+      if (dragging.current) {
+        didDrag.current = true;
+        dragging.current = false;
+
+        const currentX = motionX.get();
+        const dragMin = THUMB_OFFSET;
+        const pressedThumbWidth = THUMB_SIZE + PRESS_EXTEND;
+        const dragMax = TRACK_WIDTH - THUMB_OFFSET - pressedThumbWidth;
+        const midpoint = (dragMin + dragMax) / 2;
+
+        const shouldBeOn = currentX > midpoint;
+
+        if (shouldBeOn !== checked) {
+          setChecked(shouldBeOn);
+        } else {
+          // Snap back to current resting position (un-pressed)
+          const snapTarget = checked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET;
+          animate(motionX, snapTarget, thumbTransition ?? spring.moderate);
+        }
+
+        requestAnimationFrame(() => {
+          didDrag.current = false;
+        });
+      }
+
+      pointerStart.current = null;
+    }, [checked, setChecked, motionX, thumbTransition]);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative z-10 flex items-center gap-2.5 px-3 py-2 cursor-pointer select-none touch-none",
+          disabled && "opacity-50 pointer-events-none",
+          className,
+        )}
+        onPointerEnter={(e) => {
+          if (e.pointerType === "mouse") setHovered(true);
+        }}
+        onPointerLeave={() => setHovered(false)}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onClick={() => {
+          if (disabled || didDrag.current) return;
+          setChecked(!checked);
+        }}
+        {...props}
+      >
+        {/* Switch */}
+        <SwitchPrimitive.Root
+          checked={checked}
+          aria-label={ariaLabel ?? label}
+          onCheckedChange={(nextChecked) => {
+            if (didDrag.current) return;
+            setChecked(nextChecked);
+          }}
+          disabled={disabled}
+          tabIndex={0}
+          className={cn(
+            "relative shrink-0 rounded-full outline-none cursor-pointer",
+            "transition-colors duration-80",
+            "focus-visible:ring-1 focus-visible:ring-[#6B97FF] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          )}
+          style={{
+            width: TRACK_WIDTH,
+            height: TRACK_HEIGHT,
+            backgroundColor: checked
+              ? hovered
+                ? "#5C89F2"
+                : "#6B97FF"
+              : hovered
+                ? "color-mix(in oklab, var(--accent), rgb(var(--overlay)) 10%)"
+                : "var(--accent)",
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <SwitchPrimitive.Thumb asChild>
+            <motion.span
+              className="absolute top-0 left-0 block rounded-full bg-white shadow-sm"
+              initial={false}
+              style={{ x: motionX }}
+              animate={{
+                y: thumbY,
+                width: thumbWidth,
+                height: thumbHeight,
+              }}
+              transition={
+                hasMounted.current ? (thumbTransition ?? spring.moderate) : { duration: 0 }
+              }
+            />
+          </SwitchPrimitive.Thumb>
+        </SwitchPrimitive.Root>
+
+        {/* Label */}
+        {label && (
+          <span
+            className={cn(
+              "text-[13px] transition-[color] duration-80",
+              checked ? "text-foreground" : "text-muted-foreground",
+            )}
+          >
+            {label}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };
+export type { SwitchProps };

package/src/components/table.tsx

@@ -1,101 +1,215 @@
-import * as React from "react";
+"use client";
+
+import {
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+  forwardRef,
+  type ReactNode,
+  type HTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
+import { fontWeights } from "../lib/font-weight";
+import { useProximityHover } from "../hooks/use-proximity-hover";
+
+// ── Context ──────────────────────────────────────────────
+
+interface TableContextValue {
+  registerItem: (index: number, element: HTMLElement | null) => void;
+  activeIndex: number | null;
+}
+
+const TableContext = createContext<TableContextValue | null>(null);
+
+// ── Table ────────────────────────────────────────────────
+
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  children: ReactNode;
+  containerClassName?: string;
+}
+
+const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ children, className, containerClassName, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const { activeIndex, itemRects, sessionRef, handlers, registerItem, measureItems } =
+      useProximityHover(containerRef);
+
+    useEffect(() => {
+      measureItems();
+    }, [measureItems, children]);
+
+    const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
+
+    return (
+      <TableContext.Provider value={{ registerItem, activeIndex }}>
+        <div
+          ref={containerRef}
+          className={cn("relative", containerClassName)}
+          onMouseEnter={handlers.onMouseEnter}
+          onMouseMove={handlers.onMouseMove}
+          onMouseLeave={handlers.onMouseLeave}
+        >
+          {/* Hover background */}
+          <AnimatePresence>
+            {activeRect && (
+              <motion.div
+                key={sessionRef.current}
+                className="absolute bg-hover pointer-events-none"
+                initial={{
+                  opacity: 0,
+                  top: activeRect.top,
+                  left: activeRect.left,
+                  width: activeRect.width,
+                  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>
+
+          <table
+            ref={ref}
+            className={cn("w-full text-[13px] border-collapse", className)}
+            {...props}
+          >
+            {children}
+          </table>
+        </div>
+      </TableContext.Provider>
+    );
+  },
+);
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
->(({ className, containerClassName, ...props }, ref) => (
-  <div
-    className={cn(
-      "w-full overflow-hidden rounded-xl border border-border bg-card",
-      containerClassName,
-    )}
-  >
-    <table
-      ref={ref}
-      className={cn("min-w-full caption-bottom divide-y divide-border", className)}
-      {...props}
-    />
-  </div>
-));
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("bg-muted", className)} {...props} />
-));
+// ── TableHeader ──────────────────────────────────────────
+
+const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("", className)} {...props} />,
+);
+
 TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn("divide-y divide-border bg-card", className)} {...props} />
-));
+// ── TableBody ────────────────────────────────────────────
+
+const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cn("", className)} {...props} />,
+);
+
 TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn("bg-muted font-medium", className)} {...props} />
-));
-TableFooter.displayName = "TableFooter";
+// ── TableRow ─────────────────────────────────────────────
+
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  index?: number;
+}
+
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ index, className, style, ...props }, ref) => {
+    const internalRef = useRef<HTMLTableRowElement>(null);
+    const ctx = useContext(TableContext);
+
+    useEffect(() => {
+      if (index === undefined || !ctx) return;
+      ctx.registerItem(index, internalRef.current);
+      return () => ctx.registerItem(index, null);
+    }, [index, ctx]);
+
+    const isBodyRow = index !== undefined;
+    const activeIdx = ctx?.activeIndex ?? null;
+    const hideBorder =
+      activeIdx !== null &&
+      ((isBodyRow && (index === activeIdx || index === activeIdx - 1)) ||
+        (!isBodyRow && activeIdx === 0));
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+    return (
+      <tr
+        ref={(node) => {
+          (internalRef as React.MutableRefObject<HTMLTableRowElement | null>).current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLTableRowElement | null>).current = node;
+        }}
+        data-proximity-index={index}
+        className={cn(
+          "group/row relative z-10 border-b transition-[border-color] duration-80",
+          hideBorder ? "border-transparent" : "border-accent/40",
+          isBodyRow && activeIdx === index && "is-active",
+          className,
+        )}
+        style={{
+          ...style,
+          fontVariationSettings: isBodyRow ? fontWeights.normal : fontWeights.semibold,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+TableRow.displayName = "TableRow";
+
+// ── TableHead ────────────────────────────────────────────
+
+const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th ref={ref} className={cn("px-3 py-2 text-left text-foreground", className)} {...props} />
+  ),
+);
+
+TableHead.displayName = "TableHead";
+
+// ── TableCell ────────────────────────────────────────────
+
+const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
   ({ className, ...props }, ref) => (
-    <tr
+    <td
       ref={ref}
       className={cn(
-        "transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "px-3 py-2 text-muted-foreground transition-colors duration-80 group-[.is-active]/row:text-foreground",
         className,
       )}
       {...props}
     />
   ),
 );
-TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "px-6 py-3 text-left align-middle label text-muted-foreground",
-      "[&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "px-6 py-4 align-middle body text-muted-foreground",
-      "[&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    {...props}
-  />
-));
 TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 caption text-muted-foreground", className)} {...props} />
-));
+const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tfoot ref={ref} className={cn("", className)} {...props} />,
+);
+
+TableFooter.displayName = "TableFooter";
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      ref={ref}
+      className={cn("mt-4 text-[13px] text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+
 TableCaption.displayName = "TableCaption";
 
+// ── Exports ──────────────────────────────────────────────
+
 export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };