loon-bulma-react 2022.3.21 → 2022.3.22

package/dist/components/Button/ButtonProps.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
+import { ColorProp, SizeProp } from '~/loon-react-bulma-types';
 declare type ButtonTypes = 'button' | 'submit' | 'reset' | undefined;
 declare type ButtonStyles = 'static' | 's' | 'light' | 'l' | 'outlined' | 'o' | 'inverted' | 'i' | 'light-outlined' | 'lo' | 'default';
 export declare type ButtonProps = {

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlignmentProp } from '../../loon-react-bulma-types';
+import { AlignmentProp } from '~/loon-react-bulma-types';
 declare type ButtonGroupProps = {
     /** Een buttongroup kan alleen Buttons als children hebben! */
     children?: React.ReactNode;

package/dist/components/Calendar/Month/DayContainer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
-import { JSDateTime } from '../../../utils/JSDateTime.class';
+import { JSDateTime } from '~/utils';
 declare type DayContainerProps<T extends BaseEventProps> = {
     /** events op deze dag */
     events: T[];

package/dist/components/Calendar/Month/MonthView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { JSDateTime } from '../../../utils/JSDateTime.class';
+import { JSDateTime } from '~/utils';
 import { BaseEventProps, CalendarOptions } from '../Props';
 declare type MonthViewProps<T extends BaseEventProps> = {
     /** events voor deze view */

package/dist/components/Calendar/Week/WeekView.d.ts

@@ -1,6 +1,6 @@
 import { BaseEventProps, CalendarOptions } from '../Props';
 import React from 'react';
-import { JSDateTime } from '../../../utils/JSDateTime.class';
+import { JSDateTime } from '~/utils';
 declare type WeekViewProps<T extends BaseEventProps> = {
     /** events voor deze view */
     events: T[];

package/dist/components/Content/Content.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { SizeProp } from '../../loon-react-bulma-types';
+import { SizeProp } from '~/loon-react-bulma-types';
 declare type ContentPropsType = {
     size?: SizeProp;
     children: React.ReactNode;

package/dist/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlignmentProp } from '../../loon-react-bulma-types';
+import { AlignmentProp } from '~/loon-react-bulma-types';
 /** De props voor de DataTable Component zelf. */
 declare type DataTableProps<T extends unknown> = {
     /** Titels voor de kolommen als die afwijken van de object-properties */

package/dist/components/Footer/Footer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlignmentProp } from '../../loon-react-bulma-types';
+import { AlignmentProp } from '~/loon-react-bulma-types';
 export declare type FooterProps = {
     /** de content voor de footer */
     children: React.ReactNode;
@@ -7,6 +7,8 @@ export declare type FooterProps = {
     alignment?: AlignmentProp;
     /** extra classes voor op de footer */
     className?: string;
+    /** custom styles voor de footer */
+    styles?: React.CSSProperties;
 };
 /**
  * Maak een footer voor onderaan de pagina.
@@ -15,4 +17,4 @@ export declare type FooterProps = {
  * @returns een footer met daarin de content.
  * @example <Footer>This is a footer</Footer>
  */
-export declare function Footer({ children, alignment, className }: FooterProps): JSX.Element;
+export declare function Footer({ children, alignment, className, styles }: FooterProps): JSX.Element;

package/dist/components/Hero/Hero.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SizeProp } from '../../loon-react-bulma-types';
+import { SizeProp } from '~/loon-react-bulma-types';
 declare type HeroProps = {
     children?: React.ReactNode;
     /** type hero */

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
-import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
+import { ColorProp, SizeProp } from '~/loon-react-bulma-types';
 declare type IconProps = {
     /** react font-awesome icon
      * - string: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.

package/dist/components/Image/Image.d.ts

@@ -13,6 +13,8 @@ declare type ImageProps = {
     alt: string;
     /** een optionele figcaption */
     figCaption?: string;
+    /** classNames voor de omringende div */
+    className?: string;
 };
 /**
  * Een afbeelding met een vastgestelde aspect ratio.

package/dist/components/Indicator/Indicator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorProp, IndicatorPositionProp } from '../../loon-react-bulma-types';
+import { ColorProp, IndicatorPositionProp } from '~/loon-react-bulma-types';
 declare type IndicatorProps = {
     /** positie van de indicator (default = 'tr' (top-right)) */
     position?: IndicatorPositionProp;

package/dist/components/Message/Message.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
+import { ColorProp, SizeProp } from '~/loon-react-bulma-types';
 declare type MessageProps = {
     /** content van de message */
     children: React.ReactNode;

package/dist/components/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SizeProp } from '../..';
+import { SizeProp } from '~/loon-react-bulma-types';
 declare type ModalProps = {
     /** content van de modal. Als deze te lang wordt, wordt hij scrollable */
     children: React.ReactNode;

package/dist/components/Notification/Notification.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorProp } from '../../loon-react-bulma-types';
+import { ColorProp } from '~/loon-react-bulma-types';
 /**
  * Een instelbare notificatie. Default is een info-notificatie
  * @param props

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
+import { ColorProp, SizeProp } from '~/loon-react-bulma-types';
 declare type ProgressBarProps = {
     /** grootte van de progressbar */
     size?: SizeProp;

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AlignmentProp } from '../../..';
+import { AlignmentProp } from '~/loon-react-bulma-types';
 /**
  * Maak een ScrollArea om in een bepaalde richting te kunnen scrollen. De scrollareas maken gebruik van flexbox.
  */

package/dist/components/Steps/Steps.d.ts

@@ -1,4 +1,4 @@
-import { SizeProp } from '../../loon-react-bulma-types';
+import { SizeProp } from '~/loon-react-bulma-types';
 import React from 'react';
 declare type StatusType = 'active' | 'completed' | 'error' | 'pending';
 declare type StepChoiceType = 'disabled' | 'up' | 'down' | 'allowed';

package/dist/components/TabBar/TabBar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { AlignmentProp, SizeProp } from '../../loon-react-bulma-types';
+import type { AlignmentProp, SizeProp } from '~/loon-react-bulma-types';
 export declare type TabBarProps = {
     /** tab grootte. (default = 'n') */
     size?: SizeProp;

package/dist/components/Tag/Tag.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { AlignmentProp } from '../..';
-import { ColorProp, TagSizeProp } from '../../loon-react-bulma-types';
+import { ColorProp, TagSizeProp, AlignmentProp } from '~/loon-react-bulma-types';
 export declare type TagProps = {
     /** content van de tag */
     children: React.ReactNode;

package/dist/components/TimeLine/TimeLine.d.ts

@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
-import { AlignmentProp, ColorProp, TagSizeProp } from '../../loon-react-bulma-types';
+import { AlignmentProp, ColorProp, TagSizeProp } from '~/loon-react-bulma-types';
 declare type TimeLineProps = {
     /** alignment van de timeline (default = 'l', left) */
     alignment?: AlignmentProp;

package/dist/components/ToggleBar/ToggleBar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SizeProp, ColorProp, AlignmentProp } from '../../loon-react-bulma-types';
+import { SizeProp, ColorProp, AlignmentProp } from '~/loon-react-bulma-types';
 declare type ToggleBarProps = {
     /** de beginwaarde (default = undefined)
      * Deze property wordt alleen voor ToggleItems gebruikt. voor OnOffToggleItems kan dat per item geset worden

package/dist/contexts/Notifier/NotifierProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorProp } from '../../loon-react-bulma-types';
+import { ColorProp } from '~/loon-react-bulma-types';
 export declare type NotifierProviderProps = {
     /** de child-components die de notifier mogen gebruiken */
     children: any;

package/dist/forms/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
+import { CheckradioStylingType, ColorProp } from '~/loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 declare type CheckboxInputProps = Omit<BaseInputProps, 'icons'> & {
     /** kleur van de checkbox (default = 'l', link) */

package/dist/forms/Currency/CurrencyInput.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { BaseInputProps } from '../shared';
+declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
+    /** start value voor deze input (optioneel) */
+    value?: number;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param isValid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: [number, string], isValid?: boolean): void;
+    /** scheidingsteken gehele getallen en decimalen (default = ',' ) */
+    decimalSeparator?: string;
+    /** scheidingsteken per duizend (default = '.') */
+    thousandsSeparator?: string;
+};
+/**
+ * Maak een input van een tekst-type met optionele validation.
+ * @param props
+ * @returns Een CurrencyInput
+ * @example <CurrencyInput value="12" {...props} />
+ * @description alle props voor CurencyInput component
+ * | prop              | type                      | default | description                                |
+ * |-------------------|---------------------------|---------|--------------------------------------------|
+ * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string`                  | `name`  | de label voor de input                     |
+ * | autocomplete      | `AutoCompleteType`        |         | de autocomplete type voor de input         |
+ * | id                | `string`                  | `name`  | de id voor de input                        |
+ * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`                 | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`       |         |                                            |
+ * |                   | `numeric`, `decimal`      |         |                                            |
+ * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
+ * | value             | `string`|`number`         |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`                  |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, onValueChanged, onKeyDown, decimalSeparator, ...props }: CurrencyInputProps): JSX.Element;
+export { LbrCurrencyInput as CurrencyInput };
+export type { CurrencyInputProps };

package/dist/forms/Form.d.ts

@@ -1,4 +1,4 @@
-import { AlignmentProp, DirectionProp, SizeProp } from '../loon-react-bulma-types';
+import { AlignmentProp, DirectionProp, SizeProp } from '~/loon-react-bulma-types';
 import React from 'react';
 import { CheckBox } from './Checkbox/Checkbox';
 import { DateInput } from './Datetimes/DateInput';

package/dist/forms/Input.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { AutoCompleteType } from './../loon-react-bulma-types';
+import { AutoCompleteType } from '~/loon-react-bulma-types';
 import { BaseInputProps, InputTypeProp } from './shared';
 declare type InputValueType = string | number | readonly string[] | Date | undefined;
 declare type InputProps<T extends InputValueType> = BaseInputProps<T> & {

package/dist/forms/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CheckradioStylingType, ColorProp, DirectionProp, SizeProp, TextAlignmentProp } from '../../loon-react-bulma-types';
+import { CheckradioStylingType, ColorProp, DirectionProp, SizeProp, TextAlignmentProp } from '~/loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 declare type RadioInputProps = Omit<BaseInputProps, 'icons'> & {
     value?: string;

package/dist/forms/Selects/Select.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SizeProp } from '../../loon-react-bulma-types';
+import { SizeProp } from '~/loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './BaseSelectProps';
 declare type SelectInputProps = Omit<BaseInputProps, 'icons'> & {

package/dist/forms/Text/EmailInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AutoCompleteType } from '../../loon-react-bulma-types';
+import { AutoCompleteType } from '~/loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 declare type EmailInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) */

package/dist/forms/Text/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AutoCompleteType } from '../../loon-react-bulma-types';
+import { AutoCompleteType } from '~/loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 declare type PasswordInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) */

package/dist/forms/Text/TextInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AutoCompleteType } from '../../loon-react-bulma-types';
+import { AutoCompleteType } from '~/loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 declare type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | string | RegExp;
 declare type TextInputProps = BaseInputProps & {

package/dist/forms/index.d.ts

@@ -38,3 +38,5 @@ export { TimeInput } from './Datetimes/TimeInput';
 export type { TimeInputProps } from './Datetimes/TimeInput';
 export { FileInput } from './File/FileInput';
 export type { FileInputProps } from './File/FileInput';
+export { CurrencyInput } from './Currency/CurrencyInput';
+export type { CurrencyInputProps } from './Currency/CurrencyInput';

package/dist/forms/shared/BaseInputProps.d.ts

@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
-import { TextAlignmentProp, DirectionProp, KeyboardTypeProp, SizeProp } from '../../loon-react-bulma-types';
+import { TextAlignmentProp, DirectionProp, KeyboardTypeProp, SizeProp } from '~/loon-react-bulma-types';
 export declare type BaseInputProps<T extends any = void> = {
     /** is dit veld disabled ? (optioneel) */
     disabled?: boolean;