@makolabs/ripple 1.7.11 → 1.8.0

package/dist/helper/deprecation.js

@@ -0,0 +1,24 @@
+const warned = new Set();
+/**
+ * Logs a console.warn once per component+prop combination when a deprecated prop is used.
+ * @param component - Component name (e.g. 'Modal', 'Card')
+ * @param props - The raw props object from $props()
+ * @param map - Map of deprecated prop names to their replacements (e.g. { titleclass: 'titleClass' })
+ */
+export function warnDeprecatedProps(component, props, map) {
+    for (const [oldName, newName] of Object.entries(map)) {
+        if (props[oldName] !== undefined && !warned.has(`${component}.${oldName}`)) {
+            warned.add(`${component}.${oldName}`);
+            console.warn(`[ripple-ui] ${component}: "${oldName}" is deprecated, use "${newName}" instead.`);
+        }
+    }
+}
+/**
+ * Reset warnings — only for testing.
+ * Note: In SSR, the warned Set persists across requests within the same process,
+ * so warnings will only fire once per server lifetime. This is acceptable for
+ * development-time deprecation notices.
+ */
+export function resetDeprecationWarnings() {
+    warned.clear();
+}

package/dist/helper/testid.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Builds a data-testid value.
+ * Pattern: [prefix-]component[-element][-index]
+ *
+ * @param component - Component name (e.g., 'button', 'input', 'modal')
+ * @param element - Optional sub-element suffix (e.g., 'label', 'close', 'trigger')
+ * @param prefix - Optional consumer-provided prefix for multi-instance disambiguation
+ * @param index - Optional index for dynamic lists (e.g., table rows, select options). Can be a compound string like "0-1" for nested lists.
+ */
+export declare function buildTestId(component: string, element?: string, prefix?: string, index?: number | string): string;

package/dist/helper/testid.js

@@ -0,0 +1,17 @@
+/**
+ * Builds a data-testid value.
+ * Pattern: [prefix-]component[-element][-index]
+ *
+ * @param component - Component name (e.g., 'button', 'input', 'modal')
+ * @param element - Optional sub-element suffix (e.g., 'label', 'close', 'trigger')
+ * @param prefix - Optional consumer-provided prefix for multi-instance disambiguation
+ * @param index - Optional index for dynamic lists (e.g., table rows, select options). Can be a compound string like "0-1" for nested lists.
+ */
+export function buildTestId(component, element, prefix, index) {
+    let id = prefix ? `${prefix}-${component}` : component;
+    if (element)
+        id += `-${element}`;
+    if (index !== undefined)
+        id += `-${index}`;
+    return id;
+}

package/dist/index.d.ts

@@ -14,7 +14,9 @@ export type VariantColors = (typeof Color)[keyof typeof Color];
  * - ChartColors: Record type mapping ChartColor enum to string values
  */
 export { Color, Size, ChartColor };
+export { buildTestId } from './helper/testid.js';
 import type { ClassValue } from 'tailwind-variants';
+export type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
 import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget, DOMAttributes } from 'svelte/elements';
