ruler-components 0.1.0 → 0.1.2

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

@@ -1,522 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { ArrowUpDown, Calendar, Check, ChevronDown, Copy, Filter, LogOut, Pencil, Search, Settings, Trash2, User } from "lucide-react";
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownDivider } from "@/components/ui/dropdown";
-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 DROPDOWN_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "A DropdownTrigger and DropdownContent pair" },
-];
-
-const TRIGGER_API_ROWS = [
-  { prop: "children", type: "ReactElement", default: "—", description: "A single element cloned with the open/close click handler" },
-];
-
-const CONTENT_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "DropdownItem, DropdownLabel, and DropdownDivider elements" },
-  { prop: "align", type: '"left" | "right"', default: '"left"', description: "Anchors the panel to the trigger's left or right edge" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const ITEM_API_ROWS = [
-  { prop: "label", type: "string", default: "—", description: "Row text" },
-  { prop: "icon", type: "LucideIcon", default: "—", description: "Optional leading icon" },
-  { prop: "selected", type: "boolean", default: "false", description: "Shows a trailing check mark" },
-  { prop: "onClick", type: "() => void", default: "—", description: "Called when the item is chosen" },
-  { prop: "variant", type: '"default" | "destructive"', default: '"default"', description: "Red styling for irreversible actions like sign-out" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "DropdownContent carries role=\"menu\" and each DropdownItem is a real <button> with role=\"menuitem\" — reachable and activatable via keyboard by default.",
-  "The trigger gets aria-haspopup=\"menu\" and aria-expanded, so assistive tech announces the menu's state.",
-  "Pressing Escape or clicking outside the panel closes it, matching platform conventions.",
-  "DropdownDivider carries role=\"separator\" — it's structural, not another option.",
-  "Pair the destructive item variant with an explicit label, like \"Log out\" rather than a bare icon.",
-];
-
-type Align = "left" | "right";
-
-const ALIGNMENTS: { value: Align; label: string }[] = [
-  { value: "left", label: "Left" },
-  { value: "right", label: "Right" },
-];
-
-function codeFor(align: Align, withIcons: boolean, withDestructive: boolean) {
-  const contentProps = align !== "left" ? ` align="${align}"` : "";
-  const items = [
-    withIcons ? `<DropdownItem label="Edit" icon={Pencil} />` : `<DropdownItem label="Edit" />`,
-    withIcons ? `<DropdownItem label="Duplicate" icon={Copy} />` : `<DropdownItem label="Duplicate" />`,
-  ];
-  if (withDestructive) {
-    items.push("<DropdownDivider />");
-    items.push(
-      withIcons
-        ? `<DropdownItem label="Delete" icon={Trash2} variant="destructive" />`
-        : `<DropdownItem label="Delete" variant="destructive" />`
-    );
-  }
-  const body = items.join("\n    ");
-  return `<Dropdown>\n  <DropdownTrigger>\n    <Button variant="outline">Options <ChevronDown size={16} /></Button>\n  </DropdownTrigger>\n  <DropdownContent${contentProps}>\n    ${body}\n  </DropdownContent>\n</Dropdown>`;
-}
-
-export function DropdownDocPage() {
-  const [selectedCountry, setSelectedCountry] = useState("United States");
-  const [multiSelect, setMultiSelect] = useState(["React"]);
-  const [cascading, setCascading] = useState({ country: "Select", state: "Select" });
-
-  const [align, setAlign] = useState<Align>("left");
-  const [withIcons, setWithIcons] = useState(true);
-  const [withDestructive, setWithDestructive] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(align, withIcons, withDestructive);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={ChevronDown}
-        title="Dropdown"
-        description="A contextual menu anchored to a trigger — for selection, navigation, filtering, and account actions."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a dropdown menu and copy the exact markup — alignment, icons, and destructive actions, 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-[16rem] items-center justify-center overflow-visible 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={`${align}-${withIcons}-${withDestructive}`} className="relative animate-[pagination-pop_0.2s_ease-out]">
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline">
-                    Options <ChevronDown size={16} />
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent align={align} className="w-52">
-                  {withIcons ? (
-                    <DropdownItem label="Edit" icon={Pencil} />
-                  ) : (
-                    <DropdownItem label="Edit" />
-                  )}
-                  {withIcons ? (
-                    <DropdownItem label="Duplicate" icon={Copy} />
-                  ) : (
-                    <DropdownItem label="Duplicate" />
-                  )}
-                  {withDestructive && (
-                    <>
-                      <DropdownDivider />
-                      {withIcons ? (
-                        <DropdownItem label="Delete" icon={Trash2} variant="destructive" />
-                      ) : (
-                        <DropdownItem label="Delete" variant="destructive" />
-                      )}
-                    </>
-                  )}
-                </DropdownContent>
-              </Dropdown>
-            </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">
-                  Alignment
-                </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">
-                  {ALIGNMENTS.map((a) => (
-                    <button
-                      key={a.value}
-                      type="button"
-                      onClick={() => setAlign(a.value)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        align === a.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"
-                      )}
-                    >
-                      {a.label}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  With icons
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithIcons((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withIcons
-                      ? "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"
-                  )}
-                >
-                  {withIcons ? "On" : "Off"}
-                </button>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  With destructive item
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithDestructive((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withDestructive
-                      ? "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"
-                  )}
-                >
-                  {withDestructive ? "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="An account menu — the most common dropdown pattern in any app header.">
-        <Card className="max-w-xl">
-          <CardHeader className="border-b border-zinc-100 dark:border-zinc-800">
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <CardTitle>Account menu</CardTitle>
-                <CardDescription>Anchored to a trigger, dismissed on outside click or Escape.</CardDescription>
-              </div>
-              <Badge variant="outline">Interactive</Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="pt-6">
-            <Dropdown>
-              <DropdownTrigger>
-                <div className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-zinc-100 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                  <User size={20} className="text-zinc-600 dark:text-zinc-400" />
-                </div>
-              </DropdownTrigger>
-              <DropdownContent align="left" className="w-56">
-                <div className="px-3 py-2">
-                  <p className="text-sm font-bold text-zinc-900 dark:text-white">John Doe</p>
-                  <p className="text-xs text-zinc-500 dark:text-zinc-400">john@example.com</p>
-                </div>
-                <DropdownDivider />
-                <DropdownItem label="Profile" icon={User} />
-                <DropdownItem label="Settings" icon={Settings} />
-                <DropdownDivider />
-                <DropdownItem label="Log out" icon={LogOut} variant="destructive" />
-              </DropdownContent>
-            </Dropdown>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsSection title="Selection & Search" description="Core selection behaviors for single and filtered data.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Select</CardTitle>
-              <CardDescription>A labeled list with a checkmark on the current selection.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline" className="w-full justify-between">
-                    {selectedCountry} <ChevronDown size={16} />
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-56">
-                  <DropdownLabel>Country</DropdownLabel>
-                  <DropdownItem label="United States" selected={selectedCountry === "United States"} onClick={() => setSelectedCountry("United States")} />
-                  <DropdownItem label="Canada" selected={selectedCountry === "Canada"} onClick={() => setSelectedCountry("Canada")} />
-                  <DropdownItem label="United Kingdom" selected={selectedCountry === "United Kingdom"} onClick={() => setSelectedCountry("United Kingdom")} />
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Searchable</CardTitle>
-              <CardDescription>An input embedded at the top of the panel for filtering long lists.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline" className="w-full justify-between">
-                    Select category <Search size={14} />
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-64">
-                  <div className="p-2">
-                    <div className="flex items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-1.5 dark:border-zinc-800 dark:bg-zinc-900">
-                      <Search size={14} className="text-zinc-400" />
-                      <input className="w-full bg-transparent text-sm text-zinc-900 outline-none placeholder:text-zinc-400 dark:text-zinc-100" placeholder="Search..." />
-                    </div>
-                  </div>
-                  <DropdownDivider />
-                  <DropdownItem label="Technology" />
-                  <DropdownItem label="Healthcare" />
-                  <DropdownItem label="Finance" />
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Multi-Select & Suggestions" description="Handles complex selection states and type-ahead suggestions.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Multi-select</CardTitle>
-              <CardDescription>Toggle several options without the panel closing.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline" className="w-full justify-between">
-                    Stack ({multiSelect.length}) <ChevronDown size={16} />
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-56">
-                  {["React", "Next.js", "Tailwind", "TypeScript"].map((tech) => (
-                    <DropdownItem
-                      key={tech}
-                      label={tech}
-                      selected={multiSelect.includes(tech)}
-                      onClick={() => setMultiSelect((prev) => (prev.includes(tech) ? prev.filter((t) => t !== tech) : [...prev, tech]))}
-                    />
-                  ))}
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Autocomplete</CardTitle>
-              <CardDescription>DropdownItem composed under a search field for type-ahead suggestions.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="relative w-full">
-                <input
-                  className="w-full rounded-lg border border-zinc-200 bg-white p-2.5 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-950 dark:text-zinc-100 dark:focus:border-zinc-400 dark:focus:ring-zinc-400/15"
-                  placeholder="Type to search..."
-                  defaultValue="A"
-                  readOnly
-                />
-                <div className="relative z-10 mt-1.5 w-full rounded-lg border border-zinc-100 bg-white p-1 shadow-[0_4px_12px_rgba(0,0,0,0.08)] dark:border-zinc-800 dark:bg-zinc-950">
-                  <DropdownItem label="Apple" />
-                  <DropdownItem label="Amazon" />
-                  <DropdownItem label="Adobe" />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Navigation & Filtering" description="Common patterns for site navigation and dataset filters.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Navigation menu</CardTitle>
-              <CardDescription>A wider panel with grouped descriptions, ideal for a top nav.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline" className="w-full justify-between">
-                    Resources <ChevronDown size={16} />
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-72 p-2">
-                  <div className="grid gap-1">
-                    <div className="group cursor-pointer rounded-md p-3 hover:bg-zinc-50 dark:hover:bg-zinc-900">
-                      <p className="text-sm font-bold text-zinc-900 group-hover:text-zinc-900 dark:text-zinc-100 dark:group-hover:text-white">Documentation</p>
-                      <p className="text-xs text-zinc-400">Guides and API reference.</p>
-                    </div>
-                    <div className="group cursor-pointer rounded-md p-3 hover:bg-zinc-50 dark:hover:bg-zinc-900">
-                      <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Showcase</p>
-                      <p className="text-xs text-zinc-400">Apps built with our UI.</p>
-                    </div>
-                  </div>
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Filter</CardTitle>
-              <CardDescription>Grouped options under labeled sections.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline" className="w-full">
-                    <Filter size={14} />
-                    Filter options
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-52">
-                  <DropdownLabel>Price range</DropdownLabel>
-                  <DropdownItem label="$0 – $50" />
-                  <DropdownItem label="$50 – $200" />
-                  <DropdownDivider />
-                  <DropdownLabel>Status</DropdownLabel>
-                  <DropdownItem label="Available" />
-                  <DropdownItem label="Out of stock" />
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Data Tools" description="Sorting controls and a lightweight date picker.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Sort</CardTitle>
-              <CardDescription>A quiet ghost trigger for secondary table actions.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="ghost" className="w-full border border-zinc-200 dark:border-zinc-800">
-                    <ArrowUpDown size={14} />
-                    Sort data
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-52">
-                  <DropdownItem label="Newest first" icon={ArrowUpDown} />
-                  <DropdownItem label="Price: high to low" />
-                  <DropdownItem label="Customer rating" />
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Date picker</CardTitle>
-              <CardDescription>A calendar grid rendered inside the dropdown panel.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button variant="outline" className="w-full">
-                    <Calendar size={16} />
-                    Select range
-                  </Button>
-                </DropdownTrigger>
-                <DropdownContent className="w-64 p-3 text-center">
-                  <div className="mb-2 grid grid-cols-7 gap-1 text-[10px] font-bold text-zinc-400">
-                    <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>
-                  </div>
-                  <div className="grid grid-cols-7 gap-1">
-                    {Array.from({ length: 28 }).map((_, i) => (
-                      <div key={i} className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800">
-                        {i + 1}
-                      </div>
-                    ))}
-                  </div>
-                </DropdownContent>
-              </Dropdown>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Cascading Selects" description="One dropdown's selection determines the options available in the next.">
-        <Card className="max-w-md">
-          <CardContent className="flex gap-2 pt-6">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button variant="outline" className="flex-1">{cascading.country}</Button>
-              </DropdownTrigger>
-              <DropdownContent className="w-32">
-                <DropdownItem label="USA" onClick={() => setCascading({ country: "USA", state: "Select" })} />
-                <DropdownItem label="UK" onClick={() => setCascading({ country: "UK", state: "Select" })} />
-              </DropdownContent>
-            </Dropdown>
-            <Dropdown>
-              <DropdownTrigger>
-                <Button variant="outline" className="flex-1" disabled={cascading.country === "Select"}>
-                  {cascading.state}
-                </Button>
-              </DropdownTrigger>
-              <DropdownContent className="w-32">
-                <DropdownItem
-                  label={cascading.country === "USA" ? "California" : "London"}
-                  onClick={() => setCascading({ ...cascading, state: cascading.country === "USA" ? "California" : "London" })}
-                />
-              </DropdownContent>
-            </Dropdown>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Dropdown" rows={DROPDOWN_API_ROWS} />
-        <DocsApiTable title="API Reference — DropdownTrigger" rows={TRIGGER_API_ROWS} />
-        <DocsApiTable title="API Reference — DropdownContent" rows={CONTENT_API_ROWS} />
-        <DocsApiTable title="API Reference — DropdownItem" rows={ITEM_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}