@makolabs/ripple 0.0.1-dev.5 → 0.0.1-dev.50

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.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { table, type TableProps, type SortDirection, type SortState } from './table.js';
+	import { table } from './table.js';
+	import type { TableProps, SortDirection, SortState } from '../../index.js';
 
 	let {
 		data = [],
 		columns = [],
-		color = 'default',
-		size = 'base',
 		bordered = true,
 		striped = false,
 		pageSize = 10,
@@ -25,7 +24,8 @@
 		tdclass: tdClass = '',
 		footerclass: footerClass = '',
 		rowclass = () => '',
-		loading = false
+		loading = false,
+		expandedContent
 	}: TableProps<any> = $props();
 
 	let sortColumn = $state('');
@@ -36,38 +36,36 @@
 	const pagination = $derived(pageSize > 0 && data.length > pageSize);
 
 	const {
-		base,
-		wrapper,
+		base: baseClass,
+		wrapper: wrapperBaseClass,
 		table: tableBaseClass,
-		thead,
-		tbody,
-		tr,
-		th,
-		td,
-		footer,
-		pagination: paginationClass,
-		emptyState,
-		sortButton,
-		sortIcon
+		thead: theadBaseClass,
+		tbody: tbodyBaseClass,
+		tr: trBaseClass,
+		th: thBaseClass,
+		td: tdBaseClass,
+		footer: footerBaseClass,
+		pagination: paginationBaseClass,
+		emptyState: emptyStateBaseClass,
+		sortButton: sortButtonBaseClass,
+		sortIcon: sortIconBaseClass
 	} = $derived(
 		table({
-			size,
-			color,
 			bordered,
 			striped
 		})
 	);
 
-	const baseClasses = $derived(cn(base(), classname));
-	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
+	const baseClasses = $derived(cn(baseClass(), classname));
+	const wrapperClasses = $derived(cn(wrapperBaseClass(), wrapperClass));
 	const tableClasses = $derived(cn(tableBaseClass(), tableClass));
-	const theadClasses = $derived(cn(thead(), theadClass));
-	const tbodyClasses = $derived(cn(tbody(), tbodyClass));
-	const trClasses = $derived(cn(tr(), trClass));
-	const thClasses = $derived(cn(th(), thClass));
-	const tdClasses = $derived(cn(td(), tdClass));
-	const footerClasses = $derived(cn(footer(), footerClass));
-	const emptyStateClasses = $derived(emptyState());
+	const theadClasses = $derived(cn(theadBaseClass(), theadClass));
+	const tbodyClasses = $derived(cn(tbodyBaseClass(), tbodyClass));
+	const trClasses = $derived(cn(trBaseClass(), trClass));
+	const thClasses = $derived(cn(thBaseClass(), thClass));
+	const tdClasses = $derived(cn(tdBaseClass(), tdClass));
+	const footerClasses = $derived(cn(footerBaseClass(), footerClass));
+	const emptyStateClasses = $derived(emptyStateBaseClass());
 
 	// Handle pagination
 	const totalPages = $derived(Math.ceil(data.length / pageSize));
