@makolabs/ripple 1.8.0 → 1.9.0

package/dist/index.js

@@ -9,10 +9,14 @@ import { ChartColor, Color, Size } from './variants.js';
  */
 export { Color, Size, ChartColor };
 export { buildTestId } from './helper/testid.js';
+// ============================================================================
 // Helper utilities
+// ============================================================================
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
+// ============================================================================
 // Direct Component Exports
+// ============================================================================
 // Button
 export { default as Button } from './button/Button.svelte';
 // Modal
@@ -35,6 +39,7 @@ export { default as RankedCard } from './layout/card/RankedCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';
 export { default as Pagination } from './elements/pagination/Pagination.svelte';
+// Elements - Tabs
 export { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
@@ -49,18 +54,15 @@ export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 // Elements - ActivityList
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
-// Component Variant Utilities
-export { dropdownMenu } from './elements/dropdown/dropdown.js';
-export { badge } from './elements/badge/badge.js';
-export { buttonVariants } from './button/button.js';
-export { modal } from './modal/modal.js';
-export { drawer } from './drawer/drawer.js';
-export { selectTV } from './elements/dropdown/select.js';
-export { breadcrumbs } from './header/breadcrumbs.js';
-export { metricCard } from './layout/card/metric-card.js';
-export { rankedCard } from './layout/card/ranked-card.js';
-export { activityList } from './layout/activity-list/activity-list.js';
+// Elements - Progress
+export { default as Progress } from './elements/progress/Progress.svelte';
+// Elements - Accordion
+export { default as Accordion } from './elements/accordion/Accordion.svelte';
+// Elements - Timeline
+export { default as Timeline } from './elements/timeline/Timeline.svelte';
+// Chart
 export { default as Chart } from './charts/Chart.svelte';
+// File Upload
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 // Toaster: Should be registered in +layout.svelte
@@ -82,19 +84,40 @@ export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Tags } from './forms/Tags.svelte';
 export { default as RadioPill } from './forms/RadioPill.svelte';
-export { default as Progress } from './elements/progress/Progress.svelte';
-export { default as Accordion } from './elements/accordion/Accordion.svelte';
-export { default as Timeline } from './elements/timeline/Timeline.svelte';
+// ============================================================================
+// Component Variant Utilities
+// ============================================================================
+export { dropdownMenu } from './elements/dropdown/dropdown.js';
+export { badge } from './elements/badge/badge.js';
+export { buttonVariants } from './button/button.js';
+export { modal } from './modal/modal.js';
+export { drawer } from './drawer/drawer.js';
+export { selectTV } from './elements/dropdown/select.js';
+export { breadcrumbs } from './header/breadcrumbs.js';
+export { metricCard } from './layout/card/metric-card.js';
+export { rankedCard } from './layout/card/ranked-card.js';
+export { activityList } from './layout/activity-list/activity-list.js';
+export { slider } from './forms/slider.js';
+// ============================================================================
 // Re-export filters
+// ============================================================================
 export { CompactFilters } from './filters/index.js';
+// ============================================================================
 // File Browser and Storage Adapters
+// ============================================================================
 export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';
+// ============================================================================
 // AI Adapters
+// ============================================================================
 export * from './adapters/ai/index.js';
+// ============================================================================
 // User Management Helper Functions
+// ============================================================================
 export { getUserDisplayName, getUserInitials } from './user-management/user-management.js';
+// ============================================================================
 // User Management Components
+// ============================================================================
 export { default as UserManagement } from './user-management/UserManagement.svelte';
 export { default as UserTable } from './user-management/UserTable.svelte';
 export { default as UserModal } from './user-management/UserModal.svelte';

package/dist/layout/activity-list/activity-list-types.d.ts

@@ -0,0 +1,30 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors } from '../../index.js';
+export type ActivityItemBadge = {
+    text: string;
+    class: string;
+};
+export type ActivityItemAction = {
+    label: string;
+    onClick?: () => void;
+};
+export type ActivityItem = {
+    title: string;
+    subtitle?: string;
+    badges?: ActivityItemBadge[];
+    actions?: ActivityItemAction[];
+};
+export type ActivityListProps = {
+    title?: string;
+    items?: ActivityItem[];
+    color?: VariantColors;
+    class?: ClassValue;
+    headerClass?: ClassValue;
+    titleClass?: ClassValue;
+    contentClass?: ClassValue;
+    itemClass?: ClassValue;
+    onItemClick?: (item: ActivityItem, index: number) => void;
+    children?: Snippet;
+    testId?: string;
+};

