@bodynarf/react.components 1.12.6 → 1.13.0

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

@@ -1,41 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { generateGuid, getClassName, isNullish, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize } from "../../../../types";
-import { mapDataAttributes } from "../../../../utils";
-import ComponentWithLabel from "../../internal/componentWithLabel";
-import "./style.scss";
-/** Boolean input component */
-const CheckBox = ({ onValueChange, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, data, title }) => {
-    const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
-    const elClassName = getClassName([
-        "is-checkradio",
-        "m-check-radio",
-        className,
-        hasBackgroundColor ? "has-background-color" : "",
-        fixBackgroundColor && hasBackgroundColor ? "m-has-background-color" : "",
-        size === ElementSize.Normal ? "" : `is-${size}`,
-        rounded ? "is-circle" : "",
-        isNullOrUndefined(style) ? "" : `is-${style}`,
-        block ? "is-block" : "",
-        withoutBorder ? "has-no-border" : "",
-    ]);
-    const dataAttributes = isNullish(data)
-        ? undefined
-        : mapDataAttributes(data);
-    if (!isNullish(label) && isFormLabel) {
-        return (_jsxs(ComponentWithLabel, { id: name, label: {
-                ...label,
-                horizontalContainerClassName: getClassName([label.horizontalContainerClassName, "p-0"]),
-            }, size: ElementSize.Normal, children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, ...dataAttributes }), _jsx("label", { title: title, htmlFor: name, className: "is-empty" })] }));
-    }
-    const isEmptyLabel = isNullOrUndefined(label);
-    const labelClassName = isEmptyLabel
-        ? "is-empty"
-        : undefined;
-    const labelDataAttributes = isNullish(label?.data)
-        ? undefined
-        : mapDataAttributes(label.data);
-    return (_jsxs("div", { className: "bbr-field bbr-input field mr-2", children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, ...dataAttributes }), _jsx("label", { htmlFor: name, className: labelClassName, title: isEmptyLabel ? title : label?.title, ...labelDataAttributes, children: label?.caption })] }));
-};
-export default CheckBox;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { emptyFn, generateGuid, getClassName, isNullish, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { mapDataAttributes } from "../../../../utils";
+import ComponentWithLabel from "../../internal/componentWithLabel";
+import "./style.scss";
+// todo: https://justboil.github.io/bulma-checkbox/
+/** Boolean input component */
+const CheckBox = ({ onValueChange = emptyFn, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, data, title }) => {
+    const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
+    const elClassName = getClassName([
+        "is-checkradio",
+        "m-check-radio",
+        className,
+        hasBackgroundColor ? "has-background-color" : "",
+        fixBackgroundColor && hasBackgroundColor ? "m-has-background-color" : "",
+        size === ElementSize.Normal ? "" : `is-${size}`,
+        rounded ? "is-circle" : "",
+        isNullOrUndefined(style) ? "" : `is-${style}`,
+        block ? "is-block" : "",
+        withoutBorder ? "has-no-border" : "",
+    ]);
+    const dataAttributes = isNullish(data)
+        ? undefined
+        : mapDataAttributes(data);
+    if (!isNullish(label) && isFormLabel) {
+        return (_jsxs(ComponentWithLabel, { id: name, size: size, label: {
+                ...label,
+                horizontal: label.horizontal ?? false,
+                horizontalContainerClassName: getClassName([label.horizontalContainerClassName, "p-0"]),
+            }, children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, ...dataAttributes }), _jsx("label", { title: title, htmlFor: name, className: "is-empty" })] }));
+    }
+    const isEmptyLabel = isNullOrUndefined(label);
+    const labelClassName = isEmptyLabel
+        ? "is-empty"
+        : undefined;
+    const labelDataAttributes = isNullish(label?.data)
+        ? undefined
+        : mapDataAttributes(label.data);
+    return (_jsxs("div", { className: "bbr-field bbr-input field mr-2", children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, ...dataAttributes }), _jsx("label", { htmlFor: name, className: labelClassName, title: isEmptyLabel ? title : label?.title, ...labelDataAttributes, children: label?.caption })] }));
+};
+export default CheckBox;

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

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

package/components/primitives/checkbox/index.js

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

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

