ruler-components 0.1.0

package/app/page.tsx

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

@@ -0,0 +1,10 @@
+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/components/docs/accordion-doc-page.tsx

@@ -0,0 +1,352 @@
+"use client";
+
+import { useState } from "react";
+import { Check, ChevronsUpDown, Copy, HelpCircle, PanelLeft, Truck } from "lucide-react";
+import { Accordion, AccordionItem, AccordionNested, AccordionLink } from "@/components/ui/accordion";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tooltip } from "@/components/ui/tooltip";
+import {
+  DocsAccessibility,
+  DocsApiSection,
+  DocsApiTable,
+  DocsPage,
+  DocsPageHeader,
+  DocsSection,
+} from "@/components/docs/docs-page";
+import { cn } from "@/lib/cn";
+
+const ACCORDION_API_ROWS = [
+  { prop: "children", type: "ReactNode", default: "—", description: "One or more AccordionItem elements" },
+  { prop: "defaultValue", type: "string | null", default: "null", description: "Value of the item expanded on mount" },
+  { prop: "className", type: "string", default: "—", description: "Additional CSS classes for the wrapper" },
+];
+
+const ITEM_API_ROWS = [
+  { prop: "value", type: "string", default: "—", description: "Unique identifier used to track open state" },
+  { prop: "title", type: "string", default: "—", description: "Text shown in the trigger row" },
+  { prop: "children", type: "ReactNode", default: "—", description: "Panel content revealed when open" },
+  { prop: "variant", type: '"plus" | "chevron"', default: '"plus"', description: "Icon and trigger style" },
+];
+
+const NESTED_API_ROWS = [
+  { prop: "title", type: "string", default: "—", description: "Label for the branch node" },
+  { prop: "children", type: "ReactNode", default: "—", description: "Nested AccordionNested / AccordionLink items" },
+  { prop: "level", type: "number", default: "0", description: "Indentation depth — increment for each nested level" },
+];
+
+const LINK_API_ROWS = [
+  { prop: "title", type: "string", default: "—", description: "Label for the leaf navigation item" },
+  { prop: "level", type: "number", default: "0", description: "Indentation depth — match the parent's level + 1" },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Every trigger renders as a native <button>, so it's reachable and activatable via keyboard by default.",
+  "aria-expanded reflects open state and aria-controls links each trigger to its panel for screen readers.",
+  "Panels animate by measuring scrollHeight rather than toggling display, so content never clips mid-transition.",
+  "Only one item stays open at a time within an Accordion — keeps focus narrow for FAQ-style content.",
+  "Nested menus support arbitrary depth via the level prop and indent children automatically.",
+];
+
+const FAQ = [
+  {
+    value: "1",
+    title: "Can I change my plan later?",
+    answer: "Yes — upgrade or downgrade at any time from your billing settings. Changes are prorated automatically.",
+  },
+  {
+    value: "2",
+    title: "Do you offer a free trial?",
+    answer: "Every plan includes a 14-day trial with full feature access, no credit card required.",
+  },
+  {
+    value: "3",
+    title: "Is my data encrypted?",
+    answer: "All data is encrypted in transit with TLS 1.3 and at rest with AES-256, on every plan.",
+  },
+  {
+    value: "4",
+    title: "What happens if I cancel?",
+    answer: "Your workspace stays active until the end of the current billing period, then moves to the free tier automatically.",
+  },
+];
+
+type PlaygroundVariant = "plus" | "chevron";
+
+const PLAYGROUND_VARIANTS: { value: PlaygroundVariant; label: string }[] = [
+  { value: "plus", label: "Plus" },
+  { value: "chevron", label: "Chevron" },
+];
+
+const ITEM_COUNTS = [2, 3] as const;
+
+function codeFor(variant: PlaygroundVariant, itemCount: (typeof ITEM_COUNTS)[number], defaultOpen: boolean) {
+  const items = FAQ.slice(0, itemCount);
+  const props = [variant !== "plus" && `variant="${variant}"`].filter(Boolean).join(" ");
+  const openProp = defaultOpen ? ` defaultValue="${items[0].value}"` : "";
+  const children = items
+    .map((item) => {
+      const itemProps = [`value="${item.value}"`, `title="${item.title}"`, props].filter(Boolean).join(" ");
+      return `  <AccordionItem ${itemProps}>\n    ${item.answer}\n  </AccordionItem>`;
+    })
+    .join("\n");
+  return `<Accordion${openProp}>\n${children}\n</Accordion>`;
+}
+
+export function AccordionDocPage() {
+  const [variant, setVariant] = useState<"plus" | "chevron">("plus");
+  const [playgroundVariant, setPlaygroundVariant] = useState<PlaygroundVariant>("plus");
+  const [itemCount, setItemCount] = useState<(typeof ITEM_COUNTS)[number]>(3);
+  const [defaultOpen, setDefaultOpen] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  const snippet = codeFor(playgroundVariant, itemCount, defaultOpen);
+  const playgroundItems = FAQ.slice(0, itemCount);
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={ChevronsUpDown}
+        title="Accordion"
+        description="A vertically stacked list of items that can be expanded or collapsed to reveal more content."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Pick a trigger style and item count, then copy the exact markup — live."
+      >
+        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
+          <div className="relative flex min-h-[11rem] items-center justify-center overflow-hidden bg-zinc-50 p-6 dark:bg-zinc-900/40">
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
+              style={{
+                backgroundImage:
+                  "linear-gradient(to right, rgb(161 161 170 / 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgb(161 161 170 / 0.35) 1px, transparent 1px)",
+                backgroundSize: "24px 24px",
+              }}
+            />
+            <div
+              key={`${playgroundVariant}-${itemCount}-${defaultOpen}`}
+              className="relative w-full max-w-md animate-[pagination-pop_0.2s_ease-out] rounded-xl border border-zinc-200 bg-white px-5 dark:border-zinc-800 dark:bg-zinc-950"
+            >
+              <Accordion defaultValue={defaultOpen ? playgroundItems[0].value : null}>
+                {playgroundItems.map((item) => (
+                  <AccordionItem key={item.value} value={item.value} title={item.title} variant={playgroundVariant}>
+                    {item.answer}
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-5 border-t border-zinc-200 p-5 dark:border-zinc-800">
+            <div className="flex flex-wrap items-start justify-between gap-6">
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Variant
+                </p>
+                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
+                  {PLAYGROUND_VARIANTS.map((v) => (
+                    <button
+                      key={v.value}
+                      type="button"
+                      onClick={() => setPlaygroundVariant(v.value)}
+                      className={cn(
+                        "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                        playgroundVariant === v.value
+                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                      )}
+                    >
+                      {v.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Items
+                </p>
+                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
+                  {ITEM_COUNTS.map((count) => (
+                    <button
+                      key={count}
+                      type="button"
+                      onClick={() => setItemCount(count)}
+                      className={cn(
+                        "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                        itemCount === count
+                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                      )}
+                    >
+                      {count}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Default open
+                </p>
+                <button
+                  type="button"
+                  onClick={() => setDefaultOpen((v) => !v)}
+                  className={cn(
+                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
+                    defaultOpen
+                      ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
+                      : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400"
+                  )}
+                >
+                  {defaultOpen ? "On" : "Off"}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
+              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
+                <code>{snippet}</code>
+              </pre>
+              <Tooltip content={copied ? "Copied!" : "Copy code"}>
+                <button
+                  type="button"
+                  onClick={copySnippet}
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
+                >
+                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </DocsSection>
+
+      <DocsSection
+        title="Try it"
+        description="One trigger style, swapped live — pick whichever matches your layout's density."
+      >
+        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
+          <div className="flex flex-wrap items-center justify-between gap-4 border-b border-zinc-200 bg-zinc-50/70 px-5 py-4 dark:border-zinc-800 dark:bg-zinc-900/40">
+            <div className="flex items-center gap-3">
+              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
+                <HelpCircle className="h-4 w-4" />
+              </span>
+              <div>
+                <p className="text-sm font-semibold text-zinc-900 dark:text-white">Frequently asked questions</p>
+                <p className="text-xs text-zinc-500 dark:text-zinc-400">Billing and account basics.</p>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-white p-1 dark:border-zinc-700 dark:bg-zinc-950">
+              {(["plus", "chevron"] as const).map((v) => (
+                <button
+                  key={v}
+                  type="button"
+                  onClick={() => setVariant(v)}
+                  className={cn(
+                    "rounded-md px-3 py-1.5 text-xs font-medium capitalize transition-colors",
+                    variant === v
+                      ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
+                      : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                  )}
+                >
+                  {v}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="bg-white px-5 dark:bg-zinc-950">
+            <Accordion defaultValue="1">
+              {FAQ.map((item) => (
+                <AccordionItem key={item.value} value={item.value} title={item.title} variant={variant}>
+                  {item.answer}
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+        </div>
+      </DocsSection>
+
+      <DocsSection
+        title="Hierarchical / Nested"
+        description="A menu-like tree with unlimited depth — ideal for sidebar and docs navigation."
+      >
+        <Card className="max-w-md overflow-hidden p-0">
+          <div className="flex items-center gap-2 border-b border-zinc-100 bg-zinc-50/80 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900/40">
+            <PanelLeft className="h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500" />
+            <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400">Documentation</span>
+          </div>
+          <div className="p-3">
+            <AccordionNested title="Getting Started">
+              <AccordionLink title="Introduction" level={1} />
+              <AccordionLink title="Installation" level={1} />
+            </AccordionNested>
+            <AccordionNested title="Components">
+              <AccordionLink title="Button" level={1} />
+              <AccordionNested title="Overlays" level={1}>
+                <AccordionLink title="Dialog" level={2} />
+                <AccordionLink title="Modal" level={2} />
+              </AccordionNested>
+            </AccordionNested>
+            <AccordionLink title="Theming" />
+          </div>
+        </Card>
+      </DocsSection>
+
+      <DocsSection
+        title="In context"
+        description="A shipping & returns block, the way it'd actually ship on a product page."
+      >
+        <Card className="max-w-2xl overflow-hidden p-0">
+          <CardHeader className="flex-row items-center gap-3 border-b border-zinc-100 dark:border-zinc-800">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
+              <Truck className="h-4 w-4" />
+            </span>
+            <div>
+              <CardTitle className="text-base">Shipping &amp; Returns</CardTitle>
+              <CardDescription>Everything covered under our standard policy.</CardDescription>
+            </div>
+            <Badge variant="outline" className="ml-auto">
+              Policy v2
+            </Badge>
+          </CardHeader>
+          <CardContent className="pt-2">
+            <Accordion defaultValue="ship">
+              <AccordionItem value="ship" title="How long does shipping take?">
+                Orders ship within 1 business day and arrive in 3–5 business days domestically, or 7–14 days
+                internationally.
+              </AccordionItem>
+              <AccordionItem value="return" title="What's your return policy?">
+                Unused items in original packaging can be returned within 30 days for a full refund — no restocking
+                fee.
+              </AccordionItem>
+              <AccordionItem value="warranty" title="Is there a warranty?">
+                Every order includes a 1-year limited warranty covering manufacturing defects.
+              </AccordionItem>
+            </Accordion>
+          </CardContent>
+        </Card>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsApiTable title="API Reference — Accordion" rows={ACCORDION_API_ROWS} />
+        <DocsApiTable title="API Reference — AccordionItem" rows={ITEM_API_ROWS} />
+        <DocsApiTable title="API Reference — AccordionNested" rows={NESTED_API_ROWS} />
+        <DocsApiTable title="API Reference — AccordionLink" rows={LINK_API_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}