@ainias42/react-bootstrap-mobile 0.2.0 → 0.2.2

package/dist/src/Components/Clickable/Clickable.d.ts

@@ -6,8 +6,9 @@ type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, Point
 type OnPointerUpListener<Data> = OptionalListener<'onPointerUp', Data, PointerEvent>;
 type OnPointerMoveListener<Data> = OptionalListener<'onPointerMove', Data, PointerEvent>;
 type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragStartListener<Data> = OptionalListener<'onDragStart', Data>;
 type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
-export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType extends string | undefined> = RbmComponentProps<{
+export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragStartData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType extends string | undefined> = RbmComponentProps<{
     interactable?: boolean;
     href?: HrefType;
     target?: string;
@@ -15,6 +16,8 @@ export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMous
     stopPropagation?: boolean;
     useReactOnMouseLeave?: boolean;
     id?: string;
-} & OnClickListener<OnClickData> & OnPointerDownListener<OnMouseDownData> & OnPointerMoveListener<OnMouseMoveData> & OnPointerUpListener<OnMouseUpData> & OnDropListener<OnDropData> & OnDragOverListener<OnDragOverData> & OptionalListener<'onClickCapture', OnClickCaptureData> & OptionalListener<'onMouseEnter', OnMouseEnterData> & OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent | ReactMouseEvent> & OptionalListener<'onDoubleClick', OnDoubleClickData>>;
-declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
+    tabIndex?: number;
+    draggable?: boolean;
+} & OnClickListener<OnClickData> & OnPointerDownListener<OnMouseDownData> & OnPointerMoveListener<OnMouseMoveData> & OnPointerUpListener<OnMouseUpData> & OnDropListener<OnDropData> & OnDragStartListener<OnDragStartData> & OnDragOverListener<OnDragOverData> & OptionalListener<'onClickCapture', OnClickCaptureData> & OptionalListener<'onMouseEnter', OnMouseEnterData> & OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent | ReactMouseEvent> & OptionalListener<'onDoubleClick', OnDoubleClickData>>;
+declare const ClickableMemo: import("../../helper/withForwardRef").RefComponent<ClickableProps<unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, string | undefined>, HTMLAnchorElement | HTMLSpanElement>;
 export { ClickableMemo as Clickable };

package/dist/src/Components/Dialog/ButtonDialog.d.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { Flavor } from "../Flavor";
 export type ButtonDialogProps = RbmComponentProps<{
     title?: string;
     message: string;
     buttons: {
         text: string;
         callback: () => void;
+        flavor?: Flavor;
     }[];
+    extraContent?: ReactElement | null;
 }, WithNoChildren>;
-declare function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps): React.JSX.Element;
+declare function ButtonDialog({ title, message, buttons, style, className, extraContent }: ButtonDialogProps): React.JSX.Element;
 declare const ButtonDialogMemo: typeof ButtonDialog;
 export { ButtonDialogMemo as ButtonDialog };

package/dist/src/Components/Flavor.d.ts

@@ -1,4 +1,6 @@
 export declare enum Flavor {
     Accent = "flavor-accent",
-    Basic = "flavor-basic"
+    Basic = "flavor-basic",
+    Destructive = "flavor-destructive",
+    Constructive = "flavor-constructive"
 }

package/dist/src/Components/FormElements/Button/Button.d.ts

