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

package/dist/layout/card/card.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
 export const card = tv({
     slots: {
         base: 'flex flex-col p-4 gap-2 border rounded-md shadow-sm',
@@ -7,37 +8,37 @@ export const card = tv({
     },
     variants: {
         color: {
-            default: {
+            [Color.DEFAULT]: {
                 base: 'bg-default-50 border-default-200',
                 title: 'text-default-900',
                 body: 'text-default-700'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 base: 'bg-primary-50 border-primary-200',
                 title: 'text-primary-900',
                 body: 'text-primary-700'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 base: 'bg-secondary-50 border-secondary-200',
                 title: 'text-secondary-900',
                 body: 'text-secondary-700'
             },
-            info: {
+            [Color.INFO]: {
                 base: 'bg-info-50 border-info-200',
                 title: 'text-info-900',
                 body: 'text-info-700'
             },
-            success: {
+            [Color.SUCCESS]: {
                 base: 'bg-success-50 border-success-200',
                 title: 'text-success-900',
                 body: 'text-success-700'
             },
-            warning: {
+            [Color.WARNING]: {
                 base: 'bg-warning-50 border-warning-200',
                 title: 'text-warning-900',
                 body: 'text-warning-700'
             },
-            danger: {
+            [Color.DANGER]: {
                 base: 'bg-danger-50 border-danger-200',
                 title: 'text-danger-900',
                 body: 'text-danger-700'
@@ -45,6 +46,6 @@ export const card = tv({
         }
     },
     defaultVariants: {
-        color: 'default'
+        color: Color.DEFAULT
     }
 });

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

@@ -0,0 +1,49 @@
+export declare const metricCard: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const metricCard = tv({
+    slots: {
+        base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm hover:shadow-md transition-shadow',
+        title: 'text-sm font-medium text-default-600 mb-2',
+        value: 'text-2xl font-bold text-default-900 mb-4',
+        detail: 'space-y-3 mb-4',
+        progress: 'mt-auto'
+    }
+});

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

@@ -1,45 +1,43 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
-import type { VariantColors } from '../../types/variants.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 +62,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 +125,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,17 +188,4 @@ 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;
-    value?: string | number;
-    previousValue?: string | number;
-    previousValuePrefix?: string;
-    trend?: number;
-    color?: VariantColors;
-    chartData?: number[];
-    children?: Snippet;
-    class?: ClassValue;
-    formatLargeNumbers?: boolean;
-};

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',
@@ -62,12 +62,12 @@ export const statsCard = tv({
                 trend: 'text-danger-600'
             },
             neutral: {
-                trend: 'text-gray-600'
+                trend: 'text-default-600'
             }
         }
     },
     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 {
@@ -20,23 +20,20 @@
 
 	const menubar: MenuBar = getContext('menubar');
 
-	$effect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		menubar.collapsed;
-		resetIsActive();
-	});
-
 	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-default-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 +47,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 +88,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();
@@ -10,8 +10,8 @@
 
 	const navItemClasses = $derived(
 		cn([
-			'group flex gap-x-3 p-2 rounded-md text-gray-400 text-sm/6',
-			{ 'bg-gray-950 font-semibold': active, 'hover:bg-gray-950': !active },
+			'group flex gap-x-3 p-2 rounded-md text-default-400 text-sm/6',
+			{ 'bg-default-950 font-semibold': active, 'hover:bg-default-950': !active },
 			className
 		])
 	);

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;