@bodynarf/react.components 1.0.2 → 1.1.4

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AnchorWithIconProps } from "../../types";
+/** Anchor with icon component */
+export declare const AnchorWithIcon: ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/anchorWithIcon/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import utils from '@bodynarf/utils';
+import Icon from '../../../icon';
+/** Anchor with icon component */
+export const AnchorWithIcon = ({ href, className, onClick, caption, title, target, icon }) => {
+    const iconPosition = icon.position || 'left';
+    const iconClassName = utils.isNullOrEmpty(caption)
+        ? icon.className
+        : iconPosition === 'left'
+            ? `${icon.className} app-icon--left`
+            : `${icon.className} app-icon--right`;
+    if (iconPosition === 'left') {
+        return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
+    }
+    return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
+};

package/components/anchor/components/simpleAnchor/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SimpleAnchorProps } from "../../types";
+/** Simple anchor component, without icon */
+export declare const SimpleAnchor: ({ href, className, onClick, caption, title, target }: SimpleAnchorProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/anchor/components/simpleAnchor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,yDAA0D,iBAAiB,KAAG,WAYtG,CAAC"}

package/components/anchor/components/simpleAnchor/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Simple anchor component, without icon */
+export const SimpleAnchor = ({ href, className, onClick, caption, title, target }) => {
+    return (_jsx("a", { className: className, href: href, title: title, target: target, onClick: onClick, children: caption }));
+};

package/components/anchor/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import './anchor.scss';
+import { ElementIcon } from '../types';
+export declare type AnchorProps = {
+    /** Link destination */
+    href?: string;
+    /** Link caption  */
+    caption?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Configuration od inner icon */
+    icon?: ElementIcon;
+    /** Title of anchor */
+    title?: string;
+    /** Where to open the linked document */
+    target?: '_blank' | '_top';
+    /** Additional class names */
+    className?: string;
+    /** Should css hovering effects be disabled */
+    disableHovering?: boolean;
+};
+/** Anchor component */
+export default function Anchor(props: AnchorProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAKvC,oBAAY,WAAW,GAAG;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2B9D"}

package/components/anchor/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import utils from '@bodynarf/utils';
+import './anchor.scss';
+import { SimpleAnchor } from './components/simpleAnchor';
+import { AnchorWithIcon } from './components/anchorWithIcon';
+/** Anchor component */
+export default function Anchor(props) {
+    if (utils.isNullOrUndefined(props.caption) && utils.isNullOrUndefined(props.icon)) {
+        throw new Error("No anchor content provided");
+    }
+    const className = 'app-anchor'
+        + (!utils.isNullOrEmpty(props.className) ? ` ${props.className}` : '')
+        + (props.disableHovering === true ? ' app-anchor--unhoverable' : '');
+    if (utils.isNullOrUndefined(props.icon)) {
+        return (_jsx(SimpleAnchor, { ...props, className: className, onClick: props.onClick }));
+    }
+    return (_jsx(AnchorWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));
+}

package/{src/components/anchor/types.ts → components/anchor/types.d.ts}

@@ -1,26 +1,20 @@
 import { ElementIcon } from "../types";
-
-export type SimpleAnchorProps = {
+export declare type SimpleAnchorProps = {
     /** Link destination */
     href?: string;
-
     /** Class names */
     className: string;
-
     /** Click handler */
     onClick?: () => void;
-
     /** Link caption  */
     caption?: string;
-
     /** Title of anchor */
     title?: string;
-
     /** Where to open the linked document */
     target?: '_blank' | '_top';
 };
-
-export type AnchorWithIconProps = SimpleAnchorProps & {
+export declare type AnchorWithIconProps = SimpleAnchorProps & {
     /** Configuration of icon */
     icon: ElementIcon;
 };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,iBAAiB,GAAG;IAC5B,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;IAElB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,oBAAY,mBAAmB,GAAG,iBAAiB,GAAG;IAClD,4BAA4B;IAC5B,IAAI,EAAE,WAAW,CAAC;CACrB,CAAC"}

package/components/anchor/types.js

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

package/components/button/components/buttonWithIcon/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ButtonWithIconProps } from '../../types';
+/** Button with icon component */
+export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon }: ButtonWithIconProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}

package/components/button/components/buttonWithIcon/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import utils from '@bodynarf/utils';
+import Icon from '../../../icon';
+/** Button with icon component */
+export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, icon }) => {
+    const iconPosition = icon.position || 'left';
+    const iconClassName = utils.isNullOrEmpty(caption)
+        ? icon.className
+        : iconPosition === 'left'
+            ? `${icon.className} app-icon--left`
+            : `${icon.className} app-icon--right`;
+    className = utils.isNullOrEmpty(caption)
+        ? `${className} button--icon-only`
+        : className;
+    if (iconPosition === 'left') {
+        return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
+    }
+    return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
+};