@@ -27,6 +29,7 @@ export type BadgeProps = {
     class?: ClassValue;
     children: Snippet;
     onclose?: (event: MouseEvent) => void;
+    testId?: string;
 };
 export type BaseButtonProps = {
     class?: ClassValue;
@@ -37,6 +40,7 @@ export type BaseButtonProps = {
     disabled?: boolean | undefined | null;
     isLoading?: boolean;
     children?: Snippet;
+    testId?: string;
 };
 export type ButtonHTMLProps = {
     href?: never;
@@ -55,16 +59,29 @@ export type ModalProps = {
     description?: string;
     size?: VariantSizes;
     hideCloseButton?: boolean;
-    class?: string;
-    contentclass?: string;
-    bodyclass?: string;
-    titleclass?: string;
-    headerclass?: string;
-    backdropclass?: string;
-    footerclass?: string;
+    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;
 };
 export type DrawerProps = {
     open?: boolean;
@@ -72,16 +89,29 @@ export type DrawerProps = {
     title?: string;
     position?: 'left' | 'right';
     size?: VariantSizes;
-    class?: string;
-    backdropclass?: string;
-    contentclass?: string;
-    headerclass?: string;
-    bodyclass?: string;
-    titleclass?: string;
-    footerclass?: string;
+    class?: ClassValue;
+    /** @deprecated Use backdropClass instead */
+    backdropclass?: ClassValue;
+    backdropClass?: ClassValue;
+    /** @deprecated Use contentClass instead */
+    contentclass?: ClassValue;
+    contentClass?: ClassValue;
+    /** @deprecated Use headerClass instead */
+    headerclass?: ClassValue;
+    headerClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
+    bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use footerClass instead */
+    footerclass?: ClassValue;
+    footerClass?: ClassValue;
     children?: Snippet;
     header?: Snippet;
     footer?: Snippet;
+    testId?: string;
 };
 export type DropdownItem = {
     label: string;
@@ -115,6 +145,7 @@ export type DropdownMenuProps = {
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     width?: string;
     header?: DropHeaderConfig;
+    testId?: string;
 };
 export type SelectItem = {
     label: string;
@@ -144,24 +175,31 @@ export type SelectProps = {
     }) => void;
     onopen?: () => void;
     onclose?: () => void;
+    testId?: string;
 };
 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?: string;
+    class?: ClassValue;
     onclose?: () => void;
     footer?: Snippet;
     icon?: Component;
+    testId?: string;
 };
 export type MetricDetail = {
     label: string;
@@ -175,6 +213,7 @@ export type MetricCardProps = {
     percent?: number;
     segments?: ProgressSegment[];
     class?: ClassValue;
+    testId?: string;
 };
 export type { RankedCardProps, RankedCardItem, RankedCardMetric } from './layout/card/ranked-card.js';
 export type DataRow = Record<string, any>;
@@ -206,20 +245,40 @@ export type TableProps<T extends DataRow = any> = {
     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;
@@ -232,11 +291,16 @@ export type TableProps<T extends DataRow = any> = {
     title?: string;
     subtitle?: string;
     headerActions?: Snippet;
+    selectAllScope?: 'page' | 'all';
+    rowKey?: string;
+    expandable?: boolean;
+    testId?: string;
 };
 export type BreadcrumbItem = {
     label: string;
     href: string;
     current?: boolean;
+    icon?: Component;
 };
 export type BreadcrumbsProps = {
     items: BreadcrumbItem[];
@@ -244,11 +308,20 @@ export type BreadcrumbsProps = {
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     color?: VariantColors;
     icon?: Component;
-    class?: string;
-    listclass?: string;
-    itemclass?: string;
-    separatorclass?: string;
-    wrapperclass?: string;
+    class?: ClassValue;
+    /** @deprecated Use listClass instead */
+    listclass?: ClassValue;
+    listClass?: ClassValue;
+    /** @deprecated Use itemClass instead */
+    itemclass?: ClassValue;
+    itemClass?: ClassValue;
+    /** @deprecated Use separatorClass instead */
+    separatorclass?: ClassValue;
+    separatorClass?: ClassValue;
+    /** @deprecated Use wrapperClass instead */
+    wrapperclass?: ClassValue;
+    wrapperClass?: ClassValue;
+    testId?: string;
 };
 export type PageHeaderProps = {
     title: string;
@@ -256,8 +329,11 @@ export type PageHeaderProps = {
     breadcrumbs?: BreadcrumbItem[];
     children?: Snippet;
     class?: ClassValue;
+    /** @deprecated Use titleClass instead */
     titleclass?: ClassValue;
+    titleClass?: ClassValue;
     layout?: 'vertical' | 'horizontal';
+    testId?: string;
 };
 export type TabItem = {
     value: string;
@@ -265,17 +341,6 @@ export type TabItem = {
     icon?: Component;
     disabled?: boolean;
 };
-export type TabsProps = {
-    tabs: TabItem[];
-    selected?: string;
-    color?: VariantColors;
-    size?: VariantSizes;
-    class?: ClassValue;
-    listClass?: ClassValue;
-    panelClass?: ClassValue;
-    onchange?: (value: string) => void;
-    children?: Snippet<[string]>;
-};
 export type NavbarLinkItem = {
     label: string;
     href: string;
@@ -290,6 +355,7 @@ export type NavbarProps = {
     brand?: Snippet;
     children?: Snippet;
     actions?: Snippet;
+    testId?: string;
 };
 export type MenuBar = {
     collapsed: boolean;
@@ -329,12 +395,14 @@ export interface NavGroupProps {
     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[];
@@ -343,6 +411,7 @@ export interface SidebarProps {
     footer?: Snippet<[{
         collapsed: boolean;
     }]>;
+    testId?: string;
 }
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
@@ -372,6 +441,7 @@ export type TabProps = {
     size?: VariantSizes;
     variant?: 'line' | 'pill';
     onclick?: (event: Event) => void;
+    testId?: string;
 };
 export type TabsGroupProps = {
     tabs: TabItem[];
@@ -385,12 +455,14 @@ export type TabsGroupProps = {
     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;
 };
 export { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
@@ -541,9 +613,10 @@ export interface ChartProps<T> {
     colors?: Partial<ChartColors>;
     height?: string;
     width?: string;
-    class?: string;
+    class?: ClassValue;
     onpointclick?: (event: PointClickType<T>) => void;
     onchartrender?: (event: ChartRenderType<T>) => void;
+    testId?: string;
 }
 export { default as Chart } from './charts/Chart.svelte';
 export interface FileUploadProps {
@@ -564,11 +637,11 @@ export interface FileUploadProps {
     /**
      * CSS class for the component container
      */
-    class?: string;
+    class?: ClassValue;
     /**
      * CSS class for the dropzone
      */
-    dropzoneClass?: string;
+    dropzoneClass?: ClassValue;
     /**
      * ID for the file input element
      * @default 'file-upload'
@@ -582,11 +655,13 @@ export interface FileUploadProps {
      * Content to display when no files are uploaded
      */
     uploadContent?: Snippet;
+    testId?: string;
 }
 export interface FilePreviewProps {
     files: UploadedFile[];
     ondelete?: (fileId: string, index: number) => void;
-    class?: string;
+    class?: ClassValue;
+    testId?: string;
 }
 export interface UploadedFile {
     FileID: string;
@@ -619,13 +694,14 @@ export { default as CodeRenderer } from './ai/CodeRenderer.svelte';
 export * from './ai/content-detector.js';
 export interface FormProps<T extends Record<string, unknown>> {
     form: SuperForm<any>;
-    class?: string;
+    class?: ClassValue;
     method?: 'GET' | 'POST' | 'dialog' | 'get' | 'post' | 'DIALOG' | null | undefined;
     action?: string;
     enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null | undefined;
     autocomplete?: 'on' | 'off';
     novalidate?: boolean;
     children?: Snippet;
+    testId?: string;
 }
 export type InputProps = {
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'textarea';
@@ -635,10 +711,11 @@ export type InputProps = {
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
-    class?: string;
+    class?: ClassValue;
     size?: VariantSizes;
     id?: string;
     errors?: string[];
+    testId?: string;
 } & DOMAttributes<HTMLInputElement>;
 export type RadioOption = {
     value: string;
@@ -650,28 +727,30 @@ export type RadioInputsProps = {
     options: RadioOption[];
     value?: string;
     disabled?: boolean;
-    class?: string;
+    class?: ClassValue;
     size?: VariantSizes;
     color?: VariantColors;
     errors?: string[];
     required?: boolean;
+    testId?: string;
 };
 export type CheckboxProps = {
     name: string;
     label?: string;
     value?: boolean;
     disabled?: boolean;
-    class?: string;
+    class?: ClassValue;
     size?: VariantSizes;
     color?: VariantColors;
     errors?: string[];
     required?: boolean;
+    testId?: string;
 };
 export interface ToggleProps {
     name: string;
     label?: string;
     disabled?: boolean;
-    class?: string;
+    class?: ClassValue;
     value?: boolean;
     size?: VariantSizes;
     color?: VariantColors;
@@ -679,6 +758,7 @@ export interface ToggleProps {
     errors?: string[];
     offColor?: string;
     onColor?: string;
+    testId?: string;
 }
 export type CurrencyOption = {
     value: string;
@@ -690,13 +770,14 @@ export type NumberInputProps = {
     label?: string;
     placeholder?: string;
     size?: VariantSizes;
-    class?: string;
+    class?: ClassValue;
     unit?: string;
     units?: CurrencyOption[];
     errors?: string[];
     disabled?: boolean;
     dropdownicon?: Component;
     onunitchange?: (prevUnit: string, newUnit: string) => void;
+    testId?: string;
 };
 export interface DateRangeProps {
     startDate?: Date;
@@ -704,7 +785,7 @@ export interface DateRangeProps {
     minDate?: Date;
     maxDate?: Date;
     disabled?: boolean;
-    class?: string;
+    class?: ClassValue;
     placeholder?: string;
     startLabel?: string;
     endLabel?: string;
@@ -715,6 +796,7 @@ export interface DateRangeProps {
     }) => void;
     id?: string;
     name?: string;
+    testId?: string;
 }
 export interface DateSelectEvent {
     startDate: Date | null;
@@ -727,10 +809,11 @@ export type TagsProps = {
     errors?: string[];
     placeholder?: string;
     size?: VariantSizes;
-    class?: string;
+    class?: ClassValue;
     suggestions?: string[];
     onaddtag?: (tag: string) => void;
     onremovetag?: (tag: string) => void;
+    testId?: string;
 };
 export { default as Form } from './forms/Form.svelte';
 export { default as Input } from './forms/Input.svelte';
@@ -755,7 +838,7 @@ export interface SliderProps {
     disabled?: boolean;
     size?: VariantSizes;
     errors?: string[];
-    class?: string;
+    class?: ClassValue;
     min?: number;
     max?: number;
     step?: number;
@@ -769,6 +852,7 @@ export interface SliderProps {
     formatOptions?: Intl.NumberFormatOptions & {
         notation?: NotationType;
     };
+    testId?: string;
 }
 export type ProgressSegment = {
     value: number;
@@ -786,8 +870,9 @@ export type ProgressProps = {
     showLabels?: boolean;
     showValues?: boolean;
     class?: ClassValue;
-    labelClass?: string;
-    barClass?: string;
+    labelClass?: ClassValue;
+    barClass?: ClassValue;
+    testId?: string;
 };
 export { default as Progress } from './elements/progress/Progress.svelte';
 export type AccordionProps = {
@@ -799,14 +884,21 @@ export type AccordionProps = {
     open?: boolean;
     color?: VariantColors;
     class?: ClassValue;
+    /** @deprecated Use titleClass instead */
     titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
     bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    /** @deprecated Use headerClass instead */
     headerclass?: ClassValue;
+    headerClass?: ClassValue;
     icon?: Component;
     iconPosition?: 'start' | 'end';
     bordered?: boolean;
     onexpand?: () => void;
     oncollapse?: () => void;
+    testId?: string;
 };
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
 export interface TimelineItem {
@@ -825,9 +917,10 @@ export type RadioPillProps = {
     options: RadioOption[];
     value?: string;
     label?: string;
-    class?: string;
+    class?: ClassValue;
     errors?: string[];
     onchange?: (value: string) => void;
+    testId?: string;
 };
 export type FilterTab = {
     value: string;
@@ -849,6 +942,7 @@ export type CompactFiltersProps = {
     summaryClass?: ClassValue;
     expandedClass?: ClassValue;
     FilterIcon?: Component;
+    testId?: string;
 };
 export type ActivityItemBadge = {
     text: string;
@@ -875,6 +969,7 @@ export type ActivityListProps = {
     itemClass?: ClassValue;
     onItemClick?: (item: ActivityItem, index: number) => void;
     children?: Snippet;
+    testId?: string;
 };
 export { CompactFilters } from './filters/index.js';
 export * from './file-browser/index.js';
@@ -920,6 +1015,7 @@ export interface FileBrowserProps {
         selectedFiles: string[];
         navToFileFolder: (fileKey: string) => void;
     }) => any;
+    testId?: string;
 }
 export interface GetUsersOptions {
     page: number;
@@ -983,6 +1079,7 @@ export interface UserTableProps {
     onEdit: (user: User) => void;
     onDelete: (userId: string) => void;
     class?: ClassValue;
+    testId?: string;
 }
 export interface UserModalProps {
     open?: boolean;
@@ -993,6 +1090,7 @@ export interface UserModalProps {
     onSave: (user: User, mode: 'create' | 'edit') => void | Promise<void>;
     onClose?: () => void;
     class?: ClassValue;
+    testId?: string;
 }
 export interface UserViewModalProps {
     open?: boolean;
@@ -1003,6 +1101,7 @@ export interface UserViewModalProps {
     onRegenerateApiKey?: (userId: string) => Promise<void>;
     onClose: () => void;
     class?: ClassValue;
+    testId?: string;
 }
 /**
  * User Management Adapter Interface
@@ -1068,6 +1167,7 @@ export interface UserManagementProps {
      */
     permissions?: Permission[];
     class?: ClassValue;
+    testId?: string;
 }
 export interface FormErrors {
     [key: string]: string;

package/dist/index.js

@@ -8,6 +8,7 @@ import { ChartColor, Color, Size } from './variants.js';
  * - ChartColors: Record type mapping ChartColor enum to string values
  */
 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';