chore: import upstream snapshot with attribution

2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
@@ -0,0 +1,230 @@
+import { NavLink } from "@remix-run/react";
+import { motion } from "framer-motion";
+import { type ReactNode, useRef } from "react";
+import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { cn } from "~/utils/cn";
+import { ShortcutKey } from "./ShortcutKey";
+
+export type Variants = "underline" | "pipe-divider" | "segmented";
+
+export type TabsProps = {
+  tabs: {
+    label: string;
+    to: string;
+    end?: boolean;
+  }[];
+  className?: string;
+  layoutId: string;
+  variant?: Variants;
+};
+
+export function Tabs({ tabs, className, layoutId, variant = "underline" }: TabsProps) {
+  return (
+    <TabContainer className={className} variant={variant}>
+      {tabs.map((tab, index) => (
+        <TabLink
+          key={index}
+          to={tab.to}
+          layoutId={layoutId}
+          variant={variant}
+          end={tab.end ?? true}
+        >
+          {tab.label}
+        </TabLink>
+      ))}
+    </TabContainer>
+  );
+}
+
+export function TabContainer({
+  children,
+  className,
+  variant = "underline",
+}: {
+  children: ReactNode;
+  className?: string;
+  variant?: Variants;
+}) {
+  if (variant === "segmented") {
+    return (
+      <div
+        className={cn(
+          "relative flex h-10 items-center rounded bg-background-raised/50 p-1",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (variant === "underline") {
+    return (
+      <div className={cn(`flex gap-x-6 border-b border-grid-bright`, className)}>{children}</div>
+    );
+  }
+
+  return <div className={cn(`flex`, className)}>{children}</div>;
+}
+
+export function TabLink({
+  to,
+  children,
+  layoutId,
+  variant = "underline",
+  end = true,
+}: {
+  to: string;
+  children: ReactNode;
+  layoutId: string;
+  variant?: Variants;
+  end?: boolean;
+}) {
+  if (variant === "segmented") {
+    return (
+      <NavLink
+        to={to}
+        className="group relative flex h-full grow items-center justify-center focus-custom"
+        end={end}
+      >
+        {({ isActive, isPending }) => {
+          const active = isActive || isPending;
+          return (
+            <>
+              <div className="relative z-10 flex h-full w-full items-center justify-center px-3 py-[0.13rem]">
+                <span
+                  className={cn(
+                    "text-sm transition duration-200",
+                    active
+                      ? "text-text-bright"
+                      : "text-text-dimmed transition group-hover:text-text-bright"
+                  )}
+                >
+                  {children}
+                </span>
+              </div>
+              {active && (
+                <motion.div
+                  layoutId={layoutId}
+                  transition={{ duration: 0.4, type: "spring" }}
+                  className="absolute inset-0 rounded-[2px] border border-border-brightest/50 bg-surface-control"
+                />
+              )}
+            </>
+          );
+        }}
+      </NavLink>
+    );
+  }
+
+  if (variant === "pipe-divider") {
+    return (
+      <NavLink
+        to={to}
+        className="group flex flex-col items-center border-r border-grid-bright px-2 pt-1 focus-custom first:pl-0 last:border-none"
+        end={end}
+      >
+        {({ isActive, isPending }) => {
+          const active = isActive || isPending;
+          return (
+            <span
+              className={cn(
+                "text-sm transition duration-200",
+                active ? "text-text-link" : "text-text-dimmed transition hover:text-text-bright"
+              )}
+            >
+              {children}
+            </span>
+          );
+        }}
+      </NavLink>
+    );
+  }
+
+  // underline variant (default)
+  return (
+    <NavLink to={to} className="group flex flex-col items-center pt-1 focus-custom" end={end}>
+      {({ isActive, isPending }) => {
+        return (
+          <>
+            <span
+              className={cn(
+                "text-sm transition duration-200",
+                isActive || isPending
+                  ? "text-text-bright"
+                  : "text-text-dimmed hover:text-text-bright"
+              )}
+            >
+              {children}
+            </span>
+            {isActive || isPending ? (
+              <motion.div
+                layoutId={layoutId}
+                transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                className="mt-1 h-0.5 w-full bg-indigo-500"
+              />
+            ) : (
+              <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
+            )}
+          </>
+        );
+      }}
+    </NavLink>
+  );
+}
+
+export function TabButton({
+  isActive,
+  layoutId,
+  shortcut,
+  ...props
+}: {
+  isActive: boolean;
+  shortcut?: ShortcutDefinition;
+  layoutId: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  if (shortcut) {
+    useShortcutKeys({
+      shortcut: shortcut,
+      action: () => {
+        if (ref.current) {
+          ref.current.click();
+        }
+      },
+      disabled: props.disabled,
+    });
+  }
+
+  return (
+    <button
+      className={cn(
+        "group flex flex-col items-center pt-1 focus-custom",
+        props.className,
+        props.disabled && "pointer-events-none opacity-50"
+      )}
+      type="button"
+      ref={ref}
+      {...props}
+    >
+      <>
+        <div className="flex items-center gap-1">
+          <span className={"text-sm transition duration-200 text-text-bright"}>
+            {props.children}
+          </span>
+          {shortcut && <ShortcutKey className={cn("")} shortcut={shortcut} variant={"small"} />}
+        </div>
+        {isActive ? (
+          <motion.div
+            layoutId={layoutId}
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            className="mt-1 h-0.5 w-full bg-indigo-500"
+          />
+        ) : (
+          <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
+        )}
+      </>
+    </button>
+  );
+}