@rovula/ui 0.0.10 → 0.0.12

package/dist/esm/types/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
-import React, { FC, ReactElement } from "react";
-type ButtonProps = {
+import React, { ReactElement } from "react";
+export type ButtonProps = {
     title?: string;
     size?: "sm" | "md" | "lg";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
@@ -11,5 +11,16 @@ type ButtonProps = {
     startIcon?: ReactElement;
     endIcon?: ReactElement;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
-declare const Button: FC<ButtonProps>;
+declare const Button: React.ForwardRefExoticComponent<{
+    title?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
+    variant?: "solid" | "outline" | "flat" | "link" | undefined;
+    disabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    fullwidth?: boolean | undefined;
+    children?: React.ReactNode;
+    startIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    endIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/esm/types/components/Button/Buttons.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.FC<{
+    component: React.ForwardRefExoticComponent<{
         title?: string | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
@@ -12,7 +12,7 @@ declare const meta: {
         children?: React.ReactNode;
         startIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         endIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    } & React.ButtonHTMLAttributes<HTMLButtonElement>>;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -299,6 +299,8 @@ declare const meta: {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        ref?: React.LegacyRef<HTMLButtonElement> | undefined;
+        key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
@@ -317,7 +319,7 @@ export declare const Solid: {
         children?: React.ReactNode;
         startIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         endIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Outline: {
     args: {
@@ -335,7 +337,7 @@ export declare const Outline: {
         children?: React.ReactNode;
         startIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         endIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Flat: {
     args: {
@@ -353,7 +355,7 @@ export declare const Flat: {
         children?: React.ReactNode;
         startIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         endIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Link: {
     args: {
@@ -371,5 +373,5 @@ export declare const Link: {
         children?: React.ReactNode;
         startIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         endIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    manualSorting?: boolean;
+    onSorting?: (sorting: SortingState) => void;
+    fetchMoreData?: () => void;
+}
+export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, fetchMoreData, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/DataTable/DataTable.stories.d.ts

@@ -0,0 +1,22 @@
+import { DataTable } from "./DataTable";
+import { ColumnDef } from "@tanstack/react-table";
+declare const meta: {
+    title: string;
+    component: typeof DataTable;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        columns: ColumnDef<unknown, unknown>[];
+        data: unknown[];
+        manualSorting?: boolean | undefined;
+        onSorting?: ((sorting: import("@tanstack/react-table").SortingState) => void) | undefined;
+        fetchMoreData?: (() => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -1,9 +1,17 @@
+import React, { ReactNode } from "react";
 import { InputProps } from "../TextInput/TextInput";
-type Options = {
+type RenderLabelCallbackArg = {
     value: string;
     label: string;
+    handleOnClick: () => void;
+    className: string;
 };
-type DropdownProps = {
+export type Options = {
+    value: string;
+    label: string;
+    renderLabel?: (config: RenderLabelCallbackArg) => ReactNode;
+};
+export type DropdownProps = {
     id?: string;
     label?: string;
     size?: "sm" | "md" | "lg";
@@ -22,5 +30,23 @@ type DropdownProps = {
     onChangeText?: InputProps["onChange"];
     onSelect?: (value: Options) => void;
 } & Omit<InputProps, "value">;
-declare const Dropdown: ({ id, options, value, label, size, rounded, variant, helperText, errorMessage, fullwidth, disabled, error, filterMode, required, onChangeText, onSelect, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dropdown: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    label?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    rounded?: "none" | "normal" | "full" | undefined;
+    variant?: "outline" | "flat" | "underline" | undefined;
+    helperText?: string | undefined;
+    errorMessage?: string | undefined;
+    filterMode?: boolean | undefined;
+    fullwidth?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    required?: boolean | undefined;
+    className?: string | undefined;
+    options: Options[];
+    value?: Options | undefined;
+    onChangeText?: InputProps["onChange"];
+    onSelect?: ((value: Options) => void) | undefined;
+} & Omit<InputProps, "value"> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { Options } from "./Dropdown";
 declare const meta: {
     title: string;
-    component: ({ id, options, value, label, size, rounded, variant, helperText, errorMessage, fullwidth, disabled, error, filterMode, required, onChangeText, onSelect, ...props }: {
+    component: React.ForwardRefExoticComponent<{
         id?: string | undefined;
         label?: string | undefined;
         size?: "sm" | "md" | "lg" | undefined;
@@ -15,20 +16,11 @@ declare const meta: {
         error?: boolean | undefined;
         required?: boolean | undefined;
         className?: string | undefined;
-        options: {
-            value: string;
-            label: string;
-        }[];
-        value?: {
-            value: string;
-            label: string;
-        } | undefined;
+        options: Options[];
+        value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-        onSelect?: ((value: {
-            value: string;
-            label: string;
-        }) => void) | undefined;
-    } & Omit<import("../TextInput/TextInput").InputProps, "value">) => import("react/jsx-runtime").JSX.Element;
+        onSelect?: ((value: Options) => void) | undefined;
+    } & Omit<import("../..").InputProps, "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -47,19 +39,10 @@ declare const meta: {
         error?: boolean | undefined;
         required?: boolean | undefined;
         className?: string | undefined;
-        options: {
-            value: string;
-            label: string;
-        }[];
-        value?: {
-            value: string;
-            label: string;
-        } | undefined;
+        options: Options[];
+        value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-        onSelect?: (((value: {
-            value: string;
-            label: string;
-        }) => void) & React.ReactEventHandler<HTMLInputElement>) | undefined;
+        onSelect?: (((value: Options) => void) & React.ReactEventHandler<HTMLInputElement>) | undefined;
         color?: string | undefined;
         title?: string | undefined;
         children?: React.ReactNode;
@@ -351,6 +334,9 @@ declare const meta: {
         src?: string | undefined;
         step?: string | number | undefined;
         width?: string | number | undefined;
+        labelClassName?: string | undefined;
+        ref?: React.LegacyRef<HTMLInputElement> | undefined;
+        key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
@@ -358,10 +344,25 @@ export declare const Default: {
     args: {
         label: string;
         fullwidth: boolean;
-        options: {
-            value: string;
-            label: string;
-        }[];
+        options: Options[];
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithRef: {
+    args: {
+        label: string;
+        fullwidth: boolean;
+        options: Options[];
+        filterMode: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CustomOption: {
+    args: {
+        label: string;
+        fullwidth: boolean;
+        options: Options[];
+        filterMode: boolean;
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/types/components/Label/Label.stories.d.ts

@@ -273,8 +273,8 @@ declare const meta: {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLLabelElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLLabelElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLLabelElement> | undefined;
-        key?: React.Key | null | undefined;
         htmlFor?: string | undefined;
+        key?: React.Key | null | undefined;
         asChild?: boolean | undefined;
         ref?: React.LegacyRef<HTMLLabelElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts

@@ -276,8 +276,8 @@ declare const meta: {
         onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         required?: boolean | undefined;
-        key?: React.Key | null | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
+        key?: React.Key | null | undefined;
         asChild?: boolean | undefined;
         loop?: boolean | undefined;
         onValueChange?: ((value: string) => void) | undefined;

package/dist/esm/types/components/Table/Table.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<{
+    rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/esm/types/components/Table/Table.stories.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+    component: React.ForwardRefExoticComponent<{
+        rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+    } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;

package/dist/esm/types/components/Text/Text.d.ts

@@ -1,5 +1,5 @@
-import React, { FC } from "react";
-type TextProps = {
+import React from "react";
+export type TextProps = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "label1" | "label2";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React.ReactNode;
@@ -8,5 +8,5 @@ type TextProps = {
     style?: React.CSSProperties;
     id?: string;
 };
-declare const Text: FC<TextProps>;
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
 export default Text;

package/dist/esm/types/components/Text/Text.stories.d.ts

@@ -1,15 +1,7 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.FC<{
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "label1" | "label2" | undefined;
-        color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
-        children?: React.ReactNode;
-        className?: string | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-        style?: React.CSSProperties | undefined;
-        id?: string | undefined;
-    }>;
+    component: React.ForwardRefExoticComponent<import("./Text").TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -22,6 +14,8 @@ declare const meta: {
         tag?: keyof JSX.IntrinsicElements | undefined;
         style?: React.CSSProperties | undefined;
         id?: string | undefined;
+        ref?: React.LegacyRef<keyof JSX.IntrinsicElements | undefined> | undefined;
+        key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/esm/types/components/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import React, { ReactNode } from "react";
 export type InputProps = {
     id?: string;
     label?: string;
@@ -15,6 +15,24 @@ export type InputProps = {
     hasClearIcon?: boolean;
     endIcon?: ReactNode;
     className?: string;
+    labelClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
-declare const TextInput: FC<InputProps>;
+export declare const TextInput: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    label?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    rounded?: "none" | "normal" | "full" | undefined;
+    variant?: "outline" | "flat" | "underline" | undefined;
+    type?: React.HTMLInputTypeAttribute | undefined;
+    helperText?: string | undefined;
+    errorMessage?: string | undefined;
+    fullwidth?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    required?: boolean | undefined;
+    hasClearIcon?: boolean | undefined;
+    endIcon?: ReactNode;
+    className?: string | undefined;
+    labelClassName?: string | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/esm/types/components/TextInput/TextInput.stories.d.ts

@@ -1,7 +1,24 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.FC<import("./TextInput").InputProps>;
+    component: React.ForwardRefExoticComponent<{
+        id?: string | undefined;
+        label?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        rounded?: "none" | "normal" | "full" | undefined;
+        variant?: "outline" | "flat" | "underline" | undefined;
+        type?: React.HTMLInputTypeAttribute | undefined;
+        helperText?: string | undefined;
+        errorMessage?: string | undefined;
+        fullwidth?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        hasClearIcon?: boolean | undefined;
+        endIcon?: React.ReactNode;
+        className?: string | undefined;
+        labelClassName?: string | undefined;
+    } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -22,6 +39,7 @@ declare const meta: {
         hasClearIcon?: boolean | undefined;
         endIcon?: React.ReactNode;
         className?: string | undefined;
+        labelClassName?: string | undefined;
         color?: string | undefined;
         title?: string | undefined;
         children?: React.ReactNode;
@@ -312,6 +330,8 @@ declare const meta: {
         src?: string | undefined;
         step?: string | number | undefined;
         width?: string | number | undefined;
+        ref?: React.LegacyRef<HTMLInputElement> | undefined;
+        key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
@@ -322,3 +342,10 @@ export declare const Default: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const CustomLabel: {
+    args: {
+        label: string;
+        fullwidth: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/index.d.ts

@@ -8,7 +8,11 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
+export type { ButtonProps } from "./components/Button/Button";
+export type { InputProps } from "./components/TextInput/TextInput";
+export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import React__default, { FC, ReactElement, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ReactElement, ReactNode } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { ClassValue } from 'clsx';
@@ -21,7 +22,18 @@ type ButtonProps = {
     startIcon?: ReactElement;
     endIcon?: ReactElement;
 } & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
-declare const Button: FC<ButtonProps>;
+declare const Button: React__default.ForwardRefExoticComponent<{
+    title?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
+    variant?: "solid" | "outline" | "flat" | "link" | undefined;
+    disabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    fullwidth?: boolean | undefined;
+    children?: React__default.ReactNode;
+    startIcon?: React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | undefined;
+    endIcon?: React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | undefined;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
 
 type InputProps$1 = {
     id?: string;
@@ -39,8 +51,26 @@ type InputProps$1 = {
     hasClearIcon?: boolean;
     endIcon?: ReactNode;
     className?: string;
+    labelClassName?: string;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">;
-declare const TextInput: FC<InputProps$1>;
+declare const TextInput: React__default.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    label?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    rounded?: "none" | "normal" | "full" | undefined;
+    variant?: "outline" | "flat" | "underline" | undefined;
+    type?: React__default.HTMLInputTypeAttribute | undefined;
+    helperText?: string | undefined;
+    errorMessage?: string | undefined;
+    fullwidth?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    required?: boolean | undefined;
+    hasClearIcon?: boolean | undefined;
+    endIcon?: ReactNode;
+    className?: string | undefined;
+    labelClassName?: string | undefined;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
 type TextProps = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "label1" | "label2";
@@ -51,7 +81,7 @@ type TextProps = {
     style?: React__default.CSSProperties;
     id?: string;
 };
-declare const Text: FC<TextProps>;
+declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
 
 type Tab = {
     label: string;
@@ -65,9 +95,16 @@ type TabsProps = {
 };
 declare const Tabs: React__default.FC<TabsProps>;
 
+type RenderLabelCallbackArg = {
+    value: string;
+    label: string;
+    handleOnClick: () => void;
+    className: string;
+};
 type Options = {
     value: string;
     label: string;
+    renderLabel?: (config: RenderLabelCallbackArg) => ReactNode;
 };
 type DropdownProps = {
     id?: string;
@@ -88,7 +125,25 @@ type DropdownProps = {
     onChangeText?: InputProps$1["onChange"];
     onSelect?: (value: Options) => void;
 } & Omit<InputProps$1, "value">;
-declare const Dropdown: ({ id, options, value, label, size, rounded, variant, helperText, errorMessage, fullwidth, disabled, error, filterMode, required, onChangeText, onSelect, ...props }: DropdownProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: React__default.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    label?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    rounded?: "none" | "normal" | "full" | undefined;
+    variant?: "outline" | "flat" | "underline" | undefined;
+    helperText?: string | undefined;
+    errorMessage?: string | undefined;
+    filterMode?: boolean | undefined;
+    fullwidth?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    required?: boolean | undefined;
+    className?: string | undefined;
+    options: Options[];
+    value?: Options | undefined;
+    onChangeText?: InputProps$1["onChange"];
+    onSelect?: ((value: Options) => void) | undefined;
+} & Omit<InputProps$1, "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -98,7 +153,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<{
+    rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -107,6 +164,15 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    manualSorting?: boolean;
+    onSorting?: (sorting: SortingState) => void;
+    fetchMoreData?: () => void;
+}
+declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, fetchMoreData, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -153,4 +219,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, Input, Label, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, type ButtonProps, Checkbox, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps$1 as InputProps, Label, type Options, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/index.js

@@ -10,6 +10,7 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 // UTILS