package/dist/layout/activity-list/activity-list-types.js

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

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

@@ -0,0 +1,43 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantColors } from '../../index.js';
+import type { ProgressSegment } from '../../elements/progress/progress-types.js';
+export type CardProps = {
+    color?: VariantColors;
+    title?: string;
+    class?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
+    bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    children?: Snippet;
+    custom?: Snippet;
+    testId?: string;
+};
+export type AlertProps = {
+    title?: string;
+    message: string;
+    color?: VariantColors;
+    class?: ClassValue;
+    onclose?: () => void;
+    footer?: Snippet;
+    icon?: Component;
+    testId?: string;
+};
+export type MetricDetail = {
+    label: string;
+    value: string | number;
+    color?: VariantColors;
+};
+export type MetricCardProps = {
+    title: string;
+    value: string | number;
+    details?: MetricDetail[];
+    percent?: number;
+    segments?: ProgressSegment[];
+    class?: ClassValue;
+    testId?: string;
+};

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

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

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

@@ -2,8 +2,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             progress?: import("tailwind-merge").ClassNameValue;
             detail?: import("tailwind-merge").ClassNameValue;
         };
@@ -12,8 +12,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             progress?: import("tailwind-merge").ClassNameValue;
             detail?: import("tailwind-merge").ClassNameValue;
         };
@@ -28,8 +28,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             progress?: import("tailwind-merge").ClassNameValue;
             detail?: import("tailwind-merge").ClassNameValue;
         };

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

@@ -0,0 +1,19 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+export type NavbarLinkItem = {
+    label: string;
+    href: string;
+    icon?: Component;
+    active?: boolean;
+    children?: NavbarLinkItem[];
+};
+export type NavbarProps = {
+    logo?: string | Component;
+    links?: NavbarLinkItem[];
+    class?: ClassValue;
+    brand?: Snippet;
+    children?: Snippet;
+    actions?: Snippet;
+    testId?: string;
+};

package/dist/layout/navbar/navbar-types.js

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

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

@@ -0,0 +1,59 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+export type MenuBar = {
+    collapsed: boolean;
+};
+export interface BaseNavigationItem {
+    label: string;
+}
+export interface WithIcon {
+    Icon?: Component;
+}
+export interface Activatable {
+    active?: boolean;
+}
+export interface LinkItem extends BaseNavigationItem, WithIcon, Activatable {
+    href: string;
+    meta?: string;
+    /**
+     * When true, the link will be active if the current route starts with this href.
+     * Example: href="/tushar" will be active for "/tushar/overview" and "/tushar/profile"
+     * @default false
+     */
+    matchPartial?: boolean;
+}
+export interface ParentItem extends BaseNavigationItem, Activatable {
+    children: LinkItem[];
+}
+export interface DividerItem {
+    type: 'horizontal-divider';
+}
+export type NavigationItem = LinkItem | ParentItem | DividerItem;
+export type LogoType = {
+    src?: string;
+    title: string;
+};
+export interface NavGroupProps {
+    labelArea: Snippet<[string, string]>;
+    active?: boolean;
+    children?: Snippet;
+    class?: ClassValue;
+    testId?: string;
+}
+export interface NavItemProps {
+    href: string;
+    active?: boolean;
+    children: Snippet<[ClassValue]>;
+    class?: ClassValue;
+    testId?: string;
+}
+export interface SidebarProps {
+    items?: NavigationItem[];
+    logo: LogoType;
+    /** Optional footer snippet rendered at the bottom of the sidebar */
+    footer?: Snippet<[{
+        collapsed: boolean;
+    }]>;
+    testId?: string;
+}

package/dist/layout/sidebar/sidebar-types.js

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

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

