@instincthub/react-ui 0.0.4 → 0.0.6

package/dist/src/types/components/ui/Dropdown.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { DropdownPropsType } from "@/types";
+/**
+ * A dropdown component that allows users to select one or multiple options
+ * @example
+ * ```tsx
+ * const options = [
+ *  {
+ *    value: "js",
+ *    label: "JavaScript",
+ *    icon: <CodeOutlinedIcon />,
+ *    description: "Popular",
+ *  },
+ *  {
+ *    value: "py",
+ *    label: "Python",
+ *    icon: <CodeOutlinedIcon />,
+ *    description: "Popular",
+ *  }
+ * ]
+ * <Dropdown
+ *  label="Dropdown"
+ *  name="dropdown"
+ *  key_name="id"
+ *  options={options}
+ *  selectedValue={selectedValue}
+ *  onChange={handleChange}
+ *  placeholder="Select an option"
+ *  className="ihub-dropdown"
+ *  isMulti={true}
+ *  isSearchable={true}
+ *  noOptionsMessage="No options available"
+ *  isDisabled={false}
+ *  maxHeight={250}
+ *  renderOption={renderOption}
+ * />
+ *
+ * @prop {string} label - The label text for the dropdown
+ * @prop {string} name - The name attribute for the dropdown
+ * @prop {string} key_name - The key name of the dropdown (description, name key, etc)
+ * @prop {boolean} required - Whether the dropdown is required
+ * @prop {DropdownOptionType[]} options - The options to display in the dropdown
+ * @prop {string | string[]} selectedValue - The value(s) currently selected in the dropdown
+ * @prop {function} onChange - The function to call when the selected value changes
+ * @prop {string} placeholder - The placeholder text for the dropdown
+ * @prop {string} className - The class name for the dropdown
+ * @prop {boolean} isMulti - Whether the dropdown allows multiple selections
+ * @prop {boolean} isSearchable - Whether the dropdown allows searching
+ * @prop {string} noOptionsMessage - The message to display when there are no options
+ * @prop {boolean} isDisabled - Whether the dropdown is disabled
+ * @prop {number} maxHeight - The maximum height of the dropdown menu
+ * @prop {function} renderOption - The function to render the option label
+ */
+declare const Dropdown: React.FC<DropdownPropsType>;
+export default Dropdown;

package/dist/src/types/components/ui/OrDivider.d.ts

