ruler-components 0.1.0

package/components/ui/theme-toggle.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { useTheme } from "@/components/theme-provider";
+import { Moon, Sun } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+const emptySubscribe = () => () => {};
+function useMounted() {
+  return useSyncExternalStore(emptySubscribe, () => true, () => false);
+}
+
+export function ThemeToggle({ inverted = false }: { inverted?: boolean }) {
+  const { theme, setTheme } = useTheme();
+  const mounted = useMounted();
+  const current = mounted ? theme : "light";
+
+  const track = inverted ? "bg-zinc-800" : "bg-zinc-100 dark:bg-zinc-800";
+  const inactive = inverted
+    ? "text-zinc-400 hover:text-zinc-200"
+    : "text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300";
+  const active = inverted
+    ? "bg-zinc-700 text-white"
+    : "bg-white text-zinc-900 shadow-sm dark:bg-zinc-950 dark:text-zinc-50";
+
+  return (
+    <div
+      className={cn("inline-flex items-center gap-0.5 rounded-full p-0.5", track)}
+      role="radiogroup"
+      aria-label="Theme"
+    >
+      <button
+        type="button"
+        role="radio"
+        aria-checked={current === "light"}
+        aria-label="Light theme"
+        onClick={() => setTheme("light")}
+        className={cn(
+          "flex h-6 w-6 items-center justify-center rounded-full transition-colors",
+          current === "light" ? active : inactive,
+        )}
+      >
+        <Sun className="h-3.5 w-3.5" />
+      </button>
+      <button
+        type="button"
+        role="radio"
+        aria-checked={current === "dark"}
+        aria-label="Dark theme"
+        onClick={() => setTheme("dark")}
+        className={cn(
+          "flex h-6 w-6 items-center justify-center rounded-full transition-colors",
+          current === "dark" ? active : inactive,
+        )}
+      >
+        <Moon className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}

package/components/ui/tooltip.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const tooltipVariants = cva(
+  [
+    "pointer-events-none fixed z-50 max-w-[260px] rounded-lg px-3 py-2",
+    "text-[13px] font-medium leading-normal tracking-tight",
+    "bg-zinc-900 text-zinc-50",
+    "shadow-[0_4px_16px_rgba(0,0,0,0.14),0_0_0_1px_rgba(255,255,255,0.06)]",
+    "dark:bg-zinc-100 dark:text-zinc-900",
+    "dark:shadow-[0_4px_16px_rgba(0,0,0,0.35),0_0_0_1px_rgba(0,0,0,0.06)]",
+    "transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+    "will-change-[opacity,transform]",
+  ],
+  {
+    variants: {
+      visible: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-[0.97]",
+      },
+      side: {
+        top: "origin-bottom",
+        bottom: "origin-top",
+        left: "origin-right",
+        right: "origin-left",
+      },
+    },
+    defaultVariants: { visible: false, side: "top" },
+  },
+);
+
+type TooltipSide = "top" | "bottom" | "left" | "right";
+type TooltipAlign = "start" | "center" | "end";
+
+const VIEWPORT_PADDING = 10;
+const ARROW_SIZE = 6;
+
+export interface TooltipProps extends VariantProps<typeof tooltipVariants> {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  sideOffset?: number;
+  delayDuration?: number;
+  disabled?: boolean;
+  className?: string;
+}
+
+function getTooltipPosition(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  side: TooltipSide,
+  align: TooltipAlign,
+  sideOffset: number,
+) {
+  const offset = sideOffset + ARROW_SIZE;
+  let top = 0;
+  let left = 0;
+
+  if (side === "top") {
+    top = triggerRect.top - tooltipRect.height - offset;
+    left = alignTooltipHorizontal(triggerRect, tooltipRect, align);
+  } else if (side === "bottom") {
+    top = triggerRect.bottom + offset;
+    left = alignTooltipHorizontal(triggerRect, tooltipRect, align);
+  } else if (side === "left") {
+    top = alignTooltipVertical(triggerRect, tooltipRect, align);
+    left = triggerRect.left - tooltipRect.width - offset;
+  } else {
+    top = alignTooltipVertical(triggerRect, tooltipRect, align);
+    left = triggerRect.right + offset;
+  }
+
+  const maxLeft = window.innerWidth - tooltipRect.width - VIEWPORT_PADDING;
+  const maxTop = window.innerHeight - tooltipRect.height - VIEWPORT_PADDING;
+
+  return {
+    top: Math.min(Math.max(top, VIEWPORT_PADDING), maxTop),
+    left: Math.min(Math.max(left, VIEWPORT_PADDING), maxLeft),
+  };
+}
+
+function alignTooltipHorizontal(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  align: TooltipAlign,
+) {
+  if (align === "start") return triggerRect.left;
+  if (align === "end") return triggerRect.right - tooltipRect.width;
+  return triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+}
+
+function alignTooltipVertical(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  align: TooltipAlign,
+) {
+  if (align === "start") return triggerRect.top;
+  if (align === "end") return triggerRect.bottom - tooltipRect.height;
+  return triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+}
+
+function TooltipArrow({ side }: { side: TooltipSide }) {
+  const position = {
+    top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-1px)]",
+    bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-[calc(100%-1px)] rotate-180",
+    left: "right-0 top-1/2 -translate-y-1/2 translate-x-[calc(100%-1px)] -rotate-90",
+    right: "left-0 top-1/2 -translate-y-1/2 -translate-x-[calc(100%-1px)] rotate-90",
+  }[side];
+
+  return (
+    <svg
+      aria-hidden
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+      className={cn(
+        "absolute text-zinc-900 dark:text-zinc-100",
+        position,
+      )}
+    >
+      <path fill="currentColor" d="M0 0h10L5 5 0 0z" />
+    </svg>
+  );
+}
+
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  delayDuration = 250,
+  disabled = false,
+  className,
+}: TooltipProps) {
+  const [open, setOpen] = React.useState(false);
+  const [visible, setVisible] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false);
+  const [position, setPosition] = React.useState({ top: -9999, left: -9999 });
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const triggerRef = React.useRef<HTMLSpanElement>(null);
+  const tooltipRef = React.useRef<HTMLDivElement>(null);
+  const id = React.useId();
+
+  React.useEffect(() => setMounted(true), []);
+
+  const clearTimer = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  const updatePosition = React.useCallback(() => {
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    setPosition(getTooltipPosition(triggerRect, tooltipRect, side, align, sideOffset));
+    requestAnimationFrame(() => setVisible(true));
+  }, [side, align, sideOffset]);
+
+  const show = () => {
+    if (disabled) return;
+    clearTimer();
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+      setOpen(true);
+    }, delayDuration);
+  };
+
+  const hide = () => {
+    clearTimer();
+    setVisible(false);
+    setOpen(false);
+  };
+
+  React.useEffect(() => clearTimer, []);
+
+  React.useLayoutEffect(() => {
+    if (!open) return;
+    updatePosition();
+    const handleUpdate = () => updatePosition();
+    window.addEventListener("scroll", handleUpdate, true);
+    window.addEventListener("resize", handleUpdate);
+    return () => {
+      window.removeEventListener("scroll", handleUpdate, true);
+      window.removeEventListener("resize", handleUpdate);
+    };
+  }, [open, updatePosition, content]);
+
+  const child = React.Children.only(children);
+  const trigger = React.isValidElement(child)
+    ? React.cloneElement(
+        child as React.ReactElement<{ "aria-describedby"?: string }>,
+        { "aria-describedby": open && visible ? id : undefined },
+      )
+    : children;
+
+  const tooltipNode = open ? (
+    <div
+      ref={tooltipRef}
+      id={id}
+      role="tooltip"
+      aria-hidden={!visible}
+      style={{ top: position.top, left: position.left }}
+      className={cn(tooltipVariants({ visible, side }), className)}
+    >
+      {content}
+      <TooltipArrow side={side} />
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className="inline-flex"
+        onMouseEnter={show}
+        onMouseLeave={hide}
+        onFocus={show}
+        onBlur={hide}
+      >
+        {trigger}
+      </span>
+      {mounted && tooltipNode ? createPortal(tooltipNode, document.body) : null}
+    </>
+  );
+}
+
+export { Tooltip, tooltipVariants };

