@makolabs/ripple 0.0.1-dev.36 → 0.0.1-dev.38

package/dist/elements/accordion/Accordion.svelte

@@ -1,93 +1,71 @@
 <script lang="ts">
-	import { cn } from '../../helper/cls.js';
+	import { twMerge } from 'tailwind-merge';
 	import { accordion } from './accordion.js';
 	import type { AccordionProps } from '../../index.js';
-	import { Color } from '../../variants.js';
 
 	let {
 		title,
 		description,
+		id,
+		bordered,
+		color,
+		open,
+		onexpand,
+		oncollapse,
+		class: className,
+		summary,
 		children,
-		custom,
-		open = $bindable(false),
-		color = Color.DEFAULT,
-		class: className = '',
-		titleclass: titleClass = '',
-		bodyclass: bodyClass = '',
-		headerclass: headerClass = '',
-		icon: Icon = undefined,
-		iconPosition = 'start',
-		bordered = true,
-		id = 'accordion-item',
-		onexpand = () => {},
-		oncollapse = () => {}
+		icon: Icon
 	}: AccordionProps = $props();
 
 	const {
 		base,
 		header,
-		title: titleSlot,
-		body,
-		icon: iconSlot,
-		description: descriptionSlot
-	} = $derived(
-		accordion({
-			color,
-			open,
-			bordered,
-			iconPosition
-		})
-	);
+		title: titleClass,
+		description: descriptionClass,
+		body
+	} = accordion({ color, open, bordered });
 
