@payez/next-mvp 4.8.1 → 4.8.2

package/src/pages/roles/components.tsx

@@ -1,294 +1,294 @@
-/**
- * Shared Role Components for @payez/next-mvp
- *
- * Components for displaying roles and permissions:
- * - RoleBadge: Small badge showing role name and source
- * - RoleCard: Expandable card showing role details and permissions
- * - PermissionsList: Grouped list of permissions
- *
- * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
- */
-
-'use client';
-
-import React, { useState } from 'react';
-
-// Types
-export interface Permission {
-  type: 'page' | 'feature';
-  pattern?: string;
-  name?: string;
-  display: string;
-}
-
-export interface Role {
-  role_name: string;
-  display_name?: string;
-  description?: string;
-  assigned_at?: string;
-  status?: 'active' | 'pending' | 'expired';
-  permissions?: Permission[];
-  user_count?: number;
-  permission_count?: number;
-  is_system_role?: boolean;
-}
-
-// Role source type
-export type RoleSource = 'idp' | 'app';
-
-// Format date helper
-function formatDate(dateString?: string): string {
-  if (!dateString) return '';
-  try {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  } catch {
-    return dateString;
-  }
-}
-
-// Role icon based on name
-function getRoleIcon(roleName: string): string {
-  if (roleName.includes('admin')) return 'shield';
-  if (roleName.includes('editor')) return 'edit';
-  if (roleName.includes('viewer')) return 'eye';
-  return 'user';
-}
-
-/**
- * RoleBadge - Small badge showing role name and source
- */
-export function RoleBadge({
-  roleName,
-  source,
-  size = 'md',
-  isDark = true,
-}: {
-  roleName: string;
-  source: RoleSource;
-  size?: 'sm' | 'md';
-  isDark?: boolean;
-}) {
-  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-2.5 py-1';
-  const sourceColor = source === 'idp'
-    ? isDark ? 'bg-purple-900/30 text-purple-400 border-purple-500/30' : 'bg-purple-100 text-purple-700 border-purple-300'
-    : isDark ? 'bg-blue-900/30 text-blue-400 border-blue-500/30' : 'bg-blue-100 text-blue-700 border-blue-300';
-
-  return (
-    <span className={`inline-flex items-center gap-1 rounded-full border ${sizeClasses} ${sourceColor}`}>
-      {source === 'idp' && (
-        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-        </svg>
-      )}
-      {roleName}
-    </span>
-  );
-}
-
-/**
- * PermissionsList - Grouped list of permissions
- */
-export function PermissionsList({
-  permissions,
-  grouped = true,
-  isDark = true,
-}: {
-  permissions: Permission[];
-  grouped?: boolean;
-  isDark?: boolean;
-}) {
-  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
-  const borderColor = isDark ? 'border-slate-600' : 'border-gray-300';
-
-  if (!permissions || permissions.length === 0) {
-    return <p className={`text-sm ${textMuted}`}>No specific permissions defined</p>;
-  }
-
-  if (!grouped) {
-    return (
-      <ul className="space-y-1">
-        {permissions.map((perm, idx) => (
-          <li key={idx} className={`text-sm ${textMuted} flex items-center gap-2`}>
-            <span className="text-green-400">+</span>
-            {perm.display}
-          </li>
-        ))}
-      </ul>
-    );
-  }
-
-  // Group by type
-  const pagePerms = permissions.filter((p) => p.type === 'page');
-  const featurePerms = permissions.filter((p) => p.type === 'feature');
-
-  return (
-    <div className="space-y-3">
-      {pagePerms.length > 0 && (
-        <div>
-          <p className={`text-xs font-medium uppercase tracking-wider mb-1 ${textMuted}`}>Page Access</p>
-          <ul className={`pl-4 border-l-2 ${borderColor} space-y-1`}>
-            {pagePerms.map((perm, idx) => (
-              <li key={idx} className={`text-sm ${textPrimary}`}>{perm.display}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-      {featurePerms.length > 0 && (
-        <div>
-          <p className={`text-xs font-medium uppercase tracking-wider mb-1 ${textMuted}`}>Features</p>
-          <ul className={`pl-4 border-l-2 ${borderColor} space-y-1`}>
-            {featurePerms.map((perm, idx) => (
-              <li key={idx} className={`text-sm ${textPrimary}`}>{perm.display}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * RoleCard - Expandable card showing role details and permissions
- */
-export function RoleCard({
-  role,
-  source,
-  showPermissions = true,
-  defaultExpanded = false,
-  isDark = true,
-}: {
-  role: Role;
-  source: RoleSource;
-  showPermissions?: boolean;
-  defaultExpanded?: boolean;
-  isDark?: boolean;
-}) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-
-  const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
-  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
-  const hoverBg = isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50';
-
-  const statusColors = {
-    active: isDark ? 'text-green-400' : 'text-green-600',
-    pending: isDark ? 'text-yellow-400' : 'text-yellow-600',
-    expired: isDark ? 'text-red-400' : 'text-red-600',
-  };
-
-  const iconMap: Record<string, React.ReactNode> = {
-    shield: (
-      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-      </svg>
-    ),
-    edit: (
-      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-      </svg>
-    ),
-    eye: (
-      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-      </svg>
-    ),
-    user: (
-      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-      </svg>
-    ),
-  };
-
-  const icon = iconMap[getRoleIcon(role.role_name)] || iconMap.user;
-
-  return (
-    <div className={`rounded-lg border ${borderColor} ${cardBg} overflow-hidden`}>
-      {/* Header */}
-      <div className={`p-4 ${showPermissions ? `cursor-pointer ${hoverBg}` : ''}`} onClick={() => showPermissions && setExpanded(!expanded)}>
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-3">
-            <div className={`p-2 rounded-lg ${isDark ? 'bg-slate-700' : 'bg-gray-100'} ${textMuted}`}>
-              {icon}
-            </div>
-            <div>
-              <div className="flex items-center gap-2">
-                <h3 className={`font-semibold ${textPrimary}`}>{role.display_name || role.role_name}</h3>
-                {source === 'idp' && (
-                  <svg className={`w-4 h-4 ${textMuted}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                  </svg>
-                )}
-              </div>
-              <p className={`text-sm ${textMuted}`}>{role.description || 'No description'}</p>
-              {role.assigned_at && (
-                <p className={`text-xs ${textMuted} mt-1`}>Assigned: {formatDate(role.assigned_at)}</p>
-              )}
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            {role.status && (
-              <span className={`flex items-center gap-1 text-sm ${statusColors[role.status]}`}>
-                <span className="w-2 h-2 rounded-full bg-current" />
-                {role.status.charAt(0).toUpperCase() + role.status.slice(1)}
-              </span>
-            )}
-            {showPermissions && (
-              <svg
-                className={`w-5 h-5 transition-transform ${expanded ? 'rotate-180' : ''} ${textMuted}`}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Permissions (expandable) */}
-      {showPermissions && expanded && role.permissions && (
-        <div className={`px-4 pb-4 pt-2 border-t ${borderColor}`}>
-          <PermissionsList permissions={role.permissions} isDark={isDark} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * RoleSourceHeader - Section header for role groups
- */
-export function RoleSourceHeader({
-  source,
-  count,
-  isDark = true,
-}: {
-  source: RoleSource;
-  count?: number;
-  isDark?: boolean;
-}) {
-  const bgColor = isDark ? 'bg-slate-700' : 'bg-gray-100';
-  const textColor = isDark ? 'text-slate-300' : 'text-gray-700';
-
-  const labels = {
-    idp: 'Identity Roles (from PayEz IDP)',
-    app: 'Application Roles',
-  };
-
-  return (
-    <div className={`${bgColor} px-4 py-2 rounded-lg flex items-center justify-between`}>
-      <span className={`text-sm font-medium ${textColor}`}>{labels[source]}</span>
-      {count !== undefined && (
-        <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{count} role{count !== 1 ? 's' : ''}</span>
-      )}
-    </div>
-  );
-}
+/**
+ * Shared Role Components for @payez/next-mvp
+ *
+ * Components for displaying roles and permissions:
+ * - RoleBadge: Small badge showing role name and source
+ * - RoleCard: Expandable card showing role details and permissions
+ * - PermissionsList: Grouped list of permissions
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+
+// Types
+export interface Permission {
+  type: 'page' | 'feature';
+  pattern?: string;
+  name?: string;
+  display: string;
+}
+
+export interface Role {
+  role_name: string;
+  display_name?: string;
+  description?: string;
+  assigned_at?: string;
+  status?: 'active' | 'pending' | 'expired';
+  permissions?: Permission[];
+  user_count?: number;
+  permission_count?: number;
+  is_system_role?: boolean;
+}
+
+// Role source type
+export type RoleSource = 'idp' | 'app';
+
+// Format date helper
+function formatDate(dateString?: string): string {
+  if (!dateString) return '';
+  try {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  } catch {
+    return dateString;
+  }
+}
+
+// Role icon based on name
+function getRoleIcon(roleName: string): string {
+  if (roleName.includes('admin')) return 'shield';
+  if (roleName.includes('editor')) return 'edit';
+  if (roleName.includes('viewer')) return 'eye';
+  return 'user';
+}
+
+/**
+ * RoleBadge - Small badge showing role name and source
+ */
+export function RoleBadge({
+  roleName,
+  source,
+  size = 'md',
+  isDark = true,
+}: {
+  roleName: string;
+  source: RoleSource;
+  size?: 'sm' | 'md';
+  isDark?: boolean;
+}) {
+  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-2.5 py-1';
+  const sourceColor = source === 'idp'
+    ? isDark ? 'bg-purple-900/30 text-purple-400 border-purple-500/30' : 'bg-purple-100 text-purple-700 border-purple-300'
+    : isDark ? 'bg-blue-900/30 text-blue-400 border-blue-500/30' : 'bg-blue-100 text-blue-700 border-blue-300';
+
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full border ${sizeClasses} ${sourceColor}`}>
+      {source === 'idp' && (
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+        </svg>
+      )}
+      {roleName}
+    </span>
+  );
+}
+
+/**
+ * PermissionsList - Grouped list of permissions
+ */
+export function PermissionsList({
+  permissions,
+  grouped = true,
+  isDark = true,
+}: {
+  permissions: Permission[];
+  grouped?: boolean;
+  isDark?: boolean;
+}) {
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+  const borderColor = isDark ? 'border-slate-600' : 'border-gray-300';
+
+  if (!permissions || permissions.length === 0) {
+    return <p className={`text-sm ${textMuted}`}>No specific permissions defined</p>;
+  }
+
+  if (!grouped) {
+    return (
+      <ul className="space-y-1">
+        {permissions.map((perm, idx) => (
+          <li key={idx} className={`text-sm ${textMuted} flex items-center gap-2`}>
+            <span className="text-green-400">+</span>
+            {perm.display}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  // Group by type
+  const pagePerms = permissions.filter((p) => p.type === 'page');
+  const featurePerms = permissions.filter((p) => p.type === 'feature');
+
+  return (
+    <div className="space-y-3">
+      {pagePerms.length > 0 && (
+        <div>
+          <p className={`text-xs font-medium uppercase tracking-wider mb-1 ${textMuted}`}>Page Access</p>
+          <ul className={`pl-4 border-l-2 ${borderColor} space-y-1`}>
+            {pagePerms.map((perm, idx) => (
+              <li key={idx} className={`text-sm ${textPrimary}`}>{perm.display}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {featurePerms.length > 0 && (
+        <div>
+          <p className={`text-xs font-medium uppercase tracking-wider mb-1 ${textMuted}`}>Features</p>
+          <ul className={`pl-4 border-l-2 ${borderColor} space-y-1`}>
+            {featurePerms.map((perm, idx) => (
+              <li key={idx} className={`text-sm ${textPrimary}`}>{perm.display}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * RoleCard - Expandable card showing role details and permissions
+ */
+export function RoleCard({
+  role,
+  source,
+  showPermissions = true,
+  defaultExpanded = false,
+  isDark = true,
+}: {
+  role: Role;
+  source: RoleSource;
+  showPermissions?: boolean;
+  defaultExpanded?: boolean;
+  isDark?: boolean;
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
+  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+  const hoverBg = isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50';
+
+  const statusColors = {
+    active: isDark ? 'text-green-400' : 'text-green-600',
+    pending: isDark ? 'text-yellow-400' : 'text-yellow-600',
+    expired: isDark ? 'text-red-400' : 'text-red-600',
+  };
+
+  const iconMap: Record<string, React.ReactNode> = {
+    shield: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+    ),
+    edit: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+      </svg>
+    ),
+    eye: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+      </svg>
+    ),
+    user: (
+      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+      </svg>
+    ),
+  };
+
+  const icon = iconMap[getRoleIcon(role.role_name)] || iconMap.user;
+
+  return (
+    <div className={`rounded-lg border ${borderColor} ${cardBg} overflow-hidden`}>
+      {/* Header */}
+      <div className={`p-4 ${showPermissions ? `cursor-pointer ${hoverBg}` : ''}`} onClick={() => showPermissions && setExpanded(!expanded)}>
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <div className={`p-2 rounded-lg ${isDark ? 'bg-slate-700' : 'bg-gray-100'} ${textMuted}`}>
+              {icon}
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <h3 className={`font-semibold ${textPrimary}`}>{role.display_name || role.role_name}</h3>
+                {source === 'idp' && (
+                  <svg className={`w-4 h-4 ${textMuted}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                )}
+              </div>
+              <p className={`text-sm ${textMuted}`}>{role.description || 'No description'}</p>
+              {role.assigned_at && (
+                <p className={`text-xs ${textMuted} mt-1`}>Assigned: {formatDate(role.assigned_at)}</p>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {role.status && (
+              <span className={`flex items-center gap-1 text-sm ${statusColors[role.status]}`}>
+                <span className="w-2 h-2 rounded-full bg-current" />
+                {role.status.charAt(0).toUpperCase() + role.status.slice(1)}
+              </span>
+            )}
+            {showPermissions && (
+              <svg
+                className={`w-5 h-5 transition-transform ${expanded ? 'rotate-180' : ''} ${textMuted}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Permissions (expandable) */}
+      {showPermissions && expanded && role.permissions && (
+        <div className={`px-4 pb-4 pt-2 border-t ${borderColor}`}>
+          <PermissionsList permissions={role.permissions} isDark={isDark} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * RoleSourceHeader - Section header for role groups
+ */
+export function RoleSourceHeader({
+  source,
+  count,
+  isDark = true,
+}: {
+  source: RoleSource;
+  count?: number;
+  isDark?: boolean;
+}) {
+  const bgColor = isDark ? 'bg-slate-700' : 'bg-gray-100';
+  const textColor = isDark ? 'text-slate-300' : 'text-gray-700';
+
+  const labels = {
+    idp: 'Identity Roles (from PayEz IDP)',
+    app: 'Application Roles',
+  };
+
+  return (
+    <div className={`${bgColor} px-4 py-2 rounded-lg flex items-center justify-between`}>
+      <span className={`text-sm font-medium ${textColor}`}>{labels[source]}</span>
+      {count !== undefined && (
+        <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{count} role{count !== 1 ? 's' : ''}</span>
+      )}
+    </div>
+  );
+}

package/src/pages/roles/index.ts

@@ -1,17 +1,17 @@
-/**
- * Roles Page exports
- *
- * - MyRolesPage: User view of their roles (/account/roles)
- * - Components: RoleCard, RoleBadge, PermissionsList, RoleSourceHeader
- */
-
-export { default as MyRolesPage } from './MyRolesPage';
-export {
-  RoleCard,
-  RoleBadge,
-  PermissionsList,
-  RoleSourceHeader,
-  type Role,
-  type Permission,
-  type RoleSource,
-} from './components';
+/**
+ * Roles Page exports
+ *
+ * - MyRolesPage: User view of their roles (/account/roles)
+ * - Components: RoleCard, RoleBadge, PermissionsList, RoleSourceHeader
+ */
+
+export { default as MyRolesPage } from './MyRolesPage';
+export {
+  RoleCard,
+  RoleBadge,
+  PermissionsList,
+  RoleSourceHeader,
+  type Role,
+  type Permission,
+  type RoleSource,
+} from './components';