loon-bulma-react 2023.0.18 → 2023.0.19

package/README.md

@@ -2,11 +2,9 @@
 
 > ## Aanpassingen
 >
-> - DataTable: als er geen rijen zijn, kan je met de `onNoRowsToRender`-prop vertellen wat er dan WEL gerendered moet worden
-> - DataTable: striped-color & hover-color zijn anders
-> - DataTable: search-bar smaller en maximaal helft van de beschikbare ruimte
-> - DataTable: wrapping van header elementen aangepast
-> - Currency Input: gemaakt - probeer maar
+> - `<CB>`-component gemaakt. Een kale checkbox met een label. Geen wrapper, geen direction, geen form.
+> - `<RB>`-component gemaakt. Een Radio-button met een label. Geen wrapper, geen direction, geen form.
+> - `ColorProp` uitgebreid met `"is-${`_string_`}"`-template literal. Als _Bulma_ nog andere kleuren gebruikt dan de standaard-kleuren, kan je die op die manier gebruiken.
 
 ## [Bulma](https://bulma.io/) &amp; [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
@@ -63,6 +61,7 @@
       - FileInput
       - BasicInput
     - [CheckBox](#form-checkbox)
+    - [CB](#form-cb)
     - [RadioButtons](#form-radio)
     - [Ranges](#form-ranges)
       - Range
@@ -1499,6 +1498,24 @@ Ook is er een `styling`-prop. Met deze kan je wat styling aanpassen
 </div>
 ```
 
+### CB <a id="form-cb"></a>
+
+De `<CB>`-component is ene losstaande checkbox-component. Deze mist alle props die de `<CheckBox>`-component wel heeft. De `<CB>`-component heeft wel een `checked`-prop, die je kan gebruiken om de checkbox te controleren. Er is geen validatie, geen direction-prop etc. De `<CB>` heeft wel een `onValueChanged`-prop, die je kan gebruiken om een functie uit te voeren als de checkbox veranderd.
+
+- de `className`-prop bepaalt de classnames van de omringende div.
+
+```tsx
+<div>
+  <CB name="name-cb" label="Checkbox" onValueChanged={(checked) => handleChange(checked)} />
+  <CB
+    className="has-background-color-grey"
+    name="name-cb-2"
+    label="Checkbox2"
+    onValueChanged={(checked) => handleChange2(checked)}
+  />
+</div>
+```
+
 #### RadioButtons <a id="form-radio"></a>
 
 Radiobuttons kan je maken met de `<RadioGroup>`-component. De `<RadioGroup>` zelf is een container voor de `<RadioGroup.Item>`-buttons omeen radio-button-group te maken.
@@ -1564,6 +1581,92 @@ const [radio, setRadio] = React.useState('Sieben');
 <>
 ```
 
+### RB <a id="forms-rb"></a>
+
+De `<RB>`-component is ene losstaande checkbox-component. Deze mist alle props die de `<RadioButton>`-component wel heeft. De `<RB>`-component heeft een `checked`-prop en een `value`-prop die je kan gebruiken om de radiobutton te controleren.
+
+- `checked`: Is dit item checked of niet (is dit het geselecteerde item)
+- `value`: de waarde om te emitten als deze optie wordt geselecteerd (typed, default =`string`).
+
+Er is geen validatie, geen direction-prop etc. De `<CB>` heeft wel een `onValueChanged`-prop, die je kan gebruiken om een functie uit te voeren als de radio-button veranderd.
+
+##### Voorbeeld met gewone `<RB>`
+
+```tsx
+<div>
+  <RB
+    groupName="name-rb"
+    checked={rbValue === '1'}
+    value="1"
+    onValueChanged={(v) => setRbValue(v)}
+    label="Radio1"
+    id="radio-group-name-1"
+  />
+  <RB
+    groupName="name-rb"
+    checked={rbValue === '2'}
+    value="2"
+    onValueChanged={(v) => setRbValue(v)}
+    label="Radio2"
+    id="radio-group-name-2"
+  />
+</div>
+```
+
+##### voorbeeld met een typed `<RB<typeof state>>`
+
+```tsx
+const [state, setState] = React.useState<number>(0);
+
+return (
+  <div>
+    {[1, 2, 3, 4].map((v) => (
+      <RB<typeof rb2Value>
+        key={v}
+        groupName="name-rb-2"
+        checked={rb2Value === v}
+        value={v}
+        onValueChanged={(v) => setRb2Value(v)}
+        label={`Radio ${v} - numeric Type`}
+        id={`radio-group-name-${v}-2`}
+      />
+    ))}
+  </div>
+);
+```
+
+##### voorbeeld met een typed object value `<RB<{waarde: number, tekst: string}>>`
+
+```tsx
+const [state, setState] = React.useState<{ waarde: number; tekst: string }>(0);
+
+const values = [
+  { waarde: 1, tekst: 'oobsie woobsie dooo 1' },
+  { waarde: 2, tekst: 'oobsie woobsie dooo 2' },
+  { waarde: 3, tekst: 'oobsie woobsie dooo 3' },
+  { waarde: 4, tekst: 'oobsie woobsie dooo 4' },
+];
+
+return (
+  <div>
+    {values.map((v) => (
+      <RB<{ waarde: number; tekst: string }>
+        key={v.waarde}
+        groupName="name-rb-3"
+        checked={rb3Value?.waarde === v.waarde}
+        value={v}
+        onValueChanged={(v) => {
+          console.log(v);
+          setRb3Value(v);
+        }}
+        label={`Radio v-${v.waarde} - object Type`}
+        id={`radio-group-name-${v.waarde}-3`}
+      />
+    ))}
+  </div>
+);
+```
+
 #### Ranges <a id="form-ranges"></a>
 
 Een `<Range>` of `<MultiRange>` is een component om op een andere manier een nummer te selecteren. In plaats van invullen, selecteer je deze op een schaal. Er zijn 2 soorten ranges: **Range** en **MultiRange**. Een Range werkt hetzelfde als een `<input type="number">`, het resultaat is ook een number. Een MultiRange werkt iets anders: het resultaat is een `number[]`, bestaand uit 2 getallen. Deze getallen staan altijd in dezelfde volgorde, dus als je twee begin-waardes opgeeft, komen die er in dezelfde volgorde uit. _Dus niet gesorteerd van klein naar groot_.

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

@@ -9,12 +9,13 @@ import { BaseButtonProps, ButtonProps } from './ButtonProps';
  * | Prop     | Value                   | Default  | Description                             |
  * |----------|-------------------------|----------|-----------------------------------------|
  * | children |                         |          | De content van de button (icon, text)   |
- * | color    | `p, l, i, w, d, s`      |   `p`    | Kleuren voor de button                  |
- * | styling  | `l`, light              |          | Light style voor de button              |
- * |          | `o`, outlined           |          | Outlined style voor de button           |
- * |          | `i`, inverted           |          | Inverted style voor de button           |
+ * | color    | `p`, `l`, `i`, `w`, `d`,|   `p`    | Kleuren voor de button                  |
+ * |          | `s`, `is-${string}`     |          |                                         |
+ * | styling  | `l` , light             |          | Light style voor de button              |
+ * |          | `o` , outlined          |          | Outlined style voor de button           |
+ * |          | `i` , inverted          |          | Inverted style voor de button           |
  * |          | `lo`, light-outlined    |          | Light & outlined style voor de button   |
- * |          | `s`, static             |          | static style voor de button (grey)      |
+ * |          | `s` , static            |          | static style voor de button (grey)      |
  * | size     | `s, m, l, xl`           |          | sizes voor de button                    |
  * | rounded  | `true, false`           | `false`  | Afgeronde hoeken voor de button         |
  * | loading  | `true, false`           | `false`  | heeft button de loading state           |
@@ -25,7 +26,7 @@ import { BaseButtonProps, ButtonProps } from './ButtonProps';
  * | type     | `button, reset, submit` | `button` | type 'button' voor de button            |
  */
 declare const Button: {
-    (props: BaseButtonProps): JSX.Element;
+    ({ color, size, rounded, loading, disabled, type, styling, onClick, children: chldrn, tooltip, id, }: BaseButtonProps): JSX.Element;
     /**
      * Een Static Button
      * Een static button is niet interactief, maar wordt bijvoorbeeld gebruikt als scheiding voor add-ons

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

@@ -14,7 +14,7 @@ declare type MessageProps = {
  */
 declare const Message: {
     ({ children, title, size, color, }: MessageProps & {
-        color?: "i" | "p" | "s" | "d" | "w" | "l" | undefined;
+        color?: string | undefined;
     }): JSX.Element;
     /** Een primary-colored message
      * @param props props

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

@@ -3,7 +3,7 @@ import { ColorProp, TagSizeProp, AlignmentProp } from '../../loon-react-bulma-ty
 export declare type TagProps = {
     /** Content van de tag */
     children: React.ReactNode;
-    /** Kleur van de tag, de standaard kleuren + dark & light */
+    /** Kleur van de tag, de standaard kleuren + dark & light en `is-${`string`}`-waardes */
     color?: ColorProp | 'dark' | 'light';
     /** Sizes van de tag. (default = 's'). LET OP 3 verschillende sizes ipv 4! */
     size?: TagSizeProp;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
+import { BaseInputProps } from '../shared';
+declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label'> & {
+    /** Speciale styling van de checkbox */
+    styling?: CheckradioStylingType;
+    /** Is de checkbox checked */
+    checked?: boolean;
+    /** Kleur van de checkbox (default = 'l', link) */
+    color?: ColorProp | ((checked: boolean) => ColorProp);
+    /** Verplicht label voor een gewone checkbox */
+    label: string | React.ReactNode;
+    /** Wat te doen als de waarde is veranderd
+     * @param checked: is de checkbox checked ?
+     */
+    onValueChanged?(checked: boolean): void;
+    /** classes voor de omringende `<div>` van de checkbox/label combi */
+    className?: string;
+};
+/**
+ * Maak een kale checkbox input met een label, dus ZONDER alle form-functies met controls, fields en directions.
+ * @param props
+ * @returns een checkbox
+ * @example <CB checked={true} {...props}/>
+ * @description alle props voor de CB component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string?`            | `name`  | de label 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-uitlijning van de input            |
+ * | checked           | `boolean`            | `false` | is de checkbox `checked` of niet           |
+ * | color             | `l`,`p`,`s`,`d`,`w`, | `l`     | de kleur van de checkbox                   |
+ * |                   | `i`,`is-${string}`   |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+ * |                   | `colored`, `blocky`  |         |                                            |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | onValueChanged()  | `function`           |         | (value: boolean, valid?: boolean) => void  |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function JustACheckbox({ checked: defaultChecked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, className: containerClassName, onValueChanged, onKeyDown, }: CBInputProps): JSX.Element;
+export { JustACheckbox as CB };
+export type { CBInputProps };

package/dist/forms/Form.d.ts

@@ -130,7 +130,7 @@ declare const Form: {
             tooltip?: string | undefined;
             children?: React.ReactNode;
             size?: "s" | "l" | "m" | "xl" | undefined;
-            color?: "i" | "p" | "s" | "d" | "w" | "l" | undefined;
+            color?: string | undefined;
             styling?: "rounded" | "noborder" | "colored" | "blocky" | undefined;
             direction?: "horizontal" | "vertical" | "v" | "h" | undefined;
             textAlign?: "l" | "c" | "r" | undefined;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
+import { BaseInputProps } from '../shared';
+declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'id' | 'name'> & {
+    /** de group-name voor deze inputs. Radiobuttons werken daar iets anders mee */
+    groupName: string;
+    /** Speciale styling van de checkbox */
+    styling?: CheckradioStylingType;
+    /** de te emitten waarde als deze radiobutton checked moet worden */
+    value: T;
+    /** Is deze radio-button checked */
+    checked: boolean;
+    /** Kleur van de checkbox (default = 'l', link) */
+    color?: ColorProp | ((value: T) => ColorProp);
+    /** Verplicht label voor een gewone checkbox */
+    label: string | React.ReactNode;
+    /** Wat te doen als de waarde is veranderd
+     * @param checked: is de checkbox checked ?
+     */
+    onValueChanged?(value: T): void;
+    /** classes voor de omringende `<div>` van de checkbox/label combi */
+    className?: string;
+    /** ID voor het item. Bij radio-buttons is deze VERPLICHT! */
+    id: string;
+};
+/**
+ * Maak een kale radiobutton input met een label, dus ZONDER alle form-functies met controls, fields en directions.
+ * @param props
+ * @returns een radiobutton
+ * @example <RB checked={true} groupName="radio-button-group-name" {...props}/>
+ * @description alle props voor de CB component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | groupName         | `string`             |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string?`            | `name`  | de label 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-uitlijning van de input            |
+ * | checked           | `boolean`            | `false` | is de checkbox `checked` of niet           |
+ * | color             | `l`,`p`,`s`,`d`,`w`, | `l`     | de kleur van de checkbox                   |
+ * |                   | `i`,`is-${string}`   |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+ * |                   | `colored`, `blocky`  |         |                                            |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | setValueFn()      | `function`           |         | (newVal: T) => void. Gebruik om een React-useState-setfunction aan te roepen |
+ */
+declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, className: containerClassName, onValueChanged, }: RBInputProps<T>): JSX.Element;
+export { JustARadioButon as RB };
+export type { RBInputProps };

package/dist/forms/index.d.ts

@@ -4,6 +4,8 @@ export { FormBuilder } from './FormBuilder/FormBuilder';
 export type { FormBuilderProps, FormBuilderFieldProps, FormBuilderButton, } from './FormBuilder/FormBuilderProps';
 export { CheckBox } from './Checkbox/Checkbox';
 export type { CheckboxInputProps } from './Checkbox/Checkbox';
+export { CB } from './Checkbox/CB';
+export type { CBInputProps } from './Checkbox/CB';
 export { Select } from './Selects/Select';
 export type { SelectOptionGroupType, SelectOptionType } from './Selects/BaseSelectProps';
 export type { SelectInputProps } from './Selects/Select';
@@ -16,6 +18,8 @@ export type { HiddenInputProps } from './Others/HiddenInput';
 export { Input } from './Input';
 export type { InputProps, InputValueType } from './Input';
 export { RadioGroup, Radio } from './Radio/Radio';
+export { RB } from './Radio/RB';
+export type { RBInputProps } from './Radio/RB';
 export { EmailInput } from './Text/EmailInput';
 export type { EmailInputProps } from './Text/EmailInput';
 export { PasswordInput } from './Text/PasswordInput';

package/dist/index.js

@@ -2059,22 +2059,26 @@ TabBar.Item = TabBarItem;
 
 function Tag(_ref) {
   var children = _ref.children,
-    color = _ref.color,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'l' : _ref$color,
     size = _ref.size,
     light = _ref.light,
     rounded = _ref.rounded,
     tooltip = _ref.tooltip,
     onDismiss = _ref.onDismiss;
-  var classes = 'tag';
-  classes += light ? ' is-light' : '';
-  classes += rounded ? ' is-rounded' : '';
-  if (color === 'p') classes += ' is-primary';else if (color === 'i') classes += ' is-info';else if (color === 'd') classes += ' is-danger';else if (color === 'w') classes += ' is-warning';else if (color === 's') classes += ' is-success';else if (color === 'dark') classes += ' is-dark';else if (color === 'light') classes += ' is-light';else classes += ' is-link';
-  if (size === 'm') classes += ' is-medium';else if (size === 'l') classes += ' is-large';
+  var className = React__default.useMemo(function () {
+    var classes = 'tag';
+    classes += light ? ' is-light' : '';
+    classes += rounded ? ' is-rounded' : '';
+    if (color === 'p') classes += ' is-primary';else if (color === 'l') classes += ' is-link';else if (color === 'i') classes += ' is-info';else if (color === 'd') classes += ' is-danger';else if (color === 'w') classes += ' is-warning';else if (color === 's') classes += ' is-success';else if (color === 'dark') classes += ' is-dark';else if (color === 'light') classes += ' is-light';else classes += " " + color;
+    if (size === 'm') classes += ' is-medium';else if (size === 'l') classes += ' is-large';
+    return classes;
+  }, [light, rounded, color, size]);
   var handleDismiss = function handleDismiss(e) {
     return onDismiss && onDismiss(e);
   };
   return React__default.createElement("span", {
-    className: classes,
+    className: className,
     title: tooltip
   }, children, onDismiss && React__default.createElement("button", {
     className: "delete",
@@ -2370,27 +2374,35 @@ var ButtonGroup = function ButtonGroup(props) {
   }));
 };
 
-var Button = function Button(props) {
-  var color = props.color,
-    size = props.size,
-    rounded = props.rounded,
-    loading = props.loading,
-    disabled = props.disabled,
-    type = props.type,
-    styling = props.styling;
-  var className = 'button';
-  if (styling === 'static' || styling === 's') className += ' is-static';else {
-    if (color === 'i') className += ' is-info';else if (color === 'l') className += ' is-link';else if (color === 'd') className += ' is-danger';else if (color === 's') className += ' is-success';else if (color === 'w') className += ' is-warning';else className += ' is-primary';
-    if (styling === 'light' || styling === 'l') className += ' is-light';else if (styling === 'outlined' || styling === 'o') className += ' is-outlined';else if (styling === 'inverted' || styling === 'i') className += ' is-inverted';else if (styling === 'light-outlined' || styling === 'lo') className += ' is-light is-outlined';
-  }
-  if (size === 's') className += ' is-small';else if (size === 'l') className += ' is-medium';else if (size === 'xl') className += ' is-large';
-  if (rounded) className += ' is-rounded';
-  if (loading) className += ' is-loading';
+var Button = function Button(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'p' : _ref$color,
+    size = _ref.size,
+    rounded = _ref.rounded,
+    loading = _ref.loading,
+    disabled = _ref.disabled,
+    type = _ref.type,
+    styling = _ref.styling,
+    onClick = _ref.onClick,
+    chldrn = _ref.children,
+    tooltip = _ref.tooltip,
+    id = _ref.id;
+  var className = React__default.useMemo(function () {
+    var cn = 'button';
+    if (styling === 'static' || styling === 's') cn += ' is-static';else {
+      if (color === 'p') cn += ' is-primary';else if (color === 'i') cn += ' is-info';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 's') cn += ' is-success';else if (color === 'w') cn += ' is-warning';else cn += " " + color;
+      if (styling === 'light' || styling === 'l') cn += ' is-light';else if (styling === 'outlined' || styling === 'o') cn += ' is-outlined';else if (styling === 'inverted' || styling === 'i') cn += ' is-inverted';else if (styling === 'light-outlined' || styling === 'lo') cn += ' is-light is-outlined';
+    }
+    if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
+    if (rounded) cn += ' is-rounded';
+    if (loading) cn += ' is-loading';
+    return cn;
+  }, [color, styling, size, rounded, loading]);
   var handleClick = function handleClick(e) {
-    if (loading || disabled || styling == 'static') return;
-    props.onClick && props.onClick(e);
+    if (loading || disabled || styling === 'static') return;
+    onClick && onClick(e);
   };
-  var children = React__default.Children.map(props.children, function (child) {
+  var children = React__default.Children.map(chldrn, function (child) {
     if (typeof child === 'string') return React__default.createElement("span", null, child);
     return child;
   });
@@ -2402,8 +2414,8 @@ var Button = function Button(props) {
     onClick: function onClick(e) {
       return handleClick(e);
     },
-    title: props.tooltip,
-    id: props.id
+    title: tooltip,
+    id: id
   }, children);
 };
 Button.Static = function (props) {
@@ -4515,15 +4527,18 @@ function CheckBox(props) {
       validation: props.validation
     });
   }, [props.value, props.validation]);
-  var className = 'is-checkradio';
   var size = props.size,
     color = props.color,
     styling = props.styling,
     textAlign = props.textAlign;
-  if (size === 's') className += ' is-small';else if (size === 'l') className += ' is-medium';else if (size === 'xl') className += ' is-large';
-  if (color === 'w') className += ' is-warning';else if (color === 'd') className += ' is-danger';else if (color === 'i') className += ' is-info';else if (color === 's') className += ' is-success';else if (color === 'p') className += ' is-primary';else className += ' is-link';
-  if (styling === 'rounded') className += ' is-circle';else if (styling === 'noborder') className += ' has-no-border';else if (styling === 'colored') className += ' has-background-color';else if (styling === 'blocky') className += ' is-blocky';
-  if (textAlign === 'c') className += ' has-text-centered';else if (textAlign === 'r') className += ' has-text-right';
+  var className = React__default.useMemo(function () {
+    var cn = 'is-checkradio';
+    if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += color;
+    if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
+    if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
+    return cn;
+  }, [textAlign, size, color, styling]);
   var errorMsg = '';
   if (props.errorMessage) errorMsg = typeof props.errorMessage == 'string' ? props.errorMessage : props.errorMessage(state.value);
   var error = React__default.createElement(InputError, {
@@ -6083,7 +6098,7 @@ function TextInput(props) {
     state = _React$useReducer[0],
     dispatch = _React$useReducer[1];
   var errorMsg = '';
-  if (props.errorMessage) errorMsg = typeof props.errorMessage == 'string' ? props.errorMessage : props.errorMessage(state.value);
+  if (props.errorMessage) errorMsg = typeof props.errorMessage === 'string' ? props.errorMessage : props.errorMessage(state.value);
   var className = !state.valid && state.touched || errorMsg ? 'input is-danger' : 'input';
   if (props.size === 's') className += ' is-small';else if (props.size === 'l') className += ' is-medium';else if (props.size === 'xl') className += ' is-large';
   if (props.textAlign === 'c') className += ' has-text-centered';else if (props.textAlign === 'r') className += ' has-text-right';
@@ -6511,11 +6526,14 @@ function InternRadioItem(props) {
     color = props.color,
     styling = props.styling,
     textAlign = props.textAlign;
-  var className = 'is-checkradio block';
-  if (size === 's') className += ' is-small';else if (size === 'l') className += ' is-medium';else if (size === 'xl') className += ' is-large';
-  if (color === 'w') className += ' is-warning';else if (color === 'd') className += ' is-danger';else if (color === 'i') className += ' is-info';else if (color === 's') className += ' is-success';else if (color === 'p') className += ' is-primary';else className += ' is-link';
-  if (styling === 'rounded') className += ' is-circle';else if (styling === 'noborder') className += ' has-no-border';else if (styling === 'colored') className += ' has-background-color';else if (styling === 'blocky') className += ' is-blocky';
-  if (textAlign === 'c') className += ' has-text-centered';else if (textAlign === 'r') className += ' has-text-right';
+  var className = React__default.useMemo(function () {
+    var cn = 'is-checkradio';
+    if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += color;
+    if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
+    if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
+    return cn;
+  }, [textAlign, size, color, styling]);
   var containerClassName = (_props$direction3 = props.direction) !== null && _props$direction3 !== void 0 && _props$direction3.startsWith('v') ? 'field my-1' : 'radio field my-1';
   return React__default.createElement("div", {
     className: containerClassName
@@ -6918,6 +6936,108 @@ var fieldMapper = function fieldMapper(f) {
   return field;
 };
 
+function JustACheckbox(_ref) {
+  var defaultChecked = _ref.checked,
+    label = _ref.label,
+    name = _ref.name,
+    id = _ref.id,
+    size = _ref.size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'l' : _ref$color,
+    styling = _ref.styling,
+    textAlign = _ref.textAlign,
+    disabled = _ref.disabled,
+    errorMessage = _ref.errorMessage,
+    containerClassName = _ref.className,
+    onValueChanged = _ref.onValueChanged,
+    onKeyDown = _ref.onKeyDown;
+  var _useBoolToggle = useBoolToggle(defaultChecked != null ? defaultChecked : false),
+    checked = _useBoolToggle[0],
+    toggleChecked = _useBoolToggle[1];
+  var handleClick = function handleClick() {
+    if (!disabled) {
+      onValueChanged && onValueChanged(!checked);
+      toggleChecked();
+    }
+  };
+  React__default.useEffect(function () {
+    toggleChecked(checked);
+  }, [defaultChecked, errorMessage, name]);
+  var className = React__default.useMemo(function () {
+    var cn = 'is-checkradio';
+    if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += typeof color === 'function' ? color(checked) : color;
+    if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
+    if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
+    return cn;
+  }, [textAlign, size, color, styling]);
+  var errorMsg = '';
+  if (errorMessage) errorMsg = typeof errorMessage === 'string' ? errorMessage : errorMessage(checked);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: containerClassName
+  }, React__default.createElement("input", {
+    className: className,
+    type: "checkbox",
+    name: name,
+    id: id != null ? id : name,
+    checked: checked,
+    disabled: disabled,
+    onChange: function onChange() {
+      return handleClick();
+    },
+    onKeyDown: onKeyDown
+  }), typeof label === 'string' && React__default.createElement("label", {
+    htmlFor: id != null ? id : name
+  }, label != null ? label : name), typeof label !== 'string' && label), errorMessage && React__default.createElement("p", {
+    className: "help is-danger"
+  }, errorMsg));
+}
+
+function JustARadioButon(_ref) {
+  var value = _ref.value,
+    checked = _ref.checked,
+    label = _ref.label,
+    name = _ref.groupName,
+    id = _ref.id,
+    size = _ref.size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'l' : _ref$color,
+    styling = _ref.styling,
+    textAlign = _ref.textAlign,
+    disabled = _ref.disabled,
+    errorMessage = _ref.errorMessage,
+    containerClassName = _ref.className,
+    onValueChanged = _ref.onValueChanged;
+  var handleClick = function handleClick() {
+    if (!disabled) onValueChanged && onValueChanged(value);
+  };
+  var className = React__default.useMemo(function () {
+    var cn = 'is-checkradio';
+    if (size === 's') cn += ' is-small';else if (size === 'l') cn += ' is-medium';else if (size === 'xl') cn += ' is-large';
+    if (color === 'w') cn += ' is-warning';else if (color === 'l') cn += ' is-link';else if (color === 'd') cn += ' is-danger';else if (color === 'i') cn += ' is-info';else if (color === 's') cn += ' is-success';else if (color === 'p') cn += ' is-primary';else cn += typeof color === 'function' ? color(value) : color;
+    if (styling === 'rounded') cn += ' is-circle';else if (styling === 'noborder') cn += ' has-no-border';else if (styling === 'colored') cn += ' has-background-color';else if (styling === 'blocky') cn += ' is-blocky';
+    if (textAlign === 'c') cn += ' has-text-centered';else if (textAlign === 'r') cn += ' has-text-right';
+    return cn;
+  }, [textAlign, size, color, styling]);
+  var errorMsg = '';
+  if (errorMessage) errorMsg = typeof errorMessage === 'string' ? errorMessage : errorMessage(value);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: containerClassName
+  }, React__default.createElement("input", {
+    className: className,
+    type: "radio",
+    name: name,
+    id: id,
+    checked: checked,
+    disabled: disabled,
+    onChange: handleClick
+  }), typeof label === 'string' && React__default.createElement("label", {
+    htmlFor: id != null ? id : name
+  }, label != null ? label : name), typeof label !== 'string' && label), errorMessage && React__default.createElement("p", {
+    className: "help is-danger"
+  }, errorMsg));
+}
+
 var _excluded = ["label", "name", "id", "value", "validation", "errorMessage", "size", "textAlign", "disabled", "placeholder", "keyboardType", "tooltip", "direction", "onValueChanged", "onKeyDown", "decimalSeparator", "alwaysShowCents"];
 function reducer$i(state, action) {
   switch (action.type) {
@@ -7339,6 +7459,7 @@ exports.AspectRatio = AspectRatio;
 exports.Box = Box;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.CB = JustACheckbox;
 exports.Calendar = Calendar;
 exports.CheckBox = CheckBox;
 exports.ColorInput = ColorInput;
@@ -7381,6 +7502,7 @@ exports.NotifierProvider = NotifierProvider;
 exports.NumberInput = NumberInput;
 exports.PasswordInput = PasswordInput;
 exports.ProgressBar = ProgressBar;
+exports.RB = JustARadioButon;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.RangeInput = RangeInput;