-	const baseClass = $derived(cn(base(), className));
-	const headerClasses = $derived(cn(header(), headerClass));
-	const titleClasses = $derived(cn(titleSlot(), titleClass));
-	const bodyClasses = $derived(cn(body(), bodyClass));
-	const iconClasses = $derived(cn(iconSlot()));
-	const descriptionClasses = $derived(cn(descriptionSlot()));
-
-	function handleToggle() {
+	function handleClick() {
 		open = !open;
-		if (open) {
+		if (open && onexpand) {
 			onexpand();
-		} else {
+		} else if (!open && oncollapse) {
 			oncollapse();
 		}
 	}
+
+	const baseClasses = $derived(twMerge(base(), className));
 </script>
 
-<div class={baseClass}>
-	<button class={headerClasses} onclick={handleToggle} aria-expanded={open} aria-controls={`${id}-content`} aria-label={open ? 'Collapse' : 'Expand'}	>
-		<div class="flex flex-1 items-center">
-			{#if Icon && iconPosition === 'start'}
-				<div class="mr-3">
-					<Icon class={iconClasses} />
-				</div>
+<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-1">
+			<div class="flex flex-col">
 				{#if title}
-					<h3 class={titleClasses}>{title}</h3>
+					<h3 class={titleClass()}>{title}</h3>
 				{/if}
 				{#if description}
-					<p class={descriptionClasses}>{description}</p>
+					<p class={descriptionClass()}>{description}</p>
 				{/if}
 			</div>
-
-			{#if Icon && iconPosition === 'end'}
-				<div class="ml-3">
-					<Icon class={iconClasses} />
-				</div>
-			{/if}
 		</div>
-
-		<div class="ml-3 flex items-center">
+		<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 transition-transform duration-200"
+				class="text-default-500 size-5 transition-transform duration-200"
 				class:rotate-180={open}
 			>
 				<path
@@ -97,14 +75,9 @@
 			</svg>
 		</div>
 	</button>
-
 	{#if open}
-		<div class={bodyClasses}>
-			{#if custom}
-				{@render custom()}
-			{:else if children}
-				{@render children()}
-			{/if}
+		<div class={body()} {id}>
+			{@render children()}
 		</div>
 	{/if}
 </div>

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

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

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

@@ -1,7 +1,9 @@
-export const accordion: import("tailwind-variants").TVReturnType<{
+import { Color } from '../../variants.js';
+export declare const accordion: import("tailwind-variants").TVReturnType<{
     color: {
         [Color.DEFAULT]: {
             base: string;
+            header: string;
             body: string;
         };
         [Color.PRIMARY]: {
@@ -63,11 +65,11 @@ export const accordion: import("tailwind-variants").TVReturnType<{
     title: string;
     description: string;
     body: string;
-    icon: string;
 }, undefined, {
     color: {
         [Color.DEFAULT]: {
             base: string;
+            header: string;
             body: string;
         };
         [Color.PRIMARY]: {
@@ -129,11 +131,11 @@ export const accordion: import("tailwind-variants").TVReturnType<{
     title: string;
     description: string;
     body: string;
-    icon: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
         [Color.DEFAULT]: {
             base: string;
+            header: string;
             body: string;
         };
         [Color.PRIMARY]: {
@@ -195,6 +197,4 @@ export const accordion: import("tailwind-variants").TVReturnType<{
     title: string;
     description: string;
     body: string;
-    icon: string;
 }, undefined, unknown, unknown, undefined>>;
-import { Color } from '../../variants.js';

package/dist/elements/accordion/accordion.js

@@ -1,88 +1,86 @@
 import { tv } from '../../helper/cls.js';
 import { Color } from '../../variants.js';
-
 export const accordion = tv({
-	slots: {
-		base: 'relative overflow-hidden rounded-lg',
-		header: 'flex cursor-pointer items-center justify-between border-default-200 p-4',
-		title: 'text-default-900 text-base font-medium',
-		description: 'text-default-500 text-sm',
-		body: 'border-default-200 p-4 pt-0',
-		icon: 'size-5'
-	},
-	variants: {
-		color: {
-			[Color.DEFAULT]: {
-				base: 'bg-white',
-				body: ''
-			},
-			[Color.PRIMARY]: {
-				base: 'bg-primary-50',
-				header: 'text-primary-700',
-				title: 'text-primary-700'
-			},
-			[Color.SECONDARY]: {
-				base: 'bg-secondary-50',
-				header: 'text-secondary-700',
-				title: 'text-secondary-700'
-			},
-			[Color.SUCCESS]: {
-				base: 'bg-success-50',
-				header: 'text-success-700',
-				title: 'text-success-700'
-			},
-			[Color.WARNING]: {
-				base: 'bg-warning-50',
-				header: 'text-warning-700',
-				title: 'text-warning-700'
-			},
-			[Color.DANGER]: {
-				base: 'bg-danger-50',
-				header: 'text-danger-700',
-				title: 'text-danger-700'
-			},
-			[Color.INFO]: {
-				base: 'bg-info-50',
-				header: 'text-info-700',
-				title: 'text-info-700'
-			}
-		},
-		open: {
-			true: {
-				base: 'ring-1 ring-default-200',
-				title: 'text-default-900'
-			},
-			false: {
-				base: ''
-			}
-		},
-		bordered: {
-			true: {
-				base: 'border border-default-200 ring-1 ring-default-200/50',
-				body: 'border-t'
-			},
-			false: {
-				base: 'shadow-sm'
-			}
-		},
-		iconPosition: {
-			start: {},
-			end: {}
-		}
-	},
-	compoundVariants: [
-		{
-			open: true,
-			bordered: true,
-			class: {
-				base: 'shadow-sm'
-			}
-		}
-	],
-	defaultVariants: {
-		color: Color.DEFAULT,
-		open: false,
-		bordered: true,
-		iconPosition: 'start'
-	}
-}); 
+    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/index.d.ts

@@ -163,6 +163,7 @@ export type AlertProps = {
     class?: string;
     onclose?: () => void;
     footer?: Snippet;
+    icon?: Component;
 };
 export type StatsCardProps = {
     label?: string;
@@ -725,8 +726,8 @@ export type AccordionProps = {
     id?: string;
     title?: string;
     description?: string;
-    children?: Snippet;
-    custom?: Snippet;
+    children: Snippet;
+    summary?: Snippet;
     open?: boolean;
     color?: VariantColors;
     class?: ClassValue;

package/dist/layout/sidebar/Sidebar.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import NavGroup from './NavGroup.svelte';
-	import NavItem from './NavItem.svelte';
 	import { setContext } from 'svelte';
 	import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
 	import clsx from 'clsx';
-	import { cn } from '../../helper/cls.js';
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 
 	let { items = [], logo }: SidebarProps = $props();
@@ -52,78 +49,116 @@
 	const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
 
 	const sidebarClasses = $derived(
-		clsx(
-			`flex min-h-screen max-h-screen overflow-y-auto flex-col gap-y-1 overflow-y-auto
-			border-r border-default-800 bg-default-900 px-3 duration-300 sticky top-0`,
-			{
-				'w-16': menubar.collapsed,
-				'w-16 xl:w-72 shrink-0': !menubar.collapsed
-			}
-		)
+		clsx(`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full`, {
+			'w-16': menubar.collapsed,
+			'w-16 xl:w-64 shrink-0': !menubar.collapsed
+		})
 	);
 
 	const logoTextClasses = $derived(
-		clsx('text-xl font-semibold hidden text-white truncate', { 'xl:block': !menubar.collapsed })
+		clsx('text-xl font-bold text-white', {
+			'xl:block': !menubar.collapsed,
+			hidden: menubar.collapsed
+		})
 	);
 
 	const logoWrapperClasses = $derived(
-		clsx('flex shrink-0 items-center justify-between mt-3 flex-col', {
-			'xl:mt-0 xl:h-16 flex-row': !menubar.collapsed
-		})
+		clsx(
+			'flex items-center h-16 flex-shrink-0 px-4 bg-gradient-to-r from-gray-900 to-default-900/50 border-b border-white/10',
+			{
+				'justify-between': !menubar.collapsed,
+				'justify-center': menubar.collapsed
+			}
+		)
 	);
 </script>
 
 <div class={sidebarClasses}>
 	<div class={logoWrapperClasses}>
 		<div class="flex items-center gap-x-1">
-			{#if logo.src}
+			{#if logo.src && !menubar.collapsed}
 				<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
 			{/if}
-			{#if logo.title}
+			{#if logo.title && !menubar.collapsed}
 				<h1 class={logoTextClasses}>{logo.title}</h1>
 			{/if}
 		</div>
-		<button onclick={toggle} class="hidden cursor-pointer xl:block" aria-label="Toggle Sidebar">
+		<button
+			onclick={toggle}
+			class="hidden cursor-pointer text-white xl:block"
+			aria-label="Toggle Sidebar"
+		>
 			{@render ToggleIcon()}
 		</button>
 	</div>
-	<nav class="flex flex-1 flex-col">
-		<ul role="list" class="flex flex-1 flex-col gap-y-1">
+
+	<div class="flex flex-1 flex-col overflow-y-auto bg-gradient-to-b from-transparent to-black/20">
+		<nav class="flex-1 space-y-6 px-2 py-4">
 			{#each navigationItems as item, index (index)}
 				{#if 'type' in item && item.type === 'horizontal-divider'}
-					<li class="my-3 border-t border-default-700"></li>
+					<li class="my-2 border-t border-white/10"></li>
 				{:else if 'children' in item}
-					<NavGroup active={item.active}>
-						{#snippet labelArea(classes)}
-							<span class={classes}>{item.label}</span>
-						{/snippet}
-						{#each item.children as child (child.label)}
-							<NavItem href={child.href} active={child.active}>
-								{#if child.Icon}
-									{@const Icon = child.Icon}
-									<Icon class="size-6 shrink-0 text-default-600" />
-								{/if}
-								<span class="truncate">{child.label}</span>
-							</NavItem>
-						{/each}
-					</NavGroup>
+					<div>
+						{#if !menubar.collapsed}
+							<h3 class="text-default-200 px-3 text-xs font-semibold tracking-wider uppercase">
+								{item.label}
+							</h3>
+						{/if}
+						<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
+							{#each item.children as child (child.label)}
+								<button
+									class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {child.active
+										? 'bg-default-500/20'
+										: ''} {menubar.collapsed ? 'justify-center' : ''}"
+									class:text-white={child.active}
+									class:text-gray-300={!child.active}
+									onclick={() => (window.location.href = child.href)}
+									title={menubar.collapsed ? child.label : ''}
+								>
+									{#if child.Icon}
+										{@const Icon = child.Icon}
+										<Icon
+											class="h-5 w-5 flex-shrink-0 {child.active
+												? 'text-default-200'
+												: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
+										/>
+									{/if}
+									{#if !menubar.collapsed}
+										<span class="truncate">{child.label}</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					</div>
 				{:else if 'href' in item}
-					<NavItem href={item.href} active={item.active}>
-						{#snippet children(classes)}
-							{#if item.Icon}
-								{@const Icon = item.Icon}
-								<Icon class="size-6 shrink-0 text-default-600" />
-							{/if}
-							<span class={cn(classes)}>{item.label}</span>
-						{/snippet}
-					</NavItem>
+					<button
+						class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {item.active
+							? 'bg-default-500/20'
+							: ''} {menubar.collapsed ? 'justify-center' : ''}"
+						class:text-white={item.active}
+						class:text-gray-300={!item.active}
+						onclick={() => (window.location.href = item.href)}
+						title={menubar.collapsed ? item.label : ''}
+					>
+						{#if item.Icon}
+							{@const Icon = item.Icon}
+							<Icon
+								class="h-5 w-5 flex-shrink-0 {item.active
+									? 'text-default-200'
+									: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
+							/>
+						{/if}
+						{#if !menubar.collapsed}
+							<span class="truncate">{item.label}</span>
+						{/if}
+					</button>
 				{/if}
 			{/each}
-		</ul>
-	</nav>
+		</nav>
+	</div>
 </div>
 
-{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-600')}
+{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-200')}
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="0.8em"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.36",
+	"version": "0.0.1-dev.38",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",