@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/components/command-menu-01.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import {
+  IconBell,
+  IconBolt,
+  IconCalendar,
+  IconChartBar,
+  IconChartPie,
+  IconClock,
+  IconFileText,
+  IconHelp,
+  IconKeyboard,
+  IconLayoutDashboard,
+  IconLayoutKanban,
+  IconLogout,
+  IconMessage,
+  IconPalette,
+  IconSettings,
+  IconSquareCheck,
+  IconTarget,
+  IconTrendingUp,
+  IconUsers,
+} from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Kbd } from "@/components/ui/kbd";
+
+const workspaceItems = [
+  { icon: IconLayoutDashboard, label: "Dashboard" },
+  { icon: IconLayoutKanban, label: "Projects" },
+  { icon: IconSquareCheck, label: "Tasks" },
+  { icon: IconCalendar, label: "Calendar" },
+  { icon: IconUsers, label: "Team members" },
+  { icon: IconMessage, label: "Messages" },
+  { icon: IconFileText, label: "Documents" },
+  { icon: IconBell, label: "Notifications" },
+  { icon: IconClock, label: "Time tracking" },
+  { icon: IconTarget, label: "Goals" },
+];
+
+const analyticsItems = [
+  { icon: IconChartBar, label: "Overview" },
+  { icon: IconTrendingUp, label: "Performance" },
+  { icon: IconChartPie, label: "Reports" },
+  { icon: IconBolt, label: "Insights" },
+];
+
+const settingsItems = [
+  { icon: IconSettings, label: "Preferences" },
+  { icon: IconPalette, label: "Appearance" },
+  { icon: IconKeyboard, label: "Keyboard shortcuts" },
+  { icon: IconHelp, label: "Help & support" },
+  { icon: IconLogout, label: "Sign out" },
+];
+
+export function CommandMenu01() {
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="outline">
+        Open Command Menu
+      </Button>
+
+      <CommandDialog onOpenChange={setOpen} open={open} showCloseButton={false}>
+        <Command className="rounded-none border-0 bg-transparent shadow-none">
+          <CommandInput
+            className="h-12"
+            placeholder="Type a command or search..."
+          />
+          <CommandList className="min-h-[min(420px,50vh)] max-h-[min(560px,65vh)]">
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Workspace">
+              {workspaceItems.map((item) => (
+                <CommandItem key={item.label}>
+                  <item.icon className="me-2 h-5 w-5" />
+                  <span>{item.label}</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandGroup heading="Analytics">
+              {analyticsItems.map((item) => (
+                <CommandItem key={item.label}>
+                  <item.icon className="me-2 h-5 w-5" />
+                  <span>{item.label}</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandGroup heading="Settings">
+              {settingsItems.map((item) => (
+                <CommandItem key={item.label}>
+                  <item.icon className="me-2 h-5 w-5" />
+                  <span>{item.label}</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        <div className="flex h-12 items-center justify-end border-t px-3">
+          <button
+            className="flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground"
+            onClick={() => setOpen(false)}
+            type="button"
+          >
+            <span>Close</span>
+            <Kbd className="ms-1">Esc</Kbd>
+          </button>
+        </div>
+      </CommandDialog>
+    </>
+  );
+}

package/template/components/command-menu-02.tsx

@@ -0,0 +1,386 @@
+"use client"
+
+import {
+  IconArrowRight,
+  IconAt,
+  IconCopy,
+  IconDeviceDesktop,
+  IconDownload,
+  IconFile,
+  IconFileSearch,
+  IconKeyboard,
+  IconLink,
+  IconLogout,
+  IconMessage,
+  IconPencil,
+  IconPlus,
+  IconSend,
+  IconSettings,
+  IconTemplate,
+  IconUser,
+  IconUsers,
+} from "@tabler/icons-react"
+import { useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+
+export function CommandMenu02() {
+  const [open, setOpen] = useState(false)
+  const [inputValue, setInputValue] = useState("")
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((prev) => !prev)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} type="button" variant="outline">
+        Open Command Menu
+      </Button>
+
+      <Dialog onOpenChange={setOpen} open={open}>
+        <DialogContent
+          className="max-w-[min(42rem,calc(100%-2rem))] gap-0 overflow-hidden rounded-xl border-border/50 p-0 ring-0 shadow-[0_0_0_1px_color-mix(in_oklch,var(--brand-color)_48%,transparent),0_0_72px_-14px_color-mix(in_oklch,var(--brand-color)_58%,transparent),0_10px_15px_-3px_oklch(0_0_0_/_0.1)] dark:shadow-[0_0_0_1px_color-mix(in_oklch,var(--brand-color)_55%,transparent),0_0_80px_-12px_color-mix(in_oklch,var(--brand-color)_65%,transparent),0_10px_15px_-3px_oklch(0_0_0_/_0.35)] sm:max-w-3xl md:max-w-4xl"
+          showCloseButton={false}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>Command Menu</DialogTitle>
+            <DialogDescription>
+              Use the command menu to navigate through the app.
+            </DialogDescription>
+          </DialogHeader>
+          <Command className="flex h-full w-full flex-col overflow-hidden bg-popover p-0">
+            <div className="flex h-12 items-center gap-2 border-border/50 border-b px-4">
+              <CommandInput
+                variant="palette"
+                onValueChange={setInputValue}
+                placeholder="What do you need?"
+                value={inputValue}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                tabIndex={-1}
+                className="shrink-0 text-muted-foreground hover:text-foreground"
+                aria-label="Close command menu"
+                onClick={() => setOpen(false)}
+              >
+                <Kbd>Esc</Kbd>
+              </Button>
+            </div>
+
+            <CommandList className="max-h-[min(640px,72vh)] py-2">
+              <CommandEmpty>No results found.</CommandEmpty>
+
+              <CommandGroup>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconSettings aria-hidden />
+                  Account Settings...
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>,</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconUser aria-hidden />
+                  Switch Workspace...
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconLogout aria-hidden />
+                  Log Out
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>Q</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Documents">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconFile aria-hidden />
+                  Search Documents...
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>F</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconPlus aria-hidden />
+                  Create New Document...
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>N</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconFile aria-hidden />
+                  Upload Document...
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>U</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Signing">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconSend aria-hidden />
+                  Request Signature...
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconPencil aria-hidden />
+                  Sign a Document...
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconUsers aria-hidden />
+                  Bulk Send for Signature...
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Templates">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconTemplate aria-hidden />
+                  Search Templates...
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconPlus aria-hidden />
+                  Create New Template...
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="General">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconDeviceDesktop aria-hidden />
+                  Change Theme...
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>T</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconCopy aria-hidden />
+                  Copy Current URL
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>⇧</Kbd>
+                    <Kbd>C</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Navigation">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;<strong className="font-semibold">Inbox</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;
+                    <strong className="font-semibold">Action Required</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;
+                    <strong className="font-semibold">
+                      Waiting for Others
+                    </strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;
+                    <strong className="font-semibold">Completed</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;<strong className="font-semibold">Drafts</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;
+                    <strong className="font-semibold">Templates</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;
+                    <strong className="font-semibold">Archive</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;<strong className="font-semibold">Trash</strong>
+                  </span>
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconArrowRight aria-hidden />
+                  <span>
+                    Go to&nbsp;
+                    <strong className="font-semibold">Settings</strong>
+                  </span>
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Quick Actions">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconLink aria-hidden />
+                  Copy Signing Link
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconDownload aria-hidden />
+                  Download Document
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Help">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconFileSearch aria-hidden />
+                  Search Help Center...
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconMessage aria-hidden />
+                  Send Feedback...
+                </CommandItem>
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconAt aria-hidden />
+                  Contact Support
+                </CommandItem>
+              </CommandGroup>
+
+              <CommandGroup heading="Keyboard Shortcuts">
+                <CommandItem
+                  className="mx-2 rounded-lg py-2.5"
+                  onSelect={() => setOpen(false)}
+                >
+                  <IconKeyboard aria-hidden />
+                  View Keyboard Shortcuts
+                  <KbdGroup className="ml-auto">
+                    <Kbd>⌘</Kbd>
+                    <Kbd>/</Kbd>
+                  </KbdGroup>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/template/components/command-menu.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+/**
+ * CommandMenu — ⌘K palette shell (Dialog + Command). Data comes from `CommandMenuProvider`
+ * (`lib/command-menu-config.ts`); no hard-coded nav or copy here.
+ */
+
+import { useRouter } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Kbd } from "@/components/ui/kbd"
+import { useAskLeo } from "@/components/ask-leo-sidebar"
+import { useCommandMenuConfig } from "@/contexts/command-menu-context"
+import type { CommandMenuItem } from "@/lib/command-menu-config"
+
+/** Dispatched to open the palette from sidebar and other callers (avoid synthetic ⌘K). */
+export const OPEN_COMMAND_MENU_EVENT = "exxat:open-command-menu"
+
+export function requestOpenCommandMenu() {
+  window.dispatchEvent(new CustomEvent(OPEN_COMMAND_MENU_EVENT))
+}
+
+function CommandMenuItemRow({
+  item,
+  onLink,
+  onLeo,
+}: {
+  item: CommandMenuItem
+  onLink: (href: string) => void
+  onLeo: (prompt: string) => void
+}) {
+  const isLeo = Boolean(item.askLeoPrompt)
+  const iconClass = isLeo
+    ? "fa-duotone fa-solid fa-star-christmas w-5 shrink-0 text-center text-brand"
+    : `${item.icon ?? "fa-light fa-arrow-right"} w-5 shrink-0 text-center`
+
+  return (
+    <CommandItem
+      className="mx-2 rounded-lg py-2.5"
+      keywords={item.keywords ? [item.keywords] : undefined}
+      onSelect={() => {
+        if (item.askLeoPrompt) onLeo(item.askLeoPrompt)
+        else if (item.href) onLink(item.href)
+      }}
+    >
+      <i className={iconClass} aria-hidden="true" />
+      <span>{item.label}</span>
+    </CommandItem>
+  )
+}
+
+export function CommandMenu() {
+  const config = useCommandMenuConfig()
+  const [open, setOpen] = useState(false)
+  const [inputValue, setInputValue] = useState("")
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const router = useRouter()
+  const { openWithPrompt } = useAskLeo()
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((prev) => !prev)
+      }
+    }
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  useEffect(() => {
+    const onOpenRequest = () => setOpen(true)
+    window.addEventListener(OPEN_COMMAND_MENU_EVENT, onOpenRequest)
+    return () => window.removeEventListener(OPEN_COMMAND_MENU_EVENT, onOpenRequest)
+  }, [])
+
+  const navigate = useCallback(
+    (href: string) => {
+      setOpen(false)
+      setInputValue("")
+      router.push(href)
+    },
+    [router],
+  )
+
+  const sendLeoSuggestion = useCallback(
+    (prompt: string) => {
+      setOpen(false)
+      setInputValue("")
+      openWithPrompt(prompt)
+    },
+    [openWithPrompt],
+  )
+
+  return (
+    <Dialog
+      onOpenChange={(next) => {
+        setOpen(next)
+        if (!next) setInputValue("")
+      }}
+      open={open}
+    >
+      <DialogContent
+        overlayClassName="bg-transparent supports-backdrop-filter:backdrop-blur-none"
+        showCloseButton={false}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault()
+          requestAnimationFrame(() => searchInputRef.current?.focus())
+        }}
+        className="max-w-[min(42rem,calc(100%-2rem))] gap-0 overflow-hidden rounded-xl border-border/50 p-0 ring-0 shadow-[0_0_0_1px_color-mix(in_oklch,var(--brand-color)_48%,transparent),0_0_72px_-14px_color-mix(in_oklch,var(--brand-color)_58%,transparent),0_10px_15px_-3px_oklch(0_0_0_/_0.1)] dark:shadow-[0_0_0_1px_color-mix(in_oklch,var(--brand-color)_55%,transparent),0_0_80px_-12px_color-mix(in_oklch,var(--brand-color)_65%,transparent),0_10px_15px_-3px_oklch(0_0_0_/_0.35)] sm:max-w-3xl md:max-w-4xl"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{config.dialogTitle}</DialogTitle>
+          <DialogDescription>{config.dialogDescription}</DialogDescription>
+        </DialogHeader>
+        <Command
+          loop
+          label={config.commandLabel}
+          className="flex h-full w-full flex-col overflow-hidden bg-popover p-0"
+        >
+          <div className="flex h-12 items-center gap-2 border-border/50 border-b px-4">
+            <CommandInput
+              ref={searchInputRef}
+              variant="palette"
+              aria-label={config.inputAriaLabel}
+              onValueChange={setInputValue}
+              placeholder={config.inputPlaceholder}
+              value={inputValue}
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              tabIndex={-1}
+              className="shrink-0 text-muted-foreground hover:text-foreground"
+              aria-label={config.closeMenuAriaLabel}
+              onClick={() => setOpen(false)}
+            >
+              <Kbd>Esc</Kbd>
+            </Button>
+          </div>
+
+          <CommandList className="max-h-[min(640px,72vh)] py-2">
+            <CommandEmpty>{config.emptyMessage}</CommandEmpty>
+
+            {config.groups.map((group) => {
+              if (group.items.length === 0) return null
+              if (group.searchOnly && !inputValue.trim()) return null
+              return (
+                <CommandGroup key={group.id} heading={group.heading}>
+                  {group.items.map((item) => (
+                    <CommandMenuItemRow
+                      key={item.id}
+                      item={item}
+                      onLeo={sendLeoSuggestion}
+                      onLink={navigate}
+                    />
+                  ))}
+                </CommandGroup>
+              )
+            })}
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}