@bodynarf/react.components 1.7.1 → 1.7.2

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
+/** Number component with label */
+const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, step, }) => {
+    const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default NumberWithLabel;

package/{dist/components → components}/primitives/number/components/withoutLabel/index.d.ts

@@ -1,4 +1,6 @@
-import { NumberProps } from '../../../../../components/primitives/number';
-/** Number component without label */
-declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }: NumberProps) => JSX.Element;
-export default NumberWithoutLabel;
+/// <reference types="react" />
+import { NumberProps } from "../../../number";
+/** Number component without label */
+declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }: NumberProps) => JSX.Element;
+export default NumberWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,qJAOrB,WAAW,KAAG,WA8ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
+/** Number component without label */
+const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }) => {
+    const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+    const id = name || generateGuid();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default NumberWithoutLabel;

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

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

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

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

package/components/primitives/number/index.js

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

package/{dist/components → components}/primitives/number/types.d.ts

@@ -1,12 +1,13 @@
-import { BaseInputElementProps } from '../../../components';
-/** Number component props type */
-export interface NumberProps extends BaseInputElementProps<number> {
-    /** Focus out event handler */
-    onBlur?: () => void;
-    /**
-     * Difference which will be used to change value after step button click.
-     * See html input step documentation.
-     * @default 1
-    */
-    step?: number;
-}
+import { BaseInputElementProps } from "../..";
+/** Number component props type */
+export interface NumberProps extends BaseInputElementProps<number> {
+    /** Focus out event handler */
+    onBlur?: () => void;
+    /**
+     * Difference which will be used to change value after step button click.
+     * See html input step documentation.
+     * @default 1
+    */
+    step?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/components/primitives/number/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "./style.scss";
+import { PasswordProps } from "../../password";
+/** Password input component */
+declare const Password: (props: PasswordProps) => JSX.Element;
+export default Password;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAKzD,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+import PasswordWithLabel from "../../password/components/withLabel";
+import PasswordWithoutLabel from "../../password/components/withoutLabel";
+/** Password input component */
+const Password = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return _jsx(PasswordWithoutLabel, { ...props });
+    }
+    return _jsx(PasswordWithLabel, { ...props });
+};
+export default Password;

package/{dist/components → components}/primitives/password/components/withLabel/index.d.ts

@@ -1,3 +1,5 @@
-import { PasswordProps } from '../../../../../components/primitives/password';
-declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
-export default PasswordWithLabel;
+/// <reference types="react" />
+import { PasswordProps } from "../../../password";
+declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+export default PasswordWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,iBAAiB,uIAMpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { getValidationValues } from "../../../../../utils";
+import { ElementSize } from "../../../..";
+import Icon from "../../../../icon";
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const id = name || generateGuid();
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default PasswordWithLabel;

package/{dist/components → components}/primitives/password/components/withoutLabel/index.d.ts

@@ -1,3 +1,5 @@
-import { PasswordProps } from '../../../../../components/primitives/password';
-declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
-export default PasswordWithoutLabel;
+/// <reference types="react" />
+import { PasswordProps } from "../../../password";
+declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+export default PasswordWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,oBAAoB,gIAMvB,aAAa,KAAG,WA4DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
+import Icon from "../../../../icon";
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const id = name || generateGuid();
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default PasswordWithoutLabel;

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

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

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

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

package/components/primitives/password/index.js

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

package/{dist/components → components}/primitives/password/types.d.ts

@@ -1,9 +1,10 @@
-import { BaseInputElementProps } from '../../../components';
-/** Password component props type */
-export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
-    /**
-     * Is icon "Show password" visible.
-     * Will show password on click
-    */
-    canShowPassword: boolean;
-}
+import { BaseInputElementProps } from "../..";
+/** Password component props type */
+export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
+    /**
+     * Is icon "Show password" visible.
+     * Will show password on click
+    */
+    canShowPassword: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,EAAE,OAAO,CAAC;CAC5B"}

package/components/primitives/password/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "../../../../common.scss";
+import { TextProps } from "../../..";
+/** Textual input component */
+declare const Text: (props: TextProps) => JSX.Element;
+export default Text;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAOhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "../../../../common.scss";
+import TextWithLabel from "../../text/components/textWithLabel";
+import TextWithoutLabel from "../../text/components/textWithoutLabel";
+/** Textual input component */
+const Text = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return (_jsx(TextWithoutLabel, { ...props }));
+    }
+    else {
+        return (_jsx(TextWithLabel, { ...props }));
+    }
+};
+export default Text;

package/{dist/components → components}/primitives/text/components/textWithLabel/index.d.ts

