@omnibase/shadcn 0.5.1 → 0.5.3

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(index_exports, {
   SwitchActiveTenant: () => SwitchActiveTenant,
   TenantCreator: () => TenantCreator,
   UserInvite: () => UserInvite,
+  UserViewer: () => UserViewer,
   VerificationForm: () => VerificationForm,
   filterInputNodes: () => filterInputNodes,
   findAnchorNode: () => findAnchorNode,
@@ -146,7 +147,7 @@ var alertVariants = (0, import_class_variance_authority.cva)(
         destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
         warning: "border-yellow-500/50 text-yellow-700 bg-yellow-50 dark:border-yellow-500 dark:text-yellow-200 dark:bg-yellow-950/20 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-200",
         success: "border-green-500/50 text-green-700 bg-green-50 dark:border-green-500 dark:text-green-200 dark:bg-green-950/20 [&>svg]:text-green-600 dark:[&>svg]:text-green-200",
-        info: "border-blue-500/50 text-blue-700 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-200"
+        info: "border-blue-500/50 text-blue-900 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-200"
       }
     },
     defaultVariants: {
@@ -2018,6 +2019,256 @@ function RoleCreator({
     ] })
   ] });
 }
+
+// src/user-viewer/index.tsx
+var import_react4 = require("react");
+
+// src/components/ui/table.tsx
+var React16 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/avatar.tsx
+var React17 = require("react");
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/user-viewer/index.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function UserViewer({
+  users,
+  availableRoles,
+  canEditUsers,
+  onRoleUpdate,
+  onRemoveUser
+}) {
+  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
+  const [isUpdating, setIsUpdating] = (0, import_react4.useState)({});
+  const getInitials = (firstName, lastName) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  };
+  const filteredUsers = (0, import_react4.useMemo)(() => {
+    if (!searchQuery.trim()) return users;
+    const query = searchQuery.toLowerCase();
+    return users.filter(
+      (user) => user.first_name.toLowerCase().includes(query) || user.last_name.toLowerCase().includes(query) || user.email.toLowerCase().includes(query) || user.role.toLowerCase().includes(query)
+    );
+  }, [users, searchQuery]);
+  const handleRoleUpdate = async (userId, newRole) => {
+    if (!onRoleUpdate) return;
+    setIsUpdating((prev) => ({ ...prev, [userId]: true }));
+    try {
+      await onRoleUpdate(userId, newRole);
+    } catch (error) {
+      console.error("Failed to update role:", error);
+    } finally {
+      setIsUpdating((prev) => ({ ...prev, [userId]: false }));
+    }
+  };
+  const handleRemoveUser = async (userId) => {
+    if (!onRemoveUser) return;
+    const confirmed = window.confirm(
+      "Are you sure you want to remove this user from the organization?"
+    );
+    if (!confirmed) return;
+    setIsUpdating((prev) => ({ ...prev, [userId]: true }));
+    try {
+      await onRemoveUser(userId);
+    } catch (error) {
+      console.error("Failed to remove user:", error);
+    } finally {
+      setIsUpdating((prev) => ({ ...prev, [userId]: false }));
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { className: "w-full max-w-6xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CardHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardTitle, { children: "Team Members" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardDescription, { children: canEditUsers ? "View and manage users in your organization" : "View users in your organization" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CardContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mb-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label, { htmlFor: "search", className: "sr-only", children: "Search users" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react4.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            Input,
+            {
+              id: "search",
+              type: "text",
+              placeholder: "Search by name, email, or role...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "pl-10"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: "text-xs text-muted-foreground mt-2", children: [
+          "Showing ",
+          filteredUsers.length,
+          " of ",
+          users.length,
+          " users"
+        ] })
+      ] }),
+      filteredUsers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Table, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHead, { className: "w-[300px]", children: "User" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHead, { children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHead, { className: "w-[180px]", children: "Role" }),
+          canEditUsers && onRemoveUser && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHead, { className: "w-[100px] text-right", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableBody, { children: filteredUsers.map((user) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCell, { className: "font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Avatar, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AvatarFallback, { children: getInitials(user.first_name, user.last_name) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium", children: [
+                user.first_name,
+                " ",
+                user.last_name
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs text-muted-foreground md:hidden", children: user.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCell, { className: "hidden md:table-cell", children: user.email }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCell, { children: canEditUsers && onRoleUpdate ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            Select,
+            {
+              value: user.role,
+              onValueChange: (newRole) => handleRoleUpdate(user.user_id, newRole),
+              disabled: isUpdating[user.user_id],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectValue, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectContent, { children: availableRoles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectItem, { value: role, children: role }, role)) })
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "capitalize text-sm font-medium", children: user.role }) }),
+          canEditUsers && onRemoveUser && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCell, { className: "text-right", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => handleRemoveUser(user.user_id),
+              disabled: isUpdating[user.user_id],
+              className: "h-8 w-8",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react4.UserX, { className: "h-4 w-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: "Remove user" })
+              ]
+            }
+          ) })
+        ] }, user.user_id)) })
+      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-center py-12 border rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-muted-foreground", children: searchQuery ? "No users found matching your search" : "No users in this organization yet" }) })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LoginForm,
@@ -2029,6 +2280,7 @@ function RoleCreator({
   SwitchActiveTenant,
   TenantCreator,
   UserInvite,
+  UserViewer,
   VerificationForm,
   filterInputNodes,
   findAnchorNode,

package/dist/index.d.cts

@@ -157,4 +157,20 @@ interface RoleCreatorProps {
 }
 declare function RoleCreator({ definitions, roles, namespaceMap, onRoleCreate, onRoleUpdate, }: RoleCreatorProps): react_jsx_runtime.JSX.Element;
 
-export { type CustomFormProps, type FlowType, LoginForm, type LoginFormProps, type NodesByGroup, PricingTable, type PricingTableProps, RecoveryForm, type RecoveryFormProps, RegistrationForm, type RegistrationFormProps, RoleCreator, SettingsForm, type SettingsFormProps, SwitchActiveTenant, type SwitchActiveTenantProps, TenantCreator, type TenantCreatorConfig, type TenantCreatorFormActions, type TenantCreatorProps, UserInvite, VerificationForm, type VerificationFormProps, filterInputNodes, findAnchorNode, findCsrfToken, findSubmitButton, groupNodesByGroup, isUiNodeInputAttributes, sortNodes };
+interface TenantUser {
+    user_id: string;
+    first_name: string;
+    last_name: string;
+    email: string;
+    role: string;
+}
+interface UserViewerProps {
+    users: TenantUser[];
+    availableRoles: string[];
+    canEditUsers: boolean;
+    onRoleUpdate?: (userId: string, newRole: string) => void | Promise<void>;
+    onRemoveUser?: (userId: string) => void | Promise<void>;
+}
+declare function UserViewer({ users, availableRoles, canEditUsers, onRoleUpdate, onRemoveUser, }: UserViewerProps): react_jsx_runtime.JSX.Element;
+
+export { type CustomFormProps, type FlowType, LoginForm, type LoginFormProps, type NodesByGroup, PricingTable, type PricingTableProps, RecoveryForm, type RecoveryFormProps, RegistrationForm, type RegistrationFormProps, RoleCreator, SettingsForm, type SettingsFormProps, SwitchActiveTenant, type SwitchActiveTenantProps, TenantCreator, type TenantCreatorConfig, type TenantCreatorFormActions, type TenantCreatorProps, type TenantUser, UserInvite, UserViewer, VerificationForm, type VerificationFormProps, filterInputNodes, findAnchorNode, findCsrfToken, findSubmitButton, groupNodesByGroup, isUiNodeInputAttributes, sortNodes };

package/dist/index.d.ts

@@ -157,4 +157,20 @@ interface RoleCreatorProps {
 }
 declare function RoleCreator({ definitions, roles, namespaceMap, onRoleCreate, onRoleUpdate, }: RoleCreatorProps): react_jsx_runtime.JSX.Element;
 
-export { type CustomFormProps, type FlowType, LoginForm, type LoginFormProps, type NodesByGroup, PricingTable, type PricingTableProps, RecoveryForm, type RecoveryFormProps, RegistrationForm, type RegistrationFormProps, RoleCreator, SettingsForm, type SettingsFormProps, SwitchActiveTenant, type SwitchActiveTenantProps, TenantCreator, type TenantCreatorConfig, type TenantCreatorFormActions, type TenantCreatorProps, UserInvite, VerificationForm, type VerificationFormProps, filterInputNodes, findAnchorNode, findCsrfToken, findSubmitButton, groupNodesByGroup, isUiNodeInputAttributes, sortNodes };
+interface TenantUser {
+    user_id: string;
+    first_name: string;
+    last_name: string;
+    email: string;
+    role: string;
+}
+interface UserViewerProps {
+    users: TenantUser[];
+    availableRoles: string[];
+    canEditUsers: boolean;
+    onRoleUpdate?: (userId: string, newRole: string) => void | Promise<void>;
+    onRemoveUser?: (userId: string) => void | Promise<void>;
+}
+declare function UserViewer({ users, availableRoles, canEditUsers, onRoleUpdate, onRemoveUser, }: UserViewerProps): react_jsx_runtime.JSX.Element;
+
+export { type CustomFormProps, type FlowType, LoginForm, type LoginFormProps, type NodesByGroup, PricingTable, type PricingTableProps, RecoveryForm, type RecoveryFormProps, RegistrationForm, type RegistrationFormProps, RoleCreator, SettingsForm, type SettingsFormProps, SwitchActiveTenant, type SwitchActiveTenantProps, TenantCreator, type TenantCreatorConfig, type TenantCreatorFormActions, type TenantCreatorProps, type TenantUser, UserInvite, UserViewer, VerificationForm, type VerificationFormProps, filterInputNodes, findAnchorNode, findCsrfToken, findSubmitButton, groupNodesByGroup, isUiNodeInputAttributes, sortNodes };

package/dist/index.js

@@ -95,7 +95,7 @@ var alertVariants = cva(
         destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
         warning: "border-yellow-500/50 text-yellow-700 bg-yellow-50 dark:border-yellow-500 dark:text-yellow-200 dark:bg-yellow-950/20 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-200",
         success: "border-green-500/50 text-green-700 bg-green-50 dark:border-green-500 dark:text-green-200 dark:bg-green-950/20 [&>svg]:text-green-600 dark:[&>svg]:text-green-200",
-        info: "border-blue-500/50 text-blue-700 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-200"
+        info: "border-blue-500/50 text-blue-900 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-200"
       }
     },
     defaultVariants: {
@@ -1967,6 +1967,256 @@ function RoleCreator({
     ] })
   ] });
 }