package/components/button/components/simpleButton/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SimpleButtonProps } from '../../types';
+/** Simple button component, without icon */
+export declare const SimpleButton: ({ className, disabled, onClick, caption, title }: SimpleButtonProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/button/components/simpleButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,qDAAsD,iBAAiB,KAAG,WAWlG,CAAC"}

package/components/button/components/simpleButton/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Simple button component, without icon */
+export const SimpleButton = ({ className, disabled, onClick, caption, title }) => {
+    return (_jsx("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: caption }));
+};

package/components/button/index.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import './button.scss';
+import { ElementIcon, IconSize } from '../types';
+import { ButtonType } from './types';
+export declare type ButtonProps = {
+    /** Button displaying text */
+    caption?: string;
+    /** Type of button (color)  */
+    type: ButtonType;
+    /** Configuration of inner icon */
+    icon?: ElementIcon;
+    /** Button size  */
+    size?: IconSize;
+    /** Title on hover */
+    title?: string;
+    /** Is button uses light version of color  */
+    light?: boolean;
+    /** Is button outlined */
+    outlined?: boolean;
+    /** Should button corners be rounded  */
+    rounded?: boolean;
+    /** Display loading icon */
+    isLoading?: boolean;
+    /** Is button disabled */
+    disabled?: boolean;
+    /** Click action handler */
+    onClick?: () => void;
+};
+/**
+ * Button component
+ * @throws Caption is not defined and icon configuration is not defined at the same time
+ */
+export default function Button(props: ButtonProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAiC9D"}

package/components/button/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import utils from '@bodynarf/utils';
+import './button.scss';
+import { ButtonWithIcon } from './components/buttonWithIcon';
+import { SimpleButton } from './components/simpleButton';
+/**
+ * Button component
+ * @throws Caption is not defined and icon configuration is not defined at the same time
+ */
+export default function Button(props) {
+    if ((utils.isNullOrEmpty(props.caption))
+        && (utils.isNullOrUndefined(props.icon) || utils.isStringEmpty(props.icon?.className))) {
+        throw new Error("No button content provided.");
+    }
+    const className = `button is-${props.type}`
+        + (props.light === true ? ' is-light' : '')
+        + (!utils.isNullOrUndefined(props.size) ? ` is-${props.size}` : '')
+        + (props.outlined === true ? ' is-outlined' : '')
+        + (props.rounded === true ? ' is-rounded' : '')
+        + (props.isLoading === true ? ' is-loading' : '');
+    if (!utils.isNullOrUndefined(props.icon)) {
+        return (_jsx(ButtonWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));
+    }
+    else {
+        return (_jsx(SimpleButton, { ...props, className: className, onClick: props.onClick }));
+    }
+}

package/components/button/types.d.ts

@@ -0,0 +1,20 @@
+import { ElementIcon } from "../types";
+/** Button types according to Bulma framework */
+export declare type ButtonType = 'default' /** color: transparent */ | 'primary' /** color: seawave green */ | 'link' /** color: blue-violet */ | 'info' /** color: sky-blue */ | 'success' /** color: green */ | 'warning' /** color: yellow */ | 'danger' /** color: red */ | 'white' /** color: white */ | 'light' /** color: light-gray */ | 'dark' /** color: dark-gray */ | 'black' /** color: black */ | 'text' /** Underline text with color: gray */ | 'ghost' /** Blue underline text with color: transparent */;
+export declare type SimpleButtonProps = {
+    /** Button class name*/
+    className: string;
+    /** Button click handler */
+    onClick?: () => void;
+    /** Button caption */
+    caption?: string;
+    /** Disabled attribute value*/
+    disabled?: boolean;
+    /** Title on hover */
+    title?: string;
+};
+export declare type ButtonWithIconProps = SimpleButtonProps & {
+    /** Icon configuration */
+    icon: ElementIcon;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,gDAAgD;AAChD,oBAAY,UAAU,GAClB,SAAS,CAAC,yBAAyB,GACjC,SAAS,CAAC,2BAA2B,GACrC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,GAC1B,OAAO,CAAC,mBAAmB,GAC3B,OAAO,CAAC,wBAAwB,GAChC,MAAM,CAAC,uBAAuB,GAC9B,OAAO,CAAC,mBAAmB,GAC3B,MAAM,CAAC,sCAAsC,GAC7C,OAAO,CAAC,kDAAkD,CAC3D;AAEL,oBAAY,iBAAiB,GAAG;IAC5B,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAElB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,iBAAiB,GAAG;IAClD,yBAAyB;IACzB,IAAI,EAAE,WAAW,CAAC;CACrB,CAAC"}

package/components/button/types.js

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

package/components/dropdown/components/dropdownItem/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SelectableItem } from "../../types";
+/** Dropdown item props */
+interface DropdownItemProps {
+    /** Item to present in dropdown */
+    item: SelectableItem;
+    /** Is item selected*/
+    selected: boolean;
+    /** Item click handler */
+    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
+}
+/** Single item in dropdown component */
+declare const DropdownItem: ({ item, selected, onClick }: DropdownItemProps) => JSX.Element;
+export default DropdownItem;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/dropdownItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownItem/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,0BAA0B;AAC1B,UAAU,iBAAiB;IACvB,kCAAkC;IAClC,IAAI,EAAE,cAAc,CAAC;IAErB,sBAAsB;IACtB,QAAQ,EAAE,OAAO,CAAC;IAElB,yBAAyB;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wCAAwC;AACxC,QAAA,MAAM,YAAY,gCAAiC,iBAAiB,KAAG,WAYtE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/dropdown/components/dropdownItem/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Single item in dropdown component */
+const DropdownItem = ({ item, selected, onClick }) => {
+    return (_jsx("li", { className: `app-dropdown-item dropdown-item${selected ? " is-active" : ""}`, onClick: onClick, "data-dropdown-item-value": item.value, title: item.displayValue, children: item.displayValue }, item.id));
+};
+export default DropdownItem;

package/components/dropdown/components/dropdownLabel/index.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent } from 'react';
+import { SelectableItem } from "../../types";
+interface DropdownLabelProps {
+    /** Caption when no items selected */
+    caption: string;
+    /** Can user deselect */
+    deselectable: boolean;
+    /** Selected item */
+    selectedItem?: SelectableItem;
+    /** Click handler*/
+    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
+}
+/** Label component */
+declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable }: DropdownLabelProps) => JSX.Element;
+export default DropdownLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/dropdownLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/dropdownLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,UAAU,kBAAkB;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,qDAAsD,kBAAkB,KAAG,WAkC7F,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/dropdownLabel/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import utils from "@bodynarf/utils";
+import Icon from '../../../icon';
+/** Label component */
+const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
+    const itemSelected = !utils.isNullOrUndefined(selectedItem);
+    const text = itemSelected
+        ? selectedItem?.displayValue
+        : caption;
+    const deselectVisible = deselectable && itemSelected;
+    const className = [
+        "dropdown-trigger",
+        "app-dropdown__label",
+        itemSelected ? "" : "app-dropdown__label--default",
+        "button"
+    ].filter(x => !utils.isNullOrEmpty(x))
+        .join(" ");
+    return (_jsxs("label", { className: className, onClick: onClick, children: [deselectVisible &&
+                _jsx(Icon, { className: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { className: "arrow-up" })] }));
+};
+export default DropdownLabel;

package/components/dropdown/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './dropdown.scss';
+import { SelectableItem } from './types';
+import { BaseElementProps } from '../types';
+export declare type DropdownProps = BaseElementProps & {
+    /** Items which can be selected */
+    items: Array<SelectableItem>;
+    /**
+     * Selected value.
+     * Must be stored outside
+    */
+    value?: SelectableItem;
+    /**
+     * Action to update selected value,
+     *  which stored outside
+     */
+    onSelect: (item?: SelectableItem) => void;
+    /**
+     * Caption.
+     * Appears only no element selected
+     */
+    caption: string;
+    /** Hide dropdown list when its opened and user click outside */
+    hideOnOuterClick: boolean;
+    /** Can user deselect */
+    deselectable?: boolean;
+};
+/** Dropdown component */
+declare const Dropdown: ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick }: DropdownProps) => JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA6FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/index.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useState } from 'react';
+import utils from '@bodynarf/utils';
+import './dropdown.scss';
+import { useComponentOutsideClick } from '../../hooks/useComponentOutsideClick';
+import DropdownItem from './components/dropdownItem';
+import DropdownLabel from './components/dropdownLabel';
+/** Dropdown component */
+const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick }) => {
+    const id = useId();
+    const [isListVisible, setListVisible] = useState(false);
+    const onItemClick = useCallback((event) => {
+        const target = event.target;
+        if (utils.isNullOrUndefined(target)) {
+            return;
+        }
+        const dataValue = target.dataset['dropdownItemValue'];
+        if (utils.isNullOrEmpty(dataValue)) {
+            return;
+        }
+        const item = items.find(x => x.value === dataValue);
+        if (utils.isNullOrUndefined(item)) {
+            return;
+        }
+        if (value === item) {
+            setListVisible(false);
+            return;
+        }
+        onSelect(item);
+        setListVisible(false);
+    }, [setListVisible, value, items, onSelect]);
+    const onLabelClick = useCallback((event) => {
+        const target = event.target;
+        if (utils.isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.classList.contains("bi-plus-lg")) {
+            onSelect(undefined);
+        }
+        else {
+            setListVisible(state => !state);
+        }
+    }, [onSelect, setListVisible]);
+    useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
+    const classNames = [
+        "app-dropdown",
+        isListVisible ? "is-active" : "",
+        className,
+        "dropdown"
+    ]
+        .filter(x => !utils.isNullOrEmpty(x))
+        .join(" ");
+    return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: caption, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
+                    ? _jsx("ul", { className: "dropdown-content", children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
+                    : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));
+};
+export default Dropdown;

