@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/onboarding/index.ts

@@ -1,3 +1,12 @@
+export {
+  GettingStarted,
+  GettingStartedProgressCard,
+  GettingStartedVariantView,
+  renderGettingStartedVariant,
+  GETTING_STARTED_STORAGE_KEY,
+} from "./getting-started"
+export type { GettingStartedVariant } from "./getting-started"
+
 export { Onboarding01 } from "./onboarding-01"
 export { Onboarding02 } from "./onboarding-02"
 export { Onboarding03 } from "./onboarding-03"

package/template/components/onboarding/onboarding-01.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding01() {
   return <GettingStartedVariantView variant="checklist" />

package/template/components/onboarding/onboarding-02.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding02() {
   return <GettingStartedVariantView variant="workspace" />

package/template/components/onboarding/onboarding-03.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding03() {
   return <GettingStartedVariantView variant="numbered" />

package/template/components/onboarding/onboarding-04.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding04() {
   return <GettingStartedVariantView variant="quickstart" />

package/template/components/page-header.tsx

@@ -1,226 +1,8 @@
-"use client"
-
-/**
- * PageHeader — Full-width content area header
- *
- * Sits at the top of a page's main content, BELOW the breadcrumb/topbar.
- * Uses Ivy Presto (Adobe Fonts) for the title via font-heading CSS variable.
- *
- * **Variant `collaboration`** — optional access line + collaborator faces (or **Add collaborator**
- * when the roster is empty) ahead of the primary `actions` slot; **Invite people** stays in **⋯ More**.
- *
- * WCAG 2.1 AA:
- *  ✓ <h1> landmark — one per page (WCAG 1.3.1)
- *  ✓ Sufficient colour contrast ≥ 4.5:1 on title + subtitle (SC 1.4.3)
- *  ✓ Face row: `role="group"` + aggregate `aria-label`; each face has a `Tooltip` name
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import {
-  COLLABORATION_HEADER_ADD_LABEL,
-  type CollaboratorAccessRole,
-} from "@/lib/collaborator-access"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-export type PageHeaderVariant = "default" | "collaboration"
-
-export interface PageHeaderCollaborator {
-  id: string
-  name: string
-  imageUrl?: string | null
-  initials?: string
-  email?: string
-  access?: CollaboratorAccessRole
-  /** Org / directory role tags (e.g. Faculty, Program coordinator). */
-  roles?: string[]
-}
-
-export interface PageHeaderProps {
-  /** Primary page title — rendered as <h1> in Ivy Presto serif */
-  title: string
-  /** Short descriptor or date shown below the title (and below `accessInfo` when set) */
-  subtitle?: React.ReactNode
-  /** Layout preset — `collaboration` enables access line + face row ahead of `actions`. */
-  variant?: PageHeaderVariant
-  /**
-   * Role / access copy or badges — rendered between the title and subtitle when
-   * `variant="collaboration"` (e.g. lock icon + “Editors can modify”).
-   */
-  accessInfo?: React.ReactNode
-  /** People with access — shown as a horizontal row of faces when `variant="collaboration"`. */
-  collaborators?: PageHeaderCollaborator[]
-  /** Max faces before a `+N` chip — default 3 */
-  collaboratorDisplayLimit?: number
-  /** Opens the invite collaborators sheet when a face, overflow chip, or empty-state CTA is activated. */
-  onCollaboratorsOpen?: () => void
-  /** Label for the empty-roster header control — default **Add collaborator**. */
-  addCollaboratorLabel?: string
-  /** Optional slot for right-aligned actions (buttons, selectors, etc.) */
-  actions?: React.ReactNode
-  /** Extra className for the outer wrapper */
-  className?: string
-  /** When false, the title + subtitle are visually hidden (actions remain). */
-  showTitleBlock?: boolean
-}
-
-function PageHeaderCollaborationAccess({
-  people,
-  limit,
-  onOpenCollaborators,
-  addCollaboratorLabel,
-}: {
-  people: PageHeaderCollaborator[]
-  limit: number
-  onOpenCollaborators?: () => void
-  addCollaboratorLabel: string
-}) {
-  if (people.length === 0) {
-    return (
-      <div
-        role="group"
-        aria-label="People with access"
-        className="flex shrink-0 items-center"
-      >
-        <Button
-          type="button"
-          variant="outline"
-          size="lg"
-          onClick={onOpenCollaborators}
-          disabled={!onOpenCollaborators}
-        >
-          <i className="fa-light fa-user-plus" aria-hidden="true" />
-          {addCollaboratorLabel}
-        </Button>
-      </div>
-    )
-  }
-
-  const visible = people.slice(0, limit)
-  const overflow = Math.max(0, people.length - visible.length)
-  const names = people.map(p => p.name).join(", ")
-
-  return (
-    <div
-      role="group"
-      aria-label={names ? `People with access: ${names}` : "People with access"}
-      className="flex shrink-0 items-center gap-2 sm:gap-2.5"
-    >
-      <div className="flex shrink-0 items-center gap-1.5">
-        {visible.map(c => (
-          <Tooltip key={c.id}>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                className="relative shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-                aria-label={`Open collaborators — ${c.name}`}
-                onClick={onOpenCollaborators}
-                disabled={!onOpenCollaborators}
-              >
-                <Avatar size="sm" shape="circle" className="pointer-events-none">
-                  {c.imageUrl ? (
-                    <AvatarImage src={c.imageUrl} alt="" referrerPolicy="no-referrer" />
-                  ) : null}
-                  <AvatarFallback className="text-xs font-semibold">
-                    {(c.initials ?? c.name.slice(0, 2)).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{c.name}</TooltipContent>
-          </Tooltip>
-        ))}
-        {overflow > 0 && (
-          <button
-            type="button"
-            className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold tabular-nums text-muted-foreground ring-1 ring-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-            aria-label={`Open collaborators — ${overflow} more people with access`}
-            onClick={onOpenCollaborators}
-            disabled={!onOpenCollaborators}
-          >
-            +{overflow}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export function PageHeader({
-  title,
-  subtitle,
-  variant = "default",
-  accessInfo,
-  collaborators,
-  collaboratorDisplayLimit = 3,
-  onCollaboratorsOpen,
-  addCollaboratorLabel = COLLABORATION_HEADER_ADD_LABEL,
-  actions,
-  className,
-  showTitleBlock = true,
-}: PageHeaderProps) {
-  const isCollaboration = variant === "collaboration"
-  const showAccess = Boolean(isCollaboration && accessInfo)
-  const showCollaborationAccess = isCollaboration
-  const showActionsColumn = Boolean(actions) || showCollaborationAccess
-  const showCollaboratorActionsSeparator =
-    showCollaborationAccess && Boolean(actions)
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-1 px-4 pt-2 pb-4 lg:px-6",
-        "sm:flex-row sm:items-end sm:gap-4",
-        showTitleBlock ? "sm:justify-between" : "sm:justify-end",
-        className,
-      )}
-    >
-      {/* Title block — hidden visually when showTitleBlock is false; keep h1 for a11y */}
-      <div className={cn("flex min-w-0 flex-col gap-0.5", !showTitleBlock && "sr-only")}>
-        <h1
-          className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-          suppressHydrationWarning
-        >
-          {title}
-        </h1>
-        {showAccess && (
-          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
-            {accessInfo}
-          </div>
-        )}
-        {subtitle && (
-          <p className="text-sm text-muted-foreground leading-none">{subtitle}</p>
-        )}
-      </div>
-
-      {showActionsColumn && (
-        <div className="flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 sm:ms-auto sm:justify-end">
-          {showCollaborationAccess ? (
-            <PageHeaderCollaborationAccess
-              people={collaborators ?? []}
-              limit={collaboratorDisplayLimit}
-              onOpenCollaborators={onCollaboratorsOpen}
-              addCollaboratorLabel={addCollaboratorLabel}
-            />
-          ) : null}
-          {showCollaboratorActionsSeparator ? (
-            <Separator
-              orientation="vertical"
-              decorative
-              className="h-8 shrink-0"
-            />
-          ) : null}
-          {actions}
-        </div>
-      )}
-    </div>
-  )
-}
+// PageHeader was promoted to `@exxatdesignux/ui` on 2026-05-20 so
+// non-Next consumers (Vite, Remix, docs sites) can compose hub headers
+// without duplicating collaboration variants and face-row a11y wiring.
+//
+// This shim keeps every existing `import … from "@/components/page-header"`
+// site working. Apps/web-specific helpers (label constants, role icon
+// maps) still live in `lib/collaborator-access.ts`.
+export * from "@exxatdesignux/ui/components/page-header"

package/template/components/product-switcher.tsx

@@ -52,7 +52,6 @@ export function ProductSwitcher() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              tooltip={iconRail ? current.label : undefined}
               className={cn(
                 "items-start py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                 expandedOrMobile &&
@@ -92,8 +91,8 @@ export function ProductSwitcher() {
 
           <DropdownMenuContent
             align="start"
-            side={iconRail ? "right" : "bottom"}
-            sideOffset={iconRail ? 8 : 4}
+            side="bottom"
+            sideOffset={4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
               Switch product
@@ -116,7 +115,7 @@ export function ProductSwitcher() {
                 />
                 {p.id === product && (
                   <i
-                    className="fa-solid fa-check ml-auto text-brand text-xs"
+                    className="fa-solid fa-check ms-auto text-brand text-xs"
                     aria-hidden="true"
                   />
                 )}

package/template/components/product-wordmark.tsx

@@ -81,7 +81,8 @@ export function ProductWordmark({
         className={cn(
           "font-sans font-extrabold",
           // Neutral wordmark prefix: deep slate on light, soft cool grey on dark.
-          "text-[#273441] dark:text-[#A8B2BA]",
+          // Tokenized — see `--exxat-color-wordmark-ink-*` in packages/ui/src/globals.css.
+          "text-[var(--exxat-color-wordmark-ink-light)] dark:text-[var(--exxat-color-wordmark-ink-dark)]",
         )}
       >
         {prefix}

package/template/components/settings-appearance-card.tsx

@@ -518,7 +518,7 @@ export function SettingsAppearanceCard() {
   )
 
   return (
-    <>
+    <section id="appearance" className="scroll-mt-20">
       <header className="mb-8 space-y-1">
         <h2 className="text-lg font-semibold text-foreground">Appearance &amp; display</h2>
         <p className="text-sm text-muted-foreground">Saved in this browser.</p>
@@ -529,7 +529,6 @@ export function SettingsAppearanceCard() {
         ) : (
           <FieldGroup className="gap-8">
             <SettingsFormRow
-              layout="stacked"
               label="Products"
               description="Recolour the brand mark + wordmark for each product. Switch the active product from the sidebar."
             >
@@ -623,7 +622,7 @@ export function SettingsAppearanceCard() {
                             side="top"
                           >
                             <span
-                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground"
+                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-foreground"
                               aria-label="Active product"
                             >
                               <i
@@ -863,6 +862,6 @@ export function SettingsAppearanceCard() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </>
+    </section>
   )
 }

package/template/components/settings-client.tsx

@@ -39,19 +39,6 @@ import { SettingsAppearanceCard } from "@/components/settings-appearance-card"
 import { SettingsFormRow } from "@/components/settings-form-row"
 import { FieldGroup } from "@/components/ui/field"
 import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
-import {
-  FocusedWorkflowSidebarSections,
-  type FocusedWorkflowSidebarSection,
-} from "@/components/templates/focused-workflow-layouts"
-import { PageHeader } from "@/components/page-header"
-
-const SETTINGS_SECTIONS: readonly FocusedWorkflowSidebarSection[] = [
-  { id: "account", label: "Account" },
-  { id: "appearance", label: "Appearance" },
-  { id: "input-formats", label: "Input formats" },
-  { id: "banner", label: "System banner" },
-  { id: "tours", label: "Guided tours" },
-]
 
 const SYSTEM_BANNER_VARIANTS: SystemBannerVariant[] = [
   "info",
@@ -376,32 +363,8 @@ function buildFlowStatuses() {
   }))
 }
 
-function sectionIdFromHash(hash: string): string {
-  const id = hash.startsWith("#") ? hash.slice(1) : hash
-  if (id && SETTINGS_SECTIONS.some(s => s.id === id)) return id
-  return SETTINGS_SECTIONS[0]!.id
-}
-
 export function SettingsClient() {
   const router = useRouter()
-  const [activeSection, setActiveSection] = React.useState(() =>
-    typeof window !== "undefined" ? sectionIdFromHash(window.location.hash) : SETTINGS_SECTIONS[0]!.id,
-  )
-
-  React.useEffect(() => {
-    const syncFromHash = () => {
-      const id = sectionIdFromHash(window.location.hash)
-      setActiveSection(id)
-      if (window.location.hash) {
-        requestAnimationFrame(() => {
-          document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" })
-        })
-      }
-    }
-    syncFromHash()
-    window.addEventListener("hashchange", syncFromHash)
-    return () => window.removeEventListener("hashchange", syncFromHash)
-  }, [])
 
   const [demoPhone, setDemoPhone] = React.useState("")
   const [demoZip, setDemoZip] = React.useState("")
@@ -440,27 +403,20 @@ export function SettingsClient() {
   }
 
   return (
-    <FocusedWorkflowSidebarSections
-      sections={SETTINGS_SECTIONS}
-      activeSectionId={activeSection}
-      onSectionSelect={id => {
-        setActiveSection(id)
-        const nextHash = `#${id}`
-        if (window.location.hash !== nextHash) {
-          window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}${nextHash}`)
-        }
-        document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" })
-      }}
-      navLabel="Settings sections"
-      header={
-        <PageHeader
-          title="Settings"
-          subtitle="Preferences and tools for this workspace. Display options apply on this device and are stored in your browser."
-          className="px-0 pt-0 pb-0 lg:px-0"
-        />
-      }
-    >
-      <div className="flex flex-col gap-20">
+    <div className="flex w-full min-w-0 flex-col">
+      <div>
+        <h1
+          className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
+          style={{ fontFamily: "var(--font-heading)" }}
+        >
+          Settings
+        </h1>
+        <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+          Preferences and tools for this workspace. Display options apply on this device and are stored in your browser.
+        </p>
+      </div>
+
+      <div className="mt-10 flex flex-col gap-20">
         <section id="account" className="scroll-mt-20">
           <header className="mb-6 space-y-1">
             <h2 className="text-lg font-semibold text-foreground">Account</h2>
@@ -578,6 +534,6 @@ export function SettingsClient() {
           </div>
         </section>
       </div>
-    </FocusedWorkflowSidebarSections>
+    </div>
   )
 }

package/template/components/settings-form-row.tsx

@@ -5,7 +5,7 @@ import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 
 /**
- * Settings row — inline (label left, control right on lg+) or stacked (label above).
+ * Two-column settings row: label + helper on the left, controls on the right.
  */
 export function SettingsFormRow({
   label,
@@ -13,27 +13,22 @@ export function SettingsFormRow({
   htmlFor,
   children,
   className,
-  layout = "inline",
 }: {
   label: string
   description?: string
   htmlFor?: string
   children: React.ReactNode
   className?: string
-  /** `stacked` — label block above full-width controls (wide panels, product lists). */
-  layout?: "inline" | "stacked"
 }) {
   return (
     <div
       className={cn(
-        "grid grid-cols-1 gap-3 sm:gap-4 border-b border-border/70 pb-8 last:border-0 last:pb-0",
-        layout === "inline" &&
-          "lg:grid-cols-[minmax(0,220px)_minmax(0,1fr)] lg:gap-10 lg:items-start",
-        layout === "stacked" && "gap-4",
+        "grid grid-cols-1 gap-3 sm:gap-4 lg:grid-cols-[minmax(0,220px)_minmax(0,1fr)] lg:gap-10 lg:items-start",
+        "border-b border-border/70 pb-8 last:border-0 last:pb-0",
         className,
       )}
     >
-      <div className="space-y-1 text-start lg:pt-1">
+      <div className="space-y-1 lg:pt-1 text-start">
         <Label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
           {label}
         </Label>

package/template/components/{app-sidebar-dynamic.tsx → sidebar/app-sidebar-dynamic.tsx}

@@ -7,7 +7,7 @@
  * Radix ID mismatch is suppressed at the CollapsibleContent level instead.
  */
 import type { ComponentProps } from "react"
-import { AppSidebar } from "@/components/app-sidebar"
+import { AppSidebar } from "./app-sidebar"
 import type { Sidebar } from "@/components/ui/sidebar"
 
 export function AppSidebarDynamic(props: ComponentProps<typeof Sidebar>) {