@makolabs/ripple 1.7.11 → 1.9.0

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

@@ -1,7 +1,6 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
-import { Size, Color } from '../../variants.js';
 export type NavbarLinkItem = {
     label: string;
     href: string;
@@ -11,21 +10,21 @@ export type NavbarLinkItem = {
 };
 export declare const navbar: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -34,17 +33,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.SM]: {
+        sm: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
             link: string;
             mobileLink: string;
@@ -73,21 +72,21 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     divider: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -96,17 +95,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.SM]: {
+        sm: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
             link: string;
             mobileLink: string;
@@ -135,21 +134,21 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     divider: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -158,17 +157,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.SM]: {
+        sm: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
             link: string;
             mobileLink: string;
@@ -203,4 +202,5 @@ export type NavbarProps = {
     brand?: Snippet;
     children?: Snippet;
     actions?: Snippet;
+    testId?: string;
 };

package/dist/layout/sidebar/Sidebar.svelte

@@ -4,8 +4,9 @@
 	import clsx from 'clsx';
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 	import { resolve } from '$app/paths';
+	import { buildTestId } from '../../helper/testid.js';
 
-	let { items = [], logo, footer }: SidebarProps = $props();
+	let { items = [], logo, footer, testId }: SidebarProps = $props();
 	let menubar: MenuBar = $state({
 		collapsed: false
 	});
@@ -91,7 +92,7 @@
 	);
 </script>
 
-<div class={sidebarClasses}>
+<div class={sidebarClasses} data-testid={buildTestId('sidebar', undefined, testId)}>
 	<div class={logoWrapperClasses}>
 		<div class="flex items-center gap-x-1">
 			{#if logo.src && !menubar.collapsed}
@@ -127,7 +128,7 @@
 							</h3>
 						{/if}
 						<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
-							{#each item.children as child (child.label)}
+							{#each item.children as child, childIndex (child.label)}
 								<a
 									href={resolve(child.href as `/`)}
 									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
@@ -136,6 +137,7 @@
 									class:text-white={child.active}
 									class:text-default-300={!child.active}
 									title={menubar.collapsed ? child.label : ''}
+									data-testid={buildTestId('sidebar', 'item', testId, `${index}-${childIndex}`)}
 								>
 									{#if child.Icon}
 										{@const Icon = child.Icon}
@@ -161,6 +163,7 @@
 						class:text-white={item.active}
 						class:text-default-300={!item.active}
 						title={menubar.collapsed ? item.label : ''}
+						data-testid={buildTestId('sidebar', 'item', testId, index)}
 					>
 						{#if item.Icon}
 							{@const Icon = item.Icon}

package/dist/layout/sidebar/sidebar-types.d.ts

@@ -0,0 +1,59 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+export type MenuBar = {
+    collapsed: boolean;
+};
+export interface BaseNavigationItem {
+    label: string;
+}
+export interface WithIcon {
+    Icon?: Component;
+}
+export interface Activatable {
+    active?: boolean;
+}
+export interface LinkItem extends BaseNavigationItem, WithIcon, Activatable {
+    href: string;
+    meta?: string;
+    /**
+     * When true, the link will be active if the current route starts with this href.
+     * Example: href="/tushar" will be active for "/tushar/overview" and "/tushar/profile"
+     * @default false
+     */
+    matchPartial?: boolean;
+}
+export interface ParentItem extends BaseNavigationItem, Activatable {
+    children: LinkItem[];
+}
+export interface DividerItem {
+    type: 'horizontal-divider';
+}
+export type NavigationItem = LinkItem | ParentItem | DividerItem;
+export type LogoType = {
+    src?: string;
+    title: string;
+};
+export interface NavGroupProps {
+    labelArea: Snippet<[string, string]>;
+    active?: boolean;
+    children?: Snippet;
+    class?: ClassValue;
+    testId?: string;
+}
+export interface NavItemProps {
+    href: string;
+    active?: boolean;
+    children: Snippet<[ClassValue]>;
+    class?: ClassValue;
+    testId?: string;
+}
+export interface SidebarProps {
+    items?: NavigationItem[];
+    logo: LogoType;
+    /** Optional footer snippet rendered at the bottom of the sidebar */
+    footer?: Snippet<[{
+        collapsed: boolean;
+    }]>;
+    testId?: string;
+}

package/dist/layout/sidebar/sidebar-types.js

@@ -0,0 +1 @@
+export {};