@@ -5,9 +5,12 @@ import { HTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { ButtonType } from "./ButtonType";
 import { Flavor } from "../../Flavor";
+import { Size } from "../../../Size";
 export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<HTMLButtonElement>, {
     type?: ButtonType;
     disabled?: boolean;
     flavor?: Flavor;
+    fullWidth?: boolean;
+    size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">;
 } & OptionalListener<'onClick', ClickData>>>;
-export declare const Button: <ClickData>({ children, className, disabled, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;
+export declare const Button: <ClickData>({ children, className, disabled, size, fullWidth, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Controller/HookForm.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormProviderProps } from "react-hook-form";
+type FieldValues = Record<string, any>;
+export type HookFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined> = FormProviderProps<TFieldValues, TContext, TTransformedValues> & {
+    onSend?: () => void;
+};
+export declare const HookForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>({ children, onSend, ...methods }: HookFormProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+export {};

package/dist/src/Components/FormElements/Controller/InputController.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Input/Input").InputProps<unknown, unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, "value" | "ref" | "onBlur" | "name" | "onChangeText"> & {
+    name: string;
+}, HTMLInputElement>;

package/dist/src/Components/FormElements/Controller/MultipleFileInputController.d.ts

@@ -0,0 +1,3 @@
+export declare const MultipleFileInputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Input/FileInput/MultipleFileInput").MultipleFileInputProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeFiles"> & {
+    name: string;
+}, never>;

package/dist/src/Components/FormElements/Controller/PasswordInputController.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PasswordInputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Input/PasswordInput/PasswordInput").PasswordInputProps<unknown, unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, "value" | "ref" | "onBlur" | "name" | "onChangeText"> & {
+    name: string;
+}, HTMLInputElement>;

package/dist/src/Components/FormElements/Controller/SelectController.d.ts

@@ -0,0 +1,3 @@
+export declare const SelectController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Select/Select").SelectProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeValue"> & {
+    name: string;
+}, never>;

package/dist/src/Components/FormElements/Controller/SendFormContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SendFormContext: import("react").Context<(() => void) | undefined>;
+export declare function useSendFormContext(): (() => void) | undefined;

package/dist/src/Components/FormElements/Controller/TextareaController.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TextareaController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Textarea/Textarea").TextareaProps<unknown, unknown> & import("react").RefAttributes<HTMLTextAreaElement>, "value" | "ref" | "onBlur" | "name" | "onChangeText"> & {
+    name: string;
+}, HTMLTextAreaElement>;

package/dist/src/Components/FormElements/Controller/withHookController.d.ts

@@ -0,0 +1,4 @@
+import React, { ComponentProps, ComponentType } from "react";
+export declare function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(Comp: C, onChangeProp: OnChangeProp, emptyValue?: any): import("../../../helper/withForwardRef").RefComponent<Omit<React.ComponentProps<C>, "value" | "ref" | "onBlur" | "name" | OnChangeProp> & {
+    name: string;
+}, React.ComponentRef<C>>;

package/dist/src/Components/FormElements/Input/FileInput/MultipleFileInput.d.ts

@@ -13,5 +13,6 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<Overri
     onError?: (error: string) => void;
     allowOverride?: boolean;
     showDeleteButton?: boolean;
+    error?: string;
 } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>>>;
-export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;
+export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, error, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Input/Input.d.ts

@@ -7,5 +7,6 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
     inline?: boolean;
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
 export declare const Input: import("../../../helper/withForwardRef").RefComponent<InputProps<unknown, unknown, unknown>, HTMLInputElement>;

package/dist/src/Components/FormElements/Select/Select.d.ts

@@ -14,5 +14,6 @@ export type SelectProps<OnChangeData> = RbmComponentProps<Override<SelectHTMLAtt
     onChangeValue?: (newValue: string) => void;
     inline?: boolean;
     small?: boolean;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData>>>;
-export declare const Select: <OnChangeData>({ label, options, className, style, onChangeValue, inline, small, ...otherProps }: SelectProps<OnChangeData>) => React.JSX.Element;
+export declare const Select: <OnChangeData>({ label, options, className, style, onChangeValue, inline, small, error, ...otherProps }: SelectProps<OnChangeData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Textarea/Textarea.d.ts

@@ -9,5 +9,6 @@ export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<Ov
     onEscape?: (newText: string) => void;
     textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>;
     containerRef?: MutableRefObject<HTMLLabelElement | null>;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
 export declare const Textarea: import("../../../helper/withForwardRef").RefComponent<TextareaProps<unknown, unknown>, HTMLTextAreaElement>;

package/dist/src/Components/Hooks/useComposedRef.d.ts

@@ -1,2 +1,2 @@
 import { ForwardedRef } from 'react';
-export declare const useComposedRef: <T>(ref: ForwardedRef<T>, initialValue?: T | null) => import("react").RefObject<T>;
+export declare function useComposedRef<RefVal>(...refs: (ForwardedRef<RefVal> | undefined)[]): (val: RefVal | null) => void;

package/dist/src/Components/Image/Image.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { CSSProperties, DOMAttributes } from 'react';
+import { CSSProperties } from 'react';
 import { Override } from '../../TypeHelpers';
-export type ImageProps = RbmComponentProps<Override<Omit<React.ComponentPropsWithoutRef<'img'>, keyof DOMAttributes<'img'>>, {
+export type ImageProps = RbmComponentProps<Override<React.ComponentPropsWithoutRef<'img'>, {
     src: string;
     style?: CSSProperties;
     alt?: string;

package/dist/src/Components/Layout/Grid/Grid.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
     useContainerWidth?: boolean;
 }>;
-declare function Grid({ style, children, columns, rows, useContainerWidth, className, __allowChildren }: GridProps): React.JSX.Element;
-declare const GridMemo: typeof Grid;
+declare const GridMemo: import("../../../helper/withForwardRef").RefComponent<GridProps, HTMLDivElement>;
 export { GridMemo as Grid };

package/dist/src/Components/List/InfiniteList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListProps } from "./List";
+export type InfiniteListProps<ItemType> = ListProps<ItemType> & {
+    hasNextPage: boolean;
+    loadNextPage: () => unknown | Promise<unknown>;
+};
+export declare const InfiniteList: <ItemType>({ renderItem, itemHeight, items, renderBefore, keyExtractor, hasNextPage, loadNextPage, style, className }: InfiniteListProps<ItemType>) => React.JSX.Element;

package/dist/src/Components/List/List.d.ts

@@ -1,11 +1,13 @@
-import * as React from 'react';
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
+import { FixedSizeList, FixedSizeListProps } from 'react-window';
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
     itemHeight?: number;
     items: ItemType[];
     renderBefore?: (item: ItemType, index: number) => ReactNode;
     keyExtractor?: (item: ItemType, index: number) => string;
+    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
+    autoSizeClassName?: string;
 }>;
-export declare const List: <ItemType>({ items, renderItem, itemHeight: initialItemHeight, className, style, }: ListProps<ItemType>) => React.JSX.Element;
+export declare const List: import("../../helper/withForwardRef").RefComponent<ListProps<unknown>, FixedSizeList<unknown>>;

package/dist/src/Size.d.ts

@@ -0,0 +1,8 @@
+export declare enum Size {
+    xSmall = 0,
+    small = 1,
+    medium = 2,
+    large = 3,
+    xLarge = 4,
+    xxLarge = 5
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -38,9 +38,11 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.3.3",
     "react": ">=18.0.0",
-    "react-beautiful-dnd": "^13.1.1"
+    "react-beautiful-dnd": "^13.1.1",
+    "react-hook-form": "^7.53.0"
   },
   "devDependencies": {
+    "react-hook-form": "^7.53.0",
     "ajv": "^8.14.0",
     "bootstrap": "^5.3.3",
     "react": ">=18.0.0",
@@ -90,7 +92,7 @@
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
-    "@ainias42/js-helper": ">=0.8.14",
+    "@ainias42/js-helper": ">=0.8.15",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
     "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",

package/src/Components/Clickable/Clickable.tsx

@@ -4,7 +4,15 @@ import {OptionalListener, useListener} from '../Hooks/useListener';
 
 import styles from './clickable.scss';
 import classNames from 'classnames';
-import { useCallback, MouseEvent as ReactMouseEvent, ForwardedRef, useEffect, MouseEvent, PointerEvent } from 'react';
+import {
+    useCallback,
+    MouseEvent as ReactMouseEvent,
+    ForwardedRef,
+    useEffect,
+    MouseEvent,
+    PointerEvent,
+    useRef, DragEventHandler
+} from 'react';
 import {withForwardRef} from '../../helper/withForwardRef';
 import {useComposedRef} from "../Hooks/useComposedRef";
 
@@ -13,6 +21,7 @@ type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, Point
 type OnPointerUpListener<Data> = OptionalListener<'onPointerUp', Data, PointerEvent>;
 type OnPointerMoveListener<Data> = OptionalListener<'onPointerMove', Data, PointerEvent>;
 type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragStartListener<Data> = OptionalListener<'onDragStart', Data>;
 type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
 
 export type ClickableProps<
@@ -22,6 +31,7 @@ export type ClickableProps<
     OnMouseUpData,
     OnClickCaptureData,
     OnDropData,
+    OnDragStartData,
     OnDragOverData,
     OnMouseEnterData,
     OnMouseLeaveData,
@@ -36,11 +46,14 @@ export type ClickableProps<
         stopPropagation?: boolean;
         useReactOnMouseLeave?: boolean;
         id?: string;
+        tabIndex?: number;
+        draggable?: boolean
     } & OnClickListener<OnClickData> &
     OnPointerDownListener<OnMouseDownData> &
     OnPointerMoveListener<OnMouseMoveData> &
     OnPointerUpListener<OnMouseUpData> &
     OnDropListener<OnDropData> &
+    OnDragStartListener<OnDragStartData> &
     OnDragOverListener<OnDragOverData> &
     OptionalListener<'onClickCapture', OnClickCaptureData> &
     OptionalListener<'onMouseEnter', OnMouseEnterData> &
@@ -55,6 +68,7 @@ function Clickable<
     OnPointerUpData,
     OnClickCaptureData,
     OnDropData,
+    OnDragStartData,
     OnDragOverData,
     OnMouseEnterData,
     OnMouseLeaveData,
@@ -72,8 +86,10 @@ function Clickable<
         preventDefault = false,
         stopPropagation = true,
         useReactOnMouseLeave = false,
+        tabIndex,
+        draggable,
         ...clickData
-    }: ClickableProps<OnClickData, OnPointerDownData, OnPointerMoveData, OnPointerUpData, OnClickCaptureData, OnDropData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
+    }: ClickableProps<OnClickData, OnPointerDownData, OnPointerMoveData, OnPointerUpData, OnClickCaptureData, OnDropData,OnDragStartData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
     ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
 ) {
     // Variables
@@ -81,7 +97,8 @@ function Clickable<
     // States
 
     // Refs
-    const clickableRef = useComposedRef(ref);
+    const clickableRef = useRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>(null);
+    const refSetter = useComposedRef(ref, clickableRef);
 
     // Callbacks
     const onClickInner = useListener<'onClick', OnClickData>('onClick', clickData);
@@ -196,6 +213,22 @@ function Clickable<
         [clickData.onDragOver, onDragOver, preventDefault, stopPropagation]
     );
 
