@aleleba/ro-ut-ui 4.3.0 → 4.5.0

package/dist/types/components/SelectableTiles/SelectableTile/index.d.ts

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { IconNames } from '@components';
+import { SelectableTileThemes } from '..';
+export type TSelectableTileProps = {
+    /**
+     * Is this the id of the selectable tile.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the selectable tile
+     */
+    theme?: SelectableTileThemes;
+    /**
+     * Is this the icon shown inside the tile
+     */
+    icon: IconNames;
+    /**
+     * Is this the label shown under the icon
+     */
+    label?: string;
+    /**
+     * Is this the secondary label shown under the label
+     */
+    sublabel?: string;
+    /**
+     * Is this the value of the tile (passed to onSelect)
+     */
+    value?: string;
+    /**
+     * Is this the selected state of the tile
+     */
+    selected?: boolean;
+    /**
+     * Is this the disabled state of the tile
+     */
+    disabled?: boolean;
+    /**
+     * Is this the onSelect event of the tile, called with the value of the tile
+     */
+    onSelect?: (value?: string) => void;
+};
+export declare const SelectableTile: FC<TSelectableTileProps>;

package/dist/types/components/SelectableTiles/SelectableTileGroup/index.d.ts

@@ -0,0 +1,79 @@
+import { IconNames } from '@components';
+import { SelectableTileThemes } from '..';
+export declare enum SelectableTileGroupDirections {
+    horizontal = "horizontal",
+    vertical = "vertical"
+}
+export type TSelectableTileOption = {
+    /**
+     * Is this the icon shown inside the tile
+     */
+    icon: IconNames;
+    /**
+     * Is this the value of the tile
+     */
+    value: string;
+    /**
+     * Is this the label shown under the icon
+     */
+    label?: string;
+    /**
+     * Is this the secondary label shown under the label
+     */
+    sublabel?: string;
+    /**
+     * Is this the disabled state of the tile
+     */
+    disabled?: boolean;
+};
+export type TSelectableTileGroupProps = {
+    /**
+     * Is this the id of the selectable tile group.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the tiles
+     */
+    theme?: SelectableTileThemes;
+    /**
+     * Is this the list of options of the group
+     */
+    options?: TSelectableTileOption[];
+    /**
+     * Is this the value if the group allows selecting several tiles at once
+     */
+    multiple?: boolean;
+    /**
+     * Is this the selected value of the group (controlled, single mode)
+     */
+    value?: string;
+    /**
+     * Is this the initial selected value of the group (uncontrolled, single mode)
+     */
+    defaultValue?: string;
+    /**
+     * Is this the list of selected values of the group (controlled, multiple mode)
+     */
+    values?: string[];
+    /**
+     * Is this the initial list of selected values of the group (uncontrolled, multiple mode)
+     */
+    defaultValues?: string[];
+    /**
+     * Is this the layout direction of the group
+     */
+    direction?: SelectableTileGroupDirections;
+    /**
+     * Is this the disabled state of the whole group
+     */
+    disabled?: boolean;
+    /**
+     * Is this the onChange event of the group, called with the selected value (single mode) or the list of selected values (multiple mode)
+     */
+    onChange?: (value: string | string[]) => void;
+};
+export declare const SelectableTileGroup: ({ id, className, theme, options, multiple, value, defaultValue, values, defaultValues, direction, disabled, onChange, }: TSelectableTileGroupProps) => import("react").JSX.Element;

package/dist/types/components/SelectableTiles/index.d.ts

@@ -0,0 +1,8 @@
+export declare enum SelectableTileThemes {
+    primary = "primary"
+}
+export declare const getSelectableTileThemeClass: ({ theme }: {
+    theme: SelectableTileThemes;
+}) => string;
+export * from './SelectableTile';
+export * from './SelectableTileGroup';

package/dist/types/components/Tables/Table/index.d.ts

