@juv/codego-react-ui 3.4.6 → 3.4.8

package/dist/index.d.cts

@@ -104,6 +104,26 @@ interface BreadcrumbProps {
 }
 declare function Breadcrumb({ items, separator, maxItems, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
+interface RepeaterField {
+    type: "input" | "image" | "attachment";
+    key: string;
+    label?: string;
+    placeholder?: string;
+}
+interface RepeaterProps<T> {
+    items: T[];
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    /** Structured field definitions — when provided, renders fields automatically */
+    fields?: RepeaterField[];
+    /** Called when a field value changes: (rowIndex, key, value) */
+    onFieldChange?: (index: number, key: string, value: any) => void;
+    addButtonText?: string;
+    className?: string;
+}
+declare function Repeater<T extends Record<string, any>>({ items, onAdd, onRemove, renderItem, fields, onFieldChange, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+
 type ToastVariant = "default" | "success" | "error" | "warning" | "info";
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 interface ToastItem {
@@ -289,15 +309,46 @@ interface UseServerTableReturn<T> {
     error: string | null;
     goToPage: (page: number) => void;
     reload: () => void;
-    /** Manually trigger a data refresh (alias for reload, respects refresh option) */
     refresh: () => void;
-    searchValue?: string;
-    onSearchChange?: (value: string) => void;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    page: number;
+    onPageChange: (page: number) => void;
+    sort: {
+        key: string;
+        direction: "asc" | "desc";
+    }[];
+    onSortChange: (sort: {
+        key: string;
+        direction: "asc" | "desc";
+    }[]) => void;
+    onRowClick?: (item: T) => void;
+    onRowDoubleClick?: (item: T) => void;
+    rowClassName?: (item: T) => string;
+    expandable?: boolean;
+    renderExpanded?: (item: T) => React.ReactNode;
+    columnVisibility?: Record<string, boolean>;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    exportable?: boolean;
+    onExport?: (type: "csv" | "excel" | "pdf") => void;
+    virtualized?: boolean;
+    draggable?: boolean;
+    onRowReorder?: (data: T[]) => void;
+    keyboardNavigation?: boolean;
+    theme?: "light" | "dark" | "auto";
+    meta?: Record<string, any>;
+    actions?: Record<string, (item: T) => void>;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    clientPagination?: boolean;
+    itemsPerPage?: number;
+    selectable?: boolean;
+    onBulkDelete?: (selectedIds: string[]) => void;
+    bulkDeleteBaseUrl?: string;
+    idKey?: keyof T;
+    defaultActions?: DefaultActionsConfig<T>;
+    className?: string;
 }
-/**
- * Server-side pagination prop passed to the Table component
- * @interface ServerPaginationProp
- */
 interface ServerPaginationProp {
     pagination: ServerPagination;
     currentPage: number;
@@ -325,6 +376,11 @@ declare function useServerTable<T extends Record<string, any>>({ url, params, en
  * @type {ActionFieldType}
  */
 type ActionFieldType = "input" | "password" | "textarea" | "checkbox" | "toggle" | "select" | "radio" | "slider" | "tag-input" | "otp" | "combobox" | "color-picker" | "date-range" | "rich-text" | "file-upload" | "repeater";
+/**
+ * Display type for viewForm fields — controls how the value is rendered in the View modal
+ * @type {ViewFieldType}
+ */
+type ViewFieldType = "text" | "image" | "checkbox" | "toggle" | "attachment" | "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs" | "repeater";
 /**
  * Configuration for a single field in action forms (edit/view modals)
  * @interface ActionField
@@ -350,6 +406,8 @@ interface ActionField {
     step?: number;
     /** Number of OTP digits for type="otp" */
     digits?: number;
+    /** Field definitions for type="repeater" / viewType="repeater" */
+    repeaterFields?: RepeaterField[];
     /** Validation: regex or built-in preset ("email" | "url" | "numeric" | "alpha" | "alphanumeric") */
     validation?: RegExp | "email" | "url" | "numeric" | "alpha" | "alphanumeric";
     /** Custom message shown when validation fails */
@@ -364,6 +422,17 @@ interface ActionField {
     component?: React.ReactNode;
     /** Hide this field from view/edit forms */
     hidden?: boolean;
+    /**
+     * Display type for viewForm — controls how the value is rendered in the View modal.
+     * Overrides type for view-only rendering.
+     * "text" | "image" | "checkbox" | "toggle" | "attachment" |
+     * "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs"
+     */
+    viewType?: ViewFieldType;
+    /** Width applied to the field value in the View modal (e.g. 120, "100%", "8rem") */
+    width?: number | string;
+    /** Height applied to the field value in the View modal (e.g. 80, "5rem") */
+    height?: number | string;
 }
 /**
  * Configuration for customizing the appearance of action buttons (View/Edit/Delete)
@@ -438,6 +507,8 @@ interface DefaultActionsConfig<T> {
     editForm?: ActionField[];
     /** Fields rendered in the View modal. Auto-derived from row keys when omitted. */
     viewForm?: ActionField[];
+    /** Grid columns for the view form layout (e.g. 2 = two-column grid). Default single column. */
+    viewFormGrid?: number;
     /** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
     editFormGrid?: number;
     /** Size of the View / Edit / Delete / extra action buttons. Default "xs". */
@@ -537,7 +608,7 @@ type ModalWidth = keyof typeof MODAL_WIDTH;
 interface Column<T> {
     key: keyof T | string;
     title: string;
-    type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox";
+    type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox" | "text-url";
     stackProps?: {
         limit?: number;
         stacked?: boolean;
@@ -564,6 +635,18 @@ interface Column<T> {
     tooltip?: (item: T) => string;
     /** Allow copying cell content */
     copyable?: boolean;
+    /**
+     * For type="text-url": static URL to navigate to. If omitted, uses the cell value as the URL.
+     * Supports dynamic URL via function: (item) => string
+     */
+    redirect?: string | ((item: T) => string);
+    /** For type="text-url": open link in a new tab. Default false. */
+    openNewTab?: boolean;
+    /**
+     * For type="text-url": underline color.
+     * Accepts: "primary" | "info" | "success" | "warning" | "danger" | any hex | rgb | rgba string.
+     */
+    underlineColor?: "primary" | "info" | "success" | "warning" | "danger" | string;
 }
 /**
  * Props for the Table component
@@ -606,15 +689,30 @@ interface TableProps<T> {
     actions?: Record<string, (item: T) => void>;
     searchable?: boolean;
     searchPlaceholder?: string;
-    pagination?: boolean;
+    clientPagination?: boolean;
     itemsPerPage?: number;
     selectable?: boolean;
     onBulkDelete?: (selectedIds: string[]) => void;
     idKey?: keyof T;
+    /**
+     * Base URL for built-in bulk delete actions.
+     * DELETE all   → `{bulkDeleteBaseUrl}/delete/all`
+     * DELETE selected → `{bulkDeleteBaseUrl}/delete/{ids}/selected`
+     */
+    bulkDeleteBaseUrl?: string;
     /** When provided, appends an Actions column with View / Edit / Delete buttons */
     defaultActions?: DefaultActionsConfig<T>;
     /** Pass the serverPagination object from useServerTable to enable server-side pagination */
     serverPagination?: ServerPaginationProp | null;
+    /**
+     * Visual variant of the table.
+     * - `"default"` — bordered card with subtle bg (original style)
+     * - `"zebra"` — alternating row colors for easy scanning
+     * - `"card"` — each row rendered as an individual card
+     * - `"glass"` — glassmorphism: transparent + backdrop blur
+     * - `"soft"` — neumorphic soft shadows, no hard borders
+     */
+    variant?: "default" | "zebra" | "card" | "glass" | "soft";
     className?: string;
 }
 /**
@@ -634,7 +732,7 @@ interface TableProps<T> {
  *     { key: "active", type: "toggle", onChange: handleToggle },
  *   ]}
  *   searchable
- *   pagination
+ *   clientPagination
  *   selectable
  *   onBulkDelete={handleBulkDelete}
  *   defaultActions={{
@@ -644,7 +742,7 @@ interface TableProps<T> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any>>({ data, columns, searchable, searchPlaceholder, pagination, itemsPerPage, selectable, onBulkDelete, idKey, defaultActions, serverPagination, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type BulletinPriority = "low" | "medium" | "high" | "urgent";
 type BulletinLayout = "grid" | "list" | "masonry";
@@ -1925,16 +2023,6 @@ interface RadioGroupProps {
 }
 declare function RadioGroup({ options, value: controlledValue, defaultValue, onChange, variant, size, orientation, name, className, required, error, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
-interface RepeaterProps<T> {
-    items: T[];
-    onAdd: () => void;
-    onRemove: (index: number) => void;
-    renderItem: (item: T, index: number) => React.ReactNode;
-    addButtonText?: string;
-    className?: string;
-}
-declare function Repeater<T>({ items, onAdd, onRemove, renderItem, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
-
 interface ResizablePanelsProps {
     children: [React.ReactNode, React.ReactNode];
     orientation?: "horizontal" | "vertical";

package/dist/index.d.ts

@@ -104,6 +104,26 @@ interface BreadcrumbProps {
 }
 declare function Breadcrumb({ items, separator, maxItems, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
+interface RepeaterField {
+    type: "input" | "image" | "attachment";
+    key: string;
+    label?: string;
+    placeholder?: string;
+}
+interface RepeaterProps<T> {
+    items: T[];
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    /** Structured field definitions — when provided, renders fields automatically */
+    fields?: RepeaterField[];
+    /** Called when a field value changes: (rowIndex, key, value) */
+    onFieldChange?: (index: number, key: string, value: any) => void;
+    addButtonText?: string;
+    className?: string;
+}
+declare function Repeater<T extends Record<string, any>>({ items, onAdd, onRemove, renderItem, fields, onFieldChange, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+
 type ToastVariant = "default" | "success" | "error" | "warning" | "info";
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 interface ToastItem {
@@ -289,15 +309,46 @@ interface UseServerTableReturn<T> {
     error: string | null;
     goToPage: (page: number) => void;
     reload: () => void;
-    /** Manually trigger a data refresh (alias for reload, respects refresh option) */
     refresh: () => void;
-    searchValue?: string;
-    onSearchChange?: (value: string) => void;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    page: number;
+    onPageChange: (page: number) => void;
+    sort: {
+        key: string;
+        direction: "asc" | "desc";
+    }[];
+    onSortChange: (sort: {
+        key: string;
+        direction: "asc" | "desc";
+    }[]) => void;
+    onRowClick?: (item: T) => void;
+    onRowDoubleClick?: (item: T) => void;
+    rowClassName?: (item: T) => string;
+    expandable?: boolean;
+    renderExpanded?: (item: T) => React.ReactNode;
+    columnVisibility?: Record<string, boolean>;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    exportable?: boolean;
+    onExport?: (type: "csv" | "excel" | "pdf") => void;
+    virtualized?: boolean;
+    draggable?: boolean;
+    onRowReorder?: (data: T[]) => void;
+    keyboardNavigation?: boolean;
+    theme?: "light" | "dark" | "auto";
+    meta?: Record<string, any>;
+    actions?: Record<string, (item: T) => void>;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    clientPagination?: boolean;
+    itemsPerPage?: number;
+    selectable?: boolean;
+    onBulkDelete?: (selectedIds: string[]) => void;
+    bulkDeleteBaseUrl?: string;
+    idKey?: keyof T;
+    defaultActions?: DefaultActionsConfig<T>;
+    className?: string;
 }
-/**
- * Server-side pagination prop passed to the Table component
- * @interface ServerPaginationProp
- */
 interface ServerPaginationProp {
     pagination: ServerPagination;
     currentPage: number;
@@ -325,6 +376,11 @@ declare function useServerTable<T extends Record<string, any>>({ url, params, en
  * @type {ActionFieldType}
  */
 type ActionFieldType = "input" | "password" | "textarea" | "checkbox" | "toggle" | "select" | "radio" | "slider" | "tag-input" | "otp" | "combobox" | "color-picker" | "date-range" | "rich-text" | "file-upload" | "repeater";
+/**
+ * Display type for viewForm fields — controls how the value is rendered in the View modal
+ * @type {ViewFieldType}
+ */
+type ViewFieldType = "text" | "image" | "checkbox" | "toggle" | "attachment" | "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs" | "repeater";
 /**
  * Configuration for a single field in action forms (edit/view modals)
  * @interface ActionField
@@ -350,6 +406,8 @@ interface ActionField {
     step?: number;
     /** Number of OTP digits for type="otp" */
     digits?: number;
+    /** Field definitions for type="repeater" / viewType="repeater" */
+    repeaterFields?: RepeaterField[];
     /** Validation: regex or built-in preset ("email" | "url" | "numeric" | "alpha" | "alphanumeric") */
     validation?: RegExp | "email" | "url" | "numeric" | "alpha" | "alphanumeric";
     /** Custom message shown when validation fails */
@@ -364,6 +422,17 @@ interface ActionField {
     component?: React.ReactNode;
     /** Hide this field from view/edit forms */
     hidden?: boolean;
+    /**
+     * Display type for viewForm — controls how the value is rendered in the View modal.
+     * Overrides type for view-only rendering.
+     * "text" | "image" | "checkbox" | "toggle" | "attachment" |
+     * "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs"
+     */
+    viewType?: ViewFieldType;
+    /** Width applied to the field value in the View modal (e.g. 120, "100%", "8rem") */
+    width?: number | string;
+    /** Height applied to the field value in the View modal (e.g. 80, "5rem") */
+    height?: number | string;
 }
 /**
  * Configuration for customizing the appearance of action buttons (View/Edit/Delete)
@@ -438,6 +507,8 @@ interface DefaultActionsConfig<T> {
     editForm?: ActionField[];
     /** Fields rendered in the View modal. Auto-derived from row keys when omitted. */
     viewForm?: ActionField[];
+    /** Grid columns for the view form layout (e.g. 2 = two-column grid). Default single column. */
+    viewFormGrid?: number;
     /** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
     editFormGrid?: number;
     /** Size of the View / Edit / Delete / extra action buttons. Default "xs". */
@@ -537,7 +608,7 @@ type ModalWidth = keyof typeof MODAL_WIDTH;
 interface Column<T> {
     key: keyof T | string;
     title: string;
-    type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox";
+    type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox" | "text-url";
     stackProps?: {
         limit?: number;
         stacked?: boolean;
@@ -564,6 +635,18 @@ interface Column<T> {
     tooltip?: (item: T) => string;
     /** Allow copying cell content */
     copyable?: boolean;
+    /**
+     * For type="text-url": static URL to navigate to. If omitted, uses the cell value as the URL.
+     * Supports dynamic URL via function: (item) => string
+     */
+    redirect?: string | ((item: T) => string);
+    /** For type="text-url": open link in a new tab. Default false. */
+    openNewTab?: boolean;
+    /**
+     * For type="text-url": underline color.
+     * Accepts: "primary" | "info" | "success" | "warning" | "danger" | any hex | rgb | rgba string.
+     */
+    underlineColor?: "primary" | "info" | "success" | "warning" | "danger" | string;
 }
 /**
  * Props for the Table component
@@ -606,15 +689,30 @@ interface TableProps<T> {
     actions?: Record<string, (item: T) => void>;
     searchable?: boolean;
     searchPlaceholder?: string;
-    pagination?: boolean;
+    clientPagination?: boolean;
     itemsPerPage?: number;
     selectable?: boolean;
     onBulkDelete?: (selectedIds: string[]) => void;
     idKey?: keyof T;
+    /**
+     * Base URL for built-in bulk delete actions.
+     * DELETE all   → `{bulkDeleteBaseUrl}/delete/all`
+     * DELETE selected → `{bulkDeleteBaseUrl}/delete/{ids}/selected`
+     */
+    bulkDeleteBaseUrl?: string;
     /** When provided, appends an Actions column with View / Edit / Delete buttons */
     defaultActions?: DefaultActionsConfig<T>;
     /** Pass the serverPagination object from useServerTable to enable server-side pagination */
     serverPagination?: ServerPaginationProp | null;
+    /**
+     * Visual variant of the table.
+     * - `"default"` — bordered card with subtle bg (original style)
+     * - `"zebra"` — alternating row colors for easy scanning
+     * - `"card"` — each row rendered as an individual card
+     * - `"glass"` — glassmorphism: transparent + backdrop blur
+     * - `"soft"` — neumorphic soft shadows, no hard borders
+     */
+    variant?: "default" | "zebra" | "card" | "glass" | "soft";
     className?: string;
 }
 /**
@@ -634,7 +732,7 @@ interface TableProps<T> {
  *     { key: "active", type: "toggle", onChange: handleToggle },
  *   ]}
  *   searchable
- *   pagination
+ *   clientPagination
  *   selectable
  *   onBulkDelete={handleBulkDelete}
  *   defaultActions={{
@@ -644,7 +742,7 @@ interface TableProps<T> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any>>({ data, columns, searchable, searchPlaceholder, pagination, itemsPerPage, selectable, onBulkDelete, idKey, defaultActions, serverPagination, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type BulletinPriority = "low" | "medium" | "high" | "urgent";
 type BulletinLayout = "grid" | "list" | "masonry";
@@ -1925,16 +2023,6 @@ interface RadioGroupProps {
 }
 declare function RadioGroup({ options, value: controlledValue, defaultValue, onChange, variant, size, orientation, name, className, required, error, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
-interface RepeaterProps<T> {
-    items: T[];
-    onAdd: () => void;
-    onRemove: (index: number) => void;
-    renderItem: (item: T, index: number) => React.ReactNode;
-    addButtonText?: string;
-    className?: string;
-}
-declare function Repeater<T>({ items, onAdd, onRemove, renderItem, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
-
 interface ResizablePanelsProps {
     children: [React.ReactNode, React.ReactNode];
     orientation?: "horizontal" | "vertical";