ruler-components 0.1.1 → 0.1.3

package/app/docs/[slug]/page.tsx

@@ -1,147 +0,0 @@
-import { notFound } from "next/navigation";
-import { Construction } from "lucide-react";
-import { DOCS_NAV } from "@/data/docs-nav";
-import { DocsPage as DocsPageLayout, DocsPageHeader, DocsSection } from "@/components/docs/docs-page";
-import { AlertDocPage } from "@/components/docs/alert-doc-page";
-import { AvatarDocPage } from "@/components/docs/avatar-doc-page";
-import { BadgeDocPage } from "@/components/docs/badge-doc-page";
-import { ButtonDocPage } from "@/components/docs/button-doc-page";
-import { CardDocPage } from "@/components/docs/card-doc-page";
-import { CheckboxDocPage } from "@/components/docs/checkbox-doc-page";
-import { LabelDocPage } from "@/components/docs/label-doc-page";
-import { MenuDocPage } from "@/components/docs/menu-doc-page";
-import { ModalDocPage } from "@/components/docs/modal-doc-page";
-import { ProgressDocPage } from "@/components/docs/progress-doc-page";
-import { RadioDocPage } from "@/components/docs/radio-doc-page";
-import { SwitchDocPage } from "@/components/docs/switch-doc-page";
-import { TooltipDocPage } from "@/components/docs/tooltip-doc-page";
-import { AccordionDocPage } from "@/components/docs/accordion-doc-page";
-import { SkeletonDocPage } from "@/components/docs/skeleton-doc-page";
-import { DialogDocPage } from "@/components/docs/dialog-doc-page";
-import { TableDocPage } from "@/components/docs/table-doc-page";
-import { DropdownDocPage } from "@/components/docs/dropdown-doc-page";
-import { InputDocPage } from "@/components/docs/allinput-doc-page";
-import { TabsDocPage } from "@/components/docs/tabs-doc-page";
-import { PaginationDocPage } from "@/components/docs/pagination-doc-page";
-import { LoadersDocPage } from "@/components/docs/loaders-doc-page";
-import { StepperDocPage } from "@/components/docs/stepper-doc-page";
-import { ColorsDocPage } from "@/components/docs/colors-doc-page";
-import { ThemingDocPage } from "@/components/docs/theming-doc-page";
-import { GettingStartedDocPage } from "@/components/docs/getting-started-doc-page";
-
-
-
-export default async function DocsPage({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
-  const { slug } = await params;
-
-  const item = DOCS_NAV.flatMap((group) => group.items).find(
-    (entry) => entry.slug === slug,
-  );
-
-  if (!item) notFound();
-
-  switch (slug) {
-    case "alert":
-      return <AlertDocPage />;
-
-    case "avatar":
-      return <AvatarDocPage />;
-
-    case "badge":
-      return <BadgeDocPage />;
-
-    case "button":
-      return <ButtonDocPage />;
-
-    case "card":
-      return <CardDocPage />;
-
-    case "checkbox":
-      return <CheckboxDocPage />;
-
-    case "label":
-      return <LabelDocPage />;
-
-    case "menu":
-      return <MenuDocPage />;
-
-    case "modal":
-      return <ModalDocPage />;
-
-    case "progress":
-      return <ProgressDocPage />;
-
-    case "radio":
-      return <RadioDocPage />;
-
-    case "switch":
-      return <SwitchDocPage />;
-
-    case "tooltip":
-      return <TooltipDocPage />;
-      
-    case "accordion":
-      return <AccordionDocPage />;
-      
-    case "skeleton":
-      return <SkeletonDocPage />;
-      
-    case "dialog":
-      return <DialogDocPage />;
-      
-    case "table":
-      return <TableDocPage />;
-      
-    case "dropdown":
-      return <DropdownDocPage />;
-      
-    case "input":
-      return <InputDocPage />;
-      
-    case "tabs":
-      return <TabsDocPage />;
-
-    case "pagination":
-      return <PaginationDocPage />;
-      
-    case "loader":
-      return <LoadersDocPage />;
-      
-    case "stepper":
-      return <StepperDocPage />;
-
-    case "colors":
-      return <ColorsDocPage />;
-
-    case "theming":
-      return <ThemingDocPage />;
-
-    case "getting-started":
-      return <GettingStartedDocPage />;
-      
-      
-
-  }
-
-  return (
-    <DocsPageLayout>
-      <DocsPageHeader
-        icon={item.icon}
-        title={item.title}
-        description={`Documentation for the ${item.title} component is coming soon.`}
-      />
-      <DocsSection
-        contentClassName="flex flex-col items-center gap-3 rounded-xl border border-dashed border-zinc-300 py-16 text-center dark:border-zinc-700"
-      >
-        <Construction className="h-6 w-6 text-zinc-400" />
-        <p className="text-sm text-zinc-500 dark:text-zinc-400">
-          The {item.title} docs page is coming soon.
-        </p>
-      </DocsSection>
-    </DocsPageLayout>
-  );
-}

package/app/docs/layout.tsx

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-import { DocsTopbar } from "@/components/docs/docs-topbar";
-import { DocsSidebar } from "@/components/docs/docs-sidebar";
-import { DocsFooter } from "@/components/docs/docs-footer";
-import { DocsMobileNavProvider } from "@/components/docs/docs-mobile-nav-context";
-import { DocsMobileMenuBar } from "@/components/docs/docs-mobile-menu-bar";
-
-export default function DocsLayout({ children }: { children: ReactNode }) {
-  return (
-    <DocsMobileNavProvider>
-      <div className="docs-shell-glow relative min-h-screen bg-white dark:bg-zinc-950" id="docs-shell">
-        <DocsTopbar />
-        <DocsMobileMenuBar />
-        <div className="flex min-w-0">
-          <DocsSidebar />
-          <div className="relative z-10 min-w-0 flex-1 overflow-x-clip px-4 py-8 sm:px-10 sm:py-10 xl:px-16 2xl:px-24">
-            {children}
-            <div className="mx-auto max-w-5xl">
-              <DocsFooter />
-            </div>
-          </div>
-        </div>
-      </div>
-    </DocsMobileNavProvider>
-  );
-}

package/app/docs/page.tsx

@@ -1,148 +0,0 @@
-import Link from "next/link";
-import { Rocket, ShieldCheck, SwatchBook, Wand2 } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { InstallationSection } from "@/components/installation-section";
-import { UsageSection } from "@/components/docs/usage-section";
-import { NextSteps } from "@/components/docs/next-steps";
-import { DocsPage, DocsPageHeader, DocsSection } from "@/components/docs/docs-page";
-import { DOCS_NAV } from "@/data/docs-nav";
-
-const COMPONENT_COUNT = DOCS_NAV[0].items.filter((item) => item.slug).length;
-
-export default function DocsIntroductionPage() {
-  return (
-     <DocsPage>
-      {/* --- NEW HEADER SECTION (Based on Image) --- */}
-      <div className="mb-10 space-y-3">
-        <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
-  Welcome to ruler.ui
-</h1>
-        <p className="max-w-3xl text-[16px] leading-relaxed text-zinc-600 dark:text-zinc-400">
-          ruler.ui is a collective resource of global UI design patterns and components, 
-          to help maintain a cohesive user experience across all of your products and applications.
-        </p>
-      </div>
-
-      {/* --- STATS ROW --- */}
-      <div className="mt-6 flex flex-wrap items-center gap-3">
-  {/* Component Count Badge */}
-  <div className="inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
-    <span className="mr-1 font-semibold text-zinc-900 dark:text-white">{COMPONENT_COUNT}</span> 
-    components
-  </div>
-
-  {/* TypeScript Badge */}
-  <div className="inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
-    Written in TypeScript
-  </div>
-
-  {/* Accessibility Badge */}
-  <div className="inline-flex items-center rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
-    WAI-ARIA accessible
-  </div>
-</div>
-
-      {/* --- HOW IT WORKS SECTION (Based on Image) --- */}
-      <div className="relative my-8">
-  <div className="relative overflow-hidden border rounded-md border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
-    
-    {/* TOP-LEFT SLANTED ACCENT */}
-    <div
-      className="absolute left-0 top-0 h-[5px] w-24 bg-black"
-      style={{
-        clipPath: "polygon(0 0, 100% 0, 90% 100%, 0 100%)",
-      }}
-    />
-
-    {/* BOTTOM-RIGHT SLANTED ACCENT */}
-    <div
-      className="absolute bottom-0 right-0 h-[5px] w-24 bg-black"
-      style={{
-        clipPath: "polygon(10% 0, 100% 0, 100% 100%, 0 100%)",
-      }}
-    />
-
-    <div className="px-6 py-5 md:px-7 md:py-6">
-      <h2 className="mb-4 text-[16px] leading-relaxed text-zinc-600 dark:text-zinc-400">
-        How It Works
-      </h2>
-
-      <div>
-        {/* Feature 1 */}
-        <div className="pb-4">
-          <p className="text-[14px] leading-6 text-zinc-700 dark:text-zinc-300">
-            <span className="font-bold text-zinc-900 dark:text-white">
-              Simple access
-            </span>{" "}
-            to universal and reusable components & patterns available whenever
-            you need them.
-          </p>
-        </div>
-
-        <div className="border-t border-dashed border-zinc-200 dark:border-zinc-800" />
-
-        {/* Feature 2 */}
-        <div className="py-4">
-          <p className="text-[14px] leading-6 text-zinc-700 dark:text-zinc-300">
-            <span className="font-bold text-zinc-900 dark:text-white">
-              Instructions and guidance
-            </span>{" "}
-            to help you understand how elements are intended to behave, what
-            they look like and how they are coded.
-          </p>
-        </div>
-
-        <div className="border-t border-dashed border-zinc-200 dark:border-zinc-800" />
-
-        {/* Feature 3 */}
-        <div className="pt-4">
-          <p className="text-[14px] leading-6 text-zinc-700 dark:text-zinc-300">
-            {" "}
-            <span className="font-bold text-zinc-900 dark:text-white">
-              dedicated team
-            </span>{" "}
-            of designers and developers who manage the UI library and are here
-            to provide assistance when needed.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-      {/* --- ORIGINAL REMAINING SECTIONS (No changes below this) --- */}
-      <DocsSection
-        title="Explore every component"
-        description={`${COMPONENT_COUNT} components, fully typed and ready to import.`}
-      >
-        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
-          {DOCS_NAV[0].items
-            .filter((item) => item.slug)
-            .map((item) => (
-              <Link
-                key={item.slug}
-                href={`/docs/${item.slug}`}
-                className="group flex items-center gap-3 rounded-xl border border-zinc-200 p-3.5 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/40"
-              >
-                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-500 transition-colors group-hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400 dark:group-hover:text-white">
-                  <item.icon className="h-4 w-4" />
-                </span>
-                <span className="text-sm font-medium text-zinc-700 group-hover:text-zinc-900 dark:text-zinc-300 dark:group-hover:text-white">
-                  {item.title}
-                </span>
-              </Link>
-            ))}
-        </div>
-      </DocsSection>
-
-      <DocsSection>
-        <div className="rounded-3xl border border-zinc-200/70 bg-gradient-to-b from-zinc-50/80 to-white p-8 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800/70 dark:from-zinc-900/30 dark:to-zinc-950 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)] sm:p-12">
-          <InstallationSection as="h2" />
-        </div>
-      </DocsSection>
-
-      <UsageSection />
-      <NextSteps />
-    </DocsPage>
-  );
-}

package/app/globals.css

@@ -1,168 +0,0 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-:root {
-  --background: #ffffff;
-  --foreground: #09090b;
-}
-
-.dark {
-  --background: #09090b;
-  --foreground: #fafafa;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-poppins), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --font-brand: var(--font-orbitron), var(--font-poppins), ui-sans-serif, sans-serif;
-}
-
-html {
-  overflow-x: clip;
-  max-width: 100%;
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  min-width: 0;
-  max-width: 100%;
-}
-
-@layer base {
-  img {
-    max-width: 100%;
-  }
-}
-
-@layer utilities {
-  .docs-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(161 161 170 / 0.35) transparent;
-  }
-
-  .docs-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .docs-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .docs-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgb(161 161 170 / 0.35);
-    border-radius: 9999px;
-  }
-
-  .docs-scrollbar::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(161 161 170 / 0.55);
-  }
-
-  .docs-shell-glow {
-    background-image:
-      radial-gradient(circle 620px at 12% -10%, rgb(0 0 0 / 0.05), transparent 60%),
-      radial-gradient(circle 560px at 100% 0%, rgb(0 0 0 / 0.035), transparent 55%);
-  }
-
-  .dark .docs-shell-glow {
-    background-image:
-      radial-gradient(circle 620px at 12% -10%, rgb(255 255 255 / 0.05), transparent 60%),
-      radial-gradient(circle 560px at 100% 0%, rgb(255 255 255 / 0.03), transparent 55%);
-  }
-
-  .hero-spotlight-grid {
-    background-image:
-      linear-gradient(to right, rgb(255 255 255 / 0.3) 1px, transparent 1px),
-      linear-gradient(to bottom, rgb(255 255 255 / 0.3) 1px, transparent 1px);
-    background-size: 40px 40px;
-    opacity: 0;
-    will-change: mask-position, opacity;
-    -webkit-mask-image: radial-gradient(circle 280px at 280px 280px, black, transparent 72%);
-    mask-image: radial-gradient(circle 280px at 280px 280px, black, transparent 72%);
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: 560px 560px;
-    mask-size: 560px 560px;
-    -webkit-mask-position: var(--mask-x, calc(50% - 280px)) var(--mask-y, -280px);
-    mask-position: var(--mask-x, calc(50% - 280px)) var(--mask-y, -280px);
-    transition:
-      opacity 800ms ease,
-      -webkit-mask-position 900ms cubic-bezier(0.16, 1, 0.3, 1),
-      mask-position 900ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .hero-spotlight-grid.is-active {
-    opacity: 1;
-  }
-
-  /* Fluid type scale — smooth clamp() growth instead of hard breakpoint jumps */
-  .text-fluid-h1 {
-    font-size: clamp(2.25rem, 1.7rem + 2vw, 3.75rem);
-    line-height: 1.1;
-  }
-
-  .text-fluid-h2 {
-    font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
-    line-height: 1.15;
-  }
-
-  .hero-particle {
-    position: absolute;
-    margin: -2px;
-    border-radius: 9999px;
-    background: white;
-    filter: blur(0.3px);
-    pointer-events: none;
-    opacity: 0;
-    animation: hero-particle-drift var(--dur, 2200ms) ease-out forwards;
-  }
-}
-
-@keyframes hero-particle-drift {
-  0% {
-    transform: translate(0, 0);
-    opacity: 0;
-  }
-  15% {
-    opacity: var(--peak-opacity, 0.7);
-  }
-  50% {
-    transform: translate(var(--dx1, 10px), var(--dy1, 20px));
-  }
-  100% {
-    transform: translate(var(--dx2, 15px), var(--dy2, 60px));
-    opacity: 0;
-  }
-}
-
-@keyframes progress-indeterminate {
-  0% {
-    transform: translateX(-120%);
-  }
-  100% {
-    transform: translateX(350%);
-  }
-}
-
-@keyframes pagination-pop {
-  from {
-    opacity: 0;
-    transform: scale(0.85);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-::view-transition-group(*) {
-  animation-duration: 220ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-}
-

package/app/layout.tsx

@@ -1,90 +0,0 @@
-import type { Metadata, Viewport } from "next";
-import { cookies } from "next/headers";
-import { Geist_Mono, Orbitron, Poppins } from "next/font/google";
-import { ThemeProvider } from "@/components/theme-provider";
-import { parseTheme, THEME_COOKIE_KEY } from "@/lib/theme";
-import "./globals.css";
-
-const poppins = Poppins({
-  variable: "--font-poppins",
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-const orbitron = Orbitron({
-  variable: "--font-orbitron",
-  subsets: ["latin"],
-  weight: ["600", "700"],
-});
-
-const SITE_URL = "https://ruler-ui.vercel.app";
-const SITE_TITLE = "Ruler.ui";
-const SITE_DESCRIPTION =
-  "A sharper way to build interfaces. Precision-crafted React components for modern products.";
-
-export const viewport: Viewport = {
-  width: "device-width",
-  initialScale: 1,
-  maximumScale: 5,
-  viewportFit: "cover",
-};
-
-export const metadata: Metadata = {
-  metadataBase: new URL(SITE_URL),
-  title: {
-    default: SITE_TITLE,
-    template: `%s · ${SITE_TITLE}`,
-  },
-  description: SITE_DESCRIPTION,
-  openGraph: {
-    title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
-    url: SITE_URL,
-    siteName: SITE_TITLE,
-    type: "website",
-    images: [
-      {
-        url: "/opengraph-image",
-        width: 1200,
-        height: 630,
-        alt: "Ruler.ui — A sharper way to build interfaces.",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
-    images: ["/twitter-image"],
-  },
-};
-
-export default async function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const cookieStore = await cookies();
-  const theme = parseTheme(cookieStore.get(THEME_COOKIE_KEY)?.value);
-  const isDark = theme === "dark";
-
-  return (
-    <html
-      lang="en"
-      className={`${poppins.variable} ${geistMono.variable} ${orbitron.variable} max-w-full antialiased${isDark ? " dark" : ""}`}
-      suppressHydrationWarning
-    >
-      <body
-        className="min-h-dvh min-w-0 max-w-full bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50"
-        suppressHydrationWarning
-      >
-        <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
-      </body>
-    </html>
-  );
-}

package/app/opengraph-image.tsx

@@ -1,10 +0,0 @@
-import { createOgImage, ogAlt, ogSize } from "@/lib/og-image";
-
-export const runtime = "nodejs";
-export const alt = ogAlt;
-export const size = ogSize;
-export const contentType = "image/png";
-
-export default async function Image() {
-  return createOgImage();
-}

package/app/page.tsx

@@ -1,34 +0,0 @@
-import { HeroCard } from "@/components/landing/hero-card";
-import { FeatureHighlights } from "@/components/landing/feature-highlights";
-import { InstallationSection } from "@/components/installation-section";
-import { QuickStartSection } from "@/components/landing/quick-start-section";
-import { FooterStrip } from "@/components/landing/footer-strip";
-import { SiteFooter } from "@/components/landing/site-footer";
-
-export default function Home() {
-  return (
-    <main className="min-w-0 overflow-x-clip bg-white dark:bg-zinc-950">
-      <div className="px-3 pt-3 sm:px-6 sm:pt-4 lg:px-8 xl:px-12">
-        <HeroCard />
-      </div>
-
-      <FeatureHighlights />
-
-      <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-10 xl:px-12">
-        <div className="py-10 sm:py-14">
-          <div className="rounded-3xl border border-zinc-200/70 bg-gradient-to-b from-zinc-50/80 to-white p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800/70 dark:from-zinc-900/30 dark:to-zinc-950 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)] sm:p-12">
-            <InstallationSection
-              caption="ruler.ui is built with TypeScript and works with React 18+."
-            />
-          </div>
-        </div>
-        <QuickStartSection />
-        <FooterStrip />
-      </div>
-
-      <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-10 xl:px-12">
-        <SiteFooter />
-      </div>
-    </main>
-  );
-}

package/app/twitter-image.tsx

@@ -1,10 +0,0 @@
-import { createOgImage, ogAlt, ogSize } from "@/lib/og-image";
-
-export const runtime = "nodejs";
-export const alt = ogAlt;
-export const size = ogSize;
-export const contentType = "image/png";
-
-export default async function Image() {
-  return createOgImage();
-}