@@ -1,25 +1,27 @@
-import { BaseInputElementProps } from "../../../types";
-/** Checkbox component props type */
-export interface CheckBoxProps extends Omit<BaseInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder" | "hint" | "autofocus"> {
-    /** 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 { BaseNotNullableInputElementProps, LabelConfiguration } from "../../../types";
+/** Checkbox component props type */
+export type CheckBoxProps = Omit<BaseNotNullableInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder" | "hint" | "autofocus" | "label"> & {
+    /** Label configuration */
+    label?: Omit<LabelConfiguration, "horizontal"> & Partial<Pick<LabelConfiguration, "horizontal">>;
+    /** 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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAI,aAAa,GAC1B,MAAM,GAAO,WAAW,CAC7B;IACG,+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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAElF,oCAAoC;AACpC,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,gCAAgC,CAAC,OAAO,CAAC,EACpE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAG,aAAa,GACzB,MAAM,GAAG,WAAW,GACpB,OAAO,CACZ,GAAG;IACA,0BAA0B;IAC1B,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjG,+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,CAAC"}

package/components/primitives/checkbox/types.js

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

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import "./style.scss";
-import { ColorPickerProps } from "..";
-/** Color picker component */
-declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
-export default ColorPicker;
+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

@@ -1 +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;AAItC,6BAA6B;AAC7B,QAAA,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAGF,CACxC;AAEL,eAAe,WAAW,CAAC"}
+{"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;AAItC,6BAA6B;AAC7B,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,KAAG,GAAG,CAAC,OAGN,CACxC;AAEL,eAAe,WAAW,CAAC"}

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

@@ -1,10 +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;
+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/components/picker/index.d.ts

