@makolabs/ripple 0.0.1-dev.9 → 0.0.3

package/dist/layout/tabs/tabs.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color, Size } from '../../index.js';
 export const tabs = tv({
     slots: {
         base: 'w-full',
@@ -8,34 +9,41 @@ export const tabs = tv({
     },
     variants: {
         color: {
-            primary: {},
-            secondary: {},
-            success: {},
-            warning: {},
-            danger: {},
-            info: {},
-            default: {}
+            [Color.PRIMARY]: {},
+            [Color.SECONDARY]: {},
+            [Color.SUCCESS]: {},
+            [Color.WARNING]: {},
+            [Color.DANGER]: {},
+            [Color.INFO]: {},
+            [Color.DEFAULT]: {}
         },
         size: {
-            xs: {
+            [Size.XS]: {
                 trigger: 'px-2 py-1 text-xs'
             },
-            sm: {
+            [Size.SM]: {
                 trigger: 'px-2 py-1 text-xs'
             },
-            base: {
+            [Size.BASE]: {
                 trigger: 'px-3 py-2 text-sm'
             },
-            lg: {
+            [Size.LG]: {
                 trigger: 'px-4 py-2.5 text-base'
             },
-            xl: {
+            [Size.XL]: {
                 trigger: 'px-5 py-3 text-lg'
             },
-            '2xl': {
+            [Size.XXL]: {
                 trigger: 'px-6 py-4 text-xl'
             }
         },
+        variant: {
+            line: {},
+            pill: {
+                list: 'flex border-none gap-2 p-1',
+                trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
+            }
+        },
         selected: {
             true: {},
             false: {}
@@ -44,14 +52,16 @@ export const tabs = tv({
     compoundVariants: [
         // LINE VARIANT - PRIMARY
         {
-            color: 'primary',
+            variant: 'line',
+            color: Color.PRIMARY,
             selected: true,
             class: {
                 trigger: 'text-primary-600 border-b-2 border-primary-500'
             }
         },
         {
-            color: 'primary',
+            variant: 'line',
+            color: Color.PRIMARY,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-primary-500'
@@ -59,14 +69,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - SECONDARY
         {
-            color: 'secondary',
+            variant: 'line',
+            color: Color.SECONDARY,
             selected: true,
             class: {
                 trigger: 'text-secondary-600 border-b-2 border-secondary-500'
             }
         },
         {
-            color: 'secondary',
+            variant: 'line',
+            color: Color.SECONDARY,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-secondary-500'
@@ -74,14 +86,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - SUCCESS
         {
-            color: 'success',
+            variant: 'line',
+            color: Color.SUCCESS,
             selected: true,
             class: {
                 trigger: 'text-success-600 border-b-2 border-success-500'
             }
         },
         {
-            color: 'success',
+            variant: 'line',
+            color: Color.SUCCESS,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-success-500'
@@ -89,14 +103,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - WARNING
         {
-            color: 'warning',
+            variant: 'line',
+            color: Color.WARNING,
             selected: true,
             class: {
                 trigger: 'text-warning-600 border-b-2 border-warning-500'
             }
         },
         {
-            color: 'warning',
+            variant: 'line',
+            color: Color.WARNING,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-warning-500'
@@ -104,14 +120,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - DANGER
         {
-            color: 'danger',
+            variant: 'line',
+            color: Color.DANGER,
             selected: true,
             class: {
                 trigger: 'text-danger-600 border-b-2 border-danger-500'
             }
         },
         {
-            color: 'danger',
+            variant: 'line',
+            color: Color.DANGER,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-danger-500'
@@ -119,14 +137,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - INFO
         {
-            color: 'info',
+            variant: 'line',
+            color: Color.INFO,
             selected: true,
             class: {
                 trigger: 'text-info-600 border-b-2 border-info-500'
             }
         },
         {
-            color: 'info',
+            variant: 'line',
+            color: Color.INFO,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-info-500'
@@ -134,23 +154,145 @@ export const tabs = tv({
         },
         // LINE VARIANT - DEFAULT
         {
-            color: 'default',
+            variant: 'line',
+            color: Color.DEFAULT,
             selected: true,
             class: {
                 trigger: 'text-default-600 border-b-2 border-default-500'
             }
         },
         {
-            color: 'default',
+            variant: 'line',
+            color: Color.DEFAULT,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-default-700'
             }
+        },
+        // PILL VARIANT - PRIMARY
+        {
+            variant: 'pill',
+            color: Color.PRIMARY,
+            selected: true,
+            class: {
+                trigger: 'bg-primary-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.PRIMARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - SECONDARY
+        {
+            variant: 'pill',
+            color: Color.SECONDARY,
+            selected: true,
+            class: {
+                trigger: 'bg-secondary-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.SECONDARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - SUCCESS
+        {
+            variant: 'pill',
+            color: Color.SUCCESS,
+            selected: true,
+            class: {
+                trigger: 'bg-success-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.SUCCESS,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - WARNING
+        {
+            variant: 'pill',
+            color: Color.WARNING,
+            selected: true,
+            class: {
+                trigger: 'bg-warning-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.WARNING,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - DANGER
+        {
+            variant: 'pill',
+            color: Color.DANGER,
+            selected: true,
+            class: {
+                trigger: 'bg-danger-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.DANGER,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - INFO
+        {
+            variant: 'pill',
+            color: Color.INFO,
+            selected: true,
+            class: {
+                trigger: 'bg-info-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.INFO,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - DEFAULT
+        {
+            variant: 'pill',
+            color: Color.DEFAULT,
+            selected: true,
+            class: {
+                trigger: 'bg-default-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.DEFAULT,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
         }
     ],
     defaultVariants: {
-        color: 'primary',
+        color: Color.PRIMARY,
         size: 'base',
+        variant: 'line',
         selected: false
     }
 });

package/dist/modal/Modal.svelte

@@ -13,7 +13,6 @@
 		title,
 		description,
 		position = 'center',
-		size = 'lg',
 		children,
 		header,
 		custom,
@@ -39,8 +38,7 @@
 	} = $derived(
 		modal({
 			open,
-			position,
-			size
+			position
 		})
 	);
 
@@ -62,6 +60,8 @@
 	function handleEscapeKey(e: KeyboardEvent) {
 		if (e.key === 'Escape' && open) {
 			onClose();
+			e.preventDefault();
+			e.stopPropagation();
 		}
 	}
 

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/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

@@ -1,4 +1,4 @@
-import type { VariantColors, VariantSizes } from './index.js';
+import type { ChartColors, VariantColors, VariantSizes } from './index.js';
 export declare const Color: {
     DEFAULT: string;
     PRIMARY: string;
@@ -16,5 +16,15 @@ export declare const Size: {
     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

@@ -15,5 +15,22 @@ export const Size = {
     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.9",
+	"version": "0.0.3",
 	"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",
@@ -18,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",

package/dist/header/pageheaders.d.ts

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

package/dist/header/pageheaders.js

@@ -1 +0,0 @@
-import {} from 'tailwind-variants';