@makolabs/ripple 1.12.0 → 1.13.0

package/dist/layout/card/MetricCardActionWrapper.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import MetricCard from './MetricCard.svelte';
+	import type { MetricCardProps } from '../../index.js';
+
+	type Props = Omit<MetricCardProps, 'action' | 'actionHover'> & {
+		actionText?: string;
+		actionHoverText?: string;
+	};
+
+	let { actionText, actionHoverText, ...rest }: Props = $props();
+</script>
+
+{#snippet actionSnippet()}
+	<span class="bg-default-100 text-default-700 rounded-full px-2 py-0.5 text-xs font-medium">
+		{actionText}
+	</span>
+{/snippet}
+
+{#snippet actionHoverSnippet()}
+	<span class="bg-primary-100 text-primary-700 rounded-full px-2 py-0.5 text-xs font-medium">
+		{actionHoverText}
+	</span>
+{/snippet}
+
+<MetricCard
+	{...rest}
+	action={actionText ? actionSnippet : undefined}
+	actionHover={actionHoverText ? actionHoverSnippet : undefined}
+/>

package/dist/layout/card/MetricCardActionWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MetricCardProps } from '../../index.js';
+type Props = Omit<MetricCardProps, 'action' | 'actionHover'> & {
+    actionText?: string;
+    actionHoverText?: string;
+};
+declare const MetricCardActionWrapper: import("svelte").Component<Props, {}, "">;
+type MetricCardActionWrapper = ReturnType<typeof MetricCardActionWrapper>;
+export default MetricCardActionWrapper;

package/dist/layout/card/card-types.d.ts

@@ -39,5 +39,24 @@ export type MetricCardProps = {
     percent?: number;
     segments?: ProgressSegment[];
     class?: ClassValue;
+    /**
+     * When provided, the card becomes a clickable button with cursor-pointer,
+     * an elevated hover shadow, a focus-visible ring, and a small action icon
+     * in the top-right corner. Omit for a purely presentational card.
+     */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * Custom content for the corner action slot (e.g. a pill or icon that
+     * signals what clicking will do). Only renders when `onclick` is set.
+     * If omitted, a default arrow-up-right icon is rendered.
+     */
+    action?: Snippet;
+    /**
+     * Optional alternate content for the corner action slot, shown only
+     * while the card is hovered. If provided, it crossfades with the base
+     * `action` (or default arrow) on :hover. Only renders when `onclick`
+     * is set.
+     */
+    actionHover?: Snippet;
     testId?: string;
 };

package/dist/layout/card/metric-card.d.ts

@@ -1,49 +1,49 @@
 export declare const metricCard: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+    interactive: {
+        true: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+        false: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     title: string;
     value: string;
     detail: string;
     progress: string;
+    action: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+    interactive: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     title: string;
     value: string;
     detail: string;
     progress: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+    action: string;
+}, import("tailwind-variants").TVReturnType<{
+    interactive: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     title: string;
     value: string;
     detail: string;
     progress: string;
+    action: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/layout/card/metric-card.js

@@ -1,10 +1,24 @@
 import { tv } from 'tailwind-variants';
 export const metricCard = tv({
     slots: {
-        base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm hover:shadow-md transition-shadow',
+        base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm transition-all',
         title: 'text-sm text-default-500',
         value: 'text-3xl font-bold text-default-900 mt-2',
         detail: 'mt-3 space-y-1',
-        progress: 'mt-auto'
+        progress: 'mt-auto',
+        action: 'absolute top-3 right-3 inline-flex items-center text-default-400 transition-opacity duration-200 group-hover:text-primary-500'
+    },
+    variants: {
+        interactive: {
+            true: {
+                base: 'group relative cursor-pointer text-left w-full hover:shadow-lg hover:border-primary-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
+            },
+            false: {
+                base: 'hover:shadow-md'
+            }
+        }
+    },
+    defaultVariants: {
+        interactive: false
     }
 });

package/dist/layout/navbar/navbar.js

@@ -8,7 +8,7 @@ export const navbar = tv({
         brand: 'flex flex-shrink-0 items-center',
         menu: 'hidden sm:ml-6 sm:flex sm:space-x-8',
         mobileMenu: 'sm:hidden',
-        mobileMenuButton: 'inline-flex items-center justify-center rounded-md p-2',
+        mobileMenuButton: 'inline-flex cursor-pointer items-center justify-center rounded-md p-2',
         mobileMenuContainer: 'space-y-1 pb-3 pt-2',
         links: 'flex items-center space-x-4',
         link: 'inline-flex h-full items-center gap-2 border-b-2 px-1 pt-1 text-sm font-medium',

package/dist/modal/Modal.svelte

@@ -187,7 +187,7 @@
 	{#if !title && !description && !hideCloseButton}
 		<button
 			type="button"
-			class="text-default-400 hover:bg-default-100 hover:text-default-600 absolute top-4 right-4 z-10 rounded-lg p-2 transition-colors"
+			class="text-default-400 hover:bg-default-100 hover:text-default-600 absolute top-4 right-4 z-10 cursor-pointer rounded-lg p-2 transition-colors"
 			onclick={onclose}
 			aria-label="Close"
 			data-testid={buildTestId('modal', 'close', testId)}

package/dist/modal/ModalFooter.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'tailwind-variants';
+
+	type Props = {
+		class?: ClassValue;
+		align?: 'start' | 'center' | 'end' | 'between';
+		children: Snippet;
+		testId?: string;
+	};
+
+	let { class: className = '', align = 'end', children, testId }: Props = $props();
+
+	const alignClass = $derived(
+		{
+			start: 'justify-start',
+			center: 'justify-center',
+			end: 'justify-end',
+			between: 'justify-between'
+		}[align]
+	);
+</script>
+
+<div
+	class={cn(
+		'border-default-200 flex flex-wrap items-center gap-3 border-t px-6 py-4',
+		alignClass,
+		className
+	)}
+	data-testid={buildTestId('modal-footer', undefined, testId)}
+>
+	{@render children()}
+</div>

package/dist/modal/ModalFooter.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'tailwind-variants';
+type Props = {
+    class?: ClassValue;
+    align?: 'start' | 'center' | 'end' | 'between';
+    children: Snippet;
+    testId?: string;
+};
+declare const ModalFooter: import("svelte").Component<Props, {}, "">;
+type ModalFooter = ReturnType<typeof ModalFooter>;
+export default ModalFooter;

package/dist/modal/ModalFooterTestWrapper.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ModalFooter from './ModalFooter.svelte';
+
+	let {
+		text = '',
+		align,
+		class: className
+	}: {
+		text?: string;
+		align?: 'start' | 'center' | 'end' | 'between';
+		class?: string;
+	} = $props();
+</script>
+
+<ModalFooter {align} class={className}>
+	<button type="button">{text}</button>
+</ModalFooter>

package/dist/modal/ModalFooterTestWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    text?: string;
+    align?: 'start' | 'center' | 'end' | 'between';
+    class?: string;
+};
+declare const ModalFooterTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModalFooterTestWrapper = ReturnType<typeof ModalFooterTestWrapper>;
+export default ModalFooterTestWrapper;

package/dist/modal/modal.js

@@ -10,7 +10,7 @@ export const modal = tv({
         footer: 'px-6 py-4 border-t border-default-200 bg-default-50/80 rounded-b-xl shrink-0',
         title: 'text-lg font-semibold text-default-900',
         description: 'text-sm text-default-600 mt-1',
-        close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 hover:text-default-600 hover:bg-default-100 transition-colors'
+        close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 cursor-pointer hover:text-default-600 hover:bg-default-100 transition-colors'
     },
     variants: {
         size: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.12.0",
+	"version": "1.13.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {