@hilum/ui 3.4.0 → 3.5.0

package/src/components/input.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
+import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -7,10 +8,12 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-10 w-full rounded-md border border-border bg-card px-3 py-1",
+        "flex h-10 w-full rounded-md px-3 py-1",
         "body text-foreground placeholder:text-muted-foreground",
-        "transition-colors duration-150",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+        controlSurfaceClasses,
+        motionClasses,
+        focusRingClasses,
+        "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
         className,

package/src/components/menu-item.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  useRef,
+  useEffect,
+  forwardRef,
+  isValidElement,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import type { IconComponent } from "../lib/icon-context";
+import { motion, AnimatePresence } from "framer-motion";
+import { useDropdown } from "./dropdown";
+import { cn } from "../lib/utils";
+import { fontWeights } from "../lib/font-weight";
+import { shapeMap } from "../lib/shape-context";
+
+// MenuItem is only used inside Dropdown, which opts out of the global pill
+// shape — see dropdown.tsx for the rationale.
+const shape = shapeMap.rounded;
+
+interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** Optional leading icon. When omitted, the row renders text-only with no
+   *  reserved icon column. */
+  icon?: IconComponent | ReactNode;
+  label?: string;
+  index?: number;
+  checked?: boolean;
+  onSelect?: () => void;
+  trailing?: ReactNode;
+}
+
+const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
+  (
+    { icon: Icon, label, index = 0, checked, onSelect, trailing, className, children, ...props },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLDivElement>(null);
+    const hasMounted = useRef(false);
+    const { registerItem, activeIndex, checkedIndex } = useDropdown();
+
+    useEffect(() => {
+      registerItem(index, internalRef.current);
+      return () => registerItem(index, null);
+    }, [index, registerItem]);
+
+    useEffect(() => {
+      hasMounted.current = true;
+    }, []);
+
+    const isActive = activeIndex === index;
+    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}
+        tabIndex={index === (checkedIndex ?? 0) ? 0 : -1}
+        role="menuitemradio"
+        aria-checked={!!checked}
+        aria-label={label ?? (typeof children === "string" ? children : undefined)}
+        onClick={onSelect}
+        onKeyDown={(e) => {
+          if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            onSelect?.();
+          }
+        }}
+        className={cn(
+          `relative z-10 flex items-center gap-2 ${shape.item} px-2 py-2 cursor-pointer outline-none`,
+          className,
+        )}
+        {...props}
+      >
+        {Icon && typeof Icon === "function" && (
+          <span className="inline-grid">
+            <span className="col-start-1 row-start-1 invisible">
+              <Icon size={16} strokeWidth={2} />
+            </span>
+            <Icon
+              size={16}
+              strokeWidth={isActive || checked ? 2 : 1.5}
+              className={cn(
+                "col-start-1 row-start-1 transition-[color,stroke-width] duration-80",
+                isActive || checked ? "text-foreground" : "text-muted-foreground",
+              )}
+            />
+          </span>
+        )}
+        {Icon && isValidElement(Icon) && <span className="text-muted-foreground">{Icon}</span>}
+        <span className="inline-grid flex-1 text-[13px]">
+          <span
+            className="col-start-1 row-start-1 invisible"
+            style={{ fontVariationSettings: fontWeights.semibold }}
+            aria-hidden="true"
+          >
+            {label ?? children}
+          </span>
+          <span
+            className={cn(
+              "col-start-1 row-start-1 transition-[color,font-variation-settings] duration-80",
+              isActive || checked ? "text-foreground" : "text-muted-foreground",
+            )}
+            style={{
+              fontVariationSettings: checked ? fontWeights.semibold : fontWeights.normal,
+            }}
+          >
+            {label ?? children}
+          </span>
+        </span>
+        {trailing && <span className="text-[12px] text-muted-foreground">{trailing}</span>}
+        <AnimatePresence>
+          {checked && (
+            <motion.svg
+              key="check"
+              width={16}
+              height={16}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-foreground shrink-0"
+              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>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
+
+MenuItem.displayName = "MenuItem";
+
+export { MenuItem };
+export default MenuItem;

package/src/components/mobile-drawer.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import { Menu } from "lucide-react";
+import { Button } from "./button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+interface MobileDrawerProps extends React.ComponentProps<typeof Sheet> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  triggerLabel?: string;
+  children: React.ReactNode;
+}
+
+function MobileDrawer({
+  title,
+  description,
+  triggerLabel = "Open menu",
+  children,
+  ...props
+}: MobileDrawerProps) {
+  return (
+    <Sheet {...props}>
+      <SheetTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" aria-label={triggerLabel}>
+          <Menu />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="w-[min(22rem,calc(100vw-2rem))] p-4">
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+          {description && <SheetDescription>{description}</SheetDescription>}
+        </SheetHeader>
+        {children}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+MobileDrawer.displayName = "MobileDrawer";
+
+export { MobileDrawer };
+export type { MobileDrawerProps };

package/src/components/nav-item.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import {
+  focusRingClasses,
+  iconStrokeClasses,
+  pressClasses,
+  springMotionClasses,
+} from "../lib/interaction";
+
+interface NavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  icon?: React.ReactNode;
+  active?: boolean;
+  trailing?: React.ReactNode;
+}
+
+const NavItem = React.forwardRef<HTMLAnchorElement, NavItemProps>(
+  ({ icon, active, trailing, className, children, ...props }, ref) => (
+    <a
+      ref={ref}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "group flex min-h-10 items-center gap-2 rounded-xl px-3 body font-medium",
+        active
+          ? "bg-brand-secondary/35 text-foreground"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        springMotionClasses,
+        pressClasses,
+        focusRingClasses,
+        iconStrokeClasses,
+        className,
+      )}
+      {...props}
+    >
+      {icon && <span className="flex size-4 shrink-0 items-center justify-center">{icon}</span>}
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {trailing && <span className="shrink-0 text-muted-foreground">{trailing}</span>}
+    </a>
+  ),
+);
+NavItem.displayName = "NavItem";
+
+export { NavItem };
+export type { NavItemProps };

