@aleleba/ro-ut-ui 4.2.1 → 4.4.0

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

@@ -0,0 +1,8 @@
+export declare enum RadioThemes {
+    primary = "primary"
+}
+export declare const getRadioThemeClass: ({ theme }: {
+    theme: RadioThemes;
+}) => string;
+export * from './Radio';
+export * from './RadioGroup';

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

@@ -0,0 +1,45 @@
+import { FC } from 'react';
+import { RatingThemes, RatingSizes } from '..';
+export type TRatingProps = {
+    /**
+     * Is this the id of the rating.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the rating
+     */
+    theme?: RatingThemes;
+    /**
+     * Is this the size of the rating stars
+     */
+    size?: RatingSizes;
+    /**
+     * Is this the rating value (controlled, supports halves)
+     */
+    value?: number;
+    /**
+     * Is this the initial rating value (uncontrolled)
+     */
+    defaultValue?: number;
+    /**
+     * Is this the maximum number of stars
+     */
+    max?: number;
+    /**
+     * Is this the read-only state (no interaction)
+     */
+    readOnly?: boolean;
+    /**
+     * Is this the disabled state of the rating
+     */
+    disabled?: boolean;
+    /**
+     * Is this the onChange event, called with the selected value
+     */
+    onChange?: (value: number) => void;
+};
+export declare const Rating: FC<TRatingProps>;

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

@@ -0,0 +1,15 @@
+export declare enum RatingThemes {
+    primary = "primary"
+}
+export declare enum RatingSizes {
+    sm = "sm",
+    md = "md",
+    lg = "lg"
+}
+export declare const getRatingThemeClass: ({ theme }: {
+    theme: RatingThemes;
+}) => string;
+export declare const getRatingSizeClass: ({ size }: {
+    size: RatingSizes;
+}) => string;
+export * from './Rating';

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

@@ -0,0 +1,84 @@
+import { FC } from 'react';
+import { IconNames } from '@components';
+import { SelectThemes } from '..';
+export type TSelectOption = {
+    /**
+     * Is this the visible label of the option
+     */
+    label: string;
+    /**
+     * Is this the value of the option
+     */
+    value: string;
+    /**
+     * Is this the disabled state of the option
+     */
+    disabled?: boolean;
+};
+export type TSelectProps = {
+    /**
+     * Is this the id of the select.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the select
+     */
+    theme?: SelectThemes;
+    /**
+     * Is this the list of options of the select
+     */
+    options?: TSelectOption[];
+    /**
+     * Is this the value if the select allows checking several options at once
+     */
+    multiple?: boolean;
+    /**
+     * Is this the selected value of the select (controlled, single mode)
+     */
+    value?: string;
+    /**
+     * Is this the initial selected value of the select (uncontrolled, single mode)
+     */
+    defaultValue?: string;
+    /**
+     * Is this the list of selected values of the select (controlled, multiple mode)
+     */
+    values?: string[];
+    /**
+     * Is this the initial list of selected values of the select (uncontrolled, multiple mode)
+     */
+    defaultValues?: string[];
+    /**
+     * Is this the text shown when there is no selected value
+     */
+    placeholder?: string;
+    /**
+     * Is this the value if the select allows filtering options by text
+     */
+    searchable?: boolean;
+    /**
+     * Is this the icon shown at the left of the select
+     */
+    icon?: IconNames;
+    /**
+     * Is this the message shown when no option matches the search
+     */
+    emptyMessage?: string;
+    /**
+     * Is this the value if the select have hard border
+     */
+    hardBorder?: boolean;
+    /**
+     * Is this the disabled state of the select
+     */
+    disabled?: boolean;
+    /**
+     * Is this the onChange event of the select, called with the selected value (single mode) or the list of selected values (multiple mode)
+     */
+    onChange?: (value: string | string[]) => void;
+};
+export declare const Select: FC<TSelectProps>;

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

@@ -0,0 +1,8 @@
+export declare enum SelectThemes {
+    primary = "primary",
+    dark = "dark"
+}
+export declare const getSelectThemeClass: ({ theme }: {
+    theme: SelectThemes;
+}) => string;
+export * from './Select';

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/Textareas/Textarea/index.d.ts

@@ -0,0 +1,49 @@
+import { FC, ChangeEventHandler } from 'react';
+import { TextareaThemes } from '..';
+export type TTextareaProps = {
+    /**
+     * Is this the id of the textarea.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the textarea
+     */
+    theme?: TextareaThemes;
+    /**
+     * Is this the value of the textarea (controlled)
+     */
+    value?: string;
+    /**
+     * Is this the initial value of the textarea (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Is this the text you want to add to the textarea placeholder
+     */
+    placeholder?: string;
+    /**
+     * Is this the number of visible text lines of the textarea
+     */
+    rows?: number;
+    /**
+     * Is this the value if the textarea grows automatically with its content
+     */
+    autoResize?: boolean;
+    /**
+     * Is this the value if the textarea have hard border
+     */
+    hardBorder?: boolean;
+    /**
+     * Is this the disabled state of the textarea
+     */
+    disabled?: boolean;
+    /**
+     * Is this the onChange event of the textarea
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+};
+export declare const Textarea: FC<TTextareaProps>;

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

@@ -0,0 +1,9 @@
+export declare enum TextareaThemes {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+export declare const getTextareaThemeClass: ({ theme }: {
+    theme: TextareaThemes;
+}) => string;
+export * from './Textarea';

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

@@ -0,0 +1,41 @@
+import { FC, ReactNode } from 'react';
+import { ToggleThemes } from '..';
+export type TToggleProps = {
+    /**
+     * Is this the id of the toggle button.
+     */
+    id?: string;
+    /**
+     * Is this the classes that you want to add
+     */
+    className?: string;
+    /**
+     * Is this the theme you want to add to the toggle
+     */
+    theme?: ToggleThemes;
+    /**
+     * Is this the checked state of the toggle (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Is this the initial checked state of the toggle (uncontrolled)
+     */
+    defaultChecked?: boolean;
+    /**
+     * Is this the optional label shown at the left of the toggle
+     */
+    label?: string;
+    /**
+     * Is this the text shown inside the toggle pill
+     */
+    children?: ReactNode;
+    /**
+     * Is this the disabled state of the toggle
+     */
+    disabled?: boolean;
+    /**
+     * Is this the onChange event of the toggle, called with the next checked state
+     */
+    onChange?: (checked: boolean) => void;
+};
+export declare const Toggle: FC<TToggleProps>;

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

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

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

@@ -4,3 +4,15 @@ export * from './Buttons';
 export * from './Cards';
 export * from './Inputs';
 export * from './Navbar';
+export * from './Radios';
+export * from './Checkboxes';
+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';

package/package.json

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