@bodynarf/react.components 1.7.1 → 1.7.2

package/{dist/components → components}/paginator/types.d.ts

@@ -1,27 +1,28 @@
-import { ElementSize } from '../../components';
-export interface PaginatorProps {
-    /** Amount of pages */
-    count: number;
-    /** Page change handler */
-    onPageChange: (page: number) => void;
-    /** Current page */
-    currentPage?: number;
-    /**
-     * Page numbers position.
-     * Useful with `showNextButtons = true`
-    */
-    position?: "left" | "center" | "right";
-    /** Buttons should have rounded borders */
-    rounded?: boolean;
-    /** Size of paginator component elements */
-    size?: ElementSize;
-    /** Additional class names */
-    className?: string;
-    /** Display "Previous" \ "Next" buttons */
-    showNextButtons?: boolean;
-    /**
-     * Max amount of pages from left & right from current page. `3` by default
-     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
-    */
-    nearPagesCount?: number;
-}
+import { ElementSize } from "..";
+export interface PaginatorProps {
+    /** Amount of pages */
+    count: number;
+    /** Page change handler */
+    onPageChange: (page: number) => void;
+    /** Current page */
+    currentPage?: number;
+    /**
+     * Page numbers position.
+     * Useful with `showNextButtons = true`
+    */
+    position?: "left" | "center" | "right";
+    /** Buttons should have rounded borders */
+    rounded?: boolean;
+    /** Size of paginator component elements */
+    size?: ElementSize;
+    /** Additional class names */
+    className?: string;
+    /** Display "Previous" \ "Next" buttons */
+    showNextButtons?: boolean;
+    /**
+     * Max amount of pages from left & right from current page. `3` by default
+     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
+    */
+    nearPagesCount?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/paginator/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC3B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/components/paginator/types.js

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

package/{dist/components → components}/paginator/utils.d.ts

@@ -1,9 +1,10 @@
-/**
- * Get nearest numbers from each side (left & right)
- * @param page Number of current page
- * @param count Amount of pages
- * @param size Amount of pages from left & right to current page. Default is 3
- * @throws Current page is greater than pages amount
- * @returns Array of nearest numbers to current page
- */
-export declare const generatePageNumbers: (page: number, count: number, size?: number) => Array<number>;
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export declare const generatePageNumbers: (page: number, count: number, size?: number) => Array<number>;
+//# sourceMappingURL=utils.d.ts.map

package/components/paginator/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM,SAAQ,MAAM,KAAO,MAAM,MAAM,CAU/F,CAAC"}

package/components/paginator/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export const generatePageNumbers = (page, count, size = 3) => {
+    if (page < 0 || count <= 0 || page > count) {
+        return [];
+    }
+    return [
+        ...new Array(size).fill(page).map((_, i) => page - i - 1).filter(x => x > 0 && x < page).reverse(),
+        page,
+        ...new Array(size).fill(page).map((_, i) => page + i + 1).filter(x => x > 0 && x > page && x <= count)
+    ];
+};

package/{dist/components → components}/primitives/checkbox/component/index.d.ts

@@ -1,4 +1,7 @@
-import { CheckBoxProps } from '../../../../components/primitives/checkbox';
-/** Boolean input component */
-declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
-export default CheckBox;
+/// <reference types="react" />
+import "./style.scss";
+import { CheckBoxProps } from "../../checkbox";
+/** Boolean input component */
+declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
+export default CheckBox;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,6JAMX,aAAa,KAAG,WAoFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+/** Boolean input component */
+const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }) => {
+    const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
+    const id = name || generateGuid();
+    const className = getClassName([
+        "is-checkradio",
+        "m-check-radio",
+        (hasBackgroundColor ?? false) ? "has-background-color" : "",
+        (fixBackgroundColor ?? false) && (hasBackgroundColor ?? false) ? "m-has-background-color" : "",
+        isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
+        (rounded ?? false) ? "is-circle" : "",
+        isNullOrUndefined(style) ? "" : `is-${style}`,
+        (block ?? false) ? "is-block" : "",
+        (withoutBorder ?? false) ? "has-no-border" : "",
+    ]);
+    if (!isNullOrUndefined(label) && isFormLabel === true) {
+        const labelClassName = getClassName([
+            "label",
+            label.className
+        ]);
+        const labelContainerClassName = getClassName([
+            "field-label",
+            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, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id })] }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
+};
+export default CheckBox;

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

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

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

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

