@bodynarf/react.components 1.13.5 → 1.13.6

package/components/primitives/number/components/withLabel/index.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { emptyFn, generateGuid, getClassName, isNullOrUndefined, isStringEmpty } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName, isNullish, isStringEmpty } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
-import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, autoFocus = false, onBlur, step = 1, className, title, data, hint, }) => {
+const NumberWithLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, autoFocus = false, onBlur, onKeyDown, onKeyUp, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
-        size === ElementSize.Normal ? "" : `is-${size}`,
+        getSizeClassName(size, ElementSize.Normal),
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -19,9 +19,9 @@ const NumberWithLabel = ({ onValueChange = emptyFn, defaultValue, validationStat
         "control",
         loading ? "is-loading" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
+    const dataAttributes = isNullish(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { id: name, name: name, step: step, type: "number", title: title, onBlur: onBlur, onKeyUp: onKeyUp, onChange: onChange, readOnly: readonly, disabled: disabled, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithLabel;

package/components/primitives/number/components/withoutLabel/index.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { emptyFn, generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
-import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, autoFocus = false, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
+const NumberWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, autoFocus = false, rounded = false, loading = false, placeholder, onBlur, onKeyDown, onKeyUp, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
-        size === ElementSize.Normal ? "" : `is-${size}`,
+        getSizeClassName(size, ElementSize.Normal),
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -19,9 +19,7 @@ const NumberWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationS
         "bbr-input",
         loading ? "is-loading" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { id: name, name: name, step: step, type: "number", title: title, onBlur: onBlur, onKeyUp: onKeyUp, onChange: onChange, readOnly: readonly, disabled: disabled, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithoutLabel;

package/components/primitives/number/types.d.ts

@@ -1,6 +1,6 @@
-import { BaseNullableInputElementProps, BlurableElement } from "../../../types";
+import { BaseNullableInputElementProps, BlurableElement, KeyboardElement } from "../../../types";
 /** Number component props type */
-export type NumberProps = BaseNullableInputElementProps<number> & BlurableElement & {
+export type NumberProps = BaseNullableInputElementProps<number> & BlurableElement & KeyboardElement & {
     /**
      * Difference which will be used to change value after step button click.
      * See html input step documentation.

package/components/primitives/number/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE5E,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,6BAA6B,CAAC,MAAM,CAAC,GACzD,eAAe,GACf;IACE;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7F,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,6BAA6B,CAAC,MAAM,CAAC,GACzD,eAAe,GACf,eAAe,GACf;IACE;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/components/primitives/password/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAI/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAW/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/password/component/index.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from "@bodynarf/utils";
+import { isNullish } from "@bodynarf/utils";
 import "./style.scss";
 import PasswordWithLabel from "../components/withLabel";
 import PasswordWithoutLabel from "../components/withoutLabel";
 /** Password input component */
 const Password = (props) => {
-    return isNullOrUndefined(props.label)
+    // eslint-disable-next-line react/destructuring-assignment
+    return isNullish(props.label)
         ? _jsx(PasswordWithoutLabel, { ...props })
-        : _jsx(PasswordWithLabel, { ...props });
+        : (_jsx(PasswordWithLabel, { ...props, 
+            // eslint-disable-next-line react/destructuring-assignment
+            label: props.label }));
 };
 export default Password;

package/components/primitives/password/components/withLabel/index.d.ts

@@ -1,5 +1,6 @@
 import { FC } from "react";
+import { BaseInputWithLabel } from "../../../../../types";
 import { PasswordProps } from "../..";
-declare const PasswordWithLabel: FC<PasswordProps>;
+declare const PasswordWithLabel: FC<BaseInputWithLabel<PasswordProps>>;
 export default PasswordWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/password/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAU/D,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,aAAa,CAkFxC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,kBAAkB,EAAe,MAAM,YAAY,CAAC;AAM7D,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAmF5D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/primitives/password/components/withLabel/index.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { emptyFn, generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
-const PasswordWithLabel = ({ defaultValue, onValueChange = emptyFn, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, disabled = false, canShowPassword = false, label, placeholder, showPasswordIconTitle = "Show password", className, title, data, hint, }) => {
-    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+const PasswordWithLabel = ({ defaultValue, onValueChange = emptyFn, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, disabled = false, canShowPassword = false, label, placeholder, showPasswordIconTitle = "Show password", onKeyDown, onKeyUp, className, title, data, hint, }) => {
     const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
     const elSizeClassName = size === ElementSize.Normal ? "" : "is-{0}".format(size);
     const elClassName = getClassName([
@@ -25,10 +25,8 @@ const PasswordWithLabel = ({ defaultValue, onValueChange = emptyFn, validationSt
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }), !!canShowPassword && !loading &&
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { id: name, name: name, title: title, onKeyUp: onKeyUp, disabled: disabled, onChange: onChange, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, type: contentIsHidden ? "password" : "text" }), !!canShowPassword && !loading &&
                         _jsx("span", { onClick: onIconClick, title: showPasswordIconTitle, className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { size: size, name: contentIsHidden ? "eye" : "eye-slash" }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithLabel;

package/components/primitives/password/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAS/D,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,aAAa,CAiF3C,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAS/D,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,aAAa,CAkF3C,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/primitives/password/components/withoutLabel/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { emptyFn, generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
 import InternalHint from "../../../internal/hint";
-const PasswordWithoutLabel = ({ defaultValue, onValueChange = emptyFn, disabled, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, placeholder, canShowPassword = false, showPasswordIconTitle = "Show password", className, title, data, hint, }) => {
-    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+const PasswordWithoutLabel = ({ defaultValue, onValueChange = emptyFn, disabled, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, placeholder, canShowPassword = false, showPasswordIconTitle = "Show password", onKeyDown, onKeyUp, className, title, data, hint, }) => {
     const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
     const elSizeClassName = size === ElementSize.Normal ? "" : "is-{0}".format(size);
     const elClassName = getClassName([
@@ -25,10 +25,8 @@ const PasswordWithoutLabel = ({ defaultValue, onValueChange = emptyFn, disabled,
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }), !!canShowPassword && !loading &&
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { id: name, name: name, title: title, onKeyUp: onKeyUp, disabled: disabled, onChange: onChange, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, type: contentIsHidden ? "password" : "text" }), !!canShowPassword && !loading &&
                         _jsx("span", { onClick: onIconClick, title: showPasswordIconTitle, className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { size: size, name: contentIsHidden ? "eye" : "eye-slash" }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithoutLabel;

package/components/primitives/password/types.d.ts

@@ -1,6 +1,6 @@
-import { BaseNotNullableInputElementProps } from "../../../types";
+import { BaseNotNullableInputElementProps, KeyboardElement } from "../../../types";
 /** Password component props type */
-export interface PasswordProps extends Omit<BaseNotNullableInputElementProps<string>, "readonly"> {
+export type PasswordProps = Omit<BaseNotNullableInputElementProps<string>, "readonly"> & KeyboardElement & {
     /**
      * Is clickable icon "Show password" visible.
      * Will show password on click
@@ -11,5 +11,5 @@ export interface PasswordProps extends Omit<BaseNotNullableInputElementProps<str
      * @default "Show password"
      */
     showPasswordIconTitle?: string;
-}
+};
 //# sourceMappingURL=types.d.ts.map

package/components/primitives/password/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAE9D,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,gCAAgC,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7F;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE/E,oCAAoC;AACpC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC1B,gCAAgC,CAAC,MAAM,CAAC,EACxC,UAAU,CACf,GACK,eAAe,GACf;IACE;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC"}

package/components/primitives/text/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAIvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAWvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/primitives/text/component/index.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from "@bodynarf/utils";
+import { isNullish } from "@bodynarf/utils";
 import TextWithLabel from "../components/withLabel";
 import TextWithoutLabel from "../components/withoutLabel";
 /** Textual input component */
 const Text = (props) => {
-    return isNullOrUndefined(props.label)
+    // eslint-disable-next-line react/destructuring-assignment
+    return isNullish(props.label)
         ? _jsx(TextWithoutLabel, { ...props })
-        : _jsx(TextWithLabel, { ...props });
+        : (_jsx(TextWithLabel, { ...props, 
+            // eslint-disable-next-line react/destructuring-assignment
+            label: props.label }));
 };
 export default Text;

package/components/primitives/text/components/withLabel/index.d.ts

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { TextProps } from "../..";
+type TextWithLabelProps = Omit<TextProps, "label"> & Required<Pick<TextProps, "label">>;
 /** Textual input with describing label */
-declare const TextWithLabel: FC<TextProps>;
+declare const TextWithLabel: FC<TextWithLabelProps>;
 export default TextWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/text/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,SAAS,CAgEhC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAe,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,kBAAkB,GACjB,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAEzC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgEzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/primitives/text/components/withLabel/index.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { emptyFn, generateGuid, getClassName, isNullOrUndefined, } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
-import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 /** Textual input with describing label */
-const TextWithLabel = ({ onValueChange = emptyFn, readonly, disabled, defaultValue, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, label, placeholder, onBlur, className, title, data, hint, }) => {
+const TextWithLabel = ({ onValueChange = emptyFn, readonly, disabled, defaultValue, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, label, placeholder, onBlur, onKeyDown, onKeyUp, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
-        size === ElementSize.Normal ? "" : `is-${size}`,
+        getSizeClassName(size, ElementSize.Normal),
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -19,9 +19,7 @@ const TextWithLabel = ({ onValueChange = emptyFn, readonly, disabled, defaultVal
         "control",
         loading ? "is-loading" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, autoFocus: autoFocus, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { id: name, type: "text", name: name, title: title, onBlur: onBlur, onKeyUp: onKeyUp, readOnly: readonly, disabled: disabled, onChange: onChange, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default TextWithLabel;

package/components/primitives/text/components/withoutLabel/index.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { emptyFn, generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { emptyFn, generateGuid, getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../types";
-import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Textual input without describing label */
-const TextWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationState, readonly = false, disabled = false, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, placeholder, onBlur, className, title, data, hint, }) => {
+const TextWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationState, readonly = false, disabled = false, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, placeholder, onBlur, onKeyDown, onKeyUp, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
-        size === ElementSize.Normal ? "" : `is-${size}`,
+        getSizeClassName(size, ElementSize.Normal),
         rounded ? "is-rounded" : "",
         getStyleClassName(style, validationState),
         "input",
@@ -19,9 +19,7 @@ const TextWithoutLabel = ({ onValueChange = emptyFn, defaultValue, validationSta
         "bbr-input",
         loading ? "is-loading" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, autoFocus: autoFocus, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { id: name, type: "text", name: name, title: title, onBlur: onBlur, onKeyUp: onKeyUp, readOnly: readonly, disabled: disabled, onChange: onChange, ...dataAttributes, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default TextWithoutLabel;

package/components/primitives/text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/primitives/text/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseNotNullableInputElementProps, BlurableElement } from "../../../types";
+import { BaseNotNullableInputElementProps, BlurableElement, KeyboardElement } from "../../../types";
 /** Text input component props type */
-export type TextProps = BaseNotNullableInputElementProps<string> & BlurableElement;
+export type TextProps = BaseNotNullableInputElementProps<string> & BlurableElement & KeyboardElement;
 //# sourceMappingURL=types.d.ts.map

package/components/primitives/text/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE/E,sCAAsC;AACtC,MAAM,MAAM,SAAS,GAAG,gCAAgC,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEhG,sCAAsC;AACtC,MAAM,MAAM,SAAS,GACf,gCAAgC,CAAC,MAAM,CAAC,GACxC,eAAe,GACf,eAAe,CAAC"}

package/components/progress/component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { ProgressProps } from "../types";
+/** Progress/Loader component */
+declare const Progress: FC<ProgressProps>;
+export default Progress;
+//# sourceMappingURL=index.d.ts.map

package/components/progress/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/progress/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,gCAAgC;AAChC,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA2F/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/progress/component/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullish } from "@bodynarf/utils";
+import { ElementColor, ElementSize } from "../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../utils";
+import "./style.scss";
+/** Progress/Loader component */
+const Progress = ({ value, min = 0, max = 100, size = ElementSize.Normal, color = ElementColor.Primary, showValue = true, indeterminate = false, loadingText = "Loading...", animated = true, className, title, data, }) => {
+    if (indeterminate) {
+        const elClassName = getClassName([
+            "bbr-progress",
+            "bbr-progress--indeterminate",
+            className,
+            getElementColorClassName(color),
+            getSizeClassName(size),
+        ]);
+        const dataAttributes = mapDataAttributes(data);
+        return (_jsxs("div", { children: [_jsx("div", { title: title, ...dataAttributes, className: elClassName }), !!showValue && (_jsx("div", { className: "bbr-progress-value", children: loadingText }))] }));
+    }
+    const percentage = isNullish(value) ? 0 : Math.min(max, Math.max(min, value));
+    const displayValue = Math.round(((percentage - min) / (max - min)) * 100);
+    const progressValue = ((percentage - min) / (max - min)) * max;
+    const elClassName = getClassName([
+        "bbr-progress",
+        animated ? "bbr-progress--animated" : "",
+        getElementColorClassName(color),
+        getSizeClassName(size),
+        className,
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("div", { children: [animated ? (_jsx("div", { title: title, "data-min": min, "data-max": max, ...dataAttributes, className: elClassName, "data-value": progressValue, children: _jsx("div", { className: "bbr-progress-fill", style: {
+                        width: `${(progressValue / max) * 100}%`
+                    } }) })) : (_jsx("progress", { max: max, title: title, "data-min": min, ...dataAttributes, value: progressValue, className: elClassName })), !!showValue && (_jsxs("div", { className: "bbr-progress-value", children: [displayValue, "%"] }))] }));
+};
+export default Progress;

package/components/progress/component/style.scss

@@ -0,0 +1,211 @@
+// Bulma variables
+$black: #0a0a0a !default;
+$white: #fff !default;
+$light: #f5f5f5 !default;
+$dark: #363636 !default;
+$primary: #485fc7 !default;
+$link: #485fc7 !default;
+$info: #3e8ed0 !default;
+$success: #48c78e !default;
+$warning: #ffe08a !default;
+$danger: #f14668 !default;
+$text: #4a4a4a !default;
+$background: #f5f5f5 !default;
+$radius: 4px !default;
+$speed: 0.25s !default;
+
+$size-small: 0.75rem !default;
+$size-normal: 1rem !default;
+$size-medium: 1.25rem !default;
+$size-large: 1.5rem !default;
+
+// Size map
+$sizes: (
+	"small": $size-small,
+	"normal": $size-normal,
+	"medium": $size-medium,
+	"large": $size-large
+);
+
+// Color map
+$colors: (
+	"primary": $primary,
+	"link": $link,
+	"info": $info,
+	"success": $success,
+	"warning": $warning,
+	"danger": $danger
+);
+
+// Mixins for common styles
+@mixin progress-colors($color) {
+	&::-webkit-progress-value {
+		background-color: $color;
+	}
+
+	&::-moz-progress-bar {
+		background-color: $color;
+	}
+}
+
+@mixin indeterminate-colors($color) {
+	&::after {
+		background-color: $color;
+	}
+}
+
+@mixin custom-progress-colors($color) {
+	.bbr-progress-fill {
+		background-color: $color;
+	}
+}
+
+.bbr-progress {
+	width: 100%;
+	appearance: none;
+	height: $size-normal;
+	border: none;
+	border-radius: $radius;
+	background-color: $background;
+	overflow: hidden;
+
+	// Custom progress bar for animation
+	&.bbr-progress--animated {
+		position: relative;
+		background-color: $background;
+
+		.bbr-progress-fill {
+			height: 100%;
+			background-color: $primary;
+			border-radius: $radius;
+			transition: width $speed;
+			animation: bbr-progress-animated 1s linear infinite;
+			background-image: linear-gradient(
+				45deg,
+				rgba(255, 255, 255, 0.2) 25%,
+				transparent 25%,
+				transparent 50%,
+				rgba(255, 255, 255, 0.2) 50%,
+				rgba(255, 255, 255, 0.2) 75%,
+				transparent 75%,
+				transparent
+			);
+			background-size: 1rem 1rem;
+		}
+
+		// Colors for custom progress bar
+		@each $name, $color in $colors {
+			&.is-#{$name} {
+				@include custom-progress-colors($color);
+			}
+		}
+	}
+
+	&::-webkit-progress-bar {
+		background-color: $background;
+		border-radius: $radius;
+	}
+
+	&::-webkit-progress-value {
+		background-color: $primary;
+		border-radius: $radius;
+		transition: width $speed;
+	}
+
+	&::-moz-progress-bar {
+		background-color: $primary;
+		border-radius: $radius;
+	}
+
+	&-value {
+		margin-top: 0.25rem;
+		font-size: $size-small;
+		color: $text;
+		text-align: center;
+	}
+
+	@each $name, $size in $sizes {
+		&.is-#{$name} {
+			height: $size;
+		}
+	}
+
+	@each $name, $color in $colors {
+		&.is-#{$name} {
+			@include progress-colors($color);
+		}
+	}
+
+	&--animated {
+		&::-webkit-progress-value {
+			animation: bbr-progress-animated 2s linear infinite;
+			background-image: linear-gradient(
+				45deg,
+				rgba(255, 255, 255, 0.2) 25%,
+				transparent 25%,
+				transparent 50%,
+				rgba(255, 255, 255, 0.2) 50%,
+				rgba(255, 255, 255, 0.2) 75%,
+				transparent 75%,
+				transparent
+			);
+			background-size: 1rem 1rem;
+		}
+
+		&::-moz-progress-bar {
+			animation: bbr-progress-animated 2s linear infinite;
+			background-image: linear-gradient(
+				45deg,
+				rgba(255, 255, 255, 0.2) 25%,
+				transparent 25%,
+				transparent 50%,
+				rgba(255, 255, 255, 0.2) 50%,
+				rgba(255, 255, 255, 0.2) 75%,
+				transparent 75%,
+				transparent
+			);
+			background-size: 1rem 1rem;
+		}
+	}
+
+	&--indeterminate {
+		position: relative;
+		background-color: $background;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			width: 50%;
+			background-color: $primary;
+			border-radius: $radius;
+			animation: bbr-progress-indeterminate 1.5s ease-in-out infinite;
+		}
+
+		@each $name, $color in $colors {
+			&.is-#{$name} {
+				@include indeterminate-colors($color);
+			}
+		}
+	}
+}
+
+@keyframes bbr-progress-animated {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 1rem 0;
+	}
+}
+
+@keyframes bbr-progress-indeterminate {
+	0% {
+		left: -50%;
+	}
+	100% {
+		left: 100%;
+	}
+}

package/components/progress/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/progress/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";