@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.4

package/dist/button/button.js

@@ -0,0 +1,167 @@
+import { tv } from '../helper/cls.js';
+export const buttonVariants = tv({
+    base: `
+		inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none
+		focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer
+		`,
+    variants: {
+        variant: {
+            solid: '',
+            outline: 'border bg-transparent',
+            ghost: 'bg-transparent hover:bg-opacity-10',
+            link: 'bg-transparent underline-offset-4 hover:underline shadow-none'
+        },
+        color: {
+            default: 'bg-default-900 text-white hover:bg-default-800 focus-visible:ring-default-500',
+            primary: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
+            secondary: 'bg-secondary-600 text-white hover:bg-secondary-700 focus-visible:ring-secondary-500',
+            info: 'bg-info-600 text-white hover:bg-info-700 focus-visible:ring-info-500',
+            success: 'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500',
+            warning: 'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500',
+            danger: 'bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500'
+        },
+        size: {
+            xs: 'h-7 px-2 text-xs',
+            sm: 'h-8 px-3 text-sm',
+            base: 'h-9 px-4 text-sm',
+            lg: 'h-10 px-5 text-base',
+            xl: 'h-12 px-6 text-lg',
+            '2xl': 'h-14 px-8 text-xl'
+        },
+        rounded: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            base: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            '2xl': 'rounded-2xl',
+            full: 'rounded-full'
+        },
+        isLoading: {
+            true: 'animate-pulse'
+        }
+    },
+    compoundVariants: [
+        // Remove background for non-solid variants
+        {
+            variant: ['outline', 'ghost', 'link'],
+            class: 'bg-transparent hover:bg-transparent'
+        },
+        // Outline variants
+        {
+            variant: 'outline',
+            color: 'default',
+            class: 'border-default-200 text-default-700 hover:bg-default-50 hover:border-default-300 focus-visible:ring-default-300'
+        },
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: 'border-primary-200 text-primary-700 hover:bg-primary-50 hover:border-primary-300 focus-visible:ring-primary-300'
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: 'border-secondary-200 text-secondary-700 hover:bg-secondary-50 hover:border-secondary-300 focus-visible:ring-secondary-300'
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: 'border-info-200 text-info-700 hover:bg-info-50 hover:border-info-300 focus-visible:ring-info-300'
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: 'border-success-200 text-success-700 hover:bg-success-50 hover:border-success-300 focus-visible:ring-success-300'
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: 'border-warning-200 text-warning-700 hover:bg-warning-50 hover:border-warning-300 focus-visible:ring-warning-300'
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            class: 'border-danger-200 text-danger-700 hover:bg-danger-50 hover:border-danger-300 focus-visible:ring-danger-300'
+        },
+        // Ghost variants
+        {
+            variant: 'ghost',
+            color: 'default',
+            class: 'text-default-700 hover:bg-default-100 focus-visible:ring-default-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'primary',
+            class: 'text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'secondary',
+            class: 'text-secondary-700 hover:bg-secondary-100 focus-visible:ring-secondary-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'info',
+            class: 'text-info-700 hover:bg-info-100 focus-visible:ring-info-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'success',
+            class: 'text-success-700 hover:bg-success-100 focus-visible:ring-success-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'warning',
+            class: 'text-warning-700 hover:bg-warning-100 focus-visible:ring-warning-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'danger',
+            class: 'text-danger-700 hover:bg-danger-100 focus-visible:ring-danger-300'
+        },
+        // Link variants
+        {
+            variant: 'link',
+            color: 'default',
+            class: 'text-default-700 hover:text-default-800 focus-visible:ring-default-300'
+        },
+        {
+            variant: 'link',
+            color: 'primary',
+            class: 'text-primary-700 hover:text-primary-800 focus-visible:ring-primary-300'
+        },
+        {
+            variant: 'link',
+            color: 'secondary',
+            class: 'text-secondary-700 hover:text-secondary-800 focus-visible:ring-secondary-300'
+        },
+        {
+            variant: 'link',
+            color: 'info',
+            class: 'text-info-700 hover:text-info-800 focus-visible:ring-info-300'
+        },
+        {
+            variant: 'link',
+            color: 'success',
+            class: 'text-success-700 hover:text-success-800 focus-visible:ring-success-300'
+        },
+        {
+            variant: 'link',
+            color: 'warning',
+            class: 'text-warning-700 hover:text-warning-800 focus-visible:ring-warning-300'
+        },
+        {
+            variant: 'link',
+            color: 'danger',
+            class: 'text-danger-700 hover:text-danger-800 focus-visible:ring-danger-300'
+        }
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        color: 'default',
+        size: 'base',
+        rounded: 'base',
+        isLoading: false
+    }
+});

package/dist/button/index.d.ts

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

package/dist/button/index.js

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

