@makolabs/ripple 3.0.1 → 3.0.3

package/dist/forms/Toggle.svelte

@@ -45,12 +45,12 @@
 	const toggleSize = $derived(
 		(
 			{
-				[Size.XS]: 'w-6 h-3',
-				[Size.SM]: 'w-7 h-3.5',
-				[Size.MD]: 'w-8 h-4',
-				[Size.LG]: 'w-10 h-5',
-				[Size.XL]: 'w-12 h-6',
-				[Size.XXL]: 'w-12 h-6'
+				[Size.XS]: 'w-7 h-3.5',
+				[Size.SM]: 'w-8 h-4',
+				[Size.MD]: 'w-10 h-5',
+				[Size.LG]: 'w-12 h-6',
+				[Size.XL]: 'w-14 h-7',
+				[Size.XXL]: 'w-14 h-7'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);
@@ -58,12 +58,12 @@
 	const thumbSize = $derived(
 		(
 			{
-				[Size.XS]: 'h-2 w-2',
-				[Size.SM]: 'h-2.5 w-2.5',
-				[Size.MD]: 'h-3 w-3',
-				[Size.LG]: 'h-4 w-4',
-				[Size.XL]: 'h-5 w-5',
-				[Size.XXL]: 'h-5 w-5'
+				[Size.XS]: 'h-2.5 w-2.5',
+				[Size.SM]: 'h-3 w-3',
+				[Size.MD]: 'h-4 w-4',
+				[Size.LG]: 'h-5 w-5',
+				[Size.XL]: 'h-6 w-6',
+				[Size.XXL]: 'h-6 w-6'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);
@@ -71,12 +71,12 @@
 	const thumbPosition = $derived(
 		(
 			{
-				[Size.XS]: value ? 'translate-x-3' : 'translate-x-0.5',
-				[Size.SM]: value ? 'translate-x-3.5' : 'translate-x-0.5',
-				[Size.MD]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.LG]: value ? 'translate-x-5' : 'translate-x-0.5',
-				[Size.XL]: value ? 'translate-x-6' : 'translate-x-0.5',
-				[Size.XXL]: value ? 'translate-x-6' : 'translate-x-0.5'
+				[Size.XS]: value ? 'translate-x-3.5' : 'translate-x-0.5',
+				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.MD]: value ? 'translate-x-5' : 'translate-x-0.5',
+				[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5',
+				[Size.XL]: value ? 'translate-x-7' : 'translate-x-0.5',
+				[Size.XXL]: value ? 'translate-x-7' : 'translate-x-0.5'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);

package/dist/forms/calendar/Calendar.svelte

@@ -228,7 +228,8 @@
 
 <div
 	class={cn(
-		'border-default-200 inline-block rounded-lg border bg-white shadow-xs select-none',
+		'inline-block bg-white select-none',
+		'border-default-200 rounded-lg border shadow-xs',
 		density.panel,
 		density.padding,
 		className

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

@@ -127,7 +127,14 @@
 		</button>
 
 		{#snippet content()}
-			<Calendar {value} {minDate} {maxDate} {size} onselect={(d) => handleSelect(d as Date)} />
+			<Calendar
+				{value}
+				{minDate}
+				{maxDate}
+				{size}
+				class="max-sm:w-full max-sm:rounded-none max-sm:border-0 max-sm:shadow-none"
+				onselect={(d) => handleSelect(d as Date)}
+			/>
 		{/snippet}
 	</Popover>
 

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

@@ -236,6 +236,24 @@ export type NumberInputProps = {
     placeholder?: string;
     size?: VariantSizes;
     class?: ClassValue;
+    /**
+     * Leading icon rendered inside the field. Pass a Svelte component
+     * (e.g. an icon from your icon library) to fully customise, or use
+     * `iconPreset` for built-in options. When both are set, `icon` wins.
+     */
+    icon?: Component;
+    /**
+     * Built-in leading icon preset. Saves importing a separate icon
+     * component for common use cases.
+     * - `'currency'` — banknotes
+     * - `'quantity'` — hash / #
+     * - `'percentage'` — %
+     * - `'weight'` — scale
+     * - `'temperature'` — thermometer
+     *
+     * Omit (or pass `undefined`) for no icon. Overridden by `icon` prop.
+     */
+    iconPreset?: 'currency' | 'quantity' | 'percentage' | 'weight' | 'temperature';
     /**
      * Currently selected unit. When `units` is provided, this doubles as
      * the controlled value of the unit dropdown.
@@ -252,6 +270,16 @@ export type NumberInputProps = {
     dropdownIcon?: Component;
     /** Fires when the user picks a different unit. */
     onunitchange?: (prevUnit: string, newUnit: string) => void;
+    /**
+     * Format large numbers with thousands separators for readability
+     * (e.g. `1,232,312`). Formatting is applied on blur; while focused,
+     * the raw number is shown so typing stays predictable. @default true
+     */
+    formatThousands?: boolean;
+    /**
+     * BCP 47 locale used for thousands-separator formatting. @default 'en-US'
+     */
+    locale?: string;
     testId?: string;
 };
 /**

package/dist/forms/month-picker/MonthPicker.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import { formSizeTokens } from '../form-size.js';
+	import Popover from '../../elements/popover/Popover.svelte';
+	import type { MonthPickerProps } from './month-picker-types.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		value = $bindable<Date | null>(null),
+		placeholder = 'Select month',
+		minDate,
+		maxDate,
+		clearable = true,
+		disabled = false,
+		size = Size.MD,
+		errors = [],
+		class: className = '',
+		onselect,
+		testId
+	}: MonthPickerProps = $props();
+
+	let open = $state(false);
+	let listEl = $state<HTMLDivElement | undefined>();
+	const tokens = $derived(formSizeTokens[size]);
+	const hasErrors = $derived(errors.length > 0);
+
+	const MONTH_NAMES = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	] as const;
+
+	const MONTH_SHORT = [
+		'Jan',
+		'Feb',
+		'Mar',
+		'Apr',
+		'May',
+		'Jun',
+		'Jul',
+		'Aug',
+		'Sep',
+		'Oct',
+		'Nov',
+		'Dec'
+	] as const;
+
+	const display = $derived(value ? `${MONTH_NAMES[value.getMonth()]} ${value.getFullYear()}` : '');
+
+	// Build a flat list of months spanning a range of years. Default:
+	// 5 years before → 5 years after the anchor (selected or today).
+	const RANGE_YEARS = 5;
+	type MonthEntry = { year: number; month: number; date: Date; label: string; disabled: boolean };
+
+	const anchor = $derived(value ?? new Date());
+	const startYear = $derived(minDate ? minDate.getFullYear() : anchor.getFullYear() - RANGE_YEARS);
+	const endYear = $derived(maxDate ? maxDate.getFullYear() : anchor.getFullYear() + RANGE_YEARS);
+
+	const months = $derived.by<MonthEntry[]>(() => {
+		const out: MonthEntry[] = [];
+		for (let y = startYear; y <= endYear; y++) {
+			for (let m = 0; m < 12; m++) {
+				const d = new Date(y, m, 1);
+				let disabled = false;
+				if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) disabled = true;
+				if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) disabled = true;
+				out.push({
+					year: y,
+					month: m,
+					date: d,
+					label: MONTH_NAMES[m],
+					disabled
+				});
+			}
+		}
+		return out;
+	});
+
+	// Unique sorted years and a fast lookup by year*12+month key.
+	const years = $derived([...new Set(months.map((e) => e.year))]);
+	const monthMap = $derived(new Map(months.map((e) => [e.year * 12 + e.month, e])));
+
+	function isSelected(entry: MonthEntry): boolean {
+		return !!value && value.getFullYear() === entry.year && value.getMonth() === entry.month;
+	}
+
+	function isCurrent(entry: MonthEntry): boolean {
+		const now = new Date();
+		return entry.year === now.getFullYear() && entry.month === now.getMonth();
+	}
+
+	function pick(entry: MonthEntry) {
+		if (entry.disabled) return;
+		value = entry.date;
+		onselect?.(entry.date);
+		open = false;
+	}
+
+	function clear(e: MouseEvent) {
+		e.stopPropagation();
+		value = null;
+		open = false;
+		onselect?.(null);
+	}
+
+	function setThisMonth() {
+		const now = new Date();
+		const d = new Date(now.getFullYear(), now.getMonth(), 1);
+		if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) return;
+		if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) return;
+		value = d;
+		onselect?.(value);
+		open = false;
+	}
+
+	// Auto-scroll to the selected (or current) month when the panel opens.
+	$effect(() => {
+		if (!open || !listEl) return;
+		requestAnimationFrame(() => {
+			const target =
+				listEl?.querySelector('[data-selected="true"]') ??
+				listEl?.querySelector('[data-current="true"]');
+			target?.scrollIntoView({ block: 'center' });
+		});
+	});
+</script>
+
+<div class={cn('w-full', className)}>
+	{#if label}
+		<label for={id} class="text-default-700 mb-1 block text-sm font-medium">
+			{label}
+		</label>
+	{/if}
+
+	<input
+		type="hidden"
+		{name}
+		value={value ? `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}` : ''}
+	/>
+
+	<Popover trigger="manual" bind:open placement="bottom" {disabled}>
+		<button
+			{id}
+			type="button"
+			{disabled}
+			onclick={() => {
+				if (!disabled) open = !open;
+			}}
+			aria-haspopup="dialog"
+			aria-expanded={open}
+			class={cn(
+				'flex w-full items-center border bg-white transition-colors',
+				'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.gap,
+				tokens.radius,
+				tokens.shadow,
+				hasErrors
+					? 'border-danger-300 focus-visible:border-danger-500 focus-visible:ring-danger-500'
+					: 'border-default-300 focus-visible:border-primary-500 focus-visible:ring-primary-500',
+				disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+			)}
+			data-testid={buildTestId('month-picker', undefined, testId)}
+		>
+			<span class={cn('flex-1 text-left', !display && 'text-default-400')}>
+				{display || placeholder}
+			</span>
+			{#if clearable && value && !disabled}
+				<span
+					role="button"
+					tabindex="-1"
+					onclick={clear}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') clear(e as unknown as MouseEvent);
+					}}
+					aria-label="Clear month"
+					class={cn(
+						'text-default-400 hover:text-default-700 flex cursor-pointer items-center justify-center rounded',
+						tokens.iconSize
+					)}
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="M3 3l6 6M9 3l-6 6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</span>
+			{/if}
+			<svg
+				class={cn('text-default-400', tokens.iconSize)}
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				aria-hidden="true"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2zM4.75 5.5c-.69 0-1.25.56-1.25 1.25V8h13V6.75c0-.69-.56-1.25-1.25-1.25H4.75zM16.5 9.5h-13v5.75c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V9.5z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</button>
+
+		{#snippet content({ close })}
+			{@render monthGrid(close)}
+		{/snippet}
+	</Popover>
+
+	{#if hasErrors}
+		<ul class="mt-1 space-y-0.5" role="alert">
+			{#each errors as error (error)}
+				<li class="text-danger-600 text-xs">{error}</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+{#snippet monthGrid(close: () => void)}
+	<div class="flex w-full flex-col sm:w-56">
+		<div
+			bind:this={listEl}
+			class="max-h-72 overflow-y-auto [scrollbar-width:none] sm:max-h-72 [&::-webkit-scrollbar]:hidden"
+		>
+			{#each years as year (year)}
+				{@const yearSelected = value?.getFullYear() === year}
+				<div
+					class={cn(
+						'border-default-200 sticky top-0 z-10 border-b px-3 py-1.5 text-xs font-bold',
+						yearSelected ? 'bg-primary-50 text-primary-700' : 'bg-default-50 text-default-800'
+					)}
+					data-year={year}
+				>
+					{year}
+				</div>
+				<div class="grid grid-cols-4 gap-0.5 p-1.5">
+					{#each MONTH_SHORT as monthLabel, m (m)}
+						{@const entry = monthMap.get(year * 12 + m)}
+						{@const sel = entry ? isSelected(entry) : false}
+						{@const cur = entry ? isCurrent(entry) : false}
+						{@const dis = entry?.disabled ?? true}
+						<button
+							type="button"
+							data-month={m}
+							data-selected={sel || undefined}
+							data-current={cur || undefined}
+							onclick={() => entry && pick(entry)}
+							disabled={dis}
+							class={cn(
+								'cursor-pointer rounded px-1 py-2 text-xs font-medium transition-colors sm:py-1',
+								sel
+									? 'bg-primary-500 text-white'
+									: cur
+										? 'text-primary-600 bg-primary-50 ring-primary-300 ring-1'
+										: 'text-default-600 hover:bg-default-100',
+								dis && 'text-default-300 cursor-not-allowed'
+							)}
+						>
+							{monthLabel}
+						</button>
+					{/each}
+				</div>
+			{/each}
+		</div>
+
+		<div class="border-default-200 flex items-center justify-between border-t px-3 py-2">
+			{#if clearable}
+				<button
+					type="button"
+					onclick={(e) => {
+						clear(e);
+						close();
+					}}
+					class="text-primary-600 cursor-pointer text-xs font-medium hover:underline"
+				>
+					Clear
+				</button>
+			{:else}
+				<span></span>
+			{/if}
+			<button
+				type="button"
+				onclick={setThisMonth}
+				class="text-primary-600 cursor-pointer text-xs font-medium hover:underline"
+			>
+				This month
+			</button>
+		</div>
+	</div>
+{/snippet}

package/dist/forms/month-picker/MonthPicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MonthPickerProps } from './month-picker-types.js';
+declare const MonthPicker: import("svelte").Component<MonthPickerProps, {}, "value">;
+type MonthPicker = ReturnType<typeof MonthPicker>;
+export default MonthPicker;

package/dist/forms/month-picker/month-picker-types.d.ts

@@ -0,0 +1,22 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
+export type MonthPickerProps = {
+    name: string;
+    id?: string;
+    label?: string;
+    /** Bindable selected month. Always the 1st of the month, or null. */
+    value?: Date | null;
+    placeholder?: string;
+    /** Earliest selectable month (inclusive, day is ignored). */
+    minDate?: Date;
+    /** Latest selectable month (inclusive, day is ignored). */
+    maxDate?: Date;
+    /** Show a × to clear the selection. @default true */
+    clearable?: boolean;
+    disabled?: boolean;
+    size?: VariantSizes;
+    errors?: string[];
+    class?: ClassValue;
+    onselect?: (value: Date | null) => void;
+    testId?: string;
+};

package/dist/forms/month-picker/month-picker-types.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/segmented-control.d.ts

@@ -12,7 +12,7 @@ export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
         vertical: string;
         auto: string;
     };
-}, undefined, "inline-flex max-w-full overflow-x-auto rounded-lg border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", {
+}, undefined, "flex max-w-full overflow-x-auto rounded-lg border sm:inline-flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", {
     appearance: {
         surface: string;
         inverted: string;
@@ -34,7 +34,7 @@ export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
         vertical: string;
         auto: string;
     };
-}, undefined, "inline-flex max-w-full overflow-x-auto rounded-lg border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", unknown, unknown, undefined>>;
+}, undefined, "flex max-w-full overflow-x-auto rounded-lg border sm:inline-flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", unknown, unknown, undefined>>;
 export declare function segmentClasses(args: {
     selected: boolean;
     disabled: boolean;

package/dist/forms/segmented-control.js

@@ -3,9 +3,11 @@ import { cn } from '../helper/cls.js';
 import { Color } from '../variants.js';
 import { formSizeTokens } from './form-size.js';
 export const segmentedTrack = tv({
-    // `max-w-full overflow-x-auto` + hidden scrollbar lets a long segment
-    // row swipe on narrow viewports instead of bleeding past the parent.
-    base: 'inline-flex max-w-full overflow-x-auto rounded-lg border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+    // Below `sm`, take full width so the control fills its container on
+    // mobile. Above `sm`, shrink to content via `inline-flex`. Either
+    // way, `overflow-x-auto` + hidden scrollbar lets a long segment row
+    // swipe horizontally without a visible bar.
+    base: 'flex max-w-full overflow-x-auto rounded-lg border sm:inline-flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
     variants: {
         appearance: {
             surface: 'border-default-200 bg-white p-0',
@@ -48,14 +50,14 @@ function segmentSize(size) {
 export function segmentClasses(args) {
     const { selected, disabled, appearance, color, size } = args;
     if (appearance === 'pills') {
-        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize(size), disabled && 'cursor-not-allowed opacity-50');
+        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150 flex-1 whitespace-nowrap sm:flex-initial sm:shrink-0', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize(size), disabled && 'cursor-not-allowed opacity-50');
         if (disabled)
             return cn(pillBase, 'text-default-400');
         if (selected)
             return cn(pillBase, selectedByColor[color]);
         return cn(pillBase, 'bg-default-100 text-default-700 hover:bg-default-200');
     }
-    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', 
+    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150 flex-1 whitespace-nowrap sm:flex-initial sm:shrink-0', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', 
     // Inverted track has p-0.5 padding around segments — give them inner radius
     // so selected segments don't render as square boxes (matches surface look).
     appearance === 'inverted' && 'rounded-md', segmentSize(size), disabled && 'cursor-not-allowed opacity-50');

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export type { TooltipProps, TooltipPlacement, TooltipSize, TooltipVariant } from
 export type { PopoverProps, PopoverPlacement, PopoverTrigger } from './elements/popover/popover-types.js';
 export type { CalendarProps, CalendarMode } from './forms/calendar/calendar-types.js';
 export type { DatePickerProps } from './forms/date-picker/date-picker-types.js';
+export type { MonthPickerProps } from './forms/month-picker/month-picker-types.js';
 export type { ComboBoxProps, ComboBoxItem } from './elements/combobox/combobox-types.js';
 export type { ContextMenuProps, ContextMenuItem } from './elements/context-menu/context-menu-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
@@ -124,6 +125,7 @@ export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Calendar } from './forms/calendar/Calendar.svelte';
 export { default as DatePicker } from './forms/date-picker/DatePicker.svelte';
+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';

package/dist/index.js

@@ -112,6 +112,7 @@ export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Calendar } from './forms/calendar/Calendar.svelte';
 export { default as DatePicker } from './forms/date-picker/DatePicker.svelte';
+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';

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

@@ -115,7 +115,7 @@
 									<div class="mb-1 flex justify-between gap-x-4">
 										<div class="flex flex-wrap items-center gap-2">
 											<button
-												class="text-default-900 text-sm font-medium"
+												class="text-default-900 cursor-pointer text-sm font-medium"
 												onclick={() => onitemclick?.(activityItem, index)}
 											>
 												{activityItem.title}

package/dist/modal/modal.js

@@ -2,11 +2,11 @@ import { tv } from 'tailwind-variants';
 import { Size } from '../index.js';
 export const modal = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex items-center justify-center p-4',
+        base: 'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4',
         backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
-        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl',
-        header: 'px-6 py-4 border-b border-default-200 flex items-center justify-between shrink-0',
-        body: 'flex-1 px-6 py-4 overflow-y-auto',
+        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
+        header: 'px-4 py-3 sm:px-6 sm:py-4 border-b border-default-200 flex items-center justify-between shrink-0',
+        body: 'flex-1 px-4 py-3 sm:px-6 sm:py-4 overflow-y-auto',
         footer: 'bg-default-50/80 rounded-b-xl shrink-0',
         title: 'text-lg font-semibold text-default-900',
         description: 'text-sm text-default-600 mt-1',

package/package.json

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