@makolabs/ripple 1.7.11 → 1.9.0

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

@@ -0,0 +1,34 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantSizes } from '../index.js';
+export type ModalProps = {
+    open?: boolean;
+    onclose?: () => void;
+    title?: string;
+    description?: string;
+    size?: VariantSizes;
+    hideCloseButton?: boolean;
+    class?: ClassValue;
+    /** @deprecated Use contentClass instead */
+    contentclass?: ClassValue;
+    contentClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
+    bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use headerClass instead */
+    headerclass?: ClassValue;
+    headerClass?: ClassValue;
+    /** @deprecated Use backdropClass instead */
+    backdropclass?: ClassValue;
+    backdropClass?: ClassValue;
+    /** @deprecated Use footerClass instead */
+    footerclass?: ClassValue;
+    footerClass?: ClassValue;
+    children?: Snippet;
+    footer?: Snippet;
+    header?: Snippet;
+    testId?: string;
+};

package/dist/modal/modal-types.js

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

package/dist/modal/modal.d.ts

@@ -1,22 +1,21 @@
-import { Size } from '../index.js';
 export declare const modal: import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             container: string;
         };
-        [Size.SM]: {
+        sm: {
             container: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
         };
-        [Size.XL]: {
+        xl: {
             container: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             container: string;
         };
     };
@@ -32,22 +31,22 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     close: string;
 }, undefined, {
     size: {
-        [Size.XS]: {
+        xs: {
             container: string;
         };
-        [Size.SM]: {
+        sm: {
             container: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
         };
-        [Size.XL]: {
+        xl: {
             container: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             container: string;
         };
     };
@@ -63,22 +62,22 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             container: string;
         };
-        [Size.SM]: {
+        sm: {
             container: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
         };
-        [Size.XL]: {
+        xl: {
             container: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             container: string;
         };
     };

package/dist/modal/modal.js

@@ -4,10 +4,10 @@ export const modal = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex items-center justify-center p-4',
         backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
-        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl overflow-hidden',
+        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 shrink-0',
+        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'

package/dist/types/echarts.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Ambient module declarations for echarts tree-shakable imports.
+ *
+ * ECharts v6 ships .d.ts files for each subpath (core.d.ts, charts.d.ts,
+ * components.d.ts, renderers.d.ts), but its package.json "exports" map
+ * does not include "types" conditions for these subpaths. Under TypeScript's
+ * "nodenext" module resolution this prevents the types from being found.
+ *
+ * These declarations bridge the gap by re-exporting from the internal
+ * typed paths that ARE listed in the exports map.
+ */
+
+declare module 'echarts/core' {
+	export * from 'echarts/types/dist/core';
+}
+
+declare module 'echarts/charts' {
+	export * from 'echarts/types/dist/charts';
+}
+
+declare module 'echarts/components' {
+	export * from 'echarts/types/dist/components';
+}
+
+declare module 'echarts/renderers' {
+	export * from 'echarts/types/dist/renderers';
+}

package/dist/user-management/UserModal.svelte

@@ -287,7 +287,7 @@
 	{open}
 	onclose={handleClose}
 	title={getModalTitle()}
-	contentclass="max-w-4xl"
+	contentClass="max-w-4xl"
 	class={cn(className)}
 >
 	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6" data-testid="user-form">

package/dist/user-management/UserTable.svelte

@@ -223,8 +223,8 @@
 	onpagesizechange={onPageSizeChange}
 	onsort={handleTableSort}
 	paginationPosition="bottom"
-	paginationclass="whitespace-nowrap flex-wrap gap-3 justify-between items-center"
-	wrapperclass="overflow-x-auto"
-	tableclass="min-w-full w-full"
+	paginationClass="whitespace-nowrap flex-wrap gap-3 justify-between items-center"
+	wrapperClass="overflow-x-auto"
+	tableClass="min-w-full w-full"
 	class={className}
 />

package/dist/user-management/UserViewModal.svelte

@@ -83,8 +83,8 @@
 	{open}
 	onclose={handleClose}
 	title={getModalTitle()}
-	contentclass="max-w-4xl"
-	bodyclass="flex flex-col"
+	contentClass="max-w-4xl"
+	bodyClass="flex flex-col"
 	class={cn(className)}
 >
 	<div class="flex gap-6">

package/dist/user-management/user-management-types.d.ts

@@ -0,0 +1,156 @@
+import type { ClassValue } from 'tailwind-variants';
+export interface GetUsersOptions {
+    page: number;
+    pageSize: number;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    query?: string;
+}
+export interface GetUsersResult {
+    users: User[];
+    totalUsers: number;
+}
+export interface UserEmail {
+    email_address: string;
+    verified?: boolean;
+}
+export interface UserPhone {
+    phone_number: string;
+    verified?: boolean;
+}
+export interface User {
+    id: string;
+    first_name?: string;
+    last_name?: string;
+    username?: string;
+    email_addresses?: UserEmail[];
+    phone_numbers?: UserPhone[];
+    image_url?: string;
+    created_at?: number;
+    last_sign_in_at?: number;
+    private_metadata?: Record<string, unknown>;
+    public_metadata?: Record<string, unknown>;
+    permissions?: string[];
+    role?: string;
+}
+export interface Permission {
+    id: string;
+    name: string;
+    description?: string;
+    category?: string;
+}
+export interface Role {
+    value: string;
+    label: string;
+    description?: string;
+    permissions: string[];
+}
+export interface UserTableProps {
+    users: User[];
+    loading?: boolean;
+    currentPage?: number;
+    pageSize?: number;
+    totalUsers?: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onSort?: (state: {
+        column: string | null;
+        direction: 'asc' | 'desc' | null;
+    }) => void;
+    onView: (user: User) => void;
+    onEdit: (user: User) => void;
+    onDelete: (userId: string) => void;
+    class?: ClassValue;
+    testId?: string;
+}
+export interface UserModalProps {
+    open?: boolean;
+    user?: User | null;
+    roles?: Role[];
+    adapter?: UserManagementAdapter;
+    loadingPermissions?: boolean;
+    onSave: (user: User, mode: 'create' | 'edit') => void | Promise<void>;
+    onClose?: () => void;
+    class?: ClassValue;
+    testId?: string;
+}
+export interface UserViewModalProps {
+    open?: boolean;
+    user: User | null;
+    permissions?: Permission[];
+    roles?: Role[];
+    onEdit?: (user: User) => void;
+    onRegenerateApiKey?: (userId: string) => Promise<void>;
+    onClose: () => void;
+    class?: ClassValue;
+    testId?: string;
+}
+/**
+ * User Management Adapter Interface
+ *
+ * Defines the contract for user management adapters.
+ * Adapters can be remote function modules (returning RemoteQuery/RemoteCommand)
+ * or regular async function modules (returning Promise).
+ *
+ * Uses PromiseLike to accept both Promise and RemoteQuery/RemoteCommand types.
+ */
+export interface UserManagementAdapter {
+    getUsers: (options: GetUsersOptions) => PromiseLike<GetUsersResult>;
+    createUser: (userData: Partial<User>) => PromiseLike<User>;
+    updateUser: (options: {
+        userId: string;
+        userData: Partial<User>;
+    }) => PromiseLike<User>;
+    deleteUser: (userId: string) => PromiseLike<void>;
+    deleteUsers: (userIds: string[]) => PromiseLike<void>;
+    getUserPermissions: (userId: string) => PromiseLike<string[]>;
+    updateUserPermissions: (options: {
+        userId: string;
+        permissions: string[];
+    }) => PromiseLike<void>;
+    generateApiKey?: (options: {
+        userId: string;
+        permissions: string[];
+        revokeOld?: boolean;
+    }) => PromiseLike<{
+        success: boolean;
+        apiKey: string;
+        message: string;
+        verificationWarning?: string;
+    }>;
+    verifyToken?: (options: {
+        apiKey: string;
+    }) => PromiseLike<{
+        valid: boolean;
+        scopes?: string[];
+        error?: string;
+        token?: string;
+    }>;
+}
+export interface UserManagementProps {
+    /**
+     * Adapter module containing remote functions or async functions
+     * Should be imported from a .remote.ts file
+     * If not provided, uses the default adapter from @makolabs/ripple
+     *
+     * Example:
+     * ```ts
+     * import * as adapter from './adapter.remote';
+     * <UserManagement adapter={adapter} roles={roles} />
+     * ```
+     */
+    adapter: UserManagementAdapter;
+    /**
+     * Available roles for user assignment
+     */
+    roles?: Role[];
+    /**
+     * Available permissions for display (optional)
+     */
+    permissions?: Permission[];
+    class?: ClassValue;
+    testId?: string;
+}
+export interface FormErrors {
+    [key: string]: string;
+}

package/dist/user-management/user-management-types.js

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

package/dist/variants.d.ts

@@ -1,20 +1,20 @@
 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;
+    readonly DEFAULT: "default";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
 };
 export declare const Size: {
-    XS: string;
-    SM: string;
-    BASE: string;
-    LG: string;
-    XL: string;
-    XXL: string;
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly BASE: "base";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "2xl";
 };
 export declare const ChartColor: {
     readonly HEALTH: "health";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.7.11",
+	"version": "1.9.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -58,6 +58,8 @@
 		"@storybook/addon-docs": "^10.0.7",
 		"@storybook/addon-svelte-csf": "^5.0.10",
 		"@storybook/sveltekit": "^10.0.7",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/vite": "^4.1.17",
@@ -112,17 +114,17 @@
 		"spinner",
 		"toast"
 	],
+	"engines": {
+		"node": ">=20"
+	},
+	"lint-staged": {
+		"*.{js,ts,svelte,css,md,json}": "prettier --write"
+	},
 	"dependencies": {
 		"@friendofsvelte/mermaid": "^0.0.4",
-		"@friendofsvelte/state": "^0.0.6-ts",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.48.4",
-		"compromise": "^14.14.4",
 		"dayjs": "^1.11.19",
 		"echarts": "^6.0.0",
 		"marked": "^17.0.0",
-		"mem0ai": "^2.1.38",
-		"natural": "^8.1.0",
 		"svelte-highlight": "^7.9.0",
 		"svelte-sonner": "^1.0.6",
 		"tailwind-merge": "^3.4.0",

package/dist/ai/AIChatInterfaceTestWrapper.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import AIChatInterface from './AIChatInterface.svelte';
-	import type { AIAdapter } from '../adapters/ai/index.js';
-	import type { ChatMessage, VariantColors } from '../index.js';
-
-	interface AIChatInterfaceTestWrapperProps {
-		adapter: AIAdapter;
-		title?: string;
-		subtitle?: string;
-		placeholder?: string;
-		color?: VariantColors;
-		disabled?: boolean;
-		loading?: boolean;
-		messages?: ChatMessage[];
-		class?: string;
-		context?: Record<string, unknown>;
-	}
-
-	let {
-		adapter,
-		messages = $bindable([]),
-		...restProps
-	}: AIChatInterfaceTestWrapperProps = $props();
-</script>
-
-<AIChatInterface {adapter} bind:messages {...restProps} />

package/dist/ai/AIChatInterfaceTestWrapper.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { AIAdapter } from '../adapters/ai/index.js';
-import type { ChatMessage, VariantColors } from '../index.js';
-interface AIChatInterfaceTestWrapperProps {
-    adapter: AIAdapter;
-    title?: string;
-    subtitle?: string;
-    placeholder?: string;
-    color?: VariantColors;
-    disabled?: boolean;
-    loading?: boolean;
-    messages?: ChatMessage[];
-    class?: string;
-    context?: Record<string, unknown>;
-}
-declare const AIChatInterfaceTestWrapper: import("svelte").Component<AIChatInterfaceTestWrapperProps, {}, "messages">;
-type AIChatInterfaceTestWrapper = ReturnType<typeof AIChatInterfaceTestWrapper>;
-export default AIChatInterfaceTestWrapper;

package/dist/button/ButtonTestWrapper.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	import Button from './Button.svelte';
-	import type { ButtonProps } from '../index.js';
-
-	let { text = '', ...buttonProps }: ButtonProps & { text?: string } = $props();
-</script>
-
-<Button {...buttonProps}>
-	{text}
-</Button>

package/dist/button/ButtonTestWrapper.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { ButtonProps } from '../index.js';
-type $$ComponentProps = ButtonProps & {
-    text?: string;
-};
-declare const ButtonTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
-type ButtonTestWrapper = ReturnType<typeof ButtonTestWrapper>;
-export default ButtonTestWrapper;

package/dist/drawer/DrawerTestWrapper.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import Drawer from './Drawer.svelte';
-
-	let {
-		title,
-		content,
-		open = $bindable(false),
-		onclose
-	}: {
-		title: string;
-		content: string;
-		open?: boolean;
-		onclose?: () => void;
-	} = $props();
-</script>
-
-<Drawer {title} bind:open {onclose}>
-	{content}
-</Drawer>

package/dist/drawer/DrawerTestWrapper.svelte.d.ts

@@ -1,9 +0,0 @@
-type $$ComponentProps = {
-    title: string;
-    content: string;
-    open?: boolean;
-    onclose?: () => void;
-};
-declare const DrawerTestWrapper: import("svelte").Component<$$ComponentProps, {}, "open">;
-type DrawerTestWrapper = ReturnType<typeof DrawerTestWrapper>;
-export default DrawerTestWrapper;

package/dist/elements/accordion/AccordionTestWrapper.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import Accordion from './Accordion.svelte';
-
-	let {
-		title,
-		content,
-		open = $bindable(false),
-		onexpand,
-		oncollapse
-	}: {
-		title: string;
-		content: string;
-		open?: boolean;
-		onexpand?: () => void;
-		oncollapse?: () => void;
-	} = $props();
-</script>
-
-<Accordion {title} bind:open {onexpand} {oncollapse}>
-	{content}
-</Accordion>

package/dist/elements/accordion/AccordionTestWrapper.svelte.d.ts

@@ -1,10 +0,0 @@
-type $$ComponentProps = {
-    title: string;
-    content: string;
-    open?: boolean;
-    onexpand?: () => void;
-    oncollapse?: () => void;
-};
-declare const AccordionTestWrapper: import("svelte").Component<$$ComponentProps, {}, "open">;
-type AccordionTestWrapper = ReturnType<typeof AccordionTestWrapper>;
-export default AccordionTestWrapper;

package/dist/elements/badge/BadgeTestWrapper.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import Badge from './Badge.svelte';
-
-	let {
-		text,
-		color,
-		size,
-		onclose
-	}: { text: string; color?: string; size?: string; onclose?: () => void } = $props();
-</script>
-
-<Badge {color} {size} {onclose}>
-	{text}
-</Badge>

package/dist/elements/badge/BadgeTestWrapper.svelte.d.ts

@@ -1,9 +0,0 @@
-type $$ComponentProps = {
-    text: string;
-    color?: string;
-    size?: string;
-    onclose?: () => void;
-};
-declare const BadgeTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
-type BadgeTestWrapper = ReturnType<typeof BadgeTestWrapper>;
-export default BadgeTestWrapper;

package/dist/forms/CheckboxTestWrapper.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import Checkbox from './Checkbox.svelte';
-	import type { CheckboxProps } from '../index.js';
-
-	let { ...checkboxProps }: CheckboxProps = $props();
-</script>
-
-<Checkbox {...checkboxProps} />

package/dist/forms/CheckboxTestWrapper.svelte.d.ts

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

package/dist/forms/InputTestWrapper.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import Input from './Input.svelte';
-	import type { InputProps } from '../index.js';
-
-	let { ...inputProps }: InputProps = $props();
-</script>
-
-<Input {...inputProps} />

package/dist/forms/InputTestWrapper.svelte.d.ts

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

package/dist/forms/ToggleTestWrapper.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import Toggle from './Toggle.svelte';
-	import type { ToggleProps } from '../index.js';
-
-	let { label = '', ...toggleProps }: ToggleProps & { label?: string } = $props();
-</script>
-
-<Toggle {label} {...toggleProps} />

package/dist/forms/ToggleTestWrapper.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { ToggleProps } from '../index.js';
-type $$ComponentProps = ToggleProps & {
-    label?: string;
-};
-declare const ToggleTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
-type ToggleTestWrapper = ReturnType<typeof ToggleTestWrapper>;
-export default ToggleTestWrapper;

package/dist/layout/card/CardTestWrapper.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import Card from './Card.svelte';
-
-	let {
-		title,
-		content
-	}: {
-		title?: string;
-		content: string;
-	} = $props();
-</script>
-
-<Card {title}>
-	{content}
-</Card>

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

@@ -1,7 +0,0 @@
-type $$ComponentProps = {
-    title?: string;
-    content: string;
-};
-declare const CardTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
-type CardTestWrapper = ReturnType<typeof CardTestWrapper>;
-export default CardTestWrapper;