+    const onDragStartListener = useListener<'onDragStart', OnDragStartData>('onDragStart', clickData);
+    const realOnDragStartListener = useCallback(
+        (e: ReactMouseEvent) => {
+            if (clickData.onDragStart) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDragStartListener(e);
+            }
+        },
+        [clickData.onDragStart, onDragStartListener, preventDefault, stopPropagation]
+    );
+
     const onMouseEnter = useListener<'onMouseEnter', OnMouseEnterData>('onMouseEnter', clickData);
     const realOnMouseEnter = useCallback(
         (e: ReactMouseEvent) => {
@@ -276,17 +309,19 @@ function Clickable<
         onMouseEnter: realOnMouseEnter,
         onMouseLeave: useReactOnMouseLeave ? realOnMouseLeave : undefined,
         onDoubleClick: realOnDoubleClick,
-        tabIndex: interactable ? 0 : undefined,
+        tabIndex: interactable ? 0 : tabIndex,
+        draggable,
+        onDragStart: realOnDragStartListener
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} href={href} ref={clickableRef as ForwardedRef<HTMLAnchorElement>}>
+            <a {...props} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
                 {children}
             </a>
         );
     }
     return (
-        <span {...props} ref={clickableRef as ForwardedRef<HTMLSpanElement>}>
+        <span {...props} ref={refSetter as ForwardedRef<HTMLSpanElement>}>
             {children}
         </span>
     );