package/data/color-palette.ts

@@ -0,0 +1,35 @@
+export interface ColorShade {
+  step: number;
+  hex: string;
+}
+
+export interface ColorHue {
+  name: string;
+  shades: ColorShade[];
+}
+
+const STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+function hue(name: string, hexes: string[]): ColorHue {
+  return {
+    name,
+    shades: STEPS.map((step, i) => ({ step, hex: hexes[i] })),
+  };
+}
+
+/**
+ * Curated primary set — one clearly distinct hue per color family,
+ * so the overview strip never shows two near-identical colors side by side.
+ */
+export const COLOR_PALETTE: ColorHue[] = [
+  hue("Red", ["#fef2f2", "#fee2e2", "#fecaca", "#fca5a5", "#f87171", "#ef4444", "#dc2626", "#b91c1c", "#991b1b", "#7f1d1d", "#450a0a"]),
+  hue("Orange", ["#fff7ed", "#ffedd5", "#fed7aa", "#fdba74", "#fb923c", "#f97316", "#ea580c", "#c2410c", "#9a3412", "#7c2d12", "#431407"]),
+  hue("Yellow", ["#fefce8", "#fef9c3", "#fef08a", "#fde047", "#facc15", "#eab308", "#ca8a04", "#a16207", "#854d0e", "#713f12", "#422006"]),
+  hue("Green", ["#f0fdf4", "#dcfce7", "#bbf7d0", "#86efac", "#4ade80", "#22c55e", "#16a34a", "#15803d", "#166534", "#14532d", "#052e16"]),
+  hue("Teal", ["#f0fdfa", "#ccfbf1", "#99f6e4", "#5eead4", "#2dd4bf", "#14b8a6", "#0d9488", "#0f766e", "#115e59", "#134e4a", "#042f2e"]),
+  hue("Blue", ["#eff6ff", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af", "#1e3a8a", "#172554"]),
+  hue("Indigo", ["#eef2ff", "#e0e7ff", "#c7d2fe", "#a5b4fc", "#818cf8", "#6366f1", "#4f46e5", "#4338ca", "#3730a3", "#312e81", "#1e1b4b"]),
+  hue("Purple", ["#faf5ff", "#f3e8ff", "#e9d5ff", "#d8b4fe", "#c084fc", "#a855f7", "#9333ea", "#7e22ce", "#6b21a8", "#581c87", "#3b0764"]),
+  hue("Pink", ["#fdf2f8", "#fce7f3", "#fbcfe8", "#f9a8d4", "#f472b6", "#ec4899", "#db2777", "#be185d", "#9d174d", "#831843", "#500724"]),
+  hue("Gray", ["#fafafa", "#f4f4f5", "#e4e4e7", "#d4d4d8", "#a1a1aa", "#71717a", "#52525b", "#3f3f46", "#27272a", "#18181b", "#09090b"]),
+];

package/data/docs-nav.ts

@@ -0,0 +1,84 @@
+import {
+  AppWindow,
+  BadgeCheck,
+  ChevronDown,
+  ChevronsUpDown,
+  CircleDot,
+  CircleUserRound,
+  Columns3,
+  Compass,
+  GaugeCircle,
+  Home,
+  Layers,
+  LayoutTemplate,
+  ListFilter,
+  Loader2,
+  Menu,
+  MessageCircle,
+  MessageSquareText,
+  MoreHorizontal,
+  MousePointerClick,
+  Move,
+  Palette,
+  Pipette,
+  Rows3,
+  Shapes,
+  SquareCheck,
+  Table2,
+  Tag,
+  TextCursorInput,
+  TextQuote,
+  ToggleLeft,
+  TriangleAlert,
+  type LucideIcon,
+} from "lucide-react";
+
+export interface DocsNavItem {
+  title: string;
+  slug: string;
+  icon: LucideIcon;
+}
+
+export interface DocsNavGroup {
+  title: string;
+  items: DocsNavItem[];
+}
+
+export const DOCS_NAV: DocsNavGroup[] = [
+  {
+    title: "Components",
+    items: [
+      { title: "Introduction", slug: "", icon: Home },
+      { title: "Getting Started", slug: "getting-started", icon: Compass },
+      { title: "Accordion", slug: "accordion", icon: ChevronsUpDown },
+      { title: "Alert", slug: "alert", icon: TriangleAlert },
+      { title: "Avatar", slug: "avatar", icon: CircleUserRound },
+      { title: "Badge", slug: "badge", icon: BadgeCheck },
+      { title: "Button", slug: "button", icon: MousePointerClick },
+      { title: "Card", slug: "card", icon: LayoutTemplate },
+      { title: "Checkbox", slug: "checkbox", icon: SquareCheck },
+      { title: "Dialog", slug: "dialog", icon: AppWindow },
+      { title: "Loader", slug: "loader", icon: Loader2 },
+      { title: "Dropdown", slug: "dropdown", icon: ChevronDown },
+      { title: "Input", slug: "input", icon: TextCursorInput },
+      { title: "Label", slug: "label", icon: Tag },
+      { title: "Modal", slug: "modal", icon: Layers },
+      { title: "Pagination", slug: "pagination", icon: MoreHorizontal },
+      { title: "Progress", slug: "progress", icon: GaugeCircle },
+      { title: "Radio", slug: "radio", icon: CircleDot },
+      { title: "Skeleton", slug: "skeleton", icon: Rows3 },
+      { title: "Switch", slug: "switch", icon: ToggleLeft },
+      { title: "Table", slug: "table", icon: Table2 },
+      { title: "Tabs", slug: "tabs", icon: Columns3 },
+      { title: "Stepper", slug: "stepper", icon: TextQuote },
+      { title: "Tooltip", slug: "tooltip", icon: MessageCircle },
+    ],
+  },
+  {
+    title: "Theming",
+    items: [
+      { title: "Theming", slug: "theming", icon: Palette },
+      { title: "Colors", slug: "colors", icon: Pipette },
+    ],
+  },
+];

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/index.ts

@@ -0,0 +1,8 @@
+export { Progress } from "./components/ui/progress";
+export type { ProgressProps } from "./components/ui/progress";
+
+export { Switch } from "./components/ui/switch";
+export type { SwitchProps } from "./components/ui/switch";
+
+export { Tooltip } from "./components/ui/tooltip";
+export type { TooltipProps } from "./components/ui/tooltip";

package/lib/cn.ts

@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

package/lib/color.ts

@@ -0,0 +1,85 @@
+export function hexToRgb(hex: string): [number, number, number] {
+  const clean = hex.replace("#", "");
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  return [r, g, b];
+}
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+
+  if (max === min) return [0, 0, Math.round(l * 100)];
+
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+  let h = 0;
+  switch (max) {
+    case rn:
+      h = (gn - bn) / d + (gn < bn ? 6 : 0);
+      break;
+    case gn:
+      h = (bn - rn) / d + 2;
+      break;
+    default:
+      h = (rn - gn) / d + 4;
+  }
+  h /= 6;
+
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+
+export type ColorFormat = "hex" | "rgb" | "hsl" | "css";
+
+export function formatColor(hex: string, format: ColorFormat): string {
+  const [r, g, b] = hexToRgb(hex);
+
+  switch (format) {
+    case "hex":
+      return hex.toUpperCase();
+    case "rgb":
+      return `rgb(${r}, ${g}, ${b})`;
+    case "hsl": {
+      const [h, s, l] = rgbToHsl(r, g, b);
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    case "css":
+      return `rgb(${r} ${g} ${b} / 1)`;
+  }
+}
+
+function getLuminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((channel) => {
+    const s = channel / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+export function getContrastRatio(hexA: string, hexB: string): number {
+  const a = getLuminance(hexA);
+  const b = getLuminance(hexB);
+  const lighter = Math.max(a, b);
+  const darker = Math.min(a, b);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+export type ContrastLabel = "AAA" | "AA" | "Fail";
+
+export function contrastLabel(ratio: number): ContrastLabel {
+  if (ratio >= 7) return "AAA";
+  if (ratio >= 4.5) return "AA";
+  return "Fail";
+}
+
+export function readableTextColor(hex: string): "#000000" | "#ffffff" {
+  return getContrastRatio(hex, "#000000") >= getContrastRatio(hex, "#ffffff")
+    ? "#000000"
+    : "#ffffff";
+}

package/lib/og-image.tsx

@@ -0,0 +1,138 @@
+import { ImageResponse } from "next/og";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+export const ogSize = { width: 1200, height: 630 };
+
+export const ogAlt =
+  "Ruler.ui — A sharper way to build interfaces. Precision-crafted React components for modern products.";
+
+async function loadGoogleFont(family: string, weight: number) {
+  const query = family.replace(/ /g, "+");
+  const css = await fetch(
+    `https://fonts.googleapis.com/css2?family=${query}:wght@${weight}&display=swap`,
+    {
+      headers: {
+        "User-Agent":
+          "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",
+      },
+    }
+  ).then((res) => res.text());
+
+  const match = css.match(/src: url\((.+?)\) format\('(opentype|truetype)'\)/);
+  if (!match) {
+    throw new Error(`Could not load ${family}`);
+  }
+
+  return fetch(match[1]).then((res) => res.arrayBuffer());
+}
+
+export async function createOgImage() {
+  const [iconData, orbitron, inter] = await Promise.all([
+    readFile(join(process.cwd(), "app/icon.png")),
+    loadGoogleFont("Orbitron", 700),
+    loadGoogleFont("Inter", 500),
+  ]);
+  const iconSrc = `data:image/png;base64,${iconData.toString("base64")}`;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#09090b",
+          backgroundImage:
+            "linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)",
+          backgroundSize: "56px 56px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            width: 1040,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              width: 112,
+              height: 112,
+              borderRadius: 28,
+              overflow: "hidden",
+              marginBottom: 36,
+              boxShadow: "0 12px 48px rgba(0,0,0,0.5)",
+            }}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={iconSrc} width={112} height={112} alt="" />
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              fontFamily: "Orbitron",
+              fontSize: 84,
+              fontWeight: 700,
+              color: "#fafafa",
+              letterSpacing: "0.04em",
+              lineHeight: 1,
+            }}
+          >
+            Ruler.ui
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              marginTop: 28,
+              fontFamily: "Inter",
+              fontSize: 34,
+              fontWeight: 500,
+              color: "#e4e4e7",
+              letterSpacing: "-0.03em",
+              lineHeight: 1.2,
+            }}
+          >
+            A sharper way to build interfaces.
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              marginTop: 12,
+              fontFamily: "Inter",
+              fontSize: 24,
+              color: "#a1a1aa",
+              letterSpacing: "-0.01em",
+            }}
+          >
+            Precision-crafted React components for modern products.
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      ...ogSize,
+      fonts: [
+        {
+          name: "Orbitron",
+          data: orbitron,
+          style: "normal",
+          weight: 700,
+        },
+        {
+          name: "Inter",
+          data: inter,
+          style: "normal",
+          weight: 500,
+        },
+      ],
+    }
+  );
+}