@@ -0,0 +1,82 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type DataRow = Record<string, any>;
+export type KeyType = keyof DataRow;
+export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
+export type TableColumn<T extends DataRow = any> = {
+    key: KeyType;
+    header: string;
+    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
+    sortable?: boolean;
+    sortKey?: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    class?: ClassValue;
+};
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState = {
+    column: string | null;
+    direction: SortDirection;
+};
+export type TableProps<T extends DataRow = any> = {
+    data: T[];
+    columns: TableColumn<T>[];
+    bordered?: boolean;
+    striped?: boolean;
+    pageSize?: number;
+    currentPage?: number;
+    totalItems?: number;
+    selectable?: boolean;
+    selected?: T[];
+    class?: ClassValue;
+    /** @deprecated Use wrapperClass instead */
+    wrapperclass?: ClassValue;
+    wrapperClass?: ClassValue;
+    /** @deprecated Use tableClass instead */
+    tableclass?: ClassValue;
+    tableClass?: ClassValue;
+    /** @deprecated Use theadClass instead */
+    theadclass?: ClassValue;
+    theadClass?: ClassValue;
+    /** @deprecated Use tbodyClass instead */
+    tbodyclass?: ClassValue;
+    tbodyClass?: ClassValue;
+    /** @deprecated Use trClass instead */
+    trclass?: ClassValue;
+    trClass?: ClassValue;
+    /** @deprecated Use thClass instead */
+    thclass?: ClassValue;
+    thClass?: ClassValue;
+    /** @deprecated Use tdClass instead */
+    tdclass?: ClassValue;
+    tdClass?: ClassValue;
+    /** @deprecated Use footerClass instead */
+    footerclass?: ClassValue;
+    footerClass?: ClassValue;
+    /** @deprecated Use paginationClass instead */
+    paginationclass?: ClassValue;
+    paginationClass?: ClassValue;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (sortState: SortState) => void;
+    onselect?: (selected: T[]) => void;
+    onpagechange?: (page: number) => void;
+    /** @deprecated Use rowClass instead */
+    rowclass?: (row: T, index: number) => ClassValue;
+    rowClass?: (row: T, index: number) => ClassValue;
+    loading?: boolean;
+    expandedContent?: Snippet<[T]>;
+    pagination?: boolean;
+    showPagination?: boolean;
+    showPageSize?: boolean;
+    pageSizeOptions?: number[];
+    onpagesizechange?: (pageSize: number) => void;
+    paginationPosition?: 'top' | 'bottom' | 'both';
+    paginationTemplate?: 'simple' | 'full';
+    title?: string;
+    subtitle?: string;
+    headerActions?: Snippet;
+    selectAllScope?: 'page' | 'all';
+    rowKey?: string;
+    expandable?: boolean;
+    testId?: string;
+};

package/dist/layout/table/table-types.js

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

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

@@ -0,0 +1,43 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export type TabItem = {
+    value: string;
+    label: string;
+    icon?: Component;
+    disabled?: boolean;
+};
+export type TabProps = {
+    value: string;
+    label: string;
+    icon?: Component;
+    selected?: boolean;
+    disabled?: boolean;
+    color?: VariantColors;
+    size?: VariantSizes;
+    variant?: 'line' | 'pill';
+    onclick?: (event: Event) => void;
+    testId?: string;
+};
+export type TabsGroupProps = {
+    tabs: TabItem[];
+    selected?: string;
+    color?: VariantColors;
+    size?: VariantSizes;
+    variant?: 'line' | 'pill';
+    class?: ClassValue;
+    listClass?: ClassValue;
+    triggerClass?: ClassValue;
+    panelClass?: ClassValue;
+    children?: Snippet<[active: string]>;
+    onchange?: (value: string) => void;
+    testId?: string;
+};
+export type TabContentProps = {
+    value: string;
+    persisted?: boolean;
+    panelClass?: ClassValue;
+    children?: Snippet<[value: string]>;
+    testId?: string;
+};

package/dist/layout/tabs/tabs-types.js

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

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.8.0",
+	"version": "1.9.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -122,7 +122,6 @@
 	},
 	"dependencies": {
 		"@friendofsvelte/mermaid": "^0.0.4",
-		"@friendofsvelte/state": "^0.0.6-ts",
 		"dayjs": "^1.11.19",
 		"echarts": "^6.0.0",
 		"marked": "^17.0.0",