ruler-components 0.1.1 → 0.1.3

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

@@ -1,436 +0,0 @@
-"use client";
-
-import React from "react";
-import {
-  AlertTriangle,
-  Check,
-  Copy,
-  Layers,
-  Mail,
-  UserPlus,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsDemoPanel,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-} from "@/components/docs/docs-page";
-import {
-  Modal,
-  ModalBody,
-  ModalClose,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalOption,
-  ModalTitle,
-  ModalTrigger,
-} from "@/components/ui/modal";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "open", type: "boolean", default: "—", description: "Controlled open state" },
-  { prop: "onOpenChange", type: "(open: boolean) => void", default: "—", description: "Callback when open state changes" },
-  { prop: "defaultOpen", type: "boolean", default: "false", description: "Uncontrolled initial open state" },
-];
-
-const CONTENT_API_ROWS = [
-  { prop: "size", type: '"sm" | "md" | "lg" | "xl"', default: '"md"', description: "Maximum width of the modal" },
-  { prop: "showCloseButton", type: "boolean", default: "true", description: "Shows the top-right close button" },
-  { prop: "onClose", type: "() => void", default: "—", description: "Callback fired when modal closes" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Uses role=\"dialog\" and aria-modal for screen readers.",
-  "Closes on Escape key and backdrop click.",
-  "Focus moves into the modal when opened.",
-  "Provide a clear title and description for context.",
-  "Destructive actions should use explicit confirmation labels.",
-];
-
-type PlaygroundSize = "sm" | "md" | "lg" | "xl";
-
-const PLAYGROUND_SIZES: PlaygroundSize[] = ["sm", "md", "lg", "xl"];
-
-function codeFor(size: PlaygroundSize, showCloseButton: boolean) {
-  const props = [size !== "md" && `size="${size}"`, !showCloseButton && "showCloseButton={false}"]
-    .filter(Boolean)
-    .join(" ");
-  const open = props ? `<ModalContent ${props}>` : "<ModalContent>";
-  return `<Modal>
-  <ModalTrigger asChild>
-    <Button>Open modal</Button>
-  </ModalTrigger>
-  ${open}
-    <ModalHeader>
-      <ModalTitle>Publish changes?</ModalTitle>
-      <ModalDescription>
-        Your updates will be visible to everyone on the live site.
-      </ModalDescription>
-    </ModalHeader>
-    <ModalBody>
-      <p>Review your changes before publishing.</p>
-    </ModalBody>
-    <ModalFooter>
-      <ModalClose asChild>
-        <Button variant="ghost" size="sm">Cancel</Button>
-      </ModalClose>
-      <Button size="sm">Publish</Button>
-    </ModalFooter>
-  </ModalContent>
-</Modal>`;
-}
-
-export function ModalDocPage() {
-  const [inviteOpen, setInviteOpen] = React.useState(false);
-  const [deleteOpen, setDeleteOpen] = React.useState(false);
-  const [playgroundOpen, setPlaygroundOpen] = React.useState(false);
-  const [size, setSize] = React.useState<PlaygroundSize>("md");
-  const [showCloseButton, setShowCloseButton] = React.useState(true);
-  const [copied, setCopied] = React.useState(false);
-
-  const snippet = codeFor(size, showCloseButton);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={Layers}
-        title="Modal"
-        description="Focuses attention on a task or decision — overlays the page with a dismissible dialog surface."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Open the modal and try every size and close-button combination — with the exact markup to match."
-      >
-        <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">
-              <Modal open={playgroundOpen} onOpenChange={setPlaygroundOpen}>
-                <ModalTrigger asChild>
-                  <Button>Open modal</Button>
-                </ModalTrigger>
-                <ModalContent size={size} showCloseButton={showCloseButton}>
-                  <ModalHeader>
-                    <ModalTitle>Publish changes?</ModalTitle>
-                    <ModalDescription>
-                      Your updates will be visible to everyone on the live site.
-                    </ModalDescription>
-                  </ModalHeader>
-                  <ModalBody>
-                    <p className="text-sm text-zinc-600 dark:text-zinc-300">
-                      Review your changes before publishing.
-                    </p>
-                  </ModalBody>
-                  <ModalFooter>
-                    <ModalClose asChild>
-                      <Button variant="ghost" size="sm">Cancel</Button>
-                    </ModalClose>
-                    <ModalClose asChild>
-                      <Button size="sm">Publish</Button>
-                    </ModalClose>
-                  </ModalFooter>
-                </ModalContent>
-              </Modal>
-            </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">
-                  Size
-                </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_SIZES.map((s) => (
-                    <button
-                      key={s}
-                      type="button"
-                      onClick={() => setSize(s)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        size === s
-                          ? "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"
-                      )}
-                    >
-                      {s}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Close button
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setShowCloseButton((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    showCloseButton
-                      ? "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"
-                  )}
-                >
-                  {showCloseButton ? "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="Click to open — closes via backdrop, Escape, or the close button."
-      >
-        <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>Team workspace</CardTitle>
-                <CardDescription>Manage members and invitations.</CardDescription>
-              </div>
-              <Badge variant="outline">Interactive</Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-wrap items-center gap-3 pt-6">
-            <Modal>
-              <ModalTrigger asChild>
-                <Button size="sm">
-                  <UserPlus className="h-4 w-4" />
-                  Invite member
-                </Button>
-              </ModalTrigger>
-              <ModalContent>
-                <ModalHeader>
-                  <ModalTitle>Invite a teammate</ModalTitle>
-                  <ModalDescription>
-                    Send an invitation link to add someone to your workspace.
-                  </ModalDescription>
-                </ModalHeader>
-                <ModalBody>
-      
-                  <ModalOption
-                    icon={<Mail className="h-4 w-4" />}
-                    title="Editor access"
-                    description="Can edit projects and invite others."
-                  />
-                </ModalBody>
-                <ModalFooter>
-                  <ModalClose asChild>
-                    <Button variant="ghost" size="sm">Cancel</Button>
-                  </ModalClose>
-                  <ModalClose asChild>
-                    <Button size="sm">Send invitation</Button>
-                  </ModalClose>
-                </ModalFooter>
-              </ModalContent>
-            </Modal>
-            <Button variant="ghost" size="sm">View members</Button>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsSection>
-        <DocsSectionGrid className="lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Confirmation</CardTitle>
-            <CardDescription>Destructive actions need a deliberate second step.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Modal open={deleteOpen} onOpenChange={setDeleteOpen}>
-              <Button
-                size="sm"
-                variant="ghost"
-                className="text-red-600 hover:text-red-700 dark:text-red-400"
-                onClick={() => setDeleteOpen(true)}
-              >
-                Delete account
-              </Button>
-              <ModalContent size="sm" showCloseButton>
-                <ModalHeader>
-                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-red-50 text-red-600 dark:bg-red-950/50 dark:text-red-400">
-                    <AlertTriangle className="h-5 w-5" />
-                  </div>
-                  <ModalTitle className="mt-3">Delete account?</ModalTitle>
-                  <ModalDescription>
-                    This permanently removes your profile, projects, and billing history. This cannot be undone.
-                  </ModalDescription>
-                </ModalHeader>
-                <ModalFooter>
-                  <Button variant="ghost" size="sm" onClick={() => setDeleteOpen(false)}>
-                    Keep account
-                  </Button>
-                  <Button
-                    size="sm"
-                    className="bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-500"
-                    onClick={() => setDeleteOpen(false)}
-                  >
-                    Yes, delete
-                  </Button>
-                </ModalFooter>
-              </ModalContent>
-            </Modal>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Controlled State</CardTitle>
-            <CardDescription>Open and close programmatically with state.</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <Modal open={inviteOpen} onOpenChange={setInviteOpen}>
-              <div className="flex flex-wrap gap-2">
-                <Button size="sm" onClick={() => setInviteOpen(true)}>Open modal</Button>
-                <Button variant="ghost" size="sm" onClick={() => setInviteOpen(false)}>Close modal</Button>
-              </div>
-              <ModalContent size="md">
-                <ModalHeader>
-                  <ModalTitle>Controlled modal</ModalTitle>
-                  <ModalDescription>
-                    The parent component owns the open state via <code className="text-xs">open</code> and{" "}
-                    <code className="text-xs">onOpenChange</code>.
-                  </ModalDescription>
-                </ModalHeader>
-                <ModalBody>
-                  <p className="text-sm text-zinc-600 dark:text-zinc-300">
-                    Useful for multi-step flows, form validation, or syncing with URL parameters.
-                  </p>
-                </ModalBody>
-                <ModalFooter>
-                  <Button variant="ghost" size="sm" onClick={() => setInviteOpen(false)}>Done</Button>
-                </ModalFooter>
-              </ModalContent>
-            </Modal>
-          </CardContent>
-        </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection
-        title="Sizes"
-        description="Pick a width that matches the content — from quick alerts to detailed forms."
-        contentClassName="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"
-      >
-          {(["sm", "md", "lg", "xl"] as const).map((size) => (
-            <Card key={size} className="overflow-hidden">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-medium capitalize">{size}</CardTitle>
-                <CardDescription className="text-xs">
-                  {size === "sm" && "Quick confirmations"}
-                  {size === "md" && "Standard dialogs"}
-                  {size === "lg" && "Forms & settings"}
-                  {size === "xl" && "Rich content"}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Modal>
-                  <ModalTrigger asChild>
-                    <Button variant="ghost" size="sm" className="w-full">Preview</Button>
-                  </ModalTrigger>
-                  <ModalContent size={size}>
-                    <ModalHeader>
-                      <ModalTitle>{size.toUpperCase()} modal</ModalTitle>
-                      <ModalDescription>
-                        Example content at the {size} breakpoint.
-                      </ModalDescription>
-                    </ModalHeader>
-                    <ModalFooter>
-                      <ModalClose asChild>
-                        <Button size="sm" variant="ghost">Close</Button>
-                      </ModalClose>
-                    </ModalFooter>
-                  </ModalContent>
-                </Modal>
-              </CardContent>
-            </Card>
-          ))}
-      </DocsSection>
-
-      <DocsSection
-        title="Live Preview"
-        description="Modal with a dimmed overlay and smooth enter animation."
-      >
-        <DocsDemoPanel className="!py-0">
-          <div className="relative flex min-h-[320px] w-full items-center justify-center py-16">
-            <div className="w-full max-w-sm rounded-2xl border border-zinc-200/90 bg-white shadow-[0_20px_60px_rgba(0,0,0,0.12)] dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-[0_20px_60px_rgba(0,0,0,0.45)]">
-              <div className="space-y-1 px-6 pt-6">
-                <h3 className="text-[15px] font-semibold tracking-tight text-zinc-900 dark:text-white">
-                  Publish changes?
-                </h3>
-                <p className="text-[13px] leading-relaxed text-zinc-500 dark:text-zinc-400">
-                  Your updates will be visible to everyone on the live site.
-                </p>
-              </div>
-              <div className="px-6 pt-5 pb-6">
-                <Badge variant="success">Ready to publish</Badge>
-              </div>
-              <div className="flex items-center justify-end gap-2 border-t border-zinc-200/90 px-6 py-4 dark:border-zinc-800">
-                <Button variant="ghost" size="sm">Review</Button>
-                <Button size="sm">Publish now</Button>
-              </div>
-            </div>
-          </div>
-        </DocsDemoPanel>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Modal" rows={API_ROWS} />
-        <DocsApiTable title="API Reference — ModalContent" rows={CONTENT_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}

package/components/docs/next-steps.tsx

@@ -1,53 +0,0 @@
-import Link from "next/link";
-import { ArrowRight, Compass, Palette, Puzzle } from "lucide-react";
-import { DocsSection } from "@/components/docs/docs-page";
-
-const STEPS = [
-  {
-    icon: Puzzle,
-    title: "Components",
-    description: "Browse all components and their usage.",
-    href: "/docs/button",
-  },
-  {
-    icon: Palette,
-    title: "Theming",
-    description: "Customize the theme to match your brand.",
-    href: "/docs/theming",
-  },
-  {
-    icon: Compass,
-    title: "Examples",
-    description: "Check out real-world examples and templates.",
-    href: "/docs",
-  },
-];
-
-export function NextSteps() {
-  return (
-    <DocsSection
-      title="Next Steps"
-      description="Explore the documentation to learn more about the components and how to use them."
-      contentClassName="grid gap-4 sm:grid-cols-3"
-    >
-      {STEPS.map((step) => (
-        <Link
-          key={step.title}
-          href={step.href}
-          className="group rounded-xl border border-zinc-200/70 p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)] dark:border-zinc-800/80 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)] dark:hover:border-zinc-700 dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.35)]"
-        >
-          <span className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/[0.06] dark:text-zinc-100">
-            <step.icon className="h-4 w-4" />
-          </span>
-          <div className="mt-3.5 flex items-center justify-between">
-            <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-50">{step.title}</h3>
-            <ArrowRight className="h-4 w-4 text-zinc-400 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-900 dark:group-hover:text-zinc-50" />
-          </div>
-          <p className="mt-1.5 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
-            {step.description}
-          </p>
-        </Link>
-      ))}
-    </DocsSection>
-  );
-}