@makolabs/ripple 1.2.2 → 1.2.4

package/dist/header/breadcrumbs.d.ts

@@ -1,3 +1,5 @@
+import type { Component } from 'svelte';
+import { Size, Color } from '../variants.js';
 type BreadcrumbItem = {
     label: string;
     href: string;
@@ -5,16 +7,16 @@ type BreadcrumbItem = {
 };
 export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [Size.XS]: {
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             base: string;
         };
     };
@@ -33,31 +35,31 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        default: {
+        [Color.DEFAULT]: {
             item: string;
             wrapper: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             item: string;
             wrapper: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             item: string;
             wrapper: string;
         };
-        info: {
+        [Color.INFO]: {
             item: string;
             wrapper: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             item: string;
             wrapper: string;
         };
-        warning: {
+        [Color.WARNING]: {
             item: string;
             wrapper: string;
         };
-        danger: {
+        [Color.DANGER]: {
             item: string;
             wrapper: string;
         };
@@ -78,16 +80,16 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, undefined, {
     size: {
-        xs: {
+        [Size.XS]: {
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             base: string;
         };
     };
@@ -106,31 +108,31 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        default: {
+        [Color.DEFAULT]: {
             item: string;
             wrapper: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             item: string;
             wrapper: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             item: string;
             wrapper: string;
         };
-        info: {
+        [Color.INFO]: {
             item: string;
             wrapper: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             item: string;
             wrapper: string;
         };
-        warning: {
+        [Color.WARNING]: {
             item: string;
             wrapper: string;
         };
-        danger: {
+        [Color.DANGER]: {
             item: string;
             wrapper: string;
         };
@@ -151,16 +153,16 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [Size.XS]: {
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             base: string;
         };
     };
@@ -179,31 +181,31 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        default: {
+        [Color.DEFAULT]: {
             item: string;
             wrapper: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             item: string;
             wrapper: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             item: string;
             wrapper: string;
         };
-        info: {
+        [Color.INFO]: {
             item: string;
             wrapper: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             item: string;
             wrapper: string;
         };
-        warning: {
+        [Color.WARNING]: {
             item: string;
             wrapper: string;
         };
-        danger: {
+        [Color.DANGER]: {
             item: string;
             wrapper: string;
         };
@@ -223,4 +225,16 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     separator: string;
     wrapper: string;
 }, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    size?: keyof typeof breadcrumbs.variants.size;
+    weight?: keyof typeof breadcrumbs.variants.weight;
+    color?: keyof typeof breadcrumbs.variants.color;
+    icon?: Component;
+    class?: string;
+    listclass?: string;
+    itemclass?: string;
+    separatorclass?: string;
+    wrapperclass?: string;
+};
 export type { BreadcrumbItem };

package/dist/header/breadcrumbs.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Size, Color } from '../variants.js';
 export const breadcrumbs = tv({
     slots: {
         base: 'flex',
@@ -9,16 +10,16 @@ export const breadcrumbs = tv({
     },
     variants: {
         size: {
-            xs: {
+            [Size.XS]: {
                 base: 'items-center text-xs'
             },
-            sm: {
+            [Size.SM]: {
                 base: 'items-center text-sm'
             },
-            base: {
+            [Size.BASE]: {
                 base: 'items-center text-base'
             },
-            lg: {
+            [Size.LG]: {
                 base: 'items-center text-lg'
             }
         },
@@ -37,31 +38,31 @@ export const breadcrumbs = tv({
             }
         },
         color: {
-            default: {
+            [Color.DEFAULT]: {
                 item: 'hover:text-default-700',
                 wrapper: 'text-default-500'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 item: 'hover:text-primary-700',
                 wrapper: 'text-primary-500'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 item: 'hover:text-secondary-700',
                 wrapper: 'text-secondary-500'
             },
-            info: {
+            [Color.INFO]: {
                 item: 'hover:text-info-700',
                 wrapper: 'text-info-500'
             },
-            success: {
+            [Color.SUCCESS]: {
                 item: 'hover:text-success-700',
                 wrapper: 'text-success-500'
             },
-            warning: {
+            [Color.WARNING]: {
                 item: 'hover:text-warning-700',
                 wrapper: 'text-warning-500'
             },
-            danger: {
+            [Color.DANGER]: {
                 item: 'hover:text-danger-700',
                 wrapper: 'text-danger-500'
             }

package/dist/index.d.ts

@@ -229,6 +229,9 @@ export type TableProps<T extends DataRow = any> = {
     onpagesizechange?: (pageSize: number) => void;
     paginationPosition?: 'top' | 'bottom' | 'both';
     paginationTemplate?: 'simple' | 'full';
+    title?: string;
+    subtitle?: string;
+    headerActions?: Snippet;
 };
 export type BreadcrumbItem = {
     label: string;
@@ -347,6 +350,8 @@ export { default as Card } from './layout/card/Card.svelte';
 export { default as MetricCard } from './layout/card/MetricCard.svelte';
 export { default as RankedCard } from './layout/card/RankedCard.svelte';
 export { default as Alert } from './elements/alert/Alert.svelte';
+export { default as Pagination } from './elements/pagination/Pagination.svelte';
+export type { PaginationProps } from './elements/pagination/Pagination.svelte';
 export type TabProps = {
     value: string;
     label: string;
@@ -667,7 +672,7 @@ export interface ToggleProps {
 }
 export type CurrencyOption = {
     value: string;
-    icon?: any;
+    icon?: Component;
 };
 export type NumberInputProps = {
     value?: number;
@@ -680,7 +685,7 @@ export type NumberInputProps = {
     units?: CurrencyOption[];
     errors?: string[];
     disabled?: boolean;
-    dropdownicon?: any;
+    dropdownicon?: Component;
     onunitchange?: (prevUnit: string, newUnit: string) => void;
 };
 export interface DateRangeProps {
@@ -906,3 +911,4 @@ export interface FileBrowserProps {
         navToFileFolder: (fileKey: string) => void;
     }) => any;
 }
+export * from './user-management/index.js';

package/dist/index.js

@@ -33,6 +33,7 @@ export { default as MetricCard } from './layout/card/MetricCard.svelte';
 export { default as RankedCard } from './layout/card/RankedCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';
+export { default as Pagination } from './elements/pagination/Pagination.svelte';
 export { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
@@ -90,3 +91,5 @@ export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';
 // AI Adapters
 export * from './adapters/ai/index.js';
+// User Management
+export * from './user-management/index.js';

package/dist/layout/activity-list/ActivityList.svelte

@@ -43,25 +43,24 @@
 			<h2 class={titleClasses}>{title}</h2>
 		</div>
 	{/if}
-	
+
 	<div class={contentClasses}>
 		{#if children}
 			{@render children()}
 		{:else}
-			{#each items as activityItem, index}
+			{#each items as activityItem, index (activityItem.title + index)}
 				<div class={cn(item(), itemClass)} role="button" tabindex="0">
 					<div class={itemContent()}>
 						<div class={itemMain()}>
 							<div class={itemHeader()}>
-								<button
-									class={itemTitle()}
-									onclick={() => onItemClick?.(activityItem, index)}
-								>
+								<button class={itemTitle()} onclick={() => onItemClick?.(activityItem, index)}>
 									{activityItem.title}
 								</button>
 								{#if activityItem.badges}
-									{#each activityItem.badges as badge}
-										<span class="ml-3 inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}">
+									{#each activityItem.badges as badge (badge.text)}
+										<span
+											class="ml-3 inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}"
+										>
 											{badge.text}
 										</span>
 									{/each}
@@ -75,9 +74,9 @@
 						</div>
 						{#if activityItem.actions}
 							<div class={itemActions()}>
-								{#each activityItem.actions as action}
+								{#each activityItem.actions as action (action.label)}
 									<button
-										class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+										class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
 										onclick={() => action.onClick?.()}
 									>
 										{action.label}
@@ -91,4 +90,3 @@
 		{/if}
 	</div>
 </div>
-

package/dist/layout/card/CardTestWrapper.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Card from './Card.svelte';
+
+	let {
+		title,
+		content
+	}: {
+		title?: string;
+		content: string;
+	} = $props();
+</script>
+
+<Card {title}>
+	{content}
+</Card>

package/dist/layout/card/CardTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    title?: string;
+    content: string;
+};
+declare const CardTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardTestWrapper = ReturnType<typeof CardTestWrapper>;
+export default CardTestWrapper;

package/dist/layout/card/RankedCard.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <div class={containerClass}>
-	{#each items as item}
+	{#each items as item (item.rank)}
 		<div class={card()}>
 			<!-- Header with Rank and Title -->
 			<div class={header()}>
@@ -33,7 +33,7 @@
 
 			<!-- Metrics -->
 			<div class={metricsContainer()}>
-				{#each item.metrics as metric}
+				{#each item.metrics as metric (metric.label)}
 					<div class={metricRow()}>
 						<span class={metricLabel()}>{metric.label}:</span>
 						<span class={cn(metricValue(), metric.color || '')}>{metric.value}</span>
@@ -53,4 +53,3 @@
 		</div>
 	{/each}
 </div>
-

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

@@ -1,6 +1,7 @@
 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;
@@ -10,21 +11,21 @@ export type NavbarLinkItem = {
 };
 export declare const navbar: import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -33,17 +34,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        sm: {
+        [Size.SM]: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        base: {
+        [Size.BASE]: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        lg: {
+        [Size.LG]: {
             container: string;
             link: string;
             mobileLink: string;
@@ -72,21 +73,21 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     divider: string;
 }, undefined, {
     color: {
-        default: {
+        [Color.DEFAULT]: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -95,17 +96,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        sm: {
+        [Size.SM]: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        base: {
+        [Size.BASE]: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        lg: {
+        [Size.LG]: {
             container: string;
             link: string;
             mobileLink: string;
@@ -134,21 +135,21 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     divider: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -157,17 +158,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        sm: {
+        [Size.SM]: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        base: {
+        [Size.BASE]: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        lg: {
+        [Size.LG]: {
             container: string;
             link: string;
             mobileLink: string;

package/dist/layout/navbar/navbar.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Size, Color } from '../../variants.js';
 export const navbar = tv({
     slots: {
         base: 'sticky top-0 z-40 w-full backdrop-blur',
@@ -21,21 +22,21 @@ export const navbar = tv({
     },
     variants: {
         color: {
-            default: {
+            [Color.DEFAULT]: {
                 base: 'bg-white/80 border-b border-default-200',
                 mobileMenuButton: 'text-default-500 hover:bg-default-100 focus:outline-none',
                 link: 'text-default-500 hover:text-default-900 border-transparent hover:border-default-300',
                 mobileLink: 'text-default-600 hover:bg-default-50 border-transparent',
                 selectItem: 'text-default-700 hover:bg-default-100'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 base: 'bg-primary-50/80 border-b border-primary-200',
                 mobileMenuButton: 'text-primary-500 hover:bg-primary-100 focus:outline-none',
                 link: 'text-primary-500 hover:text-primary-900 border-transparent hover:border-primary-300',
                 mobileLink: 'text-primary-600 hover:bg-primary-50 border-transparent',
                 selectItem: 'text-primary-700 hover:bg-primary-100'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 base: 'bg-secondary-50/80 border-b border-secondary-200',
                 mobileMenuButton: 'text-secondary-500 hover:bg-secondary-100 focus:outline-none',
                 link: 'text-secondary-500 hover:text-secondary-900 border-transparent hover:border-secondary-300',
@@ -44,17 +45,17 @@ export const navbar = tv({
             }
         },
         size: {
-            sm: {
+            [Size.SM]: {
                 container: 'h-12',
                 link: 'text-xs',
                 mobileLink: 'text-xs'
             },
-            base: {
+            [Size.BASE]: {
                 container: 'h-16',
                 link: 'text-sm',
                 mobileLink: 'text-sm'
             },
-            lg: {
+            [Size.LG]: {
                 container: 'h-20',
                 link: 'text-base',
                 mobileLink: 'text-base'

package/dist/layout/sidebar/NavGroup.svelte

@@ -14,6 +14,7 @@
 		isActive = !isActive;
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	function resetIsActive() {
 		isActive = false;
 	}

package/dist/layout/table/Cells.svelte

@@ -45,7 +45,7 @@
 
 {#snippet DateCell(row: DataRow, key: KeyType)}
 	{#if row[key] !== undefined && row[key] !== null}
-		{new Date(row[key]).toLocaleDateString('en-US')}
+		{new Date(row[key] as string | number | Date).toLocaleDateString('en-US')}
 	{:else}
 		<span class="text-default-300">—</span>
 	{/if}
@@ -53,7 +53,7 @@
 
 {#snippet Currency(row: DataRow, key: KeyType)}
 	{#if row[key] !== undefined && row[key] !== null}
-		{formatCurrency(row[key])}
+		{formatCurrency(row[key] as number)}
 	{:else}
 		<span class="text-default-300">—</span>
 	{/if}
@@ -61,7 +61,7 @@
 
 {#snippet Percentage(row: DataRow, key: KeyType)}
 	{#if row[key] !== undefined && row[key] !== null}
-		{formatPercentage(row[key])}
+		{formatPercentage(row[key] as number)}
 	{:else}
 		<span class="text-default-300">—</span>
 	{/if}
@@ -69,7 +69,7 @@
 
 {#snippet PhoneNumber(row: DataRow, key: KeyType)}
 	{#if row[key] !== undefined && row[key] !== null}
-		{formatPhoneNumber(row[key])}
+		{formatPhoneNumber(row[key] as string | number | null | undefined)}
 	{:else}
 		<span class="text-default-300">—</span>
 	{/if}
@@ -98,7 +98,7 @@
 
 {#snippet Time(row: DataRow, key: KeyType)}
 	{#if row[key] !== undefined && row[key] !== null}
-		{formatTime(row[key])}
+		{formatTime(row[key] as string | number | Date)}
 	{:else}
 		<span class="text-default-300">—</span>
 	{/if}