@makolabs/ripple 1.11.0 → 1.13.0

package/dist/elements/empty-state/empty-state.d.ts

@@ -0,0 +1,100 @@
+export declare const emptyState: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        base: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    wrapper: string;
+    iconWrapper: string;
+    title: string;
+    description: string;
+    actionWrapper: string;
+}, undefined, {
+    size: {
+        sm: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        base: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    wrapper: string;
+    iconWrapper: string;
+    title: string;
+    description: string;
+    actionWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        base: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            wrapper: string;
+            iconWrapper: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    wrapper: string;
+    iconWrapper: string;
+    title: string;
+    description: string;
+    actionWrapper: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/empty-state/empty-state.js

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+import { Size } from '../../variants.js';
+export const emptyState = tv({
+    slots: {
+        wrapper: 'flex flex-col items-center justify-center text-center',
+        iconWrapper: 'text-default-400',
+        title: 'font-semibold text-default-800',
+        description: 'text-default-500 max-w-md',
+        actionWrapper: 'mt-2'
+    },
+    variants: {
+        size: {
+            [Size.SM]: {
+                wrapper: 'gap-2 p-6',
+                iconWrapper: 'h-8 w-8',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            [Size.BASE]: {
+                wrapper: 'gap-3 p-8',
+                iconWrapper: 'h-10 w-10',
+                title: 'text-base',
+                description: 'text-sm'
+            },
+            [Size.LG]: {
+                wrapper: 'gap-4 p-12',
+                iconWrapper: 'h-14 w-14',
+                title: 'text-lg',
+                description: 'text-base'
+            },
+            [Size.XL]: {
+                wrapper: 'gap-5 p-16',
+                iconWrapper: 'h-16 w-16',
+                title: 'text-xl',
+                description: 'text-base'
+            }
+        }
+    },
+    defaultVariants: {
+        size: Size.BASE
+    }
+});

package/dist/elements/pagination/Pagination.svelte

@@ -252,7 +252,7 @@
 	const defaultButtonClass =
 		'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium';
 	const defaultActiveButtonClass = 'bg-primary-100 text-primary-700';
-	const defaultInactiveButtonClass = 'text-default-700 hover:bg-default-100';
+	const defaultInactiveButtonClass = 'text-default-700 hover:bg-default-100 cursor-pointer';
 	const defaultDisabledButtonClass = 'text-default-300 cursor-not-allowed';
 	const defaultPageButtonClass =
 		'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium';

package/dist/elements/spinner/Spinner.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { spinner } from './spinner.js';
+	import { Color, Size } from '../../variants.js';
+	import type { SpinnerProps } from '../../index.js';
+
+	let {
+		size = Size.BASE,
+		color = Color.DEFAULT,
+		label,
+		class: className = '',
+		testId
+	}: SpinnerProps = $props();
+
+	const slots = $derived(spinner({ size, color }));
+</script>
+
+<span
+	class={cn(slots.wrapper(), className)}
+	role="status"
+	aria-live="polite"
+	data-testid={buildTestId('spinner', undefined, testId)}
+>
+	<span
+		class={cn(
+			'inline-block animate-spin rounded-full border-2 border-current border-t-transparent align-[-0.125em]',
+			slots.svg()
+		)}
+		data-spinner-ring=""
+		aria-hidden={label ? 'true' : undefined}
+	></span>
+	{#if label}
+		<span class={slots.label()}>{label}</span>
+	{:else}
+		<span class="sr-only">Loading</span>
+	{/if}
+</span>

package/dist/elements/spinner/Spinner.svelte.d.ts

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

package/dist/elements/spinner/spinner-types.d.ts

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export type SpinnerProps = {
+    size?: VariantSizes;
+    color?: VariantColors;
+    label?: string;
+    class?: ClassValue;
+    testId?: string;
+};

package/dist/elements/spinner/spinner-types.js

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

package/dist/elements/spinner/spinner.d.ts

@@ -0,0 +1,163 @@
+export declare const spinner: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            svg: string;
+            label: string;
+        };
+        sm: {
+            svg: string;
+            label: string;
+        };
+        base: {
+            svg: string;
+            label: string;
+        };
+        lg: {
+            svg: string;
+            label: string;
+        };
+        xl: {
+            svg: string;
+            label: string;
+        };
+        "2xl": {
+            svg: string;
+            label: string;
+        };
+    };
+    color: {
+        default: {
+            svg: string;
+        };
+        primary: {
+            svg: string;
+        };
+        secondary: {
+            svg: string;
+        };
+        info: {
+            svg: string;
+        };
+        success: {
+            svg: string;
+        };
+        warning: {
+            svg: string;
+        };
+        danger: {
+            svg: string;
+        };
+    };
+}, {
+    wrapper: string;
+    svg: string;
+    label: string;
+}, undefined, {
+    size: {
+        xs: {
+            svg: string;
+            label: string;
+        };
+        sm: {
+            svg: string;
+            label: string;
+        };
+        base: {
+            svg: string;
+            label: string;
+        };
+        lg: {
+            svg: string;
+            label: string;
+        };
+        xl: {
+            svg: string;
+            label: string;
+        };
+        "2xl": {
+            svg: string;
+            label: string;
+        };
+    };
+    color: {
+        default: {
+            svg: string;
+        };
+        primary: {
+            svg: string;
+        };
+        secondary: {
+            svg: string;
+        };
+        info: {
+            svg: string;
+        };
+        success: {
+            svg: string;
+        };
+        warning: {
+            svg: string;
+        };
+        danger: {
+            svg: string;
+        };
+    };
+}, {
+    wrapper: string;
+    svg: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            svg: string;
+            label: string;
+        };
+        sm: {
+            svg: string;
+            label: string;
+        };
+        base: {
+            svg: string;
+            label: string;
+        };
+        lg: {
+            svg: string;
+            label: string;
+        };
+        xl: {
+            svg: string;
+            label: string;
+        };
+        "2xl": {
+            svg: string;
+            label: string;
+        };
+    };
+    color: {
+        default: {
+            svg: string;
+        };
+        primary: {
+            svg: string;
+        };
+        secondary: {
+            svg: string;
+        };
+        info: {
+            svg: string;
+        };
+        success: {
+            svg: string;
+        };
+        warning: {
+            svg: string;
+        };
+        danger: {
+            svg: string;
+        };
+    };
+}, {
+    wrapper: string;
+    svg: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/spinner/spinner.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../../variants.js';
+export const spinner = tv({
+    slots: {
+        wrapper: 'inline-flex items-center gap-2',
+        svg: 'animate-spin',
+        label: 'text-default-600'
+    },
+    variants: {
+        size: {
+            [Size.XS]: { svg: 'h-3 w-3', label: 'text-xs' },
+            [Size.SM]: { svg: 'h-4 w-4', label: 'text-xs' },
+            [Size.BASE]: { svg: 'h-5 w-5', label: 'text-sm' },
+            [Size.LG]: { svg: 'h-6 w-6', label: 'text-base' },
+            [Size.XL]: { svg: 'h-8 w-8', label: 'text-lg' },
+            [Size.XXL]: { svg: 'h-12 w-12', label: 'text-xl' }
+        },
+        color: {
+            [Color.DEFAULT]: { svg: 'text-default-500' },
+            [Color.PRIMARY]: { svg: 'text-primary-600' },
+            [Color.SECONDARY]: { svg: 'text-secondary-600' },
+            [Color.INFO]: { svg: 'text-info-600' },
+            [Color.SUCCESS]: { svg: 'text-success-600' },
+            [Color.WARNING]: { svg: 'text-warning-600' },
+            [Color.DANGER]: { svg: 'text-danger-600' }
+        }
+    },
+    defaultVariants: {
+        size: Size.BASE,
+        color: Color.DEFAULT
+    }
+});

package/dist/elements/tooltip/Tooltip.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import type { TooltipProps } from '../../index.js';
+
+	let {
+		content,
+		placement = 'top',
+		delay = 100,
+		disabled = false,
+		class: className = '',
+		tooltipClass = '',
+		children,
+		testId
+	}: TooltipProps = $props();
+
+	let visible = $state(false);
+	let showTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function show() {
+		if (disabled) return;
+		clearTimeout(showTimer);
+		if (delay > 0) {
+			showTimer = setTimeout(() => {
+				visible = true;
+			}, delay);
+		} else {
+			visible = true;
+		}
+	}
+
+	function hide() {
+		clearTimeout(showTimer);
+		visible = false;
+	}
+
+	const placementClass = $derived(
+		{
+			top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+			bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+			left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+			right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+		}[placement]
+	);
+
+	const arrowClass = $derived(
+		{
+			top: 'top-full left-1/2 -translate-x-1/2 border-t-default-800 border-l-transparent border-r-transparent border-b-transparent',
+			bottom:
+				'bottom-full left-1/2 -translate-x-1/2 border-b-default-800 border-l-transparent border-r-transparent border-t-transparent',
+			left: 'left-full top-1/2 -translate-y-1/2 border-l-default-800 border-t-transparent border-b-transparent border-r-transparent',
+			right:
+				'right-full top-1/2 -translate-y-1/2 border-r-default-800 border-t-transparent border-b-transparent border-l-transparent'
+		}[placement]
+	);
+</script>
+
+<span
+	class={cn('relative inline-flex', className)}
+	data-testid={buildTestId('tooltip', undefined, testId)}
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocusin={show}
+	onfocusout={hide}
+	role="group"
+>
+	{@render children()}
+	{#if visible && !disabled}
+		<span
+			role="tooltip"
+			data-tooltip-visible="true"
+			class={cn(
+				'bg-default-800 pointer-events-none absolute z-50 rounded px-2 py-1 text-xs whitespace-nowrap text-white shadow-lg',
+				placementClass,
+				tooltipClass
+			)}
+		>
+			{content}
+			<span class={cn('absolute h-0 w-0 border-4', arrowClass)} aria-hidden="true"></span>
+		</span>
+	{/if}
+</span>

package/dist/elements/tooltip/Tooltip.svelte.d.ts

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

package/dist/elements/tooltip/TooltipTestWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Tooltip from './Tooltip.svelte';
+	import type { TooltipProps } from '../../index.js';
+
+	type Props = Omit<TooltipProps, 'children'> & {
+		triggerText?: string;
+	};
+
+	let { triggerText = 'trigger', ...rest }: Props = $props();
+</script>
+
+<Tooltip {...rest}>
+	<button type="button">{triggerText}</button>
+</Tooltip>

package/dist/elements/tooltip/TooltipTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipProps } from '../../index.js';
+type Props = Omit<TooltipProps, 'children'> & {
+    triggerText?: string;
+};
+declare const TooltipTestWrapper: import("svelte").Component<Props, {}, "">;
+type TooltipTestWrapper = ReturnType<typeof TooltipTestWrapper>;
+export default TooltipTestWrapper;

package/dist/elements/tooltip/tooltip-types.d.ts

@@ -0,0 +1,13 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipProps = {
+    content: string;
+    placement?: TooltipPlacement;
+    delay?: number;
+    disabled?: boolean;
+    class?: ClassValue;
+    tooltipClass?: ClassValue;
+    children: Snippet;
+    testId?: string;
+};

package/dist/elements/tooltip/tooltip-types.js

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

package/dist/index.d.ts

@@ -37,6 +37,11 @@ export { Market } from './forms/market/market.js';
 export type { MarketSelectorProps, MarketSelectorVariant } from './forms/market/market-selector-types.js';
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
 export type { ProgressSegment, ProgressProps } from './elements/progress/progress-types.js';
+export type { SpinnerProps } from './elements/spinner/spinner-types.js';
+export type { EmptyStateProps, EmptyStateSize } from './elements/empty-state/empty-state-types.js';
+export type { CollapsibleProps } from './elements/collapsible/collapsible-types.js';
+export type { TooltipProps, TooltipPlacement } from './elements/tooltip/tooltip-types.js';
+export type { ComboboxItem, ComboboxProps } from './elements/combobox/combobox-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
 export type { TimelineItem } from './elements/timeline/timeline-types.js';
 export type { FilterTab, FilterGroup, CompactFiltersProps } from './filters/filter-types.js';
@@ -48,6 +53,7 @@ export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
+export { default as ModalFooter } from './modal/ModalFooter.svelte';
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
 export { pipelineVariants } from './pipeline/pipeline.js';
 export type { PipelineStage, PipelineStageColor, PipelineStageEvent, PipelineStageClickEvent, PipelineStagePointerEvent, PipelineProps } from './pipeline/pipeline-types.js';
@@ -74,6 +80,13 @@ export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
 export { default as Progress } from './elements/progress/Progress.svelte';
+export { default as Spinner } from './elements/spinner/Spinner.svelte';
+export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
+export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
+export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
+export { default as Collapsible } from './elements/collapsible/Collapsible.svelte';
+export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
+export { default as Combobox } from './elements/combobox/Combobox.svelte';
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
 export { default as Timeline } from './elements/timeline/Timeline.svelte';
 export { default as Chart } from './charts/Chart.svelte';

package/dist/index.js

@@ -24,6 +24,7 @@ export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 // Modal
 export { default as Modal } from './modal/Modal.svelte';
+export { default as ModalFooter } from './modal/ModalFooter.svelte';
 // Pipeline
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
 export { pipelineVariants } from './pipeline/pipeline.js';
@@ -60,6 +61,18 @@ export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
 // Elements - Progress
 export { default as Progress } from './elements/progress/Progress.svelte';
+// Elements - Spinner
+export { default as Spinner } from './elements/spinner/Spinner.svelte';
+export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
+// Elements - EmptyState
+export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
+export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
+// Elements - Collapsible
+export { default as Collapsible } from './elements/collapsible/Collapsible.svelte';
+// Elements - Tooltip
+export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
+// Elements - Combobox
+export { default as Combobox } from './elements/combobox/Combobox.svelte';
 // Elements - Accordion
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
 // Elements - Timeline

package/dist/layout/card/MetricCard.svelte

@@ -11,21 +11,67 @@
 		details = [],
 		percent,
 		segments,
-		class: className = ''
+		class: className = '',
+		onclick,
+		action,
+		actionHover
 	}: MetricCardProps = $props();
 