package/src/Components/Dialog/ButtonDialog.tsx

@@ -1,19 +1,27 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { Block } from '../Layout/Block';
-import { Text } from '../Text/Text';
+import { Text, TEXT_SIZE } from '../Text/Text';
 import { Clickable } from '../Clickable/Clickable';
 
 import styles from './buttonDialog.scss';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import classNames from 'classnames';
+import { Flavor } from "../Flavor";
+import { Size } from "../../Size";
 
 export type ButtonDialogProps = RbmComponentProps<
-    { title?: string; message: string; buttons: { text: string; callback: () => void }[] },
+    {
+        title?: string;
+        message: string;
+        buttons: { text: string; callback: () => void, flavor?: Flavor }[]
+        extraContent?: ReactElement|null
+    },
     WithNoChildren
 >;
 
-function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps) {
+function ButtonDialog({ title, message, buttons, style, className, extraContent }: ButtonDialogProps) {
     // Variables
 
     // Refs
@@ -31,20 +39,21 @@ function ButtonDialog({ title, message, buttons, style, className }: ButtonDialo
     // Render Functions
 
     return (
-        <Block className={classNames(styles.buttonDialog, className)} style={style}>
+        <Block className={classNames(styles.buttonDialog, className)} style={style} >
             {!!title && (
-                <Block className={styles.title}>
-                    <Text>{title}</Text>
+                <Block>
+                    <Text size={TEXT_SIZE.large} className={styles.title}>{title}</Text>
                 </Block>
             )}
-            <Block className={styles.message}>
-                <Text>{message}</Text>
+            <Block>
+                <Text className={styles.message}>{message}</Text>
             </Block>
+            {extraContent}
             <Block className={styles.buttonContainer}>
                 {buttons.map((b, i) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <Clickable onClick={b.callback} className={styles.button} key={i + b.text}>
-                        <Text>{b.text}</Text>
+                    <Clickable onClick={b.callback} className={classNames(styles.button)} key={i + b.text}>
+                        <Text className={classNames(styles.buttonText, b.flavor ?? Flavor.Accent)}>{b.text}</Text>
                     </Clickable>
                 ))}
             </Block>

package/src/Components/Dialog/ConfirmDialog.tsx

@@ -11,6 +11,7 @@ export type ConfirmDialogProps = {
     confirmText?: string;
 };
 
+// TODO Translation
 function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmText = 'OK' }: ConfirmDialogProps) {
     // Variables
     const buttons = useMemo(

package/src/Components/Dialog/buttonDialog.scss

@@ -1,5 +1,6 @@
 @import "../../scss/variables";
 @import "../../scss/designMixin";
+@import "../../scss/flavorMixin";
 
 .buttonDialog {
   font-weight: 400;
@@ -18,8 +19,13 @@
     width: 100%;
 
     .button {
-      color: var(--flavor-accent);
       padding: 0 8px;
+
+      .buttonText {
+        @include flavorSelection(--text-primary-default-color);
+
+      }
+
     }
   }
 
@@ -51,15 +57,18 @@
         display: block;
         border-left: 1px solid var(--border-light);
         border-top: 1px solid var(--border-light);
-        text-overflow: ellipsis;
-        letter-spacing: 0;
         vertical-align: middle;
-        font-size: 16px;
         text-align: center;
         height: 44px;
-        line-height: 44px;
         overflow: hidden;
 
+        .buttonText {
+          line-height: 44px;
+          text-overflow: ellipsis;
+          letter-spacing: 0;
+          font-size: 16px;
+        }
+
         &:first-child {
           border-left: none;
         }
@@ -102,12 +111,15 @@
         width: auto;
         float: right;
         border-radius: 2px;
-        font-size: 14px;
-        font-weight: 500;
         height: 36px;
-        line-height: 36px;
         margin: 8px 8px 8px 0;
         min-width: 50px;
+
+        .buttonText {
+          line-height: 36px;
+          font-size: 14px;
+          font-weight: 500;
+        }
       }
     }
   }