package/components/primitives/checkbox/index.js

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

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

@@ -1,24 +1,25 @@
-import { BaseInputElementProps } from '../../../components';
-/** Checkbox component props type */
-export interface CheckBoxProps extends BaseInputElementProps<boolean> {
-    /** Is full colored checkbox */
-    block?: boolean;
-    /** Remove the checkbox border */
-    withoutBorder?: boolean;
-    /**
-     * Checkbox has background color.
-     * Only works if style is set
-    */
-    hasBackgroundColor?: boolean;
-    /**
-     * Set unchecked background as transparent.
-     * Only used with `hasBackgroundColor` set as `true`
-     * @example `{ style: ElementColor.Info, hasBackgroundColor: true, fixBackgroundColor: true }` -
-    */
-    fixBackgroundColor?: boolean;
-    /**
-     * Display component with label as form element.
-     * Label will be placed at left
-     */
-    isFormLabel?: boolean;
-}
+import { BaseInputElementProps } from "../..";
+/** Checkbox component props type */
+export interface CheckBoxProps extends BaseInputElementProps<boolean> {
+    /** Is full colored checkbox */
+    block?: boolean;
+    /** Remove the checkbox border */
+    withoutBorder?: boolean;
+    /**
+     * Checkbox has background color.
+     * Only works if style is set
+    */
+    hasBackgroundColor?: boolean;
+    /**
+     * Set unchecked background as transparent.
+     * Only used with `hasBackgroundColor` set as `true`
+     * @example `{ style: ElementColor.Info, hasBackgroundColor: true, fixBackgroundColor: true }` -
+    */
+    fixBackgroundColor?: boolean;
+    /**
+     * Display component with label as form element.
+     * Label will be placed at left
+     */
+    isFormLabel?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,OAAO,CAAC;IACjE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/components/primitives/checkbox/types.js

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

package/{dist/components → components}/primitives/date/component/index.d.ts

@@ -1,4 +1,7 @@
-import { DateProps } from '../../../../components/primitives/date';
-/** Date input component */
-declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }: DateProps) => JSX.Element;
-export default DatePicker;
+/// <reference types="react" />
+import "../../../../common.scss";
+import { DateProps } from "../../date";
+/** Date input component */
+declare const DatePicker: ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }: DateProps) => JSX.Element;
+export default DatePicker;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,yBAAyB,CAAC;AAKjC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,2BAA2B;AAC3B,QAAA,MAAM,UAAU,wIAMb,SAAS,KAAG,WA4Gd,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
+import "../../../../common.scss";
+import { ElementSize } from "../../..";
+import { getValidationValues } from "../../../../utils";
+/** Date input component */
+const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded, loading, style, label, onBlur }) => {
+    const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
+        ? undefined
+        : new Date(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,
+        styleClassName,
+        rounded === true ? "is-rounded" : "",
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]);
+    const stingifiedDefValue = defaultValue?.toISOString().split("T")[0];
+    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: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, 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: "date", className: elClassName, readOnly: readonly, disabled: disabled, defaultValue: stingifiedDefValue, 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 DatePicker;

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

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

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

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

package/components/primitives/date/index.js

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

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

@@ -1,8 +1,9 @@
-import { BaseInputElementProps, InputLabel } from '../../../components';
-/** Date input component props type */
-export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder"> {
-    /** Label configuration */
-    label: InputLabel;
-    /** Focus out event handler */
-    onBlur?: () => void;
-}
+import { BaseInputElementProps, InputLabel } from "../..";
+/** Date input component props type */
+export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder"> {
+    /** Label configuration */
+    label: InputLabel;
+    /** Focus out event handler */
+    onBlur?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/date/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEpE,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC;IAC3F,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/components/primitives/date/types.js

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