package/dist/drawer/Drawer.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { onMount, onDestroy, tick } from 'svelte';
+	import { browser } from '$app/environment';
+	import { fade, fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { cn } from '../helper/cls.js';
+	import { drawer, type DrawerProps } from './drawer.js';
+
+	let {
+		open = $bindable(false),
+		onclose: onClose = () => {},
+		title,
+		position = 'right',
+		size = 'sm',
+		children,
+		header,
+		class: className = '',
+		backdropclass: backdropClassName = '',
+		contentclass: contentClassName = '',
+		headerclass: headerClassName = '',
+		bodyclass: bodyClassName = '',
+		titleclass: titleClassName = ''
+	}: DrawerProps = $props();
+
+	let drawerElement: HTMLDivElement | undefined = $state();
+
+	const {
+		base,
+		backdrop,
+		contentWrapper,
+		content,
+		header: headerVClass,
+		body,
+		footer: footerVClass,
+		title: titleClass,
+		closeButton
+	} = $derived(
+		drawer({
+			open,
+			position,
+			size
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const backdropClass = $derived(cn(backdrop(), backdropClassName));
+	const contentWrapperClass = $derived(cn(contentWrapper(), contentClassName));
+	const contentClass = $derived(cn(content(), ''));
+	const headerClass = $derived(cn(headerVClass(), headerClassName));
+	const bodyClass = $derived(cn(body(), bodyClassName));
+	const titleClasses = $derived(cn(titleClass(), titleClassName));
+	const closeButtonClasses = $derived(cn(closeButton(), ''));
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+
+	function handleEscapeKey(e: KeyboardEvent) {
+		if (e.key === 'Escape' && open) {
+			onClose();
+		}
+	}
+
+	function handleCloseClick() {
+		onClose();
+	}
+
+	let previouslyFocusedElement: HTMLElement | null = null;
+
+	function trapFocus(element: HTMLElement) {
+		const focusableElements = element.querySelectorAll(
+			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+		);
+
+		if (focusableElements.length === 0) return;
+
+		const firstElement = focusableElements[0] as HTMLElement;
+		const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+		function handleTabKey(e: KeyboardEvent) {
+			if (e.key !== 'Tab') return;
+
+			if (e.shiftKey) {
+				if (document.activeElement === firstElement) {
+					lastElement.focus();
+					e.preventDefault();
+				}
+			} else {
+				if (document.activeElement === lastElement) {
+					firstElement.focus();
+					e.preventDefault();
+				}
+			}
+		}
+
+		element.addEventListener('keydown', handleTabKey);
+		firstElement.focus();
+
+		return () => {
+			element.removeEventListener('keydown', handleTabKey);
+		};
+	}
+
+	onMount(() => {
+		document.addEventListener('keydown', handleEscapeKey);
+		return () => {
+			document.removeEventListener('keydown', handleEscapeKey);
+		};
+	});
+
+	$effect(() => {
+		if (!browser) return;
+		if (open) {
+			previouslyFocusedElement = document.activeElement as HTMLElement;
+			document.body.style.overflow = 'hidden';
+
+			tick().then(() => {
+				if (drawerElement) {
+					trapFocus(drawerElement);
+				}
+			});
+		} else {
+			document.body.style.overflow = '';
+			if (previouslyFocusedElement) {
+				previouslyFocusedElement.focus();
+			}
+		}
+	});
+
+	onDestroy(() => {
+		if (browser && document.body.style.overflow === 'hidden') {
+			document.body.style.overflow = '';
+		}
+	});
+
+	function getTransition() {
+		const duration = 300;
+		const options = { duration, easing: quintOut };
+
+		switch (position) {
+			case 'left':
+				return { x: -300, ...options };
+			case 'right':
+				return { x: 300, ...options };
+			default:
+				return { x: 300, ...options };
+		}
+	}
+</script>
+
+{#if browser}
+	<div
+		class={baseClass}
+		bind:this={drawerElement}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={title ? 'drawer-title' : undefined}
+	>
+		{#key open}
+			<!-- Backdrop -->
+			<button
+				class={backdropClass}
+				onclick={handleBackdropClick}
+				transition:fade={{ duration: 200 }}
+				aria-label="Close drawer"
+			></button>
+
+			<!-- Drawer content -->
+			<div class={contentWrapperClass} transition:fly={getTransition()}>
+				<div class={contentClass}>
+					<!-- Header -->
+					{#if header || title}
+						<div class={headerClass}>
+							{#if header}
+								{@render header()}
+							{:else}
+								{#if title}
+									<h3 id="drawer-title" class={titleClasses}>{title}</h3>
+								{/if}
+								<button
+									type="button"
+									class={closeButtonClasses}
+									onclick={handleCloseClick}
+									aria-label="Close drawer"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="12"
+										height="12"
+										viewBox="0 0 12 12"
+									>
+										<path
+											fill="currentColor"
+											d="m1.897 2.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L6 4.939l2.97-2.97a.75.75 0 1 1 1.06 1.061L7.061 6l2.97 2.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L6 7.061l-2.97 2.97A.75.75 0 1 1 1.97 8.97L4.939 6l-2.97-2.97a.75.75 0 0 1-.072-.976l.073-.084z"
+										/>
+									</svg>
+								</button>
+							{/if}
+						</div>
+					{/if}
+
+					<div class={bodyClass}>
+						{#if children}
+							{@render children()}
+						{/if}
+					</div>
+				</div>
+			</div>
+		{/key}
+	</div>
+{/if}

package/dist/drawer/Drawer.svelte.d.ts

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

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,177 @@
+import type { VariantSizes } from '../types/variants.js';
+import type { Snippet } from 'svelte';
+export declare const drawer: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+        false: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+    };
+    position: {
+        left: {
+            contentWrapper: string;
+            content: string;
+        };
+        right: {
+            contentWrapper: string;
+            content: string;
+        };
+    };
+    size: {
+        xs: {
+            contentWrapper: string;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    closeButton: string;
+}, undefined, {
+    open: {
+        true: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+        false: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+    };
+    position: {
+        left: {
+            contentWrapper: string;
+            content: string;
+        };
+        right: {
+            contentWrapper: string;
+            content: string;
+        };
+    };
+    size: {
+        xs: {
+            contentWrapper: string;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    closeButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+        false: {
+            base: string;
+            backdrop: string;
+            contentWrapper: string;
+        };
+    };
+    position: {
+        left: {
+            contentWrapper: string;
+            content: string;
+        };
+        right: {
+            contentWrapper: string;
+            content: string;
+        };
+    };
+    size: {
+        xs: {
+            contentWrapper: string;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    title: string;
+    closeButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DrawerProps = {
+    open?: boolean;
+    onclose?: () => void;
+    title?: string;
+    position?: keyof typeof drawer.variants.position;
+    size?: VariantSizes;
+    class?: string;
+    backdropclass?: string;
+    contentclass?: string;
+    headerclass?: string;
+    bodyclass?: string;
+    titleclass?: string;
+    children?: Snippet;
+    header?: Snippet;
+};

package/dist/drawer/drawer.js

@@ -0,0 +1,80 @@
+import { tv } from 'tailwind-variants';
+export const drawer = tv({
+    slots: {
+        base: 'fixed inset-0 z-50 flex overflow-hidden',
+        backdrop: 'fixed inset-0 transition-opacity bg-black/50',
+        contentWrapper: 'absolute flex flex-col transform transition-transform',
+        content: 'flex flex-col h-full w-full overflow-y-auto bg-white',
+        header: 'flex items-center justify-between px-4 py-3 border-b border-gray-200',
+        body: 'flex-1 overflow-y-auto p-4',
+        footer: 'flex justify-end border-t border-gray-200 p-4',
+        title: 'text-default-900 leading-6 text-base font-semibold',
+        closeButton: 'text-gray-400 hover:text-gray-500 rounded-md cursor-pointer'
+    },
+    variants: {
+        open: {
+            true: {
+                base: 'visible',
+                backdrop: 'visible opacity-100',
+                contentWrapper: 'visible translate-x-0 translate-y-0'
+            },
+            false: {
+                base: 'invisible',
+                backdrop: 'invisible opacity-0',
+                contentWrapper: 'invisible'
+            }
+        },
+        position: {
+            left: {
+                contentWrapper: 'left-0 h-full',
+                content: 'rounded-r-lg'
+            },
+            right: {
+                contentWrapper: 'right-0 h-full',
+                content: 'rounded-l-lg'
+            }
+        },
+        size: {
+            xs: {
+                contentWrapper: 'w-64'
+            },
+            sm: {
+                contentWrapper: 'w-80'
+            },
+            base: {
+                contentWrapper: 'w-96'
+            },
+            lg: {
+                contentWrapper: 'w-[32rem]'
+            },
+            xl: {
+                contentWrapper: 'w-[40rem]'
+            },
+            '2xl': {
+                contentWrapper: 'w-[48rem]'
+            }
+        }
+    },
+    compoundVariants: [
+        // Position-specific transforms when closed
+        {
+            position: 'left',
+            open: false,
+            class: {
+                contentWrapper: '-translate-x-full'
+            }
+        },
+        {
+            position: 'right',
+            open: false,
+            class: {
+                contentWrapper: 'translate-x-full'
+            }
+        }
+    ],
+    defaultVariants: {
+        open: false,
+        position: 'right',
+        size: 'sm'
+    }
+});

package/dist/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerProps } from './drawer.js';

package/dist/drawer/index.js

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

package/dist/elements/badge/Badge.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { badge, type BadgeProps } from './badge.js';
+
+	let {
+		size = 'base',
+		color = 'default',
+		class: className = '',
+		children,
+		onclose: onClose
+	}: BadgeProps = $props();
+
+	const { base } = $derived(
+		badge({
+			size,
+			color
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+</script>
+
+<div class={baseClass}>
+	{@render children()}
+	{#if onClose}
+		<button type="button" onclick={onClose} class="cursor-pointer" aria-label="Close">
+			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+				<path
+					fill="currentColor"
+					d="M26.113 4.116a1.25 1.25 0 0 1 1.768 1.768L17.766 15.999l10.115 10.114a1.25 1.25 0 1 1-1.768 1.768L16 17.766L5.884 27.881a1.25 1.25 0 1 1-1.768-1.768L14.231 16L4.116 5.884a1.25 1.25 0 1 1 1.768-1.768l10.115 10.115z"
+				/>
+			</svg>
+		</button>
+	{/if}
+</div>

package/dist/elements/badge/Badge.svelte.d.ts

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