@makolabs/ripple 3.0.9 → 3.0.11

package/dist/user-management/ApiKeyField.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { Button, Color } from '../index.js';
+	import { cn } from '../helper/cls.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import { toast } from 'svelte-sonner';
+
+	type ActionButton = {
+		label: string;
+		loading?: boolean;
+		disabled?: boolean;
+		onclick: () => void;
+		testId?: string;
+	};
+
+	interface Props {
+		/** The API key value. Empty string = no key issued yet. */
+		value: string;
+		label?: string;
+		/** Inline error message (e.g. regenerate failure). Suppresses helperText when set. */
+		error?: string | null;
+		/** Subtle hint shown below the field when no error. */
+		helperText?: string;
+		/** Action button rendered to the right of the label (e.g. Regenerate). */
+		regenerate?: ActionButton;
+		/** Optional second action (e.g. Verify). Rendered before regenerate. */
+		verify?: ActionButton;
+		/** Show the masked → revealed eye toggle. @default true */
+		toggleable?: boolean;
+		/** Show a Copy button next to the value. @default false */
+		copyable?: boolean;
+		/** When the key is missing, what to display. @default 'No API key' */
+		emptyLabel?: string;
+		testId?: string;
+		class?: ClassValue;
+	}
+
+	let {
+		value,
+		label = 'API Key',
+		error = null,
+		helperText,
+		regenerate,
+		verify,
+		toggleable = true,
+		copyable = false,
+		emptyLabel = 'No API key',
+		testId,
+		class: className
+	}: Props = $props();
+
+	let revealed = $state(false);
+	let copied = $state(false);
+
+	const masked = $derived(value ? '•'.repeat(Math.min(value.length, 40)) : '');
+	// If the field isn't toggleable, there's no way for the user to reveal it —
+	// so always show the raw value (used in one-time-reveal flows like approval).
+	const display = $derived(value ? (!toggleable || revealed ? value : masked) : emptyLabel);
+
+	async function handleCopy() {
+		if (!value) return;
+		try {
+			await navigator.clipboard.writeText(value);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {
+			toast.error('Failed to copy API key');
+		}
+	}
+</script>
+
+<div class={cn('w-full', className)}>
+	{#if label || regenerate || verify}
+		<div class="mb-2 flex items-center justify-between gap-3">
+			{#if label}
+				<span class="text-default-700 text-sm font-medium">{label}</span>
+			{/if}
+			{#if verify || regenerate}
+				<div class="flex items-center gap-2">
+					{#if verify}
+						<Button
+							type="button"
+							size="sm"
+							variant="link"
+							color={Color.SUCCESS}
+							onclick={verify.onclick}
+							disabled={verify.disabled || verify.loading}
+							loading={verify.loading}
+							testId={verify.testId}
+						>
+							{verify.label}
+						</Button>
+					{/if}
+					{#if regenerate}
+						<Button
+							type="button"
+							size="sm"
+							variant="link"
+							color={Color.PRIMARY}
+							onclick={regenerate.onclick}
+							disabled={regenerate.disabled || regenerate.loading}
+							loading={regenerate.loading}
+							testId={regenerate.testId}
+						>
+							{regenerate.label}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="border-default-300 bg-default-50 flex items-center gap-2 rounded-lg border px-3 py-2">
+		<code
+			class="text-default-900 min-w-0 flex-1 font-mono text-sm break-all"
+			data-testid={testId ? `${testId}-value` : undefined}
+		>
+			{display}
+		</code>
+		{#if value && toggleable}
+			<button
+				type="button"
+				onclick={() => (revealed = !revealed)}
+				class="text-default-500 hover:text-default-700 shrink-0 cursor-pointer"
+				aria-label={revealed ? 'Hide API key' : 'Show API key'}
+			>
+				{#if revealed}
+					<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}
+		{#if value && copyable}
+			<Button type="button" size="sm" variant="outline" onclick={handleCopy}>
+				{copied ? 'Copied' : 'Copy'}
+			</Button>
+		{/if}
+	</div>
+
+	{#if error}
+		<p class="text-danger-500 mt-1 text-xs">{error}</p>
+	{:else if helperText}
+		<p class="text-default-500 mt-1 text-xs">{helperText}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,32 @@
+import type { ClassValue } from 'tailwind-variants';
+type ActionButton = {
+    label: string;
+    loading?: boolean;
+    disabled?: boolean;
+    onclick: () => void;
+    testId?: string;
+};
+interface Props {
+    /** The API key value. Empty string = no key issued yet. */
+    value: string;
+    label?: string;
+    /** Inline error message (e.g. regenerate failure). Suppresses helperText when set. */
+    error?: string | null;
+    /** Subtle hint shown below the field when no error. */
+    helperText?: string;
+    /** Action button rendered to the right of the label (e.g. Regenerate). */
+    regenerate?: ActionButton;
+    /** Optional second action (e.g. Verify). Rendered before regenerate. */
+    verify?: ActionButton;
+    /** Show the masked → revealed eye toggle. @default true */
+    toggleable?: boolean;
+    /** Show a Copy button next to the value. @default false */
+    copyable?: boolean;
+    /** When the key is missing, what to display. @default 'No API key' */
+    emptyLabel?: string;
+    testId?: string;
+    class?: ClassValue;
+}
+declare const ApiKeyField: import("svelte").Component<Props, {}, "">;
+type ApiKeyField = ReturnType<typeof ApiKeyField>;
+export default ApiKeyField;

package/dist/user-management/RoleCard.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import type { Role } from '../index.js';
+
+	interface Props {
+		role: Role;
+		selected?: boolean;
+		/** When false, renders as a static card (no button, no hover). @default true */
+		interactive?: boolean;
+		/** Reduces opacity to signal "preserved selection" (e.g. admin role on edit). */
+		dimmed?: boolean;
+		onclick?: () => void;
+		testId?: string;
+		class?: ClassValue;
+	}
+
+	let {
+		role,
+		selected = false,
+		interactive = true,
+		dimmed = false,
+		onclick,
+		testId,
+		class: className
+	}: Props = $props();
+
+	const baseClass = 'rounded-lg border-2 p-2 text-left transition-all w-full block';
+	const selectedClass = 'border-blue-500 bg-blue-50';
+	const idleClass = 'border-default-200 bg-white';
+	const interactiveIdle = 'hover:border-default-300 cursor-pointer';
+
+	const composed = $derived(
+		cn(
+			baseClass,
+			selected ? selectedClass : idleClass,
+			interactive && !selected && interactiveIdle,
+			dimmed && 'opacity-75',
+			className
+		)
+	);
+</script>
+
+{#snippet content()}
+	<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">{role.label}</h4>
+			{#if role.description}
+				<p class="text-default-600 mt-1 line-clamp-2 text-xs">{role.description}</p>
+			{/if}
+		</div>
+		<div
+			class={cn(
+				'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2',
+				selected ? 'border-blue-500 bg-blue-500' : 'border-default-300 bg-white'
+			)}
+		>
+			{#if selected}
+				<div class="h-2 w-2 rounded-full bg-white"></div>
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#if interactive}
+	<button type="button" {onclick} class={composed} data-testid={testId ?? `role-${role.value}`}>
+		{@render content()}
+	</button>
+{:else}
+	<div class={composed} data-testid={testId ?? `role-${role.value}`}>
+		{@render content()}
+	</div>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Role } from '../index.js';
+interface Props {
+    role: Role;
+    selected?: boolean;
+    /** When false, renders as a static card (no button, no hover). @default true */
+    interactive?: boolean;
+    /** Reduces opacity to signal "preserved selection" (e.g. admin role on edit). */
+    dimmed?: boolean;
+    onclick?: () => void;
+    testId?: string;
+    class?: ClassValue;
+}
+declare const RoleCard: import("svelte").Component<Props, {}, "">;
+type RoleCard = ReturnType<typeof RoleCard>;
+export default RoleCard;

package/dist/user-management/UserApproveModal.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Modal, Button, Color, getUserDisplayName } from '../index.js';
+	import RoleCard from './RoleCard.svelte';
+	import ApiKeyField from './ApiKeyField.svelte';
+	import UserIdentityCard from './UserIdentityCard.svelte';
+	import type { UserApproveModalProps } from '../index.js';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		open = $bindable(false),
+		user,
+		roles = [],
+		onapprove,
+		onclose
+	}: UserApproveModalProps = $props();
+
+	let selectedRole = $state<string>('');
+	let approving = $state(false);
+	let issuedKey = $state<string | null>(null);
+
+	$effect(() => {
+		if (!open) {
+			selectedRole = '';
+			approving = false;
+			issuedKey = null;
+		}
+	});
+
+	const canApprove = $derived(!!selectedRole && !approving && !!user);
+
+	async function handleApprove() {
+		if (!user || !selectedRole) return;
+		approving = true;
+		try {
+			const result = await onapprove({ userId: user.id, role: selectedRole });
+			issuedKey = result.apiKey;
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to approve user');
+		} finally {
+			approving = false;
+		}
+	}
+
+	function handleDone() {
+		open = false;
+		onclose();
+	}
+</script>
+
+<Modal
+	bind:open
+	title={issuedKey ? 'API key generated' : 'Approve user'}
+	description={issuedKey
+		? 'Copy this key now — for security it will not be shown again.'
+		: user
+			? `Assign a role to ${getUserDisplayName(user)} and generate their first API key.`
+			: undefined}
+	size="md"
+	footerAlign="end"
+	onclose={handleDone}
+>
+	{#if !issuedKey}
+		<div class="flex flex-col gap-4">
+			<UserIdentityCard {user} />
+
+			{#if roles.length > 0}
+				<div>
+					<span class="text-default-700 mb-2 block text-sm font-medium">
+						Role <span class="text-danger-500">*</span>
+					</span>
+					<div class="grid grid-cols-1 gap-2">
+						{#each roles as role, index (`${role.value}-${index}`)}
+							<RoleCard
+								{role}
+								selected={selectedRole === role.value}
+								onclick={() => (selectedRole = role.value)}
+								testId="approve-role-{role.value}"
+							/>
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<p class="text-danger-600 text-xs">
+					No roles configured — pass a `roles` prop to enable approval.
+				</p>
+			{/if}
+		</div>
+	{:else}
+		<ApiKeyField
+			value={issuedKey}
+			label={undefined}
+			copyable
+			toggleable={false}
+			helperText="Store this key in your password manager or pass it to the user via a secure channel."
+			testId="approve-issued-key"
+		/>
+	{/if}
+
+	{#snippet footer()}
+		{#if !issuedKey}
+			<Button variant="outline" onclick={handleDone}>Cancel</Button>
+			<Button
+				color={Color.PRIMARY}
+				onclick={handleApprove}
+				disabled={!canApprove}
+				loading={approving}
+				testId="approve-confirm"
+			>
+				Approve & Generate Key
+			</Button>
+		{:else}
+			<Button color={Color.PRIMARY} onclick={handleDone} testId="approve-done">Done</Button>
+		{/if}
+	{/snippet}
+</Modal>

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

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

package/dist/user-management/UserIdentityCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { getUserDisplayName, getUserInitials } from './user-management.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import type { User } from '../index.js';
+
+	interface Props {
+		user: User | null;
+		/** Optional chip rendered on the right (e.g. current role label). */
+		roleLabel?: string;
+		class?: ClassValue;
+	}
+
+	let { user, roleLabel, class: className }: Props = $props();
+</script>
+
+{#if user}
+	<div
+		class={cn(
+			'bg-default-50 border-default-200 flex items-center gap-3 rounded-lg border p-3',
+			className
+		)}
+	>
+		<div class="h-10 w-10 shrink-0">
+			{#if user.image_url}
+				<img class="h-10 w-10 rounded-full" src={user.image_url} alt="" />
+			{:else}
+				<div class="bg-default-300 flex h-10 w-10 items-center justify-center rounded-full">
+					<span class="text-default-700 text-sm font-medium">
+						{getUserInitials(user)}
+					</span>
+				</div>
+			{/if}
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="text-default-900 truncate text-sm font-medium">
+				{getUserDisplayName(user)}
+			</div>
+			{#if user.email_addresses?.[0]}
+				<div class="text-default-500 truncate text-xs">
+					{user.email_addresses[0].email_address}
+				</div>
+			{/if}
+		</div>
+		{#if roleLabel}
+			<span
+				class="border-primary-200 bg-primary-50 text-primary-700 shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium"
+			>
+				{roleLabel}
+			</span>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { User } from '../index.js';
+interface Props {
+    user: User | null;
+    /** Optional chip rendered on the right (e.g. current role label). */
+    roleLabel?: string;
+    class?: ClassValue;
+}
+declare const UserIdentityCard: import("svelte").Component<Props, {}, "">;
+type UserIdentityCard = ReturnType<typeof UserIdentityCard>;
+export default UserIdentityCard;