package/src/Components/Flavor.ts

@@ -1,4 +1,6 @@
 export enum Flavor {
     Accent = "flavor-accent",
     Basic = "flavor-basic",
+    Destructive = "flavor-destructive",
+    Constructive = "flavor-constructive",
 }

package/src/Components/FormElements/Button/Button.tsx

@@ -1,20 +1,23 @@
 import * as React from 'react';
-import {Override} from '@ainias42/js-helper';
-import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
+import { Override } from '@ainias42/js-helper';
+import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
 
 import styles from './button.scss';
 import classNames from 'classnames';
-import {withMemo} from '../../../helper/withMemo';
-import {HTMLAttributes} from 'react';
-import {RbmComponentProps} from '../../RbmComponentProps';
-import {ButtonType} from "./ButtonType";
-import {Flavor} from "../../Flavor";
+import { withMemo } from '../../../helper/withMemo';
+import { HTMLAttributes } from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { ButtonType } from "./ButtonType";
+import { Flavor } from "../../Flavor";
+import { Size } from "../../../Size";
 
 export type ButtonProps<ClickData> = RbmComponentProps<
     Override<HTMLAttributes<HTMLButtonElement>, {
         type?: ButtonType,
         disabled?: boolean;
         flavor?: Flavor
+        fullWidth?: boolean;
+        size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">
     } & OptionalListener<'onClick', ClickData>>
 >;
 
