@rovula/ui 0.0.10 → 0.0.11

package/dist/cjs/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/cjs/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/cjs/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,14 @@
+import { ColumnDef } from "@tanstack/react-table";
+export type Payment = {
+    id: string;
+    amount: number;
+    status: "pending" | "processing" | "success" | "failed";
+    email: string;
+};
+export declare const columns: ColumnDef<Payment>[];
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+}
+export declare function DataTable<TData, TValue>({ columns, data, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+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[];
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/components/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const Table: React.ForwardRefExoticComponent<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>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

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

@@ -10,5 +10,8 @@ export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
 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 } from "./components/Dropdown/Dropdown";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/components/Button/Button.js

@@ -21,11 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
-var Button = function (_a) {
+var Button = forwardRef(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "primary" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, title = _a.title, children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fullwidth, fullwidth = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, className = _a.className, props = __rest(_a, ["size", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
     var isDisabled = disabled || isLoading;
-    return (_jsx("button", __assign({ type: "button" }, props, { "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size: size, color: color, variant: variant, disabled: disabled, fullwidth: fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [startIcon, children || title, endIcon] }) })));
-};
+    return (_jsx("button", __assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size: size, color: color, variant: variant, disabled: disabled, fullwidth: fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [startIcon, children || title, endIcon] }) })));
+});
 export default Button;

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table";
+export var columns = [
+    {
+        accessorKey: "status",
+        header: "Status",
+    },
+    {
+        accessorKey: "email",
+        header: "Email",
+    },
+    {
+        accessorKey: "amount",
+        header: "Amount",
+    },
+];
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table";
+export function DataTable(_a) {
+    var _b;
+    var columns = _a.columns, data = _a.data;
+    var table = useReactTable({
+        data: data,
+        columns: columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(TableRow, { children: headerGroup.headers.map(function (header) {
+                            return (_jsx(TableHead, { children: header.isPlaceholder
+                                    ? null
+                                    : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                        }) }, headerGroup.id)); }) }), _jsx(TableBody, { children: ((_b = table.getRowModel().rows) === null || _b === void 0 ? void 0 : _b.length) ? (table.getRowModel().rows.map(function (row) { return (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map(function (cell) { return (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }));
+}

package/dist/components/DataTable/DataTable.stories.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataTable } from "./DataTable";
+var meta = {
+    title: "Components/DataTable",
+    component: DataTable,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+var columns = [
+    {
+        accessorKey: "amount",
+        header: function () { return _jsx("div", { className: "text-right", children: "Amount" }); },
+        cell: function (_a) {
+            var row = _a.row;
+            var amount = parseFloat(row.getValue("amount"));
+            var formatted = new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+            }).format(amount);
+            return _jsx("div", { className: "text-right font-medium", children: formatted });
+        },
+    },
+    {
+        accessorKey: "status",
+    },
+    {
+        accessorKey: "email",
+    },
+];
+export var Default = {
+    args: {
+    // label: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        var data = [
+            {
+                id: "728ed52f",
+                amount: 100,
+                status: "pending",
+                email: "m@example.com",
+            },
+        ];
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DataTable, { columns: columns, data: data }) }));
+    },
+};

package/dist/components/Dropdown/Dropdown.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, forwardRef, useCallback, useEffect, useMemo, useState, } from "react";
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
-var Dropdown = function (_a) {
+var Dropdown = forwardRef(function (_a, ref) {
     var id = _a.id, options = _a.options, value = _a.value, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, helperText = _a.helperText, errorMessage = _a.errorMessage, _e = _a.fullwidth, fullwidth = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.filterMode, filterMode = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? true : _j, onChangeText = _a.onChangeText, onSelect = _a.onSelect, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
     var _id = id || "".concat(label, "-select");
     var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
@@ -52,7 +52,17 @@ var Dropdown = function (_a) {
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
-    var renderOptions = function () { return (_jsxs("ul", { className: "absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map(function (option) { return (_jsx("li", { onMouseDown: function () { return handleOptionClick(option); }, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""), children: option.label }, option.value)); }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] })); };
-    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({}, props, { readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
-};
+    var renderOptions = function () { return (_jsxs("ul", { className: "absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map(function (option) {
+                if (option.renderLabel) {
+                    return (_jsx(Fragment, { children: option.renderLabel({
+                            value: option.value,
+                            label: option.label,
+                            handleOnClick: function () { return handleOptionClick(option); },
+                            className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""),
+                        }) }, option.value));
+                }
+                return (_jsx("li", { onMouseDown: function () { return handleOptionClick(option); }, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""), children: option.label }, option.value));
+            }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] })); };
+    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({}, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
+});
 export default Dropdown;