@bodynarf/react.components 1.7.631 → 1.8.0

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

@@ -0,0 +1,6 @@
+import "./style.scss";
+import { ColorPickerProps } from "..";
+/** Color picker component */
+declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
+export default ColorPicker;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/color/component/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAKtC,6BAA6B;AAC7B,QAAA,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAGF,CACxC;AAEL,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+import ColorPickerWithoutLabel from "../components/withoutLabel";
+import ColorPickerWithLabel from "../components/withLabel";
+/** Color picker component */
+const ColorPicker = (props) => isNullOrUndefined(props.label)
+    ? _jsx(ColorPickerWithoutLabel, { ...props })
+    : _jsx(ColorPickerWithLabel, { ...props });
+export default ColorPicker;

package/components/primitives/color/component/style.scss

@@ -0,0 +1,21 @@
+.bbr-color-picker {
+    input[type="color"]:not([disabled]) {
+        cursor: pointer;
+    }
+
+    &__preview {
+        --color-picker__background-color: transparent;
+        --color-picker__color: black;
+
+        transition: 0.15s ease-in-out;
+        transition-property: background-color, color;
+
+        background-color: var(--color-picker__background-color) !important;
+        color: var(--color-picker__color) !important;
+
+        &:focus {
+            box-shadow: none !important;
+            border-color: hsl(0, 0%, 86%) !important;
+        }
+    }
+}

package/components/primitives/color/components/picker/index.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEvent } from "react";
+/** Color picker control container props */
+export interface ColorPickerControlProps {
+    /** Class names of control container */
+    containerClassName: string;
+    /** Class names of control */
+    className: string;
+    /** Default value for color control */
+    defaultColor: string;
+    /** Handler of control value change*/
+    onValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Control unique identifier */
+    id: string;
+    /** Extra data-* attributes */
+    dataAttributes?: object;
+    /** Is validation should be displayed */
+    isValidationDefined: boolean;
+    /** Validation messages */
+    validationMessages: Array<string>;
+    /** Validation style class name */
+    styleClassName: string;
+    /** Current color value */
+    value: string;
+    /** Should be component disabled. Selecting is not allowed */
+    disabled?: boolean;
+    /**
+     * Show text with color preview.
+     * If set - outlined button-like element on the right will be rendered
+     */
+    showPreview?: boolean;
+    /** Title */
+    title?: string;
+}
+/** Color picker container component */
+declare const ColorPickerControl: ({ containerClassName, className, disabled, showPreview, defaultColor, onValueChange, value, id, title, dataAttributes, isValidationDefined, validationMessages, styleClassName, }: ColorPickerControlProps) => JSX.Element;
+export default ColorPickerControl;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAMpC,2CAA2C;AAC3C,MAAM,WAAW,uBAAuB;IACpC,uCAAuC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAElB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,wCAAwC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAE7B,0BAA0B;IAC1B,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAElC,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IAEvB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,sLAOrB,uBAAuB,KAAG,WAyD5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/color/components/picker/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getFontColorFromString } from "@bodynarf/utils";
+/** Color picker container component */
+const ColorPickerControl = ({ containerClassName, className, disabled, showPreview, defaultColor, onValueChange, value, id, title, dataAttributes, isValidationDefined, validationMessages, styleClassName, }) => {
+    const color = getFontColorFromString(value);
+    if (showPreview) {
+        return (_jsxs("div", { className: "columns", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "color", className: className, disabled: disabled, defaultValue: defaultColor, onChange: onValueChange, name: id, id: id, title: title, ...dataAttributes }) }), _jsx("div", { className: "column is-2", children: _jsx("button", { className: "bbr-color-picker__preview button is-outlined", style: {
+                            "--color-picker__background-color": value,
+                            "--color-picker__color": color,
+                        }, children: value }) }), isValidationDefined && validationMessages.length > 0 &&
+                    _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "color", className: className, disabled: disabled, defaultValue: defaultColor, onChange: onValueChange, name: id, id: id, title: title, ...dataAttributes }) }), isValidationDefined && validationMessages.length > 0 &&
+                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+};
+export default ColorPickerControl;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ColorPickerProps } from "../..";
+/** Color picker component with form label */
+declare function ColorPickerWithLabel({ className, title, showPreview, name, defaultValue, validationState, onValueChange, data, disabled, rounded, label, }: ColorPickerProps): JSX.Element;
+export default ColorPickerWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,SAAS,EAAE,KAAK,EAChB,WAAW,EACX,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,IAAI,EACJ,QAAgB,EAAE,OAAe,EACjC,KAAK,GACR,EAAE,gBAAgB,eAiHlB;AAED,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { generateGuid, getClassName, hexToRgb, isNullOrUndefined, rgbToHex, whiteHex } from "@bodynarf/utils";
+import { getValidationValues, mapDataAttributes } from "../../../../..";
+import ColorPickerControl from "../picker";
+/** Color picker component with form label */
+function ColorPickerWithLabel({ className, title, showPreview, name, defaultValue, validationState, onValueChange, data, disabled = false, rounded = false, label, }) {
+    const defaultColor = isNullOrUndefined(defaultValue)
+        ? whiteHex
+        : rgbToHex(defaultValue);
+    const [value, setValue] = useState(defaultColor);
+    const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
+    useEffect(() => onValueChange?.call(undefined, hexToRgb(value)), [onValueChange, value]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
+    const elClassName = getClassName([
+        className,
+        styleClassName,
+        rounded ? "is-rounded" : "",
+        "input",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        "bbr-input",
+        showPreview ? "column" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const id = name || generateGuid();
+    const labelClassName = getClassName([
+        "label",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            "is-normal",
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-color-picker 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: _jsx("div", { className: "field", children: _jsx(ColorPickerControl, { containerClassName: inputContainerClassName, className: elClassName, disabled: disabled, showPreview: showPreview, defaultColor: defaultColor, onValueChange: onChange, value: value, id: id, title: title, dataAttributes: dataAttributes, isValidationDefined: isValidationDefined, validationMessages: validationMessages, styleClassName: styleClassName }) }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-color-picker bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx(ColorPickerControl, { containerClassName: inputContainerClassName, className: elClassName, disabled: disabled, showPreview: showPreview, defaultColor: defaultColor, onValueChange: onChange, value: value, id: id, title: title, dataAttributes: dataAttributes, isValidationDefined: isValidationDefined, validationMessages: validationMessages, styleClassName: styleClassName })] }));
+}
+export default ColorPickerWithLabel;

package/components/primitives/color/components/withoutLabel/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ColorPickerProps } from "../..";
+/** Color picker component without form label */
+declare function ColorPickerWithoutLabel({ className, title, showPreview, name, defaultValue, validationState, onValueChange, data, disabled, rounded, }: ColorPickerProps): JSX.Element;
+export default ColorPickerWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,SAAS,EAAE,KAAK,EAChB,WAAW,EACX,IAAI,EACJ,YAAY,EAAE,eAAe,EAC7B,aAAa,EACb,IAAI,EACJ,QAAgB,EAAE,OAAe,GACpC,EAAE,gBAAgB,eA+ElB;AAED,eAAe,uBAAuB,CAAC"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { generateGuid, getClassName, hexToRgb, isNullOrUndefined, rgbToHex, whiteHex } from "@bodynarf/utils";
+import { getValidationValues, mapDataAttributes } from "../../../../..";
+import ColorPickerControl from "../picker";
+/** Color picker component without form label */
+function ColorPickerWithoutLabel({ className, title, showPreview, name, defaultValue, validationState, onValueChange, data, disabled = false, rounded = false, }) {
+    const defaultColor = isNullOrUndefined(defaultValue)
+        ? whiteHex
+        : rgbToHex(defaultValue);
+    const [value, setValue] = useState(defaultColor);
+    const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
+    useEffect(() => onValueChange?.call(undefined, hexToRgb(value)), [onValueChange, value]);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
+    const elClassName = getClassName([
+        className,
+        styleClassName,
+        rounded ? "is-rounded" : "",
+        "input",
+    ]);
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        showPreview ? "column" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const id = name || generateGuid();
+    if (showPreview) {
+        return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { containerClassName: containerClassName, className: elClassName, disabled: disabled, showPreview: showPreview, defaultColor: defaultColor, onValueChange: onChange, value: value, id: id, title: title, dataAttributes: dataAttributes, isValidationDefined: isValidationDefined, validationMessages: validationMessages, styleClassName: styleClassName }) }));
+    }
+    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { containerClassName: containerClassName, className: elClassName, disabled: disabled, showPreview: showPreview, defaultColor: defaultColor, onValueChange: onChange, value: value, id: id, title: title, dataAttributes: dataAttributes, isValidationDefined: isValidationDefined, validationMessages: validationMessages, styleClassName: styleClassName }) }));
+}
+export default ColorPickerWithoutLabel;

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

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

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

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

package/components/primitives/color/index.js

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

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

@@ -0,0 +1,19 @@
+import { CSSProperties } from "react";
+import { Color } from "@bodynarf/utils";
+import { BaseInputElementProps } from "../../..";
+/** Color picker props type */
+export interface ColorPickerProps extends Omit<BaseInputElementProps<Color>, "style" | "loading" | "size" | "readonly" | "placeholder"> {
+    /**
+     * Show text with color preview.
+     * If set - outlined button-like element on the right will be rendered
+     */
+    showPreview?: boolean;
+}
+/** Color picker custom css properties */
+export interface ColorPickerCssProperties extends CSSProperties {
+    /** Selected color to use as background color */
+    "--color-picker__background-color": string;
+    /** Color of text to contrast with background color */
+    "--color-picker__color": string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/color/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,qBAAqB,EAAE,MAAM,MAAM,CAAC;AAE7C,8BAA8B;AAC9B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EACvE,OAAO,GAAG,SAAS,GACjB,MAAM,GAAG,UAAU,GAAG,aAAa,CACxC;IACG;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,yCAAyC;AACzC,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC3D,gDAAgD;IAChD,kCAAkC,EAAE,MAAM,CAAC;IAE3C,sDAAsD;IACtD,uBAAuB,EAAE,MAAM,CAAC;CACnC"}

package/components/primitives/color/types.js

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "../../../../common.scss";
 import { DateProps } from "../../date";
 /** Date input component */

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

@@ -1 +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"}
+{"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

@@ -5,7 +5,7 @@ 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 DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validationState, name, size, className, rounded = false, loading = false, style, label, onBlur }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
         ? undefined
         : new Date(event.target.value)), [onValueChange]);
@@ -16,14 +16,14 @@ const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validatio
         className,
         elSizeClassName,
         styleClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
-    const stingifiedDefValue = defaultValue?.toISOString().split("T")[0];
+    const stringifiedDefValue = defaultValue?.toISOString().split("T")[0];
     const labelClassName = getClassName([
         "label",
         !label.horizontal ? elSizeClassName : "",
@@ -39,10 +39,10 @@ const DatePicker = ({ defaultValue, onValueChange, readonly, disabled, validatio
             "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 &&
+        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: stringifiedDefValue, 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 &&
+    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: stringifiedDefValue, 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/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./checkbox";
+export * from "./color";
 export * from "./date";
 export * from "./multiline";
 export * from "./number";

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

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

package/components/primitives/index.js

@@ -1,4 +1,5 @@
 export * from "./checkbox";
+export * from "./color";
 export * from "./date";
 export * from "./multiline";
 export * from "./number";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "../../../../common.scss";
 import { MultilineProps } from "../../multiline";
 /** Multiline textual input component */

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

@@ -1 +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"}
+{"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/components/multilineWithLabel/index.d.ts

@@ -1,6 +1,5 @@
-/// <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;
+declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, 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

@@ -1 +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"}
+{"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,yJAOrB,cAAc,KAAG,WAwGnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -4,7 +4,7 @@ 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 MultilineWithLabel = ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, loading = false, label, placeholder, fixed = false, rows, onBlur }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const id = name || generateGuid();
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
@@ -12,14 +12,13 @@ const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, read
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
         styleClassName,
         "textarea",
-        fixed === true ? "has-fixed-size" : "",
+        fixed ? "has-fixed-size" : "",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const labelClassName = getClassName([
         "label",

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

@@ -1,6 +1,5 @@
-/// <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;
+declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, loading, fixed, rows, }: MultilineProps) => JSX.Element;
 export default MultilineWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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,+HAMxB,cAAc,KAAG,WA0CnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -4,22 +4,21 @@ 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 MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, loading = false, fixed = false, 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" : "",
+        fixed ? "has-fixed-size" : "",
     ]);
     const inputContainerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "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") })] }));

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

@@ -1,6 +1,6 @@
 import { BaseInputElementProps } from "../..";
 /** Multiline textual input component props type */
-export interface MultilineProps extends BaseInputElementProps<string> {
+export interface MultilineProps extends Omit<BaseInputElementProps<string>, "rounded"> {
     /** Is input should be resizable */
     fixed?: boolean;
     /** Number of initial rows count */

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

@@ -1 +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"}
+{"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,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAClF,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/number/component/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NumberProps } from "../../number";
 /** Number input component */
 declare const Number: (props: NumberProps) => JSX.Element;

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

@@ -1 +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"}
+{"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/components/withLabel/index.d.ts

@@ -1,4 +1,3 @@
-/// <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;

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

@@ -1 +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"}
+{"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"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@b
 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 NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, }) => {
     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));
@@ -12,13 +12,13 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const labelClassName = getClassName([
         "label",
@@ -35,10 +35,10 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
             "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 &&
+        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 }) }), 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 &&
+    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 }) }), isValidationDefined && validationMessages.length > 0 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default NumberWithLabel;

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

@@ -1,4 +1,3 @@
-/// <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;

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

@@ -1 +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"}
+{"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

@@ -4,23 +4,23 @@ 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 NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, }) => {
     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" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const containerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "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 &&
+    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 }) }), isValidationDefined && validationMessages.length > 0 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default NumberWithoutLabel;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { PasswordProps } from "../../password";
 /** Password input component */

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":";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"}
+{"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/style.scss

@@ -0,0 +1,16 @@
+.bbr-password {
+    &:focus ~ .icon:not(:hover) {
+        color: rgb(219, 219, 219) !important;
+    }
+
+    &__wrapper {
+        .icon {
+            pointer-events: inherit !important;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(74, 74, 74);
+            }
+        }
+    }
+}

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

@@ -1,4 +1,3 @@
-/// <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;

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":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,iBAAiB,uIAMpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"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,uIAOpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}