motion-ui-skill 2.0.0

package/components/motion/multi-select/list.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { motion } from "motion/react";
+import {
+  type ReactNode,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+import {
+  MultiSelectGroupContext,
+  useMultiSelectContext,
+} from "./context";
+
+export interface MultiSelectListProps {
+  children: ReactNode;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function MultiSelectList({
+  children,
+  ariaLabel = "Options",
+  className,
+}: MultiSelectListProps) {
+  const context = useMultiSelectContext("MultiSelectList");
+  return (
+    <div
+      id={context.listId}
+      role="listbox"
+      aria-label={ariaLabel}
+      aria-multiselectable="true"
+      className={cn(
+        "relative isolate max-h-64 overflow-y-auto overscroll-contain p-1.5 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface MultiSelectGroupProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function MultiSelectGroup({
+  children,
+  className,
+}: MultiSelectGroupProps) {
+  const context = useMultiSelectContext("MultiSelectGroup");
+  const groupId = useId();
+  return (
+    <MultiSelectGroupContext.Provider value={groupId}>
+      <fieldset
+        hidden={!context.hasVisibleItems(groupId)}
+        className={cn("m-0 min-w-0 border-0 p-0 py-0.5", className)}
+      >
+        {children}
+      </fieldset>
+    </MultiSelectGroupContext.Provider>
+  );
+}
+
+export interface MultiSelectLabelProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function MultiSelectLabel({
+  children,
+  className,
+}: MultiSelectLabelProps) {
+  const groupId = useContext(MultiSelectGroupContext);
+  const labelClassName = cn(
+    "w-full px-2 py-1.5 text-[0.68rem] font-medium uppercase tracking-[0.12em] text-muted-foreground",
+    className,
+  );
+  return groupId ? (
+    <legend className={labelClassName}>{children}</legend>
+  ) : (
+    <div className={labelClassName}>{children}</div>
+  );
+}
+
+export interface MultiSelectItemProps {
+  value: string;
+  children: ReactNode;
+  textValue?: string;
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+  className?: string;
+}
+
+export function MultiSelectItem({
+  value,
+  children,
+  textValue,
+  keywords = [],
+  disabled = false,
+  onSelect,
+  className,
+}: MultiSelectItemProps) {
+  const context = useMultiSelectContext("MultiSelectItem");
+  const groupId = useContext(MultiSelectGroupContext);
+  const id = useId();
+  const itemRef = useRef<HTMLButtonElement>(null);
+  const label = textValue ?? (typeof children === "string" ? children : value);
+  const visible = context.isVisible(value);
+  const active = context.activeValue === value;
+  const selected = context.values.includes(value);
+  const keywordKey = keywords.join("\u0000");
+  const normalizedKeywords = useMemo(
+    () => (keywordKey ? keywordKey.split("\u0000") : []),
+    [keywordKey],
+  );
+  const { registerItem, unregisterItem } = context;
+
+  useLayoutEffect(() => {
+    registerItem({
+      value,
+      label,
+      keywords: normalizedKeywords,
+      disabled,
+      groupId,
+      id,
+      ref: itemRef,
+    });
+    return () => unregisterItem(value);
+  }, [
+    disabled,
+    groupId,
+    id,
+    label,
+    normalizedKeywords,
+    registerItem,
+    unregisterItem,
+    value,
+  ]);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      ref={itemRef}
+      id={id}
+      type="button"
+      role="option"
+      aria-selected={selected}
+      disabled={disabled}
+      tabIndex={-1}
+      data-multi-select-item=""
+      data-active={active || undefined}
+      data-selected={selected || undefined}
+      onPointerMove={() => {
+        if (!disabled) context.setActiveValue(value);
+      }}
+      onPointerDown={(event) => event.preventDefault()}
+      onClick={() => {
+        if (disabled) return;
+        onSelect?.(value);
+        context.toggle(value);
+      }}
+      className={cn(
+        "relative flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm outline-none transition-colors duration-150",
+        active || selected ? "text-foreground" : "text-muted-foreground",
+        "disabled:pointer-events-none disabled:opacity-45",
+        className,
+      )}
+    >
+      {active ? (
+        <motion.span
+          aria-hidden="true"
+          layoutId={context.activeLayoutId}
+          className="absolute inset-0 -z-10 rounded-lg bg-muted"
+          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
+        />
+      ) : null}
+      <span className="min-w-0 flex-1">{children}</span>
+      <motion.span
+        aria-hidden="true"
+        initial={false}
+        animate={{
+          opacity: selected ? 1 : 0,
+          transform: selected ? "scale(1)" : "scale(0.82)",
+        }}
+        transition={
+          context.reduce ? { duration: 0 } : { duration: 0.14, ease: EASE_OUT }
+        }
+        className="grid size-5 shrink-0 place-items-center text-foreground"
+      >
+        <Check className="size-4" />
+      </motion.span>
+    </button>
+  );
+}
+
+export interface MultiSelectEmptyProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export function MultiSelectEmpty({
+  children = "No options found.",
+  className,
+}: MultiSelectEmptyProps) {
+  const context = useMultiSelectContext("MultiSelectEmpty");
+  if (context.visibleCount > 0) return null;
+  return (
+    <div
+      role="status"
+      className={cn(
+        "px-3 py-8 text-center text-sm text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface MultiSelectSeparatorProps {
+  className?: string;
+}
+
+export function MultiSelectSeparator({
+  className,
+}: MultiSelectSeparatorProps) {
+  return (
+    <div aria-hidden="true" className={cn("-mx-1 my-1 h-px bg-border", className)} />
+  );
+}

package/components/motion/multi-select/trigger.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { ChevronsUpDown, Search, X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import type {
+  InputHTMLAttributes,
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+  Ref,
+} from "react";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+import { mergeRefs, useMultiSelectContext } from "./context";
+
+export interface MultiSelectTriggerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function MultiSelectTrigger({
+  children,
+  className,
+}: MultiSelectTriggerProps) {
+  const context = useMultiSelectContext("MultiSelectTrigger");
+
+  return (
+    <div
+      ref={context.triggerRef}
+      id={context.triggerId}
+      data-state={context.open ? "open" : "closed"}
+      onPointerDown={(event) => {
+        const target = event.target as HTMLElement;
+        if (
+          context.disabled ||
+          target === context.inputRef.current ||
+          target.closest("[data-multi-select-remove]")
+        ) {
+          return;
+        }
+        event.preventDefault();
+        context.inputRef.current?.focus({ preventScroll: true });
+        context.setOpen(true);
+      }}
+      className={cn(
+        "relative z-20 flex min-h-11 w-full min-w-52 cursor-text items-center gap-2 rounded-xl border border-border bg-transparent px-2.5 py-1.5 text-sm text-foreground transition-[border-color] hover:border-(--color-border-strong)",
+        "focus-within:ring-2 focus-within:ring-foreground/20",
+        context.disabled && "pointer-events-none opacity-50",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+        {children}
+      </div>
+      <ChevronsUpDown
+        aria-hidden="true"
+        className="size-4 shrink-0 text-muted-foreground"
+      />
+    </div>
+  );
+}
+
+export interface MultiSelectValueProps {
+  placeholder?: ReactNode;
+  children?: (value: string, label: string) => ReactNode;
+  className?: string;
+  chipClassName?: string;
+}
+
+export function MultiSelectValue({
+  placeholder = "Select options",
+  children,
+  className,
+  chipClassName,
+}: MultiSelectValueProps) {
+  const context = useMultiSelectContext("MultiSelectValue");
+  const showPlaceholder = context.values.length === 0 && !context.open;
+
+  return (
+    <div className={cn("contents", className)}>
+      <AnimatePresence initial={false} mode="popLayout">
+        {showPlaceholder ? (
+          <span key="multi-select-placeholder" className="text-muted-foreground">
+            {placeholder}
+          </span>
+        ) : null}
+        {context.values.map((value) => {
+          const label = context.labelFor(value);
+          return (
+            <motion.span
+              layout={context.reduce ? false : "position"}
+              key={`multi-select-value-${value}`}
+              initial={{
+                opacity: 0,
+                clipPath: "inset(0 0 0 0% round 0.5rem)",
+                transform: context.reduce
+                  ? "translateY(0px) scale(1)"
+                  : "translateY(6px) scale(0.92)",
+              }}
+              animate={{
+                opacity: 1,
+                clipPath: "inset(0 0 0 0% round 0.5rem)",
+                transform: "translateY(0px) scale(1)",
+              }}
+              exit={{
+                opacity: 1,
+                clipPath: context.reduce
+                  ? "inset(0 0 0 0% round 0.5rem)"
+                  : "inset(0 0 0 100% round 0.5rem)",
+                transform: "translateY(0px) scale(1)",
+                transition: {
+                  clipPath: context.reduce
+                    ? { duration: 0 }
+                    : { duration: 0.16, ease: EASE_OUT },
+                  transform: { duration: 0 },
+                },
+              }}
+              transition={
+                context.reduce
+                  ? {
+                      layout: { duration: 0 },
+                      opacity: { duration: 0.15, ease: EASE_OUT },
+                      transform: { duration: 0 },
+                    }
+                  : {
+                      layout: SPRING_LAYOUT,
+                      opacity: { duration: 0.18, ease: EASE_OUT },
+                      transform: SPRING_SWAP,
+                    }
+              }
+              className={cn(
+                "inline-flex h-7 max-w-full items-center gap-1 rounded-lg bg-muted px-2 text-xs font-medium text-foreground",
+                chipClassName,
+              )}
+            >
+              <span className="truncate">
+                {children ? children(value, label) : label}
+              </span>
+              <button
+                type="button"
+                data-multi-select-remove=""
+                aria-label={`Remove ${label}`}
+                disabled={context.disabled}
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  context.remove(value);
+                  context.inputRef.current?.focus({ preventScroll: true });
+                }}
+                className="-mr-1 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <X aria-hidden="true" className="size-3" />
+              </button>
+            </motion.span>
+          );
+        })}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export interface MultiSelectInputProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "defaultValue" | "value"
+  > {
+  ref?: Ref<HTMLInputElement>;
+  showIcon?: boolean;
+}
+
+export function MultiSelectInput({
+  ref,
+  className,
+  "aria-label": ariaLabel = "Search options",
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  onPointerDown,
+  placeholder = "Search…",
+  showIcon = false,
+  ...props
+}: MultiSelectInputProps) {
+  const context = useMultiSelectContext("MultiSelectInput");
+
+  const handleKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+
+    if (event.key === "Backspace" && !context.query && context.values.length) {
+      event.preventDefault();
+      context.remove(context.values.at(-1) ?? "");
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!context.open) {
+        context.setOpen(true);
+        return;
+      }
+      context.moveActive(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Home" && context.open) {
+      event.preventDefault();
+      context.moveActive("first");
+    } else if (event.key === "End" && context.open) {
+      event.preventDefault();
+      context.moveActive("last");
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      if (context.open) context.toggleActive();
+      else context.setOpen(true);
+    } else if (event.key === "Escape" && context.open) {
+      event.preventDefault();
+      context.setOpen(false, true);
+    }
+  };
+
+  return (
+    <div className="flex min-w-20 flex-1 items-center gap-1.5">
+      {showIcon ? (
+        <Search aria-hidden="true" className="size-3.5 text-muted-foreground" />
+      ) : null}
+      <input
+        {...props}
+        ref={mergeRefs(ref, context.inputRef)}
+        id={context.inputId}
+        role="combobox"
+        aria-label={ariaLabel}
+        aria-autocomplete="list"
+        aria-expanded={context.open}
+        aria-controls={context.listId}
+        aria-activedescendant={
+          context.open ? context.activeItemId : undefined
+        }
+        autoComplete="off"
+        disabled={context.disabled}
+        value={context.query}
+        placeholder={context.values.length ? "" : placeholder}
+        onPointerDown={(event) => {
+          onPointerDown?.(event);
+          if (event.defaultPrevented || context.open) return;
+          context.setOpen(true);
+        }}
+        onFocus={(event) => {
+          context.setOpen(true);
+          onFocus?.(event);
+        }}
+        onClick={(event) => {
+          context.setOpen(true);
+          onClick?.(event);
+        }}
+        onChange={(event) => {
+          context.setOpen(true);
+          context.setQuery(event.target.value);
+          onChange?.(event);
+        }}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "h-7 min-w-12 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+          className,
+        )}
+      />
+    </div>
+  );
+}

package/components/motion/not-found/glitch.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useReducedMotion } from "motion/react";
+import {
+  NOT_FOUND_DEFAULTS,
+  NotFoundActions,
+  NotFoundStage,
+  type NotFoundProps,
+} from "./shared";
+
+const GLYPHS = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/\\";
+const SCRAMBLE_MS = 700;
+const TICK_MS = 45;
+
+/**
+ * Renders the code, scrambling each character on mount before it settles.
+ * SSR and the first paint show the real code, so the scramble is a pure
+ * client-side enhancement and reduced-motion users see the code immediately.
+ */
+function Scramble({ text }: { text: string }) {
+  const reduce = useReducedMotion();
+  const [display, setDisplay] = useState(text);
+
+  useEffect(() => {
+    if (reduce) {
+      setDisplay(text);
+      return;
+    }
+    const chars = text.split("");
+    const start = performance.now();
+    let raf = 0;
+    let last = 0;
+
+    const loop = (now: number) => {
+      if (now - last >= TICK_MS) {
+        last = now;
+        const progress = Math.min((now - start) / SCRAMBLE_MS, 1);
+        const settled = Math.floor(progress * chars.length);
+        setDisplay(
+          chars
+            .map((ch, i) =>
+              i < settled || ch === " "
+                ? ch
+                : GLYPHS[Math.floor(Math.random() * GLYPHS.length)],
+            )
+            .join(""),
+        );
+      }
+      if (now - start < SCRAMBLE_MS) {
+        raf = requestAnimationFrame(loop);
+      } else {
+        setDisplay(text);
+      }
+    };
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, [text, reduce]);
+
+  return <span className="tabular-nums">{display}</span>;
+}
+
+export function NotFoundGlitch({
+  className,
+  code = NOT_FOUND_DEFAULTS.code,
+  title = NOT_FOUND_DEFAULTS.title,
+  description = NOT_FOUND_DEFAULTS.description,
+  homeHref,
+  homeLabel,
+  browseHref,
+  browseLabel,
+}: NotFoundProps) {
+  return (
+    <NotFoundStage className={className}>
+      <div className="group relative select-none font-mono font-bold leading-none tracking-tighter text-foreground [font-size:clamp(5rem,18vw,11rem)]">
+        {/* Chromatic ghost layers, nudged apart on hover. */}
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0 text-[#ff0040] opacity-0 mix-blend-screen transition-[transform,opacity] duration-150 ease-out group-hover:translate-x-[3px] group-hover:opacity-70 motion-reduce:hidden"
+        >
+          <Scramble text={code} />
+        </span>
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0 text-[#00e5ff] opacity-0 mix-blend-screen transition-[transform,opacity] duration-150 ease-out group-hover:-translate-x-[3px] group-hover:opacity-70 motion-reduce:hidden"
+        >
+          <Scramble text={code} />
+        </span>
+        <h1 className="relative">
+          <Scramble text={code} />
+        </h1>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">
+        <p className="text-lg font-semibold text-foreground">{title}</p>
+        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
+      </div>
+
+      <NotFoundActions
+        homeHref={homeHref}
+        homeLabel={homeLabel}
+        browseHref={browseHref}
+        browseLabel={browseLabel}
+      />
+    </NotFoundStage>
+  );
+}

package/components/motion/not-found/index.tsx

@@ -0,0 +1,11 @@
+export { NotFoundGlitch } from "./glitch";
+export { NotFoundMagnetic } from "./magnetic";
+export { NotFoundSpotlight } from "./spotlight";
+export { NotFoundStacked } from "./stacked";
+export { NotFoundTerminal } from "./terminal";
+export {
+  NOT_FOUND_DEFAULTS,
+  NotFoundActions,
+  NotFoundStage,
+  type NotFoundProps,
+} from "./shared";

package/components/motion/not-found/magnetic.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Magnetic } from "@/components/motion/magnetic";
+import { cn } from "@/lib/utils";
+import {
+  NOT_FOUND_DEFAULTS,
+  NotFoundActions,
+  NotFoundStage,
+  type NotFoundProps,
+} from "./shared";
+
+export function NotFoundMagnetic({
+  className,
+  code = NOT_FOUND_DEFAULTS.code,
+  title = NOT_FOUND_DEFAULTS.title,
+  description = NOT_FOUND_DEFAULTS.description,
+  homeHref,
+  homeLabel,
+  browseHref,
+  browseLabel,
+}: NotFoundProps) {
+  const chars = code.split("");
+
+  return (
+    <NotFoundStage className={className}>
+      <h1
+        aria-label={code}
+        className="flex select-none items-center justify-center font-bold leading-none tracking-tighter text-foreground [font-size:clamp(5rem,18vw,12rem)]"
+      >
+        {chars.map((ch, i) => (
+          <Magnetic
+            // biome-ignore lint/suspicious/noArrayIndexKey: fixed positional glyphs
+            key={i}
+            strength={0.6}
+            className={cn(i > 0 && "-ml-2")}
+          >
+            <span aria-hidden className="inline-block px-1 tabular-nums">
+              {ch}
+            </span>
+          </Magnetic>
+        ))}
+      </h1>
+
+      <div className="flex flex-col items-center gap-2">
+        <p className="text-lg font-semibold text-foreground">{title}</p>
+        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
+      </div>
+
+      <NotFoundActions
+        homeHref={homeHref}
+        homeLabel={homeLabel}
+        browseHref={browseHref}
+        browseLabel={browseLabel}
+      />
+    </NotFoundStage>
+  );
+}