@@ -22,6 +25,8 @@ export const Button = withMemo(function Button<ClickData>({
                                                               children,
                                                               className,
                                                               disabled,
+                                                              size,
+                                                              fullWidth = false,
                                                               flavor = Flavor.Accent,
                                                               type = ButtonType.Primary,
                                                               ...props
@@ -32,11 +37,12 @@ export const Button = withMemo(function Button<ClickData>({
         [styles.primary]: type === ButtonType.Primary,
         [styles.secondary]: type === ButtonType.Secondary,
         [styles.disabled]: disabled,
+        [styles.small]: size === Size.small
     };
 
     return (
         <button {...otherProps} disabled={disabled} type="button" onClick={onClick}
-                className={classNames(styles.button, classes, flavor, className)}>
+                className={classNames(styles.button, {[styles.fullWidth]: fullWidth}, classes, flavor, className)}>
             {children}
         </button>
     );

package/src/Components/FormElements/Button/button.scss

@@ -53,4 +53,21 @@
     cursor: default;
     pointer-events: none;
   }
+
+  &.small {
+    @include design($material) {
+      min-height: 17px;
+      line-height: 17px;
+      padding: 0 8px;
+    }
+
+    @include design($flat) {
+      line-height: 17px;
+      padding: 4px 9px;
+    }
+  }
+
+  &.fullWidth {
+    width: 100%;
+  }
 }

package/src/Components/FormElements/Controller/HookForm.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { FormProvider, FormProviderProps } from "react-hook-form";
+import { withMemo } from "../../../helper/withMemo";
+import { LoadingArea } from "../../LoadingArea/LoadingArea";
+import { SendFormContext } from "./SendFormContext";
+
+type FieldValues = Record<string, any>;
+export type HookFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined> =
+    FormProviderProps<TFieldValues, TContext, TTransformedValues>
+    & {
+    onSend?: () => void;
+};
+
+export const HookForm = withMemo(function HookForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>({
+                                                                                                                                                                                       children,
+                                                                                                                                                                                       onSend,
+                                                                                                                                                                                       ...methods
+                                                                                                                                                                                   }: HookFormProps<TFieldValues, TContext, TTransformedValues>) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Create an inner, as the onSend may have other attributes
+    const innerOnSend = useCallback(() => onSend?.(), [onSend]);
+
+    // Dispatch
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <FormProvider {...methods}>
+        <SendFormContext.Provider value={innerOnSend}>
+            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren={"all"}>
+                {children}
+            </LoadingArea>
+        </SendFormContext.Provider>
+    </FormProvider>;
+});

package/src/Components/FormElements/Controller/InputController.ts

@@ -0,0 +1,4 @@
+import { Input } from "../Input/Input";
+import { withHookController } from "./withHookController";
+
+export const InputController = withHookController(Input, "onChangeText");