@makolabs/ripple 2.5.8 → 3.0.0

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

@@ -2,40 +2,103 @@ import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
 import type { VariantColors, VariantSizes } from '../../index.js';
+/** Single tab in a `<TabGroup>`. */
 export type TabItem = {
+    /** Underlying value — what you bind to. */
     value: string;
+    /** Visible tab label. */
     label: string;
+    /** Optional icon rendered before the label. */
     icon?: Component;
     disabled?: boolean;
 };
+/**
+ * Props for `<Tab>` — a single tab trigger. Usually consumed via
+ * `<TabGroup>` rather than directly, but exposed for custom compositions.
+ */
 export type TabProps = {
     value: string;
     label: string;
     icon?: Component;
+    /** Whether this tab is currently selected. */
     selected?: boolean;
     disabled?: boolean;
     color?: VariantColors;
     size?: VariantSizes;
+    /**
+     * Visual treatment:
+     * - `'line'` (default) — underline under the active tab
+     * - `'pill'` — rounded pill for the active tab
+     */
     variant?: 'line' | 'pill';
     onclick?: (event: Event) => void;
     testId?: string;
 };
+/**
+ * Props for `<TabGroup>` — a tabbed panel container. Pair with
+ * `<TabContent>` children to switch between panels.
+ *
+ * For radio-style one-of-many selection without panels, use
+ * `<SegmentedControl>` instead.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { TabGroup, TabContent } from '@makolabs/ripple';
+ *   let active = $state('overview');
+ * </script>
+ *
+ * <TabGroup
+ *   tabs={[
+ *     { value: 'overview', label: 'Overview' },
+ *     { value: 'billing', label: 'Billing' },
+ *     { value: 'team', label: 'Team' }
+ *   ]}
+ *   bind:selected={active}
+ * >
+ *   <TabContent value="overview">Overview content…</TabContent>
+ *   <TabContent value="billing">Billing content…</TabContent>
+ *   <TabContent value="team">Team content…</TabContent>
+ * </TabGroup>
+ * ```
+ */
 export type TabsGroupProps = {
     tabs: TabItem[];
+    /** Bindable currently-selected tab value. */
     selected?: string;
     color?: VariantColors;
     size?: VariantSizes;
+    /** @default 'line' */
     variant?: 'line' | 'pill';
     class?: ClassValue;
+    /** Classes on the tab list row. */
     listClass?: ClassValue;
+    /** Classes on each tab button. */
     triggerClass?: ClassValue;
+    /** Classes on the panel container. */
     panelClass?: ClassValue;
+    /**
+     * Content snippet receiving the active tab value. Typically rendered
+     * as `<TabContent>` children, but can be any markup.
+     */
     children?: Snippet<[active: string]>;
+    /** Fires on selection change. */
     onchange?: (value: string) => void;
     testId?: string;
 };
