ruler-components 0.1.0

package/components/ui/modal.tsx

@@ -0,0 +1,399 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+const modalContentVariants = cva(
+  [
+    "relative z-10 flex w-full flex-col overflow-hidden rounded-2xl",
+    "border border-zinc-200/90 bg-white text-zinc-900",
+    "shadow-[0_20px_60px_rgba(0,0,0,0.12),0_0_0_1px_rgba(0,0,0,0.04)]",
+    "dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+    "dark:shadow-[0_20px_60px_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.06)]",
+    "transition-[opacity,transform] duration-200 ease-out",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-[400px]",
+        md: "max-w-[440px]",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+      },
+      visible: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-[0.97]",
+      },
+    },
+    defaultVariants: { size: "md", visible: false },
+  },
+);
+
+const overlayVariants = cva(
+  [
+    "absolute inset-0 bg-zinc-900/45",
+    "transition-opacity duration-200 ease-out",
+    "dark:bg-black/65",
+  ],
+  {
+    variants: {
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0",
+      },
+    },
+    defaultVariants: { visible: false },
+  },
+);
+
+interface ModalContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ModalContext = React.createContext<ModalContextValue | null>(null);
+
+interface ModalContentContextValue {
+  titleId: string;
+  descriptionId: string;
+  close: () => void;
+}
+
+const ModalContentContext = React.createContext<ModalContentContextValue | null>(null);
+
+function useModalContext() {
+  const context = React.useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal components must be used within Modal");
+  }
+  return context;
+}
+
+function useModalContentContext() {
+  const context = React.useContext(ModalContentContext);
+  if (!context) {
+    throw new Error("Modal subcomponents must be used within ModalContent");
+  }
+  return context;
+}
+
+export interface ModalProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export function Modal({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  children,
+}: ModalProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+
+  const handleOpenChange = React.useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange],
+  );
+
+  return (
+    <ModalContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+      {children}
+    </ModalContext.Provider>
+  );
+}
+
+export interface ModalTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
+  asChild?: boolean;
+}
+
+export function ModalTrigger({ asChild, children, onClick, ...props }: ModalTriggerProps) {
+  const { onOpenChange } = useModalContext();
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      onOpenChange(true);
+    }
+  };
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>;
+    return React.cloneElement(child, {
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        child.props.onClick?.(event);
+        if (!event.defaultPrevented) {
+          onOpenChange(true);
+        }
+      },
+    });
+  }
+
+  return (
+    <button type="button" onClick={handleOpen} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export interface ModalContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof modalContentVariants> {
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+export function ModalContent({
+  className,
+  size,
+  showCloseButton = true,
+  onClose,
+  children,
+  ...props
+}: ModalContentProps) {
+  const { open, onOpenChange } = useModalContext();
+  const [mounted, setMounted] = React.useState(false);
+  const [visible, setVisible] = React.useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+
+  React.useEffect(() => setMounted(true), []);
+
+  React.useEffect(() => {
+    if (!open) {
+      setVisible(false);
+      document.body.style.overflow = "";
+      return;
+    }
+
+    document.body.style.overflow = "hidden";
+    const frame = requestAnimationFrame(() => setVisible(true));
+
+    return () => {
+      cancelAnimationFrame(frame);
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  const close = React.useCallback(() => {
+    onClose?.();
+    onOpenChange(false);
+  }, [onClose, onOpenChange]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, close]);
+
+  React.useEffect(() => {
+    if (!open || !contentRef.current) return;
+    const focusable = contentRef.current.querySelector<HTMLElement>(
+      "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])",
+    );
+    focusable?.focus();
+  }, [open, visible]);
+
+  if (!mounted || !open) return null;
+
+  const node = (
+    <div className="fixed inset-0 z-[100] isolate flex items-center justify-center p-4 sm:p-6">
+      <div
+        className={overlayVariants({ visible })}
+        onClick={close}
+        aria-hidden
+      />
+      <div
+        ref={contentRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        className={cn(modalContentVariants({ size, visible }), className)}
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+      >
+        {showCloseButton && (
+          <button
+            type="button"
+            onClick={close}
+            className="absolute right-4 top-4 z-10 inline-flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" strokeWidth={2} />
+          </button>
+        )}
+        <ModalContentContext.Provider value={{ titleId, descriptionId, close }}>
+          {children}
+        </ModalContentContext.Provider>
+      </div>
+    </div>
+  );
+
+  return createPortal(node, document.body);
+}
+
+export function ModalHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("space-y-1 px-6 pt-6 pr-12", className)}
+      {...props}
+    />
+  );
+}
+
+export function ModalTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  const { titleId } = useModalContentContext();
+
+  return (
+    <h2
+      id={titleId}
+      className={cn(
+        "text-[15px] font-semibold leading-snug tracking-tight text-zinc-900 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ModalDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  const { descriptionId } = useModalContentContext();
+
+  return (
+    <p
+      id={descriptionId}
+      className={cn(
+        "text-[13px] leading-relaxed text-zinc-500 dark:text-zinc-400",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ModalBody({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("space-y-4 px-6 pt-5 pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+export function ModalFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-end gap-2 border-t border-zinc-200/90 px-6 py-4 dark:border-zinc-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ModalOption({
+  className,
+  icon,
+  title,
+  description,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex gap-3 rounded-xl border border-zinc-200 bg-zinc-50/70 p-3.5",
+        "dark:border-zinc-800 dark:bg-zinc-900/60",
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <div
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-zinc-500 shadow-sm ring-1 ring-zinc-200/80 dark:bg-zinc-950 dark:text-zinc-400 dark:ring-zinc-700"
+        >
+          {icon}
+        </div>
+      )}
+      <div className="min-w-0">
+        <p className="text-sm font-medium text-zinc-900 dark:text-white">{title}</p>
+        {description && (
+          <p className="mt-0.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export interface ModalCloseProps extends React.ComponentPropsWithoutRef<"button"> {
+  asChild?: boolean;
+}
+
+export function ModalClose({ asChild, children, onClick, ...props }: ModalCloseProps) {
+  const { close } = useModalContentContext();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children as React.ReactElement<{ onClick?: React.MouseEventHandler }>,
+      {
+        onClick: (event: React.MouseEvent) => {
+          (children as React.ReactElement<{ onClick?: React.MouseEventHandler }>).props.onClick?.(
+            event,
+          );
+          close();
+        },
+      },
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onClick?.(e);
+        close();
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export { modalContentVariants, overlayVariants };

package/components/ui/package-manager-tabs.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/cn";
+import { CodeBlock } from "@/components/ui/code-block";
+
+const PACKAGE_MANAGERS = [
+  { id: "npm", label: "npm", command: "npm install ruler.ui" },
+  { id: "yarn", label: "yarn", command: "yarn add ruler.ui" },
+  { id: "pnpm", label: "pnpm", command: "pnpm add ruler.ui" },
+  { id: "bun", label: "bun", command: "bun add ruler.ui" },
+] as const;
+
+export function PackageManagerTabs() {
+  const [active, setActive] = useState<(typeof PACKAGE_MANAGERS)[number]["id"]>("npm");
+  const current = PACKAGE_MANAGERS.find((pm) => pm.id === active) ?? PACKAGE_MANAGERS[0];
+
+  return (
+    <div>
+      <div className="flex min-w-0 items-center gap-5 overflow-x-auto border-b border-zinc-200 dark:border-zinc-800">
+        {PACKAGE_MANAGERS.map((pm) => (
+          <button
+            key={pm.id}
+            type="button"
+            onClick={() => setActive(pm.id)}
+            className={cn(
+              "relative -mb-px border-b-2 px-0.5 py-2.5 text-sm font-medium transition-colors",
+              active === pm.id
+                ? "border-zinc-900 text-zinc-900 dark:border-white dark:text-zinc-50"
+                : "border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300",
+            )}
+          >
+            {pm.label}
+          </button>
+        ))}
+      </div>
+      <CodeBlock code={current.command} className="mt-4" />
+    </div>
+  );
+}

package/components/ui/pagination.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { Button } from "./button";
+
+function getPageList(current: number, total: number, siblingCount: number): (number | "...")[] {
+  const totalSlots = siblingCount * 2 + 5;
+  if (total <= totalSlots) return Array.from({ length: total }, (_, i) => i + 1);
+
+  const left = Math.max(current - siblingCount, 1);
+  const right = Math.min(current + siblingCount, total);
+
+  const pages: (number | "...")[] = [1];
+  if (left > 2) pages.push("...");
+  for (let p = Math.max(left, 2); p <= Math.min(right, total - 1); p++) pages.push(p);
+  if (right < total - 1) pages.push("...");
+  if (total > 1) pages.push(total);
+  return pages;
+}
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  variant?: "default" | "simple";
+  size?: "small" | "half" | "full";
+  className?: string;
+}
+
+const navTransition =
+  "transition-[color,background-color,border-color,box-shadow,transform,opacity,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]";
+const popIn = "animate-[pagination-pop_220ms_cubic-bezier(0.16,1,0.3,1)]";
+const focusRing = "focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900";
+
+const WIDTH_CLASSES = {
+  small: "w-max max-w-full",
+  half: "w-full min-w-0 sm:w-1/2 sm:min-w-max sm:max-w-full",
+  full: "w-full min-w-0",
+};
+
+const BUTTON_SIZE = 32;
+const GAP = 4;
+
+export function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  variant = "default",
+  size = "small",
+  className,
+}: PaginationProps) {
+  const clampedTotal = Math.max(1, totalPages);
+  const current = Math.min(Math.max(page, 1), clampedTotal);
+  const goTo = (p: number) => onPageChange(Math.min(Math.max(p, 1), clampedTotal));
+
+  const pages = React.useMemo(
+    () => getPageList(current, clampedTotal, siblingCount),
+    [current, clampedTotal, siblingCount],
+  );
+
+  const maxSlots = Math.min(clampedTotal, siblingCount * 2 + 5);
+  const trackMinWidth = maxSlots * BUTTON_SIZE + (maxSlots - 1) * GAP;
+
+  // FLIP: glide numbers/ellipses that persist across a page change to their new
+  // position instead of snapping — scoped entirely to this component's own DOM,
+  // so it never touches other Pagination instances on the page.
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  const prevRectsRef = React.useRef(new Map<string, DOMRect>());
+
+  React.useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const prevRects = prevRectsRef.current;
+    const nextRects = new Map<string, DOMRect>();
+
+    track.querySelectorAll<HTMLElement>("[data-flip-key]").forEach((el) => {
+      const key = el.dataset.flipKey!;
+      const rect = el.getBoundingClientRect();
+      nextRects.set(key, rect);
+
+      const prev = prevRects.get(key);
+      if (!prev) return;
+      const dx = prev.left - rect.left;
+      if (Math.abs(dx) < 0.5) return;
+
+      el.style.transition = "none";
+      el.style.transform = `translateX(${dx}px)`;
+      el.getBoundingClientRect();
+      requestAnimationFrame(() => {
+        el.style.transition = "transform 220ms cubic-bezier(0.16,1,0.3,1)";
+        el.style.transform = "";
+      });
+    });
+
+    prevRectsRef.current = nextRects;
+  }, [pages]);
+
+  if (variant === "simple") {
+    return (
+      <nav
+        aria-label="Pagination"
+        className={cn(
+        "flex items-center justify-between gap-2 overflow-x-auto rounded-full border border-zinc-200/70 bg-white p-1.5 shadow-[0_2px_8px_rgba(0,0,0,0.06)] transition-[width] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] dark:border-zinc-800/80 dark:bg-zinc-900 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)]",
+          WIDTH_CLASSES[size],
+          className,
+        )}
+      >
+        <Button variant="ghost" size="sm" className={cn("rounded-full", navTransition, focusRing)} disabled={current <= 1} onClick={() => goTo(current - 1)}>
+          <ChevronLeft size={15} />
+          Previous
+        </Button>
+        <p className="min-w-[6.5rem] text-center text-xs tabular-nums text-zinc-500 dark:text-zinc-400">
+          Page {current} of {clampedTotal}
+        </p>
+        <Button variant="ghost" size="sm" className={cn("rounded-full", navTransition, focusRing)} disabled={current >= clampedTotal} onClick={() => goTo(current + 1)}>
+          Next
+          <ChevronRight size={15} />
+        </Button>
+      </nav>
+    );
+  }
+
+  return (
+    <nav
+      aria-label="Pagination"
+      className={cn(
+        "flex items-center gap-1 overflow-x-auto rounded-full border border-zinc-200/70 bg-white p-1 shadow-[0_2px_8px_rgba(0,0,0,0.06)] transition-[width] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] dark:border-zinc-800/80 dark:bg-zinc-900 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)]",
+        WIDTH_CLASSES[size],
+        className,
+      )}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn("h-8 w-8 shrink-0 rounded-full p-0", navTransition, focusRing)}
+        disabled={current <= 1}
+        onClick={() => goTo(current - 1)}
+        aria-label="Previous page"
+      >
+        <ChevronLeft size={15} />
+      </Button>
+
+      <div
+        ref={trackRef}
+        className="flex min-w-0 flex-1 items-center justify-center gap-1"
+        style={size === "small" ? { minWidth: trackMinWidth } : undefined}
+      >
+        {pages.map((p, i) =>
+          p === "..." ? (
+            <span
+              key={`ellipsis-${i}`}
+              data-flip-key={`e-${i}`}
+              className={cn("flex h-8 w-8 shrink-0 items-center justify-center text-zinc-400", popIn)}
+              aria-hidden="true"
+            >
+              <MoreHorizontal size={15} />
+            </span>
+          ) : (
+            <button
+              key={p}
+              type="button"
+              data-flip-key={`p-${p}`}
+              onClick={() => goTo(p)}
+              aria-current={current === p ? "page" : undefined}
+              aria-label={`Page ${p}`}
+              className={cn(
+                "h-8 w-8 shrink-0 cursor-pointer rounded-full text-sm font-medium tabular-nums outline-none",
+                "focus-visible:ring-2 focus-visible:ring-zinc-900/15 focus-visible:ring-offset-2 dark:focus-visible:ring-white/20",
+                "active:scale-90 active:transition-transform active:duration-100",
+                navTransition,
+                popIn,
+                focusRing,
+                current === p
+                  ? "bg-zinc-900 text-white shadow-[0_2px_6px_rgba(0,0,0,0.3)] dark:bg-white dark:text-zinc-900 dark:shadow-[0_2px_6px_rgba(0,0,0,0.5)]"
+                  : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100",
+              )}
+            >
+              {p}
+            </button>
+          ),
+        )}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn("h-8 w-8 shrink-0 rounded-full p-0", navTransition, focusRing)}
+        disabled={current >= clampedTotal}
+        onClick={() => goTo(current + 1)}
+        aria-label="Next page"
+      >
+        <ChevronRight size={15} />
+      </Button>
+    </nav>
+  );
+}