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,76 @@
+import * as React from "react";
+import { Command } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export interface CommandAction {
+  id: string;
+  label: string;
+  group?: string;
+  icon?: React.ReactNode;
+  onSelect: () => void;
+}
+
+/** ⌘K palette. Opens on Cmd/Ctrl+K by default; big perceived-quality boost on any tool. */
+export function CommandPalette({
+  actions,
+  placeholder = "Type a command or search…",
+}: {
+  actions: CommandAction[];
+  placeholder?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+
+  const groups = React.useMemo(() => {
+    const map = new Map<string, CommandAction[]>();
+    for (const a of actions) {
+      const g = a.group ?? "Actions";
+      map.set(g, [...(map.get(g) ?? []), a]);
+    }
+    return [...map.entries()];
+  }, [actions]);
+
+  return (
+    <Command.Dialog
+      open={open}
+      onOpenChange={setOpen}
+      label="Command palette"
+      className={cn(
+        "fixed left-1/2 top-1/4 z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden",
+        "rounded-lg border border-border bg-surface shadow-lg data-[state=open]:animate-scale-in"
+      )}
+    >
+      <div className="flex items-center gap-2 border-b border-border px-4">
+        <Search className="size-4 text-muted" />
+        <Command.Input placeholder={placeholder} className="h-12 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-muted" />
+      </div>
+      <Command.List className="max-h-80 overflow-auto p-2">
+        <Command.Empty className="py-6 text-center text-sm text-muted">No results.</Command.Empty>
+        {groups.map(([group, items]) => (
+          <Command.Group key={group} heading={group} className="px-1 py-1 text-xs font-semibold uppercase tracking-wide text-muted [&_[cmdk-group-items]]:mt-1">
+            {items.map((a) => (
+              <Command.Item
+                key={a.id}
+                onSelect={() => { a.onSelect(); setOpen(false); }}
+                className="flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm text-text aria-selected:bg-surface-2 [&_svg]:size-4"
+              >
+                {a.icon}
+                {a.label}
+              </Command.Item>
+            ))}
+          </Command.Group>
+        ))}
+      </Command.List>
+    </Command.Dialog>
+  );
+}