@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/secondary-panel/nav-link-rows.tsx

@@ -1,83 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { Tip } from "@/components/ui/tip"
-import { cn } from "@/lib/utils"
-
-export function SecondaryPanelNavRow({
-  href,
-  active,
-  iconClass,
-  label,
-  onClick,
-}: {
-  href: string
-  active: boolean
-  iconClass: string
-  label: string
-  onClick?: () => void
-}) {
-  return (
-    <li className="min-w-0">
-      <Tip label={label} side="right">
-        <Link
-          href={href}
-          scroll={false}
-          onClick={() => onClick?.()}
-          aria-current={active ? "page" : undefined}
-          className={cn(
-            "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-            active
-              ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
-          )}
-        >
-          <span className="size-4 shrink-0 text-center text-[13px] leading-none" aria-hidden>
-            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
-          </span>
-          <span className="min-w-0 flex-1 truncate">{label}</span>
-        </Link>
-      </Tip>
-    </li>
-  )
-}
-
-/** Icon-rail row — matches primary sidebar collapsed hit target (`size-9`). */
-export function SecondaryPanelIconNavRow({
-  href,
-  active,
-  iconClass,
-  label,
-  onClick,
-}: {
-  href: string
-  active: boolean
-  iconClass: string
-  label: string
-  onClick?: () => void
-}) {
-  return (
-    <li className="flex w-full justify-center" role="none">
-      <Tip label={label} side="right">
-        <Link
-          href={href}
-          scroll={false}
-          onClick={() => onClick?.()}
-          aria-current={active ? "page" : undefined}
-          className={cn(
-            "flex size-9 shrink-0 items-center justify-center rounded-md transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-            active
-              ? "bg-sidebar-accent text-sidebar-accent-foreground"
-              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
-          )}
-        >
-          <span className="text-center text-[15px] leading-none" aria-hidden>
-            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
-          </span>
-        </Link>
-      </Tip>
-    </li>
-  )
-}

package/template/components/secondary-panel.tsx