package/{src/components/dropdown/types.ts → components/dropdown/types.d.ts}

@@ -1,11 +1,10 @@
 /** Dropdown item */
-export type SelectableItem = {
+export declare type SelectableItem = {
     /** Unique item identifier */
     id: string;
-
     /** Item value */
     value: string;
-
     /** Displaying text */
     displayValue: string;
-}
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oBAAY,cAAc,GAAG;IACzB,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB,CAAA"}

package/components/dropdown/types.js

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

package/components/icon/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import './icon.scss';
+import { IconSize } from '../types';
+/** Icon component props */
+export declare type IconProps = {
+    /**
+     * Class name for icon.
+     * Used to display icon from bootstrap-icons
+    */
+    className: string;
+    /** Icon size */
+    size?: IconSize;
+};
+/**
+ * Icon component. Based on bootstrap icons
+ */
+export default function Icon(props: IconProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQ1D"}

package/components/icon/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './icon.scss';
+const sizeToClassMap = new Map([
+    ['small', ' app-icon--smal'],
+    ['medium', ''],
+    ['large', ' app-icon--large']
+]);
+/**
+ * Icon component. Based on bootstrap icons
+ */
+export default function Icon(props) {
+    const size = props.size || 'medium';
+    const className = `app-icon bi bi-${props.className}${sizeToClassMap.get(size)}`;
+    return (_jsx("i", { className: className }));
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BaseInputElementProps, InputLabel } from '../types';
+/** Date input conponent props type */
+export declare type DateProps = Omit<BaseInputElementProps<Date | undefined>, 'placeholder'> & {
+    /** Label configuration */
+    label: InputLabel;
+};
+/** Date input component */
+declare const DatePicker: (props: DateProps) => JSX.Element;
+export default DatePicker;
+//# 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.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7D,sCAAsC;AACtC,oBAAY,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG;IACnF,0BAA0B;IAC1B,KAAK,EAAE,UAAU,CAAC;CACrB,CAAA;AAED,2BAA2B;AAC3B,QAAA,MAAM,UAAU,UAAW,SAAS,KAAG,WAqFtC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/date/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import utils from '@bodynarf/utils';
+/** Date input component */
+const DatePicker = (props) => {
+    const onValueChange = useCallback((event) => props.onValueChange(utils.isStringEmpty(event.target.value)
+        ? undefined
+        : new Date(event.target.value)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onValueChange]);
+    const id = props.name || utils.generateGuid();
+    const size = `is-${(props.size || 'normal')}`;
+    const className = utils.getClassName([
+        props.className,
+        size,
+        props.rounded === true ? 'is-rounded' : '',
+        "input",
+    ]);
+    const inputContainerClassName = utils.getClassName([
+        "control",
+        props.loading === true ? 'is-loading' : '',
+        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
+    ]);
+    const label = props.label;
+    const defaultValue = props.defaultValue?.toISOString().split("T")[0];
+    if (label.horizontal === true) {
+        return (_jsxs("div", { className: "app-input field is-horizontal", children: [_jsx("div", { className: `field-label ${size}`, children: _jsx("label", { className: "label", htmlFor: id, children: label.caption }) }), _jsx("div", { className: "field-body", children: _jsx("div", { className: "field", children: _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: defaultValue, onChange: onValueChange, name: id, id: id }) }) }) })] }));
+    }
+    return (_jsxs("div", { className: "app-input field", children: [_jsx("label", { className: `label ${size}`, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", className: className, readOnly: props.readonly, disabled: props.disabled, defaultValue: props.defaultValue?.toLocaleDateString(), onChange: onValueChange, name: id, id: id }) })] }));
+};
+export default DatePicker;

package/components/primitives/index.d.ts

@@ -0,0 +1,5 @@
+export * from './date';
+export * from './multiline';
+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,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/components/primitives/index.js

@@ -0,0 +1,4 @@
+export * from './date';
+export * from './multiline';
+export * from './text';
+export * from './types';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { MultilineProps } from '../..';
+/** Multiline textual input component with describing label */
+declare const MultilineWithLabel: (props: 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":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,UAAW,cAAc,KAAG,WAkFnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}