@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.80

package/dist/charts/Chart.svelte.d.ts

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

package/dist/drawer/drawer.js

@@ -5,11 +5,11 @@ export const drawer = tv({
         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',
+        header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
         body: 'flex-1 overflow-y-auto p-4',
-        footer: 'flex justify-end border-t border-gray-200 p-4',
+        footer: 'flex justify-end border-t border-default-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'
+        closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
     },
     variants: {
         open: {

package/dist/elements/accordion/Accordion.svelte

@@ -0,0 +1,98 @@
+<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,
+		body
+	} = accordion({
+		color,
+		open,
+		bordered,
+		hasChildren: !!children
+	});
+
+	function handleClick() {
+		if (!children) return; // Don't toggle if no children
+		open = !open;
+		if (open && onexpand) {
+			onexpand();
+		} else if (!open && oncollapse) {
+			oncollapse();
+		}
+	}
+
+	const baseClasses = $derived(twMerge(base(), className));
+</script>
+
+<div class={baseClasses}>
+	{#if children}
+		<button
+			class={twMerge(header(), 'flex gap-3')}
+			aria-expanded={open}
+			aria-controls={id}
+			onclick={handleClick}
+		>
+			{@render accordionHeaderContent()}
+			<div class="flex items-center">
+				<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}
+	{:else}
+		<div class={twMerge(header(), 'flex gap-3')}>
+			{@render accordionHeaderContent()}
+		</div>
+	{/if}
+</div>
+
+{#snippet accordionHeaderContent()}
+	<div class="flex items-start justify-start gap-3">
+		{#if Icon}
+			<Icon class="text-default-500 size-5" />
+		{/if}
+		<div class="flex flex-col items-start text-left">
+			{#if title}
+				<h3 class={titleClass()}>{title}</h3>
+			{/if}
+			{#if description}
+				<p class="text-default-500 text-xs whitespace-nowrap">{description}</p>
+			{/if}
+		</div>
+	</div>
+	{@render summary?.()}
+{/snippet}

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,227 @@
+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;
+        };
+    };
+    hasChildren: {
+        true: {
+            base: string;
+            header: string;
+        };
+        false: {
+            base: string;
+            header: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: 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;
+        };
+    };
+    hasChildren: {
+        true: {
+            base: string;
+            header: string;
+        };
+        false: {
+            base: string;
+            header: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: 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;
+        };
+    };
+    hasChildren: {
+        true: {
+            base: string;
+            header: string;
+        };
+        false: {
+            base: string;
+            header: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/accordion/accordion.js

@@ -0,0 +1,138 @@
+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 bg-white border border-default-200',
+        header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200',
+        title: 'flex text-default-900 text-lg font-medium leading-tight',
+        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: '',
+                body: ''
+            },
+            [Color.PRIMARY]: {
+                base: 'bg-primary-50/50 hover:border-primary-300',
+                header: 'text-primary-700',
+                title: 'text-primary-700'
+            },
+            [Color.SECONDARY]: {
+                base: 'bg-secondary-50/50 hover:border-secondary-300',
+                header: 'text-secondary-700',
+                title: 'text-secondary-700'
+            },
+            [Color.SUCCESS]: {
+                base: 'bg-success-50/50 hover:border-success-300',
+                header: 'text-success-700',
+                title: 'text-success-700'
+            },
+            [Color.WARNING]: {
+                base: 'bg-warning-50/50 hover:border-warning-300',
+                header: 'text-warning-700',
+                title: 'text-warning-700'
+            },
+            [Color.DANGER]: {
+                base: 'bg-danger-50/50 hover:border-danger-300',
+                header: 'text-danger-700',
+                title: 'text-danger-700'
+            },
+            [Color.INFO]: {
+                base: 'bg-info-50/50 hover:border-info-300',
+                header: 'text-info-700',
+                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'
+            }
+        },
+        hasChildren: {
+            true: {
+                base: 'hover:shadow-md',
+                header: 'hover:bg-default-50'
+            },
+            false: {
+                base: 'hover:shadow-none',
+                header: 'cursor-default'
+            }
+        },
+        iconPosition: {
+            start: {},
+            end: {}
+        }
+    },
+    compoundVariants: [
+        {
+            open: true,
+            class: {
+                header: 'border-b-0'
+            }
+        },
+        {
+            hasChildren: true,
+            color: Color.PRIMARY,
+            class: {
+                header: 'hover:bg-primary-50'
+            }
+        },
+        {
+            hasChildren: true,
+            color: Color.SECONDARY,
+            class: {
+                header: 'hover:bg-secondary-50'
+            }
+        },
+        {
+            hasChildren: true,
+            color: Color.SUCCESS,
+            class: {
+                header: 'hover:bg-success-50'
+            }
+        },
+        {
+            hasChildren: true,
+            color: Color.WARNING,
+            class: {
+                header: 'hover:bg-warning-50'
+            }
+        },
+        {
+            hasChildren: true,
+            color: Color.DANGER,
+            class: {
+                header: 'hover:bg-danger-50'
+            }
+        },
+        {
+            hasChildren: true,
+            color: Color.INFO,
+            class: {
+                header: 'hover:bg-info-50'
+            }
+        }
+    ],
+    defaultVariants: {
+        color: Color.DEFAULT,
+        open: false,
+        bordered: true,
+        hasChildren: false,
+        iconPosition: 'start'
+    }
+});

package/dist/elements/alert/Alert.svelte

@@ -8,6 +8,7 @@
 		message,
 		color = Color.DEFAULT,
 		onclose,
+		footer,
 		class: className = ''
 	}: AlertProps = $props();
 
@@ -16,7 +17,7 @@
 	}
 
 	const colorClasses = {
-		[Color.DEFAULT]: 'bg-gray-50 border-gray-200 text-gray-800',
+		[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',
@@ -29,14 +30,14 @@
 	<div class="flex items-start justify-between gap-4">
 		<div class="flex-1">
 			{#if title}
-				<h4 class="mb-2 font-semibold">{title}</h4>
+				<h4 class="font-semibold">{title}</h4>
 			{/if}
 			<p class="text-sm">{message}</p>
 		</div>
 		{#if onclose}
 			<button
 				type="button"
-				class="flex-shrink-0 cursor-pointer rounded-md p-1 hover:bg-gray-200/20"
+				class="hover:bg-default-200/20 flex-shrink-0 cursor-pointer rounded-md p-1"
 				onclick={handleClose}
 				aria-label="Close alert"
 			>
@@ -50,4 +51,7 @@
 			</button>
 		{/if}
 	</div>
+	{#if footer}
+		{@render footer()}
+	{/if}
 </div>