@makolabs/ripple 1.2.20 → 1.2.22

package/dist/ai/AIChatInterface.svelte

@@ -338,17 +338,17 @@
 
 		<!-- Centered Content -->
 		<div class="mb-8 text-center">
-			<h1 class="mb-8 text-4xl font-medium text-gray-900">{title}</h1>
+			<h1 class="text-default-900 mb-8 text-4xl font-medium">{title}</h1>
 			{#if subtitle}
-				<p class="mb-6 text-lg text-gray-600">{subtitle}</p>
+				<p class="text-default-600 mb-6 text-lg">{subtitle}</p>
 			{/if}
 		</div>
 	{:else}
 		<!-- Chat Layout Header -->
 		<div
-			class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between border-b border-gray-200 bg-white/50 px-6 py-3 backdrop-blur-sm"
+			class="border-default-200 sticky top-0 z-10 flex flex-shrink-0 items-center justify-between border-b bg-white/50 px-6 py-3 backdrop-blur-sm"
 		>
-			<h1 class="text-sm font-medium text-gray-900">{title}</h1>
+			<h1 class="text-default-900 text-sm font-medium">{title}</h1>
 			<div class="flex items-center gap-2">
 				{#if isAdapterConfigured}
 					<div
@@ -359,9 +359,9 @@
 					</div>
 				{:else}
 					<div
-						class="flex items-center gap-2 rounded-full bg-gray-100/50 px-2 py-1 text-xs font-medium text-gray-500"
+						class="bg-default-100/50 text-default-500 flex items-center gap-2 rounded-full px-2 py-1 text-xs font-medium"
 					>
-						<div class="h-1.5 w-1.5 rounded-full bg-gray-400"></div>
+						<div class="bg-default-400 h-1.5 w-1.5 rounded-full"></div>
 						Offline
 					</div>
 				{/if}
@@ -396,16 +396,16 @@
 				{#if isProcessing}
 					<div class="flex w-full justify-start">
 						<div
-							class="rounded-md border border-gray-200 bg-white/80 px-4 py-3 shadow-sm backdrop-blur-sm"
+							class="border-default-200 rounded-md border bg-white/80 px-4 py-3 shadow-sm backdrop-blur-sm"
 						>
 							<div class="flex items-center space-x-1">
-								<div class="h-2 w-2 animate-bounce rounded-full bg-gray-400"></div>
+								<div class="bg-default-400 h-2 w-2 animate-bounce rounded-full"></div>
 								<div
-									class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+									class="bg-default-400 h-2 w-2 animate-bounce rounded-full"
 									style="animation-delay: 0.1s"
 								></div>
 								<div
-									class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+									class="bg-default-400 h-2 w-2 animate-bounce rounded-full"
 									style="animation-delay: 0.2s"
 								></div>
 							</div>

package/dist/ai/ChatInput.svelte

@@ -33,15 +33,15 @@
 	}: ChatInputProps = $props();
 
 	const textarea = tv({
-		base: 'flex-1 rounded-md text-sm placeholder-gray-400 focus:outline-none transition-all duration-200 bg-gray-200/60 border-0 resize-none',
+		base: 'flex-1 rounded-md text-sm placeholder-default-400 focus:outline-none transition-all duration-200 bg-default-200/60 border-0 resize-none',
 		variants: {
 			layout: {
 				empty: 'px-6 py-4 min-h-[52px] max-h-[120px]',
 				chat: 'px-6 py-3 min-h-[48px] max-h-[393px] overflow-y-auto'
 			},
 			state: {
-				disabled: 'bg-gray-100 cursor-not-allowed text-gray-500',
-				enabled: 'hover:bg-gray-200/80 focus:bg-white focus:ring-2 focus:shadow-md'
+				disabled: 'bg-default-100 cursor-not-allowed text-default-500',
+				enabled: 'hover:bg-default-200/80 focus:bg-white focus:ring-2 focus:shadow-md'
 			}
 		},
 		compoundVariants: [
@@ -56,7 +56,7 @@
 		base: 'flex h-12 w-12 items-center justify-center rounded-full transition-all duration-200',
 		variants: {
 			state: {
-				disabled: 'bg-gray-200 text-gray-400 cursor-not-allowed',
+				disabled: 'bg-default-200 text-default-400 cursor-not-allowed',
 				enabled:
 					'text-white bg-primary-500 hover:bg-primary-600 focus:ring-2 focus:ring-primary-500/20'
 			}
@@ -197,7 +197,7 @@
 
 	<div class="mt-2 h-6 px-2">
 		{#if userInput.trim() && !isProcessing}
-			<p class="text-xs text-gray-500">Press Enter to send • Shift+Enter for new line</p>
+			<p class="text-default-500 text-xs">Press Enter to send • Shift+Enter for new line</p>
 		{/if}
 	</div>
 </div>

package/dist/ai/CodeRenderer.svelte

@@ -102,18 +102,20 @@
 </svelte:head>
 
 <div
-	class="code-renderer my-4 overflow-hidden rounded-lg border border-gray-700 bg-gray-900 {className}"
+	class="code-renderer border-default-700 bg-default-900 my-4 overflow-hidden rounded-lg border {className}"
 >
 	<!-- Header -->
-	<div class="flex items-center justify-between border-b border-gray-700 bg-gray-800 px-4 py-2">
-		<span class="text-xs font-medium tracking-wide text-gray-300 uppercase">
+	<div
+		class="border-default-700 bg-default-800 flex items-center justify-between border-b px-4 py-2"
+	>
+		<span class="text-default-300 text-xs font-medium tracking-wide uppercase">
 			{displayLanguage}
 		</span>
 		<button
 			onclick={copyCode}
 			class="flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-all duration-200 {copied
 				? 'border border-green-500 bg-green-500/10 text-green-400'
-				: 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'}"
+				: 'text-default-400 hover:bg-default-700 hover:text-default-200'}"
 			title={copied ? 'Copied!' : 'Copy code'}
 		>
 			{#if copied}

package/dist/ai/ComposeDropdown.svelte

@@ -31,15 +31,15 @@
 		base: 'flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200',
 		variants: {
 			state: {
-				disabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
+				disabled: 'bg-default-100 text-default-300 cursor-not-allowed',
 				enabled:
-					'bg-gray-200 text-gray-600 hover:bg-gray-300 hover:text-gray-800 focus:ring-2 focus:ring-gray-300/50'
+					'bg-default-200 text-default-600 hover:bg-default-300 hover:text-default-800 focus:ring-2 focus:ring-default-300/50'
 			}
 		}
 	});
 
 	const dropdown = tv({
-		base: 'absolute bottom-12 left-0 z-50 w-64 bg-white border border-gray-200 rounded-lg shadow-lg py-2',
+		base: 'absolute bottom-12 left-0 z-50 w-64 bg-white border border-default-200 rounded-lg shadow-lg py-2',
 		variants: {
 			visible: {
 				true: 'opacity-100 scale-100',
@@ -52,8 +52,8 @@
 		base: 'flex items-center px-4 py-2 text-sm transition-colors',
 		variants: {
 			state: {
-				enabled: 'text-gray-700 hover:bg-gray-50 cursor-pointer',
-				disabled: 'text-gray-400 cursor-not-allowed'
+				enabled: 'text-default-700 hover:bg-default-50 cursor-pointer',
+				disabled: 'text-default-400 cursor-not-allowed'
 			},
 			layout: {
 				default: 'justify-between',
@@ -131,33 +131,33 @@
 	<!-- Dropdown Menu -->
 	<div class={dropdownClasses}>
 		<!-- Models Section -->
-		<div class="border-b border-gray-100 px-4 py-2">
-			<h3 class="text-xs font-medium tracking-wide text-gray-500 uppercase">Models</h3>
+		<div class="border-default-100 border-b px-4 py-2">
+			<h3 class="text-default-500 text-xs font-medium tracking-wide uppercase">Models</h3>
 		</div>
 
 		{#each models as model (model.name)}
 			<div class={menuItem({ state: 'disabled', layout: 'default' })}>
 				<div class="flex flex-col">
 					<span class="font-medium">{model.name}</span>
-					<span class="text-xs text-gray-400">{model.provider}</span>
+					<span class="text-default-400 text-xs">{model.provider}</span>
 				</div>
-				<div class="text-xs text-gray-400">Disabled</div>
+				<div class="text-default-400 text-xs">Disabled</div>
 			</div>
 		{/each}
 
 		<!-- Divider -->
-		<div class="my-2 border-t border-gray-100"></div>
+		<div class="border-default-100 my-2 border-t"></div>
 
 		<!-- Thinking Mode Option -->
-		<div class="border-b border-gray-100 px-4 py-2">
-			<h3 class="text-xs font-medium tracking-wide text-gray-500 uppercase">Options</h3>
+		<div class="border-default-100 border-b px-4 py-2">
+			<h3 class="text-default-500 text-xs font-medium tracking-wide uppercase">Options</h3>
 		</div>
 
 		<div class={menuItem({ state: 'enabled', layout: 'full' }) + ' w-full cursor-pointer'}>
 			<div class="flex w-full items-center justify-between">
 				<div class="flex flex-col items-start">
 					<span class="font-medium">Thinking Mode</span>
-					<span class="text-xs text-gray-500">Show reasoning process</span>
+					<span class="text-default-500 text-xs">Show reasoning process</span>
 				</div>
 				<div class="ml-4 flex items-center">
 					<Toggle

package/dist/ai/MermaidRenderer.svelte

@@ -66,8 +66,8 @@
 <div class="mermaid-rounded">
 	<Mermaid string={diagram} {config}>
 		{#snippet error(errorObj)}
-			<div class="rounded-lg border border-red-200 bg-red-50 p-4">
-				<div class="flex items-center gap-2 text-red-800">
+			<div class="border-danger-200 bg-danger-50 rounded-lg border p-4">
+				<div class="text-danger-800 flex items-center gap-2">
 					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path
 							stroke-linecap="round"
@@ -78,7 +78,7 @@
 					</svg>
 					<span class="font-medium">Failed to render Mermaid diagram</span>
 				</div>
-				<p class="mt-2 text-sm text-red-700">${errorObj.message}</p>
+				<p class="text-danger-700 mt-2 text-sm">${errorObj.message}</p>
 			</div>
 		{/snippet}
 	</Mermaid>

package/dist/ai/MessageBox.svelte

@@ -151,7 +151,7 @@
 		{#if timestamp}
 			<div
 				class={cn(
-					'mt-1 text-xs text-gray-500',
+					'text-default-500 mt-1 text-xs',
 					isUser ? 'ml-auto text-right' : 'mr-auto text-left'
 				)}
 			>
@@ -166,7 +166,7 @@
 					bind:this={copyButtonRef}
 					onclick={handleCopyClick}
 					ondblclick={handleCopyDoubleClick}
-					class="flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600 opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-200 hover:text-gray-800"
+					class="bg-default-100 text-default-600 hover:bg-default-200 hover:text-default-800 flex items-center gap-1 rounded-md px-3 py-1 text-xs font-medium opacity-0 transition-opacity duration-200 group-hover:opacity-100"
 					title="Click: Copy markdown • Double-click: Copy rich text"
 				>
 					{#if showCopied}

package/dist/ai/ThinkingDisplay.svelte

@@ -87,7 +87,7 @@
 		variants: {
 			state: {
 				thinking: 'border-blue-200 bg-blue-50/50',
-				complete: 'border-gray-200 bg-gray-50/50'
+				complete: 'border-default-200 bg-default-50/50'
 			},
 			expanded: {
 				true: 'shadow-sm',
@@ -101,7 +101,7 @@
 		variants: {
 			state: {
 				thinking: 'text-blue-700',
-				complete: 'text-gray-700'
+				complete: 'text-default-700'
 			}
 		}
 	});
@@ -111,7 +111,7 @@
 		variants: {
 			state: {
 				thinking: 'text-blue-800',
-				complete: 'text-gray-700'
+				complete: 'text-default-700'
 			},
 			expanded: {
 				true: 'max-h-none',
@@ -185,7 +185,7 @@
 						<!-- Completed icon -->
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
-							class="h-4 w-4 text-gray-500"
+							class="text-default-500 h-4 w-4"
 							width="24"
 							height="24"
 							viewBox="0 0 24 24"
@@ -228,11 +228,11 @@
 							<div class="mr-4 flex flex-col items-center">
 								<!-- Timeline Icon -->
 								<div
-									class="z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white"
+									class="border-default-300 z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border bg-white"
 								>
 									{#if step.isComplete && index === parsedSteps.length - 1}
 										<!-- Checkmark only for the last completed step -->
-										<svg class="h-3 w-3 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+										<svg class="text-default-600 h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
 											<path
 												fill-rule="evenodd"
 												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
@@ -241,16 +241,16 @@
 										</svg>
 									{:else if step.isComplete}
 										<!-- Simple filled circle for other completed steps -->
-										<div class="h-2.5 w-2.5 rounded-full bg-gray-500"></div>
+										<div class="bg-default-500 h-2.5 w-2.5 rounded-full"></div>
 									{:else}
 										<!-- Pulsing dot for in-progress step -->
-										<div class="h-2.5 w-2.5 animate-pulse rounded-full bg-gray-400"></div>
+										<div class="bg-default-400 h-2.5 w-2.5 animate-pulse rounded-full"></div>
 									{/if}
 								</div>
 
 								<!-- Vertical Line (except for last item) -->
 								{#if index < parsedSteps.length - 1}
-									<div class="mt-1 h-full min-h-8 w-0.5 bg-gray-200"></div>
+									<div class="bg-default-200 mt-1 h-full min-h-8 w-0.5"></div>
 								{/if}
 							</div>
 
@@ -258,13 +258,13 @@
 							<div class="flex-1 pb-6 last:pb-0">
 								<!-- Step Title -->
 								<div class="mb-2">
-									<h4 class="text-sm leading-tight font-medium text-gray-800">
+									<h4 class="text-default-800 text-sm leading-tight font-medium">
 										{step.title}
 									</h4>
 								</div>
 
 								<!-- Step Description -->
-								<div class="text-sm leading-relaxed text-gray-600">
+								<div class="text-default-600 text-sm leading-relaxed">
 									{#if step.content.includes('•') || step.content.includes('-')}
 										<!-- Parse bullet points -->
 										<ul class="space-y-1">
@@ -272,7 +272,8 @@
 												{@const trimmedLine = line.trim()}
 												{#if trimmedLine.startsWith('•') || trimmedLine.startsWith('-')}
 													<li class="flex items-start">
-														<span class="mt-2 mr-2 h-1 w-1 flex-shrink-0 rounded-full bg-gray-400"
+														<span
+															class="bg-default-400 mt-2 mr-2 h-1 w-1 flex-shrink-0 rounded-full"
 														></span>
 														<span>{trimmedLine.substring(1).trim()}</span>
 													</li>

package/dist/ai/ai-chat-interface.js

@@ -12,7 +12,7 @@ export const aiChatInterface = tv({
             [Color.DEFAULT]: {
                 userMessage: 'bg-default-900 text-white',
                 sendButton: 'bg-default-900 hover:bg-default-800 text-white disabled:bg-default-300 disabled:text-default-500',
-                background: 'bg-gray-50'
+                background: 'bg-default-50'
             },
             [Color.PRIMARY]: {
                 userMessage: 'bg-primary-600 text-white',
@@ -37,7 +37,7 @@ export const aiChatInterface = tv({
             [Color.DANGER]: {
                 userMessage: 'bg-danger-600 text-white',
                 sendButton: 'bg-danger-600 hover:bg-danger-700 text-white disabled:bg-danger-300 disabled:text-danger-100',
-                background: 'bg-red-50'
+                background: 'bg-danger-50'
             },
             [Color.INFO]: {
                 userMessage: 'bg-info-600 text-white',

package/dist/elements/progress/Progress.svelte

@@ -104,7 +104,7 @@
 		aria-valuemax="100"
 	>
 		{#if segments}
-			{#each segmentPercentages as segment (segment.label || segment.value)}
+			{#each segmentPercentages as segment, index (segment.label ?? `segment-${index}`)}
 				{#if segment.percentage > 0}
 					<div
 						class={cn(getColorClass(segment.color), barClass)}
@@ -120,7 +120,7 @@
 
 	{#if segments && (showLabels || showValues)}
 		<div class="mt-1 flex justify-between">
-			{#each segmentPercentages as segment (segment.label || segment.value)}
+			{#each segmentPercentages as segment, index (segment.label ?? `segment-${index}`)}
 				{#if segment.percentage > 0}
 					<div class={labelTextClass}>
 						{#if showLabels && segment.label}

package/dist/file-browser/FileBrowser.svelte

@@ -696,11 +696,13 @@
 				<Button color={Color.PRIMARY} onclick={authenticate}>Authenticate</Button>
 			</div>
 		{:else}
-			<div class="mb-2 flex flex-wrap items-center justify-between border-b border-gray-100 pb-3">
+			<div
+				class="border-default-100 mb-2 flex flex-wrap items-center justify-between border-b pb-3"
+			>
 				<div class="flex flex-wrap items-center">
 					{#if breadcrumbs.length > 1}
 						<button
-							class="text-default-600 mr-1 rounded-full px-2 py-1 hover:bg-gray-100"
+							class="text-default-600 hover:bg-default-100 mr-1 rounded-full px-2 py-1"
 							onclick={navigateUp}
 							title="Go up"
 							aria-label="Navigate to parent folder"
@@ -731,14 +733,14 @@
 
 							{#if crumb.clickable && !crumb.current}
 								<button
-									class="cursor-pointer border-0 bg-transparent px-1 py-0 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+									class="text-default-600 hover:bg-default-100 hover:text-default-900 cursor-pointer border-0 bg-transparent px-1 py-0 text-sm"
 									onclick={() => navigateToFolder(crumb.path)}
 								>
 									{crumb.name}
 								</button>
 							{:else}
 								<span
-									class={`px-1 text-sm ${crumb.current ? 'font-semibold text-gray-800' : 'text-gray-600'}`}
+									class={`px-1 text-sm ${crumb.current ? 'text-default-800 font-semibold' : 'text-default-600'}`}
 								>
 									{crumb.name}
 								</span>
@@ -782,7 +784,7 @@
 						<div class="relative flex items-center">
 							<input
 								type="text"
-								class="h-7 w-40 rounded border border-gray-300 px-2 py-1 text-xs"
+								class="border-default-300 h-7 w-40 rounded border px-2 py-1 text-xs"
 								placeholder="Search files..."
 								value={searchQuery}
 								oninput={(e) => {
@@ -794,7 +796,7 @@
 							/>
 							{#if searchQuery}
 								<button
-									class="absolute right-1 text-xs text-gray-400 hover:text-gray-600"
+									class="text-default-400 hover:text-default-600 absolute right-1 text-xs"
 									onclick={clearSearch}
 									title="Clear search"
 								>
@@ -804,7 +806,7 @@
 						</div>
 						<button
 							onclick={handleSearch}
-							class="rounded bg-gray-200 px-2 py-1 text-xs hover:bg-gray-300"
+							class="bg-default-200 hover:bg-default-300 rounded px-2 py-1 text-xs"
 						>
 							Search
 						</button>

package/dist/filters/CompactFilters.svelte

@@ -70,23 +70,23 @@
 	</svg>
 {/snippet}
 
-<div class={cn('rounded-lg border border-gray-200 bg-white p-3 shadow-sm', className)}>
+<div class={cn('border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}>
 	<button
 		onclick={toggleExpanded}
 		class="mb-2 flex min-w-full cursor-pointer items-center justify-between"
 	>
 		<div class="flex items-center gap-2">
 			{#if FilterIcon}
-				<FilterIcon size={16} class="text-gray-500" />
+				<FilterIcon size={16} class="text-default-500" />
 			{:else}
-				<span class="text-gray-500">
+				<span class="text-default-500">
 					{@render DefaultFilterIcon()}
 				</span>
 			{/if}
 			<span class="text-sm font-medium">{title}</span>
 		</div>
 		<div
-			class="rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+			class="text-default-500 hover:bg-default-100 hover:text-default-700 rounded-md p-1"
 			aria-label={isExpanded ? `Collapse ${title.toLowerCase()}` : `Expand ${title.toLowerCase()}`}
 		>
 			{#if isExpanded}
@@ -100,7 +100,7 @@
 	{#if !isExpanded}
 		<!-- Summary of selected filters when collapsed -->
 		<div class={cn('flex flex-wrap gap-2', summaryClass)}>
-			{#each filterGroups as group (group.label)}
+			{#each filterGroups as group (group.key)}
 				{#if group.tabs.length > 0}
 					<div
 						class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-3 py-1 text-xs"
@@ -113,15 +113,17 @@
 		</div>
 	{:else}
 		<div class={cn('flex flex-col gap-2', expandedClass)}>
-			{#each filterGroups as group, index (group.label)}
+			{#each filterGroups as group, index (group.key)}
 				{#if group.tabs.length > 0}
 					<div
 						class={cn(
 							'flex items-center gap-2 pb-2',
-							index > 0 ? 'border-t border-gray-100 pt-2' : ''
+							index > 0 ? 'border-default-100 border-t pt-2' : ''
 						)}
 					>
-						<div class={cn('text-xs font-medium text-gray-500', group.minWidth || 'min-w-[70px]')}>
+						<div
+							class={cn('text-default-500 text-xs font-medium', group.minWidth || 'min-w-[70px]')}
+						>
 							{group.label}
 						</div>
 						<div class="flex flex-wrap gap-2">
@@ -132,7 +134,7 @@
 										'rounded-full border px-3 py-1 text-xs font-medium whitespace-nowrap',
 										group.selectedValue === tab.value
 											? 'bg-primary-50 text-primary-700 border-primary-200'
-											: 'border-gray-200 text-gray-700 hover:bg-gray-50'
+											: 'border-default-200 text-default-700 hover:bg-default-50'
 									)}
 								>
 									{tab.label}

package/dist/forms/Checkbox.svelte

@@ -44,7 +44,7 @@
 	</div>
 
 	{#if errors.length}
-		{#each errors as error (error)}
+		{#each errors as error, i (i)}
 			<p id={`${name}-errors`} class="text-danger-600 mt-1 text-sm" role="alert">
 				{error}
 			</p>

package/dist/forms/Input.svelte

@@ -25,7 +25,7 @@
 				'border rounded-lg shadow-xs w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2':
 					BASIC_TYPES.includes(type),
 				'w-full bg-white px-3 py-2 text-sm resize-y min-h-[100px]': type === 'textarea',
-				'border-red-300 focus:border-red-500 focus:ring-red-500': errors.length,
+				'border-danger-300 focus:border-danger-500 focus:ring-danger-500': errors.length,
 				'opacity-50 cursor-not-allowed': disabled,
 				...(BASIC_TYPES.includes(type)
 					? {
@@ -70,8 +70,8 @@
 		<input {...inputProps} bind:value />
 	{/if}
 	{#if errors.length}
-		{#each errors as error (error)}
-			<p id="{name}-errors" class="mt-1 text-sm text-red-600" role="alert">
+		{#each errors as error, i (i)}
+			<p id="{name}-errors" class="text-danger-600 mt-1 text-sm" role="alert">
 				{error}
 			</p>
 		{/each}
@@ -86,7 +86,7 @@
 				'block w-full text-sm font-medium',
 				{
 					'text-default-700': !errors.length,
-					'text-red-600': errors.length
+					'text-danger-600': errors.length
 				},
 				extraClass
 			)}>{label}</label

package/dist/forms/NumberInput.svelte

@@ -152,7 +152,7 @@
 	</div>
 
 	{#if errors?.length}
-		{#each errors as error (error)}
+		{#each errors as error, i (i)}
 			<p class="text-danger-600 text-sm">{error}</p>
 		{/each}
 	{/if}

package/dist/forms/RadioInputs.svelte

@@ -18,14 +18,14 @@
 	const radioClass = $derived(
 		cn('w-4 h-4 text-primary-600 border-default-300 focus:ring-primary-500', {
 			'opacity-50 cursor-not-allowed': disabled,
-			'border-red-300 focus:ring-red-500': errors.length
+			'border-danger-300 focus:ring-danger-500': errors.length
 		})
 	);
 
 	const labelClass = $derived(
 		cn('block text-sm font-medium', {
 			'text-default-700': !errors.length,
-			'text-red-600': errors.length
+			'text-danger-600': errors.length
 		})
 	);
 </script>
@@ -55,8 +55,8 @@
 		{/each}
 	</div>
 	{#if errors.length}
-		{#each errors as error (error)}
-			<p id={`${name}-errors`} class="mt-1 text-sm text-red-600" role="alert">
+		{#each errors as error, i (i)}
+			<p id={`${name}-errors`} class="text-danger-600 mt-1 text-sm" role="alert">
 				{error}
 			</p>
 		{/each}

package/dist/forms/Slider.svelte

@@ -333,8 +333,8 @@
 	</div>
 
 	{#if errors.length}
-		{#each errors as error (error)}
-			<p class="mt-2.5 text-sm text-red-600" role="alert">
+		{#each errors as error, i (i)}
+			<p class="text-danger-600 mt-2.5 text-sm" role="alert">
 				{error}
 			</p>
 		{/each}

package/dist/forms/Tags.svelte

@@ -108,7 +108,8 @@
 			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-sm px-3 py-2',
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
 			{
-				'border-red-300 focus-within:border-red-500 focus-within:ring-red-500': errors?.length
+				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':
+					errors?.length
 			},
 			className
 		)
@@ -174,8 +175,8 @@
 	</div>
 
 	{#if errors?.length}
-		{#each errors as error (error)}
-			<p class="text-sm text-red-600">{error}</p>
+		{#each errors as error, i (i)}
+			<p class="text-danger-600 text-sm">{error}</p>
 		{/each}
 	{/if}
 </div>

package/dist/forms/Toggle.svelte

@@ -24,7 +24,7 @@
 				[Color.PRIMARY]: 'bg-primary-500',
 				[Color.SECONDARY]: 'bg-secondary-500',
 				[Color.SUCCESS]: 'bg-green-500',
-				[Color.DANGER]: 'bg-red-500',
+				[Color.DANGER]: 'bg-danger-500',
 				[Color.WARNING]: 'bg-yellow-500',
 				[Color.INFO]: 'bg-blue-500',
 				[Color.DEFAULT]: 'bg-default-800'
@@ -63,7 +63,7 @@
 			{
 				'opacity-50 cursor-not-allowed': disabled,
 				'cursor-pointer': !disabled,
-				'focus:ring-red-500': errors.length,
+				'focus:ring-danger-500': errors.length,
 				[`focus:ring-${color}-500`]: !errors.length
 			},
 			className
@@ -81,7 +81,7 @@
 	const labelClasses = $derived(
 		cn('text-sm font-medium', {
 			'text-default-700': !errors.length,
-			'text-red-600': errors.length,
+			'text-danger-600': errors.length,
 			'opacity-50': disabled
 		})
 	);
@@ -123,8 +123,8 @@
 
 {#if errors.length}
 	<div id="{name}-errors" class="mt-1">
-		{#each errors as error (error)}
-			<p class="text-sm text-red-600" role="alert">
+		{#each errors as error, i (i)}
+			<p class="text-danger-600 text-sm" role="alert">
 				{error}
 			</p>
 		{/each}

package/dist/index.d.ts

@@ -984,9 +984,10 @@ export interface UserModalProps {
     class?: ClassValue;
 }
 export interface UserViewModalProps {
-    open: boolean;
+    open?: boolean;
     user: User | null;
     permissions?: Permission[];
+    roles?: Role[];
     onEdit?: (user: User) => void;
     onRegenerateApiKey?: (userId: string) => Promise<void>;
     onClose: () => void;