@makolabs/ripple 0.0.1 → 0.0.3

package/dist/modal/modal.js

@@ -0,0 +1,81 @@
+import { tv } from 'tailwind-variants';
+export const modal = tv({
+    slots: {
+        base: 'fixed inset-0 z-50 flex items-center justify-center overflow-y-auto',
+        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-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-default-400 hover:text-default-500 rounded-md cursor-pointer'
+    },
+    variants: {
+        open: {
+            true: {
+                base: 'visible',
+                backdrop: 'visible opacity-100',
+                contentWrapper: 'visible scale-100 opacity-100'
+            },
+            false: {
+                base: 'invisible',
+                backdrop: 'invisible opacity-0',
+                contentWrapper: 'invisible scale-95 opacity-0'
+            }
+        },
+        position: {
+            center: {
+                contentWrapper: 'mx-auto'
+            },
+            top: {
+                contentWrapper: 'mx-auto top-7'
+            },
+            bottom: {
+                contentWrapper: 'mx-auto bottom-7'
+            },
+            left: {
+                contentWrapper: 'left-7'
+            },
+            right: {
+                contentWrapper: 'right-7'
+            }
+        },
+        size: {
+            xs: {
+                contentWrapper: 'w-full max-w-xs'
+            },
+            sm: {
+                contentWrapper: 'w-full max-w-sm'
+            },
+            base: {
+                contentWrapper: 'w-full max-w-md'
+            },
+            lg: {
+                contentWrapper: 'w-full max-w-lg'
+            },
+            xl: {
+                contentWrapper: 'w-full max-w-xl'
+            },
+            '2xl': {
+                contentWrapper: 'w-full max-w-2xl'
+            }
+        },
+        border: {
+            none: {
+                content: 'border-0'
+            },
+            default: {
+                content: 'border border-default-200'
+            },
+            colored: {
+                content: 'border'
+            }
+        }
+    },
+    defaultVariants: {
+        open: false,
+        position: 'center',
+        size: 'base',
+        color: 'default'
+    }
+});

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

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

package/dist/types/variants.js

@@ -0,0 +1 @@
+"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/utils/dateUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Format a date to a specific format
+ * @param date - Date to format
+ * @param format - Format string (default: 'YYYY-MM-DD')
+ * @returns Formatted date string
+ */
+export declare function formatDate(date: Date | string | number, formatStr?: string): string;

package/dist/utils/dateUtils.js