package/components/primitives/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./checkbox";
+export * from "./date";
+export * from "./multiline";
+export * from "./number";
+export * from "./password";
+export * from "./text";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,7 +1,7 @@
-export * from "./checkbox";
-export * from "./date";
-export * from "./multiline";
-export * from "./number";
-export * from "./password";
-export * from "./text";
-export * from "./types";
+export * from "./checkbox";
+export * from "./date";
+export * from "./multiline";
+export * from "./number";
+export * from "./password";
+export * from "./text";
+export * from "./types";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/multiline/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "../../../../common.scss";
+import MultilineWithoutLabel from "../../multiline/components/multilineWithoutLabel";
+import MultilineWithLabel from "../../multiline/components/multilineWithLabel";
+/** Multiline textual input component */
+const Multiline = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return (_jsx(MultilineWithoutLabel, { ...props }));
+    }
+    else {
+        return (_jsx(MultilineWithLabel, { ...props }));
+    }
+};
+export default Multiline;

package/{dist/components → components}/primitives/multiline/components/multilineWithLabel/index.d.ts

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

package/components/primitives/multiline/components/multilineWithLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,kKAOrB,cAAc,KAAG,WAyGnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/components/multilineWithLabel/index.js

@@ -0,0 +1,45 @@
+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";
+/** Multiline textual input component with describing label */
+const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, rounded, loading, label, placeholder, fixed, rows, 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,
+        "textarea",
+        fixed === true ? "has-fixed-size" : "",
+    ]);
+    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("textarea", { className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, rows: rows }) }), 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("textarea", { className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default MultilineWithLabel;

package/{dist/components → components}/primitives/multiline/components/multilineWithoutLabel/index.d.ts

@@ -1,4 +1,6 @@
-import { MultilineProps } from '../../../../../components/primitives/multiline';
-/** Multiline textual input component without describing label*/
-declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }: MultilineProps) => JSX.Element;
-export default MultilineWithoutLabel;
+/// <reference types="react" />
+import { MultilineProps } from "../../../multiline";
+/** Multiline textual input component without describing label*/
+declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }: MultilineProps) => JSX.Element;
+export default MultilineWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,wIAMxB,cAAc,KAAG,WA2CnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/primitives/multiline/components/multilineWithoutLabel/index.js

@@ -0,0 +1,27 @@
+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";
+/** Multiline textual input component without describing label*/
+const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name || generateGuid();
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "textarea",
+        fixed === true ? "has-fixed-size" : "",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+    return (_jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, id: id, name: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default MultilineWithoutLabel;

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

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

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

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

package/components/primitives/multiline/index.js

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

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

@@ -1,10 +1,11 @@
-import { BaseInputElementProps } from '../../../components';
-/** Multiline textual input component props type */
-export interface MultilineProps extends BaseInputElementProps<string> {
-    /** Is input should be resizable */
-    fixed?: boolean;
-    /** Number of initial rows count */
-    rows?: number;
-    /** Focus out event handler */
-    onBlur?: () => void;
-}
+import { BaseInputElementProps } from "../..";
+/** Multiline textual input component props type */
+export interface MultilineProps extends BaseInputElementProps<string> {
+    /** Is input should be resizable */
+    fixed?: boolean;
+    /** Number of initial rows count */
+    rows?: number;
+    /** Focus out event handler */
+    onBlur?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,mDAAmD;AACnD,MAAM,WAAW,cAAe,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IACjE,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/components/primitives/multiline/types.js

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { NumberProps } from "../../number";
+/** Number input component */
+declare const Number: (props: NumberProps) => JSX.Element;
+export default Number;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/number/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAOpC,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import NumberWithLabel from "../../number/components/withLabel";
+import NumberWithoutLabel from "../../number/components/withoutLabel";
+/** Number input component */
+const Number = (props) => {
+    if (isNullOrUndefined(props.label)) {
+        return (_jsx(NumberWithoutLabel, { ...props }));
+    }
+    else {
+        return (_jsx(NumberWithLabel, { ...props }));
+    }
+};
+export default Number;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,kCAAkC;AAClC,QAAA,MAAM,eAAe,4JAOlB,WAAW,KAAG,WA2GhB,CAAC;AAEF,eAAe,eAAe,CAAC"}