@@ -1,20 +1,20 @@
-import { ChangeEvent } from "react";
-import { BaseInputElementProps } from "../../../../../types";
-import { ColorPickerPreviewConfig } from "../..";
-/** Props of `ColorPickerControl` */
-export interface ColorPickerControlProps extends Omit<BaseInputElementProps<string>, "onValueChange" | "placeholder" | "rounded" | "readonly" | "loading" | "className"> {
-    /** Current color value */
-    value: string;
-    /** Control unique identifier */
-    id: string;
-    /** Class names of control */
-    elementClassName: string;
-    /** Handler of control value change*/
-    onValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /** Preview element configuration */
-    previewConfig?: ColorPickerPreviewConfig;
-}
-/** Color picker container component */
-declare const ColorPickerControl: ({ value, defaultValue, onValueChange, elementClassName, disabled, autoFocus, previewConfig, size, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
-export default ColorPickerControl;
+import { ChangeEvent } from "react";
+import { BaseInputElementProps } from "../../../../../types";
+import { ColorPickerPreviewConfig } from "../..";
+/** Props of `ColorPickerControl` */
+export interface ColorPickerControlProps extends Omit<BaseInputElementProps<string>, "placeholder" | "rounded" | "readonly" | "loading" | "className"> {
+    /** Current color value */
+    value: string;
+    /** Control unique identifier */
+    id: string;
+    /** Class names of control */
+    elementClassName: string;
+    /** Handler of control value change*/
+    onValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Preview element configuration */
+    previewConfig?: ColorPickerPreviewConfig;
+}
+/** Color picker container component */
+declare const ColorPickerControl: ({ value, defaultValue, onValueChange, elementClassName, disabled, autoFocus, previewConfig, size, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
+export default ColorPickerControl;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,eAAe,GAAG,aAAa,GAC/B,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC5C;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,gJAQrB,uBAAuB,KAAG,WA2C5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"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;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,aAAa,GACb,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC5C;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,GAAI,6IAQzB,uBAAuB,KAAG,GAAG,CAAC,OA2ChC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,42 +1,43 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, getFontColorFromString, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementPosition } from "../../../../../types";
-import { mapDataAttributes } from "../../../../../utils";
-import InternalHint from "../../../internal/hint";
-/** Color picker container component */
-const ColorPickerControl = ({ value, defaultValue, onValueChange, elementClassName, disabled = false, autoFocus = false, previewConfig, size, id, title, data, hint, validationState, }) => {
-    if (!isNullOrUndefined(previewConfig)) {
-        return (_jsx(PickerWithPreview, { id: id, size: size, value: value, disabled: disabled, defaultValue: defaultValue, onValueChange: onValueChange, previewConfig: previewConfig, elementClassName: elementClassName, data: data, title: title }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, ...data, title: title }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
-};
-export default ColorPickerControl;
-/** Picker sub component with preview */
-const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onValueChange, value, autoFocus = false, id, title, data, previewConfig, hint, validationState, }) => {
-    const classNames = getClassName([
-        "bbr-color-picker__preview",
-        "button",
-        "is-outlined",
-        isNullOrUndefined(size) ? "" : `is-${size}`
-    ]);
-    const color = getFontColorFromString(value);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    const controlContainerClassName = getClassName([
-        "control",
-        "bbr-input",
-        "is-flex-grow-1",
-        previewConfig.position === ElementPosition.Left ? "ml-1" : "mr-1",
-    ]);
-    if (previewConfig.position === ElementPosition.Right) {
-        return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
-                        "--color-picker__background-color": value,
-                        "--color-picker__color": color,
-                    }, children: value }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
-    }
-    return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("button", { className: classNames, style: {
-                    "--color-picker__background-color": value,
-                    "--color-picker__color": color,
-                }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, getFontColorFromString, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition } from "../../../../../types";
+import { mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
+/** Color picker container component */
+const ColorPickerControl = ({ value, defaultValue, onValueChange, elementClassName, disabled = false, autoFocus = false, previewConfig, size, id, title, data, hint, validationState, }) => {
+    if (!isNullOrUndefined(previewConfig)) {
+        return (_jsx(PickerWithPreview, { id: id, size: size, value: value, disabled: disabled, defaultValue: defaultValue, onValueChange: onValueChange, previewConfig: previewConfig, elementClassName: elementClassName, data: data, title: title }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, ...data, title: title }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default ColorPickerControl;
+/** Picker sub component with preview */
+// eslint-disable-next-line react/no-multi-comp
+const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onValueChange, value, autoFocus = false, id, title, data, previewConfig, hint, validationState, }) => {
+    const classNames = getClassName([
+        "bbr-color-picker__preview",
+        "button",
+        "is-outlined",
+        isNullOrUndefined(size) ? "" : `is-${size}`
+    ]);
+    const color = getFontColorFromString(value);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const controlContainerClassName = getClassName([
+        "control",
+        "bbr-input",
+        "is-flex-grow-1",
+        previewConfig.position === ElementPosition.Left ? "ml-1" : "mr-1",
+    ]);
+    if (previewConfig.position === ElementPosition.Right) {
+        return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { type: "button", className: classNames, style: {
+                        "--color-picker__background-color": value,
+                        "--color-picker__color": color,
+                    }, children: value }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    }
+    return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("button", { type: "button", className: classNames, style: {
+                    "--color-picker__background-color": value,
+                    "--color-picker__color": color,
+                }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAyB,EAC5D,SAAiB,EACjB,KAAK,EAEL,IAAI,EACJ,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,gBAAgB,eAiDlB;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAoC,MAAM,OAAO,CAAC;AAQ1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,gBAAgB,CA4D9C,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -1,25 +1,25 @@
-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 { ElementSize } from "../../../../../types";
-import { getStyleClassName } from "../../../../../utils";
-import ComponentWithLabel from "../../../internal/componentWithLabel";
-import ColorPickerControl from "../picker";
-/** Color picker component with form label */
-function ColorPickerWithLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size = ElementSize.Normal, autoFocus = false, label, hint, className, title, data, }) {
-    const defaultColor = isNullOrUndefined(defaultValue)
-        ? whiteHex
-        : rgbToHex(defaultValue);
-    const [value, setValue] = useState(defaultColor);
-    const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
-    useEffect(() => onValueChange(hexToRgb(value)), [onValueChange, value]);
-    const elClassName = getClassName([
-        className,
-        rounded ? "is-rounded" : "",
-        getStyleClassName(undefined, validationState),
-        size === ElementSize.Normal ? "" : `is-${size}`,
-        "input",
-    ]);
-    return (_jsx(ComponentWithLabel, { id: name, size: size, label: label, children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, autoFocus: autoFocus, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, hint: hint, validationState: validationState, data: data, title: title }) }));
-}
-export default ColorPickerWithLabel;
+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 { ElementSize } from "../../../../../types";
+import { getStyleClassName } from "../../../../../utils";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+import ColorPickerControl from "../picker";
+/** Color picker component with form label */
+const ColorPickerWithLabel = ({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size = ElementSize.Normal, autoFocus = false, label, hint, className, title, data, }) => {
+    const defaultColor = isNullOrUndefined(defaultValue)
+        ? whiteHex
+        : rgbToHex(defaultValue);
+    const [value, setValue] = useState(defaultColor);
+    const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
+    useEffect(() => onValueChange?.(hexToRgb(value)), [onValueChange, value]);
+    const elClassName = getClassName([
+        className,
+        rounded ? "is-rounded" : "",
+        getStyleClassName(undefined, validationState),
+        size === ElementSize.Normal ? "" : `is-${size}`,
+        "input",
+    ]);
+    return (_jsx(ComponentWithLabel, { id: name, size: size, label: label, children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, autoFocus: autoFocus, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, hint: hint, validationState: validationState, data: data, title: title }) }));
+};
+export default ColorPickerWithLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAI,EACvC,SAAiB,EAEjB,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eA8ClB;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAoC,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,gBAAgB,CAwDjD,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,21 +1,21 @@
-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 ColorPickerControl from "../picker";
-/** Color picker component without form label */
-function ColorPickerWithoutLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size, autoFocus = false, className, title, data, hint, }) {
-    const defaultColor = isNullOrUndefined(defaultValue)
-        ? whiteHex
-        : rgbToHex(defaultValue);
-    const [value, setValue] = useState(defaultColor);
-    const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
-    useEffect(() => onValueChange(hexToRgb(value)), [onValueChange, value]);
-    const elClassName = getClassName([
-        className,
-        rounded ? "is-rounded" : "",
-        isNullOrUndefined(size) ? "" : `is-${size}`,
-        "input",
-    ]);
-    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, autoFocus: autoFocus, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
-}
-export default ColorPickerWithoutLabel;
+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 ColorPickerControl from "../picker";
+/** Color picker component without form label */
+const ColorPickerWithoutLabel = ({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size, autoFocus = false, className, title, data, hint, }) => {
+    const defaultColor = isNullOrUndefined(defaultValue)
+        ? whiteHex
+        : rgbToHex(defaultValue);
+    const [value, setValue] = useState(defaultColor);
+    const onChange = useCallback((event) => setValue(event.target.value), [setValue]);
+    useEffect(() => onValueChange?.(hexToRgb(value)), [onValueChange, value]);
+    const elClassName = getClassName([
+        className,
+        rounded ? "is-rounded" : "",
+        isNullOrUndefined(size) ? "" : `is-${size}`,
+        "input",
+    ]);
+    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, autoFocus: autoFocus, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
+};
+export default ColorPickerWithoutLabel;

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

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

package/components/primitives/color/index.js

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

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

@@ -1,24 +1,24 @@
-import { CSSProperties } from "react";
-import { Color } from "@bodynarf/utils";
-import { ElementFloatPosition, BaseInputElementProps } from "../../../types";
-/** Color picker props type */
-export interface ColorPickerProps extends Omit<BaseInputElementProps<Color>, "style" | "loading" | "readonly" | "placeholder"> {
-    /**
-     * Preview text configuration.
-     * If provided - outlined button-like element will be rendered near picker according to configuration
-     */
-    preview?: ColorPickerPreviewConfig;
-}
-/** 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;
-}
-/** Configuration type for preview element of color picker */
-export interface ColorPickerPreviewConfig {
-    /** Placement of preview element */
-    position: ElementFloatPosition;
-}
+import { CSSProperties } from "react";
+import { Color } from "@bodynarf/utils";
+import { ElementFloatPosition, BaseNotNullableInputElementProps } from "../../../types";
+/** Color picker props type */
+export interface ColorPickerProps extends Omit<BaseNotNullableInputElementProps<Color>, "style" | "loading" | "readonly" | "placeholder"> {
+    /**
+     * Preview text configuration.
+     * If provided - outlined button-like element will be rendered near picker according to configuration
+     */
+    preview?: ColorPickerPreviewConfig;
+}
+/** 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;
+}
+/** Configuration type for preview element of color picker */
+export interface ColorPickerPreviewConfig {
+    /** Placement of preview element */
+    position: ElementFloatPosition;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +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,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEzE,8BAA8B;AAC9B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EACrE,OAAO,GAAG,SAAS,GACnB,UAAU,GAAG,aAAa,CAC/B;IACG;;;OAGG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,yCAAyC;AACzC,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC3D,gDAAgD;IAChD,kCAAkC,EAAE,MAAM,CAAC;IAE3C,sDAAsD;IACtD,uBAAuB,EAAE,MAAM,CAAC;CACnC;AAED,6DAA6D;AAC7D,MAAM,WAAW,wBAAwB;IACrC,mCAAmC;IACnC,QAAQ,EAAE,oBAAoB,CAAC;CAClC"}
+{"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,oBAAoB,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAEpF,8BAA8B;AAC9B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gCAAgC,CAAC,KAAK,CAAC,EAChF,OAAO,GAAG,SAAS,GACnB,UAAU,GAAG,aAAa,CAC/B;IACG;;;OAGG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,yCAAyC;AACzC,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC3D,gDAAgD;IAChD,kCAAkC,EAAE,MAAM,CAAC;IAE3C,sDAAsD;IACtD,uBAAuB,EAAE,MAAM,CAAC;CACnC;AAED,6DAA6D;AAC7D,MAAM,WAAW,wBAAwB;IACrC,mCAAmC;IACnC,QAAQ,EAAE,oBAAoB,CAAC;CAClC"}

package/components/primitives/color/types.js

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

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

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

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":";AASA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,uKAWb,SAAS,KAAG,WA4Dd,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,GAAI,oKAWjB,SAAS,KAAG,GAAG,CAAC,OA4DlB,CAAC;AAEF,eAAe,UAAU,CAAC"}