@@ -0,0 +1,26 @@
+/**
+ * Format a date to a specific format
+ * @param date - Date to format
+ * @param format - Format string (default: 'YYYY-MM-DD')
+ * @returns Formatted date string
+ */
+export function formatDate(date, formatStr = 'DD.MM.YYYY HH:mm') {
+    const d = new Date(date);
+    if (isNaN(d.getTime())) {
+        return 'Invalid Date';
+    }
+    // Simple format implementation for common patterns
+    const day = d.getDate().toString().padStart(2, '0');
+    const month = (d.getMonth() + 1).toString().padStart(2, '0');
+    const year = d.getFullYear();
+    const hours = d.getHours().toString().padStart(2, '0');
+    const minutes = d.getMinutes().toString().padStart(2, '0');
+    const seconds = d.getSeconds().toString().padStart(2, '0');
+    return formatStr
+        .replace('DD', day)
+        .replace('MM', month)
+        .replace('YYYY', year.toString())
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds);
+}

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,6 +1,11 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1",
+	"version": "0.0.3",
+	"description": "Simple Svelte 5 powered component library ✨",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/makolabsai/ripple-ui.git"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -13,7 +18,8 @@
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright test"
+		"test:e2e": "playwright test",
+		"uplish": "git add . && git commit -m \"chore: prepare for publish\" && npm version patch && git push --follow-tags && npm publish"
 	},
 	"files": [
 		"dist",
@@ -43,9 +49,10 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/vite": "^4.0.0",
+		"@tailwindcss/vite": "^4.0.14",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
+		"@types/node": "^22.13.10",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
@@ -57,17 +64,43 @@
 		"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"
+		"svelte",
+		"ui",
+		"svelte5",
+		"modal",
+		"navigation",
+		"ripple",
+		"button",
+		"sidebar",
+		"card",
+		"select",
+		"tooltip",
+		"accordion",
+		"tabs",
+		"alert",
+		"badge",
+		"breadcrumb",
+		"carousel",
+		"collapse",
+		"list-group",
+		"pagination",
+		"progress",
+		"spinner",
+		"toast"
 	],
 	"dependencies": {
-		"mako-ui-components": "github:makolabsai/mako-ui-components",
+		"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/layout/Card.svelte

@@ -1,179 +0,0 @@
-<script lang="ts" module>
-	import { cn } from '../helper/cls';
-	import type { Snippet } from 'svelte';
-	import { tv, type ClassValue } from 'tailwind-variants';
-
-	const cardVariants = tv({
-		variants: {
-			size: {
-				'xs': 'p-2',
-				'sm': 'p-3',
-				'base': 'p-4',
-				'lg': 'p-5',
-				'xl': 'p-6',
-				'2xl': 'p-8'
-			},
-			color: {
-				'default': 'bg-default-50 dark:bg-default-800',
-				'primary': 'bg-primary-50 dark:bg-primary-900/20',
-				'secondary': 'bg-secondary-50 dark:bg-secondary-800/20',
-				'info': 'bg-info-50 dark:bg-info-900/20',
-				'success': 'bg-success-50 dark:bg-success-900/20',
-				'warning': 'bg-warning-50 dark:bg-warning-900/20',
-				'danger': 'bg-danger-50 dark:bg-danger-900/20'
-			},
-			border: {
-				'none': 'border-0',
-				'default': 'border border-gray-200 dark:border-gray-700',
-				'colored': 'border'
-			},
-			rounded: {
-				'none': 'rounded-none',
-				'sm': 'rounded',
-				'md': 'rounded-lg',
-				'lg': 'rounded-xl',
-				'full': 'rounded-3xl'
-			},
-			shadow: {
-				'none': 'shadow-none',
-				'sm': 'shadow-sm',
-				'md': 'shadow',
-				'lg': 'shadow-lg'
-			}
-		},
-		defaultVariants: {
-			size: 'base',
-			color: 'default',
-			border: 'default',
-			rounded: 'md',
-			shadow: 'sm'
-		}
-	});
-
-	const SIZE_TEXT_VARIANTS = {
-		'xs': 'text-xs',
-		'sm': 'text-sm',
-		'base': 'text-base',
-		'lg': 'text-lg',
-		'xl': 'text-xl',
-		'2xl': 'text-2xl'
-	};
-
-	const cardTitleVariants = tv({
-		variants: {
-			color: {
-				'default': 'text-default-900 dark:text-default-100',
-				'primary': 'text-primary-900 dark:text-primary-100',
-				'secondary': 'text-secondary-900 dark:text-secondary-100',
-				'info': 'text-info-900 dark:text-info-100',
-				'success': 'text-success-900 dark:text-success-100',
-				'warning': 'text-warning-900 dark:text-warning-100',
-				'danger': 'text-danger-900 dark:text-danger-100'
-			},
-			weight: {
-				'normal': 'font-normal',
-				'medium': 'font-medium',
-				'semibold': 'font-semibold',
-				'bold': 'font-bold'
-			},
-			size: SIZE_TEXT_VARIANTS
-		},
-		defaultVariants: {
-			color: 'default',
-			weight: 'semibold',
-			size: 'base'
-		}
-	});
-
-	const cardBodyVariants = tv({
-		variants: {
-			color: {
-				'default': 'text-default-700 dark:text-default-300',
-				'primary': 'text-primary-700 dark:text-primary-300',
-				'secondary': 'text-secondary-700 dark:text-secondary-300',
-				'info': 'text-info-700 dark:text-info-300',
-				'success': 'text-success-700 dark:text-success-300',
-				'warning': 'text-warning-700 dark:text-warning-300',
-				'danger': 'text-danger-700 dark:text-danger-300'
-			},
-			size: SIZE_TEXT_VARIANTS
-		},
-		defaultVariants: {
-			color: 'default',
-			size: 'base'
-		}
-	});
-
-
-	export type BaseCardProps = {
-		class?: ClassValue
-		containerClass?: ClassValue
-		size?: keyof typeof cardVariants.variants.size
-		color?: keyof typeof cardVariants.variants.color
-		border?: keyof typeof cardVariants.variants.border
-		rounded?: keyof typeof cardVariants.variants.rounded
-		shadow?: keyof typeof cardVariants.variants.shadow;
-		titleWeight?: keyof typeof cardTitleVariants.variants.weight
-	}
-
-	type CustomCardProps = {
-		custom: Snippet
-		children?: never
-		title?: never
-	}
-
-	type CardWithChildrenProps = {
-		children: Snippet
-		custom?: never
-		title?: string
-	}
-
-	export type CardProps = BaseCardProps & (CardWithChildrenProps | CustomCardProps);
-</script>
-
-<script lang="ts">
-	let {
-		children,
-		custom,
-		title,
-		size = 'base',
-		color = 'default',
-		border = 'default',
-		rounded = 'md',
-		shadow = 'sm',
-		class: className = '',
-		titleWeight = 'semibold'
-	}: CardProps = $props();
-
-	const cardClasses = $derived(
-		cn(
-			cardVariants({ size, color, border, rounded, shadow }),
-			className
-		)
-	);
-
-	const cardTitleClasses = $derived(
-		cn(
-			cardTitleVariants({ color: color, weight: titleWeight, size })
-		)
-	);
-
-	const cardBodyClasses = $derived(
-		cn(
-			cardBodyVariants({ color: color, size })
-		)
-	);
-</script>
-
-<div class={cardClasses}>
-	{#if children}
-		{#if title}
-			<h3 class={cardTitleClasses}>{title}</h3>
-		{/if}
-		<div class={cardBodyClasses}>
-			{@render children()}
-		</div>
-	{:else if custom}
-		{@render custom()}
-	{/if}
-</div>