@makolabs/ripple 3.0.9 → 3.0.11

package/dist/user-management/UserTable.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import {
+		Button,
+		Color,
 		Table,
 		type TableColumn,
 		type User,
@@ -21,6 +23,8 @@
 		onview,
 		onedit,
 		ondelete,
+		onapprove,
+		onreject,
 		class: className = ''
 	}: UserTableProps = $props();
 
@@ -82,45 +86,6 @@
 	];
 </script>
 
-{#snippet EyeIcon()}
-	<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="2"
-			d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-		></path>
-		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="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"
-		></path>
-	</svg>
-{/snippet}
-
-{#snippet EditIcon()}
-	<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="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"
-		></path>
-	</svg>
-{/snippet}
-
-{#snippet TrashIcon()}
-	<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="2"
-			d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-		></path>
-	</svg>
-{/snippet}
-
 {#snippet UserCell(user: User)}
 	<div class="flex items-center">
 		<div class="h-8 w-8 shrink-0">
@@ -173,36 +138,64 @@
 {/snippet}
 
 {#snippet ActionsCell(user: User)}
-	<div class="flex items-center justify-end space-x-1">
+	<div class="flex items-center justify-end gap-2">
 		{#if onview}
-			<button
+			<Button
+				size="sm"
+				variant="outline"
 				onclick={() => onview(user)}
-				class="inline-flex rounded p-1 text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-900"
-				title="View User"
 				aria-label="View User"
+				testId="view-user-{user.id}"
 			>
-				{@render EyeIcon()}
-			</button>
+				View
+			</Button>
 		{/if}
 		{#if onedit}
-			<button
+			<Button
+				size="sm"
+				variant="outline"
+				color={Color.PRIMARY}
 				onclick={() => onedit(user)}
-				class="inline-flex rounded p-1 text-green-600 transition-colors hover:bg-green-50 hover:text-green-900"
-				title="Edit User"
 				aria-label="Edit User"
+				testId="edit-user-{user.id}"
 			>
-				{@render EditIcon()}
-			</button>
+				Edit
+			</Button>
 		{/if}
 		{#if ondelete}
-			<button
+			<Button
+				size="sm"
+				variant="outline"
+				color={Color.DANGER}
 				onclick={() => ondelete(user.id)}
-				class="text-danger-600 hover:bg-danger-50 hover:text-danger-900 inline-flex rounded p-1 transition-colors"
-				title="Delete User"
 				aria-label="Delete User"
+				testId="delete-user-{user.id}"
+			>
+				Delete
+			</Button>
+		{/if}
+		{#if onapprove}
+			<Button
+				size="sm"
+				color={Color.SUCCESS}
+				onclick={() => onapprove(user)}
+				aria-label="Approve User"
+				testId="approve-user-{user.id}"
+			>
+				Approve
+			</Button>
+		{/if}
+		{#if onreject}
+			<Button
+				size="sm"
+				variant="outline"
+				color={Color.DANGER}
+				onclick={() => onreject(user)}
+				aria-label="Reject User"
+				testId="reject-user-{user.id}"
 			>
-				{@render TrashIcon()}
-			</button>
+				Reject
+			</Button>
 		{/if}
 	</div>
 {/snippet}

package/dist/user-management/UserViewModal.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { Modal, Button, cn, type UserViewModalProps, getUserDisplayName } from '../index.js';
+	import { Modal, Button, Color, cn } from '../index.js';
+	import RoleCard from './RoleCard.svelte';
+	import ApiKeyField from './ApiKeyField.svelte';
+	import UserIdentityCard from './UserIdentityCard.svelte';
+	import type { Role, UserViewModalProps } from '../index.js';
 	import { SvelteDate } from 'svelte/reactivity';
 
 	let {
@@ -12,25 +16,17 @@
 		class: className
 	}: UserViewModalProps = $props();
 
-	// Local state
-	let showApiKey = $state(false);
 	let regeneratingApiKey = $state(false);
 	let apiKeyError = $state<string | null>(null);
 
 	function handleClose() {
 		open = false;
-		showApiKey = false;
+		apiKeyError = null;
 		if (onclose) onclose();
 	}
 
 	function handleEdit() {
-		if (onedit && user) {
-			onedit(user);
-		}
-	}
-
-	function getModalTitle() {
-		return getUserDisplayName(user);
+		if (onedit && user) onedit(user);
 	}
 
 	function formatDate(timestamp?: number) {
@@ -42,13 +38,8 @@
 		});
 	}
 
-	function toggleApiKeyVisibility() {
-		showApiKey = !showApiKey;
-	}
-
 	async function handleRegenerateApiKey() {
 		if (!user?.id || !onregenerateapikey) return;
-
 		try {
 			regeneratingApiKey = true;
 			apiKeyError = null;
@@ -61,7 +52,6 @@
 		}
 	}
 
-	// Get API key from user's private_metadata
 	const apiKey = $derived(
 		user?.private_metadata &&
 			typeof user.private_metadata === 'object' &&
@@ -70,233 +60,109 @@
 			: ''
 	);
 
-	// Mask API key for display
-	const maskedApiKey = $derived(apiKey ? '•'.repeat(Math.min(apiKey.length, 40)) : '');
-
-	// Find the current role object
-	const currentRole = $derived(
-		user?.role && roles.length > 0 ? roles.find((r) => r.value === user.role) : null
+	const currentRole = $derived<Role | null>(
+		user?.role && roles.length > 0 ? (roles.find((r) => r.value === user.role) ?? null) : null
 	);
 </script>
 
+{#snippet ReadOnlyField(label: string, value: string | undefined)}
+	<div>
+		<p class="text-default-700 mb-1 text-sm font-medium">{label}</p>
+		<div
+			class="border-default-300 bg-default-50 text-default-900 rounded-lg border px-3 py-2 text-sm"
+		>
+			{value || '-'}
+		</div>
+	</div>
+{/snippet}
+
 <Modal
 	{open}
 	onclose={handleClose}
-	title={getModalTitle()}
-	contentClass="max-w-4xl"
+	title="User details"
+	footerAlign="end"
+	contentClass="max-w-3xl"
 	bodyClass="flex flex-col"
 	class={cn(className)}
 >
-	<div class="flex gap-6">
-		<!-- Left Column: Profile Information -->
-		<div class="min-w-0 flex-1 space-y-4">
-			<div class="border-default-200 border-b pb-3">
-				<h3 class="text-default-900 text-lg font-semibold">Profile Information</h3>
-			</div>
-
-			<!-- First Name -->
-			<div>
-				<p class="text-default-700 mb-1 text-sm font-medium">First Name</p>
-				<div
-					class="border-default-300 bg-default-50 text-default-900 rounded-lg border px-3 py-2 text-sm"
-				>
-					{user?.first_name || '-'}
-				</div>
-			</div>
-
-			<!-- Last Name -->
-			<div>
-				<p class="text-default-700 mb-1 text-sm font-medium">Last Name</p>
-				<div
-					class="border-default-300 bg-default-50 text-default-900 rounded-lg border px-3 py-2 text-sm"
-				>
-					{user?.last_name || '-'}
-				</div>
-			</div>
-
-			<!-- Email Address -->
-			<div>
-				<p class="text-default-700 mb-1 text-sm font-medium">Email Address</p>
-				<div
-					class="border-default-300 bg-default-50 text-default-900 rounded-lg border px-3 py-2 text-sm"
-				>
-					{user?.email_addresses?.[0]?.email_address || '-'}
-				</div>
-			</div>
-
-			<!-- Mako API Key -->
-			{#if apiKey || onregenerateapikey}
-				<div>
-					<div class="mb-2 flex items-center justify-between">
-						<p class="text-default-700 text-sm font-medium">Mako API Key</p>
-						{#if onregenerateapikey}
-							<button
-								type="button"
-								onclick={handleRegenerateApiKey}
-								disabled={regeneratingApiKey}
-								class="disabled:text-default-400 inline-flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-700 hover:underline disabled:cursor-not-allowed"
-								aria-label="Regenerate API key"
-							>
-								<svg
-									class="h-4 w-4 {regeneratingApiKey ? 'animate-spin' : ''}"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-									></path>
-								</svg>
-								{apiKey ? 'Regenerate' : 'Generate'}
-							</button>
-						{/if}
-					</div>
-					<div class="relative flex-1">
-						<div
-							class="scrollbar-hide border-default-300 bg-default-50 text-default-900 w-full overflow-x-auto overflow-y-hidden rounded-lg border px-3 py-2 pr-12 font-mono text-sm"
-						>
-							<div class="whitespace-nowrap">
-								{showApiKey ? apiKey || 'No API key' : apiKey ? maskedApiKey : 'No API key'}
-							</div>
-						</div>
-						{#if apiKey}
-							<button
-								type="button"
-								onclick={toggleApiKeyVisibility}
-								class="bg-default-50 text-default-500 hover:text-default-700 absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer"
-								aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
-							>
-								{#if showApiKey}
-									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.29 3.29m0 0A9.966 9.966 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-										></path>
-									</svg>
-								{:else}
-									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-										></path>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="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"
-										></path>
-									</svg>
-								{/if}
-							</button>
-						{/if}
-					</div>
-					{#if apiKeyError}
-						<p class="text-danger-500 mt-1 text-xs">{apiKeyError}</p>
-					{:else}
-						<p class="text-default-500 mt-1 text-xs">
-							API keys are system-managed and cannot be manually edited
-						</p>
-					{/if}
-				</div>
-			{/if}
-		</div>
-
-		<!-- Right Column: Role & Permissions -->
-		<div class="min-w-0 flex-1 space-y-4">
-			<div class="border-default-200 border-b pb-3">
-				<h3 class="text-default-900 text-lg font-semibold">Role & Permissions</h3>
+	<div class="flex flex-col gap-6">
+		<UserIdentityCard {user} />
+
+		<!-- Profile -->
+		<div class="space-y-4">
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				{@render ReadOnlyField('First name', user?.first_name)}
+				{@render ReadOnlyField('Last name', user?.last_name)}
 			</div>
+			{@render ReadOnlyField('Email address', user?.email_addresses?.[0]?.email_address)}
 
-			<!-- User Role -->
-			{#if user?.role}
-				<div>
-					<p class="text-default-700 mb-3 text-sm font-medium">User Role</p>
-					<div class="rounded-lg border-2 border-blue-500 bg-blue-50 p-3">
-						<div class="flex items-center justify-between gap-2">
-							<div class="min-w-0 flex-1">
-								<h4 class="text-default-900 text-sm font-semibold">
-									{currentRole?.label || user.role}
-								</h4>
-								{#if currentRole?.description}
-									<p class="text-default-600 mt-1 line-clamp-2 text-xs">
-										{currentRole.description}
-									</p>
-								{/if}
-							</div>
-							<div
-								class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-blue-500 bg-blue-500"
-							>
-								<div class="h-2 w-2 rounded-full bg-white"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			{/if}
-
-			<!-- Permissions -->
-			{#if user?.permissions && user.permissions.length > 0}
-				<div>
-					<h4 class="text-default-700 mb-2 text-sm font-medium">
-						Permissions ({user.permissions.length})
-					</h4>
-					<div class="bg-default-50 max-h-60 overflow-y-auto rounded-lg p-3">
-						<div class="space-y-2">
-							{#each user.permissions as permission, index (`${permission}-${index}`)}
-								<div class="flex items-start gap-2 text-xs">
-									<div class="mt-1 h-1 w-1 shrink-0 rounded-full bg-blue-500"></div>
-									<div class="text-default-700 font-mono">{permission}</div>
-								</div>
-							{/each}
-						</div>
-					</div>
-				</div>
-			{/if}
-
-			<!-- Additional Info -->
-			<div class="space-y-2">
+			<div class="flex flex-wrap gap-x-6 gap-y-2 pt-1 text-xs">
 				{#if user?.created_at}
 					<div>
-						<p class="text-default-500 text-xs">Created</p>
-						<p class="text-default-900 text-sm font-medium">{formatDate(user.created_at)}</p>
+						<span class="text-default-500">Created · </span>
+						<span class="text-default-900 font-medium">{formatDate(user.created_at)}</span>
 					</div>
 				{/if}
 				{#if user?.last_sign_in_at}
 					<div>
-						<p class="text-default-500 text-xs">Last Sign In</p>
-						<p class="text-default-900 text-sm font-medium">{formatDate(user.last_sign_in_at)}</p>
+						<span class="text-default-500">Last sign in · </span>
+						<span class="text-default-900 font-medium">{formatDate(user.last_sign_in_at)}</span>
 					</div>
 				{/if}
 			</div>
 		</div>
-	</div>
 
-	<!-- View Mode Actions -->
-	{#snippet footer()}
-		<div class="flex items-center justify-between gap-4">
-			<div></div>
-			<div class="flex gap-3">
-				<Button variant="outline" onclick={handleClose}>Close</Button>
-				{#if onedit}
-					<Button color="primary" onclick={handleEdit}>
-						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="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"
-							></path>
-						</svg>
-						Edit User
-					</Button>
+		<!-- Role + permissions -->
+		{#if user?.role}
+			<div class="space-y-3">
+				<span class="text-default-700 mb-2 block text-sm font-medium">Role</span>
+				<RoleCard
+					role={currentRole ?? { value: user.role, label: user.role, permissions: [] }}
+					selected
+					interactive={false}
+				/>
+
+				{#if user?.permissions && user.permissions.length > 0}
+					<div>
+						<span class="text-default-500 mb-1.5 block text-xs font-medium">
+							Granted permissions ({user.permissions.length})
+						</span>
+						<div class="flex flex-wrap gap-1.5">
+							{#each user.permissions as permission, index (`${permission}-${index}`)}
+								<span
+									class="bg-default-100 text-default-700 rounded-md px-2 py-0.5 font-mono text-xs"
+								>
+									{permission}
+								</span>
+							{/each}
+						</div>
+					</div>
 				{/if}
 			</div>
-		</div>
+		{/if}
+
+		<!-- API key -->
+		{#if apiKey || onregenerateapikey}
+			<ApiKeyField
+				value={apiKey}
+				label="Mako API Key"
+				error={apiKeyError}
+				helperText="API keys are system-managed and cannot be manually edited"
+				regenerate={onregenerateapikey
+					? {
+							label: apiKey ? 'Regenerate' : 'Generate',
+							loading: regeneratingApiKey,
+							onclick: handleRegenerateApiKey
+						}
+					: undefined}
+			/>
+		{/if}
+	</div>
+
+	{#snippet footer()}
+		<Button variant="outline" onclick={handleClose}>Close</Button>
+		{#if onedit}
+			<Button color={Color.PRIMARY} onclick={handleEdit}>Edit user</Button>
+		{/if}
 	{/snippet}
 </Modal>

package/dist/user-management/UserViewModal.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type UserViewModalProps } from '../index.js';
+import type { UserViewModalProps } from '../index.js';
 declare const UserViewModal: import("svelte").Component<UserViewModalProps, {}, "open" | "user">;
 type UserViewModal = ReturnType<typeof UserViewModal>;
 export default UserViewModal;

package/dist/user-management/user-management-types.d.ts

@@ -83,11 +83,15 @@ export interface UserTableProps {
         direction: 'asc' | 'desc' | null;
     }) => void;
     /** Fires when the user clicks the View action on a row. */
-    onview: (user: User) => void;
+    onview?: (user: User) => void;
     /** Fires when the user clicks the Edit action on a row. */
-    onedit: (user: User) => void;
+    onedit?: (user: User) => void;
     /** Fires when the user confirms a Delete action on a row. */
-    ondelete: (userId: string) => void;
+    ondelete?: (userId: string) => void;
+    /** Fires when the user clicks the Approve action on a row (pending users). */
+    onapprove?: (user: User) => void;
+    /** Fires when the user clicks the Reject action on a row (pending users). */
+    onreject?: (user: User) => void;
     class?: ClassValue;
     testId?: string;
 }
@@ -201,6 +205,51 @@ export interface UserManagementAdapter {
         error?: string;
         token?: string;
     }>;
+    /**
+     * Optional. List users that are registered in your identity provider but
+     * haven't been onboarded yet (no org assignment, no API key). When this
+     * method is present, `<UserManagement>` shows a "Pending" tab with an
+     * approval workflow. When absent, the tab is hidden entirely.
+     */
+    getPendingUsers?: (options: GetUsersOptions) => PromiseLike<GetUsersResult>;
+    /**
+     * Optional. Approve a pending user — assigns them to the org with the
+     * selected role and generates their first API key. Returns the new key
+     * for one-time reveal in the UI.
+     */
+    approveUser?: (input: {
+        userId: string;
+        role: string;
+    }) => PromiseLike<{
+        apiKey: string;
+    }>;
+    /**
+     * Optional. Reject a pending user — permanently deletes them from the
+     * identity provider. Pair with a confirmation dialog at the call site.
+     */
+    rejectUser?: (userId: string) => PromiseLike<void>;
+}
+/**
+ * Props for `<UserApproveModal>` — confirms approval of a pending user with
+ * a role pick + on-success API key reveal.
+ */
+export interface UserApproveModalProps {
+    open?: boolean;
+    user: User | null;
+    roles?: Role[];
+    /**
+     * Approval callback. Receives the userId and chosen role; should resolve
+     * with the newly generated API key for one-time display.
+     */
+    onapprove: (input: {
+        userId: string;
+        role: string;
+    }) => Promise<{
+        apiKey: string;
+    }>;
+    onclose: () => void;
+    class?: ClassValue;
+    testId?: string;
 }
 /**
  * Props for `<UserManagement>` — the all-in-one user dashboard

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.0.9",
+	"version": "3.0.11",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {

package/dist/modal/ModalFooter.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { cn } from '../helper/cls.js';
-	import { buildTestId } from '../helper/testid.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassValue } from 'tailwind-variants';
-
-	type Props = {
-		class?: ClassValue;
-		align?: 'start' | 'center' | 'end' | 'between';
-		children: Snippet;
-		testId?: string;
-	};
-
-	let { class: className = '', align = 'end', children, testId }: Props = $props();
-
-	const alignClass = $derived(
-		{
-			start: 'justify-start',
-			center: 'justify-center',
-			end: 'justify-end',
-			between: 'justify-between'
-		}[align]
-	);
-</script>
-
-<div
-	class={cn(
-		'border-default-200 flex flex-wrap items-center gap-3 border-t px-6 py-4',
-		alignClass,
-		className
-	)}
-	data-testid={buildTestId('modal-footer', undefined, testId)}
->
-	{@render children()}
-</div>

package/dist/modal/ModalFooter.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassValue } from 'tailwind-variants';
-type Props = {
-    class?: ClassValue;
-    align?: 'start' | 'center' | 'end' | 'between';
-    children: Snippet;
-    testId?: string;
-};
-declare const ModalFooter: import("svelte").Component<Props, {}, "">;
-type ModalFooter = ReturnType<typeof ModalFooter>;
-export default ModalFooter;