@@ -0,0 +1,60 @@
+import { ReactElement, ReactNode } from 'react';
+import { TableThemes } from '..';
+export type TTableAlign = 'left' | 'center' | 'right';
+export type TTableColumn<T> = {
+    /**
+     * Is this the unique key of the column
+     */
+    key: string;
+    /**
+     * Is this the content shown in the header cell of the column
+     */
+    header: ReactNode;
+    /**
+     * Is this the custom renderer for the cell of the column; receives the row
+     */
+    render?: (row: T) => ReactNode;
+    /**
+     * Is this the horizontal alignment of the column cells
+     */
+    align?: TTableAlign;
+    /**
+     * Is this the fixed width of the column (px number or any CSS width)
+     */
+    width?: string | number;
+};
+export type TTableProps<T> = {
+    /**
+     * Is this the id of the table.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the table
+     */
+    theme?: TableThemes;
+    /**
+     * Is this the list of columns of the table
+     */
+    columns: TTableColumn<T>[];
+    /**
+     * Is this the list of rows of the table
+     */
+    data: T[];
+    /**
+     * Is this the function that returns the unique key of a row
+     */
+    rowKey: (row: T) => string;
+    /**
+     * Is this the onClick event of a row, called with the clicked row
+     */
+    onRowClick?: (row: T) => void;
+    /**
+     * Is this the message shown when there are no rows
+     */
+    emptyMessage?: string;
+};
+export declare const Table: <T>({ id, className, theme, columns, data, rowKey, onRowClick, emptyMessage, }: TTableProps<T>) => ReactElement;

package/dist/types/components/Tables/index.d.ts

@@ -0,0 +1,7 @@
+export declare enum TableThemes {
+    primary = "primary"
+}
+export declare const getTableThemeClass: ({ theme }: {
+    theme: TableThemes;
+}) => string;
+export * from './Table';

package/dist/types/components/Tabs/Tabs/index.d.ts

@@ -0,0 +1,52 @@
+import { FC } from 'react';
+import { IconNames } from '@components';
+import { TabsVariants } from '..';
+export type TTab = {
+    /**
+     * Is this the value of the tab
+     */
+    value: string;
+    /**
+     * Is this the visible label of the tab
+     */
+    label: string;
+    /**
+     * Is this the icon shown in the tab
+     */
+    icon?: IconNames;
+    /**
+     * Is this the disabled state of the tab
+     */
+    disabled?: boolean;
+};
+export type TTabsProps = {
+    /**
+     * Is this the id of the tabs.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the variant of the tabs
+     */
+    variant?: TabsVariants;
+    /**
+     * Is this the list of tabs
+     */
+    tabs: TTab[];
+    /**
+     * Is this the value of the active tab (controlled)
+     */
+    active?: string;
+    /**
+     * Is this the value of the initially active tab (uncontrolled)
+     */
+    defaultActive?: string;
+    /**
+     * Is this the onChange event of the tabs, called with the value of the selected tab
+     */
+    onChange?: (value: string) => void;
+};
+export declare const Tabs: FC<TTabsProps>;

package/dist/types/components/Tabs/index.d.ts

@@ -0,0 +1,8 @@
+export declare enum TabsVariants {
+    iconTab = "iconTab",
+    segmented = "segmented"
+}
+export declare const getTabsVariantClass: ({ variant }: {
+    variant: TabsVariants;
+}) => string;
+export * from './Tabs';

package/dist/types/components/Tags/Tag/index.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { IconNames } from '@components';
+import { TagThemes } from '..';
+export type TTagProps = {
+    /**
+     * Is this the id of the tag.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme (color) you want to add to the tag
+     */
+    theme?: TagThemes;
+    /**
+     * Is this the icon shown inside the tag
+     */
+    icon: IconNames;
+    /**
+     * Is this the optional label shown below the tag box
+     */
+    label?: string;
+};
+export declare const Tag: FC<TTagProps>;

package/dist/types/components/Tags/index.d.ts

@@ -0,0 +1,11 @@
+export declare enum TagThemes {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    quaternary = "quaternary",
+    quinary = "quinary"
+}
+export declare const getTagThemeClass: ({ theme }: {
+    theme: TagThemes;
+}) => string;
+export * from './Tag';

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

@@ -10,3 +10,14 @@ export * from './Toggles';
 export * from './Textareas';
 export * from './Selects';
 export * from './DatePickers';
+export * from './Avatars';
+export * from './Badges';
+export * from './Tags';
+export * from './IconButtons';
+export * from './Links';
+export * from './Ratings';
+export * from './Tables';
+export * from './SelectableTiles';
+export * from './Carousels';
+export * from './DropdownMenus';
+export * from './Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleleba/ro-ut-ui",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "description": "UI Component for Ro-ut App",
   "main": "dist/index.js",
   "types": "dist/types/components/index.d.ts",