package/src/components/nav-menu.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { useProximityIndex } from "../lib/interaction";
+import { NavItem } from "./nav-item";
+
+export interface NavMenuItem {
+  href: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  active?: boolean;
+  trailing?: React.ReactNode;
+}
+
+interface NavMenuProps extends React.HTMLAttributes<HTMLElement> {
+  items: NavMenuItem[];
+}
+
+function NavMenu({ items, className, ...props }: NavMenuProps) {
+  const proximity = useProximityIndex<HTMLElement>("y");
+
+  return (
+    <nav
+      ref={proximity.containerRef}
+      className={cn("grid gap-1", className)}
+      {...proximity.handlers}
+      {...props}
+    >
+      {items.map((item, index) => (
+        <NavItem
+          key={item.href}
+          ref={(node) => proximity.registerItem(index, node)}
+          href={item.href}
+          icon={item.icon}
+          active={item.active || proximity.activeIndex === index}
+          trailing={item.trailing}
+        >
+          {item.label}
+        </NavItem>
+      ))}
+    </nav>
+  );
+}
+
+NavMenu.displayName = "NavMenu";
+
+export { NavMenu };
+export type { NavMenuProps };

package/src/components/popover.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Popover } from "radix-ui";
 import { cn } from "../lib/utils";
+import { motionClasses } from "../lib/interaction";
 import {
   mobilePopperSheetMotionClassName,
   mobilePopperSheetPositionClassName,
@@ -27,7 +28,8 @@ const PopoverContent = React.forwardRef<
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "relative z-50 w-72 rounded-xl bg-card p-4 shadow-natural outline-none",
+          "relative z-50 w-72 rounded-xl border border-border bg-card p-4 shadow-elevated outline-none",
+          motionClasses,
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
           "max-sm:overflow-y-auto max-sm:px-4 max-sm:pb-4 max-sm:pt-6",