@rovula/ui 0.0.10 → 0.0.11

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,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/esm/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/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/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/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/esm/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/index.d.ts

@@ -1,10 +1,10 @@
 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 * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { ClassValue } from 'clsx';
@@ -21,7 +21,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 +50,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 +80,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 +94,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 +124,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>>;
 
@@ -153,4 +207,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, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps$1 as InputProps, Label, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/src/theme/global.css

@@ -1030,6 +1030,10 @@ body {
   height: 3rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1141,6 +1145,10 @@ body {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1902,6 +1910,11 @@ body {
   --tw-ring-offset-color: hsl(var(--background));
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2364,6 +2377,11 @@ body {
   background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
 }
 
+.peer:focus ~ .peer-focus\:bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .peer:focus ~ .peer-focus\:text-input-text-active {
   --tw-text-opacity: 1;
   color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -74,6 +74,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-table": "^8.17.3",
     "@types/react": "^18.3.2",
     "axios": "^1.6.4",
     "class-variance-authority": "^0.7.0",