@makolabs/ripple 3.0.5 → 3.0.6

package/dist/ai/CodeRenderer.svelte

@@ -118,7 +118,7 @@
 		</span>
 		<button
 			onclick={copyCode}
-			class="flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-all duration-200 {copied
+			class="flex cursor-pointer 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-default-400 hover:bg-default-700 hover:text-default-200'}"
 			title={copied ? 'Copied!' : 'Copy code'}

package/dist/ai/MessageBox.svelte

@@ -166,7 +166,7 @@
 					bind:this={copyButtonRef}
 					onclick={handleCopyClick}
 					ondblclick={handleCopyDoubleClick}
-					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"
+					class="bg-default-100 text-default-600 hover:bg-default-200 hover:text-default-800 flex cursor-pointer 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/ai-types.d.ts

@@ -114,6 +114,17 @@ export interface FileBrowserProps {
      * @default true
      */
     allowFolderNavigation?: boolean;
+    /**
+     * Per-row selectability gate. Return `false` to prevent the row's
+     * checkbox from rendering — the file still appears in the list but
+     * can't be selected. When omitted every file is selectable.
+     *
+     * @example
+     * ```svelte
+     * <FileBrowser {adapter} isSelectable={(f) => !f.isFolder && f.size > 0} />
+     * ```
+     */
+    isSelectable?: (file: FileItem) => boolean;
     /** Additional CSS classes for the outer container. */
     class?: ClassValue;
     /**

package/dist/button/button.js

@@ -22,11 +22,11 @@ export const buttonVariants = tv({
             [Color.DANGER]: 'bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500'
         },
         size: {
-            [Size.XS]: 'h-7 px-2 text-xs',
-            [Size.SM]: 'h-8 px-3 text-sm',
-            [Size.MD]: 'h-9 px-4 text-sm',
-            [Size.LG]: 'h-10 px-5 text-base',
-            [Size.XL]: 'h-12 px-6 text-lg',
+            [Size.XS]: 'h-6 px-2 text-[10px]',
+            [Size.SM]: 'h-7 px-2.5 text-[11px]',
+            [Size.MD]: 'h-8 px-3 text-xs',
+            [Size.LG]: 'h-9 px-4 text-sm',
+            [Size.XL]: 'h-11 px-5 text-base',
             [Size.XXL]: 'h-14 px-8 text-xl'
         },
         rounded: {

package/dist/elements/badge/badge.js

@@ -8,11 +8,11 @@ export const badge = tv({
     variants: {
         size: {
             [Size.XS]: {
-                base: 'h-4 px-1.5 text-xs rounded gap-0.5',
+                base: 'h-4 px-1.5 text-[10px] rounded gap-0.5',
                 icon: 'h-2.5 w-2.5'
             },
             [Size.SM]: {
-                base: 'h-5 px-2 text-xs rounded gap-1',
+                base: 'h-5 px-2 text-[11px] rounded gap-1',
                 icon: 'h-3 w-3'
             },
             [Size.MD]: {

package/dist/elements/dropdown/Select.svelte

@@ -427,7 +427,7 @@
 {#if open && isMobile}
 	<button
 		type="button"
-		class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+		class="fixed inset-0 z-[9998] cursor-pointer bg-black/40 backdrop-blur-sm"
 		aria-label="Close"
 		onclick={() => (open = false)}
 	></button>

package/dist/elements/dropdown/dropdown.js

@@ -29,32 +29,32 @@ export const dropdownMenu = tv({
         },
         size: {
             [Size.XS]: {
-                trigger: 'px-2 py-1 text-xs',
-                item: 'px-2.5 py-1 text-xs',
-                itemIcon: 'mr-1.5 size-3.5',
-                header: 'px-2.5 py-1.5',
-                headerTitle: 'text-xs',
-                headerSubtitle: 'text-xs'
+                trigger: 'px-1.5 py-0.5 text-[10px]',
+                item: 'px-2 py-1 text-[10px]',
+                itemIcon: 'mr-1.5 size-3',
+                header: 'px-2 py-1',
+                headerTitle: 'text-[10px]',
+                headerSubtitle: 'text-[10px]'
             },
             [Size.SM]: {
+                trigger: 'px-2 py-1 text-[11px]',
+                item: 'px-2.5 py-1.5 text-[11px]',
+                itemIcon: 'mr-2 size-3.5',
+                header: 'px-2.5 py-1.5',
+                headerTitle: 'text-[11px]',
+                headerSubtitle: 'text-[11px]'
+            },
+            [Size.MD]: {
                 trigger: 'px-2.5 py-1.5 text-xs',
-                item: 'px-3 py-1.5 text-xs',
-                itemIcon: 'mr-2 size-4',
+                item: 'px-3 py-2 text-xs',
+                itemIcon: 'mr-2.5 size-4',
                 header: 'px-3 py-2',
                 headerTitle: 'text-xs',
                 headerSubtitle: 'text-xs'
             },
-            [Size.MD]: {
-                trigger: 'px-3 py-2 text-sm',
-                item: 'px-4 py-2 text-sm',
-                itemIcon: 'mr-3 size-5',
-                header: 'px-4 py-3',
-                headerTitle: 'text-sm',
-                headerSubtitle: 'text-sm'
-            },
             [Size.LG]: {
-                trigger: 'px-4 py-2.5 text-base',
-                item: 'px-5 py-2.5 text-base',
+                trigger: 'px-3 py-2 text-sm',
+                item: 'px-4 py-2.5 text-sm',
                 itemIcon: 'mr-3 size-6',
                 header: 'px-5 py-3.5',
                 headerTitle: 'text-base',

package/dist/elements/popover/Popover.svelte

@@ -234,7 +234,7 @@
 {#if open && useSheet}
 	<button
 		type="button"
-		class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+		class="fixed inset-0 z-[9998] cursor-pointer bg-black/40 backdrop-blur-sm"
 		aria-label="Close"
 		onclick={closeOnOutsideClick ? close : undefined}
 	></button>

package/dist/elements/spinner/spinner.js

@@ -8,11 +8,11 @@ export const spinner = tv({
     },
     variants: {
         size: {
-            [Size.XS]: { svg: 'h-3 w-3', label: 'text-xs' },
-            [Size.SM]: { svg: 'h-4 w-4', label: 'text-xs' },
-            [Size.MD]: { svg: 'h-5 w-5', label: 'text-sm' },
-            [Size.LG]: { svg: 'h-6 w-6', label: 'text-base' },
-            [Size.XL]: { svg: 'h-8 w-8', label: 'text-lg' },
+            [Size.XS]: { svg: 'h-3 w-3', label: 'text-[10px]' },
+            [Size.SM]: { svg: 'h-4 w-4', label: 'text-[11px]' },
+            [Size.MD]: { svg: 'h-5 w-5', label: 'text-xs' },
+            [Size.LG]: { svg: 'h-6 w-6', label: 'text-sm' },
+            [Size.XL]: { svg: 'h-8 w-8', label: 'text-base' },
             [Size.XXL]: { svg: 'h-12 w-12', label: 'text-xl' }
         },
         color: {

package/dist/file-browser/FileBrowser.svelte

@@ -19,6 +19,7 @@
 		infoSection,
 		selectAllScope = 'page',
 		allowFolderNavigation = true,
+		isSelectable,
 		height = 'h-[500px]',
 		class: className = '',
 		selectedItems = $bindable<FileItem[]>([]),
@@ -780,7 +781,7 @@
 				<div class="flex min-w-0 flex-1 items-center">
 					{#if breadcrumbs.length > 1}
 						<button
-							class="text-default-600 hover:bg-default-100 mr-1 rounded-full px-2 py-1"
+							class="text-default-600 hover:bg-default-100 mr-1 cursor-pointer rounded-full px-2 py-1"
 							onclick={navigateUp}
 							title="Go up"
 							aria-label="Navigate to parent folder"
@@ -898,7 +899,7 @@
 							/>
 							{#if searchQuery}
 								<button
-									class="text-default-400 hover:text-default-600 absolute right-1 text-xs"
+									class="text-default-400 hover:text-default-600 absolute right-1 cursor-pointer text-xs"
 									onclick={clearSearch}
 									title="Clear search"
 								>
@@ -908,7 +909,7 @@
 						</div>
 						<button
 							onclick={handleSearch}
-							class="bg-default-200 hover:bg-default-300 rounded px-2 py-1 text-xs"
+							class="bg-default-200 hover:bg-default-300 cursor-pointer rounded px-2 py-1 text-xs"
 						>
 							Search
 						</button>
@@ -955,6 +956,7 @@
 						}}
 						onsort={handleSort}
 						selectable={true}
+						isRowSelectable={isSelectable}
 						{selectAllScope}
 						{onselect}
 						{selected}

package/dist/forms/DateRange.svelte

@@ -345,7 +345,7 @@
 		<Portal target={datePickerRef}>
 			<button
 				type="button"
-				class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+				class="fixed inset-0 z-[9998] cursor-pointer bg-black/40 backdrop-blur-sm"
 				aria-label="Close"
 				onclick={() => (isOpen = false)}
 			></button>
@@ -455,7 +455,7 @@
 			</button>
 			<button
 				type="button"
-				class="text-default-700 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
+				class="text-default-700 inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-sm font-medium"
 				>{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}</button
 			>
 			<button

package/dist/forms/MarketSelector.svelte

@@ -2,7 +2,7 @@
 	import { Color, Size } from '../variants.js';
 	import SegmentedControl from './SegmentedControl.svelte';
 	import { COUNTRY_NAMES } from './market/country-data.js';
-	import { countryCodeToFlagEmoji } from './market/flag-emoji.js';
+	import FlagSvg from './market/FlagSvg.svelte';
 	import type { CountryCode } from './market/country-data.js';
 	import type { MarketSelectorProps } from './market/market-selector-types.js';
 	import type { SegmentedOption } from '../index.js';
@@ -37,7 +37,8 @@
 			value: code,
 			label: code,
 			title: COUNTRY_NAMES[code],
-			prefix: effectiveShowFlags ? countryCodeToFlagEmoji(code) : undefined
+			prefix: effectiveShowFlags ? (FlagSvg as SegmentedOption['prefix']) : undefined,
+			prefixProps: effectiveShowFlags ? { code } : undefined
 		}));
 	});
 

package/dist/forms/NumberInput.svelte

@@ -153,7 +153,7 @@
 			     unit to pick from. Otherwise the unit is static text below. -->
 			<button
 				type="button"
-				class="hover:bg-default-100 flex items-center gap-1 rounded px-1"
+				class="hover:bg-default-100 flex cursor-pointer items-center gap-1 rounded px-1"
 				data-testid={buildTestId('numberinput', 'unit', testId)}
 				onclick={handleUnitToggle}
 				{disabled}
@@ -191,7 +191,7 @@
 				{#each units as unitOption (unitOption.value)}
 					<button
 						type="button"
-						class="hover:bg-default-100 w-full px-3 py-1.5 text-left text-sm"
+						class="hover:bg-default-100 w-full cursor-pointer px-3 py-1.5 text-left text-sm"
 						class:bg-default-50={unit === unitOption.value}
 						onclick={() => handleUnitSelect(unitOption.value)}
 					>

package/dist/forms/SegmentedControl.svelte

@@ -155,14 +155,16 @@
 				onkeydown={(e) => handleSegmentKeydown(e, index)}
 			>
 				{#if option.prefix}
-					<span class="text-base leading-none" aria-hidden="true">{option.prefix}</span>
+					<span class="leading-none" aria-hidden="true">
+						{#if typeof option.prefix === 'string'}
+							{option.prefix}
+						{:else}
+							{@const PrefixComponent = option.prefix}
+							<PrefixComponent {...option.prefixProps} />
+						{/if}
+					</span>
 				{/if}
-				<span
-					class={cn(
-						!compact && (size === Size.XS || size === Size.SM) && 'text-sm',
-						compact && 'sr-only'
-					)}
-				>
+				<span class={cn(compact && 'sr-only')}>
 					{option.label}
 				</span>
 			</button>

package/dist/forms/date-picker/DatePicker.svelte

@@ -99,7 +99,7 @@
 					type="button"
 					onclick={clear}
 					aria-label="Clear date"
-					class="text-default-400 hover:text-default-700 flex size-5 items-center justify-center rounded"
+					class="text-default-400 hover:text-default-700 flex size-5 cursor-pointer items-center justify-center rounded"
 				>
 					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 						<path

package/dist/forms/form-size.js

@@ -22,29 +22,29 @@ const xl = {
 };
 export const formSizeTokens = {
     [Size.XS]: {
-        height: 'h-5',
-        padX: 'px-1',
-        padY: 'py-0',
-        text: 'text-xs',
+        height: 'h-6',
+        padX: 'px-1.5',
+        padY: 'py-0.5',
+        text: 'text-[10px]',
         gap: 'gap-1',
         iconSize: 'size-3',
         radius: 'rounded-sm',
         shadow: 'shadow-none'
     },
     [Size.SM]: {
-        height: 'h-6',
-        padX: 'px-1.5',
-        padY: 'py-0.5',
-        text: 'text-xs',
+        height: 'h-7',
+        padX: 'px-2',
+        padY: 'py-1',
+        text: 'text-[11px]',
         gap: 'gap-1',
         iconSize: 'size-3',
         radius: 'rounded',
         shadow: 'shadow-xs'
     },
     [Size.MD]: {
-        height: 'h-7',
-        padX: 'px-2',
-        padY: 'py-1',
+        height: 'h-8',
+        padX: 'px-2.5',
+        padY: 'py-1.5',
         text: 'text-xs',
         gap: 'gap-1.5',
         iconSize: 'size-3.5',

package/dist/forms/form-types.d.ts

@@ -581,8 +581,14 @@ export interface SliderProps {
  * Unlike `TabGroup`, segments are purely a control (no panels).
  */
 export type SegmentedOption = RadioOption & {
-    /** Content rendered before the label (e.g. flag emoji, icon). */
-    prefix?: string;
+    /**
+     * Content rendered before the label. Pass a string (e.g. emoji) or
+     * a Svelte component (e.g. `FlagSvg` for SVG country flags).
+     * When a component, pass its props via `prefixProps`.
+     */
+    prefix?: string | Component;
+    /** Props forwarded to the `prefix` component (ignored for strings). */
+    prefixProps?: Record<string, any>;
     /** Native `title` attribute on the segment button (hover tooltip). */
     title?: string;
     disabled?: boolean;

package/dist/forms/market/FlagSvg.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+
+	let {
+		code,
+		class: className = ''
+	}: {
+		/** ISO 3166-1 alpha-2 country code (e.g. 'DE', 'US'). */
+		code: string;
+		class?: string;
+	} = $props();
+
+	const lc = $derived(code.toLowerCase());
+
+	// flagcdn.com serves public-domain SVG flags — no API key, no CORS issues,
+	// cached aggressively by browsers. Falls back to a neutral gray placeholder
+	// if the image fails to load.
+	let failed = $state(false);
+</script>
+
+{#if !failed}
+	<img
+		src="https://flagcdn.com/{lc}.svg"
+		alt={code}
+		class={cn('inline-block h-3 w-4 rounded-sm object-cover', className)}
+		loading="lazy"
+		onerror={() => (failed = true)}
+	/>
+{:else}
+	<span
+		class={cn(
+			'bg-default-200 text-default-500 inline-flex h-3 w-4 items-center justify-center rounded-sm text-[8px]',
+			className
+		)}
+	>
+		{code}
+	</span>
+{/if}

package/dist/forms/market/FlagSvg.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    /** ISO 3166-1 alpha-2 country code (e.g. 'DE', 'US'). */
+    code: string;
+    class?: string;
+};
+declare const FlagSvg: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlagSvg = ReturnType<typeof FlagSvg>;
+export default FlagSvg;

package/dist/index.d.ts

@@ -129,6 +129,7 @@ export { default as MonthPicker } from './forms/month-picker/MonthPicker.svelte'
 export { default as Tags } from './forms/Tags.svelte';
 export { default as SegmentedControl } from './forms/SegmentedControl.svelte';
 export { default as MarketSelector } from './forms/MarketSelector.svelte';
+export { default as FlagSvg } from './forms/market/FlagSvg.svelte';
 export { dropdownMenu } from './elements/dropdown/dropdown.js';
 export { badge } from './elements/badge/badge.js';
 export { buttonVariants } from './button/button.js';

package/dist/index.js

@@ -116,6 +116,7 @@ export { default as MonthPicker } from './forms/month-picker/MonthPicker.svelte'
 export { default as Tags } from './forms/Tags.svelte';
 export { default as SegmentedControl } from './forms/SegmentedControl.svelte';
 export { default as MarketSelector } from './forms/MarketSelector.svelte';
+export { default as FlagSvg } from './forms/market/FlagSvg.svelte';
 // ============================================================================
 // Component Variant Utilities
 // ============================================================================

package/dist/layout/activity-list/ActivityList.svelte

@@ -108,7 +108,7 @@
 						<div class="min-w-0 flex-1" data-activity-custom="">
 							{@render customContent?.(activityItem, index)}
 						</div>
-					{:else if timeline && activityItem.subtitle}
+					{:else if timeline && activityItem.subtitle && activityItem.timelineStyle === 'bubble'}
 						<div class="min-w-0 flex-1">
 							<div class="flex items-start justify-between gap-3">
 								<div

package/dist/layout/activity-list/activity-list-types.d.ts

@@ -76,6 +76,16 @@ export type ActivityItem = {
      * inside the snippet.
      */
     custom?: boolean;
+    /**
+     * Controls how the row renders when the parent list has `timeline`
+     * mode enabled and a `subtitle` is present.
+     * - `'flat'` — inline text, no card wrapper (default)
+     * - `'bubble'` — white rounded card with a ring border (comment style)
+     *
+     * Has no effect when `timeline` is false on the parent list.
+     * @default 'flat'
+     */
+    timelineStyle?: 'flat' | 'bubble';
 };
 /** Density variants specific to ActivityList. */
 export type ActivityListSize = 'sm' | 'md';

package/dist/layout/activity-list/activity-list.js

@@ -6,7 +6,7 @@ export const activityList = tv({
         header: '',
         title: 'font-medium text-default-900',
         content: 'divide-y divide-default-200',
-        item: 'relative flex items-start hover:bg-default-50 transition-colors',
+        item: 'relative flex items-center hover:bg-default-50 transition-colors',
         accentBar: 'absolute inset-y-0 left-0 w-[3px]',
         timelineLine: 'absolute top-0 bottom-0 w-[2px] bg-default-200',
         iconWrapper: 'relative z-10 flex shrink-0 items-center justify-center rounded-full ring-4 ring-white',

package/dist/layout/sidebar/Sidebar.svelte

@@ -155,7 +155,7 @@
 		type="button"
 		onclick={toggle}
 		aria-label="Close navigation"
-		class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm md:hidden"
+		class="fixed inset-0 z-40 cursor-pointer bg-black/50 backdrop-blur-sm md:hidden"
 	></button>
 {/if}
 

package/dist/layout/table/Table.svelte

@@ -13,6 +13,7 @@
 	let {
 		data = [],
 		columns = [],
+		size = 'md',
 		bordered: externalBordered,
 		striped = false,
 		pageSize = 10,
@@ -49,6 +50,7 @@
 		selectAllScope = 'page',
 		rowKey,
 		expandable = false,
+		isRowSelectable,
 		testId
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: TableProps<any> = $props();
@@ -100,6 +102,7 @@
 		sortIcon: sortIconBaseClass
 	} = $derived(
 		table({
+			size,
 			bordered,
 			striped
 		})
@@ -234,8 +237,12 @@
 		return rowIdentity(a) === rowIdentity(b);
 	}
 
+	function canSelectRow(row: DataRow): boolean {
+		return !isRowSelectable || isRowSelectable(row);
+	}
+
 	function toggleRowSelection(row: DataRow) {
-		if (!selectable) return;
+		if (!selectable || !canSelectRow(row)) return;
 
 		const index = selected.findIndex((r) => sameRow(r, row));
 		if (index === -1) {
@@ -280,7 +287,7 @@
 
 	function handleSelectAll() {
 		const pageData = getPaginatedData();
-		const scopeData = selectAllScope === 'all' ? data : pageData;
+		const scopeData = (selectAllScope === 'all' ? data : pageData).filter(canSelectRow);
 		const allSelected = scopeData.every((r) => isRowSelected(r));
 		if (allSelected) {
 			if (selectAllScope === 'all') {
@@ -290,11 +297,11 @@
 			}
 		} else {
 			if (selectAllScope === 'all') {
-				selected = [...data];
+				selected = [...data.filter(canSelectRow)];
 			} else {
 				const newSelected = [...selected];
 				for (const r of pageData) {
-					if (!isRowSelected(r)) {
+					if (canSelectRow(r) && !isRowSelected(r)) {
 						newSelected.push(r);
 					}
 				}
@@ -310,6 +317,9 @@
 	}
 
 	function handleRowClick(row: DataRow, index: number) {
+		if (selectable && canSelectRow(row)) {
+			toggleRowSelection(row);
+		}
 		onrowclick?.(row, index);
 	}
 
@@ -490,7 +500,7 @@
 							<tr
 								class={cn(trClasses, rowClass(row, rowIndex), {
 									'bg-primary-100': selectable && isRowSelected(row),
-									'cursor-pointer': onrowclick
+									'cursor-pointer': onrowclick || (selectable && canSelectRow(row))
 								})}
 								onclick={() => handleRowClick(row, rowIndex)}
 								aria-selected={selectable && isRowSelected(row)}
@@ -500,7 +510,7 @@
 									<td class={cn(tdClasses, 'w-10')}>
 										<button
 											type="button"
-											class="text-default-400 hover:text-default-600 flex items-center justify-center transition-transform"
+											class="text-default-400 hover:text-default-600 flex cursor-pointer items-center justify-center transition-transform"
 											onclick={(e) => {
 												e.stopPropagation();
 												toggleRowExpanded(row, rowIndex);
@@ -527,16 +537,18 @@
 								{/if}
 								{#if selectable}
 									<td class={cn(tdClasses, 'text-center')}>
-										<input
-											type="checkbox"
-											checked={isRowSelected(row)}
-											onclick={(e) => {
-												e.stopPropagation(); // Prevent row click
-												toggleRowSelection(row);
-											}}
-											aria-label={`Select row ${rowIndex + 1}`}
-											data-testid={buildTestId('table', 'row-select', testId, rowIndex)}
-										/>
+										{#if canSelectRow(row)}
+											<input
+												type="checkbox"
+												checked={isRowSelected(row)}
+												onclick={(e) => {
+													e.stopPropagation();
+													toggleRowSelection(row);
+												}}
+												aria-label={`Select row ${rowIndex + 1}`}
+												data-testid={buildTestId('table', 'row-select', testId, rowIndex)}
+											/>
+										{/if}
 									</td>
 								{/if}
 

package/dist/layout/table/table-types.d.ts

@@ -114,6 +114,8 @@ export type TableProps<T = DataRow> = {
     data: T[];
     /** Column definitions — see `TableColumn`. */
     columns: TableColumn<T>[];
+    /** Cell/header density. @default 'md' */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     /** Show horizontal/vertical borders. @default true (unless a title/subtitle is set) */
     bordered?: boolean;
     /** Alternate row backgrounds. @default false */
@@ -160,6 +162,13 @@ export type TableProps<T = DataRow> = {
     onpagechange?: (page: number) => void;
     /** Per-row dynamic classes (e.g. tint by status). */
     rowClass?: (row: T, index: number) => ClassValue;
+    /**
+     * Per-row selectability gate. Return `false` to hide the checkbox
+     * for that row. When omitted every row is selectable (if `selectable`
+     * is true). Doesn't affect `select all` — unselectable rows are
+     * excluded automatically.
+     */
+    isRowSelectable?: (row: T) => boolean;
     /** Show a skeleton placeholder instead of rows while loading. @default false */
     loading?: boolean;
     /** Expanded-row content snippet. Only used when `expandable` is true. */

package/dist/layout/table/table.js

@@ -8,7 +8,7 @@ export const table = tv({
         thead: '',
         tbody: 'divide-y divide-default-200',
         tr: 'transition-colors hover:bg-default-50',
-        th: 'text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap',
+        th: 'text-xs font-medium tracking-wider text-gray-500 whitespace-nowrap',
         td: 'whitespace-nowrap',
         footer: 'p-4',
         pagination: 'flex items-center justify-between',
@@ -19,28 +19,28 @@ export const table = tv({
     variants: {
         size: {
             xs: {
-                th: 'px-2 py-1.5 text-xs',
-                td: 'px-2 py-1.5 text-xs'
+                th: 'px-1.5 py-1 text-[10px]',
+                td: 'px-1.5 py-1 text-[10px]'
             },
             sm: {
-                th: 'px-3 py-2 text-xs',
-                td: 'px-3 py-2 text-sm'
+                th: 'px-2 py-1.5 text-[11px]',
+                td: 'px-2 py-1.5 text-[11px]'
             },
             md: {
-                th: 'px-4 py-3 text-sm',
-                td: 'px-4 py-3 text-sm'
+                th: 'px-2.5 py-2 text-xs',
+                td: 'px-2.5 py-2 text-xs'
             },
             lg: {
-                th: 'px-6 py-4 text-sm',
-                td: 'px-6 py-4 text-base'
+                th: 'px-4 py-3 text-sm',
+                td: 'px-4 py-3 text-sm'
             },
             xl: {
-                th: 'px-8 py-5 text-base',
-                td: 'px-8 py-5 text-base'
+                th: 'px-6 py-4 text-base',
+                td: 'px-6 py-4 text-base'
             },
             '2xl': {
-                th: 'px-10 py-6 text-lg',
-                td: 'px-10 py-6 text-lg'
+                th: 'px-8 py-5 text-lg',
+                td: 'px-8 py-5 text-lg'
             }
         },
         color: {

package/dist/layout/tabs/tabs.js

@@ -25,16 +25,16 @@ export const tabs = tv({
         },
         size: {
             [Size.XS]: {
-                trigger: 'px-2 py-1 text-xs'
+                trigger: 'px-1.5 py-0.5 text-[10px]'
             },
             [Size.SM]: {
-                trigger: 'px-2 py-1 text-xs'
+                trigger: 'px-2 py-1 text-[11px]'
             },
             [Size.MD]: {
-                trigger: 'px-3 py-2 text-sm'
+                trigger: 'px-2.5 py-1.5 text-xs'
             },
             [Size.LG]: {
-                trigger: 'px-4 py-2.5 text-base'
+                trigger: 'px-3 py-2 text-sm'
             },
             [Size.XL]: {
                 trigger: 'px-5 py-3 text-lg'
@@ -47,7 +47,7 @@ export const tabs = tv({
             line: {},
             pill: {
                 list: 'flex flex-nowrap border-none gap-2 p-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                trigger: 'inline-flex items-center shrink-0 whitespace-nowrap px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
+                trigger: 'inline-flex items-center shrink-0 whitespace-nowrap transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
             }
         },
         selected: {

package/dist/user-management/UserViewModal.svelte

@@ -166,7 +166,7 @@
 							<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"
+								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}

package/package.json

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