@makolabs/ripple 0.0.1-dev.7 → 0.0.1-dev.9

package/dist/layout/card/stats-card.d.ts

@@ -1,45 +1,46 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
-import type { VariantColors } from '../../types/variants.js';
+import type { VariantColors } from '../../index.js';
+import { Color } from '../../variants.js';
 export declare const statsCard: import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        info: {
+        [Color.INFO]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        warning: {
+        [Color.WARNING]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        danger: {
+        [Color.DANGER]: {
             label: string;
             value: string;
             trend: string;
@@ -64,46 +65,45 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     trend: string;
     previousValue: string;
     unit: string;
-    chartContainer: string;
 }, undefined, {
     color: {
-        default: {
+        [Color.DEFAULT]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        info: {
+        [Color.INFO]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        warning: {
+        [Color.WARNING]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        danger: {
+        [Color.DANGER]: {
             label: string;
             value: string;
             trend: string;
@@ -128,46 +128,45 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     trend: string;
     previousValue: string;
     unit: string;
-    chartContainer: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        info: {
+        [Color.INFO]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        warning: {
+        [Color.WARNING]: {
             label: string;
             value: string;
             trend: string;
             previousValue: string;
         };
-        danger: {
+        [Color.DANGER]: {
             label: string;
             value: string;
             trend: string;
@@ -192,7 +191,6 @@ export declare const statsCard: import("tailwind-variants").TVReturnType<{
     trend: string;
     previousValue: string;
     unit: string;
-    chartContainer: string;
 }, undefined, unknown, unknown, undefined>>;
 export type StatsCardProps = {
     label?: string;

package/dist/layout/card/stats-card.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
 export const statsCard = tv({
     slots: {
         base: '',
@@ -7,47 +8,46 @@ export const statsCard = tv({
         trend: '',
         previousValue: '',
         unit: '',
-        chartContainer: ''
     },
     variants: {
         color: {
-            default: {
-                label: 'text-gray-500',
-                value: 'text-gray-900',
-                trend: 'text-gray-600',
-                previousValue: 'text-gray-500'
+            [Color.DEFAULT]: {
+                label: 'text-default-500',
+                value: 'text-default-900',
+                trend: 'text-default-600',
+                previousValue: 'text-default-500'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 label: 'text-primary-500',
                 value: 'text-primary-600',
                 trend: 'text-primary-600',
                 previousValue: 'text-primary-400'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 label: 'text-secondary-500',
                 value: 'text-secondary-600',
                 trend: 'text-secondary-600',
                 previousValue: 'text-secondary-400'
             },
-            info: {
+            [Color.INFO]: {
                 label: 'text-info-500',
                 value: 'text-info-600',
                 trend: 'text-info-600',
                 previousValue: 'text-info-400'
             },
-            success: {
+            [Color.SUCCESS]: {
                 label: 'text-success-500',
                 value: 'text-success-600',
                 trend: 'text-success-600',
                 previousValue: 'text-success-400'
             },
-            warning: {
+            [Color.WARNING]: {
                 label: 'text-warning-500',
                 value: 'text-warning-600',
                 trend: 'text-warning-600',
                 previousValue: 'text-warning-400'
             },
-            danger: {
+            [Color.DANGER]: {
                 label: 'text-danger-500',
                 value: 'text-danger-600',
                 trend: 'text-danger-600',
@@ -67,7 +67,7 @@ export const statsCard = tv({
         }
     },
     defaultVariants: {
-        color: 'default',
+        color: Color.DEFAULT,
         trendDirection: 'neutral'
     }
 });

package/dist/layout/navbar/navbar.d.ts

@@ -198,31 +198,8 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
 export type NavbarProps = {
     logo?: string | Component;
     links?: NavbarLinkItem[];
-    color?: keyof typeof navbar.variants.color;
-    size?: keyof typeof navbar.variants.size;
     class?: ClassValue;
-    wrapperClass?: ClassValue;
-    brandClass?: ClassValue;
-    menuClass?: ClassValue;
-    mobileMenuClass?: ClassValue;
-    linksClass?: ClassValue;
-    linkClass?: ClassValue;
-    mobileLinkClass?: ClassValue;
-    actionsClass?: ClassValue;
-    sticky?: boolean;
     brand?: Snippet;
     children?: Snippet;
     actions?: Snippet;
-    userMenu?: boolean;
-    username?: string;
-    userAvatar?: string;
-    userMenuItems?: {
-        label: string;
-        href: string;
-        onClick?: () => void;
-    }[];
-    onmenuitemclick?: (item: {
-        label: string;
-        href: string;
-    }) => void;
 };

package/dist/layout/sidebar/NavGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import type { MenuBar, NavGroupProps } from './sidebar.js';
+	import type { MenuBar, NavGroupProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
 
 	let {
@@ -28,15 +28,18 @@
 
 	const navGroupClasses = $derived(
 		cn(
-			`flex items-center gap-x-3 hover:bg-gray-950 p-1.5 rounded-md w-full cursor-pointer
-		text-gray-400 text-sm/6 text-left`,
-			{ 'font-semibold bg-gray-950': isActive, 'hover:bg-gray-950': !isActive },
+			`items-center gap-x-3 p-1.5 rounded-md w-full cursor-pointer text-gray-400 text-sm/6 text-left font-medium`,
+			{
+				'font-semibold ': isActive,
+				hidden: menubar.collapsed,
+				'hidden xl:flex': !menubar.collapsed
+			},
 			className
 		)
 	);
 
 	const chevronIconClasses = $derived(
-		cn('size-4 text-gray-600 shrink-0', {
+		cn('size-4 text-default-600 shrink-0', {
 			'rotate-90': isActive,
 			'-ml-2 xl:ml-auto': !menubar.collapsed,
 			'-ml-2': menubar.collapsed
@@ -50,57 +53,35 @@
 		})
 	);
 
-	const topDivClasses = $derived(
-		cn('overflow-hidden transition-all duration-200', {
-			'fixed left-0 top-0 shadow-lg w-screen h-screen z-50 bg-gray-700/30 backdrop-blur': isActive,
-			'xl:static xl:shadow-none xl:bg-transparent mt-0 xl:mt-1 xl:w-auto xl:h-auto':
-				!menubar.collapsed
-		})
-	);
-
-	const toggleButtonClasses = $derived(
-		cn('bg-slate-900 w-72 pl-3 h-8 flex p-2', {
-			'xl:hidden': isActive && !menubar.collapsed
+	const iconClasses = $derived(
+		cn('size-6 shrink-0 text-default-600', {
+			'flex xl:hidden': !menubar.collapsed
 		})
 	);
 
-	const navUlClasses = $derived(
-		cn('w-52', {
-			'bg-slate-900 w-72 h-[calc(100vh-32px)] p-2': isActive,
-			'xl:h-auto xl:bg-transparent xl:p-0 xl:w-52 xl:ml-2': !menubar.collapsed
+	const topDivClasses = $derived(
+		cn('overflow-hidden transition-all duration-200', {
+			'bg-transparent mt-0 mt-1 w-auto': !menubar.collapsed,
+			'xl:hidden': !isActive,
+			'hidden xl:block': menubar.collapsed
 		})
 	);
 </script>
 
-<svelte:window onresize={resetIsActive} />
-
 <div>
 	<button type="button" class={navGroupClasses} onclick={toggle}>
-		{@render labelArea(labelClasses)}
-		{@render Icon(chevronIconClasses, 0.7)}
+		{@render labelArea(labelClasses, iconClasses)}
+		{@render ChevronIcon(chevronIconClasses, 0.7)}
 	</button>
 
-	{#if isActive}
-		<div class={topDivClasses}>
-			<div class={toggleButtonClasses}>
-				<button
-					type="button"
-					class="flex h-7 w-7 cursor-pointer items-center justify-center gap-x-3
-					rounded-md bg-slate-800 text-left text-sm/6 text-gray-700"
-					onclick={toggle}
-				>
-					{@render Icon('size-4 shrink-0 -rotate-180 text-gray-600', 0.7)}
-				</button>
-			</div>
-			<ul class={navUlClasses}>
-				{@render children?.()}
-			</ul>
-		</div>
-	{/if}
+	<div class={topDivClasses}>
+		<ul>
+			{@render children?.()}
+		</ul>
+	</div>
 </div>
 
-
-{#snippet Icon(className: string, size: number)}
+{#snippet ChevronIcon(className: string, size: number)}
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="{size}em"
@@ -113,4 +94,4 @@
 			d="M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04"
 		/>
 	</svg>
-{/snippet}
+{/snippet}

package/dist/layout/sidebar/NavGroup.svelte.d.ts

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

package/dist/layout/sidebar/NavItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import clsx from 'clsx';
 	import { getContext } from 'svelte';
-	import type { MenuBar, NavItemProps } from './sidebar.js';
+	import type { MenuBar, NavItemProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
 
 	let { href, children, active, class: className = '' }: NavItemProps = $props();

package/dist/layout/sidebar/NavItem.svelte.d.ts

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

package/dist/layout/sidebar/Sidebar.svelte

@@ -2,13 +2,7 @@
 	import NavGroup from './NavGroup.svelte';
 	import NavItem from './NavItem.svelte';
 	import { setContext } from 'svelte';
-	import type {
-		MenuBar,
-		NavigationItem,
-		SidebarProps,
-		ParentItem,
-		LinkItem
-	} from './sidebar.js';
+	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';
@@ -36,7 +30,7 @@
 			let anyChildActive = false;
 
 			const updatedChildren = parentItem.children.map((child) => {
-				const childActive = isRouteActive(child.href);
+				const childActive = isRouteActive(child.href, true);
 				if (childActive) {
 					anyChildActive = true;
 				}
@@ -69,7 +63,7 @@
 	);
 
 	const logoTextClasses = $derived(
-		clsx('text-xl font-semibold hidden text-white', { 'xl:block': !menubar.collapsed })
+		clsx('text-xl font-semibold hidden text-white truncate', { 'xl:block': !menubar.collapsed })
 	);
 
 	const logoWrapperClasses = $derived(
@@ -90,18 +84,7 @@
 			{/if}
 		</div>
 		<button onclick={toggle} class="hidden cursor-pointer xl:block" aria-label="Toggle Sidebar">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="0.8em"
-				height="0.8em"
-				viewBox="0 0 24 24"
-				class="size-6 shrink-0 text-gray-600"
-			>
-				<path
-					fill="currentColor"
-					d="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993zh18zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993zl18-.002zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993zh18z"
-				/>
-			</svg>
+			{@render ToggleIcon()}
 		</button>
 	</div>
 	<nav class="flex flex-1 flex-col">
@@ -112,11 +95,7 @@
 				{:else if 'children' in item}
 					<NavGroup active={item.active}>
 						{#snippet labelArea(classes)}
-							{#if item.Icon}
-								{@const Icon = item.Icon}
-								<Icon class="size-6 shrink-0 text-gray-600" />
-							{/if}
-							<span class={cn(classes)}>{item.label}</span>
+							<span class={classes}>{item.label}</span>
 						{/snippet}
 						{#each item.children as child (child.label)}
 							<NavItem href={child.href} active={child.active}>
@@ -143,3 +122,18 @@
 		</ul>
 	</nav>
 </div>
+
+{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-gray-600')}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="0.8em"
+		height="0.8em"
+		viewBox="0 0 24 24"
+		class={classes}
+	>
+		<path
+			fill="currentColor"
+			d="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993zh18zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993zl18-.002zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993zh18z"
+		/>
+	</svg>
+{/snippet}

package/dist/layout/sidebar/Sidebar.svelte.d.ts

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

package/dist/layout/table/table.d.ts

@@ -1,6 +1,6 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
-import type { VariantColors, VariantSizes } from '../../types/variants.js';
+import type { VariantColors, VariantSizes } from '../../index.js';
 export type DataRow = Record<string, any>;
 export type KeyType = keyof DataRow;
 export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';

package/dist/layout/tabs/tabs.d.ts

@@ -1,6 +1,6 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Component, Snippet } from 'svelte';
-import type { VariantColors, VariantSizes } from '../../types/variants.js';
+import type { VariantColors, VariantSizes } from '../../index.js';
 export type TabItem = {
     value: string;
     label: string;

package/dist/modal/Modal.svelte

@@ -4,7 +4,8 @@
 	import { fade, scale } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { cn } from '../helper/cls.js';
-	import { modal, type MakeModalProps } from './modal.js';
+	import { modal } from './modal.js';
+	import type { MakeModalProps } from '../index.js';
 
 	let {
 		open = $bindable(false),

package/dist/modal/Modal.svelte.d.ts

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

package/dist/modal/modal.d.ts

@@ -1,5 +1,3 @@
-import type { VariantSizes } from '../types/variants.js';
-import type { Snippet } from 'svelte';
 export declare const modal: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -211,24 +209,3 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     title: string;
     closeButton: string;
 }, undefined, unknown, unknown, undefined>>;
-export type MakeModalProps = {
-    open?: boolean;
-    onclose?: () => void;
-    title?: string;
-    description?: string;
-    hideCloseButton?: boolean;
-    closeOnBackdropClick?: boolean;
-    closeOnEsc?: boolean;
-    position?: keyof typeof modal.variants.position;
-    size?: VariantSizes;
-    class?: string;
-    backdropclass?: string;
-    contentclass?: string;
-    headerclass?: string;
-    bodyclass?: string;
-    titleclass?: string;
-    children?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-    custom?: Snippet;
-};

package/dist/sonner/sonner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+
+	let restProps: SonnerProps = $props();
+</script>
+
+<Sonner
+	class="toaster group"
+	toastOptions={{
+
+  }}
+	{...restProps}
+/>

package/dist/sonner/sonner.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+declare const Sonner: import("svelte").Component<SonnerProps, {}, "">;
+type Sonner = ReturnType<typeof Sonner>;
+export default Sonner;

package/dist/types/variants.d.ts

@@ -1,21 +1 @@
-export declare const Color: {
-    readonly DEFAULT: "default";
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly INFO: "info";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-};
-export type VariantColors = (typeof Color)[keyof typeof Color];
-export declare const Size: {
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly BASE: "base";
-    readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "2xl";
-};
-export type VariantSizes = (typeof Size)[keyof typeof Size];
-export declare const colors: VariantColors[];
-export declare const sizes: VariantSizes[];
+export {};

package/dist/types/variants.js

@@ -1,19 +1 @@
-export const Color = {
-    DEFAULT: 'default',
-    PRIMARY: 'primary',
-    SECONDARY: 'secondary',
-    INFO: 'info',
-    SUCCESS: 'success',
-    WARNING: 'warning',
-    DANGER: 'danger'
-};
-export const Size = {
-    XS: 'xs',
-    SM: 'sm',
-    BASE: 'base',
-    LG: 'lg',
-    XL: 'xl',
-    XXL: '2xl'
-};
-export const colors = Object.values(Color);
-export const sizes = Object.values(Size);
+"use strict";

package/dist/variants.d.ts

@@ -0,0 +1,20 @@
+import type { VariantColors, VariantSizes } from './index.js';
+export declare const Color: {
+    DEFAULT: string;
+    PRIMARY: string;
+    SECONDARY: string;
+    INFO: string;
+    SUCCESS: string;
+    WARNING: string;
+    DANGER: string;
+};
+export declare const Size: {
+    XS: string;
+    SM: string;
+    BASE: string;
+    LG: string;
+    XL: string;
+    XXL: string;
+};
+export declare const colors: VariantColors[];
+export declare const sizes: VariantSizes[];

package/dist/variants.js

@@ -0,0 +1,19 @@
+export const Color = {
+    DEFAULT: 'default',
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger'
+};
+export const Size = {
+    XS: 'xs',
+    SM: 'sm',
+    BASE: 'base',
+    LG: 'lg',
+    XL: 'xl',
+    XXL: '2xl'
+};
+export const colors = Object.values(Color);
+export const sizes = Object.values(Size);