@makolabs/ripple 0.0.1-dev.9 → 0.0.3

package/dist/file-browser/FileBrowser.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { StorageAdapter, FileAction } from '../adapters/storage/index.js';
+type $$ComponentProps = {
+    adapter: StorageAdapter;
+    startPath?: string;
+    actions?: FileAction[];
+    selectedFiles?: string[];
+    infoSection?: (props: {
+        selectedFiles: string[];
+        navToFileFolder: (fileKey: string) => void;
+    }) => any;
+};
+declare const FileBrowser: import("svelte").Component<$$ComponentProps, {}, "selectedFiles">;
+type FileBrowser = ReturnType<typeof FileBrowser>;
+export default FileBrowser;

package/dist/file-browser/index.d.ts

@@ -0,0 +1 @@
+export { default as FileBrowser } from './FileBrowser.svelte';

package/dist/file-browser/index.js

@@ -0,0 +1 @@
+export { default as FileBrowser } from './FileBrowser.svelte';

package/dist/filters/CompactFilters.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { FilterTab, CompactFiltersProps } from '../index.js';
+
+	// Props definition
+	let {
+		filterGroups = [],
+		isExpanded = $bindable(false),
+		title = 'Filters',
+		class: className,
+		summaryClass,
+		expandedClass,
+		FilterIcon
+	}: CompactFiltersProps = $props();
+
+	// Toggle expanded state
+	function toggleExpanded() {
+		isExpanded = !isExpanded;
+	}
+
+	// Helper to get the label of the selected filter
+	function getSelectedLabel(tabs: FilterTab[], selectedValue: string): string {
+		const tab = tabs.find((tab) => tab.value === selectedValue);
+		return tab ? tab.label : 'All';
+	}
+</script>
+
+{#snippet DefaultFilterIcon()}
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46"></polygon>
+	</svg>
+{/snippet}
+
+{#snippet DefaultChevronDown()}
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<polyline points="6,9 12,15 18,9"></polyline>
+	</svg>
+{/snippet}
+
+{#snippet DefaultChevronUp()}
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<polyline points="18,15 12,9 6,15"></polyline>
+	</svg>
+{/snippet}
+
+<div class={cn('rounded-lg border border-gray-200 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" />
+			{:else}
+				<span class="text-gray-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"
+			aria-label={isExpanded ? `Collapse ${title.toLowerCase()}` : `Expand ${title.toLowerCase()}`}
+		>
+			{#if isExpanded}
+				<span>{@render DefaultChevronUp()}</span>
+			{:else}
+				<span>{@render DefaultChevronDown()}</span>
+			{/if}
+		</div>
+	</button>
+
+	{#if !isExpanded}
+		<!-- Summary of selected filters when collapsed -->
+		<div class={cn('flex flex-wrap gap-2', summaryClass)}>
+			{#each filterGroups as group}
+				{#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"
+					>
+						<span class="font-medium">{group.label}:</span>
+						{getSelectedLabel(group.tabs, group.selectedValue)}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{:else}
+		<div class={cn('flex flex-col gap-2', expandedClass)}>
+			{#each filterGroups as group, index}
+				{#if group.tabs.length > 0}
+					<div
+						class={cn(
+							'flex items-center gap-2 pb-2',
+							index > 0 ? 'border-t border-gray-100 pt-2' : ''
+						)}
+					>
+						<div class={cn('text-xs font-medium text-gray-500', group.minWidth || 'min-w-[70px]')}>
+							{group.label}
+						</div>
+						<div class="flex flex-wrap gap-2">
+							{#each group.tabs as tab}
+								<button
+									onclick={() => group.onChange(tab.value)}
+									class={cn(
+										'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'
+									)}
+								>
+									{tab.label}
+								</button>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/filters/CompactFilters.svelte.d.ts

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

package/dist/filters/index.d.ts

@@ -0,0 +1 @@
+export { default as CompactFilters } from './CompactFilters.svelte';

package/dist/filters/index.js

@@ -0,0 +1 @@
+export { default as CompactFilters } from './CompactFilters.svelte';

package/dist/forms/Checkbox.svelte

@@ -13,7 +13,7 @@
 	}: CheckboxProps = $props();
 
 	const checkboxClass = $derived(
-		cn('w-4 h-4 rounded text-primary-600 border-gray-300 focus:ring-primary-500', {
+		cn('w-4 h-4 rounded text-primary-600 border-default-300 focus:ring-primary-500', {
 			'opacity-50 cursor-not-allowed': disabled,
 			'accent-danger-500': errors.length
 		})
@@ -21,7 +21,7 @@
 
 	const labelClass = $derived(
 		cn('text-sm font-medium', {
-			'text-gray-700': !errors.length,
+			'text-default-700': !errors.length,
 			'text-danger-600': errors.length
 		})
 	);

package/dist/forms/DateRange.svelte

@@ -245,24 +245,24 @@
 			{id}
 			type="button"
 			class={cn(
-				'flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm',
+				'flex w-full items-center justify-between rounded-md border border-default-300 bg-white px-3 py-2 text-sm shadow-sm',
 				disabled
-					? 'cursor-not-allowed bg-gray-100 text-gray-400'
-					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-gray-400 focus:ring-2'
+					? 'cursor-not-allowed bg-default-100 text-default-400'
+					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-default-400 focus:ring-2'
 			)}
 			onclick={toggleDatepicker}
 			aria-haspopup="true"
 			aria-expanded={isOpen}
 			{disabled}
 		>
-			<span class={startDate && endDate ? 'text-gray-900' : 'text-gray-500'}>
+			<span class={startDate && endDate ? 'text-default-900' : 'text-default-500'}>
 				{startDate && endDate
 					? `${formatDate(startDate)} - ${formatDate(endDate)}`
 					: startDate
 						? `${formatDate(startDate)} - Select end date`
 						: placeholder}
 			</span>
-			<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+			<svg class="h-5 w-5 text-default-400" viewBox="0 0 20 20" fill="currentColor">
 				<path
 					fill-rule="evenodd"
 					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
@@ -274,7 +274,7 @@
 		{#if startDate || endDate}
 			<button
 				type="button"
-				class="absolute top-1/2 right-10 -translate-y-1/2 text-gray-400 hover:text-gray-500"
+				class="absolute top-1/2 right-10 -translate-y-1/2 text-default-400 hover:text-default-500"
 				onclick={clearDates}
 				aria-label="Clear dates"
 			>
@@ -298,7 +298,7 @@
 					<button
 						type="button"
 						aria-label="Previous month"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={prevMonth}
 					>
 						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -311,7 +311,7 @@
 					</button>
 					<button
 						type="button"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700 hover:bg-default-100"
 						onclick={showMonths}
 					>
 						{getMonthName(viewDate.getMonth())}
@@ -320,7 +320,7 @@
 					<button
 						type="button"
 						aria-label="Next month"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={nextMonth}
 					>
 						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -335,7 +335,7 @@
 					<button
 						type="button"
 						aria-label="Previous year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1))}
 					>
@@ -350,7 +350,7 @@
 					<button
 						type="button"
 						aria-label="Current year"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700"
+						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700"
 						onclick={showYears}
 					>
 						{viewDate.getFullYear()}
@@ -358,7 +358,7 @@
 					<button
 						type="button"
 						aria-label="Next year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1))}
 					>
@@ -374,7 +374,7 @@
 					<button
 						type="button"
 						aria-label="Previous year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() - 12, viewDate.getMonth(), 1))}
 					>
@@ -389,14 +389,14 @@
 					<button
 						type="button"
 						aria-label="Current year range"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700"
+						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700"
 					>
 						{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}
 					</button>
 					<button
 						type="button"
 						aria-label="Next year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() + 12, viewDate.getMonth(), 1))}
 					>
@@ -412,7 +412,7 @@
 			</div>
 
 			{#if viewMode === 'days'}
-				<div class="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-500">
+				<div class="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-default-500">
 					<div>Su</div>
 					<div>Mo</div>
 					<div>Tu</div>
@@ -427,10 +427,10 @@
 							type="button"
 							class={cn(
 								'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
-								isDisabled ? 'cursor-not-allowed text-gray-300' : 'hover:bg-gray-100',
+								isDisabled ? 'cursor-not-allowed text-default-300' : 'hover:bg-default-100',
 								isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
 								isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
-								!isCurrentMonth && !isSelected && !isInRange ? 'text-gray-400' : '',
+								!isCurrentMonth && !isSelected && !isInRange ? 'text-default-400' : '',
 								isToday && !isSelected ? 'border-primary-500 border' : ''
 							)}
 							onclick={() => handleDateClick(date)}
@@ -450,7 +450,7 @@
 								'flex items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
 								viewDate.getMonth() === month
 									? 'bg-primary-500 text-white'
-									: 'text-gray-700 hover:bg-gray-100'
+									: 'text-default-700 hover:bg-default-100'
 							)}
 							onclick={() => selectMonth(month)}
 						>
@@ -468,7 +468,7 @@
 								'flex items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
 								viewDate.getFullYear() === year
 									? 'bg-primary-500 text-white'
-									: 'text-gray-700 hover:bg-gray-100'
+									: 'text-default-700 hover:bg-default-100'
 							)}
 							onclick={() => selectYear(year)}
 						>
@@ -479,7 +479,7 @@
 			{/if}
 
 			{#if startDate || endDate}
-				<div class="mt-4 flex justify-between border-t border-gray-200 pt-3 text-xs text-gray-500">
+				<div class="mt-4 flex justify-between border-t border-default-200 pt-3 text-xs text-default-500">
 					<div>
 						{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}
 					</div>

package/dist/forms/Input.svelte

@@ -22,7 +22,7 @@
 		cn(
 			'transition-colors',
 			{
-				'border rounded-lg shadow-sm w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2':
+				'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,
@@ -34,7 +34,7 @@
 							'h-12 text-lg': size === Size.LG
 						}
 					: {}),
-				'border-gray-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
+				'border-default-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
 			},
 			className
 		)
@@ -76,7 +76,7 @@
 			class={cn(
 				'block w-full text-sm font-medium',
 				{
-					'text-gray-700': !errors.length,
+					'text-default-700': !errors.length,
 					'text-red-600': errors.length
 				},
 				extraClass

package/dist/forms/NumberInput.svelte

@@ -79,7 +79,7 @@
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
 	{/if}
 	<div class={containerClass} bind:this={containerRef}>
 		<svg

package/dist/forms/RadioInputs.svelte

@@ -16,7 +16,7 @@
 	const containerClass = $derived(cn('space-y-2', className));
 
 	const radioClass = $derived(
-		cn('w-4 h-4 text-primary-600 border-gray-300 focus:ring-primary-500', {
+		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
 		})
@@ -24,7 +24,7 @@
 
 	const labelClass = $derived(
 		cn('block text-sm font-medium', {
-			'text-gray-700': !errors.length,
+			'text-default-700': !errors.length,
 			'text-red-600': errors.length
 		})
 	);
@@ -48,7 +48,7 @@
 					{required}
 					aria-describedby={errors.length ? `${name}-errors` : undefined}
 				/>
-				<label for={`${name}-${option.value}`} class="text-sm text-gray-700">
+				<label for={`${name}-${option.value}`} class="text-sm text-default-700">
 					{option.label}
 				</label>
 			</div>

package/dist/forms/Tags.svelte

@@ -106,7 +106,7 @@
 	const containerClass = $derived(
 		cn(
 			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-sm px-3 py-2',
-			'border-gray-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-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
 			},
@@ -116,21 +116,21 @@
 
 	const suggestionClass = $derived(
 		cn(
-			'absolute top-[calc(100%+8px)] right-0 left-0 z-50 max-h-[200px] overflow-auto rounded-lg border border-gray-300 bg-white shadow-lg'
+			'absolute top-[calc(100%+8px)] right-0 left-0 z-50 max-h-[200px] overflow-auto rounded-lg border border-default-300 bg-white shadow-lg'
 		)
 	);
 
 	const suggestionItemClass = $derived((isHighlighted: boolean) =>
 		cn(
 			'flex w-full cursor-pointer items-center px-3 py-2 text-sm transition-colors',
-			isHighlighted && 'bg-gray-50'
+			isHighlighted && 'bg-default-50'
 		)
 	);
 </script>
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
 	{/if}
 	<div class={containerClass} onfocusout={handleFocusOut}>
 		{#each value as tag}
@@ -144,7 +144,7 @@
 			{name}
 			id={name}
 			{placeholder}
-			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-gray-400', {
+			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-default-400', {
 				'text-sm': size === Size.SM,
 				'text-base': size === Size.BASE,
 				'text-lg': size === Size.LG

package/dist/forms/Toggle.svelte

@@ -13,7 +13,7 @@
 		color = Color.PRIMARY,
 		value = $bindable(false),
 		errors = [],
-		offColor = 'bg-gray-200',
+		offColor = 'bg-default-200',
 		onColor,
 		...restProps
 	}: ToggleProps = $props();
@@ -27,7 +27,7 @@
 				[Color.DANGER]: 'bg-red-500',
 				[Color.WARNING]: 'bg-yellow-500',
 				[Color.INFO]: 'bg-blue-500',
-				[Color.DEFAULT]: 'bg-gray-800'
+				[Color.DEFAULT]: 'bg-default-800'
 			}[color]
 	);
 
@@ -80,7 +80,7 @@
 
 	const labelClasses = $derived(
 		cn('text-sm font-medium', {
-			'text-gray-700': !errors.length,
+			'text-default-700': !errors.length,
 			'text-red-600': errors.length,
 			'opacity-50': disabled
 		})

package/dist/forms/slider.js

@@ -3,16 +3,16 @@ import { Color, Size } from '../variants.js';
 export const slider = tv({
     slots: {
         base: 'relative w-full',
-        track: 'absolute h-2 w-full rounded-full bg-gray-200 cursor-pointer',
+        track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
         range: 'absolute h-full rounded-full bg-primary-500',
         thumb: [
             'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
             'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
             'hover:scale-110 transition-transform cursor-pointer'
         ],
-        mark: 'absolute text-sm text-gray-500 -translate-x-1/2',
-        label: 'mb-2 block text-sm font-medium text-gray-700',
-        value: 'mt-1 text-sm text-gray-500'
+        mark: 'absolute text-sm text-default-500 -translate-x-1/2',
+        label: 'mb-2 block text-sm font-medium text-default-700',
+        value: 'mt-1 text-sm text-default-500'
     },
     variants: {
         size: {

package/dist/header/PageHeader.svelte

@@ -5,26 +5,64 @@
 
 	let {
 		title,
+		subtitle,
 		breadcrumbs = [],
 		children,
 		class: className = '',
-		titleclass: titleClassName = ''
+		titleclass: titleClassName = '',
+		layout = 'vertical'
 	}: PageHeaderProps = $props();
 
 	const defaultTitleClasses =
-		'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl mt-1';
-	const headerClasses = $derived(cn('space-y-3', className));
+		'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl';
+
 	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
 	const titleClasses = $derived(cn(defaultTitleClasses, titleClassName));
 </script>
 
-<div class={headerClasses}>
-	<div class="flex-1 min-w-0">
-		{#if hasBreadcrumbs}
-			<Breadcrumbs items={breadcrumbs} />
-		{/if}
-		<h2 class={titleClasses}>{title}</h2>
-	</div>
+<div class="pb-4">
+	{#if layout === 'horizontal'}
+		<div
+			class="flex flex-col space-y-3 md:flex-row md:items-start md:justify-between md:space-y-0 {className}"
+		>
+			<!-- Title and subtitle grouped together as one unit -->
+			<div class="min-w-0 flex-1 gap-4">
+				{#if hasBreadcrumbs}
+					<Breadcrumbs items={breadcrumbs} />
+				{/if}
+				<h2 class={titleClasses}>{title}</h2>
+				{#if subtitle}
+					<p class="text-default-500 mt-2 text-sm">{subtitle}</p>
+				{/if}
+			</div>
+
+			<!-- Actions area - responsive positioning -->
+			{#if children}
+				<div class="flex-shrink-0 md:ml-6">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<!-- Vertical layout - title/subtitle unit first, children unit below -->
+		<div class={className}>
+			<!-- Title and subtitle grouped together -->
+			<div class="min-w-0 gap-4">
+				{#if hasBreadcrumbs}
+					<Breadcrumbs items={breadcrumbs} />
+				{/if}
+				<h2 class={titleClasses}>{title}</h2>
+				{#if subtitle}
+					<p class="text-default-500 mt-2 text-sm">{subtitle}</p>
+				{/if}
+			</div>
 
-	{@render children?.()}
+			<!-- Children as separate unit below -->
+			{#if children}
+				<div class="mt-4">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>