@rfdtech/components 1.22.0 → 2.0.0

package/dist/mcp/generated/examples.json

@@ -0,0 +1,1233 @@
+{
+  "app-header": [
+    {
+      "file": "app-header-branding-declarative.example.tsx",
+      "importName": "appHeaderBrandingDeclarativeSource",
+      "title": "App Header Branding Declarative",
+      "components": [
+        "AppHeader",
+        "AppHeaderBranding",
+        "Badge"
+      ],
+      "source": "import { AppHeader, AppHeaderBranding, Badge } from \"@rfdtech/components\";\n\nexport function AppHeaderBrandingDeclarativeExample() {\n  return (\n    <div\n      style={{\n        padding: 16,\n        borderRadius: \"var(--clet-radius-2xl)\",\n        background: \"var(--clet-surface-subtle)\",\n      }}\n    >\n      <AppHeader variant=\"plain\">\n        <AppHeaderBranding\n          logo={\n            <img\n              src=\"/clet-logo.png\"\n              alt=\"\"\n              width={28}\n              height={28}\n              className=\"demo-home__sidebar-logo\"\n            />\n          }\n        >\n          <span className=\"clet-app-header__branding-text\">\n            <span className=\"clet-app-header__branding-title\">CLET PORTAL</span>\n            <Badge variant=\"outline\">Beta</Badge>\n          </span>\n        </AppHeaderBranding>\n      </AppHeader>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "app-header-plain.example.tsx",
+      "importName": "appHeaderPlainSource",
+      "title": "App Header Plain",
+      "components": [
+        "AppHeader",
+        "AppHeaderActions",
+        "AppHeaderBranding",
+        "AppHeaderNotifications",
+        "AppSwitcher",
+        "ProfilePopover",
+        "RoleSelect"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  AppHeader,\n  AppHeaderActions,\n  AppHeaderBranding,\n  AppHeaderNotifications,\n  AppSwitcher,\n  ProfilePopover,\n  RoleSelect,\n} from \"@rfdtech/components\";\nimport { Shield, Eye, ScrollText } from \"lucide-react\";\n\nconst user = {\n  name: \"Kwame Asante\",\n  role: \"Admin\",\n  initials: \"KA\",\n  email: \"kwame@clet.edu.gh\",\n};\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nconst apps = [\n  {\n    id: \"gov-portal\",\n    name: \"Governance Portal\",\n    icon: \"https://ui-avatars.com/api/?name=Governance+Portal&background=1d4ed8&color=fff&size=96\",\n    href: \"https://portal.example.com\",\n  },\n  {\n    id: \"finance-hub\",\n    name: \"Finance Hub\",\n    icon: \"https://ui-avatars.com/api/?name=Finance+Hub&background=047857&color=fff&size=96\",\n  },\n];\n\nconst notifications = [\n  { id: \"1\", text: \"A new member joined the Ghana chapter.\", time: \"2m ago\", unread: true },\n  { id: \"2\", text: \"Your monthly report is ready.\", time: \"1h ago\", unread: false },\n];\n\nexport function AppHeaderPlainExample() {\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  return (\n    <div\n      style={{\n        padding: 16,\n        borderRadius: \"var(--clet-radius-2xl)\",\n        background: \"var(--clet-surface-subtle)\",\n      }}\n    >\n      <AppHeader variant=\"plain\">\n        <AppHeaderBranding title=\"CLET PORTAL\" subtitle=\"Component Library\" />\n        <AppHeaderActions>\n          <AppSwitcher apps={apps} title=\"System directory\" />\n          <AppHeaderNotifications>\n            {notifications.map((n) => (\n              <div key={n.id} className=\"clet-notif-popover__item\">\n                {n.unread && <div className=\"clet-notif-popover__dot\" />}\n                <div className=\"clet-notif-popover__body\">\n                  <div className=\"clet-notif-popover__body-text\">{n.text}</div>\n                  <div className=\"clet-notif-popover__body-time\">{n.time}</div>\n                </div>\n              </div>\n            ))}\n          </AppHeaderNotifications>\n          <ProfilePopover\n            variant=\"avatar\"\n            user={user}\n            onSignOut={() => console.log(\"Sign out\")}\n          >\n            <RoleSelect\n              title=\"View as\"\n              roles={roles}\n              selectedRole={selectedRole}\n              onClickRole={(role) => setSelectedRole(role.id)}\n            />\n          </ProfilePopover>\n        </AppHeaderActions>\n      </AppHeader>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "app-header.example.tsx",
+      "importName": "appHeaderSource",
+      "title": "App Header",
+      "components": [
+        "AppHeader",
+        "AppHeaderActions",
+        "AppHeaderNotificationItem",
+        "AppHeaderNotifications",
+        "AppHeaderSearch",
+        "AppHeaderSearchDataGroup",
+        "AppSwitcher",
+        "ProfilePopover",
+        "RoleSelect",
+        "SystemAppIcon"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  AppHeader,\n  AppHeaderActions,\n  AppHeaderSearch,\n  AppHeaderNotifications,\n  AppHeaderNotificationItem,\n  AppSwitcher,\n  ProfilePopover,\n  RoleSelect,\n  SystemAppIcon,\n} from \"@rfdtech/components\";\nimport type { AppHeaderSearchDataGroup } from \"@rfdtech/components\";\nimport { Shield, Eye, ScrollText } from \"lucide-react\";\n\nconst user = {\n  name: \"Kwame Asante\",\n  role: \"Admin\",\n  initials: \"KA\",\n  email: \"kwame@clet.edu.gh\",\n};\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nconst apps = [\n  {\n    id: \"gov-portal\",\n    name: \"Governance Portal\",\n    icon: <SystemAppIcon name=\"Governance Portal\" />,\n    href: \"https://portal.example.com\",\n  },\n  {\n    id: \"finance-hub\",\n    name: \"Finance Hub\",\n    icon: <SystemAppIcon name=\"Finance Hub\" />,\n    href: \"https://finance.example.com\",\n  },\n  {\n    id: \"hr-suite\",\n    name: \"HR Suite\",\n    icon: <SystemAppIcon name=\"HR Suite\" />,\n  },\n];\n\nconst notifications = [\n  { id: \"1\", text: \"A new member joined the Ghana chapter.\", time: \"2m ago\", unread: true },\n  { id: \"2\", text: \"Your monthly report is ready.\", time: \"1h ago\", unread: true },\n  { id: \"3\", text: \"System maintenance scheduled for 2:00 AM.\", time: \"3h ago\", unread: false },\n];\n\nexport function AppHeaderExample() {\n  const [search, setSearch] = useState(\"\");\n  const [profileVariant, setProfileVariant] = useState<\"full\" | \"avatar\">(\n    \"full\",\n  );\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  const nextProfileVariant = ({ full: \"avatar\", avatar: \"full\" } as const)[\n    profileVariant\n  ];\n\n  const searchGroups: AppHeaderSearchDataGroup[] = search\n    ? [\n        {\n          heading: \"Members\",\n          items: [\n            {\n              value: \"kwame-asante\",\n              label: \"Kwame Asante\",\n              onSelect: () => console.log(\"Selected member:\", \"Kwame Asante\"),\n            },\n            {\n              value: \"abena-mensah\",\n              label: \"Abena Mensah\",\n              onSelect: () => console.log(\"Selected member:\", \"Abena Mensah\"),\n            },\n          ],\n        },\n        {\n          heading: \"Projects\",\n          items: [\n            {\n              value: \"clet-platform\",\n              label: \"CLET Platform\",\n              onSelect: () => console.log(\"Selected project:\", \"CLET Platform\"),\n            },\n          ],\n        },\n      ]\n    : [];\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <button\n        type=\"button\"\n        className=\"clet-profile-menu__item\"\n        style={{ alignSelf: \"flex-start\" }}\n        onClick={() => setProfileVariant(nextProfileVariant)}\n      >\n        <span>Switch profile trigger to {nextProfileVariant}</span>\n      </button>\n      <AppHeader>\n        <AppHeaderSearch\n          data={searchGroups}\n          onSearch={setSearch}\n          showEmpty\n          placeholder=\"Search members, projects…\"\n        />\n        <AppHeaderActions>\n          <AppSwitcher apps={apps} />\n          <AppHeaderNotifications>\n            {notifications.map((n) => (\n              <AppHeaderNotificationItem\n                key={n.id}\n                text={n.text}\n                time={n.time}\n                unread={n.unread}\n              />\n            ))}\n          </AppHeaderNotifications>\n          <ProfilePopover\n            user={user}\n            variant={profileVariant}\n            onSignOut={() => console.log(\"Sign out\")}\n          >\n            <RoleSelect\n              title=\"View as\"\n              roles={roles}\n              selectedRole={selectedRole}\n              onClickRole={(role) => setSelectedRole(role.id)}\n            />\n          </ProfilePopover>\n        </AppHeaderActions>\n      </AppHeader>\n      <div\n        style={{\n          height: 120,\n          borderRadius: \"var(--clet-radius-2xl)\",\n          background: \"var(--clet-surface-subtle)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontSize: 14,\n          color: \"var(--clet-text-muted)\",\n          border: \"1px dashed var(--clet-border)\",\n        }}\n      >\n        Page content goes here\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "app-layout": [
+    {
+      "file": "app-layout-stacked.example.tsx",
+      "importName": "appLayoutStackedSource",
+      "title": "App Layout Stacked",
+      "components": [
+        "AppBody",
+        "AppHeader",
+        "AppHeaderActions",
+        "AppHeaderBranding",
+        "AppHeaderNotifications",
+        "AppLayout",
+        "AppSidebar",
+        "AppSwitcher",
+        "ProfilePopover",
+        "RoleSelect",
+        "Sidebar",
+        "SidebarBadge",
+        "SidebarContent",
+        "SidebarFooter",
+        "SidebarGroup",
+        "SidebarGroupLabel",
+        "SidebarLink",
+        "SidebarNav"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  AppLayout,\n  AppHeader,\n  AppHeaderActions,\n  AppHeaderBranding,\n  AppHeaderNotifications,\n  AppSwitcher,\n  AppSidebar,\n  AppBody,\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarNav,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarLink,\n  SidebarBadge,\n  ProfilePopover,\n  RoleSelect,\n} from \"@rfdtech/components\";\nimport {\n  Bell,\n  BookOpen,\n  ChevronRight,\n  FileText,\n  LayoutDashboard,\n  Shield,\n  Users,\n  User,\n  Settings,\n  HelpCircle,\n} from \"lucide-react\";\n\nconst user = {\n  name: \"Kwame Asante\",\n  role: \"Admin\",\n  initials: \"KA\",\n  email: \"kwame@clet.edu.gh\",\n};\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\" },\n  { id: \"reviewer\", name: \"Reviewer\" },\n  { id: \"auditor\", name: \"Auditor\" },\n];\n\nconst apps = [\n  {\n    id: \"gov-portal\",\n    name: \"Governance Portal\",\n    icon: \"https://ui-avatars.com/api/?name=Governance+Portal&background=1d4ed8&color=fff&size=96\",\n  },\n  {\n    id: \"finance-hub\",\n    name: \"Finance Hub\",\n    icon: \"https://ui-avatars.com/api/?name=Finance+Hub&background=047857&color=fff&size=96\",\n  },\n];\n\nconst notifications = [\n  { id: \"1\", text: \"A new member joined the Ghana chapter.\", time: \"2m ago\", unread: true },\n  { id: \"2\", text: \"Your monthly report is ready.\", time: \"1h ago\", unread: false },\n];\n\nconst navGroups = [\n  {\n    label: \"Main\",\n    links: [\n      { id: \"dashboard\", label: \"Dashboard\", icon: LayoutDashboard },\n      { id: \"members\", label: \"Members\", icon: Users },\n      { id: \"docs\", label: \"Documentation\", icon: BookOpen, badge: \"New\" },\n    ],\n  },\n  {\n    label: \"Analytics\",\n    links: [\n      { id: \"reports\", label: \"Reports\", icon: FileText },\n      { id: \"alerts\", label: \"Alerts\", icon: Bell, badge: \"8\" },\n      { id: \"permissions\", label: \"Permissions\", icon: Shield },\n    ],\n  },\n];\n\nexport function AppLayoutStackedExample() {\n  const [active, setActive] = useState(\"members\");\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(\n    () => new Set([\"Main\"]),\n  );\n\n  const toggleGroup = (label: string, expanded: boolean) => {\n    setExpandedGroups((prev) => {\n      const next = new Set(prev);\n      if (expanded) next.add(label);\n      else next.delete(label);\n      return next;\n    });\n  };\n\n  return (\n    <div style={{ height: 480, borderRadius: \"var(--clet-radius-2xl)\", overflow: \"hidden\" }}>\n      {/* Dashboard shell: variant=\"stacked\" AppLayout + variant=\"plain\" AppHeader/Sidebar */}\n      <AppLayout variant=\"stacked\">\n        <AppHeader variant=\"plain\">\n          <AppHeaderBranding title=\"CLET PORTAL\" subtitle=\"Component Library\" />\n          <AppHeaderActions>\n            <AppSwitcher apps={apps} title=\"System directory\" />\n            <AppHeaderNotifications>\n              {notifications.map((n) => (\n                <div key={n.id} className=\"clet-notif-popover__item\">\n                  {n.unread && <div className=\"clet-notif-popover__dot\" />}\n                  <div className=\"clet-notif-popover__body\">\n                    <div className=\"clet-notif-popover__body-text\">{n.text}</div>\n                    <div className=\"clet-notif-popover__body-time\">{n.time}</div>\n                  </div>\n                </div>\n              ))}\n            </AppHeaderNotifications>\n            <ProfilePopover\n              variant=\"avatar\"\n              user={user}\n              onSignOut={() => console.log(\"Sign out\")}\n            >\n              <RoleSelect\n                title=\"View as\"\n                roles={roles}\n                selectedRole={selectedRole}\n                onClickRole={(role) => setSelectedRole(role.id)}\n              />\n            </ProfilePopover>\n          </AppHeaderActions>\n        </AppHeader>\n        <AppSidebar>\n          <Sidebar variant=\"plain\">\n            <SidebarContent>\n              <SidebarNav>\n                {navGroups.map((group) => (\n                  <SidebarGroup\n                    key={group.label}\n                    collapsible\n                    expanded={expandedGroups.has(group.label)}\n                    onExpandedChange={(expanded) => toggleGroup(group.label, expanded)}\n                  >\n                    <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n                    {group.links.map((link) => (\n                      <SidebarLink\n                        key={link.id}\n                        active={active === link.id}\n                        icon={<link.icon size={18} strokeWidth={1.5} />}\n                        onClick={() => setActive(link.id)}\n                      >\n                        {link.label}\n                        {link.badge && <SidebarBadge>{link.badge}</SidebarBadge>}\n                      </SidebarLink>\n                    ))}\n                  </SidebarGroup>\n                ))}\n              </SidebarNav>\n              <button type=\"button\" className=\"clet-sidebar__link\" style={{ width: \"100%\" }}>\n                <ChevronRight size={16} strokeWidth={1.5} />\n                <span className=\"clet-sidebar__link-label\">Back to main dashboard</span>\n              </button>\n            </SidebarContent>\n            <SidebarFooter>\n              <ProfilePopover\n                fullName={user.name}\n                email={user.email}\n                items={[\n                  {\n                    icon: <User size={20} strokeWidth={1.5} aria-hidden />,\n                    label: \"My Profile\",\n                  },\n                  {\n                    icon: <Settings size={20} strokeWidth={1.5} aria-hidden />,\n                    label: \"Account Settings\",\n                  },\n                  {\n                    icon: <HelpCircle size={20} strokeWidth={1.5} aria-hidden />,\n                    label: \"Help & Support\",\n                  },\n                ]}\n                onSignOut={() => console.log(\"Sign out\")}\n              >\n                <RoleSelect\n                  title=\"View as\"\n                  roles={roles}\n                  selectedRole={selectedRole}\n                  onClickRole={(role) => setSelectedRole(role.id)}\n                />\n              </ProfilePopover>\n            </SidebarFooter>\n          </Sidebar>\n        </AppSidebar>\n        <AppBody>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              height: \"100%\",\n              color: \"var(--clet-text-muted)\",\n              fontSize: 14,\n            }}\n          >\n            Page content — full-width plain header on top, plain sidebar and\n            content side by side below\n          </div>\n        </AppBody>\n      </AppLayout>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "app-layout.example.tsx",
+      "importName": "appLayoutSource",
+      "title": "App Layout",
+      "components": [
+        "AppBody",
+        "AppHeader",
+        "AppHeaderActions",
+        "AppHeaderSearch",
+        "AppHeaderSearchDataGroup",
+        "AppLayout",
+        "AppSidebar",
+        "ProfilePopover",
+        "RoleSelect",
+        "Sidebar",
+        "SidebarContent",
+        "SidebarGroup",
+        "SidebarGroupLabel",
+        "SidebarLink",
+        "SidebarNav"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  AppLayout,\n  AppHeader,\n  AppHeaderActions,\n  AppHeaderSearch,\n  ProfilePopover,\n  AppSidebar,\n  AppBody,\n  Sidebar,\n  SidebarContent,\n  SidebarNav,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarLink,\n  RoleSelect,\n} from \"@rfdtech/components\";\nimport { LayoutDashboard, Users, Settings, Shield, Eye, ScrollText } from \"lucide-react\";\nimport type { AppHeaderSearchDataGroup } from \"@rfdtech/components\";\n\nconst user = {\n  name: \"Kwame Asante\",\n  role: \"Admin\",\n  initials: \"KA\",\n  email: \"kwame@clet.edu.gh\",\n};\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nconst links = [\n  { id: \"dashboard\", label: \"Dashboard\", icon: LayoutDashboard, active: true },\n  { id: \"members\", label: \"Members\", icon: Users },\n  { id: \"settings\", label: \"Settings\", icon: Settings },\n];\n\nexport function AppLayoutExample() {\n  const [search, setSearch] = useState(\"\");\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  const searchGroups: AppHeaderSearchDataGroup[] = search\n    ? [\n        {\n          heading: \"Members\",\n          items: [\n            {\n              value: \"kwame-asante\",\n              label: \"Kwame Asante\",\n              onSelect: () => console.log(\"Selected member:\", \"Kwame Asante\"),\n            },\n            {\n              value: \"abena-mensah\",\n              label: \"Abena Mensah\",\n              onSelect: () => console.log(\"Selected member:\", \"Abena Mensah\"),\n            },\n          ],\n        },\n        {\n          heading: \"Projects\",\n          items: [\n            {\n              value: \"clet-platform\",\n              label: \"CLET Platform\",\n              onSelect: () => console.log(\"Selected project:\", \"CLET Platform\"),\n            },\n          ],\n        },\n      ]\n    : [];\n\n  return (\n    <div style={{ height: 400, borderRadius: \"var(--clet-radius-2xl)\", overflow: \"hidden\" }}>\n      <AppLayout>\n        <AppHeader>\n          <AppHeaderSearch\n            data={searchGroups}\n            onSearch={setSearch}\n            showEmpty\n            placeholder=\"Search members, projects…\"\n          />\n          <AppHeaderActions>\n            <ProfilePopover\n              user={user}\n              onSignOut={() => console.log(\"Sign out\")}\n            >\n              <RoleSelect\n                title=\"View as\"\n                roles={roles}\n                selectedRole={selectedRole}\n                onClickRole={(role) => setSelectedRole(role.id)}\n              />\n            </ProfilePopover>\n          </AppHeaderActions>\n        </AppHeader>\n        <AppSidebar>\n          <Sidebar>\n            <SidebarContent>\n              <SidebarNav>\n                <SidebarGroup>\n                  <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n                  {links.map((link) => (\n                    <SidebarLink key={link.id} icon={<link.icon size={18} strokeWidth={1.5} />}>\n                      {link.label}\n                    </SidebarLink>\n                  ))}\n                </SidebarGroup>\n              </SidebarNav>\n            </SidebarContent>\n          </Sidebar>\n        </AppSidebar>\n        <AppBody>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              height: \"100%\",\n              color: \"var(--clet-text-muted)\",\n              fontSize: 14,\n            }}\n          >\n            Page content — auto-positioned header, sidebar, and body\n          </div>\n        </AppBody>\n      </AppLayout>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "app-switcher": [
+    {
+      "file": "app-switcher-loading.example.tsx",
+      "importName": "appSwitcherLoadingSource",
+      "title": "App Switcher Loading",
+      "components": [
+        "AppSwitcher"
+      ],
+      "source": "import { AppSwitcher } from \"@rfdtech/components\";\n\nexport function AppSwitcherLoadingExample() {\n  return (\n    <AppSwitcher\n      apps={[]}\n      loading\n      loadingLabel=\"Loading systems...\"\n      title=\"System directory\"\n    />\n  );\n}\n"
+    },
+    {
+      "file": "app-switcher.example.tsx",
+      "importName": "appSwitcherSource",
+      "title": "App Switcher",
+      "components": [
+        "AppSwitcher",
+        "SystemAppIcon"
+      ],
+      "source": "import { AppSwitcher, SystemAppIcon } from \"@rfdtech/components\";\n\nconst apps = [\n  {\n    id: \"gov-portal\",\n    name: \"Governance Portal\",\n    icon: \"https://ui-avatars.com/api/?name=Governance+Portal&background=1d4ed8&color=fff&size=96\",\n    href: \"https://portal.example.com\",\n  },\n  {\n    id: \"finance-hub\",\n    name: \"Finance Hub\",\n    icon: \"https://ui-avatars.com/api/?name=Finance+Hub&background=047857&color=fff&size=96\",\n    href: \"https://finance.example.com\",\n  },\n  {\n    id: \"hr-suite\",\n    name: \"HR Suite\",\n    icon: \"https://ui-avatars.com/api/?name=HR+Suite&background=7c3aed&color=fff&size=96\",\n  },\n  {\n    id: \"accreditation\",\n    name: \"Accreditation\",\n    icon: <SystemAppIcon name=\"Accreditation\" />,\n  },\n  {\n    id: \"facilities\",\n    name: \"Facilities\",\n    icon: <SystemAppIcon name=\"Facilities\" />,\n  },\n  {\n    id: \"fleet-management\",\n    name: \"Fleet Management\",\n    icon: <SystemAppIcon name=\"Fleet Management\" />,\n  },\n];\n\nexport function AppSwitcherExample() {\n  return (\n    <AppSwitcher\n      apps={apps}\n      title=\"System directory\"\n      onAppSelect={(app) => console.log(\"Selected:\", app.name)}\n    />\n  );\n}\n"
+    }
+  ],
+  "badge": [
+    {
+      "file": "badge-variants.example.tsx",
+      "importName": "badgeVariantsSource",
+      "title": "Badge Variants",
+      "components": [
+        "Badge"
+      ],
+      "source": "import { Badge } from \"@rfdtech/components\";\n\nexport function BadgeVariantsExample() {\n  return (\n    <>\n      <Badge variant=\"default\">Default</Badge>\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"error\">Error</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge size=\"md\">Medium</Badge>\n    </>\n  );\n}\n"
+    }
+  ],
+  "breadcrumb": [
+    {
+      "file": "breadcrumb.example.tsx",
+      "importName": "breadcrumbSource",
+      "title": "Breadcrumb",
+      "components": [
+        "Breadcrumb",
+        "BreadcrumbItem",
+        "BreadcrumbLink",
+        "BreadcrumbList",
+        "BreadcrumbPage",
+        "BreadcrumbSeparator"
+      ],
+      "source": "import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rfdtech/components\";\n\nexport function BreadcrumbExample() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Profile</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
+    }
+  ],
+  "bulk-import-modal": [
+    {
+      "file": "bulk-import.example.tsx",
+      "importName": "bulkImportSource",
+      "title": "Bulk Import",
+      "components": [
+        "BulkImportField",
+        "BulkImportModal",
+        "BulkImportResult",
+        "useModalSearchParam"
+      ],
+      "source": "import type { BulkImportField, BulkImportResult } from \"@rfdtech/components\";\nimport { BulkImportModal, useModalSearchParam } from \"@rfdtech/components\";\nimport { useCallback } from \"react\";\n\nconst fields: BulkImportField[] = [\n  {\n    key: \"organisation_name\",\n    label: \"Organisation Name\",\n    required: true,\n    example: \"CLET Corporation\",\n  },\n  {\n    key: \"organisation_email\",\n    type: \"email\",\n    label: \"Organisation Email\",\n    required: true,\n    unique: true,\n    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\n    example: \"info@clet.edu.gh\",\n  },\n  {\n    key: \"document_name\",\n    label: \"Document Name\",\n    required: true,\n    example: \"2024 Annual Budget\",\n  },\n  {\n    key: \"document_type\",\n    label: \"Document Type\",\n    required: false,\n    example: \"Financial\",\n  },\n  {\n    key: \"date_submitted\",\n    label: \"Date Submitted\",\n    required: false,\n    example: \"2024-01-15\",\n  },\n  {\n    key: \"status\",\n    label: \"Status\",\n    required: false,\n    example: \"Approved\",\n  },\n  {\n    key: \"amount\",\n    label: \"Amount (GHS)\",\n    required: false,\n    example: \"150000\",\n  },\n];\n\nexport function BulkImportExample() {\n  const { open, onOpenChange, openWith } = useModalSearchParam(\"bulk-import\");\n\n  const handleComplete = useCallback(\n    (result: BulkImportResult) => {\n      console.log(\"Import complete:\", result);\n      onOpenChange(false);\n    },\n    [onOpenChange],\n  );\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 12,\n        alignItems: \"flex-start\",\n      }}\n    >\n      <div style={{ display: \"flex\", gap: 8 }}>\n        <button\n          type=\"button\"\n          className=\"demo-button\"\n          onClick={() => openWith()}\n        >\n          Open bulk import\n        </button>\n      </div>\n      <BulkImportModal\n        maxFileSizeBytes={200 * 1024 * 1024}\n        open={open}\n        onOpenChange={onOpenChange}\n        title=\"Import documents\"\n        fields={fields}\n        onComplete={handleComplete}\n      />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "button": [
+    {
+      "file": "button-variants.example.tsx",
+      "importName": "buttonVariantsSource",
+      "title": "Button Variants",
+      "components": [
+        "Button"
+      ],
+      "source": "import { Button } from \"@rfdtech/components\";\n\nexport function ButtonVariantsExample() {\n  return (\n    <>\n      <Button variant=\"primary\">Primary</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button loading loadingLabel=\"Saving\">\n        Loading\n      </Button>\n      <Button disabled>Disabled</Button>\n    </>\n  );\n}\n"
+    }
+  ],
+  "card": [
+    {
+      "file": "card.example.tsx",
+      "importName": "cardSource",
+      "title": "Card",
+      "components": [
+        "Card",
+        "CardActions",
+        "CardHeader",
+        "CardTitle"
+      ],
+      "source": "import { Card, CardHeader, CardTitle, CardActions } from \"@rfdtech/components\";\n\nexport function CardExample() {\n  return (\n    <div\n      style={{\n        background: \"var(--clet-surface-subtle)\",\n        padding: 20,\n        borderRadius: \"var(--clet-radius-xl)\",\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 16,\n          maxWidth: 480,\n        }}\n      >\n        <Card>\n          <CardHeader>\n            <CardTitle>Profile summary</CardTitle>\n            <CardActions>\n              <button\n                style={{\n                  padding: \"4px 12px\",\n                  fontSize: 12,\n                  border: \"1px solid var(--clet-border)\",\n                  borderRadius: \"var(--clet-radius)\",\n                  background: \"var(--clet-bg)\",\n                  cursor: \"pointer\",\n                }}\n              >\n                Edit\n              </button>\n            </CardActions>\n          </CardHeader>\n          <p\n            style={{\n              margin: 0,\n              fontSize: 14,\n              color: \"var(--clet-text-secondary)\",\n              lineHeight: 1.6,\n            }}\n          >\n            Kwame Asante is an administrator with full system access.\n          </p>\n        </Card>\n        <Card>\n          <p\n            style={{\n              margin: 0,\n              fontSize: 14,\n              color: \"var(--clet-text-secondary)\",\n              lineHeight: 1.6,\n            }}\n          >\n            A card without a header, useful for wrapping standalone content like\n            tables or text.\n          </p>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Settings</CardTitle>\n          </CardHeader>\n          <p\n            style={{\n              margin: 0,\n              fontSize: 14,\n              color: \"var(--clet-text-secondary)\",\n              lineHeight: 1.6,\n            }}\n          >\n            Header with title only, no actions. Use <code>className</code> for\n            root overrides.\n          </p>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "changelog": [],
+  "checkbox": [
+    {
+      "file": "checkbox.example.tsx",
+      "importName": "checkboxSource",
+      "title": "Checkbox",
+      "components": [
+        "Checkbox"
+      ],
+      "source": "import { useState } from \"react\";\nimport { Checkbox } from \"@rfdtech/components\";\n\nexport function CheckboxExample() {\n  const [terms, setTerms] = useState(false);\n  const [updates, setUpdates] = useState(true);\n\n  return (\n    <>\n      <Checkbox\n        label=\"Accept terms and conditions\"\n        checked={terms}\n        onCheckedChange={setTerms}\n      />\n      <Checkbox\n        label=\"Send me product updates\"\n        checked={updates}\n        onCheckedChange={setUpdates}\n      />\n      <Checkbox label=\"Disabled option\" disabled />\n    </>\n  );\n}\n"
+    }
+  ],
+  "combobox": [
+    {
+      "file": "combobox-icons.example.tsx",
+      "importName": "comboboxIconsSource",
+      "title": "Combobox Icons",
+      "components": [
+        "Combobox"
+      ],
+      "source": "import { Combobox } from \"@rfdtech/components\";\nimport { Star } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst options = [\n  { value: \"1\", label: \"Option 1\", icon: <Star size={16} /> },\n  { value: \"2\", label: \"Option 2\", icon: <Star size={16} /> },\n  { value: \"3\", label: \"Option 3\", icon: <Star size={16} /> },\n];\n\nexport function ComboboxIconsExample() {\n  const [value, setValue] = useState<string[]>([\"1\", \"2\"]);\n\n  return (\n    <Combobox\n      aria-label=\"Select options\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      multiple\n    />\n  );\n}\n"
+    },
+    {
+      "file": "combobox-multi.example.tsx",
+      "importName": "comboboxMultiSource",
+      "title": "Combobox Multi",
+      "components": [
+        "Combobox"
+      ],
+      "source": "import { Combobox } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nconst options = [\n  { value: \"1\", label: \"Option 1\" },\n  { value: \"2\", label: \"Option 2\" },\n  { value: \"3\", label: \"Option 3\" },\n  { value: \"4\", label: \"Option 4\" },\n];\n\nexport function ComboboxMultiExample() {\n  const [value, setValue] = useState<string[]>([\"2\", \"4\"]);\n\n  return (\n    <Combobox\n      aria-label=\"Select options\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      multiple\n    />\n  );\n}\n"
+    },
+    {
+      "file": "combobox-single.example.tsx",
+      "importName": "comboboxSingleSource",
+      "title": "Combobox Single",
+      "components": [
+        "Combobox"
+      ],
+      "source": "import { Combobox } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nconst options = [\n  { value: \"1\", label: \"Option 1\" },\n  { value: \"2\", label: \"Option 2\" },\n  { value: \"3\", label: \"Option 3\" },\n  { value: \"4\", label: \"Option 4\" },\n  { value: \"5\", label: \"Option 5\" },\n];\n\nexport function ComboboxSingleExample() {\n  const [value, setValue] = useState<string | null>(null);\n\n  return (\n    <Combobox\n      aria-label=\"Select\"\n      placeholder=\"Select\"\n      options={options}\n      value={value}\n      onValueChange={setValue}\n      clearable\n    />\n  );\n}\n"
+    }
+  ],
+  "command": [
+    {
+      "file": "command-dialog.example.tsx",
+      "importName": "commandDialogSource",
+      "title": "Command Dialog",
+      "components": [
+        "Button",
+        "CommandDialog",
+        "CommandEmpty",
+        "CommandGroup",
+        "CommandInput",
+        "CommandItem",
+        "CommandList",
+        "CommandSeparator",
+        "CommandShortcut",
+        "useDialogSearchParam"
+      ],
+      "source": "import { useCallback, useEffect, useState } from \"react\";\nimport {\n  Button,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  useDialogSearchParam,\n} from \"@rfdtech/components\";\n\ntype MockItem = { value: string; label: string };\n\nconst MOCK_NAV: MockItem[] = [\n  { value: \"dashboard\", label: \"Dashboard\" },\n  { value: \"users\", label: \"Users\" },\n];\n\nconst MOCK_ACTIONS: MockItem[] = [{ value: \"sign-out\", label: \"Sign out\" }];\n\nfunction filterItems(query: string, items: readonly MockItem[]) {\n  const normalized = query.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  return items.filter(\n    (item) =>\n      item.label.toLowerCase().includes(normalized) ||\n      item.value.toLowerCase().includes(normalized),\n  );\n}\n\nfunction useMockGroupFetch(\n  query: string,\n  items: readonly MockItem[],\n  delayMs: number,\n) {\n  const [results, setResults] = useState<MockItem[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    const normalized = query.trim();\n    if (!normalized) {\n      setResults([]);\n      setLoading(false);\n      return;\n    }\n\n    setLoading(true);\n    const timer = window.setTimeout(() => {\n      setResults(filterItems(normalized, items));\n      setLoading(false);\n    }, delayMs);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [query, items, delayMs]);\n\n  return { results, loading };\n}\n\nexport function CommandDialogExample() {\n  const { open, onOpenChange, openWith } = useDialogSearchParam(\"command-menu\");\n  const [search, setSearch] = useState(\"\");\n  const [lastAction, setLastAction] = useState(\"Open the command menu\");\n  const navigation = useMockGroupFetch(search, MOCK_NAV, 350);\n  const actions = useMockGroupFetch(search, MOCK_ACTIONS, 700);\n  const hasSearch = Boolean(search.trim());\n  const anyLoading = navigation.loading || actions.loading;\n  const totalResults = navigation.results.length + actions.results.length;\n  const showEmpty = hasSearch && !anyLoading && totalResults === 0;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      onOpenChange(nextOpen);\n      if (!nextOpen) {\n        setSearch(\"\");\n      }\n    },\n    [onOpenChange],\n  );\n\n  return (\n    <div style={{ display: \"grid\", gap: 12 }}>\n      <Button variant=\"secondary\" onClick={() => openWith()}>\n        Open command menu\n      </Button>\n      <p style={{ margin: 0, fontSize: 14, color: \"var(--clet-text-secondary)\" }}>\n        Press <kbd>Cmd</kbd>+<kbd>K</kbd> or <kbd>Ctrl</kbd>+<kbd>K</kbd>.{\" \"}\n        {lastAction}\n      </p>\n      <CommandDialog\n        open={open}\n        onOpenChange={handleOpenChange}\n        shortcut\n        label=\"Command menu\"\n        shouldFilter={false}\n      >\n        <CommandInput\n          value={search}\n          onValueChange={setSearch}\n          placeholder=\"Type a command...\"\n          aria-label=\"Command search\"\n        />\n        {hasSearch ? (\n          <CommandList>\n            {showEmpty ? <CommandEmpty>No results found.</CommandEmpty> : null}\n            <CommandGroup\n              heading=\"Navigation\"\n              loading={navigation.loading}\n              loadingLabel=\"Loading navigation\"\n            >\n              {navigation.results.map((item) => (\n                <CommandItem\n                  key={item.value}\n                  value={item.value}\n                  onSelect={() => {\n                    setLastAction(`Navigated to ${item.label}`);\n                    handleOpenChange(false);\n                  }}\n                >\n                  {item.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup\n              heading=\"Actions\"\n              loading={actions.loading}\n              loadingLabel=\"Loading actions\"\n            >\n              {actions.results.map((item) => (\n                <CommandItem\n                  key={item.value}\n                  value={item.value}\n                  onSelect={() => {\n                    setLastAction(\n                      item.value === \"sign-out\" ? \"Signed out\" : item.label,\n                    );\n                    handleOpenChange(false);\n                  }}\n                >\n                  {item.label}\n                  {item.value === \"sign-out\" ? (\n                    <CommandShortcut>\n                      <span>⌘</span>\n                      <span>Q</span>\n                    </CommandShortcut>\n                  ) : null}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        ) : null}\n      </CommandDialog>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "command-inline.example.tsx",
+      "importName": "commandInlineSource",
+      "title": "Command Inline",
+      "components": [
+        "Command",
+        "CommandEmpty",
+        "CommandGroup",
+        "CommandInput",
+        "CommandItem",
+        "CommandList"
+      ],
+      "source": "import { useEffect, useState } from \"react\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@rfdtech/components\";\n\ntype MockItem = { value: string; label: string };\n\nconst MOCK_CONTACT: MockItem[] = [\n  { value: \"email\", label: \"Email\" },\n  { value: \"name\", label: \"Full name\" },\n  { value: \"phone\", label: \"Phone number\" },\n];\n\nconst MOCK_ORG: MockItem[] = [\n  { value: \"company\", label: \"Company name\" },\n  { value: \"address\", label: \"Street address\" },\n];\n\nfunction filterItems(query: string, items: readonly MockItem[]) {\n  const normalized = query.trim().toLowerCase();\n  if (!normalized) {\n    return [];\n  }\n\n  return items.filter(\n    (item) =>\n      item.label.toLowerCase().includes(normalized) ||\n      item.value.toLowerCase().includes(normalized),\n  );\n}\n\nfunction useMockGroupFetch(\n  query: string,\n  items: readonly MockItem[],\n  delayMs: number,\n) {\n  const [results, setResults] = useState<MockItem[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    const normalized = query.trim();\n    if (!normalized) {\n      setResults([]);\n      setLoading(false);\n      return;\n    }\n\n    setLoading(true);\n    const timer = window.setTimeout(() => {\n      setResults(filterItems(normalized, items));\n      setLoading(false);\n    }, delayMs);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [query, items, delayMs]);\n\n  return { results, loading };\n}\n\nexport function CommandInlineExample() {\n  const [search, setSearch] = useState(\"\");\n  const [field, setField] = useState<string>(\"email\");\n  const contact = useMockGroupFetch(search, MOCK_CONTACT, 350);\n  const organization = useMockGroupFetch(search, MOCK_ORG, 700);\n  const hasSearch = Boolean(search.trim());\n  const anyLoading = contact.loading || organization.loading;\n  const totalResults = contact.results.length + organization.results.length;\n  const showEmpty = hasSearch && !anyLoading && totalResults === 0;\n\n  return (\n    <div style={{ display: \"grid\", gap: 12, maxWidth: 360, width: \"100%\" }}>\n      <Command label=\"Field picker\" shouldFilter={false}>\n        <CommandInput\n          value={search}\n          onValueChange={setSearch}\n          placeholder=\"Search fields...\"\n          aria-label=\"Search fields\"\n        />\n        {hasSearch ? (\n          <CommandList>\n            {showEmpty ? <CommandEmpty>No results.</CommandEmpty> : null}\n            <CommandGroup\n              heading=\"Contact fields\"\n              loading={contact.loading}\n              loadingLabel=\"Loading contact fields\"\n            >\n              {contact.results.map((item) => (\n                <CommandItem\n                  key={item.value}\n                  value={item.value}\n                  onSelect={() => setField(item.value)}\n                >\n                  {item.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandGroup\n              heading=\"Organization\"\n              loading={organization.loading}\n              loadingLabel=\"Loading organization fields\"\n            >\n              {organization.results.map((item) => (\n                <CommandItem\n                  key={item.value}\n                  value={item.value}\n                  onSelect={() => setField(item.value)}\n                >\n                  {item.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        ) : null}\n      </Command>\n      <p style={{ margin: 0, fontSize: 14, color: \"var(--clet-text-secondary)\" }}>\n        Selected field: <strong style={{ color: \"var(--clet-text)\" }}>{field}</strong>\n      </p>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "country-selector": [
+    {
+      "file": "country-selector.example.tsx",
+      "importName": "countrySelectorSource",
+      "title": "Country Selector",
+      "components": [
+        "CountrySelector"
+      ],
+      "source": "import { CountrySelector } from \"@rfdtech/components\";\n\nexport function CountrySelectorExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 300 }}>\n      <CountrySelector />\n      <CountrySelector invalid />\n      <CountrySelector disabled />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "date-range-selector": [
+    {
+      "file": "date-range-filter.example.tsx",
+      "importName": "dateRangeFilterSource",
+      "title": "Date Range Filter",
+      "components": [
+        "Badge",
+        "Button",
+        "DateRangeSelector",
+        "DateRangeValue",
+        "Table",
+        "TableColumn",
+        "TableContent",
+        "TableFilter",
+        "TableFooter",
+        "TableHeader",
+        "TablePagination",
+        "TableSearch",
+        "useTableState"
+      ],
+      "source": "import { useState } from \"react\";\nimport { useTableState } from \"@rfdtech/components\";\nimport type { TableColumn, DateRangeValue } from \"@rfdtech/components\";\nimport {\n  Table,\n  TableHeader,\n  TableSearch,\n  TableFilter,\n  TableContent,\n  TableFooter,\n  TablePagination,\n  DateRangeSelector,\n  Badge,\n  Button,\n} from \"@rfdtech/components\";\nimport { ShieldAlert, SearchX } from \"lucide-react\";\n\ninterface AuditLogEntry {\n  id: number;\n  actor: string;\n  action: string;\n  target: string;\n  status: \"success\" | \"failed\" | \"warning\";\n  timestamp: Date;\n}\n\nconst auditLog: AuditLogEntry[] = [\n  { id: 1, actor: \"kwame@clet.edu.gh\", action: \"Login\", target: \"Portal\", status: \"success\", timestamp: new Date(\"2026-06-01T09:12:00\") },\n  { id: 2, actor: \"abena@clet.edu.gh\", action: \"Export report\", target: \"Finance\", status: \"success\", timestamp: new Date(\"2026-06-04T14:03:00\") },\n  { id: 3, actor: \"kofi@clet.edu.gh\", action: \"Failed login\", target: \"Portal\", status: \"failed\", timestamp: new Date(\"2026-06-10T08:45:00\") },\n  { id: 4, actor: \"esi@clet.edu.gh\", action: \"Update permissions\", target: \"User: yaw@clet.edu.gh\", status: \"warning\", timestamp: new Date(\"2026-06-15T11:20:00\") },\n  { id: 5, actor: \"yaw@clet.edu.gh\", action: \"Delete record\", target: \"Claims\", status: \"warning\", timestamp: new Date(\"2026-06-18T16:32:00\") },\n  { id: 6, actor: \"nana@clet.edu.gh\", action: \"Login\", target: \"Portal\", status: \"success\", timestamp: new Date(\"2026-06-22T09:01:00\") },\n  { id: 7, actor: \"akua@clet.edu.gh\", action: \"Approve claim\", target: \"Claims\", status: \"success\", timestamp: new Date(\"2026-06-25T13:47:00\") },\n  { id: 8, actor: \"kwesi@clet.edu.gh\", action: \"Failed login\", target: \"Portal\", status: \"failed\", timestamp: new Date(\"2026-06-29T07:58:00\") },\n  { id: 9, actor: \"adwoa@clet.edu.gh\", action: \"Export report\", target: \"Finance\", status: \"success\", timestamp: new Date(\"2026-07-02T10:15:00\") },\n  { id: 10, actor: \"kobina@clet.edu.gh\", action: \"Update permissions\", target: \"User: esi@clet.edu.gh\", status: \"warning\", timestamp: new Date(\"2026-07-06T15:40:00\") },\n];\n\nfunction statusVariant(status: AuditLogEntry[\"status\"]) {\n  switch (status) {\n    case \"success\":\n      return \"success\" as const;\n    case \"failed\":\n      return \"error\" as const;\n    case \"warning\":\n      return \"warning\" as const;\n    default:\n      return \"default\" as const;\n  }\n}\n\nfunction formatDate(date: Date) {\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n\nconst columns: TableColumn<AuditLogEntry>[] = [\n  { id: \"actor\", header: \"Actor\", accessorKey: \"actor\", sortable: true },\n  { id: \"action\", header: \"Action\", accessorKey: \"action\", sortable: true },\n  { id: \"target\", header: \"Target\", accessorKey: \"target\" },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    sortable: true,\n    cell: ({ value }) => (\n      <Badge variant={statusVariant(value as AuditLogEntry[\"status\"])}>\n        {String(value)}\n      </Badge>\n    ),\n  },\n  {\n    id: \"timestamp\",\n    header: \"Date\",\n    accessorFn: (row) => formatDate(row.timestamp),\n    sortable: true,\n  },\n];\n\nexport function DateRangeFilterExample() {\n  const { page, pageSize, pageSizeOptions, search } = useTableState({\n    defaultPageSize: 5,\n  });\n\n  // Local draft state for the date range picker inside the filter popover.\n  const [draftRange, setDraftRange] = useState<DateRangeValue>({\n    start: null,\n    end: null,\n  });\n  // Only committed to `appliedRange` when the user clicks \"Apply\".\n  const [appliedRange, setAppliedRange] = useState<DateRangeValue>({\n    start: null,\n    end: null,\n  });\n\n  // Demo-only toggle to simulate a genuine error/permission failure, where we\n  // render an inline message in place of the table body instead of letting\n  // TableContent render its own (empty ≠ error) state.\n  const [simulateError, setSimulateError] = useState(false);\n\n  const filtered = auditLog.filter((entry) => {\n    const matchesSearch =\n      !search ||\n      entry.actor.toLowerCase().includes(search.toLowerCase()) ||\n      entry.action.toLowerCase().includes(search.toLowerCase());\n    if (!matchesSearch) return false;\n\n    if (appliedRange.start && entry.timestamp < appliedRange.start) return false;\n    if (appliedRange.end && entry.timestamp > appliedRange.end) return false;\n\n    return true;\n  });\n\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>\n      <Table paramPrefix=\"audit-log\">\n        <TableHeader>\n          <TableSearch placeholder=\"Search audit log...\" />\n          <TableFilter\n            applyLabel=\"Apply\"\n            onApply={() => setAppliedRange(draftRange)}\n            onReset={() => {\n              setDraftRange({ start: null, end: null });\n              setAppliedRange({ start: null, end: null });\n            }}\n          >\n            <div style={{ display: \"grid\", gap: 8 }}>\n              <label style={{ fontSize: 13, fontWeight: 500 }}>Date range</label>\n              <DateRangeSelector\n                value={draftRange}\n                onChange={setDraftRange}\n                placeholder=\"Select date range\"\n              />\n            </div>\n          </TableFilter>\n        </TableHeader>\n\n        {simulateError ? (\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              gap: 8,\n              padding: \"40px 16px\",\n              textAlign: \"center\",\n            }}\n          >\n            <ShieldAlert size={32} strokeWidth={1.5} color=\"var(--clet-error)\" />\n            <p style={{ margin: 0, fontSize: 14, fontWeight: 500, color: \"var(--clet-error-text)\" }}>\n              You don&apos;t have permission to view this audit log.\n            </p>\n            <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-text-muted)\" }}>\n              Contact an administrator if you believe this is a mistake.\n            </p>\n          </div>\n        ) : (\n          <TableContent\n            columns={columns}\n            data={paged}\n            rowKey={(row) => row.id}\n            emptyIcon={<SearchX size={40} strokeWidth={1} />}\n            emptyText=\"No audit events in the selected range\"\n          />\n        )}\n\n        <TableFooter>\n          <TablePagination\n            totalPages={totalPages}\n            totalItems={filtered.length}\n            pageSizeOptions={pageSizeOptions}\n          />\n        </TableFooter>\n      </Table>\n\n      <Button\n        variant=\"outline\"\n        size=\"sm\"\n        style={{ alignSelf: \"flex-start\" }}\n        onClick={() => setSimulateError((v) => !v)}\n      >\n        {simulateError ? \"Show table\" : \"Simulate permission error\"}\n      </Button>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "date-range-presets.example.tsx",
+      "importName": "dateRangePresetsSource",
+      "title": "Date Range Presets",
+      "components": [
+        "DateRangePreset",
+        "DateRangeSelector",
+        "DateRangeValue"
+      ],
+      "source": "import { DateRangeSelector } from \"@rfdtech/components\";\nimport type { DateRangePreset, DateRangeValue } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nfunction startOfDay(date: Date) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n\nfunction daysAgo(count: number) {\n  const d = startOfDay(new Date());\n  d.setDate(d.getDate() - count);\n  return d;\n}\n\nfunction monthsAgo(count: number) {\n  const d = startOfDay(new Date());\n  d.setMonth(d.getMonth() - count);\n  return d;\n}\n\nconst presets: DateRangePreset[] = [\n  { label: \"Today\", getRange: () => ({ start: startOfDay(new Date()), end: startOfDay(new Date()) }) },\n  { label: \"Last 7 days\", getRange: () => ({ start: daysAgo(7), end: startOfDay(new Date()) }) },\n  { label: \"Last 30 days\", getRange: () => ({ start: daysAgo(30), end: startOfDay(new Date()) }) },\n  { label: \"Last 3 months\", getRange: () => ({ start: monthsAgo(3), end: startOfDay(new Date()) }) },\n  { label: \"Last 12 months\", getRange: () => ({ start: monthsAgo(12), end: startOfDay(new Date()) }) },\n  {\n    label: \"Month to date\",\n    getRange: () => {\n      const now = new Date();\n      return { start: new Date(now.getFullYear(), now.getMonth(), 1), end: startOfDay(now) };\n    },\n  },\n  {\n    label: \"Year to date\",\n    getRange: () => {\n      const now = new Date();\n      return { start: new Date(now.getFullYear(), 0, 1), end: startOfDay(now) };\n    },\n  },\n  { label: \"All time\", getRange: () => ({ start: null, end: null }) },\n];\n\nexport function DateRangePresetsExample() {\n  const [value, setValue] = useState<DateRangeValue>({ start: null, end: null });\n\n  return (\n    <DateRangeSelector value={value} onChange={setValue} presets={presets} />\n  );\n}\n"
+    },
+    {
+      "file": "date-range-selector.example.tsx",
+      "importName": "dateRangeSource",
+      "title": "Date Range Selector",
+      "components": [
+        "DateRangeSelector"
+      ],
+      "source": "import { DateRangeSelector } from \"@rfdtech/components\";\n\nexport function DateRangeSelectorExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 320 }}>\n      <DateRangeSelector\n        onChange={(range) => console.log(range)}\n      />\n      <DateRangeSelector invalid placeholder=\"Pick dates\" />\n      <DateRangeSelector disabled />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "date-selector": [
+    {
+      "file": "date-selector.example.tsx",
+      "importName": "dateSelectorSource",
+      "title": "Date Selector",
+      "components": [
+        "DateSelector"
+      ],
+      "source": "import { DateSelector } from \"@rfdtech/components\";\n\nexport function DateSelectorExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 300 }}>\n      <DateSelector />\n      <DateSelector invalid />\n      <DateSelector disabled />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dialog": [
+    {
+      "file": "dialog.example.tsx",
+      "importName": "dialogSource",
+      "title": "Dialog",
+      "components": [
+        "Button",
+        "Dialog",
+        "DialogContent",
+        "DialogDescription",
+        "DialogOverlay",
+        "DialogPortal",
+        "DialogTitle",
+        "useDialogSearchParam"
+      ],
+      "source": "import {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  useDialogSearchParam,\n} from \"@rfdtech/components\";\n\nexport function DialogExample() {\n  const { open, data, onOpenChange, openWith } = useDialogSearchParam<{\n    userId: string;\n  }>(\"edit-profile\");\n\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        onClick={() => openWith({ userId: \"42\" })}\n      >\n        Edit profile\n      </Button>\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogPortal>\n          <DialogOverlay />\n          <DialogContent showCloseButton>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Update your name and contact details. Changes are saved when you\n              submit the form.\n              {data?.userId ? (\n                <>\n                  {\" \"}\n                  Editing user <strong>{data.userId}</strong> (\n                  <code>?dialog=edit-profile&dialog.userId={data.userId}</code>\n                  ).\n                </>\n              ) : null}\n            </DialogDescription>\n            <div style={{ display: \"grid\", gap: 12 }}>\n              <label style={{ display: \"grid\", gap: 6, fontSize: 14 }}>\n                Full name\n                <input\n                  type=\"text\"\n                  defaultValue=\"Alex Johnson\"\n                  style={{\n                    height: 40,\n                    padding: \"0 12px\",\n                    border: \"1px solid var(--clet-border)\",\n                    borderRadius: \"var(--clet-radius-base)\",\n                    background: \"var(--clet-bg)\",\n                    color: \"var(--clet-text)\",\n                  }}\n                />\n              </label>\n              <label style={{ display: \"grid\", gap: 6, fontSize: 14 }}>\n                Email\n                <input\n                  type=\"email\"\n                  defaultValue=\"alex@example.com\"\n                  style={{\n                    height: 40,\n                    padding: \"0 12px\",\n                    border: \"1px solid var(--clet-border)\",\n                    borderRadius: \"var(--clet-radius-base)\",\n                    background: \"var(--clet-bg)\",\n                    color: \"var(--clet-text)\",\n                  }}\n                />\n              </label>\n            </div>\n            <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 8 }}>\n              <Button variant=\"ghost\" onClick={() => onOpenChange(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => onOpenChange(false)}>Save changes</Button>\n            </div>\n          </DialogContent>\n        </DialogPortal>\n      </Dialog>\n    </>\n  );\n}\n"
+    }
+  ],
+  "draggable": [
+    {
+      "file": "draggable-root.example.tsx",
+      "importName": "draggableRootSource",
+      "title": "Draggable Root",
+      "components": [
+        "Draggable"
+      ],
+      "source": "import { Draggable } from \"@rfdtech/components\";\n\nexport function DraggableRootExample() {\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        maxWidth: 360,\n        height: 240,\n        border: \"1px dashed var(--clet-border)\",\n        borderRadius: \"var(--clet-radius-base)\",\n        background: \"var(--clet-surface-subtle)\",\n        overflow: \"hidden\",\n      }}\n    >\n      <Draggable defaultPosition={{ x: 24, y: 24 }} bounds=\"parent\">\n        <div\n          style={{\n            padding: 12,\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n            boxShadow: \"0 1px 2px color-mix(in srgb, var(--clet-text) 8%, transparent)\",\n            maxWidth: 220,\n            cursor: \"grab\",\n          }}\n        >\n          <div style={{ fontSize: 14, fontWeight: 600 }}>Draggable card</div>\n          <div style={{ fontSize: 13, color: \"var(--clet-text-secondary)\" }}>\n            Drag anywhere on the card to reposition within the canvas.\n          </div>\n        </div>\n      </Draggable>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "draggable.example.tsx",
+      "importName": "draggableHandleSource",
+      "title": "Draggable",
+      "components": [
+        "Draggable",
+        "DraggableHandle"
+      ],
+      "source": "import { Draggable, DraggableHandle } from \"@rfdtech/components\";\n\nexport function DraggableHandleExample() {\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        maxWidth: 360,\n        height: 240,\n        border: \"1px dashed var(--clet-border)\",\n        borderRadius: \"var(--clet-radius-base)\",\n        background: \"var(--clet-surface-subtle)\",\n        overflow: \"hidden\",\n      }}\n    >\n      <Draggable defaultPosition={{ x: 24, y: 24 }} bounds=\"parent\">\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            gap: 8,\n            padding: 12,\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n            boxShadow: \"0 1px 2px color-mix(in srgb, var(--clet-text) 8%, transparent)\",\n            maxWidth: 220,\n          }}\n        >\n          <DraggableHandle aria-label=\"Drag card\" />\n          <div>\n            <div style={{ fontSize: 14, fontWeight: 600 }}>Draggable card</div>\n            <div style={{ fontSize: 13, color: \"var(--clet-text-secondary)\" }}>\n              Drag the handle to reposition within the canvas.\n            </div>\n          </div>\n        </div>\n      </Draggable>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "sortable.example.tsx",
+      "importName": "sortableSource",
+      "title": "Sortable",
+      "components": [
+        "Sortable",
+        "SortableHandle",
+        "SortableItem",
+        "SortableList"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  Sortable,\n  SortableHandle,\n  SortableItem,\n  SortableList,\n} from \"@rfdtech/components\";\n\nconst labels: Record<string, string> = {\n  alpha: \"Review submissions\",\n  beta: \"Approve grades\",\n  gamma: \"Publish results\",\n  delta: \"Send notifications\",\n};\n\nexport function SortableExample() {\n  const [items, setItems] = useState([\"alpha\", \"beta\", \"gamma\", \"delta\"]);\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        maxWidth: 360,\n        padding: 12,\n        border: \"1px dashed var(--clet-border)\",\n        borderRadius: \"var(--clet-radius-base)\",\n        background: \"var(--clet-surface-subtle)\",\n      }}\n    >\n      <Sortable items={items} onReorder={(ids) => setItems(ids as string[])}>\n        <SortableList>\n          {items.map((id) => (\n            <SortableItem key={id} id={id}>\n              <SortableHandle aria-label={`Reorder ${labels[id]}`} />\n              <span style={{ fontSize: 14 }}>{labels[id]}</span>\n            </SortableItem>\n          ))}\n        </SortableList>\n      </Sortable>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "dropdown": [
+    {
+      "file": "dropdown-variants.example.tsx",
+      "importName": "dropdownVariantsSource",
+      "title": "Dropdown Variants",
+      "components": [
+        "Dropdown"
+      ],
+      "source": "import { Dropdown } from \"@rfdtech/components\";\nimport { Check } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst options = [\n  { value: \"1\", label: \"Option A\" },\n  { value: \"2\", label: \"Option B\" },\n];\n\nexport function DropdownVariantsExample() {\n  const [value, setValue] = useState<string | null>(\"1\");\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\", width: \"240px\" }}>\n      <Dropdown\n        aria-label=\"Disabled field\"\n        value=\"1\"\n        onValueChange={() => {}}\n        options={options}\n        disabled\n      />\n\n      <Dropdown\n        aria-label=\"Custom rendering\"\n        value={value}\n        onValueChange={setValue}\n        options={options}\n        formatOption={(option, state) => {\n          if (state === \"empty\") return <span>Pick one...</span>;\n          if (state === \"selected\") {\n            return (\n              <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6 }}>\n                <Check size={14} />\n                <span>{option!.label}</span>\n              </span>\n            );\n          }\n          return <span>{option!.label}</span>;\n        }}\n      />\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "dropdown.example.tsx",
+      "importName": "dropdownSource",
+      "title": "Dropdown",
+      "components": [
+        "Dropdown"
+      ],
+      "source": "import { Dropdown } from \"@rfdtech/components\";\n\nconst options = [\n  { value: \"email\", label: \"Email\" },\n  { value: \"name\", label: \"Full name\" },\n  { value: \"year\", label: \"Year\" },\n];\n\nexport function DropdownExample() {\n  return (\n    <div style={{ width: \"240px\" }}>\n      <Dropdown\n        aria-label=\"Field\"\n        value=\"email\"\n        onValueChange={() => {}}\n        options={options}\n        clearable\n      />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "export-button": [
+    {
+      "file": "export-button-formats.example.tsx",
+      "importName": "exportButtonFormatsSource",
+      "title": "Export Button Formats",
+      "components": [
+        "ExportButton",
+        "ExportColumn"
+      ],
+      "source": "import { ExportButton } from \"@rfdtech/components\";\nimport type { ExportColumn } from \"@rfdtech/components\";\n\ninterface Member {\n  name: string;\n  email: string;\n}\n\nconst members: Member[] = [\n  { name: \"Kwame Asante\", email: \"kwame.asante@clet.edu.gh\" },\n  { name: \"Abena Mensah\", email: \"abena.mensah@clet.edu.gh\" },\n];\n\nconst columns: ExportColumn<Member>[] = [\n  { header: \"Name\", accessor: (row) => row.name },\n  { header: \"Email\", accessor: (row) => row.email },\n];\n\nexport function ExportButtonFormatsExample() {\n  return (\n    <ExportButton\n      data={members}\n      columns={columns}\n      title=\"Members\"\n      formats={[\"csv\"]}\n      label=\"Export CSV\"\n      variant=\"secondary\"\n    />\n  );\n}\n"
+    },
+    {
+      "file": "export-button.example.tsx",
+      "importName": "exportButtonSource",
+      "title": "Export Button",
+      "components": [
+        "ExportButton",
+        "ExportColumn"
+      ],
+      "source": "import { ExportButton } from \"@rfdtech/components\";\nimport type { ExportColumn } from \"@rfdtech/components\";\n\ninterface Member {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n  status: string;\n  joined: string;\n}\n\nconst members: Member[] = [\n  { id: 1, name: \"Kwame Asante\", email: \"kwame.asante@clet.edu.gh\", role: \"Admin\", status: \"Active\", joined: \"2024-01-15\" },\n  { id: 2, name: \"Abena Mensah\", email: \"abena.mensah@clet.edu.gh\", role: \"Editor\", status: \"Active\", joined: \"2024-02-03\" },\n  { id: 3, name: \"Kofi Owusu\", email: \"kofi.owusu@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\", joined: \"2024-03-08\" },\n];\n\nconst columns: ExportColumn<Member>[] = [\n  { header: \"Name\", accessor: (row) => row.name },\n  { header: \"Email\", accessor: (row) => row.email },\n  { header: \"Role\", accessor: (row) => row.role },\n  { header: \"Status\", accessor: (row) => row.status },\n  { header: \"Joined\", accessor: (row) => row.joined },\n];\n\nexport function ExportButtonExample() {\n  return (\n    <ExportButton\n      data={members}\n      columns={columns}\n      title=\"Members\"\n      filtersDescription=\"Active only\"\n    />\n  );\n}\n"
+    }
+  ],
+  "form-field": [
+    {
+      "file": "form.example.tsx",
+      "importName": "formSource",
+      "title": "Form",
+      "components": [
+        "Button",
+        "Field",
+        "FieldControl",
+        "FieldDescription",
+        "FieldError",
+        "FieldLabel",
+        "Form",
+        "FormField",
+        "Input",
+        "Textarea"
+      ],
+      "source": "import { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport {\n  Button,\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  Form,\n  FormField,\n  Input,\n  Textarea,\n} from \"@rfdtech/components\";\n\nconst contactFormSchema = z.object({\n  email: z\n    .string()\n    .min(1, \"Email is required\")\n    .email(\"Enter a valid email address\"),\n  message: z.string().min(10, \"Message must be at least 10 characters\"),\n});\n\ntype ContactFormValues = z.infer<typeof contactFormSchema>;\n\nfunction ContactFormFields() {\n  const form = useForm<ContactFormValues>({\n    resolver: zodResolver(contactFormSchema),\n    defaultValues: {\n      email: \"\",\n      message: \"\",\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(() => {})}\n        style={{ display: \"grid\", gap: 16, maxWidth: 420 }}\n      >\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field, fieldState }) => (\n            <Field invalid={!!fieldState.error}>\n              <FieldLabel>Email</FieldLabel>\n              <FieldControl>\n                <Input type=\"email\" placeholder=\"you@example.com\" {...field} />\n              </FieldControl>\n              <FieldDescription>We will never share your email.</FieldDescription>\n              <FieldError>{fieldState.error?.message}</FieldError>\n            </Field>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"message\"\n          render={({ field, fieldState }) => (\n            <Field invalid={!!fieldState.error}>\n              <FieldLabel>Message</FieldLabel>\n              <FieldControl>\n                <Textarea placeholder=\"How can we help?\" rows={4} {...field} />\n              </FieldControl>\n              <FieldError>{fieldState.error?.message}</FieldError>\n            </Field>\n          )}\n        />\n\n        <Button type=\"submit\" variant=\"primary\">\n          Send message\n        </Button>\n      </form>\n    </Form>\n  );\n}\n\nexport function FormExample() {\n  return <ContactFormFields />;\n}\n"
+    }
+  ],
+  "form": [
+    {
+      "file": "field.example.tsx",
+      "importName": "fieldSource",
+      "title": "Field",
+      "components": [
+        "Field",
+        "FieldControl",
+        "FieldDescription",
+        "FieldLabel",
+        "Input",
+        "Textarea"
+      ],
+      "source": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n  Input,\n  Textarea,\n} from \"@rfdtech/components\";\n\nexport function FieldExample() {\n  return (\n    <div style={{ display: \"grid\", gap: 16, maxWidth: 420 }}>\n      <Field>\n        <FieldLabel>Email</FieldLabel>\n        <FieldControl>\n          <Input type=\"email\" placeholder=\"you@example.com\" />\n        </FieldControl>\n        <FieldDescription>We will never share your email.</FieldDescription>\n      </Field>\n\n      <Field>\n        <FieldLabel>Message</FieldLabel>\n        <FieldControl>\n          <Textarea rows={4} placeholder=\"How can we help?\" />\n        </FieldControl>\n      </Field>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "form-modal.example.tsx",
+      "importName": "formModalSource",
+      "title": "Form Modal",
+      "components": [
+        "Button",
+        "Dropdown",
+        "Field",
+        "FieldControl",
+        "FieldError",
+        "FieldLabel",
+        "Form",
+        "FormField",
+        "Input",
+        "Modal",
+        "ModalBody",
+        "ModalContent",
+        "ModalFooter",
+        "ModalHeader",
+        "ModalOverlay",
+        "ModalPortal",
+        "ModalTitle"
+      ],
+      "source": "import { useEffect, useState } from \"react\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport {\n  Button,\n  Dropdown,\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n  Form,\n  FormField,\n  Input,\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalOverlay,\n  ModalPortal,\n  ModalTitle,\n} from \"@rfdtech/components\";\n\nconst createUserSchema = z.object({\n  name: z.string().min(1, \"Name is required\"),\n  email: z.string().min(1, \"Email is required\").email(\"Enter a valid email address\"),\n  roleId: z.string().min(1, \"Select a role\"),\n});\n\ntype CreateUserValues = z.infer<typeof createUserSchema>;\n\ninterface RoleOption {\n  value: string;\n  label: string;\n}\n\n/** Simulates fetching a roles list from the server. */\nfunction loadRoles(): Promise<RoleOption[]> {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve([\n        { value: \"admin\", label: \"Admin\" },\n        { value: \"editor\", label: \"Editor\" },\n        { value: \"viewer\", label: \"Viewer\" },\n      ]);\n    }, 900);\n  });\n}\n\n/** Simulates an async create-user API call. Rejects for a \"taken\" email so\n * the failure path (root-level form error) is exercised too. */\nfunction createUser(values: CreateUserValues): Promise<void> {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      if (values.email === \"taken@example.com\") {\n        reject(new Error(\"A user with this email already exists.\"));\n        return;\n      }\n      resolve();\n    }, 1200);\n  });\n}\n\nfunction CreateUserForm({ onDone }: { onDone: () => void }) {\n  const [roles, setRoles] = useState<RoleOption[] | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadRoles().then((options) => {\n      if (!cancelled) setRoles(options);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  const form = useForm<CreateUserValues>({\n    resolver: zodResolver(createUserSchema),\n    defaultValues: { name: \"\", email: \"\", roleId: \"\" },\n  });\n\n  const onSubmit = async (values: CreateUserValues) => {\n    try {\n      await createUser(values);\n      onDone();\n    } catch (error) {\n      form.setError(\"root\", {\n        message: error instanceof Error ? error.message : \"Something went wrong. Please try again.\",\n      });\n    }\n  };\n\n  const rolesLoading = roles === null;\n\n  return (\n    <Form {...form}>\n      <ModalBody style={{ display: \"grid\", gap: 16 }}>\n        {form.formState.errors.root ? (\n          <div\n            role=\"alert\"\n            style={{\n              padding: \"10px 12px\",\n              borderRadius: \"var(--clet-radius-base)\",\n              background: \"var(--clet-error-bg, #fef2f2)\",\n              color: \"var(--clet-error-text, #b91c1c)\",\n              fontSize: 14,\n            }}\n          >\n            {form.formState.errors.root.message}\n          </div>\n        ) : null}\n\n        <FormField\n          control={form.control}\n          name=\"name\"\n          render={({ field, fieldState }) => (\n            <Field invalid={!!fieldState.error}>\n              <FieldLabel>Full name</FieldLabel>\n              <FieldControl>\n                <Input placeholder=\"Ama Serwaa\" {...field} />\n              </FieldControl>\n              <FieldError>{fieldState.error?.message}</FieldError>\n            </Field>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field, fieldState }) => (\n            <Field invalid={!!fieldState.error}>\n              <FieldLabel>Email</FieldLabel>\n              <FieldControl>\n                <Input type=\"email\" placeholder=\"ama@clet.edu.gh\" {...field} />\n              </FieldControl>\n              <FieldError>{fieldState.error?.message}</FieldError>\n            </Field>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"roleId\"\n          render={({ field, fieldState }) => (\n            <Field invalid={!!fieldState.error}>\n              <FieldLabel>Role</FieldLabel>\n              <FieldControl>\n                <Dropdown\n                  aria-label=\"Role\"\n                  value={field.value || null}\n                  onValueChange={(value) => field.onChange(value ?? \"\")}\n                  options={roles ?? []}\n                  disabled={rolesLoading}\n                  placeholder={rolesLoading ? \"Loading roles…\" : \"Select a role\"}\n                  invalid={!!fieldState.error}\n                />\n              </FieldControl>\n              <FieldError>{fieldState.error?.message}</FieldError>\n            </Field>\n          )}\n        />\n      </ModalBody>\n\n      <ModalFooter>\n        <Button variant=\"ghost\" type=\"button\" onClick={onDone}>\n          Cancel\n        </Button>\n        <Button\n          type=\"button\"\n          loading={form.formState.isSubmitting}\n          loadingLabel=\"Creating…\"\n          onClick={() => form.handleSubmit(onSubmit)()}\n        >\n          Create user\n        </Button>\n      </ModalFooter>\n    </Form>\n  );\n}\n\nexport function FormModalExample() {\n  const [open, setOpen] = useState(true);\n  // Remounts the form (and its async role-loading effect) each time the\n  // modal is reopened, mirroring how a real \"create\" modal starts fresh.\n  const [formKey, setFormKey] = useState(0);\n\n  const openModal = () => {\n    setFormKey((k) => k + 1);\n    setOpen(true);\n  };\n\n  return (\n    <>\n      <Button variant=\"secondary\" onClick={openModal}>\n        Add user\n      </Button>\n      <Modal open={open} onOpenChange={setOpen}>\n        <ModalPortal>\n          <ModalOverlay />\n          <ModalContent showCloseButton size=\"md\">\n            <ModalHeader>\n              <ModalTitle>Add user</ModalTitle>\n            </ModalHeader>\n            <CreateUserForm key={formKey} onDone={() => setOpen(false)} />\n          </ModalContent>\n        </ModalPortal>\n      </Modal>\n    </>\n  );\n}\n"
+    }
+  ],
+  "getting-started": [],
+  "hooks": [
+    {
+      "file": "dialog.example.tsx",
+      "importName": "dialogSource",
+      "title": "Dialog",
+      "components": [
+        "Button",
+        "Dialog",
+        "DialogContent",
+        "DialogDescription",
+        "DialogOverlay",
+        "DialogPortal",
+        "DialogTitle",
+        "useDialogSearchParam"
+      ],
+      "source": "import {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  useDialogSearchParam,\n} from \"@rfdtech/components\";\n\nexport function DialogExample() {\n  const { open, data, onOpenChange, openWith } = useDialogSearchParam<{\n    userId: string;\n  }>(\"edit-profile\");\n\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        onClick={() => openWith({ userId: \"42\" })}\n      >\n        Edit profile\n      </Button>\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogPortal>\n          <DialogOverlay />\n          <DialogContent showCloseButton>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Update your name and contact details. Changes are saved when you\n              submit the form.\n              {data?.userId ? (\n                <>\n                  {\" \"}\n                  Editing user <strong>{data.userId}</strong> (\n                  <code>?dialog=edit-profile&dialog.userId={data.userId}</code>\n                  ).\n                </>\n              ) : null}\n            </DialogDescription>\n            <div style={{ display: \"grid\", gap: 12 }}>\n              <label style={{ display: \"grid\", gap: 6, fontSize: 14 }}>\n                Full name\n                <input\n                  type=\"text\"\n                  defaultValue=\"Alex Johnson\"\n                  style={{\n                    height: 40,\n                    padding: \"0 12px\",\n                    border: \"1px solid var(--clet-border)\",\n                    borderRadius: \"var(--clet-radius-base)\",\n                    background: \"var(--clet-bg)\",\n                    color: \"var(--clet-text)\",\n                  }}\n                />\n              </label>\n              <label style={{ display: \"grid\", gap: 6, fontSize: 14 }}>\n                Email\n                <input\n                  type=\"email\"\n                  defaultValue=\"alex@example.com\"\n                  style={{\n                    height: 40,\n                    padding: \"0 12px\",\n                    border: \"1px solid var(--clet-border)\",\n                    borderRadius: \"var(--clet-radius-base)\",\n                    background: \"var(--clet-bg)\",\n                    color: \"var(--clet-text)\",\n                  }}\n                />\n              </label>\n            </div>\n            <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 8 }}>\n              <Button variant=\"ghost\" onClick={() => onOpenChange(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => onOpenChange(false)}>Save changes</Button>\n            </div>\n          </DialogContent>\n        </DialogPortal>\n      </Dialog>\n    </>\n  );\n}\n"
+    }
+  ],
+  "launchpad": [
+    {
+      "file": "launchpad-loading.example.tsx",
+      "importName": "launchpadLoadingSource",
+      "title": "Launchpad Loading",
+      "components": [
+        "Launchpad",
+        "RoleSelect"
+      ],
+      "source": "import { Launchpad, RoleSelect } from \"@rfdtech/components\";\n\nexport function LaunchpadLoadingExample() {\n  return (\n    <Launchpad apps={[]} loading>\n      <RoleSelect\n        title=\"View as\"\n        roles={[{ id: \"admin\", name: \"Admin\" }]}\n        selectedRole=\"admin\"\n        onClickRole={() => {}}\n      />\n    </Launchpad>\n  );\n}\n"
+    },
+    {
+      "file": "launchpad.example.tsx",
+      "importName": "launchpadSource",
+      "title": "Launchpad",
+      "components": [
+        "Launchpad",
+        "LaunchpadIconTile",
+        "RoleSelect"
+      ],
+      "source": "import { useState } from \"react\";\nimport { Launchpad, RoleSelect, LaunchpadIconTile } from \"@rfdtech/components\";\nimport {\n  Shield,\n  Eye,\n  ScrollText,\n  BarChart3,\n  BadgeCheck,\n  Building2,\n  ShieldCheck,\n  Truck,\n  Megaphone,\n  CalendarDays,\n  Boxes,\n  Users,\n  Scale,\n  Briefcase,\n  GraduationCap,\n  FolderLock,\n} from \"lucide-react\";\n\nconst apps = [\n  {\n    id: \"analytics\",\n    name: \"Analytics\",\n    icon: (\n      <LaunchpadIconTile name=\"Analytics\">\n        <BarChart3 size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"accreditation\",\n    name: \"Accreditation\",\n    icon: (\n      <LaunchpadIconTile name=\"Accreditation\">\n        <BadgeCheck size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"facilities\",\n    name: \"Facilities\",\n    icon: (\n      <LaunchpadIconTile name=\"Facilities\">\n        <Building2 size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"compliance\",\n    name: \"Compliance\",\n    icon: (\n      <LaunchpadIconTile name=\"Compliance\">\n        <ShieldCheck size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"fleet-management\",\n    name: \"Fleet Management\",\n    icon: (\n      <LaunchpadIconTile name=\"Fleet Management\">\n        <Truck size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"outreach\",\n    name: \"Outreach\",\n    icon: (\n      <LaunchpadIconTile name=\"Outreach\">\n        <Megaphone size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"scheduling\",\n    name: \"Scheduling\",\n    icon: (\n      <LaunchpadIconTile name=\"Scheduling\">\n        <CalendarDays size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"asset-registry\",\n    name: \"Asset Registry\",\n    icon: (\n      <LaunchpadIconTile name=\"Asset Registry\">\n        <Boxes size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"hr-suite\",\n    name: \"HR Suite\",\n    icon: (\n      <LaunchpadIconTile name=\"HR Suite\">\n        <Users size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"legal-research\",\n    name: \"Legal Research\",\n    icon: (\n      <LaunchpadIconTile name=\"Legal Research\">\n        <Scale size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"case-management\",\n    name: \"Case Management\",\n    icon: (\n      <LaunchpadIconTile name=\"Case Management\">\n        <Briefcase size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"training-academy\",\n    name: \"Training Academy\",\n    icon: (\n      <LaunchpadIconTile name=\"Training Academy\">\n        <GraduationCap size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n  {\n    id: \"document-vault\",\n    name: \"Document Vault\",\n    icon: (\n      <LaunchpadIconTile name=\"Document Vault\">\n        <FolderLock size={26} strokeWidth={1.75} />\n      </LaunchpadIconTile>\n    ),\n  },\n];\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nexport function LaunchpadExample() {\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  return (\n    <Launchpad apps={apps} onAppSelect={(app) => console.log(\"Selected:\", app.name)}>\n      <RoleSelect\n        title=\"View as\"\n        roles={roles}\n        selectedRole={selectedRole}\n        onClickRole={(role) => setSelectedRole(role.id)}\n      />\n    </Launchpad>\n  );\n}\n"
+    }
+  ],
+  "metric-card": [
+    {
+      "file": "metric-card-loading.example.tsx",
+      "importName": "metricCardLoadingSource",
+      "title": "Metric Card Loading",
+      "components": [
+        "MetricCard"
+      ],
+      "source": "import { useState } from \"react\";\nimport { MetricCard } from \"@rfdtech/components\";\nimport { Users, UserCheck, Activity } from \"lucide-react\";\n\nexport function MetricCardLoadingExample() {\n  const [loading, setLoading] = useState(true);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <button\n        type=\"button\"\n        className=\"clet-profile-menu__item\"\n        style={{ alignSelf: \"flex-start\" }}\n        onClick={() => {\n          setLoading(true);\n          setTimeout(() => setLoading(false), 1500);\n        }}\n      >\n        <span>Simulate loading</span>\n      </button>\n\n      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16 }}>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            loading={loading}\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            icon={<Users size={16} strokeWidth={1.5} />}\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"+12.5%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            loading={loading}\n            label=\"Active users\"\n            value=\"2,847\"\n            icon={<UserCheck size={16} strokeWidth={1.5} />}\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"-3.2%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            loading={loading}\n            label=\"Avg response\"\n            value=\"1.2s\"\n            icon={<Activity size={16} strokeWidth={1.5} />}\n            description=\"Average API response time\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "metric-card.example.tsx",
+      "importName": "metricCardSource",
+      "title": "Metric Card",
+      "components": [
+        "MetricCard"
+      ],
+      "source": "import { MetricCard } from \"@rfdtech/components\";\n\nexport function MetricCardExample() {\n  return (\n    <div\n      style={{\n        background: \"var(--clet-surface-subtle)\",\n        padding: 20,\n        borderRadius: \"var(--clet-radius-xl)\",\n        width: \"100%\",\n      }}\n    >\n      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16 }}>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"+12.5%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"-3.2%\"\n            animate\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            animate\n          />\n        </div>\n      </div>\n\n      <div\n        style={{ display: \"flex\", flexWrap: \"wrap\", gap: 16, marginTop: 16 }}\n      >\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Revenue\"\n            value=\"$128.4k\"\n            description=\"Total revenue this quarter\"\n            trend=\"up\"\n            trendValue=\"12.5%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Active users\"\n            value=\"2,847\"\n            description=\"Current active users\"\n            trend=\"down\"\n            trendValue=\"3.2%\"\n          />\n        </div>\n        <div style={{ minWidth: 200, flex: 1 }}>\n          <MetricCard\n            variant=\"outline\"\n            label=\"Avg response\"\n            value=\"1.2s\"\n            description=\"Average API response time\"\n            trend=\"neutral\"\n            trendValue=\"0.0%\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "migration-v2": [],
+  "modal": [
+    {
+      "file": "modal.example.tsx",
+      "importName": "modalSource",
+      "title": "Modal",
+      "components": [
+        "Button",
+        "Modal",
+        "ModalBody",
+        "ModalContent",
+        "ModalFooter",
+        "ModalHeader",
+        "ModalOverlay",
+        "ModalPortal",
+        "ModalTitle",
+        "useModalSearchParam"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  Button,\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalOverlay,\n  ModalPortal,\n  ModalTitle,\n  useModalSearchParam,\n} from \"@rfdtech/components\";\n\nconst reviewItems = [\n  \"Update homepage hero copy\",\n  \"Publish Q2 enrollment announcement\",\n  \"Archive outdated policy PDFs\",\n  \"Notify department heads by email\",\n];\n\nexport function ModalExample() {\n  const { open, onOpenChange, openWith } = useModalSearchParam(\"review-changes\");\n  const [dirty, setDirty] = useState(false);\n\n  return (\n    <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n      <Button variant=\"secondary\" onClick={() => { setDirty(false); openWith(); }}>\n        Review changes\n      </Button>\n      <Button variant=\"secondary\" onClick={() => { setDirty(true); openWith(); }}>\n        With preventClose\n      </Button>\n      <Modal open={open} onOpenChange={onOpenChange}>\n        <ModalPortal>\n          <ModalOverlay />\n          <ModalContent\n            showCloseButton\n            size=\"lg\"\n            preventClose={dirty}\n          >\n            <ModalHeader>\n              <ModalTitle>Review changes</ModalTitle>\n            </ModalHeader>\n            <ModalBody>\n              <p style={{ margin: \"0 0 12px\", fontSize: 14, color: \"var(--clet-text-secondary)\" }}>\n                Confirm the items below before publishing.\n                {dirty && \" Close prevention is active — try clicking the X or overlay.\"}\n              </p>\n              <ul\n                style={{\n                  margin: 0,\n                  paddingLeft: 20,\n                  display: \"grid\",\n                  gap: 10,\n                  fontSize: 14,\n                  lineHeight: 1.5,\n                }}\n              >\n                {reviewItems.map((item) => (\n                  <li key={item}>{item}</li>\n                ))}\n              </ul>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"ghost\" onClick={() => onOpenChange(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => onOpenChange(false)}>Publish</Button>\n            </ModalFooter>\n          </ModalContent>\n        </ModalPortal>\n      </Modal>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "network-operator": [
+    {
+      "file": "network-operator.example.tsx",
+      "importName": "networkOperatorSource",
+      "title": "Network Operator",
+      "components": [
+        "NetworkOperator"
+      ],
+      "source": "import { NetworkOperator } from \"@rfdtech/components\";\n\nexport function NetworkOperatorExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 300 }}>\n      <NetworkOperator />\n      <NetworkOperator invalid />\n      <NetworkOperator disabled />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "notice": [
+    {
+      "file": "notice-inline.example.tsx",
+      "importName": "noticeInlineSource",
+      "title": "Notice Inline",
+      "components": [
+        "Notice",
+        "NoticeVariant"
+      ],
+      "source": "import { Notice } from \"@rfdtech/components\";\nimport type { NoticeVariant } from \"@rfdtech/components\";\n\nconst dot = (\n  <span\n    style={{\n      display: \"inline-block\",\n      width: 8,\n      height: 8,\n      marginTop: 6,\n      borderRadius: \"50%\",\n      background: \"currentcolor\",\n    }}\n  />\n);\n\nconst ROWS: { variant: NoticeVariant; message: string }[] = [\n  {\n    variant: \"info\",\n    message: \"This field is optional if you are applying under the equity provision.\",\n  },\n  { variant: \"success\", message: \"Document uploaded and virus scan passed.\" },\n  { variant: \"warning\", message: \"This section will be locked once you continue.\" },\n  {\n    variant: \"error\",\n    message: \"We need a valid email address. The one entered does not include an @.\",\n  },\n];\n\nexport function NoticeInlineExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      {ROWS.map((row) => (\n        <Notice key={row.variant} variant={row.variant} icon={dot}>\n          {row.message}\n        </Notice>\n      ))}\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "notice-variants.example.tsx",
+      "importName": "noticeVariantsSource",
+      "title": "Notice Variants",
+      "components": [
+        "Notice"
+      ],
+      "source": "import { Notice } from \"@rfdtech/components\";\n\nexport function NoticeVariantsExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <Notice\n        variant=\"warning\"\n        leftBorder\n        dashed\n        title=\"Your scope for this composer\"\n      >\n        <ul>\n          <li>\n            Templates: Admissions Directorate only · Audience: 4 pre-approved\n            groups · Classification: Standard only · Channels: Email, Portal.\n          </li>\n          <li>\n            Only what&apos;s listed above appears below — there&apos;s\n            nothing hidden or disabled to request access to. Contact CCP\n            Comms Admin if you need a new template or group.\n          </li>\n        </ul>\n      </Notice>\n\n      <Notice\n        variant=\"success\"\n        icon={\n          <span\n            style={{\n              display: \"inline-block\",\n              width: 8,\n              height: 8,\n              marginTop: 6,\n              borderRadius: \"50%\",\n              background: \"currentcolor\",\n            }}\n          />\n        }\n      >\n        This will send directly. Standard classification within your assigned\n        scope meets direct-send policy criteria — no approval routing\n        required (SRS-S074-C-01).\n      </Notice>\n\n      <Notice variant=\"info\" title=\"Info\">\n        Neutral, non-blocking information for the current context.\n      </Notice>\n\n      <Notice variant=\"error\" title=\"Something went wrong\">\n        The request could not be completed. Try again in a moment.\n      </Notice>\n\n      <Notice color=\"#7c3aed\" title=\"Custom accent color\">\n        Any CSS color can be passed via the `color` prop when none of the\n        built-in variants fit.\n      </Notice>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "otp-input": [
+    {
+      "file": "otp-input.example.tsx",
+      "importName": "otpInputSource",
+      "title": "Otp Input",
+      "components": [
+        "OtpInput"
+      ],
+      "source": "import { OtpInput } from \"@rfdtech/components\";\n\nexport function OtpInputExample() {\n  return (\n    <div>\n      <OtpInput />\n      <p style={{ margin: \"8px 0 0\", fontSize: 13, color: \"var(--clet-text-muted)\" }}>\n        Enter 6-digit code\n      </p>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "otp-verify-dialog.example.tsx",
+      "importName": "otpVerifyDialogSource",
+      "title": "Otp Verify Dialog",
+      "components": [
+        "Button",
+        "Dialog",
+        "DialogContent",
+        "DialogDescription",
+        "DialogOverlay",
+        "DialogPortal",
+        "DialogTitle",
+        "OtpInput"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  OtpInput,\n} from \"@rfdtech/components\";\n\n// Mock \"correct\" code — stands in for a real server-side verification call.\nconst MOCK_VALID_CODE = \"123456\";\n\ntype VerifyStatus = \"idle\" | \"verifying\" | \"error\" | \"success\";\n\nexport function OtpVerifyDialogExample() {\n  const [open, setOpen] = useState(false);\n  const [code, setCode] = useState(\"\");\n  const [status, setStatus] = useState<VerifyStatus>(\"idle\");\n\n  const reset = () => {\n    setCode(\"\");\n    setStatus(\"idle\");\n  };\n\n  const verify = (value: string) => {\n    if (value.length < 6 || status === \"verifying\") return;\n    setStatus(\"verifying\");\n    // Simulate an async verification request.\n    setTimeout(() => {\n      if (value === MOCK_VALID_CODE) {\n        setStatus(\"success\");\n        setTimeout(() => {\n          setOpen(false);\n          reset();\n        }, 900);\n      } else {\n        setStatus(\"error\");\n      }\n    }, 1200);\n  };\n\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          reset();\n          setOpen(true);\n        }}\n      >\n        Verify identity\n      </Button>\n\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          setOpen(next);\n          if (!next) reset();\n        }}\n      >\n        <DialogPortal>\n          <DialogOverlay />\n          <DialogContent showCloseButton>\n            <DialogTitle>Two-factor verification</DialogTitle>\n            <DialogDescription>\n              Enter the 6-digit code sent to your registered device to confirm\n              this action. (Hint: the mock code is <code>123456</code>.)\n            </DialogDescription>\n\n            <div style={{ display: \"grid\", gap: 8 }}>\n              <OtpInput\n                length={6}\n                value={code}\n                disabled={status === \"verifying\" || status === \"success\"}\n                invalid={status === \"error\"}\n                onChange={(value) => {\n                  setCode(value);\n                  if (status === \"error\") setStatus(\"idle\");\n                }}\n                onComplete={(value) => verify(value)}\n              />\n              {status === \"error\" && (\n                <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-error-text)\" }}>\n                  Incorrect code. Please try again.\n                </p>\n              )}\n              {status === \"success\" && (\n                <p style={{ margin: 0, fontSize: 13, color: \"var(--clet-success)\" }}>\n                  Verified successfully.\n                </p>\n              )}\n            </div>\n\n            <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 8 }}>\n              <Button\n                variant=\"ghost\"\n                onClick={() => setOpen(false)}\n                disabled={status === \"verifying\"}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => verify(code)}\n                disabled={code.length < 6 || status === \"verifying\" || status === \"success\"}\n                loading={status === \"verifying\"}\n                loadingLabel=\"Verifying...\"\n              >\n                Verify\n              </Button>\n            </div>\n          </DialogContent>\n        </DialogPortal>\n      </Dialog>\n    </>\n  );\n}\n"
+    }
+  ],
+  "phone-number-input": [
+    {
+      "file": "phone-number-input-field.example.tsx",
+      "importName": "phoneNumberInputFieldSource",
+      "title": "Phone Number Input Field",
+      "components": [
+        "Field",
+        "FieldControl",
+        "FieldDescription",
+        "FieldError",
+        "FieldLabel",
+        "PhoneNumberInput",
+        "Tooltip"
+      ],
+      "source": "import { Info } from \"lucide-react\";\nimport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  PhoneNumberInput,\n  Tooltip,\n} from \"@rfdtech/components\";\n\nfunction OptionalLabel() {\n  return (\n    <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6 }}>\n      Phone Number <span style={{ fontWeight: 400 }}>(Optional)</span>\n      <Tooltip content=\"We'll only use this to reach you about your application.\">\n        <Info size={14} style={{ color: \"var(--clet-text-secondary)\" }} />\n      </Tooltip>\n    </span>\n  );\n}\n\nfunction Hint({ children }: { children: string }) {\n  return (\n    <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6 }}>\n      <Info size={14} style={{ flexShrink: 0 }} />\n      {children}\n    </span>\n  );\n}\n\nexport function PhoneNumberInputFieldExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"20px\", maxWidth: 360 }}>\n      <Field>\n        <FieldLabel>\n          <OptionalLabel />\n        </FieldLabel>\n        <FieldControl>\n          <PhoneNumberInput />\n        </FieldControl>\n        <FieldDescription>\n          <Hint>This is a hint text to help user.</Hint>\n        </FieldDescription>\n      </Field>\n\n      <Field>\n        <FieldLabel>\n          <OptionalLabel />\n        </FieldLabel>\n        <FieldControl>\n          <PhoneNumberInput value=\"+18020000000\" onChange={() => {}} />\n        </FieldControl>\n        <FieldDescription>\n          <Hint>This is a hint text to help user.</Hint>\n        </FieldDescription>\n      </Field>\n\n      <Field invalid>\n        <FieldLabel>\n          <OptionalLabel />\n        </FieldLabel>\n        <FieldControl>\n          <PhoneNumberInput invalid value=\"+18020000000\" onChange={() => {}} />\n        </FieldControl>\n        <FieldError>\n          <Hint>This is a hint text to help user.</Hint>\n        </FieldError>\n      </Field>\n\n      <Field>\n        <FieldLabel>\n          <OptionalLabel />\n        </FieldLabel>\n        <FieldControl>\n          <PhoneNumberInput disabled />\n        </FieldControl>\n        <FieldDescription>\n          <Hint>This is a hint text to help user.</Hint>\n        </FieldDescription>\n      </Field>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "phone-number-input-form.example.tsx",
+      "importName": "phoneNumberInputFormSource",
+      "title": "Phone Number Input Form",
+      "components": [
+        "Button",
+        "Dialog",
+        "DialogContent",
+        "DialogDescription",
+        "DialogTitle",
+        "Field",
+        "FieldControl",
+        "FieldError",
+        "FieldLabel",
+        "Form",
+        "FormField",
+        "PhoneNumberInput"
+      ],
+      "source": "import { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n  Form,\n  FormField,\n  PhoneNumberInput,\n} from \"@rfdtech/components\";\n\nconst phoneSchema = z.object({\n  phone: z\n    .string()\n    .min(1, \"Phone number is required\")\n    .regex(/^\\+\\d{7,15}$/, \"Please enter a valid phone number\"),\n});\n\ntype PhoneFormValues = z.infer<typeof phoneSchema>;\n\nexport function PhoneNumberInputFormExample() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [result, setResult] = useState<{\n    success: boolean;\n    phone: string;\n  } | null>(null);\n\n  const form = useForm<PhoneFormValues>({\n    resolver: zodResolver(phoneSchema),\n    defaultValues: { phone: \"\" },\n  });\n\n  function onSubmit(data: PhoneFormValues) {\n    setResult({ success: true, phone: data.phone });\n    setDialogOpen(true);\n  }\n\n  function onInvalid() {\n    setResult({ success: false, phone: \"\" });\n    setDialogOpen(true);\n  }\n\n  return (\n    <>\n      <Form {...form}>\n        <form\n          onSubmit={form.handleSubmit(onSubmit, onInvalid)}\n          style={{ display: \"grid\", gap: 16, maxWidth: 360 }}\n        >\n          <FormField\n            control={form.control}\n            name=\"phone\"\n            render={({ field, fieldState }) => (\n              <Field invalid={!!fieldState.error}>\n                <FieldLabel>Phone number</FieldLabel>\n                <FieldControl>\n                  <PhoneNumberInput\n                    value={field.value}\n                    onChange={field.onChange}\n                    name={field.name}\n                    ref={field.ref}\n                  />\n                </FieldControl>\n                <FieldError>{fieldState.error?.message}</FieldError>\n              </Field>\n            )}\n          />\n          <Button type=\"submit\" variant=\"primary\">\n            Validate phone\n          </Button>\n        </form>\n      </Form>\n\n      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <DialogContent showCloseButton>\n          <DialogTitle>\n            {result?.success ? \"Valid phone number\" : \"Validation failed\"}\n          </DialogTitle>\n          <DialogDescription>\n            {result?.success\n              ? `The phone number ${result.phone} is valid.`\n              : \"Please fix the validation errors and try again.\"}\n          </DialogDescription>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"
+    },
+    {
+      "file": "phone-number-input.example.tsx",
+      "importName": "phoneNumberInputSource",
+      "title": "Phone Number Input",
+      "components": [
+        "PhoneNumberInput"
+      ],
+      "source": "import { PhoneNumberInput } from \"@rfdtech/components\";\n\nexport function PhoneNumberInputExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 360 }}>\n      <div>\n        <p style={{ margin: \"0 0 8px\", fontSize: 14, color: \"var(--clet-text-secondary)\" }}>Default</p>\n        <PhoneNumberInput onChange={(v) => console.log(v)} />\n      </div>\n      <div>\n        <p style={{ margin: \"0 0 8px\", fontSize: 14, color: \"var(--clet-text-secondary)\" }}>Invalid</p>\n        <PhoneNumberInput invalid />\n      </div>\n      <div>\n        <p style={{ margin: \"0 0 8px\", fontSize: 14, color: \"var(--clet-text-secondary)\" }}>Disabled</p>\n        <PhoneNumberInput disabled />\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "popover": [
+    {
+      "file": "popover.example.tsx",
+      "importName": "popoverSource",
+      "title": "Popover",
+      "components": [
+        "Button",
+        "Popover",
+        "PopoverClose",
+        "PopoverContent",
+        "PopoverTrigger"
+      ],
+      "source": "import {\n  Button,\n  Popover,\n  PopoverClose,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@rfdtech/components\";\nimport { Copy, Pencil, Trash2 } from \"lucide-react\";\n\nconst menuItems = [\n  { label: \"Edit\", icon: Pencil, destructive: false },\n  { label: \"Duplicate\", icon: Copy, destructive: false },\n  { label: \"Delete\", icon: Trash2, destructive: true },\n] as const;\n\nexport function PopoverExample() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"secondary\">Actions</Button>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"bottom\"\n        align=\"end\"\n        sideOffset={4}\n        className=\"clet-popover--menu\"\n      >\n        <div className=\"clet-popover__menu\" role=\"menu\">\n          {menuItems.map(({ label, icon: Icon, destructive }) => (\n            <PopoverClose asChild key={label}>\n              <button\n                type=\"button\"\n                className={[\n                  \"clet-popover__menu-item\",\n                  destructive ? \"clet-popover__menu-item--destructive\" : \"\",\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                role=\"menuitem\"\n              >\n                <Icon size={16} strokeWidth={2} aria-hidden />\n                {label}\n              </button>\n            </PopoverClose>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
+    }
+  ],
+  "popup": [
+    {
+      "file": "popup-variants.example.tsx",
+      "importName": "popupVariantsSource",
+      "title": "Popup Variants",
+      "components": [
+        "Button",
+        "Input",
+        "Popup",
+        "PopupBody",
+        "PopupClose",
+        "PopupContent",
+        "PopupDescription",
+        "PopupFooter",
+        "PopupHeader",
+        "PopupTitle",
+        "PopupTrigger"
+      ],
+      "source": "import {\n  Button,\n  Input,\n  Popup,\n  PopupBody,\n  PopupClose,\n  PopupContent,\n  PopupDescription,\n  PopupFooter,\n  PopupHeader,\n  PopupTitle,\n  PopupTrigger,\n} from \"@rfdtech/components\";\n\nconst description =\n  \"Keep your messages short, but make sure they cover everything you need to say.\";\n\nexport function PopupVariantsExample() {\n  return (\n    <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: \"12px\" }}>\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">Title + description, row</Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupHeader>\n            <PopupTitle>Title</PopupTitle>\n            <PopupDescription>{description}</PopupDescription>\n          </PopupHeader>\n          <PopupFooter>\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n            <PopupClose asChild>\n              <Button variant=\"outline\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">Title + description, stack</Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupHeader>\n            <PopupTitle>Title</PopupTitle>\n            <PopupDescription>{description}</PopupDescription>\n          </PopupHeader>\n          <PopupFooter layout=\"stack\">\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n            <PopupClose asChild>\n              <Button variant=\"outline\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">\n            Title + description + input, stack\n          </Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupHeader>\n            <PopupTitle>Title</PopupTitle>\n            <PopupDescription>{description}</PopupDescription>\n          </PopupHeader>\n          <PopupBody>\n            <Input placeholder=\"Placeholder\" />\n          </PopupBody>\n          <PopupFooter layout=\"stack\">\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n            <PopupClose asChild>\n              <Button variant=\"outline\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">Description only, row</Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupDescription>{description}</PopupDescription>\n          <PopupFooter>\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n            <PopupClose asChild>\n              <Button variant=\"outline\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">Description only, stack</Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupDescription>{description}</PopupDescription>\n          <PopupFooter layout=\"stack\">\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n            <PopupClose asChild>\n              <Button variant=\"outline\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">Title only, single button</Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupHeader>\n            <PopupTitle>Title</PopupTitle>\n          </PopupHeader>\n          <PopupFooter>\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n\n      <Popup>\n        <PopupTrigger asChild>\n          <Button variant=\"secondary\">Title only, stack</Button>\n        </PopupTrigger>\n        <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n          <PopupHeader>\n            <PopupTitle>Title</PopupTitle>\n          </PopupHeader>\n          <PopupFooter layout=\"stack\">\n            <PopupClose asChild>\n              <Button variant=\"primary\">Button</Button>\n            </PopupClose>\n            <PopupClose asChild>\n              <Button variant=\"outline\">Button</Button>\n            </PopupClose>\n          </PopupFooter>\n        </PopupContent>\n      </Popup>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "popup.example.tsx",
+      "importName": "popupSource",
+      "title": "Popup",
+      "components": [
+        "Button",
+        "Input",
+        "Popup",
+        "PopupBody",
+        "PopupClose",
+        "PopupContent",
+        "PopupDescription",
+        "PopupFooter",
+        "PopupHeader",
+        "PopupTitle",
+        "PopupTrigger"
+      ],
+      "source": "import {\n  Button,\n  Input,\n  Popup,\n  PopupBody,\n  PopupClose,\n  PopupContent,\n  PopupDescription,\n  PopupFooter,\n  PopupHeader,\n  PopupTitle,\n  PopupTrigger,\n} from \"@rfdtech/components\";\n\nexport function PopupExample() {\n  return (\n    <Popup>\n      <PopupTrigger asChild>\n        <Button variant=\"secondary\">Send message</Button>\n      </PopupTrigger>\n      <PopupContent side=\"bottom\" align=\"center\" sideOffset={8}>\n        <PopupHeader>\n          <PopupTitle>Title</PopupTitle>\n          <PopupDescription>\n            Keep your messages short, but make sure they cover everything you\n            need to say.\n          </PopupDescription>\n        </PopupHeader>\n        <PopupBody>\n          <Input placeholder=\"Placeholder\" />\n        </PopupBody>\n        <PopupFooter>\n          <PopupClose asChild>\n            <Button variant=\"primary\">Button</Button>\n          </PopupClose>\n          <PopupClose asChild>\n            <Button variant=\"outline\">Button</Button>\n          </PopupClose>\n        </PopupFooter>\n      </PopupContent>\n    </Popup>\n  );\n}\n"
+    }
+  ],
+  "profile-popover": [
+    {
+      "file": "profile-popover-loading.example.tsx",
+      "importName": "profilePopoverLoadingSource",
+      "title": "Profile Popover Loading",
+      "components": [
+        "ProfilePopover",
+        "RoleSelect"
+      ],
+      "source": "import { useState } from \"react\";\nimport { ProfilePopover, RoleSelect } from \"@rfdtech/components\";\nimport { Shield, Eye, ScrollText } from \"lucide-react\";\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nexport function ProfilePopoverLoadingExample() {\n  const [loading, setLoading] = useState(true);\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <button\n        type=\"button\"\n        className=\"clet-profile-menu__item\"\n        style={{ alignSelf: \"flex-start\" }}\n        onClick={() => {\n          setLoading(true);\n          setTimeout(() => setLoading(false), 1500);\n        }}\n      >\n        <span>Simulate loading</span>\n      </button>\n\n      <ProfilePopover\n        fullName=\"Yaw Boateng\"\n        email=\"y.boateng@clet.gov.gh\"\n        loading={loading}\n        loadingLabel=\"Loading profile...\"\n        onSignOut={() => console.log(\"Sign out\")}\n      >\n        <RoleSelect\n          title=\"View as\"\n          roles={roles}\n          selectedRole={selectedRole}\n          onClickRole={(role) => setSelectedRole(role.id)}\n        />\n      </ProfilePopover>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "profile-popover-user-trigger.example.tsx",
+      "importName": "profilePopoverUserTriggerSource",
+      "title": "Profile Popover User Trigger",
+      "components": [
+        "ProfilePopover",
+        "RoleSelect"
+      ],
+      "source": "import { useState } from \"react\";\nimport { ProfilePopover, RoleSelect } from \"@rfdtech/components\";\nimport { Shield, Eye, ScrollText, User, Settings, HelpCircle } from \"lucide-react\";\n\nconst user = {\n  name: \"Kwame Asante\",\n  role: \"Admin\",\n  initials: \"KA\",\n  email: \"kwame@clet.edu.gh\",\n};\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nexport function ProfilePopoverUserTriggerExample() {\n  const [variant, setVariant] = useState<\"full\" | \"avatar\">(\"full\");\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <button\n        type=\"button\"\n        className=\"clet-profile-menu__item\"\n        style={{ alignSelf: \"flex-start\" }}\n        onClick={() => setVariant((v) => (v === \"full\" ? \"avatar\" : \"full\"))}\n      >\n        <span>Switch trigger to {variant === \"full\" ? \"avatar\" : \"full\"}</span>\n      </button>\n\n      <div\n        style={{\n          display: \"inline-flex\",\n          padding: 8,\n          borderRadius: \"var(--clet-radius-2xl)\",\n          background: \"var(--clet-surface-subtle)\",\n        }}\n      >\n        <ProfilePopover\n          user={user}\n          variant={variant}\n          items={[\n            {\n              icon: <User size={20} strokeWidth={1.5} aria-hidden />,\n              label: \"My Profile\",\n              onClick: () => console.log(\"My Profile\"),\n            },\n            {\n              icon: <Settings size={20} strokeWidth={1.5} aria-hidden />,\n              label: \"Account Settings\",\n              onClick: () => console.log(\"Account Settings\"),\n            },\n            {\n              icon: <HelpCircle size={20} strokeWidth={1.5} aria-hidden />,\n              label: \"Help & Support\",\n              onClick: () => console.log(\"Help & Support\"),\n            },\n          ]}\n          onSignOut={() => console.log(\"Sign out\")}\n        >\n          <RoleSelect\n            title=\"View as\"\n            roles={roles}\n            selectedRole={selectedRole}\n            onClickRole={(role) => setSelectedRole(role.id)}\n          />\n        </ProfilePopover>\n      </div>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "profile-popover.example.tsx",
+      "importName": "profilePopoverSource",
+      "title": "Profile Popover",
+      "components": [
+        "ProfilePopover",
+        "RoleSelect"
+      ],
+      "source": "import { useState } from \"react\";\nimport { ProfilePopover, RoleSelect } from \"@rfdtech/components\";\nimport { User, Settings, HelpCircle, Shield, Eye, ScrollText } from \"lucide-react\";\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} strokeWidth={1.5} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} strokeWidth={1.5} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} strokeWidth={1.5} /> },\n];\n\nexport function ProfilePopoverExample() {\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  return (\n    <ProfilePopover\n      fullName=\"Yaw Boateng\"\n      email=\"y.boateng@clet.gov.gh\"\n      items={[\n        {\n          icon: <User size={20} strokeWidth={1.5} />,\n          label: \"My Profile\",\n          onClick: () => console.log(\"My Profile\"),\n        },\n        {\n          icon: <Settings size={20} strokeWidth={1.5} />,\n          label: \"Account Settings\",\n          onClick: () => console.log(\"Account Settings\"),\n        },\n        {\n          icon: <HelpCircle size={20} strokeWidth={1.5} />,\n          label: \"Help & Support\",\n          onClick: () => console.log(\"Help & Support\"),\n        },\n      ]}\n      onSignOut={() => console.log(\"Sign out\")}\n    >\n      <RoleSelect\n        title=\"View as\"\n        roles={roles}\n        selectedRole={selectedRole}\n        onClickRole={(role) => setSelectedRole(role.id)}\n      />\n    </ProfilePopover>\n  );\n}\n"
+    }
+  ],
+  "progress-bar": [
+    {
+      "file": "progress-bar.example.tsx",
+      "importName": "progressBarSource",
+      "title": "Progress Bar",
+      "components": [
+        "ProgressBar"
+      ],
+      "source": "import { ProgressBar } from \"@rfdtech/components\";\n\nexport function ProgressBarExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\", width: \"100%\" }}>\n      <ProgressBar value={60} label=\"Upload progress\" showValue />\n      <ProgressBar value={100} variant=\"success\" showValue />\n      <ProgressBar value={45} variant=\"warning\" />\n      <ProgressBar value={20} variant=\"error\" size=\"md\" />\n      <ProgressBar indeterminate label=\"Loading\" size=\"md\" />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "radio-group": [
+    {
+      "file": "radio-decision-form.example.tsx",
+      "importName": "radioDecisionFormSource",
+      "title": "Radio Decision Form",
+      "components": [
+        "Button",
+        "Field",
+        "FieldControl",
+        "FieldError",
+        "FieldLabel",
+        "Form",
+        "FormField",
+        "Radio",
+        "RadioGroup",
+        "Textarea"
+      ],
+      "source": "import { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport {\n  Button,\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n  Form,\n  FormField,\n  Radio,\n  RadioGroup,\n  Textarea,\n} from \"@rfdtech/components\";\n\nconst decisionSchema = z\n  .object({\n    verdict: z.enum([\"approve\", \"reject\", \"needs_changes\"]),\n    reason: z.string().optional(),\n  })\n  .superRefine((data, ctx) => {\n    // `reason` is only required when the verdict isn't a clean approval.\n    if (data.verdict === \"approve\") return;\n    const trimmed = (data.reason ?? \"\").trim();\n    if (trimmed.length < 10) {\n      ctx.addIssue({\n        code: z.ZodIssueCode.custom,\n        message: \"Please provide a reason of at least 10 characters.\",\n        path: [\"reason\"],\n      });\n    }\n  });\n\ntype DecisionFormValues = z.infer<typeof decisionSchema>;\n\nfunction DecisionFormFields() {\n  const form = useForm<DecisionFormValues>({\n    resolver: zodResolver(decisionSchema),\n    defaultValues: {\n      verdict: \"approve\",\n      reason: \"\",\n    },\n  });\n\n  const verdict = form.watch(\"verdict\");\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(() => {})}\n        style={{ display: \"grid\", gap: 16, maxWidth: 480 }}\n      >\n        <FormField\n          control={form.control}\n          name=\"verdict\"\n          render={({ field }) => (\n            <Field>\n              <FieldLabel>Recommendation</FieldLabel>\n              <FieldControl>\n                <RadioGroup\n                  variant=\"card\"\n                  value={field.value}\n                  onValueChange={field.onChange}\n                >\n                  <Radio\n                    value=\"approve\"\n                    label=\"Approve\"\n                    description=\"The submission meets all requirements as-is.\"\n                  />\n                  <Radio\n                    value=\"needs_changes\"\n                    label=\"Needs changes\"\n                    description=\"Minor issues must be addressed before approval.\"\n                  />\n                  <Radio\n                    value=\"reject\"\n                    label=\"Reject\"\n                    description=\"The submission does not meet requirements.\"\n                  />\n                </RadioGroup>\n              </FieldControl>\n            </Field>\n          )}\n        />\n\n        {verdict !== \"approve\" && (\n          <FormField\n            control={form.control}\n            name=\"reason\"\n            render={({ field, fieldState }) => (\n              <Field invalid={!!fieldState.error}>\n                <FieldLabel>Reason</FieldLabel>\n                <FieldControl>\n                  <Textarea\n                    placeholder=\"Explain the reasoning behind this decision...\"\n                    rows={4}\n                    {...field}\n                  />\n                </FieldControl>\n                <FieldError>{fieldState.error?.message}</FieldError>\n              </Field>\n            )}\n          />\n        )}\n\n        <Button type=\"submit\" variant=\"primary\">\n          Submit recommendation\n        </Button>\n      </form>\n    </Form>\n  );\n}\n\nexport function RadioDecisionFormExample() {\n  return <DecisionFormFields />;\n}\n"
+    },
+    {
+      "file": "radio-group-card.example.tsx",
+      "importName": "radioGroupCardSource",
+      "title": "Radio Group Card",
+      "components": [
+        "Radio",
+        "RadioGroup"
+      ],
+      "source": "import { useState } from \"react\";\nimport { Radio, RadioGroup } from \"@rfdtech/components\";\n\nexport function RadioGroupCardExample() {\n  const [plan, setPlan] = useState(\"starter\");\n\n  return (\n    <RadioGroup variant=\"card\" value={plan} onValueChange={setPlan}>\n      <Radio\n        value=\"starter\"\n        label=\"Starter\"\n        description=\"For individuals getting started.\"\n      />\n      <Radio\n        value=\"team\"\n        label=\"Team\"\n        description=\"Collaborate with up to 10 members.\"\n      />\n      <Radio\n        value=\"enterprise\"\n        label=\"Enterprise\"\n        description=\"Advanced controls and dedicated support.\"\n      />\n    </RadioGroup>\n  );\n}\n"
+    },
+    {
+      "file": "radio-group.example.tsx",
+      "importName": "radioGroupSource",
+      "title": "Radio Group",
+      "components": [
+        "Radio",
+        "RadioGroup"
+      ],
+      "source": "import { useState } from \"react\";\nimport { Radio, RadioGroup } from \"@rfdtech/components\";\n\nexport function RadioGroupExample() {\n  const [method, setMethod] = useState(\"email\");\n\n  return (\n    <RadioGroup value={method} onValueChange={setMethod}>\n      <Radio value=\"email\" label=\"Email\" />\n      <Radio value=\"sms\" label=\"SMS\" />\n      <Radio value=\"phone\" label=\"Phone\" disabled />\n    </RadioGroup>\n  );\n}\n"
+    }
+  ],
+  "role-select": [
+    {
+      "file": "role-select.example.tsx",
+      "importName": "roleSelectSource",
+      "title": "Role Select",
+      "components": [
+        "RoleSelect"
+      ],
+      "source": "import { RoleSelect } from \"@rfdtech/components\";\nimport { Eye, ScrollText, Shield } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst roles = [\n  { id: \"admin\", name: \"Admin\", icon: <Shield size={16} /> },\n  { id: \"reviewer\", name: \"Reviewer\", icon: <Eye size={16} /> },\n  { id: \"auditor\", name: \"Auditor\", icon: <ScrollText size={16} />, disabled: true },\n];\n\nexport function RoleSelectExample() {\n  const [selectedRole, setSelectedRole] = useState(\"admin\");\n\n  return (\n    <RoleSelect\n      title=\"View as\"\n      roles={roles}\n      selectedRole={selectedRole}\n      onClickRole={(role) => setSelectedRole(role.id)}\n    />\n  );\n}\n"
+    }
+  ],
+  "router-adapter": [],
+  "section-header": [
+    {
+      "file": "section-header.example.tsx",
+      "importName": "sectionHeaderSource",
+      "title": "Section Header",
+      "components": [
+        "Button",
+        "SectionActions",
+        "SectionDescription",
+        "SectionHeader",
+        "SectionTitle"
+      ],
+      "source": "import {\n  Button,\n  SectionActions,\n  SectionDescription,\n  SectionHeader,\n  SectionTitle,\n} from \"@rfdtech/components\";\nimport { Plus } from \"lucide-react\";\n\nexport function SectionHeaderExample() {\n  return (\n    <SectionHeader>\n      <SectionTitle>Users</SectionTitle>\n      <SectionDescription>\n        Manage who has access to this workspace and what they can do.\n      </SectionDescription>\n      <SectionActions>\n        <Button variant=\"outline\" size=\"md\">\n          Export\n        </Button>\n        <Button variant=\"primary\" size=\"md\">\n          <Plus size={14} strokeWidth={1.5} />\n          Add user\n        </Button>\n      </SectionActions>\n    </SectionHeader>\n  );\n}\n"
+    }
+  ],
+  "sheet": [
+    {
+      "file": "sheet.example.tsx",
+      "importName": "sheetSource",
+      "title": "Sheet",
+      "components": [
+        "Button",
+        "Checkbox",
+        "Sheet",
+        "SheetBody",
+        "SheetContent",
+        "SheetDescription",
+        "SheetFooter",
+        "SheetHeader",
+        "SheetOverlay",
+        "SheetPortal",
+        "SheetTitle",
+        "SheetTrigger"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  Button,\n  Checkbox,\n  Sheet,\n  SheetBody,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n} from \"@rfdtech/components\";\n\nconst filterOptions = [\n  { id: \"published\", label: \"Published only\" },\n  { id: \"drafts\", label: \"Include drafts\" },\n  { id: \"archived\", label: \"Include archived\" },\n  { id: \"assigned\", label: \"Assigned to me\" },\n  { id: \"mentions\", label: \"Mentions me\" },\n  { id: \"recent\", label: \"Updated in last 7 days\" },\n];\n\nexport function SheetExample() {\n  const [open, setOpen] = useState(false);\n  const [filters, setFilters] = useState<Record<string, boolean>>({\n    published: true,\n    drafts: false,\n    archived: false,\n    assigned: true,\n    mentions: false,\n    recent: true,\n  });\n\n  return (\n    <Sheet open={open} onOpenChange={setOpen}>\n      <SheetTrigger asChild>\n        <Button variant=\"secondary\">Open filters</Button>\n      </SheetTrigger>\n      <SheetPortal>\n        <SheetOverlay />\n        <SheetContent side=\"right\" showCloseButton>\n          <SheetHeader>\n            <SheetTitle>Filters</SheetTitle>\n            <SheetDescription>\n              Refine the list below. Changes apply when you click Apply.\n            </SheetDescription>\n          </SheetHeader>\n          <SheetBody>\n            <div style={{ display: \"grid\", gap: 12 }}>\n              {filterOptions.map(({ id, label }) => (\n                <Checkbox\n                  key={id}\n                  label={label}\n                  checked={filters[id]}\n                  onCheckedChange={(checked) =>\n                    setFilters((current) => ({ ...current, [id]: checked }))\n                  }\n                />\n              ))}\n            </div>\n          </SheetBody>\n          <SheetFooter>\n            <Button\n              variant=\"ghost\"\n              onClick={() => {\n                setFilters({\n                  published: true,\n                  drafts: false,\n                  archived: false,\n                  assigned: false,\n                  mentions: false,\n                  recent: false,\n                });\n              }}\n            >\n              Reset\n            </Button>\n            <Button onClick={() => setOpen(false)}>Apply</Button>\n          </SheetFooter>\n        </SheetContent>\n      </SheetPortal>\n    </Sheet>\n  );\n}\n"
+    }
+  ],
+  "sidebar": [
+    {
+      "file": "sidebar-loading.example.tsx",
+      "importName": "sidebarLoadingSource",
+      "title": "Sidebar Loading",
+      "components": [
+        "Sidebar",
+        "SidebarBadge",
+        "SidebarContent",
+        "SidebarGroup",
+        "SidebarHeader",
+        "SidebarItem",
+        "SidebarLink",
+        "SidebarNav",
+        "SidebarProvider"
+      ],
+      "source": "import { useState } from \"react\";\nimport { Bell, LayoutGrid, Shield, Users } from \"lucide-react\";\nimport {\n  Sidebar,\n  SidebarBadge,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLink,\n  SidebarNav,\n  SidebarProvider,\n} from \"@rfdtech/components\";\n\nconst links = [\n  { id: \"dashboard\", label: \"Dashboard\", icon: LayoutGrid, badge: undefined },\n  { id: \"users\", label: \"Users\", icon: Users, badge: undefined },\n  { id: \"roles\", label: \"Roles & Permissions\", icon: Shield, badge: undefined },\n  {\n    id: \"notifications\",\n    label: \"Notification Templates\",\n    icon: Bell,\n    badge: \"New\",\n  },\n] as const;\n\nexport function SidebarLoadingExample() {\n  const [loading, setLoading] = useState(true);\n  const [active, setActive] = useState<string>(\"users\");\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      <button\n        type=\"button\"\n        className=\"clet-profile-menu__item\"\n        style={{ alignSelf: \"flex-start\" }}\n        onClick={() => {\n          setLoading(true);\n          setTimeout(() => setLoading(false), 1500);\n        }}\n      >\n        <span>Simulate loading</span>\n      </button>\n\n      <SidebarProvider>\n        <div style={{ maxWidth: 280 }}>\n          <Sidebar>\n            <SidebarHeader>\n              <span className=\"clet-sidebar__header-title\">Navigation</span>\n            </SidebarHeader>\n            <SidebarContent>\n              <SidebarNav aria-label=\"Main navigation\">\n                <SidebarGroup>\n                  {loading\n                    ? Array.from({ length: 4 }).map((_, i) => (\n                        <SidebarItem key={i}>\n                          <SidebarLink loading icon={<span />}>\n                            Loading\n                          </SidebarLink>\n                        </SidebarItem>\n                      ))\n                    : links.map(({ id, label, icon: Icon, badge }) => (\n                        <SidebarItem key={id}>\n                          <SidebarLink\n                            icon={<Icon size={20} strokeWidth={1.75} />}\n                            active={active === id}\n                            onClick={() => setActive(id)}\n                          >\n                            {label}\n                            {badge ? <SidebarBadge>{badge}</SidebarBadge> : null}\n                          </SidebarLink>\n                        </SidebarItem>\n                      ))}\n                </SidebarGroup>\n              </SidebarNav>\n            </SidebarContent>\n          </Sidebar>\n        </div>\n      </SidebarProvider>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "sidebar-plain.example.tsx",
+      "importName": "sidebarPlainSource",
+      "title": "Sidebar Plain",
+      "components": [
+        "Sidebar",
+        "SidebarContent",
+        "SidebarGroup",
+        "SidebarGroupLabel",
+        "SidebarItem",
+        "SidebarLink",
+        "SidebarNav",
+        "SidebarProvider"
+      ],
+      "source": "import { useState } from \"react\";\nimport { LayoutGrid, Shield, Users } from \"lucide-react\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarItem,\n  SidebarLink,\n  SidebarNav,\n  SidebarProvider,\n} from \"@rfdtech/components\";\n\nconst links = [\n  { id: \"dashboard\", label: \"Dashboard\", icon: LayoutGrid },\n  { id: \"users\", label: \"Users\", icon: Users },\n  { id: \"roles\", label: \"Roles & Permissions\", icon: Shield },\n] as const;\n\nexport function SidebarPlainExample() {\n  const [active, setActive] = useState<string>(\"users\");\n\n  return (\n    <SidebarProvider>\n      <div\n        style={{\n          display: \"flex\",\n          height: 280,\n          borderRadius: \"var(--clet-radius-base)\",\n          overflow: \"hidden\",\n          background: \"var(--clet-bg)\",\n        }}\n      >\n        <Sidebar variant=\"plain\">\n          <SidebarContent>\n            <SidebarNav>\n              <SidebarGroup>\n                <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n                {links.map(({ id, label, icon: Icon }) => (\n                  <SidebarItem key={id}>\n                    <SidebarLink\n                      icon={<Icon size={18} strokeWidth={1.5} />}\n                      active={active === id}\n                      onClick={() => setActive(id)}\n                    >\n                      {label}\n                    </SidebarLink>\n                  </SidebarItem>\n                ))}\n              </SidebarGroup>\n            </SidebarNav>\n          </SidebarContent>\n        </Sidebar>\n        <div\n          style={{\n            flex: 1,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            color: \"var(--clet-text-muted)\",\n            fontSize: 14,\n            padding: 16,\n            textAlign: \"center\",\n          }}\n        >\n          Page content — plain sidebar has a transparent background and a\n          right border instead of the card panel surface\n        </div>\n      </div>\n    </SidebarProvider>\n  );\n}\n"
+    },
+    {
+      "file": "sidebar.example.tsx",
+      "importName": "sidebarSource",
+      "title": "Sidebar",
+      "components": [
+        "Sidebar",
+        "SidebarBadge",
+        "SidebarCollapse",
+        "SidebarContent",
+        "SidebarGroup",
+        "SidebarGroupLabel",
+        "SidebarHeader",
+        "SidebarItem",
+        "SidebarLink",
+        "SidebarNav",
+        "SidebarOverlay",
+        "SidebarProvider",
+        "SidebarTrigger"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  Bell,\n  GitBranch,\n  LayoutGrid,\n  Monitor,\n  Plug,\n  ScrollText,\n  Shield,\n  Users,\n  Workflow,\n} from \"lucide-react\";\nimport {\n  Sidebar,\n  SidebarBadge,\n  SidebarCollapse,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLink,\n  SidebarNav,\n  SidebarOverlay,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@rfdtech/components\";\n\nconst mainLinks = [\n  { id: \"dashboard\", label: \"Dashboard\", icon: LayoutGrid, badge: undefined },\n  { id: \"users\", label: \"Users\", icon: Users, badge: undefined },\n  { id: \"roles\", label: \"Roles & Permissions\", icon: Shield, badge: undefined },\n  {\n    id: \"notifications\",\n    label: \"Notification Templates\",\n    icon: Bell,\n    badge: \"New\",\n  },\n  { id: \"workflow\", label: \"Workflow Parameters\", icon: GitBranch, badge: undefined },\n  { id: \"integrations\", label: \"Integrations\", icon: Plug, badge: undefined },\n] as const;\n\nconst cbtLinks = [\n  { id: \"secure-browser\", label: \"Secure Browser Policy\", icon: ScrollText, badge: undefined },\n  { id: \"exam-monitoring\", label: \"Exam Monitoring Settings\", icon: Monitor, badge: undefined },\n] as const;\n\nconst monitoringLinks = [\n  { id: \"audit-logs\", label: \"Audit Logs\", icon: ScrollText, badge: \"12\" },\n  { id: \"system-health\", label: \"System Health\", icon: Workflow, badge: undefined },\n] as const;\n\nexport function SidebarExample() {\n  const [active, setActive] = useState<string>(\"users\");\n\n  return (\n    <SidebarProvider>\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"minmax(0, 280px) minmax(0, 1fr)\",\n          gap: 24,\n          alignItems: \"start\",\n          maxWidth: \"100%\",\n        }}\n      >\n        <div style={{ minWidth: 0 }}>\n          <SidebarTrigger>Open menu</SidebarTrigger>\n          <SidebarOverlay />\n          <Sidebar>\n            <SidebarHeader>\n              <div className=\"clet-sidebar__header-brand\">\n                <span\n                  aria-hidden=\"true\"\n                  style={{\n                    display: \"inline-flex\",\n                    flexShrink: 0,\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    width: 32,\n                    height: 32,\n                    borderRadius: \"50%\",\n                    background: \"var(--clet-primary-light)\",\n                    color: \"var(--clet-primary)\",\n                    fontSize: 11,\n                    fontWeight: 700,\n                  }}\n                >\n                  CLET\n                </span>\n                <span className=\"clet-sidebar__header-title\">NBES</span>\n              </div>\n              <SidebarCollapse />\n            </SidebarHeader>\n            <SidebarContent>\n              <SidebarNav aria-label=\"Main navigation\">\n                <SidebarGroup>\n                  {mainLinks.map(({ id, label, icon: Icon, badge }) => (\n                    <SidebarItem key={id}>\n                      <SidebarLink\n                        icon={<Icon size={20} strokeWidth={1.75} />}\n                        active={active === id}\n                        onClick={() => setActive(id)}\n                      >\n                        {label}\n                        {badge ? <SidebarBadge>{badge}</SidebarBadge> : null}\n                      </SidebarLink>\n                    </SidebarItem>\n                  ))}\n                </SidebarGroup>\n                <SidebarGroup>\n                  <SidebarGroupLabel>CBT Engine</SidebarGroupLabel>\n                  {cbtLinks.map(({ id, label, icon: Icon }) => (\n                    <SidebarItem key={id}>\n                      <SidebarLink\n                        icon={<Icon size={20} strokeWidth={1.75} />}\n                        active={active === id}\n                        onClick={() => setActive(id)}\n                      >\n                        {label}\n                      </SidebarLink>\n                    </SidebarItem>\n                  ))}\n                </SidebarGroup>\n                <SidebarGroup collapsible defaultExpanded={false}>\n                  <SidebarGroupLabel>Monitoring</SidebarGroupLabel>\n                  {monitoringLinks.map(({ id, label, icon: Icon, badge }) => (\n                    <SidebarItem key={id}>\n                      <SidebarLink\n                        icon={<Icon size={20} strokeWidth={1.75} />}\n                        active={active === id}\n                        onClick={() => setActive(id)}\n                      >\n                        {label}\n                        {badge ? <SidebarBadge>{badge}</SidebarBadge> : null}\n                      </SidebarLink>\n                    </SidebarItem>\n                  ))}\n                </SidebarGroup>\n              </SidebarNav>\n            </SidebarContent>\n          </Sidebar>\n        </div>\n        <div\n          style={{\n            minWidth: 0,\n            padding: 16,\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n          }}\n        >\n          <p style={{ margin: 0, fontSize: 14, color: \"var(--clet-text-secondary)\" }}>\n            Main content area. On desktop, use the collapse control to switch to\n            an icon-only rail. On viewports 768px and below, use the menu button\n            to open the offcanvas sidebar.\n          </p>\n        </div>\n      </div>\n    </SidebarProvider>\n  );\n}\n"
+    }
+  ],
+  "sortable": [
+    {
+      "file": "sortable.example.tsx",
+      "importName": "sortableSource",
+      "title": "Sortable",
+      "components": [
+        "Sortable",
+        "SortableHandle",
+        "SortableItem",
+        "SortableList"
+      ],
+      "source": "import { useState } from \"react\";\nimport {\n  Sortable,\n  SortableHandle,\n  SortableItem,\n  SortableList,\n} from \"@rfdtech/components\";\n\nconst labels: Record<string, string> = {\n  alpha: \"Review submissions\",\n  beta: \"Approve grades\",\n  gamma: \"Publish results\",\n  delta: \"Send notifications\",\n};\n\nexport function SortableExample() {\n  const [items, setItems] = useState([\"alpha\", \"beta\", \"gamma\", \"delta\"]);\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        maxWidth: 360,\n        padding: 12,\n        border: \"1px dashed var(--clet-border)\",\n        borderRadius: \"var(--clet-radius-base)\",\n        background: \"var(--clet-surface-subtle)\",\n      }}\n    >\n      <Sortable items={items} onReorder={(ids) => setItems(ids as string[])}>\n        <SortableList>\n          {items.map((id) => (\n            <SortableItem key={id} id={id}>\n              <SortableHandle aria-label={`Reorder ${labels[id]}`} />\n              <span style={{ fontSize: 14 }}>{labels[id]}</span>\n            </SortableItem>\n          ))}\n        </SortableList>\n      </Sortable>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "stepper": [
+    {
+      "file": "stepper.example.tsx",
+      "importName": "stepperSource",
+      "title": "Stepper",
+      "components": [
+        "Step",
+        "StepLabel",
+        "Stepper"
+      ],
+      "source": "import { useState } from \"react\";\nimport { Step, StepLabel, Stepper } from \"@rfdtech/components\";\n\nconst steps = [\n  { value: 1, label: \"Upload Document\" },\n  { value: 2, label: \"Select header row\" },\n  { value: 3, label: \"Match Columns\" },\n  { value: 4, label: \"Validate data\" },\n];\n\nexport function StepperExample() {\n  const [value, setValue] = useState(3);\n\n  return (\n    <section\n      className=\"clet-card\"\n      style={{\n        padding: \"24px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"24px\",\n        width: \"100%\",\n      }}\n    >\n      <Stepper value={value} clickable onValueChange={setValue}>\n        {steps.map((step) => (\n          <Step key={step.value} value={step.value}>\n            <StepLabel>{step.label}</StepLabel>\n          </Step>\n        ))}\n      </Stepper>\n\n      <div style={{ display: \"flex\", gap: \"8px\", paddingTop: \"32px\" }}>\n        <button\n          type=\"button\"\n          className=\"clet-button clet-button--secondary\"\n          onClick={() => setValue((v) => Math.max(1, v - 1))}\n          disabled={value === 1}\n        >\n          Back\n        </button>\n        <button\n          type=\"button\"\n          className=\"clet-button clet-button--primary\"\n          onClick={() => setValue((v) => Math.min(steps.length, v + 1))}\n          disabled={value === steps.length}\n        >\n          Next\n        </button>\n      </div>\n    </section>\n  );\n}\n"
+    }
+  ],
+  "switch": [
+    {
+      "file": "switch-variants.example.tsx",
+      "importName": "switchVariantsSource",
+      "title": "Switch Variants",
+      "components": [
+        "Switch"
+      ],
+      "source": "import { Switch } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nexport function SwitchVariantsExample() {\n  const [checked, setChecked] = useState(true);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: \"24px\" }}>\n        <Switch aria-label=\"Unchecked\" checked={false} onCheckedChange={() => {}} />\n        <Switch aria-label=\"Checked\" checked onCheckedChange={() => {}} />\n        <Switch aria-label=\"Disabled unchecked\" disabled />\n        <Switch aria-label=\"Disabled checked\" disabled defaultChecked />\n      </div>\n      <Switch\n        label=\"Notify me about updates\"\n        checked={checked}\n        onCheckedChange={setChecked}\n      />\n      <Switch\n        label=\"Left-aligned label\"\n        labelPosition=\"left\"\n        defaultChecked\n      />\n    </div>\n  );\n}\n"
+    }
+  ],
+  "table": [
+    {
+      "file": "table-actions.example.tsx",
+      "importName": "tableActionsSource",
+      "title": "Table Actions",
+      "components": [
+        "Badge",
+        "Dropdown",
+        "Table",
+        "TableActions",
+        "TableColumn",
+        "TableContent",
+        "TableFooter",
+        "TableHeader",
+        "TablePagination",
+        "TableSearch",
+        "useTableState"
+      ],
+      "source": "import type { TableColumn } from \"@rfdtech/components\";\nimport {\n  Table,\n  TableHeader,\n  TableSearch,\n  TableActions,\n  TableContent,\n  TableFooter,\n  TablePagination,\n  Badge,\n  Dropdown,\n  useTableState,\n} from \"@rfdtech/components\";\n\ninterface RoleAssignment {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n  status: string;\n}\n\nconst assignments: RoleAssignment[] = [\n  { id: 1, name: \"Kwame Asante\", email: \"kwame@clet.edu.gh\", role: \"Admin\", status: \"Active\" },\n  { id: 2, name: \"Abena Mensah\", email: \"abena@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 3, name: \"Kofi Owusu\", email: \"kofi@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n  { id: 4, name: \"Esi Boateng\", email: \"esi@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 5, name: \"Yaw Adom\", email: \"yaw@clet.edu.gh\", role: \"Viewer\", status: \"Pending\" },\n  { id: 6, name: \"Nana Yeboah\", email: \"nana@clet.edu.gh\", role: \"Admin\", status: \"Active\" },\n  { id: 7, name: \"Akua Donkor\", email: \"akua@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 8, name: \"Kwesi Appiah\", email: \"kwesi@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n];\n\nconst roleOptions = [\n  { value: \"Admin\", label: \"Admin\" },\n  { value: \"Editor\", label: \"Editor\" },\n  { value: \"Viewer\", label: \"Viewer\" },\n];\n\nfunction statusVariant(status: string) {\n  switch (status) {\n    case \"Active\":\n      return \"success\" as const;\n    case \"Pending\":\n      return \"warning\" as const;\n    case \"Inactive\":\n      return \"outline\" as const;\n    default:\n      return \"default\" as const;\n  }\n}\n\nconst columns: TableColumn<RoleAssignment>[] = [\n  { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n  { id: \"email\", header: \"Email\", accessorKey: \"email\", sortable: true },\n  { id: \"role\", header: \"Role\", accessorKey: \"role\", sortable: true },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    sortable: true,\n    cell: ({ value }) => (\n      <Badge variant={statusVariant(String(value))}>{String(value)}</Badge>\n    ),\n  },\n];\n\ninterface RolesFilters {\n  role: string | null;\n  [key: string]: string | null | undefined;\n}\n\nexport function TableActionsExample() {\n  // `useTableState`'s `filters` bag is exactly what a `TableActions` filter\n  // control (here a `Dropdown`) reads from and writes to — the toolbar slot\n  // itself is just a styled flex wrapper, it has no filtering logic of its own.\n  const { page, pageSize, pageSizeOptions, search, filters, setFilter } =\n    useTableState<RolesFilters>({\n      defaultPageSize: 5,\n      paramPrefix: \"role-assignments\",\n    });\n\n  const filtered = assignments.filter((a) => {\n    if (filters.role && a.role !== filters.role) return false;\n    return (\n      a.name.toLowerCase().includes(search.toLowerCase()) ||\n      a.email.toLowerCase().includes(search.toLowerCase())\n    );\n  });\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);\n\n  return (\n    <Table paramPrefix=\"role-assignments\">\n      <TableHeader>\n        <TableSearch placeholder=\"Search by name or email...\" />\n        <TableActions>\n          <div style={{ width: 180 }}>\n            <Dropdown\n              aria-label=\"Filter by role\"\n              value={filters.role ?? null}\n              onValueChange={(value) => setFilter(\"role\", value)}\n              options={roleOptions}\n              placeholder=\"All roles\"\n              clearable\n            />\n          </div>\n        </TableActions>\n      </TableHeader>\n      <TableContent columns={columns} data={paged} rowKey={(a) => a.id} />\n      <TableFooter>\n        <TablePagination\n          totalPages={totalPages}\n          totalItems={filtered.length}\n          pageSizeOptions={pageSizeOptions}\n        />\n      </TableFooter>\n    </Table>\n  );\n}\n"
+    },
+    {
+      "file": "table-crud.example.tsx",
+      "importName": "tableCrudSource",
+      "title": "Table Crud",
+      "components": [
+        "Badge",
+        "Button",
+        "Dialog",
+        "DialogContent",
+        "DialogDescription",
+        "DialogOverlay",
+        "DialogPortal",
+        "DialogTitle",
+        "Popover",
+        "PopoverClose",
+        "PopoverContent",
+        "PopoverTrigger",
+        "Table",
+        "TableBulkActions",
+        "TableColumn",
+        "TableContent",
+        "TableFooter",
+        "TableHeader",
+        "TablePagination",
+        "TableSearch",
+        "useTableState"
+      ],
+      "source": "import { useCallback, useState } from \"react\";\nimport type { TableColumn } from \"@rfdtech/components\";\nimport {\n  Table,\n  TableHeader,\n  TableSearch,\n  TableContent,\n  TableBulkActions,\n  TableFooter,\n  TablePagination,\n  Badge,\n  Button,\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogTitle,\n  DialogDescription,\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverClose,\n  useTableState,\n} from \"@rfdtech/components\";\nimport { Trash2, Eye, Edit, MoreHorizontal } from \"lucide-react\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n  status: string;\n}\n\nconst initialUsers: User[] = [\n  { id: 1, name: \"Kwame Asante\", email: \"kwame@clet.edu.gh\", role: \"Admin\", status: \"Active\" },\n  { id: 2, name: \"Abena Mensah\", email: \"abena@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 3, name: \"Kofi Owusu\", email: \"kofi@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n  { id: 4, name: \"Esi Boateng\", email: \"esi@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 5, name: \"Yaw Adom\", email: \"yaw@clet.edu.gh\", role: \"Viewer\", status: \"Pending\" },\n  { id: 6, name: \"Nana Yeboah\", email: \"nana@clet.edu.gh\", role: \"Admin\", status: \"Active\" },\n  { id: 7, name: \"Akua Donkor\", email: \"akua@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 8, name: \"Kwesi Appiah\", email: \"kwesi@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n];\n\nfunction statusVariant(status: string) {\n  switch (status) {\n    case \"Active\":\n      return \"success\" as const;\n    case \"Pending\":\n      return \"warning\" as const;\n    case \"Inactive\":\n      return \"outline\" as const;\n    default:\n      return \"default\" as const;\n  }\n}\n\n/** Per-row action menu — an alternative to the built-in `rowActions` prop,\n * composed by hand from `Popover` so the menu content can be fully custom. */\nfunction RowActionsMenu({\n  user,\n  onView,\n  onEdit,\n  onDelete,\n}: {\n  user: User;\n  onView: (user: User) => void;\n  onEdit: (user: User) => void;\n  onDelete: (user: User) => void;\n}) {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={`Actions for ${user.name}`}\n          className=\"clet-dropdown__trigger\"\n          style={{\n            width: 32,\n            height: 32,\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"transparent\",\n          }}\n        >\n          <MoreHorizontal size={16} strokeWidth={1.5} />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent side=\"bottom\" align=\"end\" sideOffset={4} className=\"clet-popover--menu\">\n        <div className=\"clet-popover__menu\" role=\"menu\">\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              className=\"clet-popover__menu-item\"\n              role=\"menuitem\"\n              onClick={() => onView(user)}\n            >\n              <Eye size={16} strokeWidth={1.5} aria-hidden />\n              View\n            </button>\n          </PopoverClose>\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              className=\"clet-popover__menu-item\"\n              role=\"menuitem\"\n              onClick={() => onEdit(user)}\n            >\n              <Edit size={16} strokeWidth={1.5} aria-hidden />\n              Edit\n            </button>\n          </PopoverClose>\n          <PopoverClose asChild>\n            <button\n              type=\"button\"\n              className=\"clet-popover__menu-item clet-popover__menu-item--destructive\"\n              role=\"menuitem\"\n              onClick={() => onDelete(user)}\n            >\n              <Trash2 size={16} strokeWidth={1.5} aria-hidden />\n              Delete\n            </button>\n          </PopoverClose>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function TableCrudExample() {\n  const [users, setUsers] = useState(initialUsers);\n  const [selected, setSelected] = useState<Set<string | number>>(new Set());\n  const [pendingDelete, setPendingDelete] = useState<Set<string | number> | null>(null);\n\n  const { page, pageSize, pageSizeOptions, search } = useTableState({\n    defaultPageSize: 5,\n  });\n\n  const filtered = users.filter(\n    (u) =>\n      u.name.toLowerCase().includes(search.toLowerCase()) ||\n      u.email.toLowerCase().includes(search.toLowerCase()),\n  );\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);\n\n  const handleView = useCallback((user: User) => {\n    window.alert(`Viewing ${user.name}`);\n  }, []);\n\n  const handleEdit = useCallback((user: User) => {\n    window.alert(`Editing ${user.name}`);\n  }, []);\n\n  const handleRowDelete = useCallback((user: User) => {\n    setUsers((prev) => prev.filter((u) => u.id !== user.id));\n  }, []);\n\n  // Bulk delete never deletes directly — it stages the selection and opens a\n  // confirm Dialog. The actual mutation only happens once the user confirms.\n  const requestBulkDelete = useCallback((ids: Set<string | number>) => {\n    setPendingDelete(ids);\n  }, []);\n\n  const confirmBulkDelete = useCallback(() => {\n    if (!pendingDelete) return;\n    setUsers((prev) => prev.filter((u) => !pendingDelete.has(u.id)));\n    setSelected(new Set());\n    setPendingDelete(null);\n  }, [pendingDelete]);\n\n  const columns: TableColumn<User>[] = [\n    { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n    { id: \"email\", header: \"Email\", accessorKey: \"email\", sortable: true },\n    { id: \"role\", header: \"Role\", accessorKey: \"role\", sortable: true },\n    {\n      id: \"status\",\n      header: \"Status\",\n      accessorKey: \"status\",\n      sortable: true,\n      cell: ({ value }) => (\n        <Badge variant={statusVariant(String(value))}>{String(value)}</Badge>\n      ),\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      width: 56,\n      align: \"right\",\n      cell: ({ row }) => (\n        <RowActionsMenu\n          user={row}\n          onView={handleView}\n          onEdit={handleEdit}\n          onDelete={handleRowDelete}\n        />\n      ),\n    },\n  ];\n\n  return (\n    <>\n      <Table paramPrefix=\"crud-users\">\n        <TableHeader>\n          <TableSearch placeholder=\"Search users...\" />\n        </TableHeader>\n        <TableContent\n          selectable\n          selectedIds={selected}\n          onSelectionChange={setSelected}\n          columns={columns}\n          data={paged}\n          rowKey={(u) => u.id}\n        />\n        <TableBulkActions\n          selectedIds={selected}\n          onClear={() => setSelected(new Set())}\n          actions={[\n            {\n              id: \"delete\",\n              label: \"Delete\",\n              icon: <Trash2 size={14} strokeWidth={1.5} />,\n              onClick: requestBulkDelete,\n              destructive: true,\n            },\n          ]}\n        />\n        <TableFooter>\n          <TablePagination\n            totalPages={totalPages}\n            totalItems={filtered.length}\n            pageSizeOptions={pageSizeOptions}\n          />\n        </TableFooter>\n      </Table>\n\n      <Dialog\n        open={pendingDelete !== null}\n        onOpenChange={(open) => {\n          if (!open) setPendingDelete(null);\n        }}\n      >\n        <DialogPortal>\n          <DialogOverlay />\n          <DialogContent showCloseButton>\n            <DialogTitle>Delete selected users?</DialogTitle>\n            <DialogDescription>\n              {pendingDelete?.size ?? 0} user{(pendingDelete?.size ?? 0) === 1 ? \"\" : \"s\"}{\" \"}\n              will be permanently removed. This action cannot be undone.\n            </DialogDescription>\n            <div className=\"flex justify-end gap-2\">\n              <Button variant=\"ghost\" onClick={() => setPendingDelete(null)}>\n                Cancel\n              </Button>\n              <Button variant=\"destructive\" onClick={confirmBulkDelete}>\n                Delete\n              </Button>\n            </div>\n          </DialogContent>\n        </DialogPortal>\n      </Dialog>\n    </>\n  );\n}\n"
+    },
+    {
+      "file": "table-empty.example.tsx",
+      "importName": "tableEmptySource",
+      "title": "Table Empty",
+      "components": [
+        "Table",
+        "TableColumn",
+        "TableContent",
+        "TableFooter",
+        "TableHeader",
+        "TablePagination",
+        "TableSearch",
+        "useTableState"
+      ],
+      "source": "import { useState } from \"react\";\nimport { useTableState } from \"@rfdtech/components\";\nimport type { TableColumn } from \"@rfdtech/components\";\nimport {\n  Table,\n  TableHeader,\n  TableSearch,\n  TableContent,\n  TableFooter,\n  TablePagination,\n} from \"@rfdtech/components\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n}\n\nconst columns: TableColumn<User>[] = [\n  { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n  { id: \"email\", header: \"Email\", accessorKey: \"email\", sortable: true },\n  { id: \"role\", header: \"Role\", accessorKey: \"role\", sortable: true },\n];\n\nexport function TableEmptyExample() {\n  const [selected, setSelected] = useState<Set<string | number>>(new Set());\n  useTableState({ defaultPageSize: 5 });\n\n  const filtered: User[] = [];\n  const totalPages = 0;\n\n  return (\n    <Table paramPrefix=\"users-empty\">\n      <TableHeader>\n        <TableSearch placeholder=\"Search users...\" />\n      </TableHeader>\n      <TableContent\n        selectable\n        selectedIds={selected}\n        onSelectionChange={setSelected}\n        columns={columns}\n        data={filtered}\n        rowKey={(u) => u.id}\n        emptyText=\"No users found\"\n      />\n      <TableFooter>\n        <TablePagination\n          totalPages={totalPages}\n          pageSizeOptions={[5, 10, 20]}\n        />\n      </TableFooter>\n    </Table>\n  );\n}\n"
+    },
+    {
+      "file": "table-filter-spread.example.tsx",
+      "importName": "tableFilterSpreadSource",
+      "title": "Table Filter Spread",
+      "components": [
+        "Badge",
+        "Dropdown",
+        "Table",
+        "TableColumn",
+        "TableContent",
+        "TableFilter",
+        "TableFooter",
+        "TableHeader",
+        "TablePagination",
+        "TableSearch",
+        "useTableState"
+      ],
+      "source": "import { useMemo, useState } from \"react\";\nimport { useTableState } from \"@rfdtech/components\";\nimport type { TableColumn } from \"@rfdtech/components\";\nimport {\n  Table,\n  TableHeader,\n  TableSearch,\n  TableFilter,\n  TableContent,\n  TableFooter,\n  TablePagination,\n  Dropdown,\n  Badge,\n} from \"@rfdtech/components\";\n\ninterface Member {\n  id: number;\n  name: string;\n  role: string;\n  status: string;\n}\n\nconst members: Member[] = [\n  { id: 1, name: \"Kwame Asante\", role: \"Admin\", status: \"Active\" },\n  { id: 2, name: \"Abena Mensah\", role: \"Editor\", status: \"Active\" },\n  { id: 3, name: \"Kofi Owusu\", role: \"Viewer\", status: \"Inactive\" },\n  { id: 4, name: \"Esi Boateng\", role: \"Editor\", status: \"Active\" },\n  { id: 5, name: \"Yaw Adom\", role: \"Viewer\", status: \"Pending\" },\n  { id: 6, name: \"Nana Yeboah\", role: \"Admin\", status: \"Active\" },\n];\n\nfunction statusVariant(status: string) {\n  switch (status) {\n    case \"Active\":\n      return \"success\" as const;\n    case \"Pending\":\n      return \"warning\" as const;\n    default:\n      return \"outline\" as const;\n  }\n}\n\nconst columns: TableColumn<Member>[] = [\n  { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n  { id: \"role\", header: \"Role\", accessorKey: \"role\", sortable: true },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    sortable: true,\n    cell: ({ value }) => (\n      <Badge variant={statusVariant(String(value))}>{String(value)}</Badge>\n    ),\n  },\n];\n\nexport function TableFilterSpreadExample() {\n  const { page, pageSize, pageSizeOptions, search, filters } = useTableState({\n    defaultPageSize: 5,\n    paramPrefix: \"spread-filter\",\n  });\n  const [roleValue, setRoleValue] = useState(filters.role ?? \"\");\n  const [statusValue, setStatusValue] = useState(filters.status ?? \"\");\n\n  const filtered = useMemo(\n    () =>\n      members.filter((m) => {\n        const matchSearch = m.name.toLowerCase().includes(search.toLowerCase());\n        const matchRole = !filters.role || m.role === filters.role;\n        const matchStatus = !filters.status || m.status === filters.status;\n        return matchSearch && matchRole && matchStatus;\n      }),\n    [search, filters],\n  );\n\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);\n\n  return (\n    <Table paramPrefix=\"spread-filter\">\n      <TableHeader>\n        <TableSearch placeholder=\"Search members...\" />\n        <TableFilter variant=\"spread\">\n          <Dropdown\n            name=\"role\"\n            value={roleValue || null}\n            onValueChange={(v) => setRoleValue(v ?? \"\")}\n            options={[\n              { value: \"Admin\", label: \"Admin\" },\n              { value: \"Editor\", label: \"Editor\" },\n              { value: \"Viewer\", label: \"Viewer\" },\n            ]}\n            placeholder=\"All roles\"\n            aria-label=\"Filter by role\"\n          />\n          <Dropdown\n            name=\"status\"\n            value={statusValue || null}\n            onValueChange={(v) => setStatusValue(v ?? \"\")}\n            options={[\n              { value: \"Active\", label: \"Active\" },\n              { value: \"Inactive\", label: \"Inactive\" },\n              { value: \"Pending\", label: \"Pending\" },\n            ]}\n            placeholder=\"All statuses\"\n            aria-label=\"Filter by status\"\n          />\n        </TableFilter>\n      </TableHeader>\n      <TableContent columns={columns} data={paged} rowKey={(m) => m.id} />\n      <TableFooter>\n        <TablePagination\n          totalPages={totalPages}\n          totalItems={filtered.length}\n          pageSizeOptions={pageSizeOptions}\n        />\n      </TableFooter>\n    </Table>\n  );\n}\n"
+    },
+    {
+      "file": "table-panel.example.tsx",
+      "importName": "tablePanelSource",
+      "title": "Table Panel",
+      "components": [
+        "Badge",
+        "Table",
+        "TableColumn",
+        "TableContent",
+        "TableFooter",
+        "TablePagination",
+        "Tabs",
+        "TabsContent",
+        "TabsList",
+        "TabsTrigger",
+        "useTableState"
+      ],
+      "source": "import { useState } from \"react\";\nimport { useTableState } from \"@rfdtech/components\";\nimport type { TableColumn } from \"@rfdtech/components\";\nimport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Table,\n  TableContent,\n  TableFooter,\n  TablePagination,\n  Badge,\n} from \"@rfdtech/components\";\n\ninterface Member {\n  id: number;\n  name: string;\n  role: string;\n  status: string;\n}\n\nconst members: Member[] = [\n  { id: 1, name: \"Kwame Asante\", role: \"Admin\", status: \"Active\" },\n  { id: 2, name: \"Abena Mensah\", role: \"Editor\", status: \"Active\" },\n  { id: 3, name: \"Kofi Owusu\", role: \"Viewer\", status: \"Inactive\" },\n  { id: 4, name: \"Esi Boateng\", role: \"Editor\", status: \"Active\" },\n  { id: 5, name: \"Yaw Adom\", role: \"Viewer\", status: \"Pending\" },\n  { id: 6, name: \"Nana Yeboah\", role: \"Admin\", status: \"Active\" },\n];\n\nfunction statusVariant(status: string) {\n  switch (status) {\n    case \"Active\":\n      return \"success\" as const;\n    case \"Pending\":\n      return \"warning\" as const;\n    default:\n      return \"outline\" as const;\n  }\n}\n\nconst columns: TableColumn<Member>[] = [\n  { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n  { id: \"role\", header: \"Role\", accessorKey: \"role\", sortable: true },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    sortable: true,\n    cell: ({ value }) => (\n      <Badge variant={statusVariant(String(value))}>{String(value)}</Badge>\n    ),\n  },\n];\n\nconst TABS = [\n  { value: \"all\", label: \"All\", data: members },\n  {\n    value: \"active\",\n    label: \"Active\",\n    data: members.filter((m) => m.status === \"Active\"),\n  },\n  {\n    value: \"pending\",\n    label: \"Pending\",\n    data: members.filter((m) => m.status === \"Pending\"),\n  },\n];\n\nfunction PanelTable({ prefix, data }: { prefix: string; data: Member[] }) {\n  const { page, pageSize, pageSizeOptions } = useTableState({\n    defaultPageSize: 5,\n    paramPrefix: prefix,\n  });\n  const totalPages = Math.max(1, Math.ceil(data.length / pageSize));\n  const paged = data.slice((page - 1) * pageSize, page * pageSize);\n\n  return (\n    <Table paramPrefix={prefix}>\n      <TableContent\n        variant=\"panel\"\n        columns={columns}\n        data={paged}\n        rowKey={(m) => m.id}\n      />\n      <TableFooter>\n        <TablePagination\n          totalPages={totalPages}\n          totalItems={data.length}\n          pageSizeOptions={pageSizeOptions}\n        />\n      </TableFooter>\n    </Table>\n  );\n}\n\nexport function TablePanelExample() {\n  const [tab, setTab] = useState(\"all\");\n\n  return (\n    <Tabs variant=\"pill\" value={tab} onValueChange={setTab}>\n      <TabsList>\n        {TABS.map((t) => (\n          <TabsTrigger key={t.value} value={t.value}>\n            {t.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {TABS.map((t) => (\n        <TabsContent key={t.value} value={t.value}>\n          <PanelTable prefix={`panel-${t.value}`} data={t.data} />\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n"
+    },
+    {
+      "file": "table.example.tsx",
+      "importName": "tableSource",
+      "title": "Table",
+      "components": [
+        "Badge",
+        "Dropdown",
+        "Table",
+        "TableBulkActions",
+        "TableColumn",
+        "TableContent",
+        "TableFilter",
+        "TableFooter",
+        "TableHeader",
+        "TablePagination",
+        "TableRowAction",
+        "TableSearch",
+        "useTableState"
+      ],
+      "source": "import { useCallback, useState } from \"react\";\nimport { useTableState } from \"@rfdtech/components\";\nimport type { TableColumn, TableRowAction } from \"@rfdtech/components\";\nimport {\n  Table,\n  TableHeader,\n  TableSearch,\n  TableFilter,\n  TableContent,\n  TableBulkActions,\n  TableFooter,\n  TablePagination,\n  Dropdown,\n  Badge,\n} from \"@rfdtech/components\";\nimport { Trash2, Eye, Edit } from \"lucide-react\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n  status: string;\n}\n\nconst initialUsers: User[] = [\n  { id: 1, name: \"Kwame Asante\", email: \"kwame@clet.edu.gh\", role: \"Admin\", status: \"Active\" },\n  { id: 2, name: \"Abena Mensah\", email: \"abena@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 3, name: \"Kofi Owusu\", email: \"kofi@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n  { id: 4, name: \"Esi Boateng\", email: \"esi@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 5, name: \"Yaw Adom\", email: \"yaw@clet.edu.gh\", role: \"Viewer\", status: \"Pending\" },\n  { id: 6, name: \"Nana Yeboah\", email: \"nana@clet.edu.gh\", role: \"Admin\", status: \"Active\" },\n  { id: 7, name: \"Akua Donkor\", email: \"akua@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 8, name: \"Kwesi Appiah\", email: \"kwesi@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n  { id: 9, name: \"Adwoa Sarpong\", email: \"adwoa@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 10, name: \"Kobina Ennin\", email: \"kobina@clet.edu.gh\", role: \"Viewer\", status: \"Pending\" },\n  { id: 11, name: \"Efua Sutherland\", email: \"efua@clet.edu.gh\", role: \"Editor\", status: \"Active\" },\n  { id: 12, name: \"Paapa Essiedu\", email: \"paapa@clet.edu.gh\", role: \"Viewer\", status: \"Inactive\" },\n];\n\nfunction statusVariant(status: string) {\n  switch (status) {\n    case \"Active\":\n      return \"success\" as const;\n    case \"Pending\":\n      return \"warning\" as const;\n    case \"Inactive\":\n      return \"outline\" as const;\n    default:\n      return \"default\" as const;\n  }\n}\n\nconst columns: TableColumn<User>[] = [\n  { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n  { id: \"email\", header: \"Email\", accessorKey: \"email\", sortable: true },\n  { id: \"role\", header: \"Role\", accessorKey: \"role\", sortable: true },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    sortable: true,\n    cell: ({ value }) => (\n      <Badge variant={statusVariant(String(value))}>{String(value)}</Badge>\n    ),\n  },\n];\n\nconst rowActions: TableRowAction<User>[] = [\n  { id: \"view\", label: \"View\", icon: <Eye size={14} strokeWidth={1.5} />, onClick: () => {} },\n  { id: \"edit\", label: \"Edit\", icon: <Edit size={14} strokeWidth={1.5} />, onClick: () => {} },\n  { id: \"delete\", label: \"Delete\", icon: <Trash2 size={14} strokeWidth={1.5} />, onClick: () => {}, variant: \"destructive\" },\n];\n\nexport function TableExample() {\n  const [users, setUsers] = useState(initialUsers);\n  const [selected, setSelected] = useState<Set<string | number>>(new Set());\n\n  const { page, pageSize, pageSizeOptions, search, filters } = useTableState({\n    defaultPageSize: 5,\n  });\n  const [roleValue, setRoleValue] = useState(filters.role ?? \"\");\n\n  const filtered = users.filter(\n    (u) => {\n      if (filters.role && u.role !== filters.role) return false;\n      return (\n        u.name.toLowerCase().includes(search.toLowerCase()) ||\n        u.email.toLowerCase().includes(search.toLowerCase())\n      );\n    },\n  );\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);\n\n  const handleDelete = useCallback((ids: Set<string | number>) => {\n    setUsers((prev) => prev.filter((u) => !ids.has(u.id)));\n    setSelected(new Set());\n  }, []);\n\n  return (\n    <Table paramPrefix=\"users\">\n      <TableHeader>\n        <TableSearch placeholder=\"Search users...\" />\n        <TableFilter>\n          <Dropdown\n            name=\"role\"\n            value={roleValue || null}\n            onValueChange={(v) => setRoleValue(v ?? \"\")}\n            options={[\n              { value: \"Admin\", label: \"Admin\" },\n              { value: \"Editor\", label: \"Editor\" },\n              { value: \"Viewer\", label: \"Viewer\" },\n            ]}\n            placeholder=\"All roles\"\n            aria-label=\"Filter by role\"\n          />\n        </TableFilter>\n      </TableHeader>\n      <TableContent\n        selectable\n        selectedIds={selected}\n        onSelectionChange={setSelected}\n        rowActions={rowActions}\n        columns={columns}\n        data={paged}\n        rowKey={(u) => u.id}\n      />\n      <TableBulkActions\n        selectedIds={selected}\n        onClear={() => setSelected(new Set())}\n        actions={[\n          {\n            id: \"delete\",\n            label: \"Delete\",\n            icon: <Trash2 size={14} strokeWidth={1.5} />,\n            onClick: handleDelete,\n            destructive: true,\n          },\n        ]}\n      />\n      <TableFooter>\n        <TablePagination\n          totalPages={totalPages}\n          totalItems={filtered.length}\n          pageSizeOptions={pageSizeOptions}\n        />\n      </TableFooter>\n    </Table>\n  );\n}\n"
+    }
+  ],
+  "tabs": [
+    {
+      "file": "table-tabs-filter.example.tsx",
+      "importName": "tableTabsFilterSource",
+      "title": "Table Tabs Filter",
+      "components": [
+        "Badge",
+        "Table",
+        "TableColumn",
+        "TableContent",
+        "TableFooter",
+        "TablePagination",
+        "Tabs",
+        "TabsList",
+        "TabsTrigger",
+        "useTableState"
+      ],
+      "source": "import { useState } from \"react\";\nimport type { TableColumn } from \"@rfdtech/components\";\nimport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  Table,\n  TableContent,\n  TableFooter,\n  TablePagination,\n  Badge,\n  useTableState,\n} from \"@rfdtech/components\";\n\ninterface Registrant {\n  id: number;\n  name: string;\n  institution: string;\n  status: string;\n}\n\nconst registrants: Registrant[] = [\n  { id: 1, name: \"Kwame Asante\", institution: \"Achimota School\", status: \"Active\" },\n  { id: 2, name: \"Abena Mensah\", institution: \"Wesley Girls' High\", status: \"Pending\" },\n  { id: 3, name: \"Kofi Owusu\", institution: \"Prempeh College\", status: \"Active\" },\n  { id: 4, name: \"Esi Boateng\", institution: \"Holy Child School\", status: \"Active\" },\n  { id: 5, name: \"Yaw Adom\", institution: \"Mfantsipim School\", status: \"Pending\" },\n  { id: 6, name: \"Nana Yeboah\", institution: \"Aburi Girls'\", status: \"Active\" },\n  { id: 7, name: \"Akua Donkor\", institution: \"St. Augustine's\", status: \"Pending\" },\n  { id: 8, name: \"Kwesi Appiah\", institution: \"Adisadel College\", status: \"Active\" },\n  { id: 9, name: \"Adwoa Sarpong\", institution: \"Opoku Ware School\", status: \"Active\" },\n  { id: 10, name: \"Kobina Ennin\", institution: \"Ghana National College\", status: \"Pending\" },\n];\n\nfunction statusVariant(status: string) {\n  switch (status) {\n    case \"Active\":\n      return \"success\" as const;\n    case \"Pending\":\n      return \"warning\" as const;\n    default:\n      return \"outline\" as const;\n  }\n}\n\nconst columns: TableColumn<Registrant>[] = [\n  { id: \"name\", header: \"Name\", accessorKey: \"name\", sortable: true },\n  { id: \"institution\", header: \"Institution\", accessorKey: \"institution\", sortable: true },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n    sortable: true,\n    cell: ({ value }) => (\n      <Badge variant={statusVariant(String(value))}>{String(value)}</Badge>\n    ),\n  },\n];\n\nconst STATUS_TABS = [\n  { value: \"all\", label: \"All\" },\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n] as const;\n\ntype StatusTab = (typeof STATUS_TABS)[number][\"value\"];\n\nfunction filterByTab(data: Registrant[], tab: StatusTab): Registrant[] {\n  if (tab === \"active\") return data.filter((r) => r.status === \"Active\");\n  if (tab === \"pending\") return data.filter((r) => r.status === \"Pending\");\n  return data;\n}\n\n/**\n * Status tabs act as a segment filter above ONE shared table — switching tabs\n * re-filters the same `data` array and resets pagination, rather than\n * mounting a separate `<Table>`/`<TableContent>` per tab.\n */\nexport function TableTabsFilterExample() {\n  const [tab, setTab] = useState<StatusTab>(\"all\");\n  const { page, pageSize, pageSizeOptions, setPage } = useTableState({\n    defaultPageSize: 5,\n    paramPrefix: \"registry-results\",\n  });\n\n  const filtered = filterByTab(registrants, tab);\n  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));\n  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);\n\n  return (\n    <Tabs\n      variant=\"pill\"\n      value={tab}\n      onValueChange={(value) => {\n        setTab(value as StatusTab);\n        setPage(1);\n      }}\n    >\n      <TabsList>\n        {STATUS_TABS.map((t) => (\n          <TabsTrigger key={t.value} value={t.value}>\n            {t.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <Table paramPrefix=\"registry-results\">\n        <TableContent columns={columns} data={paged} rowKey={(r) => r.id} />\n        <TableFooter>\n          <TablePagination\n            totalPages={totalPages}\n            totalItems={filtered.length}\n            pageSizeOptions={pageSizeOptions}\n          />\n        </TableFooter>\n      </Table>\n    </Tabs>\n  );\n}\n"
+    },
+    {
+      "file": "tabs-line.example.tsx",
+      "importName": "tabsLineSource",
+      "title": "Tabs Line",
+      "components": [
+        "Tabs",
+        "TabsContent",
+        "TabsList",
+        "TabsTrigger"
+      ],
+      "source": "import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@rfdtech/components\";\n\nexport function TabsLineExample() {\n  return (\n    <Tabs defaultValue=\"account\" variant=\"line\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"security\">Security</TabsTrigger>\n        <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        Manage your profile details and contact information.\n      </TabsContent>\n      <TabsContent value=\"security\">\n        Update your password and two-factor authentication settings.\n      </TabsContent>\n      <TabsContent value=\"notifications\">\n        Choose which email and in-app alerts you receive.\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
+    },
+    {
+      "file": "tabs-pill.example.tsx",
+      "importName": "tabsPillSource",
+      "title": "Tabs Pill",
+      "components": [
+        "Tabs",
+        "TabsContent",
+        "TabsList",
+        "TabsTrigger"
+      ],
+      "source": "import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@rfdtech/components\";\n\nexport function TabsPillExample() {\n  return (\n    <Tabs defaultValue=\"account\" variant=\"pill\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"security\">Security</TabsTrigger>\n        <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        Manage your profile details and contact information.\n      </TabsContent>\n      <TabsContent value=\"security\">\n        Update your password and two-factor authentication settings.\n      </TabsContent>\n      <TabsContent value=\"notifications\">\n        Choose which email and in-app alerts you receive.\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
+    },
+    {
+      "file": "tabs.example.tsx",
+      "importName": "tabsSource",
+      "title": "Tabs",
+      "components": [
+        "Tabs",
+        "TabsContent",
+        "TabsList",
+        "TabsTrigger"
+      ],
+      "source": "import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@rfdtech/components\";\n\nexport function TabsExample() {\n  return (\n    <Tabs defaultValue=\"account\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"security\">Security</TabsTrigger>\n        <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        Manage your profile details and contact information.\n      </TabsContent>\n      <TabsContent value=\"security\">\n        Update your password and two-factor authentication settings.\n      </TabsContent>\n      <TabsContent value=\"notifications\">\n        Choose which email and in-app alerts you receive.\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
+    }
+  ],
+  "theme": [],
+  "timeline": [
+    {
+      "file": "timeline.example.tsx",
+      "importName": "timelineSource",
+      "title": "Timeline",
+      "components": [
+        "Timeline",
+        "TimelineData",
+        "TimelineFooter",
+        "TimelineItem",
+        "TimelineTitle"
+      ],
+      "source": "import { Check } from \"lucide-react\";\nimport {\n  Timeline,\n  TimelineData,\n  TimelineFooter,\n  TimelineItem,\n  TimelineTitle,\n} from \"@rfdtech/components\";\n\nconst history = [\n  {\n    title: \"Case reported\",\n    date: \"12 Jun 2026\",\n    description: \"HR Officer intake\",\n    mode: \"success\" as const,\n  },\n  {\n    title: \"Assigned to HR Manager\",\n    date: \"13 Jun 2026\",\n    description: \"You\",\n    mode: \"success\" as const,\n  },\n  {\n    title: \"Initial interview scheduled\",\n    date: \"20 Jun 2026\",\n    description: \"Complainant & respondent\",\n    mode: \"success\" as const,\n  },\n  {\n    title: \"Response overdue\",\n    date: \"Since 3 Jul 2026\",\n    description: \"You\",\n    mode: \"warning\" as const,\n  },\n];\n\nexport function TimelineExample() {\n  return (\n    <section className=\"clet-card\" style={{ padding: \"24px\" }}>\n      <h2\n        className=\"clet-card__title\"\n        style={{\n          margin: \"0 0 24px\",\n          fontSize: \"20px\",\n          fontWeight: 600,\n          color: \"var(--clet-text)\",\n        }}\n      >\n        Case History\n      </h2>\n      <Timeline>\n        {history.map((item) => (\n          <TimelineItem\n            key={item.title}\n            mode={item.mode}\n            icon={\n              item.mode === \"warning\" ? null : (\n                <Check size={10} strokeWidth={3} />\n              )\n            }\n          >\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineData>{item.date}</TimelineData>\n            <TimelineFooter>{item.description}</TimelineFooter>\n          </TimelineItem>\n        ))}\n      </Timeline>\n    </section>\n  );\n}\n"
+    }
+  ],
+  "toast": [
+    {
+      "file": "toast-icons.example.tsx",
+      "importName": "toastIconsSource",
+      "title": "Toast Icons",
+      "components": [
+        "Button",
+        "ToastProvider",
+        "Toaster",
+        "useToast"
+      ],
+      "source": "import {\n  Bell,\n  CheckCircle2,\n  Info,\n  Paperclip,\n} from \"lucide-react\";\nimport { Button, ToastProvider, Toaster, useToast } from \"@rfdtech/components\";\n\nfunction ToastIconTriggers() {\n  const { toast } = useToast();\n\n  return (\n    <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"New message\",\n            description: \"Alex sent you a file.\",\n            icon: <Bell size={18} strokeWidth={2} aria-hidden />,\n          })\n        }\n      >\n        Default + icon\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Backup complete\",\n            variant: \"success\",\n            icon: <CheckCircle2 size={18} strokeWidth={2} aria-hidden />,\n          })\n        }\n      >\n        Title only\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Attachment added\",\n            description: \"report-q2.pdf\",\n            variant: \"default\",\n            icon: <Paperclip size={18} strokeWidth={2} aria-hidden />,\n          })\n        }\n      >\n        Custom SVG\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Tip\",\n            description: \"Any React node works — emoji, SVG, or component.\",\n            icon: <span aria-hidden>💡</span>,\n          })\n        }\n      >\n        Emoji icon\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Session expiring\",\n            description: \"Save your work to keep changes.\",\n            variant: \"warning\",\n            icon: <Info size={18} strokeWidth={2} aria-hidden />,\n            action: {\n              label: \"Extend\",\n              onClick: () => {},\n            },\n          })\n        }\n      >\n        Icon + action\n      </Button>\n    </div>\n  );\n}\n\nexport function ToastIconsExample() {\n  return (\n    <ToastProvider>\n      <ToastIconTriggers />\n      <Toaster />\n    </ToastProvider>\n  );\n}\n"
+    },
+    {
+      "file": "toast.example.tsx",
+      "importName": "toastSource",
+      "title": "Toast",
+      "components": [
+        "Button",
+        "ToastProvider",
+        "Toaster",
+        "useToast"
+      ],
+      "source": "import {\n  AlertTriangle,\n  CheckCircle2,\n  CircleX,\n  Info,\n} from \"lucide-react\";\nimport { Button, ToastProvider, Toaster, useToast } from \"@rfdtech/components\";\n\nfunction ToastTriggers() {\n  const { toast } = useToast();\n\n  return (\n    <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Profile saved\",\n            description: \"Your changes were applied.\",\n            variant: \"success\",\n            icon: <CheckCircle2 size={18} strokeWidth={2} aria-hidden />,\n          })\n        }\n      >\n        Success\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Sync in progress\",\n            description: \"This may take a few seconds.\",\n            variant: \"warning\",\n            icon: <AlertTriangle size={18} strokeWidth={2} aria-hidden />,\n          })\n        }\n      >\n        Warning\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() =>\n          toast({\n            title: \"Upload failed\",\n            description: \"The file could not be uploaded.\",\n            variant: \"error\",\n            icon: <CircleX size={18} strokeWidth={2} aria-hidden />,\n            action: {\n              label: \"Retry\",\n              onClick: () => {\n                toast({\n                  title: \"Retrying upload\",\n                  variant: \"default\",\n                  icon: <Info size={18} strokeWidth={2} aria-hidden />,\n                });\n              },\n            },\n          })\n        }\n      >\n        Error with action\n      </Button>\n    </div>\n  );\n}\n\nexport function ToastExample() {\n  return (\n    <ToastProvider>\n      <ToastTriggers />\n      <Toaster />\n    </ToastProvider>\n  );\n}\n"
+    }
+  ],
+  "tooltip": [
+    {
+      "file": "tooltip.example.tsx",
+      "importName": "tooltipSource",
+      "title": "Tooltip",
+      "components": [
+        "Tooltip"
+      ],
+      "source": "import { Tooltip } from \"@rfdtech/components\";\n\nexport function TooltipExample() {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 16,\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: 48,\n      }}\n    >\n      <Tooltip content=\"Top tooltip\" side=\"top\">\n        <button\n          type=\"button\"\n          style={{\n            padding: \"8px 14px\",\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n            color: \"var(--clet-text)\",\n            fontFamily: \"var(--clet-font)\",\n            fontSize: 14,\n            cursor: \"default\",\n          }}\n        >\n          Top\n        </button>\n      </Tooltip>\n      <Tooltip content=\"Right tooltip\" side=\"right\">\n        <button\n          type=\"button\"\n          style={{\n            padding: \"8px 14px\",\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n            color: \"var(--clet-text)\",\n            fontFamily: \"var(--clet-font)\",\n            fontSize: 14,\n            cursor: \"default\",\n          }}\n        >\n          Right\n        </button>\n      </Tooltip>\n      <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n        <button\n          type=\"button\"\n          style={{\n            padding: \"8px 14px\",\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n            color: \"var(--clet-text)\",\n            fontFamily: \"var(--clet-font)\",\n            fontSize: 14,\n            cursor: \"default\",\n          }}\n        >\n          Bottom\n        </button>\n      </Tooltip>\n      <Tooltip content=\"Left tooltip\" side=\"left\">\n        <button\n          type=\"button\"\n          style={{\n            padding: \"8px 14px\",\n            border: \"1px solid var(--clet-border)\",\n            borderRadius: \"var(--clet-radius-base)\",\n            background: \"var(--clet-bg)\",\n            color: \"var(--clet-text)\",\n            fontFamily: \"var(--clet-font)\",\n            fontSize: 14,\n            cursor: \"default\",\n          }}\n        >\n          Left\n        </button>\n      </Tooltip>\n    </div>\n  );\n}\n"
+    }
+  ],
+  "upload-field": [
+    {
+      "file": "upload-field-form.example.tsx",
+      "importName": "uploadFieldFormSource",
+      "title": "Upload Field Form",
+      "components": [
+        "Button",
+        "Dialog",
+        "DialogContent",
+        "DialogDescription",
+        "DialogTitle",
+        "Field",
+        "FieldControl",
+        "FieldError",
+        "FieldLabel",
+        "Form",
+        "FormField",
+        "UploadField"
+      ],
+      "source": "import { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n  Form,\n  FormField,\n  UploadField,\n} from \"@rfdtech/components\";\n\nconst ACCEPTED_TYPES = [\"image/png\", \"image/jpeg\", \"application/pdf\"];\nconst MAX_SIZE = 5 * 1024 * 1024; // 5 MB\nconst MIN_SIZE = 1024; // 1 KB\nconst MAX_NAME_LENGTH = 100;\n\nfunction formatSize(bytes: number) {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\nconst uploadSchema = z.object({\n  file: z\n    .instanceof(File, { message: \"Please select a file\" })\n    .refine((f) => ACCEPTED_TYPES.includes(f.type), {\n      message: \"Only PNG, JPEG, and PDF files are accepted\",\n    })\n    .refine((f) => f.size >= MIN_SIZE, {\n      message: \"File must be at least 1 KB\",\n    })\n    .refine((f) => f.size <= MAX_SIZE, {\n      message: \"File size must be 5 MB or less\",\n    })\n    .refine((f) => f.name.length <= MAX_NAME_LENGTH, {\n      message: \"File name must be 100 characters or less\",\n    }),\n});\n\ntype UploadFormValues = z.infer<typeof uploadSchema>;\n\nexport function UploadFieldFormExample() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [result, setResult] = useState<{\n    success: boolean;\n    fileName?: string;\n    fileSize?: number;\n  } | null>(null);\n\n  const form = useForm<UploadFormValues>({\n    resolver: zodResolver(uploadSchema),\n    defaultValues: { file: undefined },\n  });\n\n  function onSubmit(data: UploadFormValues) {\n    const file = data.file!;\n    setResult({ success: true, fileName: file.name, fileSize: file.size });\n    setDialogOpen(true);\n  }\n\n  function onInvalid() {\n    setResult({ success: false });\n    setDialogOpen(true);\n  }\n\n  return (\n    <div style={{ maxWidth: 480, width: \"100%\" }}>\n      <Form {...form}>\n        <form\n          onSubmit={form.handleSubmit(onSubmit, onInvalid)}\n          style={{ display: \"grid\", gap: 16, width: \"100%\" }}\n        >\n          <FormField\n            control={form.control}\n            name=\"file\"\n            render={({ field, fieldState }) => (\n              <Field invalid={!!fieldState.error} style={{ minWidth: \"100%\", flex: 1 }}>\n                <FieldLabel>Upload file</FieldLabel>\n                <FieldControl>\n                  <div style={{ width: \"100%\" }}>\n                    <UploadField\n                    accept=\".png,.jpg,.jpeg,.pdf\"\n                    maxSize={MAX_SIZE}\n                    value={field.value ?? null}\n                    onChange={field.onChange}\n                    name={field.name}\n                    ref={field.ref}\n                  />\n                  </div>\n                </FieldControl>\n                <FieldError>{fieldState.error?.message}</FieldError>\n              </Field>\n            )}\n          />\n          <Button type=\"submit\" variant=\"primary\" style={{ width: \"100%\" }}>\n            Submit\n          </Button>\n        </form>\n      </Form>\n\n      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <DialogContent showCloseButton>\n          <DialogTitle>\n            {result?.success ? \"File accepted\" : \"Validation failed\"}\n          </DialogTitle>\n          <DialogDescription>\n            {result?.success\n              ? `\"${result.fileName}\" (${formatSize(result.fileSize!)}) is valid.`\n              : \"Please fix the validation errors and try again.\"}\n          </DialogDescription>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n"
+    },
+    {
+      "file": "upload-field-multiple.example.tsx",
+      "importName": "uploadFieldMultipleSource",
+      "title": "Upload Field Multiple",
+      "components": [
+        "UploadField"
+      ],
+      "source": "import { UploadField } from \"@rfdtech/components\";\nimport { useState } from \"react\";\n\nexport function UploadFieldMultipleExample() {\n  const [files, setFiles] = useState<File[] | null>(null);\n\n  return (\n    <UploadField\n      multiple\n      accept=\"image/*,.pdf\"\n      value={files}\n      onChange={(v) => setFiles(v as File[] | null)}\n    />\n  );\n}\n"
+    },
+    {
+      "file": "upload-field-status-cards.example.tsx",
+      "importName": "uploadFieldStatusCardsSource",
+      "title": "Upload Field Status Cards",
+      "components": [
+        "UploadField",
+        "UploadFieldFileStatus"
+      ],
+      "source": "import { UploadField } from \"@rfdtech/components\";\nimport type { UploadFieldFileStatus } from \"@rfdtech/components\";\n\nfunction fakeFile(name: string, type: string, size: number) {\n  return new File([new ArrayBuffer(size)], name, { type });\n}\n\nconst files = [\n  fakeFile(\"my-cv.pdf\", \"application/pdf\", 120 * 1024),\n  fakeFile(\"my-cv.pdf\", \"application/pdf\", 120 * 1024),\n  fakeFile(\"my-cv.pdf\", \"application/pdf\", 120 * 1024),\n];\n\nconst statuses: UploadFieldFileStatus[] = [\n  { status: \"uploading\", progress: 45 },\n  { status: \"completed\" },\n  { status: \"failed\", error: \"Upload failed\" },\n];\n\nexport function UploadFieldStatusCardsExample() {\n  return (\n    <UploadField\n      multiple\n      value={files}\n      fileStatuses={statuses}\n      onChange={() => {}}\n      onCancel={(file) => console.log(\"cancel\", file.name)}\n      onRetry={(file) => console.log(\"retry\", file.name)}\n    />\n  );\n}\n"
+    },
+    {
+      "file": "upload-field.example.tsx",
+      "importName": "uploadFieldSource",
+      "title": "Upload Field",
+      "components": [
+        "UploadField"
+      ],
+      "source": "import { UploadField } from \"@rfdtech/components\";\n\nexport function UploadFieldExample() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, maxWidth: 480 }}>\n      <UploadField accept=\".csv\" maxSize={10 * 1024 * 1024} onChange={(f) => console.log(f)} />\n      <UploadField invalid />\n      <UploadField disabled />\n    </div>\n  );\n}\n"
+    }
+  ]
+}