reactive-bulma 1.14.0 → 1.16.0

package/dist/cjs/types/components/atoms/Input/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from '../../../interfaces/atomProps';
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/cjs/types/components/atoms/TextArea/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextAreaProps } from '../../../interfaces/atomProps';
+declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

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

@@ -6,3 +6,5 @@ export { default as Tag } from './Tag';
 export { default as Box } from './Box';
 export { default as Title } from './Title';
 export { default as Icon } from './Icon';
+export { default as Input } from './Input';
+export { default as TextArea } from './TextArea';

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, sizeType, textColorType, titleSize } from '../types/styleTypes';
+import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
+import { inputTypes } from '../types/domTypes';
 interface BasicProps {
     testId?: string;
     style?: React.CSSProperties;
@@ -20,7 +21,7 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
     isLoading?: boolean;
     isDisabled?: boolean;
     isStatic?: boolean;
-    size?: sizeType;
+    size?: basicSizeType;
     onClick?: () => void;
 }
 export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
@@ -28,7 +29,7 @@ export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithou
     max?: number;
     style?: React.CSSProperties;
     color?: basicColorType;
-    size?: sizeType;
+    size?: basicSizeType;
     isLoading?: boolean;
 }
 export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
@@ -39,7 +40,7 @@ export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'sp
     color?: basicColorType;
     isLight?: boolean;
     isRounded?: boolean;
-    size?: Exclude<sizeType, 'is-normal'>;
+    size?: Exclude<basicSizeType, 'is-normal'>;
     withDelete?: boolean;
     withAddon?: boolean;
     addonText?: string;
@@ -55,7 +56,7 @@ export interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'se
 }
 export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
     text: string;
-    size?: titleSize;
+    size?: titleSizeType;
     prop: 'title' | 'subtitle';
     isSpaced?: boolean;
 }
@@ -67,8 +68,26 @@ export interface IconProps extends BasicProps {
     iconLabel: string;
     text?: string;
     color?: textColorType;
-    size?: Exclude<sizeType, 'is-normal'>;
+    size?: Exclude<basicSizeType, 'is-normal'>;
     colorMode?: iconColorModeType;
     isSpinning?: boolean;
 }
+export interface InputProps extends BasicProps {
+    type: inputTypes;
+    text?: string;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+    color?: basicColorType;
+    size?: basicSizeType;
+    isRounded?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    onClick?: () => void;
+    onChange?: () => void;
+}
+export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
+    cols?: number;
+    rows?: number;
+    isFixedSize?: boolean;
+}
 export {};

package/dist/cjs/types/types/domTypes.d.ts

@@ -1 +1,2 @@
 export type buttonType = 'submit' | 'reset' | 'button';
+export type inputTypes = 'text' | 'password' | 'email' | 'tel';

package/dist/cjs/types/types/styleTypes.d.ts

@@ -1,8 +1,8 @@
 export type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
-export type titleSize = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
+export type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
 export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
 export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
 export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
 export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
-export type sizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
+export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
 export type iconColorModeType = 'light' | 'dark';

package/dist/esm/index.js

@@ -2884,7 +2884,7 @@ const Column = ({ testId = null, style = null, size = null, offset = null, isNar
         isNarrow ? 'is-narrow' : null
     ]);
     const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
-    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style || undefined }, children));
+    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
 const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
@@ -2897,7 +2897,7 @@ const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color
     return (React.createElement("progress", { "data-testid": _testId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
 };
 
-const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style || undefined }, children)) : null;
+const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
 const Tag = ({ text, testId = null, style = null, color = null, isLight = null, isRounded = null, size = null, withDelete = false, withAddon = false, addonText = null, addonColor = null, onDeleteClick = null }) => {
     const tagLabel = withAddon ? 'tags' : 'tag';
@@ -2919,14 +2919,14 @@ const Tag = ({ text, testId = null, style = null, color = null, isLight = null,
         parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
         separator: withAddon ? '-' : ''
     });
-    return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style || undefined, className: tagsWrapperClasses },
+    return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagsWrapperClasses },
         React.createElement("span", { className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick || undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style || undefined, className: tagClasses },
+        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick || undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
         text,
         withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick || undefined })) : null));
 };
 
-const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style || undefined }, children)) : null;
+const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
 const renderTitleSection = (section) => {
     var _a, _b;
@@ -2948,7 +2948,21 @@ var IconSizeEnum;
     IconSizeEnum[IconSizeEnum["is-large"] = 48] = "is-large";
 })(IconSizeEnum || (IconSizeEnum = {}));
 
-const generateIconContainer = (icon, color) => React.createElement("span", { className: `icon-text${color ? ` ${color}` : ''}` }, icon);
+const generateIconContainer = (icon, color) => {
+    var _a;
+    const containerClasses = color ? `icon-text-${color}` : 'icon-text';
+    const containerTestId = parseTestId({
+        tag: 'icon-container',
+        parsedClasses: (_a = color === null || color === void 0 ? void 0 : color.toString()) !== null && _a !== void 0 ? _a : '',
+        rules: [
+            {
+                usedRegExp: /has-text/gm,
+                regExpReplacer: ''
+            }
+        ]
+    });
+    return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
+};
 const Icon = ({ iconLabel, testId = null, text = null, style = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
     const iconSpanClasses = parseClasses(['icon', color, size]);
     const iconClasses = parseClasses([
@@ -2974,11 +2988,53 @@ const Icon = ({ iconLabel, testId = null, text = null, style = null, color = nul
         separator: '-'
     });
     const _internalTestId = `${_testId}-i`;
-    const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style || undefined, className: iconSpanClasses },
+    const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: iconSpanClasses },
         React.createElement("i", { "data-testid": _internalTestId, className: iconClasses }),
         text ? React.createElement("span", null, text) : null));
     return text ? generateIconContainer(iconComponent, color) : iconComponent;
 };
 
-export { Block, Box, Button, Column, Icon, ProgressBar, Tag, Title };
+const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonly = false, style = null, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+    const inputClasses = parseClasses([
+        'input',
+        color,
+        size,
+        isRounded ? 'is-rounded' : null,
+        isHovered ? 'is-hovered' : null,
+        isFocused ? 'is-focused' : null
+    ]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'input',
+        parsedClasses: inputClasses
+    });
+    return (React.createElement("input", { "data-testid": _testId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: inputClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+};
+
+const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, style = null, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+    const textAreaClasses = parseClasses([
+        'textarea',
+        color,
+        size,
+        isHovered ? 'is-hovered' : null,
+        isFocused ? 'is-focused' : null,
+        isFixedSize ? 'has-fixed-size' : null
+    ]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'textarea',
+        parsedClasses: textAreaClasses,
+        rules: [
+            {
+                usedRegExp: /textarea/gm,
+                regExpReplacer: ''
+            },
+            {
+                usedRegExp: /is-|has-/gm,
+                regExpReplacer: '-'
+            }
+        ]
+    });
+    return (React.createElement("textarea", { "data-testid": _testId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: textAreaClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+};
+
+export { Block, Box, Button, Column, Icon, Input, ProgressBar, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map