ruler-components 0.1.1 → 0.1.3

package/components/ui/modal.tsx

@@ -1,399 +0,0 @@
-"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

@@ -1,40 +0,0 @@
-"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

@@ -1,200 +0,0 @@
-"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>
-  );
-}