@exxatdesignux/ui 0.0.5 → 0.0.7

package/template/components/nav-main.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: React.ReactNode
+    /** Solid-weight icon shown when this item is the active route */
+    iconActive?: React.ReactNode
+  }[]
+}) {
+  const pathname = usePathname()
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          {items.map((item) => {
+            /* Active when pathname exactly matches or is a sub-route of item.url */
+            const isActive =
+              pathname === item.url ||
+              (item.url !== "/" && pathname.startsWith(item.url + "/"))
+
+            return (
+              <SidebarMenuItem key={item.url}>
+                <SidebarMenuButton
+                  tooltip={item.title}
+                  isActive={isActive}
+                  aria-current={isActive ? "page" : undefined}
+                  asChild
+                >
+                  <a href={item.url}>
+                    {/* Fixed-size wrapper so FA icons align like Lucide icons */}
+                    <span className="size-4 shrink-0 flex items-center justify-center" aria-hidden="true">
+                      {isActive && item.iconActive ? item.iconActive : item.icon}
+                    </span>
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

package/template/components/nav-secondary.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { useCallback } from "react"
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { useModKeyLabel } from "@/hooks/use-mod-key-label"
+import { requestOpenCommandMenu } from "@/components/command-menu"
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    key?: string
+    title: string
+    url: string
+    icon: React.ReactNode
+    opensCommandMenu?: boolean
+  }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  const mod = useModKeyLabel()
+
+  const openCommandMenu = useCallback(() => {
+    requestOpenCommandMenu()
+  }, [])
+
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.key ?? item.title}>
+              {item.opensCommandMenu ? (
+                <SidebarMenuButton onClick={openCommandMenu}>
+                  {item.icon}
+                  <span>{item.title}</span>
+                  <KbdGroup className="ms-auto">
+                    <Kbd>{mod}</Kbd>
+                    <Kbd>K</Kbd>
+                  </KbdGroup>
+                </SidebarMenuButton>
+              ) : (
+                <SidebarMenuButton asChild>
+                  <a href={item.url}>
+                    {item.icon}
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              )}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

package/template/components/nav-user.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+/**
+ * NavUser — WCAG 2.1 AA profile menu
+ *
+ * AA checklist:
+ *  ✓ aria-label on trigger (1.3.1, 4.1.2)
+ *  ✓ Icon-only items have sr-only text (1.1.1)
+ *  ✓ App preferences link to Settings (appearance lives there)
+ *  ✓ Keyboard: full arrow-key + Enter/Space navigation via Radix (2.1.1)
+ *  ✓ Focus ring visible on every item (2.4.11)
+ *  ✓ Colour contrast: all labels ≥ 4.5:1 on popover bg (1.4.3)
+ *  ✓ Active theme shown via aria-checked (RadioItem) (4.1.3)
+ */
+
+import { useTheme } from "next-themes"
+import Link from "next/link"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useAppTheme } from "@/hooks/use-app-theme"
+import { cn } from "@/lib/utils"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile, state }               = useSidebar()
+  const { theme }                 = useTheme()
+  const { mounted } = useAppTheme()
+
+  const safeTheme    = mounted ? (theme ?? "system") : "system"
+  const showCollapsedTooltip = state === "collapsed" && !isMobile
+
+  const profileTrigger = (
+    <SidebarMenuButton
+      size="lg"
+      aria-label={`${user.name} — open profile and settings menu`}
+      className={cn(
+        "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        "h-auto min-h-12 items-center py-2 !overflow-visible",
+        "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!h-9 group-data-[collapsible=icon]:!min-h-0 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-lg",
+        /* Icon rail: clip overflow and hide chrome that sat in the gutter (ellipsis was bleeding past the rail). */
+        "group-data-[collapsible=icon]:!overflow-hidden",
+        "[&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
+        "group-data-[collapsible=icon]:[&>span:last-child]:hidden",
+      )}
+    >
+      <Avatar className="h-8 w-8 shrink-0">
+        <AvatarImage
+          src={user.avatar}
+          alt=""
+          className="object-cover"
+          aria-hidden="true"
+        />
+        <AvatarFallback aria-hidden="true">
+          {user.name.slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className="grid min-w-0 flex-1 content-center text-start text-sm leading-tight group-data-[collapsible=icon]:hidden">
+        <span className="truncate font-medium">{user.name}</span>
+        <span className="truncate text-xs text-muted-foreground">
+          {user.email}
+        </span>
+      </div>
+      <span
+        className="ms-auto flex w-6 shrink-0 self-stretch items-center justify-center text-muted-foreground group-data-[collapsible=icon]:hidden"
+        aria-hidden="true"
+      >
+        <i className="fa-light fa-ellipsis-vertical block text-xs leading-none" aria-hidden="true" />
+      </span>
+    </SidebarMenuButton>
+  )
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          {showCollapsedTooltip ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  {profileTrigger}
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent side="right" align="center">
+                {user.name}
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <DropdownMenuTrigger asChild>
+              {profileTrigger}
+            </DropdownMenuTrigger>
+          )}
+
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-60 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            {/* ── User identity ──────────────────────────────── */}
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage
+                    src={user.avatar}
+                    alt=""
+                    className="object-cover"
+                    aria-hidden="true"
+                  />
+                  <AvatarFallback aria-hidden="true">
+                    {user.name.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            <DropdownMenuSeparator />
+
+            {/* ── Account actions ────────────────────────────── */}
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <i className="fa-light fa-circle-user" aria-hidden="true" />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <i className="fa-light fa-credit-card" aria-hidden="true" />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <i className="fa-light fa-bell" aria-hidden="true" />
+                Notifications
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/settings#appearance" className="cursor-pointer">
+                  <i className="fa-light fa-sliders" aria-hidden="true" />
+                  App preferences
+                  <span className="ms-auto text-xs text-muted-foreground capitalize">{safeTheme}</span>
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            {/* ── Sign out ───────────────────────────────────── */}
+            <DropdownMenuItem>
+              <i className="fa-light fa-arrow-right-from-bracket" aria-hidden="true" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/template/components/new-placement-back-btn.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useSidebar } from "@/components/ui/sidebar"
+import { Button } from "@/components/ui/button"
+
+export function NewPlacementBackBtn() {
+  const router = useRouter()
+  const { setOpen } = useSidebar()
+
+  function handleBack() {
+    setOpen(true)
+    setTimeout(() => router.push("/data-list"), 220)
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="-ml-2"
+      onClick={handleBack}
+      aria-label="Back to placements list"
+    >
+      <i className="fa-light fa-arrow-left text-[13px]" aria-hidden="true" />
+      Back
+    </Button>
+  )
+}