@@ -175,12 +173,12 @@
 							{#if column.sortable}
 								<button
 									type="button"
-									class={sortButton()}
+									class={sortButtonBaseClass()}
 									onclick={() => toggleSort(column.sortKey || column.key)}
 									aria-label={`Sort by ${column.header}`}
 								>
 									{column.header}
-									<span class={sortIcon()}>
+									<span class={sortIconBaseClass()}>
 										{#if sortColumn === (column.sortKey || column.key)}
 											{#if sortDirection === 'asc'}
 												<svg
@@ -315,6 +313,13 @@
 								</td>
 							{/each}
 						</tr>
+						{#if expandedContent}
+							<tr class="expandedContent-row">
+								<td colspan={selectable ? columns.length + 1 : columns.length} class="border-0 p-0">
+									{@render expandedContent(row)}
+								</td>
+							</tr>
+						{/if}
 					{/each}
 				{/if}
 			</tbody>
@@ -323,7 +328,7 @@
 
 	{#if pagination && totalPages > 1}
 		<div class={footerClasses}>
-			<div class={paginationClass}>
+			<div class={paginationBaseClass()}>
 				<div class="flex items-center gap-2">
 					<span class="text-default-500 text-sm">
 						Showing {Math.min((currentPage - 1) * pageSize + 1, data.length)}

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

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

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

@@ -1,24 +1,3 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
-import type { VariantColors, VariantSizes } from '../../types/variants.js';
-export type DataRow = Record<string, any>;
-export type KeyType = keyof DataRow;
-export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
-export type TableColumn<T extends DataRow = any> = {
-    key: KeyType;
-    header: string;
-    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
-    sortable?: boolean;
-    sortKey?: string;
-    align?: 'left' | 'center' | 'right';
-    width?: string;
-    class?: ClassValue;
-};
-export type SortDirection = 'asc' | 'desc' | null;
-export type SortState = {
-    column: string | null;
-    direction: SortDirection;
-};
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -275,29 +254,3 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     sortButton: string;
     sortIcon: string;
 }, undefined, unknown, unknown, undefined>>;
-export type TableProps<T extends DataRow = any> = {
-    data: T[];
-    columns: TableColumn<T>[];
-    color?: VariantColors;
-    size?: VariantSizes;
-    bordered?: boolean;
-    striped?: boolean;
-    emptyStateText?: string;
-    pageSize?: number;
-    selectable?: boolean;
-    selected?: T[];
-    class?: ClassValue;
-    wrapperclass?: ClassValue;
-    tableclass?: ClassValue;
-    theadclass?: ClassValue;
-    tbodyclass?: ClassValue;
-    trclass?: ClassValue;
-    thclass?: ClassValue;
-    tdclass?: ClassValue;
-    footerclass?: ClassValue;
-    onrowclick?: (row: T, index: number) => void;
-    onsort?: (sortState: SortState) => void;
-    onselect?: (selected: T[]) => void;
-    rowclass?: (row: T, index: number) => ClassValue;
-    loading?: boolean;
-};

package/dist/layout/table/table.js

@@ -1,12 +1,4 @@
 import { tv } from 'tailwind-variants';
-// Prebuild Cell rendering options
-// Snippet 1 - Date
-// Snippet 2 - Currency
-// Snippet 3 - Percentage
-// Snippet 4 - Phone Number
-// Snippet 5 - Email
-// Snippet 6 - Status
-// Snippet 7 - Time
 export const table = tv({
     slots: {
         base: 'w-full',

package/dist/layout/tabs/TabGroup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import Tab from './Tab.svelte';
-	import { tabs, type TabsProps } from './tabs.js';
+	import { tabs, type TabsGroupProps } from './tabs.js';
 	import { setContext } from 'svelte';
 
 	let {
@@ -14,7 +14,7 @@
 		panelClass = '',
 		onchange = () => {},
 		children
-	}: TabsProps = $props();
+	}: TabsGroupProps = $props();
 
 	const { base, list, panel } = $derived(
 		tabs({

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

@@ -1,4 +1,4 @@
-import { type TabsProps } from './tabs.js';
-declare const TabGroup: import("svelte").Component<TabsProps, {}, "selected">;
+import { type TabsGroupProps } from './tabs.js';
+declare const TabGroup: import("svelte").Component<TabsGroupProps, {}, "selected">;
 type TabGroup = ReturnType<typeof TabGroup>;
 export default TabGroup;

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;
@@ -17,7 +17,7 @@ export type TabProps = {
     size?: VariantSizes;
     onclick?: (event: Event) => void;
 };
-export type TabsProps = {
+export type TabsGroupProps = {
     tabs: TabItem[];
     selected?: string;
     color?: VariantColors;

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/modal/modal.js

@@ -5,10 +5,10 @@ export const modal = tv({
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
         contentWrapper: 'absolute transform overflow-hidden transition-all px-2',
         content: 'bg-white overflow-hidden rounded-lg',
-        header: 'px-4 py-3 flex items-center justify-between border-b border-gray-200',
+        header: 'px-4 py-3 flex items-center justify-between border-b border-default-200',
         body: 'px-3 py-2 max-h-[70dvh] overflow-y-auto',
         title: 'text-default-900 leading-6 text-base font-semibold',
-        closeButton: 'text-gray-400 hover:text-gray-500 rounded-md cursor-pointer'
+        closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
     },
     variants: {
         open: {
@@ -65,7 +65,7 @@ export const modal = tv({
                 content: 'border-0'
             },
             default: {
-                content: 'border border-gray-200'
+                content: 'border border-default-200'
             },
             colored: {
                 content: 'border'

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/utils/Portal.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { onMount, onDestroy, type Snippet } from 'svelte';
+
+	/**
+	 * Target element to mount the portal content to
+	 * Defaults to document.body
+	 */
+	let { target, children }: { target?: HTMLElement | null; children: Snippet } = $props();
+
+	let ref: HTMLElement;
+	let portal: HTMLElement;
+	let animationFrameId: number;
+	let isPositioned = $state(false);
+
+	// Position update without animation - for immediate positioning
+	function updatePosition() {
+		if (!ref || !target) return;
+
+		const { top, left, width, height } = target.getBoundingClientRect();
+		const scrollY = window.scrollY || document.documentElement.scrollTop;
+		const scrollX = window.scrollX || document.documentElement.scrollLeft;
+
+		// Set instant positioning without transitions for first render
+		if (!isPositioned) {
+			ref.style.position = 'absolute';
+			ref.style.width = `${width}px`;
+			ref.style.zIndex = '10000'; // Ensure the highest z-index
+			ref.style.top = `${height}px`; // Position below the target
+			ref.style.left = '0px';
+			ref.style.transform = `translate(${left + scrollX}px, ${top + scrollY}px)`;
+			ref.style.visibility = 'hidden'; // Keep hidden until fully positioned
+
+			// Wait for next frame to ensure positioning is applied before showing
+			animationFrameId = requestAnimationFrame(() => {
+				ref.style.opacity = '1';
+				ref.style.visibility = 'visible';
+				isPositioned = true;
+
+				// Now add transition for subsequent updates
+				ref.style.transition = 'transform 0.1s ease-out';
+			});
+		} else {
+			// For subsequent updates, smoothly transition
+			ref.style.transform = `translate(${left + scrollX}px, ${top + scrollY}px)`;
+		}
+	}
+
+	// Handle scroll and resize with animation frames for smooth updates
+	function handlePositionUpdate() {
+		if (animationFrameId) {
+			cancelAnimationFrame(animationFrameId);
+		}
+
+		animationFrameId = requestAnimationFrame(updatePosition);
+	}
+
+	onMount(() => {
+		// Create portal container
+		portal = document.createElement('div');
+		portal.className = 'ripple-portal';
+		portal.style.position = 'fixed';
+		portal.style.zIndex = '10000'; // Ensure highest z-index
+		portal.style.top = '0';
+		portal.style.left = '0';
+		portal.style.width = '100%';
+		portal.style.pointerEvents = 'none'; // Allow clicking through the container but not its children
+
+		// Default to document.body if no target is provided
+		const targetElement = document.body; // Always append to body for best visibility
+		targetElement.appendChild(portal);
+
+		// Move the content to the portal
+		portal.appendChild(ref);
+
+		// Allow pointer events on the content
+		ref.style.pointerEvents = 'auto';
+		
+		// Initially hide the content
+		ref.style.opacity = '0';
+
+		// Position immediately - critical for first render
+		updatePosition();
+
+		// Add event listeners for position updates
+		window.addEventListener('resize', handlePositionUpdate);
+		window.addEventListener('scroll', handlePositionUpdate, true);
+	});
+
+	onDestroy(() => {
+		// Clean up on component destruction
+		if (portal && portal.parentNode) {
+			portal.parentNode.removeChild(portal);
+		}
+
+		// Clean up event listeners
+		window.removeEventListener('resize', handlePositionUpdate);
+		window.removeEventListener('scroll', handlePositionUpdate, true);
+
+		// Cancel any pending animation frame
+		if (animationFrameId) {
+			cancelAnimationFrame(animationFrameId);
+		}
+	});
+</script>
+
+<div class="portal-content" bind:this={ref}>
+	{@render children()}
+</div>

package/dist/utils/Portal.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    target?: HTMLElement | null;
+    children: Snippet;
+};
+declare const Portal: import("svelte").Component<$$ComponentProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/variants.d.ts

@@ -0,0 +1,30 @@
+import type { ChartColors, 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 ChartColor: {
+    readonly HEALTH: "health";
+    readonly PROPERTY: "property";
+    readonly AUTO: "auto";
+    readonly LIFE: "life";
+    readonly OTHER: "other";
+    readonly DEFAULT: "default";
+};
+export declare const defaultChartColors: ChartColors;
+export declare const colors: VariantColors[];
+export declare const sizes: VariantSizes[];
+export declare const chartColors: ("default" | "health" | "property" | "auto" | "life" | "other")[];

package/dist/variants.js

@@ -0,0 +1,36 @@
+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 ChartColor = {
+    HEALTH: 'health',
+    PROPERTY: 'property',
+    AUTO: 'auto',
+    LIFE: 'life',
+    OTHER: 'other',
+    DEFAULT: 'default'
+};
+export const defaultChartColors = {
+    [ChartColor.HEALTH]: '#1F69FF',
+    [ChartColor.PROPERTY]: '#2D9D78',
+    [ChartColor.AUTO]: '#E8A317',
+    [ChartColor.LIFE]: '#E34974',
+    [ChartColor.OTHER]: '#7B3FE4',
+    [ChartColor.DEFAULT]: '#6B7280'
+};
+export const colors = Object.values(Color);
+export const sizes = Object.values(Size);
+export const chartColors = Object.values(ChartColor);

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.5",
+	"version": "0.0.1-dev.50",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/makolabsai/mako-ui-components.git"
+		"url": "https://github.com/makolabsai/ripple-ui.git"
 	},
 	"scripts": {
 		"dev": "vite dev",
@@ -63,11 +63,13 @@
 		"publint": "^0.3.2",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"sveltekit-superforms": "^2.24.0",
 		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^6.0.0",
-		"vitest": "^3.0.0"
+		"vitest": "^3.0.0",
+		"zod": "^3.24.2"
 	},
 	"keywords": [
 		"svelte",
@@ -95,7 +97,9 @@
 		"toast"
 	],
 	"dependencies": {
+		"dayjs": "^1.11.13",
 		"echarts": "^5.6.0",
+		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^3.0.2",
 		"tailwind-variants": "^1.0.0"
 	}

package/dist/button/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './Button.svelte';

package/dist/button/index.js

@@ -1 +0,0 @@
-export { default as Button } from './Button.svelte';

package/dist/drawer/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Drawer } from './Drawer.svelte';
-export type { DrawerProps } from './drawer.js';

package/dist/drawer/index.js

@@ -1 +0,0 @@
-export { default as Drawer } from './Drawer.svelte';

package/dist/elements/badge/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Badge } from './Badge.svelte';
-export { badge, type BadgeProps } from './badge.js';

package/dist/elements/badge/index.js

@@ -1,2 +0,0 @@
-export { default as Badge } from './Badge.svelte';
-export { badge } from './badge.js';

package/dist/elements/dropdown/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Select } from './Select.svelte';
-export { default as Dropdown } from './Dropdown.svelte';
-export type { SelectItem, SelectProps } from './select.js';

package/dist/elements/dropdown/index.js

@@ -1,2 +0,0 @@
-export { default as Select } from './Select.svelte';
-export { default as Dropdown } from './Dropdown.svelte';

package/dist/header/index.d.ts

@@ -1,4 +0,0 @@
-export { default as PageHeader } from './PageHeader.svelte';
-export type { PageHeaderProps } from './pageheaders.js';
-export { default as Breadcrumbs } from './Breadcrumbs.svelte';
-export type { BreadcrumbsProps } from './breadcrumbs.js';

package/dist/header/index.js

@@ -1,2 +0,0 @@
-export { default as PageHeader } from './PageHeader.svelte';
-export { default as Breadcrumbs } from './Breadcrumbs.svelte';

package/dist/header/pageheaders.d.ts

@@ -1,10 +0,0 @@
-import { type ClassValue } from 'tailwind-variants';
-import type { BreadcrumbItem } from './breadcrumbs.js';
-import type { Snippet } from 'svelte';
-export type PageHeaderProps = {
-    title: string;
-    breadcrumbs?: BreadcrumbItem[];
-    children?: Snippet;
-    class?: ClassValue;
-    titleclass?: ClassValue;
-};