+/**
+ * Props for `<TabContent>` — one panel inside a `<TabGroup>`. Only the
+ * active panel is rendered; setting `persisted` keeps all panels mounted
+ * (good for heavy widgets you don't want to rebuild on every tab switch).
+ */
 export type TabContentProps = {
+    /** Must match one of the parent TabGroup's `tabs[].value`. */
     value: string;
+    /**
+     * When true, the panel is rendered even when not active (just hidden).
+     * Use for panels with expensive setup (charts, maps) where remounting
+     * on every switch would be costly. @default false
+     */
     persisted?: boolean;
     panelClass?: ClassValue;
     children?: Snippet<[value: string]>;

package/dist/layout/tabs/tabs.d.ts

@@ -15,7 +15,7 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
         sm: {
             trigger: string;
         };
-        base: {
+        md: {
             trigger: string;
         };
         lg: {
@@ -61,7 +61,7 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
         sm: {
             trigger: string;
         };
-        base: {
+        md: {
             trigger: string;
         };
         lg: {
@@ -107,7 +107,7 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
         sm: {
             trigger: string;
         };
-        base: {
+        md: {
             trigger: string;
         };
         lg: {

package/dist/layout/tabs/tabs.js

@@ -3,8 +3,14 @@ import { Color, Size } from '../../index.js';
 export const tabs = tv({
     slots: {
         base: 'w-full',
-        list: 'flex border-b border-default-200',
-        trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer -mb-px border-b-2 border-transparent',
+        // `overflow-x-auto` + `flex-nowrap` lets the tab row scroll on
+        // narrow viewports instead of wrapping and breaking the underline.
+        // `[scrollbar-width:none]` + the `::-webkit` rule keep the scroll
+        // available without a visible bar (swipeable on mobile).
+        list: 'flex flex-nowrap border-b border-default-200 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        // `shrink-0` stops tabs from being squeezed when the row overflows.
+        // `whitespace-nowrap` keeps multi-word labels on one line.
+        trigger: 'inline-flex items-center shrink-0 whitespace-nowrap px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer -mb-px border-b-2 border-transparent',
         panel: 'mt-4 px-3'
     },
     variants: {
@@ -24,7 +30,7 @@ export const tabs = tv({
             [Size.SM]: {
                 trigger: 'px-2 py-1 text-xs'
             },
-            [Size.BASE]: {
+            [Size.MD]: {
                 trigger: 'px-3 py-2 text-sm'
             },
             [Size.LG]: {
@@ -40,8 +46,8 @@ export const tabs = tv({
         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'
+                list: 'flex flex-nowrap border-none gap-2 p-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                trigger: 'inline-flex items-center shrink-0 whitespace-nowrap px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
             }
         },
         selected: {
@@ -291,7 +297,7 @@ export const tabs = tv({
     ],
     defaultVariants: {
         color: Color.PRIMARY,
-        size: 'base',
+        size: 'md',
         variant: 'line',
         selected: false
     }

package/dist/modal/ConfirmDialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Modal from './Modal.svelte';
+	import ModalFooter from './ModalFooter.svelte';
+	import Button from '../button/Button.svelte';
+	import type { ConfirmDialogProps } from './confirm-dialog-types.js';
+	import { Color } from '../variants.js';
+
+	let {
+		open = $bindable(false),
+		title,
+		message,
+		body,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		confirmColor = Color.PRIMARY,
+		size = 'sm',
+		onconfirm,
+		oncancel,
+		class: className,
+		testId
+	}: ConfirmDialogProps = $props();
+
+	let busy = $state(false);
+
+	async function handleConfirm() {
+		if (busy) return;
+		try {
+			busy = true;
+			await onconfirm?.();
+			open = false;
+		} catch {
+			// Keep dialog open; consumer is expected to surface errors via
+			// their own state (e.g. a toast). We just stop the spinner.
+		} finally {
+			busy = false;
+		}
+	}
+
+	function handleCancel() {
+		if (busy) return;
+		oncancel?.();
+		open = false;
+	}
+</script>
+
+<Modal bind:open {title} {size} class={className} onclose={handleCancel} {testId}>
+	<div data-testid={testId ? `${testId}-confirm-body` : 'confirm-dialog-body'}>
+		{#if body}
+			{@render body()}
+		{:else if message}
+			<p class="text-default-700 text-sm">{message}</p>
+		{/if}
+	</div>
+
+	{#snippet footer()}
+		<ModalFooter align="end">
+			<Button variant="outline" onclick={handleCancel} disabled={busy}>
+				{cancelLabel}
+			</Button>
+			<Button color={confirmColor} onclick={handleConfirm} loading={busy}>
+				{confirmLabel}
+			</Button>
+		</ModalFooter>
+	{/snippet}
+</Modal>

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

@@ -0,0 +1,4 @@
+import type { ConfirmDialogProps } from './confirm-dialog-types.js';
+declare const ConfirmDialog: import("svelte").Component<ConfirmDialogProps, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/modal/Modal.svelte

@@ -5,7 +5,6 @@
 	import { quintOut } from 'svelte/easing';
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
-	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { modal } from './modal.js';
 	import type { ModalProps } from '../index.js';
 
@@ -17,37 +16,18 @@
 		size,
 		hideCloseButton = false,
 		class: className = '',
-		contentclass,
-		contentClass = contentclass ?? '',
-		bodyclass,
-		bodyClass = bodyclass ?? '',
-		titleclass,
-		titleClass = titleclass ?? '',
-		headerclass,
-		headerClass = headerclass ?? '',
-		backdropclass,
-		backdropClass = backdropclass ?? '',
-		footerclass,
-		footerClass = footerclass ?? '',
+		contentClass = '',
+		bodyClass = '',
+		titleClass = '',
+		headerClass = '',
+		backdropClass = '',
+		footerClass = '',
 		children,
 		footer,
 		header,
 		testId
 	}: ModalProps = $props();
 
-	warnDeprecatedProps(
-		'Modal',
-		{ contentclass, bodyclass, titleclass, headerclass, backdropclass, footerclass },
-		{
-			contentclass: 'contentClass',
-			bodyclass: 'bodyClass',
-			titleclass: 'titleClass',
-			headerclass: 'headerClass',
-			backdropclass: 'backdropClass',
-			footerclass: 'footerClass'
-		}
-	);
-
 	let modalElement: HTMLDivElement | undefined = $state();
 
 	const styles = $derived(modal({ size }));

package/dist/modal/confirm-dialog-types.d.ts

@@ -0,0 +1,39 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors, VariantSizes } from '../index.js';
+export type ConfirmDialogProps = {
+    /** Bindable open state. */
+    open?: boolean;
+    /** Heading shown at the top. */
+    title: string;
+    /** Body text. For richer content use the `body` snippet instead. */
+    message?: string;
+    /** Override the plain `message` with arbitrary markup. */
+    body?: Snippet;
+    /** Confirm button label. @default 'Confirm' */
+    confirmLabel?: string;
+    /** Cancel button label. @default 'Cancel' */
+    cancelLabel?: string;
+    /**
+     * Confirm button color. `'danger'` is the common choice for destructive
+     * actions ("Delete forever"). @default 'primary'
+     */
+    confirmColor?: VariantColors;
+    /**
+     * Modal size. @default 'sm' (narrower than a default Modal — matches
+     * the kind of short yes/no decision these dialogs represent).
+     */
+    size?: VariantSizes;
+    /**
+     * Called when the user clicks Confirm. If it returns a Promise, the
+     * Confirm button shows a loading state until it resolves, and the
+     * dialog only closes on success. Throw/reject to keep the dialog open
+     * with an error state the consumer can display.
+     */
+    onconfirm?: () => void | Promise<void>;
+    /** Called when the user clicks Cancel or dismisses the dialog. */
+    oncancel?: () => void;
+    /** Pass-through modal class. */
+    class?: ClassValue;
+    testId?: string;
+};

package/dist/modal/confirm-dialog-types.js

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

package/dist/modal/modal-types.d.ts

@@ -1,34 +1,73 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { VariantSizes } from '../index.js';
+/**
+ * Props for `<Modal>` — a centered overlay dialog with backdrop. Use for
+ * focused tasks (forms, settings) that benefit from blocking the rest of
+ * the page. For "are you sure?" flows use `<ConfirmDialog>` (a thin
+ * wrapper). For side-anchored panels use `<Drawer>`.
+ *
+ * @example
+ * ```svelte
+ * <Modal bind:open title="Edit profile">
+ *   <ProfileForm />
+ *   {#snippet footer()}
+ *     <ModalFooter align="end">
+ *       <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+ *       <Button onclick={save}>Save</Button>
+ *     </ModalFooter>
+ *   {/snippet}
+ * </Modal>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Custom header snippet (replaces the default title bar) -->
+ * <Modal bind:open size="lg">
+ *   {#snippet header()}
+ *     <div class="flex items-center gap-3 p-4">
+ *       <Avatar />
+ *       <div>
+ *         <h2 class="font-semibold">Sarah Chen</h2>
+ *         <p class="text-xs text-default-500">Engineering</p>
+ *       </div>
+ *     </div>
+ *   {/snippet}
+ *   <UserDetails user={selected} />
+ * </Modal>
+ * ```
+ */
 export type ModalProps = {
+    /** Bindable open state. @default false */
     open?: boolean;
+    /** Fires when the user dismisses the modal (× button, backdrop click, Escape). */
     onclose?: () => void;
+    /** Header text. Ignored if a `header` snippet is provided. */
     title?: string;
+    /** Short subtitle below the title. */
     description?: string;
+    /** @default 'md' */
     size?: VariantSizes;
+    /** Hide the default × button in the corner. @default false */
     hideCloseButton?: boolean;
     class?: ClassValue;
-    /** @deprecated Use contentClass instead */
-    contentclass?: ClassValue;
+    /** Classes on the dialog container. */
     contentClass?: ClassValue;
-    /** @deprecated Use bodyClass instead */
-    bodyclass?: ClassValue;
+    /** Classes on the body content area. */
     bodyClass?: ClassValue;
-    /** @deprecated Use titleClass instead */
-    titleclass?: ClassValue;
+    /** Classes on the title element. */
     titleClass?: ClassValue;
-    /** @deprecated Use headerClass instead */
-    headerclass?: ClassValue;
+    /** Classes on the header row. */
     headerClass?: ClassValue;
-    /** @deprecated Use backdropClass instead */
-    backdropclass?: ClassValue;
+    /** Classes on the backdrop overlay. */
     backdropClass?: ClassValue;
-    /** @deprecated Use footerClass instead */
-    footerclass?: ClassValue;
+    /** Classes on the footer area. */
     footerClass?: ClassValue;
+    /** Body content. */
     children?: Snippet;
+    /** Footer content — usually `<ModalFooter>` with action buttons. */
     footer?: Snippet;
+    /** Replace the default title bar entirely. */
     header?: Snippet;
     testId?: string;
 };

package/dist/modal/modal.d.ts

@@ -6,7 +6,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         sm: {
             container: string;
         };
-        base: {
+        md: {
             container: string;
         };
         lg: {
@@ -37,7 +37,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         sm: {
             container: string;
         };
-        base: {
+        md: {
             container: string;
         };
         lg: {
@@ -68,7 +68,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         sm: {
             container: string;
         };
-        base: {
+        md: {
             container: string;
         };
         lg: {

package/dist/modal/modal.js

@@ -7,7 +7,7 @@ export const modal = tv({
         container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl',
         header: 'px-6 py-4 border-b border-default-200 flex items-center justify-between shrink-0',
         body: 'flex-1 px-6 py-4 overflow-y-auto',
-        footer: 'px-6 py-4 border-t border-default-200 bg-default-50/80 rounded-b-xl shrink-0',
+        footer: '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 cursor-pointer hover:text-default-600 hover:bg-default-100 transition-colors'
@@ -20,7 +20,7 @@ export const modal = tv({
             [Size.SM]: {
                 container: 'max-w-sm max-h-[85vh]'
             },
-            [Size.BASE]: {
+            [Size.MD]: {
                 container: 'max-w-md max-h-[85vh]'
             },
             [Size.LG]: {
@@ -35,6 +35,6 @@ export const modal = tv({
         }
     },
     defaultVariants: {
-        size: Size.BASE
+        size: Size.MD
     }
 });

package/dist/pipeline/Pipeline.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { pipelineVariants } from './pipeline.js';
 	import type { PipelineProps, PipelineStage } from '../index.js';
 
@@ -8,7 +9,7 @@
 	let {
 		stages = [],
 		class: className = '',
-		size = 'base',
+		size = 'md',
 		equalWidth = true,
 		chevronGap = 0,
 		selectedClass,
@@ -18,7 +19,8 @@
 		onstagehover,
 		onstageleave,
 		children,
-		beneathChildren
+		beneathChildren,
+		testId
 	}: PipelineProps = $props();
 
 	const containerStyles = $derived(pipelineVariants({ size, equalWidth }));
@@ -80,7 +82,10 @@
 	</div>
 {/snippet}
 
-<div class={cn(containerStyles.container(), className)}>
+<div
+	class={cn(containerStyles.container(), className)}
+	data-testid={buildTestId('pipeline', undefined, testId)}
+>
 	{#each stages as stage, index (stage.label + index)}
 		{@const s = getStageStyles(stage)}
 		{@const isFirst = index === 0}

package/dist/pipeline/pipeline-types.d.ts

@@ -1,24 +1,67 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
-export type PipelineStageColor = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+import type { VariantColors } from '../index.js';
+/** Single stage in a `<Pipeline>` chevron bar. */
 export type PipelineStage = {
+    /** Display label. */
     label: string;
+    /** Optional big number shown below the label (e.g. count, currency). */
     count?: number | string;
-    color?: PipelineStageColor;
+    /** Stage color accent. @default 'default' */
+    color?: VariantColors;
+    /** Whether this stage is currently selected/highlighted. */
     active?: boolean;
+    /** Grey out the stage and disable interaction. */
     disabled?: boolean;
 };
+/** Event shape emitted by Pipeline stage interactions. */
 export type PipelineStageEvent<E extends Event = Event> = {
+    /** The clicked/hovered stage data. */
     stage: PipelineStage;
+    /** Stage index in the `stages` array. */
     index: number;
+    /** Native DOM event. */
     event: E;
 };
+/** Mouse-click event on a stage. */
 export type PipelineStageClickEvent = PipelineStageEvent<MouseEvent>;
+/** Mouse hover/leave event on a stage. */
 export type PipelineStagePointerEvent = PipelineStageEvent<MouseEvent>;
+/**
+ * Props for `<Pipeline>` — a horizontal chevron-shaped stage bar for
+ * visualising funnels, workflows, or sales pipelines. Purely display —
+ * for interactive multi-step forms use `<Stepper>` instead.
+ *
+ * @example
+ * ```svelte
+ * <Pipeline
+ *   stages={[
+ *     { label: 'Lead', count: 240 },
+ *     { label: 'Qualified', count: 82, active: true, color: 'primary' },
+ *     { label: 'Proposal', count: 31 },
+ *     { label: 'Won', count: 12, color: 'success' }
+ *   ]}
+ *   onstageclick={({ stage }) => setFilter(stage.label)}
+ * />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Custom content per stage (progress bars under each chevron) -->
+ * <Pipeline {stages}>
+ *   {#snippet beneathChildren(stage, i)}
+ *     <div class="text-xs">{stage.count} deals</div>
+ *   {/snippet}
+ * </Pipeline>
+ * ```
+ */
 export type PipelineProps = {
+    /** Ordered list of stages. */
     stages: PipelineStage[];
     class?: ClassValue;
-    size?: 'sm' | 'base' | 'lg';
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Force equal-width columns. @default true */
     equalWidth?: boolean;
     /**
      * Pixels of visible gap between chevrons. Independent of the chevron tip width.
@@ -27,12 +70,21 @@ export type PipelineProps = {
      * - negative: more overlap than default (tips extend past notches)
      */
     chevronGap?: number;
+    /** Replace the default label+count content inside each chevron. */
     children?: Snippet<[PipelineStage, number]>;
+    /** Render extra content under each stage (progress bars, sub-labels). */
     beneathChildren?: Snippet<[PipelineStage, number]>;
+    /** Extra classes applied to the selected (active) stage. */
     selectedClass?: ClassValue;
+    /** Extra classes applied to unselected stages. */
     unselectedClass?: ClassValue;
+    /** Extra classes applied to disabled stages. */
     disabledClass?: ClassValue;
+    /** Fires when a stage is clicked (skipped when the stage is disabled). */
     onstageclick?: (e: PipelineStageClickEvent) => void;
+    /** Fires on stage mouseenter. Attaches `role="group"` for accessibility when used. */
     onstagehover?: (e: PipelineStagePointerEvent) => void;
+    /** Fires on stage mouseleave. */
     onstageleave?: (e: PipelineStagePointerEvent) => void;
+    testId?: string;
 };

package/dist/pipeline/pipeline.d.ts

@@ -8,7 +8,7 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
             count: string;
             content: string;
         };
-        base: {
+        md: {
             stage: string;
             borderLayer: string;
             innerLayer: string;
@@ -34,6 +34,11 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
             label: string;
             count: string;
         };
+        secondary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
         success: {
             borderLayer: string;
             label: string;
@@ -93,7 +98,7 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
             count: string;
             content: string;
         };
-        base: {
+        md: {
             stage: string;
             borderLayer: string;
             innerLayer: string;
@@ -119,6 +124,11 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
             label: string;
             count: string;
         };
+        secondary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
         success: {
             borderLayer: string;
             label: string;
@@ -178,7 +188,7 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
             count: string;
             content: string;
         };
-        base: {
+        md: {
             stage: string;
             borderLayer: string;
             innerLayer: string;
@@ -204,6 +214,11 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
             label: string;
             count: string;
         };
+        secondary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
         success: {
             borderLayer: string;
             label: string;