+	const interactive = $derived(!!onclick);
+	const hasHoverSwap = $derived(interactive && !!actionHover);
+
 	const {
 		base,
 		title: titleSlot,
 		value: valueSlot,
 		detail: detailSlot,
-		progress: progressSlot
-	} = $derived(metricCard());
+		progress: progressSlot,
+		action: actionSlot
+	} = $derived(metricCard({ interactive }));
 
 	const baseClass = $derived(cn(base(), 'flex flex-col h-full', className));
+
+	function handleClick(event: MouseEvent) {
+		onclick?.(event);
+	}
 </script>
 
-<div class={baseClass}>
+{#snippet defaultArrow()}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
+		<path
+			fill-rule="evenodd"
+			d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v4.69a.75.75 0 001.5 0v-6.5a.75.75 0 00-.75-.75h-6.5a.75.75 0 000 1.5h4.69L5.22 13.72a.75.75 0 000 1.06z"
+			clip-rule="evenodd"
+		/>
+	</svg>
+{/snippet}
+
+{#snippet body()}
+	{#if interactive}
+		<!-- Base action icon (always visible, fades out on hover when a hover variant is provided). -->
+		<span
+			class={cn(actionSlot(), hasHoverSwap && 'group-hover:opacity-0')}
+			data-metric-card-action=""
+			aria-hidden="true"
+		>
+			{#if action}
+				{@render action()}
+			{:else}
+				{@render defaultArrow()}
+			{/if}
+		</span>
+		{#if hasHoverSwap}
+			<!-- Hover action icon (opacity-0 by default, fades in on hover). -->
+			<span
+				class={cn(actionSlot(), 'opacity-0 group-hover:opacity-100')}
+				data-metric-card-action-hover=""
+				aria-hidden="true"
+			>
+				{@render actionHover!()}
+			</span>
+		{/if}
+	{/if}
+
 	{#if title}
 		<div class={titleSlot()}>{title}</div>
 	{/if}
@@ -61,4 +107,14 @@
 			<Progress value={percent} size={Size.SM} color={Color.SUCCESS} showLabel={false} />
 		</div>
 	{/if}
-</div>
+{/snippet}
+
+{#if interactive}
+	<button type="button" class={baseClass} data-metric-card="" onclick={handleClick}>
+		{@render body()}
+	</button>
+{:else}
+	<div class={baseClass} data-metric-card="">
+		{@render body()}
+	</div>
+{/if}