@makolabs/ripple 0.0.1-dev.6 → 0.0.1-dev.60

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

@@ -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.6",
+	"version": "0.0.1-dev.60",
 	"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';