ruler-components 0.1.0

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

@@ -0,0 +1,293 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy, RotateCcw, TriangleAlert } from "lucide-react";
+import { Alert } from "@/components/ui/alert";
+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 API_ROWS = [
+  { prop: "variant", type: '"info" | "success" | "warning" | "error"', default: '"info"', description: "The style variant" },
+  { prop: "title", type: "string", default: "—", description: "The title text" },
+  { prop: "description", type: "string", default: "—", description: "The description text" },
+  { prop: "dismissible", type: "boolean", default: "false", description: "Shows close button" },
+  { prop: "onDismiss", type: "() => void", default: "—", description: "Dismiss callback" },
+  { prop: "action", type: "ReactNode", default: "—", description: "Trailing action, e.g. a button" },
+  { prop: "children", type: "ReactNode", default: "—", description: "Custom content" },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Use appropriate semantic markup.",
+  "Important alerts should use an appropriate ARIA role.",
+  "Don't rely on color alone to communicate status.",
+  "Provide meaningful text for screen readers.",
+  "Dismiss buttons should have an accessible label.",
+];
+
+type Variant = "info" | "success" | "warning" | "error";
+
+const VARIANTS: { value: Variant; label: string; swatch: string }[] = [
+  { value: "info", label: "Info", swatch: "bg-[#0070BA]" },
+  { value: "success", label: "Success", swatch: "bg-[#28A745]" },
+  { value: "warning", label: "Warning", swatch: "bg-[#E58E00]" },
+  { value: "error", label: "Error", swatch: "bg-[#D93025]" },
+];
+
+const COPY: Record<Variant, { title: string; description: string }> = {
+  info: { title: "Information", description: "This is an informational message for the user." },
+  success: { title: "Success", description: "Your changes have been saved successfully." },
+  warning: { title: "Warning", description: "This action may affect your existing data." },
+  error: { title: "Error", description: "Something went wrong. Please try again." },
+};
+
+function codeFor(variant: Variant, dismissible: boolean, withAction: boolean) {
+  const { title, description } = COPY[variant];
+  const lines = [
+    variant !== "info" ? `variant="${variant}"` : null,
+    `title="${title}"`,
+    `description="${description}"`,
+    dismissible ? "dismissible" : null,
+    withAction ? "action={<Button size=\"sm\">Action</Button>}" : null,
+  ].filter(Boolean);
+  return `<Alert\n  ${lines.join("\n  ")}\n/>`;
+}
+
+const ACTION_BUTTON_CLASS =
+  "h-7 cursor-pointer whitespace-nowrap border border-zinc-300 px-2 text-[10px] text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-white";
+
+const NOTIFICATIONS = [
+  { id: 1, variant: "info" as const, title: "Scheduled maintenance", description: "Search will be briefly unavailable tonight at 2 AM UTC." },
+  { id: 2, variant: "success" as const, title: "Payment received", description: "Your invoice #4471 has been paid in full." },
+  { id: 3, variant: "warning" as const, title: "Storage almost full", description: "You've used 92% of your workspace storage." },
+  { id: 4, variant: "error" as const, title: "Sync failed", description: "3 files couldn't be uploaded. Check your connection." },
+];
+
+export function AlertDocPage() {
+  const [variant, setVariant] = useState<Variant>("warning");
+  const [dismissible, setDismissible] = useState(false);
+  const [withAction, setWithAction] = useState(true);
+  const [dismissed, setDismissed] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [dismissedIds, setDismissedIds] = useState<number[]>([]);
+
+  const snippet = codeFor(variant, dismissible, withAction);
+  const visibleNotifications = NOTIFICATIONS.filter((n) => !dismissedIds.includes(n.id));
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={TriangleAlert}
+        title="Alert"
+        description="Displays a prominent message to inform users about important changes, warnings, or system status."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Every variant, with or without a dismiss button and action — live, 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",
+              }}
+            />
+            {dismissed ? (
+              <button
+                type="button"
+                onClick={() => setDismissed(false)}
+                className="relative flex items-center gap-2 rounded-lg border border-dashed border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-700 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:text-zinc-200"
+              >
+                <RotateCcw className="h-3.5 w-3.5" />
+                Dismissed — show it again
+              </button>
+            ) : (
+              <div
+                key={`${variant}-${dismissible}-${withAction}`}
+                className="relative w-full max-w-md animate-[pagination-pop_0.2s_ease-out]"
+              >
+                <Alert
+                  variant={variant}
+                  title={COPY[variant].title}
+                  description={COPY[variant].description}
+                  dismissible={dismissible}
+                  onDismiss={dismissible ? () => setDismissed(true) : undefined}
+                  action={withAction ? <Button variant="outline" size="sm" className={ACTION_BUTTON_CLASS}>Action</Button> : undefined}
+                />
+              </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 gap-1.5">
+                  {VARIANTS.map((v) => (
+                    <Tooltip key={v.value} content={v.label}>
+                      <button
+                        type="button"
+                        onClick={() => setVariant(v.value)}
+                        aria-label={v.label}
+                        className={cn(
+                          "flex h-8 w-8 items-center justify-center rounded-lg border transition-all",
+                          variant === v.value
+                            ? "border-zinc-900 ring-2 ring-zinc-900 ring-offset-2 ring-offset-zinc-50 dark:border-white dark:ring-white dark:ring-offset-zinc-900"
+                            : "border-zinc-200 hover:border-zinc-300 dark:border-zinc-700 dark:hover:border-zinc-600"
+                        )}
+                      >
+                        <span className={cn("h-3.5 w-3.5 rounded-full", v.swatch)} />
+                      </button>
+                    </Tooltip>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Dismissible
+                </p>
+                <button
+                  type="button"
+                  onClick={() => setDismissible((v) => !v)}
+                  className={cn(
+                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
+                    dismissible
+                      ? "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"
+                  )}
+                >
+                  {dismissible ? "On" : "Off"}
+                </button>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Action
+                </p>
+                <button
+                  type="button"
+                  onClick={() => setWithAction((v) => !v)}
+                  className={cn(
+                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
+                    withAction
+                      ? "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"
+                  )}
+                >
+                  {withAction ? "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="In context"
+        description="Alerts rarely stand alone — here's how they read inside real UI."
+      >
+        <DocsSectionGrid className="lg:grid-cols-[1.2fr_1fr]">
+          <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 items-center justify-between border-b border-zinc-200 bg-zinc-50/70 px-4 py-2.5 dark:border-zinc-800 dark:bg-zinc-900/40">
+              <p className="text-sm font-semibold text-zinc-900 dark:text-white">Notification center</p>
+              {dismissedIds.length > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setDismissedIds([])}
+                  className="flex items-center gap-1 text-xs font-medium text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+                >
+                  <RotateCcw className="h-3 w-3" />
+                  Restore all
+                </button>
+              )}
+            </div>
+            <div className="flex flex-col gap-3 p-4">
+              {visibleNotifications.length === 0 ? (
+                <p className="py-8 text-center text-sm text-zinc-400 dark:text-zinc-600">
+                  All caught up — nothing left to review.
+                </p>
+              ) : (
+                visibleNotifications.map((n) => (
+                  <Alert
+                    key={n.id}
+                    variant={n.variant}
+                    title={n.title}
+                    description={n.description}
+                    dismissible
+                    onDismiss={() => setDismissedIds((ids) => [...ids, n.id])}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950">
+              <p className="text-sm font-semibold text-zinc-900 dark:text-white">Invite teammates</p>
+              <label className="mt-3 block text-xs font-medium text-zinc-500 dark:text-zinc-400">
+                Email address
+              </label>
+              <input
+                readOnly
+                value="not-an-email"
+                className="mt-1.5 w-full rounded-lg border border-red-300 bg-red-50/50 px-3 py-2 text-sm text-zinc-700 outline-none dark:border-red-900/60 dark:bg-red-950/20 dark:text-zinc-200"
+              />
+              <div className="mt-2">
+                <Alert variant="error" description="Enter a valid email address to continue." />
+              </div>
+            </div>
+
+            <div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950">
+              <p className="mb-3 text-sm font-semibold text-zinc-900 dark:text-white">Plain, no title</p>
+              <Alert variant="info" description="This is a simple informational alert without a title." />
+            </div>
+          </div>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsApiTable title="API Reference" rows={API_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}

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

@@ -0,0 +1,183 @@
+"use client";
+
+import React from "react";
+import { Mail, TextCursorInput } from "lucide-react";
+import {
+  InputStandard,
+  InputFilled,
+  InputUnderline,
+  InputFloating,
+  InputSearch,
+  InputPassword,
+  InputAddon,
+  InputIcon,
+  InputOTP,
+  InputAutocomplete,
+} from "@/components/ui/allinput";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DocsAccessibility,
+  DocsApiSection,
+  DocsPage,
+  DocsPageHeader,
+  DocsSection,
+  DocsSectionGrid,
+  DocsSimpleTable,
+} from "@/components/docs/docs-page";
+
+const COMPONENT_ROWS = [
+  { name: "InputStandard", description: "Bordered outline field — the default choice for most forms." },
+  { name: "InputFilled", description: "Borderless, filled surface inspired by Material Design." },
+  { name: "InputUnderline", description: "Minimal single-line border that animates in on focus." },
+  { name: "InputFloating", description: "Label starts inline and floats above the value on focus." },
+  { name: "InputSearch", description: "Pill-shaped field with a leading search icon." },
+  { name: "InputPassword", description: "Masked field with a show/hide visibility toggle." },
+  { name: "InputAddon", description: "Wraps the field with static prefix and/or suffix text." },
+  { name: "InputIcon", description: "Places a leading or trailing icon inside the field." },
+  { name: "InputOTP", description: "Four-cell segmented field for one-time passcodes." },
+  { name: "InputAutocomplete", description: "Text field paired with a type-ahead suggestion list." },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Always pair an input with a visible or programmatically associated <label>.",
+  "Use aria-label on icon-only controls, like the password visibility toggle.",
+  "Communicate validation errors with text, not color alone.",
+  "OTP and segmented fields should expose each cell as a distinct, labeled input.",
+  "Preserve native input behavior — don't block paste, autofill, or keyboard navigation.",
+];
+
+export function InputDocPage() {
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={TextCursorInput}
+        title="Input"
+        description="Professional UI inputs with distinct visual identities — from bordered fields to floating labels and segmented codes."
+      />
+
+      <DocsSection first title="Foundation" description="Two dependable base styles for everyday forms.">
+        <DocsSectionGrid>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Outlined</CardTitle>
+              <CardDescription>The default bordered field for most forms.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputStandard placeholder="Email address" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Filled</CardTitle>
+              <CardDescription>A soft, borderless surface with a filled background.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputFilled placeholder="Your full name" />
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Minimal & Floating" description="Understated styles that keep the focus on content.">
+        <DocsSectionGrid>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Underline</CardTitle>
+              <CardDescription>A single border that animates in on focus.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputUnderline placeholder="Company" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Floating Label</CardTitle>
+              <CardDescription>The label lifts above the value once focused or filled.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputFloating label="Phone" placeholder=" " />
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Search & Security" description="Purpose-built fields for lookup and sensitive data entry.">
+        <DocsSectionGrid>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Search</CardTitle>
+              <CardDescription>Pill-shaped with a leading search icon.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputSearch placeholder="Search..." />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Password</CardTitle>
+              <CardDescription>Includes a toggle to reveal the typed value.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputPassword placeholder="Password" />
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Addons & Icons" description="Add context with affixes or a leading/trailing icon.">
+        <DocsSectionGrid>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">With Addons</CardTitle>
+              <CardDescription>Static prefix and suffix text framed around the value.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputAddon prefix="https://" suffix=".io" placeholder="domain" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">With Icon</CardTitle>
+              <CardDescription>A leading icon adds meaning at a glance.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputIcon icon={Mail} placeholder="Support email" />
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection
+        title="Advanced Patterns"
+        description="Segmented codes and intelligent type-ahead suggestions."
+        className="pb-28"
+      >
+        <DocsSectionGrid>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">OTP / Code</CardTitle>
+              <CardDescription>Four-cell segmented field for verification codes.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputOTP />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Autocomplete</CardTitle>
+              <CardDescription>Suggests matching values as the user types.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <InputAutocomplete placeholder="Search a company..." suggestions={["Apple", "Amazon", "Adobe"]} />
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsSimpleTable title="Available Components" rows={COMPONENT_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}