@@ -0,0 +1,5 @@
+interface OrDividerProps {
+    labels?: string;
+}
+export default function OrDivider({ labels }: OrDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/types/components/ui/cards/Card.d.ts

@@ -0,0 +1,7 @@
+import { CardPropsType } from "@/types/card";
+/**
+ * Basic Card component - foundation for all card variants
+ */
+declare function CardComponent({ title, accentHeader, footer, children, className, accent, darkTheme, style, size, border, shadow, onClick, }: CardPropsType): import("react/jsx-runtime").JSX.Element;
+export declare const Card: typeof CardComponent;
+export default CardComponent;

package/dist/src/types/components/ui/cards/CardGrid.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Card Grid - Grid layout for cards
+ */
+declare const CardGrid: ({ children, className, }: {
+    children: React.ReactNode;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardGrid;

package/dist/src/types/components/ui/cards/CardList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Card List - Vertical list layout for cards
+ */
+declare const CardList: ({ children, className, }: {
+    children: React.ReactNode;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardList;

package/dist/src/types/components/ui/cards/FeatureCard.d.ts

@@ -0,0 +1,6 @@
+import { FeatureCardPropsType } from "@/types/card";
+/**
+ * Feature Card - Highlights features with icons
+ */
+declare const FeatureCard: ({ icon, title, description, children, ...cardProps }: FeatureCardPropsType) => import("react/jsx-runtime").JSX.Element;
+export default FeatureCard;

package/dist/src/types/components/ui/cards/HorizontalCard.d.ts

@@ -0,0 +1,6 @@
+import { MediaCardPropsType } from "@/types/card";
+/**
+ * Horizontal Media Card - Card with side-by-side layout
+ */
+declare const HorizontalCard: (props: MediaCardPropsType) => import("react/jsx-runtime").JSX.Element;
+export default HorizontalCard;

package/dist/src/types/components/ui/cards/MediaCard.d.ts

@@ -0,0 +1,6 @@
+import { MediaCardPropsType } from "@/types/card";
+/**
+ * Media Card - Card with an image or video
+ */
+declare const MediaCard: ({ imageUrl, imageAlt, badge, ...cardProps }: MediaCardPropsType) => import("react/jsx-runtime").JSX.Element;
+export default MediaCard;

package/dist/src/types/components/ui/cards/PricingCard.d.ts

@@ -0,0 +1,6 @@
+import { PricingCardPropsType } from "@/types/card";
+/**
+ * Pricing Card - For subscription plans
+ */
+declare const PricingCard: ({ title, price, period, features, buttonText, onButtonClick, recommended, ...cardProps }: PricingCardPropsType) => import("react/jsx-runtime").JSX.Element;
+export default PricingCard;

package/dist/src/types/components/ui/cards/ProfileCard.d.ts

@@ -0,0 +1,6 @@
+import { ProfileCardPropsType } from "@/types/card";
+/**
+ * Profile Card - For displaying user information
+ */
+declare const ProfileCard: ({ imageUrl, name, role, bio, socialLinks, children, ...cardProps }: ProfileCardPropsType) => import("react/jsx-runtime").JSX.Element;
+export default ProfileCard;

package/dist/src/types/components/ui/cards/index.d.ts

@@ -0,0 +1,9 @@
+import CardComponent from "./Card";
+import CardList from "./CardList";
+import CardGrid from "./CardGrid";
+import FeatureCard from "./FeatureCard";
+import HorizontalCard from "./HorizontalCard";
+import MediaCard from "./MediaCard";
+import PricingCard from "./PricingCard";
+import ProfileCard from "./ProfileCard";
+export { CardComponent as Card, CardList, CardGrid, FeatureCard, HorizontalCard, MediaCard, PricingCard, ProfileCard, };

package/dist/src/types/components/ui/charts/ChartConfigurator.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ChartDataPointType, ChartType } from "@/types/charts";
+interface ConfiguratorProps {
+    /** Initial data for the chart */
+    initialData: ChartDataPointType[];
+    /** Initial type of chart */
+    initialType?: ChartType;
+    /** Chart title */
+    title?: string;
+    /** Available data keys for selection */
+    availableDataKeys?: string[];
+    /** Chart height in pixels */
+    height?: number;
+    /** Custom class name */
+    className?: string;
+}
+declare const ChartConfigurator: React.FC<ConfiguratorProps>;
+export default ChartConfigurator;

package/dist/src/types/components/ui/charts/InstinctHubChart.d.ts

@@ -0,0 +1,26 @@
+import { ChartPropsType } from "../../../types/charts";
+/**
+ *
+ * @example
+ * ```tsx
+ * <InstinctHubChart
+ *  type="line"
+ *  data={data}
+ *  dataKeys={["value"]}
+ *  title="My Chart"
+ * />
+ * ```
+ * @param {ChartPropsType} props - The props for the InstinctHubChart component.
+ * @param {string} props.type - The type of chart to render: 'line' | 'bar' | 'pie' | 'area' | 'barStackedBySign'.
+ * @param {Array} props.data - The data to render in the chart.
+ * @param {Array} props.dataKeys - The keys of the data to render in the chart.
+ * @param {string} props.title - The title of the chart.
+ * @param {number} props.height - The height of the chart.
+ * @param {Array} props.colors - The colors of the chart.
+ * @param {boolean} props.showLegend - Whether to show the legend of the chart.
+ * @param {boolean} props.showGrid - Whether to show the grid of the chart.
+ * @param {string} props.className - The class name of the chart.
+ *
+ */
+declare const InstinctHubChart: ({ type, data, dataKeys, title, height, colors, showLegend, showGrid, className, }: ChartPropsType) => import("react/jsx-runtime").JSX.Element;
+export default InstinctHubChart;

package/dist/src/types/components/ui/charts/InstinctHubChartDashboard.d.ts

@@ -0,0 +1,6 @@
+interface DashboardProps {
+    /** Custom class name to apply to the dashboard container */
+    className?: string;
+}
+declare const InstinctHubChartDashboard: ({ className }: DashboardProps) => import("react/jsx-runtime").JSX.Element;
+export default InstinctHubChartDashboard;

package/dist/src/types/components/ui/charts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as InstinctHubChart } from "./InstinctHubChart";
+export { default as InstinctHubChartDashboard } from "./InstinctHubChartDashboard";
+export { default as ChartConfigurator } from "./ChartConfigurator";

package/dist/src/types/components/ui/create-button/CreateButton.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+interface CreateButtonProps {
+    /** Text to display on the button */
+    label?: string;
+    /** Search parameter key-value to add to URL */
+    searchParam?: {
+        key: string;
+        value: string;
+    };
+    /** Fallback function when no searchParam is provided */
+    onClick?: () => void;
+    /** Button variant style */
+    variant?: "primary" | "outlined" | "important" | "danger";
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Button size */
+    size?: "small" | "medium" | "large";
+    /** Show loading state */
+    loading?: boolean;
+    /** Icon to display before text */
+    icon?: React.ReactNode;
+    /** Whether to show animation effects */
+    animated?: boolean;
+    /** Additional HTML button attributes */
+    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+/**
+ * Modern create button component with URL search parameter support
+ * @example
+ * ```tsx
+ * <CreateButton
+ *   label="Create Course"
+ *   searchParam={{ key: "create", value: "course" }}
+ *   variant="important"
+ *   animated={true}
+ * />
+ * @param props - Component props
+ * @param props.label - Button text
+ * @param props.searchParam - Search parameter to add to URL
+ * @param props.onClick - Callback function for click events
+ * @param props.variant - Button variant style
+ * @param props.disabled - Disable the button
+ * @param props.className - Additional CSS class name
+ * @param props.size - Button size
+ * @param props.loading - Loading state
+ * @param props.icon - Icon to display before text
+ * @param props.animated - Animated button spinner
+ * @param props.buttonProps - Additional button props
+ * @returns JSX.Element
+ */
+declare const CreateButton: React.FC<CreateButtonProps>;
+export default CreateButton;

package/dist/src/types/components/ui/create-button/CreateButtonExample.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CreateButtonExample: React.FC;
+export default CreateButtonExample;

package/dist/src/types/components/ui/dialogs/Dialog.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface DialogProps {
+    /** Whether the dialog is currently visible */
+    isOpen: boolean;
+    /** Function to call when dialog should close */
+    onClose: () => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog content */
+    children: React.ReactNode;
+    /** Optional footer content (typically action buttons) */
+    footer?: React.ReactNode;
+    /** Optional max width of the dialog */
+    maxWidth?: string;
+    /** Optional CSS class to add to the dialog */
+    className?: string;
+}
+/**
+ * A reusable dialog component that handles keyboard accessibility
+ * and focus management.
+ */
+declare const Dialog: React.FC<DialogProps>;
+export default Dialog;

package/dist/src/types/components/ui/editor/CustomTextEditor.d.ts

@@ -1,12 +1,45 @@
 interface TextEditorProps {
-    onChange: (html: string) => void;
-    setIsEditing: (html: boolean) => void;
-    isEditing: boolean;
-    content: string;
+    label?: string;
+    name?: string;
+    note?: string;
+    onChange?: (html: string) => void;
+    setIsEditing?: (html: boolean) => void;
+    isEditing?: boolean;
+    content?: string;
     charLimit?: number;
     placeholder?: string;
     lastUpdated?: string;
     showPreviewBtn?: boolean;
+    required?: boolean;
 }
-export default function CustomTextEditor({ onChange, setIsEditing, content, isEditing, charLimit, placeholder, lastUpdated, showPreviewBtn, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * CustomTextEditor is a component that allows you to create a text editor with a menu bar and a preview button.
+ * It is a wrapper around the Tiptap editor.
+ * It is used to create a text editor with a menu bar and a preview button.
+ * @example
+ * ```tsx
+ * <CustomTextEditor
+ *  label="Content"
+ *  name="content"
+ *  onChange={handleChange}
+ *  content={content}
+ * />
+ * ```
+ * @param {TextEditorProps} props - The props for the CustomTextEditor component.
+ * @param {string} props.label - The label for the editor.
+ * @param {string} props.name - The name for the editor.
+ * @param {function} props.onChange - The function to call when the editor content changes.
+ * @param {string} props.content - The content for the editor.
+ * @param {boolean} props.isEditing - Whether the editor is in editing mode.
+ * @param {number} props.charLimit - The character limit for the editor.
+ * @param {string} props.placeholder - The placeholder for the editor.
+ * @param {string} props.lastUpdated - The last updated date for the editor.
+ * @param {boolean} props.showPreviewBtn - Whether to show the preview button.
+ * @param {string} props.note - The note to display below the editor.
+ * @param {function} props.setIsEditing - Function to set the editing state.
+ * @param {boolean} props.required - Whether the editor is required.
+ * @returns {React.ReactNode} The CustomTextEditor component.
+ *
+ */
+export default function CustomTextEditor({ label, name, note, onChange, setIsEditing, content, isEditing, charLimit, placeholder, lastUpdated, showPreviewBtn, required, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/types/components/ui/editor/MenuBar.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Editor } from "@tiptap/react";
 interface MenuBarProps {
     editor: Editor | null;
-    setIsEditing: (html: boolean) => void;
+    setIsEditing?: (html: boolean) => void;
     isEditing: boolean;
     showPreviewBtn?: boolean;
 }

package/dist/src/types/components/ui/images/RandomGradientImage.d.ts

@@ -0,0 +1,15 @@
+interface RandomGradientImageProps {
+    thumbnail?: string;
+    title?: string;
+    width?: number;
+    height?: number;
+}
+/**
+ * A component that displays either an image or a random gradient background
+ * @param thumbnail - URL of the image
+ * @param title - Title of the image
+ * @param width - Width of the image
+ * @param height - Height of the image or gradient
+ */
+declare const RandomGradientImage: ({ thumbnail, title, width, height, }: RandomGradientImageProps) => import("react/jsx-runtime").JSX.Element;
+export default RandomGradientImage;

package/dist/src/types/components/ui/index.d.ts

@@ -0,0 +1,16 @@
+export { default as CustomTextEditor } from "./editor/CustomTextEditor";
+export { default as ContentViewer } from "./viewer/ContentViewer";
+export { default as ContentViewOrEdit } from "./viewer/ContentViewOrEdit";
+export { default as CodeDisplay } from "./viewer/CodeDisplay";
+export { default as IHubTable } from "./tables/IHubTable";
+export { default as IHubTableServer } from "./tables/IHubTableServer";
+export { default as OrDivider } from "./OrDivider";
+export { default as RandomGradientImage } from "./images/RandomGradientImage";
+export { default as Dialog } from "./dialogs/Dialog";
+export { default as Badge } from "./Badge";
+export { default as Action } from "./Action";
+export { default as Dropdown } from "./Dropdown";
+export { default as ColorPicker } from "./ColorPicker";
+export { default as ComponentLists } from "./ComponentLists";
+export * from "./cards";
+export * from "./charts";

package/dist/src/types/components/ui/pagination/Pagination.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { PaginationPropsType } from "@/types";
+/**
+ * Enhanced Pagination Component with API Integration
+ * Handles pagination, search, and filtering with automatic API calls
+ */
+declare const Pagination: React.FC<PaginationPropsType>;
+export default Pagination;

package/dist/src/types/components/ui/pagination/PaginationDemo.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const PaginationDemo: React.FC;
+export default PaginationDemo;

package/dist/src/types/components/ui/tables/IHubTable.d.ts

@@ -0,0 +1,113 @@
+import React from "react";
+import { TableColumnType } from "@/types";
+export interface FilterState {
+    [key: string]: string | string[] | null;
+}
+export interface SortState {
+    column: string | null;
+    direction: "asc" | "desc";
+}
+export interface TableProps<T> {
+    columns: TableColumnType<T>[];
+    data: T[];
+    isLoading?: boolean;
+    emptyStateMessage?: string;
+    emptyStateIcon?: React.ReactNode;
+    title?: string;
+    showSearch?: boolean;
+    pagination?: boolean;
+    rowsPerPageOptions?: number[];
+    defaultRowsPerPage?: number;
+    actions?: React.ReactNode;
+    onRowClick?: (row: T) => void;
+    keyExtractor?: (row: T, index: number) => string | number;
+    hideHeaderOnMobile?: boolean;
+    stickyHeader?: boolean;
+    maxHeight?: string;
+    sortable?: boolean;
+    defaultSortColumn?: keyof T;
+    defaultSortDirection?: "asc" | "desc";
+    onSort?: (column: keyof T, direction: "asc" | "desc") => void;
+    onFilter?: (filters: FilterState) => void;
+    selectable?: boolean;
+    onSelectionChange?: (selectedRows: T[]) => void;
+    expandable?: boolean;
+    renderExpandedRow?: (row: T) => React.ReactNode;
+    exportOptions?: {
+        csv?: boolean;
+        excel?: boolean;
+        pdf?: boolean;
+        fileName?: string;
+    };
+    refreshable?: boolean;
+    onRefresh?: () => Promise<void>;
+}
+/**
+ * Enhanced reusable table component for InstinctHub applications
+ * Supports sorting, filtering, pagination, selection, and row expansion
+ * @example
+ * ```tsx
+ * <IHubTable
+ *  columns={columns}
+ *  data={data}
+ *  isLoading={isLoading}
+ *  emptyStateMessage={emptyStateMessage}
+ *  emptyStateIcon={emptyStateIcon}
+ *  title={title}
+ *  showSearch={showSearch}
+ *  pagination={pagination}
+ *  rowsPerPageOptions={rowsPerPageOptions}
+ *  defaultRowsPerPage={defaultRowsPerPage}
+ *  actions={actions}
+ *  onRowClick={onRowClick}
+ *  keyExtractor={keyExtractor}
+ *  hideHeaderOnMobile={hideHeaderOnMobile}
+ *  stickyHeader={stickyHeader}
+ *  maxHeight={maxHeight}
+ *  sortable={sortable}
+ *  defaultSortColumn={defaultSortColumn}
+ *  defaultSortDirection={defaultSortDirection}
+ *  onSort={onSort}
+ *  onFilter={onFilter}
+ *  selectable={selectable}
+ *  onSelectionChange={onSelectionChange}
+ *  expandable={expandable}
+ *  renderExpandedRow={renderExpandedRow}
+ *  exportOptions={exportOptions}
+ *  refreshable={refreshable}
+ *  onRefresh={onRefresh}
+ * />
+ * ```
+ * @prop {TableColumnType<T>[]} columns - The columns to display in the table
+ * @prop {T[]} data - The data to display in the table
+ * @prop {boolean} isLoading - Whether the table is loading
+ * @prop {string} emptyStateMessage - The message to display when the table is empty
+ * @prop {React.ReactNode} emptyStateIcon - The icon to display when the table is empty
+ * @prop {string} title - The title of the table
+ * @prop {boolean} showSearch - Whether to show the search bar
+ * @prop {boolean} pagination - Whether to show the pagination
+ * @prop {number[]} rowsPerPageOptions - The options for the number of rows per page
+ * @prop {number} defaultRowsPerPage - The default number of rows per page
+ * @prop {React.ReactNode} actions - The actions to display in the table
+ * @prop {function} onRowClick - The function to call when a row is clicked
+ * @prop {function} keyExtractor - The function to call to get the key for each row
+ * @prop {boolean} hideHeaderOnMobile - Whether to hide the header on mobile
+ * @prop {boolean} stickyHeader - Whether to make the header sticky
+ * @prop {string} maxHeight - The maximum height of the table
+ * @prop {boolean} sortable - Whether to allow sorting
+ * @prop {string} defaultSortColumn - The default column to sort by
+ * @prop {string} defaultSortDirection - The default direction to sort by
+ * @prop {function} onSort - The function to call when a column is sorted
+ * @prop {function} onFilter - The function to call when a filter is applied
+ * @prop {boolean} selectable - Whether to allow selection
+ * @prop {function} onSelectionChange - The function to call when selection changes
+ * @prop {boolean} expandable - Whether to allow row expansion
+ * @prop {function} renderExpandedRow - The function to call to render the expanded row
+ * @prop {object} exportOptions - The options for exporting the table
+ * @prop {boolean} refreshable - Whether to allow refreshing the table
+ * @prop {function} onRefresh - The function to call when the table is refreshed
+ *
+ * @link https://github.com/instincthub/instincthub-react-ui/blob/main/src/__examples__/src/components/ui/TableExamples.tsx
+ */
+export declare const IHubTable: <T extends object>({ columns, data, isLoading, emptyStateMessage, emptyStateIcon, title, showSearch, pagination, rowsPerPageOptions, defaultRowsPerPage, actions, onRowClick, keyExtractor, hideHeaderOnMobile, stickyHeader, maxHeight, sortable, defaultSortColumn, defaultSortDirection, onSort, onFilter, selectable, onSelectionChange, expandable, renderExpandedRow, exportOptions, refreshable, onRefresh, }: TableProps<T>) => JSX.Element;
+export default IHubTable;

package/dist/src/types/components/ui/tables/IHubTableServer.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+import { ApiResponseType, TableColumnType } from "@/types";
+import { FetchParamsType } from "@/types";
+interface IHubTableServerPropsType<T> {
+    /** Token for authentication */
+    token?: string | null;
+    columns: TableColumnType<T>[];
+    defaultData?: any[];
+    endpointPath: string;
+    initialParams?: Partial<FetchParamsType>;
+    dataAdapter?: (apiResponse: any) => ApiResponseType<T>;
+    title?: string;
+    emptyStateMessage?: string;
+    emptyStateIcon?: React.ReactNode;
+    actions?: React.ReactNode;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    searchDebounceMs?: number;
+    enableSorting?: boolean;
+    enableExport?: boolean;
+    exportOptions?: {
+        csv?: boolean;
+        excel?: boolean;
+        pdf?: boolean;
+        fileName?: string;
+    };
+    rowsPerPageOptions?: number[];
+    defaultRowsPerPage?: number;
+    onRowClick?: (row: T) => void;
+    onFetchError?: (error: any) => void;
+    expandable?: boolean;
+    renderExpandedRow?: (row: T) => React.ReactNode;
+    keyExtractor?: (row: T) => string | number;
+    stickyHeader?: boolean;
+    maxHeight?: string;
+    hideHeaderOnMobile?: boolean;
+}
+/**
+ * Server-side table component for InstinctHub applications
+ * Handles API requests, pagination, sorting, and filtering on the server
+ *
+ * @example
+ * ```tsx
+ * <IHubTableServer
+ *   columns={columns}
+ *   endpointPath={"/api/program-courses"}
+ *   initialParams={{ sort: "title", direction: "asc" }}
+ *   title="Program Courses"
+ *   showSearch={true}
+ *   enableSorting={true}
+ *   onRowClick={handleRowClick}
+ *   expandable={true}
+ *   renderExpandedRow={renderExpandedRow}
+ *   keyExtractor={keyExtractor}
+ *   stickyHeader={true}
+ *   maxHeight="600px"
+ *   hideHeaderOnMobile={true}
+ *   token={process.env.NEXT_PUBLIC_TOKEN}
+ *   dataAdapter={dataAdapter}
+ *   rowsPerPageOptions={[10, 25, 50, 100]}
+ *   defaultRowsPerPage={10}
+ *   onFetchError={handleFetchError}
+ *   refreshable={true}
+ *   onRefresh={handleRefresh}
+ * />
+ * ```
+ * @prop {string} token - The token for authentication
+ * @prop {TableColumnType<T>[]} columns - The columns of the table
+ * @prop {any<T>[]} defaultData - The default data of the table
+ * @prop {string} endpointPath - The path to the API endpoint
+ * @prop {Partial<FetchParamsType>} initialParams - The initial parameters for the API request
+ * @prop {string} title - The title of the table
+ * @prop {boolean} showSearch - Whether to show the search input
+ * @prop {boolean} enableSorting - Whether to enable sorting
+ * @prop {boolean} enableExport - Whether to enable export
+ * @prop {Object} exportOptions - The options for the export
+ * @prop {number[]} rowsPerPageOptions - The options for the rows per page
+ * @prop {number} defaultRowsPerPage - The default rows per page
+ * @prop {Function} onRowClick - The callback for the row click
+ * @prop {Function} onFetchError - The callback for the fetch error
+ * @prop {boolean} expandable - Whether to enable row expansion
+ * @prop {Function} renderExpandedRow - The callback for the expanded row
+ * @prop {Function} keyExtractor - The callback for the key extraction
+ * @prop {boolean} stickyHeader - Whether to enable sticky header
+ * @prop {string} maxHeight - The maximum height of the table
+ * @prop {boolean} hideHeaderOnMobile - Whether to hide the header on mobile
+ *
+ * @link https://github.com/instincthub/instincthub-react-ui/blob/main/src/__examples__/src/components/ui/TableServerExamples.tsx
+ */
+export declare function IHubTableServer<T extends object>({ token, columns, defaultData, endpointPath, initialParams, dataAdapter, title, emptyStateMessage, emptyStateIcon, actions, showSearch, searchPlaceholder, searchDebounceMs, enableSorting, enableExport, exportOptions, rowsPerPageOptions, defaultRowsPerPage, onRowClick, onFetchError, expandable, renderExpandedRow, keyExtractor, stickyHeader, maxHeight, hideHeaderOnMobile, }: IHubTableServerPropsType<T>): JSX.Element;
+export default IHubTableServer;

package/dist/src/types/components/ui/viewer/ContentViewer.d.ts

@@ -3,12 +3,31 @@ interface ContentViewerProps {
     title?: string;
     className?: string;
     editable?: boolean;
-    isEditing: boolean;
-    setIsEditing: (html: boolean) => void;
+    isEditing?: boolean;
+    setIsEditing?: (html: boolean) => void;
     onContentChange?: (newContent: string) => void;
     showToolbar?: boolean;
     showEditBtn?: boolean;
     isMarkdown?: boolean;
 }
+/**
+ *
+ * @component
+ * @example
+ * ```jsx
+ * import {ContentViewer} from "@instincthub/react-ui";
+ * <ContentViewer content="Hello world" />
+ * ```
+ * @param {string} content - The content to be displayed
+ * @param {string} title - The title of the content
+ * @param {string} className - Additional class names for the content viewer
+ * @param {boolean} editable - Whether the content is editable
+ * @param {function} onContentChange - A function to be called when the content changes
+ * @param {boolean} isEditing - Whether the content is being edited
+ * @param {function} setIsEditing - A function to set the isEditing state
+ * @param {boolean} showToolbar - Whether to show the toolbar
+ * @param {boolean} showEditBtn - Whether to show the edit button
+ * @param {boolean} isMarkdown - Whether the content is Markdown
+ */
 export default function ContentViewer({ content, title, className, editable, onContentChange, isEditing, setIsEditing, showToolbar, showEditBtn, isMarkdown, }: ContentViewerProps): import("react/jsx-runtime").JSX.Element;
 export {};