ruler-components 0.1.1 → 0.1.3

package/components/docs/dialog-doc-page.tsx

@@ -1,364 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { AlertTriangle, AppWindow, Check, Copy, MapPin, MessageSquare, ShieldCheck, User, WifiOff } from "lucide-react";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogAction, DialogItem } from "@/components/ui/dialog";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const DIALOG_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "A DialogTrigger and DialogContent pair" },
-  { prop: "open", type: "boolean", default: "—", description: "Controlled open state" },
-  { prop: "onOpenChange", type: "(open: boolean) => void", default: "—", description: "Callback fired when open state changes" },
-];
-
-const CONTENT_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "Dialog body — typically DialogHeader and DialogFooter" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes for the dialog card" },
-];
-
-const HEADER_API_ROWS = [
-  { prop: "title", type: "string", default: "—", description: "Bold heading describing the dialog's purpose" },
-  { prop: "description", type: "string", default: "—", description: "Supporting copy shown beneath the title" },
-];
-
-const ACTION_API_ROWS = [
-  { prop: "label", type: "string", default: "—", description: "Button text" },
-  { prop: "onClick", type: "() => void", default: "—", description: "Called before the dialog closes" },
-  { prop: "variant", type: '"primary" | "destructive"', default: '"primary"', description: "Neutral or red styling for irreversible actions" },
-];
-
-const ITEM_API_ROWS = [
-  { prop: "label", type: "string", default: "—", description: "Row text, e.g. an account email" },
-  { prop: "icon", type: "ReactNode", default: "—", description: "Custom icon — falls back to a variant default" },
-  { prop: "onClick", type: "() => void", default: "—", description: "Called before the dialog closes" },
-  { prop: "variant", type: '"account" | "action"', default: '"account"', description: "Tinted avatar circle vs. neutral action circle" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "DialogContent renders with role=\"dialog\" and aria-modal=\"true\" for assistive tech.",
-  "Pressing Escape closes the dialog, matching platform conventions.",
-  "Clicking the backdrop dismisses the dialog; clicks inside the card never bubble up to it.",
-  "Body scroll locks while a dialog is open, so background content can't scroll underneath it.",
-  "Pair the destructive DialogAction variant with an explicit label — \"Delete\", not \"OK\".",
-];
-
-function codeFor(withDescription: boolean, destructive: boolean) {
-  const headerProps = [
-    `title="Delete this project?"`,
-    withDescription && `description="This will permanently remove the project and all of its data. This action cannot be undone."`,
-  ]
-    .filter(Boolean)
-    .join("\n    ");
-
-  return `<Dialog>
-  <DialogTrigger>
-    <Button variant="outline">Open dialog</Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader
-      ${headerProps}
-    />
-    <DialogFooter>
-      <DialogAction label="Cancel" />
-      <DialogAction label="Delete"${destructive ? ' variant="destructive"' : ""} />
-    </DialogFooter>
-  </DialogContent>
-</Dialog>`;
-}
-
-export function DialogDocPage() {
-  const [withDescription, setWithDescription] = useState(true);
-  const [destructive, setDestructive] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(withDescription, destructive);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={AppWindow}
-        title="Dialog"
-        description="Overlay components for confirmations, account selection, forms, and system alerts."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Open the dialog to preview it live, toggle the description and destructive action, and copy the exact markup."
-      >
-        <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 className="relative">
-              <Dialog>
-                <DialogTrigger>
-                  <Button variant="outline">Open dialog</Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader
-                    title="Delete this project?"
-                    description={
-                      withDescription
-                        ? "This will permanently remove the project and all of its data. This action cannot be undone."
-                        : undefined
-                    }
-                  />
-                  <DialogFooter>
-                    <DialogAction label="Cancel" />
-                    <DialogAction label="Delete" variant={destructive ? "destructive" : "primary"} />
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </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">
-                  Description
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithDescription((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withDescription
-                      ? "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"
-                  )}
-                >
-                  {withDescription ? "On" : "Off"}
-                </button>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Destructive action
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setDestructive((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    destructive
-                      ? "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"
-                  )}
-                >
-                  {destructive ? "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="Default" description="A focused confirmation — trigger it, decide, and it's gone.">
-        <Card className="max-w-2xl">
-          <CardHeader className="border-b border-zinc-100 dark:border-zinc-800">
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <CardTitle>Location permissions</CardTitle>
-                <CardDescription>Ask before sharing device data with third parties.</CardDescription>
-              </div>
-              <Badge variant="outline">Interactive</Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-wrap items-center gap-3 pt-6">
-            <Dialog>
-              <DialogTrigger>
-                <Button variant="outline">
-                  <MapPin className="h-4 w-4" />
-                  Location Service
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader
-                  title="Use Google's location service?"
-                  description="Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
-                />
-                <DialogFooter>
-                  <DialogAction label="Disagree" />
-                  <DialogAction label="Agree" />
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-            <Button variant="ghost" size="sm">Learn more</Button>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsSection title="Common Patterns" description="Every dialog shares the same building blocks — trigger, header, footer.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[#0070BA]/10 text-[#0070BA] dark:bg-[#0070BA]/20 dark:text-[#4DA3E0]">
-                <User className="h-4 w-4" />
-              </div>
-              <CardTitle className="mt-3 text-base">Account picker</CardTitle>
-              <CardDescription>A compact list dialog with no footer actions.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dialog>
-                <DialogTrigger><Button variant="outline" size="sm">Select Account</Button></DialogTrigger>
-                <DialogContent className="max-w-[320px] p-0 overflow-hidden">
-                  <div className="px-5 pb-2 pt-5">
-                    <h2 className="text-[17px] font-semibold leading-snug tracking-tight text-zinc-900 dark:text-white">Set backup account</h2>
-                  </div>
-                  <div className="px-2 pb-3">
-                    <DialogItem label="username01@gmail.com" />
-                    <DialogItem label="username02@gmail.com" />
-                    <DialogItem label="Add account" variant="action" />
-                  </div>
-                </DialogContent>
-              </Dialog>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
-                <MessageSquare className="h-4 w-4" />
-              </div>
-              <CardTitle className="mt-3 text-base">Form dialog</CardTitle>
-              <CardDescription>Collects input before an action is confirmed.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dialog>
-                <DialogTrigger><Button variant="outline" size="sm">Feedback</Button></DialogTrigger>
-                <DialogContent>
-                  <DialogHeader title="Send feedback" description="Tell us what you think about our new interface." />
-                  <textarea
-                    className="w-full rounded-xl border border-zinc-200 bg-white p-3 text-sm text-zinc-900 outline-none transition-colors placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-zinc-400 dark:focus:ring-zinc-400/15"
-                    rows={4}
-                    placeholder="Write something..."
-                  />
-                  <DialogFooter>
-                    <DialogAction label="Cancel" />
-                    <DialogAction label="Send" />
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
-                <ShieldCheck className="h-4 w-4" />
-              </div>
-              <CardTitle className="mt-3 text-base">Information</CardTitle>
-              <CardDescription>A single acknowledgement action, nothing to decide.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dialog>
-                <DialogTrigger><Button variant="outline" size="sm">Privacy Policy</Button></DialogTrigger>
-                <DialogContent>
-                  <DialogHeader title="Policy updates" description="We have updated our terms of service to better protect your data and privacy." />
-                  <DialogFooter>
-                    <DialogAction label="Got it" />
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-red-50 text-red-600 dark:bg-red-950/50 dark:text-red-400">
-                <AlertTriangle className="h-4 w-4" />
-              </div>
-              <CardTitle className="mt-3 text-base">Destructive action</CardTitle>
-              <CardDescription>Irreversible actions need a deliberate second step.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dialog>
-                <DialogTrigger><Button variant="outline" size="sm" className="border-red-300 text-red-600 hover:border-red-400 dark:border-red-900 dark:text-red-400">Delete Account</Button></DialogTrigger>
-                <DialogContent>
-                  <DialogHeader title="Delete your account?" description="This action is permanent and cannot be undone. All your data will be removed immediately." />
-                  <DialogFooter>
-                    <DialogAction label="Cancel" />
-                    <DialogAction label="Delete" variant="destructive" />
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
-                <WifiOff className="h-4 w-4" />
-              </div>
-              <CardTitle className="mt-3 text-base">Simple alert</CardTitle>
-              <CardDescription>System-level notices with a single dismiss.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dialog>
-                <DialogTrigger><Button variant="outline" size="sm">Connection Error</Button></DialogTrigger>
-                <DialogContent>
-                  <DialogHeader title="No internet" description="You are currently offline. Check your connection and try again." />
-                  <DialogFooter>
-                    <DialogAction label="Dismiss" />
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Dialog" rows={DIALOG_API_ROWS} />
-        <DocsApiTable title="API Reference — DialogContent" rows={CONTENT_API_ROWS} />
-        <DocsApiTable title="API Reference — DialogHeader" rows={HEADER_API_ROWS} />
-        <DocsApiTable title="API Reference — DialogAction" rows={ACTION_API_ROWS} />
-        <DocsApiTable title="API Reference — DialogItem" rows={ITEM_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}

package/components/docs/docs-footer.tsx

@@ -1,11 +0,0 @@
-export function DocsFooter() {
-  return (
-    <footer className="mt-4 flex flex-col gap-2 border-t border-zinc-200/70 bg-gradient-to-b from-transparent to-zinc-50/40 px-1 py-8 text-sm text-zinc-500 dark:border-zinc-800/70 dark:to-zinc-900/20 dark:text-zinc-400 sm:flex-row sm:items-center sm:justify-between">
-      <p>© 2026 ruler.ui. All rights reserved.</p>
-      <p>
-        Documented with <span className="text-zinc-700 dark:text-zinc-300">♥</span> by
-        ruler.ui team
-      </p>
-    </footer>
-  );
-}

package/components/docs/docs-mobile-menu-bar.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { Menu } from "lucide-react";
-import { useDocsMobileNav } from "@/components/docs/docs-mobile-nav-context";
-
-export function DocsMobileMenuBar() {
-  const { open, setOpen } = useDocsMobileNav();
-
-  return (
-    <div className="sticky top-16 z-30 flex justify-left ml-4 border-b border-zinc-200 bg-white/80 py-2.5 backdrop-blur-md dark:border-zinc-800 dark:bg-zinc-950/80 lg:hidden">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        aria-label={open ? "Close component menu" : "Open component menu"}
-        aria-expanded={open}
-        className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-600 shadow-[0_1px_2px_rgba(0,0,0,0.03)] transition-colors hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/70 dark:hover:text-zinc-100"
-      >
-        <Menu className="h-4 w-4" />
-      </button>
-    </div>
-  );
-}

package/components/docs/docs-mobile-nav-context.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-interface DocsMobileNavContextValue {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-const DocsMobileNavContext = React.createContext<DocsMobileNavContextValue | null>(null);
-
-export function DocsMobileNavProvider({ children }: { children: React.ReactNode }) {
-  const [open, setOpen] = React.useState(false);
-  return (
-    <DocsMobileNavContext.Provider value={{ open, setOpen }}>
-      {children}
-    </DocsMobileNavContext.Provider>
-  );
-}
-
-export function useDocsMobileNav() {
-  const context = React.useContext(DocsMobileNavContext);
-  if (!context) {
-    throw new Error("useDocsMobileNav must be used within DocsMobileNavProvider");
-  }
-  return context;
-}