@@ -1,4 +1,6 @@
-import { TextProps } from '../../../../../components/primitives/text';
-/** Textual input with describing label */
-declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: TextProps) => JSX.Element;
-export default TextWithLabel;
+/// <reference types="react" />
+import { TextProps } from "../../../text";
+/** Textual input with describing label */
+declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: TextProps) => JSX.Element;
+export default TextWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAMhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
+/** Textual input with describing label */
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]);
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default TextWithLabel;

package/{dist/components → components}/primitives/text/components/textWithoutLabel/index.d.ts

@@ -1,4 +1,6 @@
-import { TextProps } from '../../../../../components/primitives/text';
-/** Textual input without describing label */
-declare const TextWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: TextProps) => JSX.Element;
-export default TextWithoutLabel;
+/// <reference types="react" />
+import { TextProps } from "../../../text";
+/** Textual input without describing label */
+declare const TextWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: TextProps) => JSX.Element;
+export default TextWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAMnB,SAAS,KAAG,WA6Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
+/** Textual input without describing label */
+const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+    const id = name || generateGuid();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { className: elClassName, type: "text", placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default TextWithoutLabel;

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

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

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

@@ -0,0 +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"}

package/components/primitives/text/index.js

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

package/{dist/components → components}/primitives/text/types.d.ts

@@ -1,6 +1,7 @@
-import { BaseInputElementProps } from '../../../components';
-/** Text input component props type */
-export interface TextProps extends BaseInputElementProps<string> {
-    /** Focus out event handler */
-    onBlur?: () => void;
-}
+import { BaseInputElementProps } from "../..";
+/** Text input component props type */
+export interface TextProps extends BaseInputElementProps<string> {
+    /** Focus out event handler */
+    onBlur?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC5D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/components/primitives/text/types.js

@@ -0,0 +1 @@
+export {};

package/{dist/components → components}/primitives/types/baseProps.d.ts

@@ -1,29 +1,30 @@
-import { BaseElementProps, ElementColor, ElementSize } from '../../../components';
-import { InputLabel, ValidationState } from ".";
-/** Base properties for input components */
-export interface BaseInputElementProps<TValue> extends BaseElementProps {
-    /** Value change handler. Changed value must be stored outside of component */
-    onValueChange: (value?: TValue) => void;
-    /** Default value of input component*/
-    defaultValue?: TValue;
-    /** Input element placeholder */
-    placeholder?: string;
-    /** Is component borders are rounded */
-    rounded?: boolean;
-    /** Should be component disabled. Selecting is not allowed */
-    disabled?: boolean;
-    /** Should be component int read only mode. Selecting is allowed */
-    readonly?: boolean;
-    /** Component size */
-    size?: ElementSize;
-    /** Label configuration */
-    label?: InputLabel;
-    /** Displaying loading state of component as spinner in right end of component */
-    loading?: boolean;
-    /** Style. Colors the border */
-    style?: ElementColor;
-    /** Name of element. Required for form elements */
-    name?: string;
-    /** Current validation state */
-    validationState?: ValidationState;
-}
+import { BaseElementProps, ElementColor, ElementSize } from "../..";
+import { InputLabel, ValidationState } from ".";
+/** Base properties for input components */
+export interface BaseInputElementProps<TValue> extends BaseElementProps {
+    /** Value change handler. Changed value must be stored outside of component */
+    onValueChange: (value?: TValue) => void;
+    /** Default value of input component*/
+    defaultValue?: TValue;
+    /** Input element placeholder */
+    placeholder?: string;
+    /** Is component borders are rounded */
+    rounded?: boolean;
+    /** Should be component disabled. Selecting is not allowed */
+    disabled?: boolean;
+    /** Should be component int read only mode. Selecting is allowed */
+    readonly?: boolean;
+    /** Component size */
+    size?: ElementSize;
+    /** Label configuration */
+    label?: InputLabel;
+    /** Displaying loading state of component as spinner in right end of component */
+    loading?: boolean;
+    /** Style. Colors the border */
+    style?: ElementColor;
+    /** Name of element. Required for form elements */
+    name?: string;
+    /** Current validation state */
+    validationState?: ValidationState;
+}
+//# sourceMappingURL=baseProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"baseProps.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/baseProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AAEhD,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB,CAAC,MAAM,CAAE,SAAQ,gBAAgB;IACnE,8EAA8E;IAC9E,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC"}

package/components/primitives/types/baseProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export * from "./baseProps";
+export * from "./label";
+export * from "./validation";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/{dist/components/primitives/types/index.d.ts → components/primitives/types/index.js}

@@ -1,3 +1,3 @@
-export * from "./baseProps";
-export * from "./label";
-export * from "./validation";
+export * from "./baseProps";
+export * from "./label";
+export * from "./validation";