@makolabs/ripple 0.0.1 → 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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { CheckboxProps } from '../index.js';
+
+	let {
+		name,
+		label,
+		value = $bindable(false),
+		disabled = false,
+		class: className = '',
+		errors = [],
+		required = false
+	}: CheckboxProps = $props();
+
+	const checkboxClass = $derived(
+		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
+		})
+	);
+
+	const labelClass = $derived(
+		cn('text-sm font-medium', {
+			'text-default-700': !errors.length,
+			'text-danger-600': errors.length
+		})
+	);
+</script>
+
+<div class="w-full">
+	<div class="inline-flex w-full items-center gap-2">
+		<input
+			type="checkbox"
+			{name}
+			id={name}
+			bind:checked={value}
+			class={checkboxClass}
+			{disabled}
+			{required}
+			aria-describedby={errors.length ? `${name}-errors` : undefined}
+		/>
+		{#if label}
+			<label for={name} class={labelClass}>{label}</label>
+		{/if}
+	</div>
+
+	{#if errors.length}
+		{#each errors as error (error)}
+			<p id={`${name}-errors`} class="text-danger-600 mt-1 text-sm" role="alert">
+				{error}
+			</p>
+		{/each}
+	{/if}
+</div>

package/dist/forms/Checkbox.svelte.d.ts

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