+
+// src/user-viewer/index.tsx
+import { useState as useState7, useMemo as useMemo3 } from "react";
+
+// src/components/ui/table.tsx
+import "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx27(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/avatar.tsx
+import "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx28(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx28(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/user-viewer/index.tsx
+import { Search, UserX } from "lucide-react";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+function UserViewer({
+  users,
+  availableRoles,
+  canEditUsers,
+  onRoleUpdate,
+  onRemoveUser
+}) {
+  const [searchQuery, setSearchQuery] = useState7("");
+  const [isUpdating, setIsUpdating] = useState7({});
+  const getInitials = (firstName, lastName) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  };
+  const filteredUsers = useMemo3(() => {
+    if (!searchQuery.trim()) return users;
+    const query = searchQuery.toLowerCase();
+    return users.filter(
+      (user) => user.first_name.toLowerCase().includes(query) || user.last_name.toLowerCase().includes(query) || user.email.toLowerCase().includes(query) || user.role.toLowerCase().includes(query)
+    );
+  }, [users, searchQuery]);
+  const handleRoleUpdate = async (userId, newRole) => {
+    if (!onRoleUpdate) return;
+    setIsUpdating((prev) => ({ ...prev, [userId]: true }));
+    try {
+      await onRoleUpdate(userId, newRole);
+    } catch (error) {
+      console.error("Failed to update role:", error);
+    } finally {
+      setIsUpdating((prev) => ({ ...prev, [userId]: false }));
+    }
+  };
+  const handleRemoveUser = async (userId) => {
+    if (!onRemoveUser) return;
+    const confirmed = window.confirm(
+      "Are you sure you want to remove this user from the organization?"
+    );
+    if (!confirmed) return;
+    setIsUpdating((prev) => ({ ...prev, [userId]: true }));
+    try {
+      await onRemoveUser(userId);
+    } catch (error) {
+      console.error("Failed to remove user:", error);
+    } finally {
+      setIsUpdating((prev) => ({ ...prev, [userId]: false }));
+    }
+  };
+  return /* @__PURE__ */ jsxs16(Card, { className: "w-full max-w-6xl", children: [
+    /* @__PURE__ */ jsxs16(CardHeader, { children: [
+      /* @__PURE__ */ jsx29(CardTitle, { children: "Team Members" }),
+      /* @__PURE__ */ jsx29(CardDescription, { children: canEditUsers ? "View and manage users in your organization" : "View users in your organization" })
+    ] }),
+    /* @__PURE__ */ jsxs16(CardContent, { children: [
+      /* @__PURE__ */ jsxs16("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsx29(Label, { htmlFor: "search", className: "sr-only", children: "Search users" }),
+        /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx29(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx29(
+            Input,
+            {
+              id: "search",
+              type: "text",
+              placeholder: "Search by name, email, or role...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "pl-10"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs16("p", { className: "text-xs text-muted-foreground mt-2", children: [
+          "Showing ",
+          filteredUsers.length,
+          " of ",
+          users.length,
+          " users"
+        ] })
+      ] }),
+      filteredUsers.length > 0 ? /* @__PURE__ */ jsx29("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs16(Table, { children: [
+        /* @__PURE__ */ jsx29(TableHeader, { children: /* @__PURE__ */ jsxs16(TableRow, { children: [
+          /* @__PURE__ */ jsx29(TableHead, { className: "w-[300px]", children: "User" }),
+          /* @__PURE__ */ jsx29(TableHead, { children: "Email" }),
+          /* @__PURE__ */ jsx29(TableHead, { className: "w-[180px]", children: "Role" }),
+          canEditUsers && onRemoveUser && /* @__PURE__ */ jsx29(TableHead, { className: "w-[100px] text-right", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx29(TableBody, { children: filteredUsers.map((user) => /* @__PURE__ */ jsxs16(TableRow, { children: [
+          /* @__PURE__ */ jsx29(TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx29(Avatar, { children: /* @__PURE__ */ jsx29(AvatarFallback, { children: getInitials(user.first_name, user.last_name) }) }),
+            /* @__PURE__ */ jsxs16("div", { children: [
+              /* @__PURE__ */ jsxs16("div", { className: "font-medium", children: [
+                user.first_name,
+                " ",
+                user.last_name
+              ] }),
+              /* @__PURE__ */ jsx29("div", { className: "text-xs text-muted-foreground md:hidden", children: user.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx29(TableCell, { className: "hidden md:table-cell", children: user.email }),
+          /* @__PURE__ */ jsx29(TableCell, { children: canEditUsers && onRoleUpdate ? /* @__PURE__ */ jsxs16(
+            Select,
+            {
+              value: user.role,
+              onValueChange: (newRole) => handleRoleUpdate(user.user_id, newRole),
+              disabled: isUpdating[user.user_id],
+              children: [
+                /* @__PURE__ */ jsx29(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx29(SelectValue, {}) }),
+                /* @__PURE__ */ jsx29(SelectContent, { children: availableRoles.map((role) => /* @__PURE__ */ jsx29(SelectItem, { value: role, children: role }, role)) })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx29("span", { className: "capitalize text-sm font-medium", children: user.role }) }),
+          canEditUsers && onRemoveUser && /* @__PURE__ */ jsx29(TableCell, { className: "text-right", children: /* @__PURE__ */ jsxs16(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => handleRemoveUser(user.user_id),
+              disabled: isUpdating[user.user_id],
+              className: "h-8 w-8",
+              children: [
+                /* @__PURE__ */ jsx29(UserX, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Remove user" })
+              ]
+            }
+          ) })
+        ] }, user.user_id)) })
+      ] }) }) : /* @__PURE__ */ jsx29("div", { className: "text-center py-12 border rounded-lg", children: /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground", children: searchQuery ? "No users found matching your search" : "No users in this organization yet" }) })
+    ] })
+  ] });
+}
 export {
   LoginForm,
   PricingTable,
@@ -1977,6 +2227,7 @@ export {
   SwitchActiveTenant,
   TenantCreator,
   UserInvite,
+  UserViewer,
   VerificationForm,
   filterInputNodes,
   findAnchorNode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnibase/shadcn",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "OmniBase ShadCN UI Package",
   "type": "module",
   "exports": {
@@ -49,7 +49,7 @@
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
-    "@omnibase/core-js": "0.7.5",
+    "@omnibase/core-js": "0.7.6",
     "@storybook/addon-docs": "^9.1.15",
     "@storybook/react-vite": "^9.1.15",
     "@tailwindcss/vite": "^4.1.16",