ruler-components 0.1.1 → 0.1.2

package/components/ui/theme-toggle.tsx

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

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

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

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

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

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

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

package/lib/color.ts

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

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