feat: initial @jason/ui-kit — tokens, preset, components, motion, blocks, Impeccable

2026-07-16 00:36:53 -05:00
commit b75012525d
36 changed files with 1324 additions and 0 deletions
@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+export interface NavItem {
+  label: string;
+  icon?: React.ReactNode;
+  href?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+/** Dashboard chrome: fixed sidebar + sticky topbar + scrolling content. */
+export function AppShell({
+  brand,
+  nav,
+  topbar,
+  children,
+  footer,
+}: {
+  brand: React.ReactNode;
+  nav: NavItem[];
+  topbar?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen bg-bg text-text">
+      <aside className="hidden w-60 shrink-0 flex-col border-r border-border bg-surface md:flex">
+        <div className="flex h-14 items-center px-5 font-display text-lg font-bold">{brand}</div>
+        <nav className="flex-1 space-y-0.5 px-3 py-3">
+          {nav.map((item) => {
+            const Comp = item.href ? "a" : "button";
+            return (
+              <Comp
+                key={item.label}
+                href={item.href}
+                onClick={item.onClick}
+                className={cn(
+                  "flex w-full items-center gap-3 rounded px-3 py-2 text-sm font-medium transition-colors duration-fast [&_svg]:size-4",
+                  item.active ? "bg-brand/15 text-brand" : "text-muted hover:bg-surface-2/60 hover:text-text"
+                )}
+              >
+                {item.icon}
+                {item.label}
+              </Comp>
+            );
+          })}
+        </nav>
+        {footer && <div className="border-t border-border p-3 text-sm text-muted">{footer}</div>}
+      </aside>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-30 flex h-14 items-center justify-between gap-4 border-b border-border bg-bg/80 px-5 backdrop-blur">
+          {topbar}
+        </header>
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  );
+}