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

package/dist/elements/accordion/Accordion.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge';
+	import { accordion } from './accordion.js';
+	import type { AccordionProps } from '../../index.js';
+
+	let {
+		title,
+		description,
+		id,
+		bordered,
+		color,
+		open,
+		onexpand,
+		oncollapse,
+		class: className,
+		summary,
+		children,
+		icon: Icon
+	}: AccordionProps = $props();
+
+	const {
+		base,
+		header,
+		title: titleClass,
+		description: descriptionClass,
+		body
+	} = accordion({ color, open, bordered });
+
+	function handleClick() {
+		open = !open;
+		if (open && onexpand) {
+			onexpand();
+		} else if (!open && oncollapse) {
+			oncollapse();
+		}
+	}
+
+	const baseClasses = $derived(twMerge(base(), className));
+</script>
+
+<div class={baseClasses}>
+	<button
+		class={twMerge(header(), 'flex gap-3')}
+		aria-expanded={open}
+		aria-controls={id}
+		onclick={handleClick}
+	>
+		<div class="flex items-start justify-start gap-3">
+			{#if Icon}
+				<Icon class="text-default-500 size-5" />
+			{/if}
+			<div class="flex flex-col">
+				{#if title}
+					<h3 class={titleClass()}>{title}</h3>
+				{/if}
+				{#if description}
+					<p class={descriptionClass()}>{description}</p>
+				{/if}
+			</div>
+		</div>
+		<div class="flex items-center">
+			{@render summary?.()}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				class="text-default-500 size-5 transition-transform duration-200"
+				class:rotate-180={open}
+			>
+				<path
+					fill="currentColor"
+					d="M15.794 7.733a.75.75 0 0 1-.026 1.06l-5.25 5.001a.75.75 0 0 1-1.035 0l-5.25-5a.75.75 0 0 1 1.034-1.087l4.734 4.509l4.733-4.51a.75.75 0 0 1 1.06.027"
+				/>
+			</svg>
+		</div>
+	</button>
+	{#if open}
+		<div class={body()} {id}>
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/elements/accordion/Accordion.svelte.d.ts

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

package/dist/elements/accordion/accordion.d.ts

@@ -0,0 +1,200 @@
+import { Color } from '../../variants.js';
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            header: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+    open: {
+        true: {
+            base: string;
+            title: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    bordered: {
+        true: {
+            base: string;
+            body: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+}, undefined, {
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            header: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+    open: {
+        true: {
+            base: string;
+            title: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    bordered: {
+        true: {
+            base: string;
+            body: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            header: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+    open: {
+        true: {
+            base: string;
+            title: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    bordered: {
+        true: {
+            base: string;
+            body: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/accordion/accordion.js

@@ -0,0 +1,86 @@
+import { tv } from '../../helper/cls.js';
+import { Color } from '../../variants.js';
+export const accordion = tv({
+    slots: {
+        base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200 hover:shadow-md bg-white border border-default-200',
+        header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200 hover:bg-default-50',
+        title: 'flex text-default-900 text-sm font-medium leading-tight',
+        description: 'text-default-500 text-xs',
+        body: 'w-full border-t border-default-200 p-4 pt-3 transition-all',
+    },
+    variants: {
+        color: {
+            [Color.DEFAULT]: {
+                base: 'bg-white hover:border-default-300',
+                header: 'hover:bg-default-50',
+                body: ''
+            },
+            [Color.PRIMARY]: {
+                base: 'bg-primary-50/50 hover:border-primary-300',
+                header: 'text-primary-700 hover:bg-primary-50',
+                title: 'text-primary-700'
+            },
+            [Color.SECONDARY]: {
+                base: 'bg-secondary-50/50 hover:border-secondary-300',
+                header: 'text-secondary-700 hover:bg-secondary-50',
+                title: 'text-secondary-700'
+            },
+            [Color.SUCCESS]: {
+                base: 'bg-success-50/50 hover:border-success-300',
+                header: 'text-success-700 hover:bg-success-50',
+                title: 'text-success-700'
+            },
+            [Color.WARNING]: {
+                base: 'bg-warning-50/50 hover:border-warning-300',
+                header: 'text-warning-700 hover:bg-warning-50',
+                title: 'text-warning-700'
+            },
+            [Color.DANGER]: {
+                base: 'bg-danger-50/50 hover:border-danger-300',
+                header: 'text-danger-700 hover:bg-danger-50',
+                title: 'text-danger-700'
+            },
+            [Color.INFO]: {
+                base: 'bg-info-50/50 hover:border-info-300',
+                header: 'text-info-700 hover:bg-info-50',
+                title: 'text-info-700'
+            }
+        },
+        open: {
+            true: {
+                base: 'shadow-sm',
+                title: 'text-default-900'
+            },
+            false: {
+                base: ''
+            }
+        },
+        bordered: {
+            true: {
+                base: 'border border-default-200',
+                body: 'border-t'
+            },
+            false: {
+                base: 'shadow-sm'
+            }
+        },
+        iconPosition: {
+            start: {},
+            end: {}
+        }
+    },
+    compoundVariants: [
+        {
+            open: true,
+            class: {
+                header: 'border-b-0'
+            }
+        }
+    ],
+    defaultVariants: {
+        color: Color.DEFAULT,
+        open: false,
+        bordered: true,
+        iconPosition: 'start'
+    }
+});

package/dist/elements/alert/Alert.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { Color } from '../../variants.js';
+	import type { AlertProps } from '../../index.js';
+
+	let {
+		title,
+		message,
+		color = Color.DEFAULT,
+		onclose,
+		footer,
+		class: className = ''
+	}: AlertProps = $props();
+
+	function handleClose() {
+		onclose?.();
+	}
+
+	const colorClasses = {
+		[Color.DEFAULT]: 'bg-default-50 border-default-200 text-default-800',
+		[Color.PRIMARY]: 'bg-primary-50 border-primary-200 text-primary-800',
+		[Color.SUCCESS]: 'bg-success-50 border-success-200 text-success-800',
+		[Color.WARNING]: 'bg-warning-50 border-warning-200 text-warning-800',
+		[Color.DANGER]: 'bg-danger-50 border-danger-200 text-danger-800',
+		[Color.INFO]: 'bg-info-50 border-info-200 text-info-800'
+	};
+</script>
+
+<div class={cn('relative rounded-lg border p-4', colorClasses[color], className)}>
+	<div class="flex items-start justify-between gap-4">
+		<div class="flex-1">
+			{#if title}
+				<h4 class="font-semibold">{title}</h4>
+			{/if}
+			<p class="text-sm">{message}</p>
+		</div>
+		{#if onclose}
+			<button
+				type="button"
+				class="hover:bg-default-200/20 flex-shrink-0 cursor-pointer rounded-md p-1"
+				onclick={handleClose}
+				aria-label="Close alert"
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+					<path
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</div>
+	{#if footer}
+		{@render footer()}
+	{/if}
+</div>

package/dist/elements/alert/Alert.svelte.d.ts

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

package/dist/elements/badge/Badge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { badge, type BadgeProps } from './badge.js';
+	import { badge } from './badge.js';
+	import type { BadgeProps } from '../../index.js';
 
 	let {
 		size = 'base',
@@ -18,13 +19,20 @@
 	);
 
 	const baseClass = $derived(cn(base(), className));
+
+	function handleOnClose(event) {
+		event.preventDefault();
+		onClose();
+	}
 </script>
 
-<div class={baseClass}>
+<span 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">
+		<button
+			onclick={handleOnClose} class="cursor-pointer h-full flex items-center" aria-label="Close" title="Close"
+			tabindex="0" type="button">
+			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="size-2">
 				<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"
@@ -32,4 +40,4 @@
 			</svg>
 		</button>
 	{/if}
-</div>
+</span>

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

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

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

@@ -1,6 +1,3 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { VariantColors, VariantSizes } from '../../types/variants.js';
-import type { Snippet } from 'svelte';
 export declare const badge: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -182,12 +179,3 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
     base: string;
     icon: string;
 }, undefined, unknown, unknown, undefined>>;
-export type BadgeProps = {
-    label?: string;
-    size?: VariantSizes;
-    color?: VariantColors;
-    class?: ClassValue;
-    contentClass?: ClassValue;
-    children: Snippet;
-    onclose?: (event: MouseEvent) => void;
-};

package/dist/elements/dropdown/Dropdown.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { fly } from 'svelte/transition';
-	import { dropdownMenu, type DropdownMenuProps, type DropdownItem } from './dropdown.js';
+	import type { DropdownMenuProps, DropdownItem } from '../../index.js';
+	import { dropdownMenu } from '../../index.js';
 	import { onMount, onDestroy } from 'svelte';
-	import { Size } from '../../types/variants.js';
+	import { Size } from '../../variants.js';
 
 	let {
 		sections = [],
 		open: isOpen = $bindable(false),
-		label = 'Options',
+		label = '',
 		icon: Icon,
-		triggerContent,
-		triggerClass = '',
 		containerClass = '',
 		itemClass = '',
 		class: className = '',
@@ -22,6 +21,9 @@
 		header
 	}: DropdownMenuProps = $props();
 
+	// Determine if we're in icon-only mode
+	const iconOnly = $derived(!label && !!Icon);
+
 	let dropdownRef = $state<HTMLDivElement | undefined>();
 	let triggerRef = $state<HTMLDivElement | undefined>();
 	let portalEl = $state<HTMLDivElement | undefined>();
@@ -41,12 +43,13 @@
 		dropdownMenu({
 			position,
 			size,
-			isOpen
+			isOpen,
+			iconOnly
 		})
 	);
 
 	const baseClass = $derived(cn(base(), className));
-	const triggerClass_ = $derived(cn(trigger(), triggerClass));
+	const triggerClass_ = $derived(cn(trigger(), ''));
 	const containerClass_ = $derived(cn(container(), width, containerClass, 'shadow-lg'));
 	const sectionClass = $derived(cn(section()));
 	const itemClass_ = $derived(cn(item(), itemClass));
@@ -125,7 +128,6 @@
 	}
 
 	function handleItemClick(item: DropdownItem) {
-		if (item.disabled) return;
 		if (item.onclick) item.onclick();
 		isOpen = false;
 	}
@@ -178,35 +180,28 @@
 
 <div class={baseClass}>
 	<div bind:this={triggerRef}>
-		{#if triggerContent}
-			{@render triggerContent()}
-		{:else}
-			<button
-				type="button"
-				id="menu-button"
-				aria-expanded={isOpen}
-				aria-haspopup="true"
-				class={triggerClass_}
-				onclick={handleToggle}
-				{disabled}
-			>
+		<button
+			type="button"
+			id="menu-button"
+			aria-expanded={isOpen}
+			aria-haspopup="true"
+			class={triggerClass_}
+			onclick={handleToggle}
+			{disabled}
+		>
+			{#if label}
 				{label}
-				{#if Icon}
-					<Icon class="-mr-1 size-5 text-default-400" />
-				{:else}
-					<svg
-						class="-mr-1 size-5 text-default-400"
-						viewBox="0 0 16 16"
-						fill="currentColor"
-						aria-hidden="true"
-					>
-						<path
-							d="M6.62 12.7c.31.27.77.27 1.08 0l5-4.5A.76.76 0 0 0 12.16 7c0-.2-.08-.38-.21-.52a.76.76 0 0 0-1.09.02L7 10l-3.85-3.5a.76.76 0 0 0-1.07-.02.74.74 0 0 0-.02 1.07l4.56 5.15Z"
-						/>
-					</svg>
-				{/if}
-			</button>
-		{/if}
+			{/if}
+
+			{#if Icon}
+				<Icon class="size-5 text-default-400" />
+			{:else if label}
+				<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" class="size-5">
+					<path fill="currentColor"
+								d="M4.22 9.47a.75.75 0 0 1 1.06 0L14 18.19l8.72-8.72a.75.75 0 1 1 1.06 1.06l-9.25 9.25a.75.75 0 0 1-1.06 0l-9.25-9.25a.75.75 0 0 1 0-1.06" />
+				</svg>
+			{/if}
+		</button>
 	</div>
 </div>
 
@@ -253,7 +248,7 @@
 						<button
 							type="button"
 							onclick={() => handleItemClick(menuItem)}
-							disabled={menuItem.disabled} {...itemProps}>
+							disabled={!menuItem.onclick} {...itemProps}>
 							{@render DropItemContent(menuItem)}
 						</button>
 					{/if}

package/dist/elements/dropdown/Dropdown.svelte.d.ts

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