@stampui/blocks 1.0.0 → 1.1.0

package/src/components/blocks/dashboard-shell.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Menu, X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface NavItem {
+  label: string
+  href: string
+  icon?: LucideIcon
+  active?: boolean
+}
+
+export interface SidebarConfig {
+  logo?: React.ReactNode
+  nav: NavItem[]
+  footer?: React.ReactNode
+}
+
+export interface DashboardShellProps {
+  sidebar: SidebarConfig
+  header?: {
+    title?: string
+    actions?: React.ReactNode
+  }
+  children: React.ReactNode
+  className?: string
+}
+
+export function DashboardShell({
+  sidebar,
+  header,
+  children,
+  className,
+}: DashboardShellProps) {
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+
+  return (
+    <div className={cx("flex min-h-screen bg-[#070708]", className)}>
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-20 bg-[#070708]/80 lg:hidden"
+          onClick={() => setMobileOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      <aside
+        className={cx(
+          "fixed inset-y-0 left-0 z-30 flex w-[240px] flex-col border-r border-[#23252A] bg-[#09090B]",
+          "transition-transform duration-[200ms] ease-out",
+          "lg:static lg:translate-x-0",
+          mobileOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        {sidebar.logo && (
+          <div className="flex h-14 shrink-0 items-center border-b border-[#23252A] px-4">
+            {sidebar.logo}
+          </div>
+        )}
+
+        <nav className="flex-1 overflow-y-auto px-2 py-3">
+          <ul className="flex flex-col gap-0.5">
+            {sidebar.nav.map((item, i) => {
+              const Icon = item.icon
+              return (
+                <li key={i}>
+                  <a
+                    href={item.href}
+                    className={cx(
+                      "flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm transition-colors duration-[150ms] ease-out",
+                      item.active
+                        ? "bg-[#101114] text-[#FAFAFA] font-medium"
+                        : "text-muted-foreground hover:bg-[#101114] hover:text-[#FAFAFA]"
+                    )}
+                  >
+                    {Icon && <Icon size={15} strokeWidth={1.75} className="shrink-0" />}
+                    <span className="truncate">{item.label}</span>
+                  </a>
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+
+        {sidebar.footer && (
+          <div className="shrink-0 border-t border-[#23252A] px-4 py-3">
+            {sidebar.footer}
+          </div>
+        )}
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        {(header || true) && (
+          <header className="flex h-14 shrink-0 items-center gap-3 border-b border-[#23252A] px-4 lg:px-6">
+            <button
+              type="button"
+              onClick={() => setMobileOpen(true)}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-[150ms] ease-out hover:bg-[#101114] hover:text-[#FAFAFA] lg:hidden"
+              aria-label="Open navigation"
+            >
+              <Menu size={16} />
+            </button>
+
+            {header?.title && (
+              <h1 className="text-sm font-semibold text-[#FAFAFA] truncate">
+                {header.title}
+              </h1>
+            )}
+
+            {header?.actions && (
+              <div className="ml-auto flex items-center gap-2">
+                {header.actions}
+              </div>
+            )}
+          </header>
+        )}
+
+        <main className="flex-1 overflow-y-auto p-4 lg:p-6">{children}</main>
+      </div>
+
+      {mobileOpen && (
+        <button
+          type="button"
+          onClick={() => setMobileOpen(false)}
+          className="fixed right-4 top-4 z-40 flex h-8 w-8 items-center justify-center rounded-lg border border-[#23252A] bg-[#09090B] text-muted-foreground transition-colors duration-[150ms] ease-out hover:text-[#FAFAFA] lg:hidden"
+          aria-label="Close navigation"
+        >
+          <X size={14} />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/empty-state.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Inbox } from "lucide-react"
+import { Button } from "@/components/core/button"
+import { cx } from "@/lib/cx"
+
+export interface EmptyStateAction {
+  label: string
+  onClick?: () => void
+  href?: string
+}
+
+export interface EmptyStateProps {
+  icon?: LucideIcon
+  title: string
+  description?: string
+  action?: EmptyStateAction
+  className?: string
+}
+
+export function EmptyState({
+  icon: Icon = Inbox,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cx(
+        "flex flex-col items-center justify-center text-center px-6 py-16",
+        className
+      )}
+    >
+      <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-xl border border-[#23252A] bg-[#09090B]">
+        <Icon size={24} className="text-muted-foreground" strokeWidth={1.5} />
+      </div>
+
+      <h3 className="text-sm font-semibold text-[#FAFAFA] mb-1.5">{title}</h3>
+
+      {description && (
+        <p className="text-sm text-muted-foreground max-w-xs leading-relaxed mb-6">
+          {description}
+        </p>
+      )}
+
+      {action && (
+        <div className={cx(!description && "mt-6")}>
+          {action.href ? (
+            <Button variant="outline" size="sm" asChild>
+              <a href={action.href}>{action.label}</a>
+            </Button>
+          ) : (
+            <Button variant="outline" size="sm" onClick={action.onClick}>
+              {action.label}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/error-page.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/core/button"
+import { cx } from "@/lib/cx"
+
+export interface ErrorPageAction {
+  label: string
+  href?: string
+  onClick?: () => void
+}
+
+export interface ErrorPageProps {
+  code?: string | number
+  title?: string
+  description?: string
+  action?: ErrorPageAction
+  className?: string
+}
+
+export function ErrorPage({
+  code = "404",
+  title = "Page not found",
+  description = "The page you're looking for doesn't exist or has been moved.",
+  action = { label: "Back to home", href: "/" },
+  className,
+}: ErrorPageProps) {
+  return (
+    <div
+      className={cx(
+        "min-h-screen w-full bg-[#070708] flex flex-col items-center justify-center px-6",
+        className
+      )}
+    >
+      <div className="flex flex-col items-center text-center max-w-sm">
+        <span
+          className="text-[96px] font-bold leading-none tracking-tighter text-muted-foreground/30 select-none tabular-nums"
+          aria-hidden="true"
+        >
+          {code}
+        </span>
+
+        <h1 className="mt-4 text-xl font-semibold text-[#FAFAFA] tracking-tight">
+          {title}
+        </h1>
+
+        {description && (
+          <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        {action && (
+          <div className="mt-8">
+            {action.href ? (
+              <Button variant="outline" size="md" asChild>
+                <a href={action.href}>{action.label}</a>
+              </Button>
+            ) : (
+              <Button variant="outline" size="md" onClick={action.onClick}>
+                {action.label}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/faq-accordion.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Plus, Minus } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface FaqItem {
+  question: string
+  answer: string
+}
+
+export interface FaqAccordionProps {
+  items?: FaqItem[]
+  title?: string
+  className?: string
+}
+
+const DEFAULT_ITEMS: FaqItem[] = [
+  {
+    question: "Do I need to install a runtime?",
+    answer: "No. StampUI copies source files directly into your project. There is no runtime dependency — you own every line of code after stamping.",
+  },
+  {
+    question: "What frameworks are supported?",
+    answer: "Next.js 13+ (App Router), Remix, and any React project using Tailwind CSS. Vite-based setups work with minor config adjustments.",
+  },
+  {
+    question: "Can I customize the components after stamping?",
+    answer: "Yes, and that's the point. Once stamped, components are plain TypeScript/React files in your codebase. Modify them freely without worrying about upstream conflicts.",
+  },
+  {
+    question: "Is there a free tier?",
+    answer: "All blocks are free to stamp and use in personal or commercial projects. A pro plan unlocks private block collections and team sharing.",
+  },
+]
+
+function AccordionItem({ question, answer }: FaqItem) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="border-b border-[#23252A] last:border-b-0">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className={cx(
+          "w-full flex items-center justify-between gap-4 py-5 text-left",
+          "text-sm font-medium text-[#FAFAFA] leading-snug",
+          "transition-colors duration-[170ms] ease-out",
+          "hover:text-[#FAFAFA]/80"
+        )}
+        aria-expanded={open}
+      >
+        <span>{question}</span>
+        <span className="shrink-0 text-muted-foreground">
+          {open ? <Minus size={14} /> : <Plus size={14} />}
+        </span>
+      </button>
+
+      <div
+        className={cx(
+          "overflow-hidden transition-all duration-[200ms] ease-out",
+          open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        )}
+      >
+        <p className="pb-5 text-sm text-muted-foreground leading-relaxed">
+          {answer}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function FaqAccordion({
+  items = DEFAULT_ITEMS,
+  title = "Frequently asked questions",
+  className,
+}: FaqAccordionProps) {
+  return (
+    <section className={cx("w-full py-16 px-6", className)}>
+      <div className="max-w-2xl mx-auto">
+        {title && (
+          <h2 className="text-2xl font-bold tracking-tight text-[#FAFAFA] mb-8">
+            {title}
+          </h2>
+        )}
+
+        <div className="rounded-xl border border-[#23252A] bg-[#09090B] px-6">
+          {items.map((item, i) => (
+            <AccordionItem key={i} question={item.question} answer={item.answer} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/feature-comparison.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface ComparisonPlan {
+  name: string
+  highlighted?: boolean
+}
+
+export interface ComparisonFeature {
+  label: string
+  values: (boolean | string)[]
+}
+
+export interface FeatureComparisonProps {
+  plans?: ComparisonPlan[]
+  features?: ComparisonFeature[]
+  className?: string
+}
+
+const defaultPlans: ComparisonPlan[] = [
+  { name: "Free" },
+  { name: "Pro", highlighted: true },
+  { name: "Team" },
+]
+
+const defaultFeatures: ComparisonFeature[] = [
+  { label: "Components", values: ["50", "200+", "200+"] },
+  { label: "CLI access", values: [true, true, true] },
+  { label: "Custom themes", values: [false, true, true] },
+  { label: "Team seats", values: ["1", "1", "Unlimited"] },
+  { label: "Priority support", values: [false, false, true] },
+  { label: "Private blocks", values: [false, true, true] },
+  { label: "Analytics", values: [false, false, true] },
+]
+
+function CellValue({ value }: { value: boolean | string }) {
+  if (typeof value === "boolean") {
+    return value ? (
+      <span className="text-[#FAFAFA] text-sm font-medium">✓</span>
+    ) : (
+      <span className="text-muted-foreground text-sm opacity-40">—</span>
+    )
+  }
+  return <span className="text-sm text-[#FAFAFA]">{value}</span>
+}
+
+export function FeatureComparison({
+  plans = defaultPlans,
+  features = defaultFeatures,
+  className,
+}: FeatureComparisonProps) {
+  return (
+    <div className={cx("w-full overflow-x-auto", className)}>
+      <table className="w-full min-w-[480px] border-collapse">
+        <thead>
+          <tr>
+            <th className="w-[40%] pb-4 pr-4 text-left">
+              <span className="sr-only">Feature</span>
+            </th>
+            {plans.map((plan, i) => (
+              <th
+                key={i}
+                className={cx(
+                  "pb-4 px-4 text-center text-sm font-semibold text-[#FAFAFA]",
+                  plan.highlighted && "rounded-t-xl bg-[#101114]"
+                )}
+              >
+                {plan.name}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {features.map((feature, fi) => {
+            const isLast = fi === features.length - 1
+            return (
+              <tr
+                key={fi}
+                className="border-t border-[#23252A] transition-colors duration-150 ease-out hover:bg-[#09090B]"
+              >
+                <td
+                  className={cx(
+                    "py-3 pr-4 text-sm text-muted-foreground",
+                    isLast && "pb-4"
+                  )}
+                >
+                  {feature.label}
+                </td>
+                {plans.map((plan, pi) => (
+                  <td
+                    key={pi}
+                    className={cx(
+                      "px-4 py-3 text-center",
+                      plan.highlighted && "bg-[#101114]",
+                      isLast && plan.highlighted && "rounded-b-xl pb-4"
+                    )}
+                  >
+                    <CellValue value={feature.values[pi] ?? false} />
+                  </td>
+                ))}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/blocks/metrics-grid.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { TrendingUp, TrendingDown, Minus, type LucideIcon } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface MetricChange {
+  value: string
+  direction: "up" | "down" | "neutral"
+}
+
+export interface MetricItem {
+  label: string
+  value: string
+  change?: MetricChange
+  icon?: LucideIcon
+  description?: string
+}
+
+export interface MetricsGridProps {
+  metrics?: MetricItem[]
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+const defaultMetrics: MetricItem[] = [
+  {
+    label: "Monthly Revenue",
+    value: "$48,290",
+    change: { value: "+12.4%", direction: "up" },
+    description: "vs. last month",
+  },
+  {
+    label: "Active Users",
+    value: "9,841",
+    change: { value: "+3.1%", direction: "up" },
+    description: "vs. last month",
+  },
+  {
+    label: "Churn Rate",
+    value: "2.3%",
+    change: { value: "+0.4%", direction: "down" },
+    description: "vs. last month",
+  },
+  {
+    label: "Avg. Session",
+    value: "4m 12s",
+    change: { value: "0%", direction: "neutral" },
+    description: "vs. last month",
+  },
+]
+
+const colClass: Record<2 | 3 | 4, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+}
+
+const changeStyles: Record<MetricChange["direction"], string> = {
+  up: "text-emerald-400",
+  down: "text-red-400",
+  neutral: "text-muted-foreground",
+}
+
+const ChangeIcon: Record<MetricChange["direction"], LucideIcon> = {
+  up: TrendingUp,
+  down: TrendingDown,
+  neutral: Minus,
+}
+
+export function MetricsGrid({
+  metrics = defaultMetrics,
+  columns = 4,
+  className,
+}: MetricsGridProps) {
+  return (
+    <div className={cx("w-full", className)}>
+      <div className={cx("grid grid-cols-1 gap-4", colClass[columns])}>
+        {metrics.map((metric, i) => {
+          const Icon = metric.icon
+          const change = metric.change
+          const ChangeIconComp = change ? ChangeIcon[change.direction] : null
+
+          return (
+            <div
+              key={i}
+              className="flex flex-col gap-3 rounded-xl border border-[#23252A] bg-[#09090B] p-5 transition-colors duration-150 ease-out hover:border-[#2e3035] hover:bg-[#0c0c0f]"
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-muted-foreground">
+                  {metric.label}
+                </span>
+                {Icon && (
+                  <Icon
+                    size={15}
+                    className="text-muted-foreground opacity-60"
+                    strokeWidth={1.5}
+                  />
+                )}
+              </div>
+
+              <p className="text-2xl font-semibold tracking-tight text-[#FAFAFA]">
+                {metric.value}
+              </p>
+
+              {(change || metric.description) && (
+                <div className="flex items-center gap-1.5">
+                  {change && ChangeIconComp && (
+                    <ChangeIconComp
+                      size={13}
+                      className={changeStyles[change.direction]}
+                      strokeWidth={2}
+                    />
+                  )}
+                  {change && (
+                    <span
+                      className={cx(
+                        "text-xs font-medium",
+                        changeStyles[change.direction]
+                      )}
+                    >
+                      {change.value}
+                    </span>
+                  )}
+                  {metric.description && (
+                    <span className="text-xs text-muted-foreground">
+                      {metric.description}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}