@@ -1,220 +0,0 @@
-"use client"
-
-/**
- * SecondaryPanel — nested rail between the primary icon sidebar and content.
- * Full width shows hub scope nav; **compact** matches the primary sidebar icon rail (`w-12`).
- *
- * Chrome uses {@link NestedSecondaryPanelShell}. Panel bodies live in
- * `components/secondary-panels/` + {@link SECONDARY_PANELS}; hub nav stays domain-specific.
- */
-
-import * as React from "react"
-import { useSidebar } from "@/components/ui/sidebar"
-import { NestedSecondaryPanelShell } from "@/components/templates/nested-secondary-panel-shell"
-import { SECONDARY_PANELS } from "@/components/secondary-panels/registry"
-import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
-import type { QuestionBankItem } from "@/lib/mock/question-bank"
-import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
-
-export type QuestionBankFolderBridge = {
-  folders: QuestionBankFolder[]
-  onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-  items: QuestionBankItem[]
-  onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
-}
-
-export type QuestionBankAccessBridge = {
-  openManageAccess: () => void
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────────
-
-export type ClosePanelOptions = {
-  /**
-   * Main app sidebar after the secondary panel closes.
-   * - `leave` (default): only clear the active panel — preserves expanded/collapsed primary rail (⌘B, cookie).
-   * - `expand`: full primary rail — use only when product explicitly restores the wide rail after dismiss.
-   * - `collapse`: icon rail — matches routes that keep the primary rail compact with the panel closed.
-   */
-  mainSidebar?: "expand" | "collapse" | "leave"
-}
-
-interface SecondaryPanelContextValue {
-  /** Currently active panel id, or null if none */
-  activePanel: string | null
-  /** Open a panel by id (always exits compact / full-width). */
-  openPanel: (id: string) => void
-  /** Close the panel (programmatic / route cleanup). */
-  closePanel: (opts?: ClosePanelOptions) => void
-  /** Icon-only nested rail while the panel stays “open”. Cleared by {@link openPanel} / {@link closePanel}. */
-  secondaryPanelCompact: boolean
-  /** Narrow icon rail (primary-sidebar-style); keeps {@link activePanel} mounted. */
-  collapseActiveSecondaryPanel: () => void
-  /** Question bank folder tree shared with the secondary nav while the hub is mounted. */
-  questionBankFolderBridge: QuestionBankFolderBridge | null
-  setQuestionBankFolderBridge: (bridge: QuestionBankFolderBridge | null) => void
-  /** Opens the hub collaborators sheet from the secondary nav. */
-  questionBankAccessBridge: QuestionBankAccessBridge | null
-  setQuestionBankAccessBridge: (bridge: QuestionBankAccessBridge | null) => void
-}
-
-const SecondaryPanelContext = React.createContext<SecondaryPanelContextValue>({
-  activePanel: null,
-  openPanel: () => {},
-  closePanel: () => {},
-  secondaryPanelCompact: false,
-  collapseActiveSecondaryPanel: () => {},
-  questionBankFolderBridge: null,
-  setQuestionBankFolderBridge: () => {},
-  questionBankAccessBridge: null,
-  setQuestionBankAccessBridge: () => {},
-})
-
-export function useSecondaryPanel() {
-  return React.useContext(SecondaryPanelContext)
-}
-
-export function SecondaryPanelProvider({ children }: { children: React.ReactNode }) {
-  const [activePanel, setActivePanel] = React.useState<string | null>(null)
-  const [secondaryPanelCompact, setSecondaryPanelCompact] = React.useState(false)
-  const [questionBankFolderBridge, setQuestionBankFolderBridge] =
-    React.useState<QuestionBankFolderBridge | null>(null)
-  const [questionBankAccessBridge, setQuestionBankAccessBridge] =
-    React.useState<QuestionBankAccessBridge | null>(null)
-  const { setOpen } = useSidebar()
-
-  /**
-   * Browser zoom ≥ 200% (or very short viewport) — same `useSidebarReflowZoom`
-   * signal the primary sidebar uses (WCAG 1.4.10). At that scale the 16rem
-   * secondary rail crowds out primary content, so we **auto-collapse it to
-   * the icon variant on entering high zoom**. We don't keep overriding —
-   * users can re-expand once collapsed; the next zoom-out → zoom-in cycle
-   * re-collapses. This matches the pattern users get from clicking the
-   * panel's own "Collapse to icons" button.
-   */
-  const reflowZoom = useSidebarReflowZoom()
-  const wasReflowZoomRef = React.useRef(false)
-  React.useEffect(() => {
-    if (reflowZoom && !wasReflowZoomRef.current) {
-      setSecondaryPanelCompact(true)
-    }
-    wasReflowZoomRef.current = reflowZoom
-  }, [reflowZoom])
-
-  const openPanel = React.useCallback(
-    (id: string) => {
-      // High zoom → keep the icon rail (auto-collapse rule above). At normal
-      // zoom this stays the legacy behavior (full-width on open).
-      setSecondaryPanelCompact(reflowZoom)
-      setActivePanel(id)
-      setOpen(false) // collapse main sidebar to icon rail
-    },
-    [setOpen, reflowZoom],
-  )
-
-  const closePanel = React.useCallback((opts?: ClosePanelOptions) => {
-    setSecondaryPanelCompact(false)
-    setActivePanel(null)
-    const mainSidebar = opts?.mainSidebar ?? "leave"
-    if (mainSidebar === "leave") return
-    if (mainSidebar === "collapse") {
-      setOpen(false)
-    } else {
-      setOpen(true) // expand main sidebar back
-    }
-  }, [setOpen])
-
-  const collapseActiveSecondaryPanel = React.useCallback(() => {
-    setSecondaryPanelCompact(true)
-  }, [])
-
-  const value = React.useMemo(
-    () => ({
-      activePanel,
-      openPanel,
-      closePanel,
-      secondaryPanelCompact,
-      collapseActiveSecondaryPanel,
-      questionBankFolderBridge,
-      setQuestionBankFolderBridge,
-      questionBankAccessBridge,
-      setQuestionBankAccessBridge,
-    }),
-    [
-      activePanel,
-      openPanel,
-      closePanel,
-      secondaryPanelCompact,
-      collapseActiveSecondaryPanel,
-      questionBankFolderBridge,
-      questionBankAccessBridge,
-    ],
-  )
-
-  return (
-    <SecondaryPanelContext.Provider value={value}>
-      {children}
-    </SecondaryPanelContext.Provider>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// SecondaryPanel — the actual rendered panel
-// ─────────────────────────────────────────────────────────────────────────────
-
-export function SecondaryPanel() {
-  const { activePanel, secondaryPanelCompact } = useSecondaryPanel()
-  const PanelContent = activePanel ? SECONDARY_PANELS[activePanel] : null
-
-  return (
-    <NestedSecondaryPanelShell open={Boolean(activePanel)} compact={secondaryPanelCompact}>
-      {PanelContent ? <PanelContent /> : null}
-    </NestedSecondaryPanelShell>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Auto-open hook — pages call this to show/hide a panel on mount/unmount
-// ─────────────────────────────────────────────────────────────────────────────
-
-export function useAutoPanel(panelId: string) {
-  const { openPanel, closePanel } = useSecondaryPanel()
-
-  React.useEffect(() => {
-    openPanel(panelId)
-    return () => {
-      closePanel()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [panelId])
-}
-
-/** Sync hub folder state into the question bank secondary nav while the route is mounted. */
-export function QuestionBankFolderBridge({
-  folders,
-  onFoldersChange,
-  items,
-  onItemsChange,
-}: QuestionBankFolderBridge) {
-  const { setQuestionBankFolderBridge } = useSecondaryPanel()
-
-  React.useEffect(() => {
-    setQuestionBankFolderBridge({ folders, onFoldersChange, items, onItemsChange })
-    return () => setQuestionBankFolderBridge(null)
-  }, [folders, onFoldersChange, items, onItemsChange, setQuestionBankFolderBridge])
-
-  return null
-}
-
-export function QuestionBankAccessBridge({ openManageAccess }: QuestionBankAccessBridge) {
-  const { setQuestionBankAccessBridge } = useSecondaryPanel()
-
-  React.useEffect(() => {
-    setQuestionBankAccessBridge({ openManageAccess })
-    return () => setQuestionBankAccessBridge(null)
-  }, [openManageAccess, setQuestionBankAccessBridge])
-
-  return null
-}

package/template/components/secondary-panels/list-hub-panel.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import { ListHubSecondaryNav } from "@/components/list-hub-secondary-nav"
-import { useSecondaryPanel } from "@/components/secondary-panel"
-
-export function ListHubPanel() {
-  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
-
-  if (secondaryPanelCompact) {
-    return <ListHubSecondaryNav />
-  }
-
-  return (
-    <>
-      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
-        <h2
-          className="text-xl font-semibold leading-tight text-sidebar-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          Directory
-        </h2>
-        <Tip label="Collapse to icons" side="bottom">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={() => collapseActiveSecondaryPanel()}
-            aria-label="Collapse to icons"
-          >
-            <i className="fa-light fa-angles-left" aria-hidden="true" />
-          </Button>
-        </Tip>
-      </div>
-      <ListHubSecondaryNav />
-    </>
-  )
-}

package/template/components/secondary-panels/question-bank-panel.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
-import { useSecondaryPanel } from "@/components/secondary-panel"
-
-export function QuestionBankPanel() {
-  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
-
-  if (secondaryPanelCompact) {
-    return <QuestionBankSecondaryNav />
-  }
-
-  return (
-    <>
-      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
-        <h2
-          className="text-xl font-semibold leading-tight text-sidebar-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          Library
-        </h2>
-        <Tip label="Collapse to icons" side="bottom">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={() => collapseActiveSecondaryPanel()}
-            aria-label="Collapse to icons"
-          >
-            <i className="fa-light fa-angles-left" aria-hidden="true" />
-          </Button>
-        </Tip>
-      </div>
-      <QuestionBankSecondaryNav />
-    </>
-  )
-}

package/template/components/secondary-panels/registry.tsx

@@ -1,15 +0,0 @@
-import type * as React from "react"
-
-import { ListHubPanel } from "@/components/secondary-panels/list-hub-panel"
-import { QuestionBankPanel } from "@/components/secondary-panels/question-bank-panel"
-
-/**
- * Secondary panel bodies keyed by `NavLinkItem.secondaryPanel` / `useAutoPanel(panelId)`.
- * Add a new entry here + nav `secondaryPanel` id + route layout — do not extend Question bank files.
- */
-export const SECONDARY_PANELS: Record<string, React.FC> = {
-  "question-bank": QuestionBankPanel,
-  "list-hub": ListHubPanel,
-}
-
-export type SecondaryPanelId = keyof typeof SECONDARY_PANELS

package/template/components/section-cards.tsx

@@ -1,106 +0,0 @@
-"use client"
-
-import { Badge } from "@/components/ui/badge"
-import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-
-export function SectionCards() {
-  return (
-    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Total Revenue</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            $1,250.00
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Trending up this month{" "}
-            <i className="fa-light fa-arrow-trend-up size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">
-            Visitors for the last 6 months
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>New Customers</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            1,234
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-down" aria-hidden="true" />
-              -20%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Down 20% this period{" "}
-            <i className="fa-light fa-arrow-trend-down size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">
-            Acquisition needs attention
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Active Accounts</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            45,678
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Strong user retention{" "}
-            <i className="fa-light fa-arrow-trend-up size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">Engagement exceed targets</div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Growth Rate</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            4.5%
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
-              +4.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Steady performance increase{" "}
-            <i className="fa-light fa-arrow-trend-up size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">Meets growth projections</div>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}

package/template/components/sidebar-auto-collapse.tsx

@@ -1,23 +0,0 @@
-"use client"
-
-import { useEffect, useRef } from "react"
-import { useSidebar } from "@/components/ui/sidebar"
-
-/**
- * Collapses the sidebar on mount. Restores previous state on unmount.
- * Used on the new-placement page so the sidebar collapses when entering
- * and reverts to whatever it was when leaving.
- */
-export function SidebarAutoCollapse() {
-  const { open, setOpen } = useSidebar()
-  const prevOpen = useRef(open)
-
-  useEffect(() => {
-    prevOpen.current = open
-    setOpen(false)
-    return () => { setOpen(prevOpen.current) }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return null
-}