nurseitaly-components 0.0.1

package/dist/basic/DropdownMenu/styles.scss

@@ -0,0 +1,54 @@
+.ds-dropdown-menu {
+  display: flex;
+  align-items: center;
+
+  .menu {
+    position: relative;
+    display: inline-block;
+
+    > .options {
+      position: absolute;
+      right: 0;
+      top: 100%;
+      z-index: 1000;
+      width: auto;
+      border-radius: var(--radius-050);
+      background-color: var(--background-default);
+      white-space: nowrap;
+      border: 1px solid var(--border-subtle-1);
+      box-shadow: 0px 8px 18px -6px var(--miscellaneous-shadow-2);
+      margin-top: 4px;
+      min-width: 180px;
+
+      > .option {
+        display: flex;
+        align-items: center;
+        width: auto;
+        padding: var(--spacing-0) var(--spacing-150);
+        height: 56px;
+        cursor: pointer;
+
+        > .ds-icon {
+          margin-right: 8px;
+        }
+
+        &:first-of-type {
+          border-bottom: 1px solid var(--border-subtle-1);
+        }
+
+        &.danger {
+          color: var(--text-error);
+
+          > .ds-icon {
+            color: var(--text-error);
+          }
+        }
+
+        &:hover,
+        &.disabled {
+          background-color: var(--layer-hover-1);
+        }
+      }
+    }
+  }
+}

package/dist/basic/Dummy/Dummy.d.ts

@@ -0,0 +1,9 @@
+import './styles.scss';
+export declare const DummyModes: readonly ["white", "blue"];
+type DummyModes = (typeof DummyModes)[number];
+export type Props = {
+    className?: string;
+    mode?: DummyModes;
+};
+export default function Dummy({ className, mode }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/Dummy/Dummy.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import './styles.scss';
+export const DummyModes = ['white', 'blue'];
+export default function Dummy({ className, mode = 'blue' }) {
+    const getClassNames = cx('ds-dummy', className, mode);
+    return _jsx("div", { className: getClassNames, children: "aaaa" });
+}

package/dist/basic/Dummy/index.d.ts

@@ -0,0 +1,2 @@
+import Dummy from './Dummy';
+export default Dummy;

package/dist/basic/Dummy/index.js

@@ -0,0 +1,2 @@
+import Dummy from './Dummy';
+export default Dummy;

package/dist/basic/Dummy/styles.scss

@@ -0,0 +1,4 @@
+.ds-dummy {
+  display: flex;
+  align-items: center;
+}

package/dist/basic/FilterDropdown/FilterDropdown.d.ts

@@ -0,0 +1,16 @@
+import { DropdownItem } from "../DropdownList/DropdownItemList";
+import "./styles.scss";
+export declare const DropdownFilterSizes: readonly ["large", "medium", "small"];
+export type DropdownFilterSizes = (typeof DropdownFilterSizes)[number];
+export type Props = {
+    text: string;
+    list: DropdownItem[];
+    selected?: DropdownItem[];
+    setSelected?: (d: DropdownItem[]) => void;
+    size?: DropdownFilterSizes;
+    active?: boolean;
+    className?: string;
+    disabled?: boolean;
+    right?: boolean;
+};
+export default function FilterDropdown({ text, list, selected, setSelected, className, disabled, active, size, right, }: Props): import("react").JSX.Element;

package/dist/basic/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
+import DropdownList from "../DropdownList";
+import Icon from "../Icon";
+import "./styles.scss";
+export const DropdownFilterSizes = ["large", "medium", "small"];
+export default function FilterDropdown({ text, list, selected = [], setSelected, className, disabled = false, active = false, size = "large", right = false, }) {
+    const [show, setShow] = useState(false);
+    const [hasSelected, setHasSelected] = useState(false);
+    const [controlList, setControlList] = useState([]);
+    const containerRef = useRef(null);
+    const getClassNames = cx("ds-dropdown-filter", className, size, {
+        active: !disabled && active,
+        selected: !disabled && hasSelected,
+        disabled: disabled,
+    });
+    const load = () => {
+        setControlList(list.map((item) => ({
+            ...item,
+            icon: selected.some((s) => s.value === item.value)
+                ? "check_box"
+                : "check_box_outline_blank",
+        })));
+        setHasSelected(selected.length !== 0);
+    };
+    const handleSelect = (item) => {
+        const items = selected.some((s) => s.value === item.value)
+            ? selected.filter((s) => s.value !== item.value)
+            : [...selected, item];
+        setSelected && setSelected(items);
+        setHasSelected(items.length !== 0);
+    };
+    useEffect(() => {
+        load();
+    }, [selected]);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setShow(false);
+            }
+        }
+        if (show) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        // Cleanup on unmount or when show changes
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [show]);
+    return (_jsxs("div", { className: "ds-filter-container", onClick: () => setShow(!show), ref: containerRef, children: [_jsxs("div", { className: getClassNames, children: [_jsx("button", { type: "button", disabled: disabled, className: "main-button", children: _jsx("span", { children: text }) }), _jsx("button", { type: "button", disabled: disabled, className: "icon-button", children: _jsx(Icon, { name: "arrow_drop_down", size: "x-small" }) })] }), show && (_jsx(DropdownList, { list: controlList, onSelect: handleSelect, right: right }))] }));
+}

package/dist/basic/FilterDropdown/index.d.ts

@@ -0,0 +1,2 @@
+import FilterDropdown from './FilterDropdown';
+export default FilterDropdown;

package/dist/basic/FilterDropdown/index.js

@@ -0,0 +1,2 @@
+import FilterDropdown from './FilterDropdown';
+export default FilterDropdown;

package/dist/basic/FilterDropdown/styles.scss

@@ -0,0 +1,97 @@
+.ds-filter-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .ds-dropdown-filter {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    border-radius: var(--radius-050);
+    border: 1px solid var(--border-button);
+
+    .main-button,
+    .icon-button {
+      display: flex;
+      align-items: center;
+      background: transparent;
+      color: var(--text-accent);
+      border: 0px;
+      height: 100%;
+      cursor: pointer;
+    }
+
+    .icon-button {
+      border-left: 1px solid var(--border-button);
+      > .ds-icon {
+        color: var(--icon-accent);
+      }
+    }
+
+    &.disabled {
+      border: 1px solid var(--layer-disabled);
+      .main-button,
+      .icon-button {
+        background: var(--layer-disabled) !important;
+        border: 1px solid var(--border-subtle-1) !important;
+        color: var(--text-on-disabled) !important;
+
+        > .ds-icon {
+          color: var(--icon-on-disabled) !important;
+        }
+      }
+    }
+
+    &.active,
+    &.selected,
+    &:hover {
+      background: var(--button-primary-active);
+
+      .main-button {
+        color: var(--text-on-color-light);
+      }
+
+      .icon-button {
+        > .ds-icon {
+          color: var(--icon-on-color-light);
+        }
+      }
+    }
+
+    &.large {
+      height: 48px;
+
+      .main-button {
+        @include tag-large-1;
+
+        > span {
+          padding: var(--spacing-0) var(--spacing-150);
+        }
+      }
+    }
+
+    &.medium {
+      height: 40px;
+
+      .main-button {
+        @include tag-large-1;
+
+        > span {
+          padding: var(--spacing-0) var(--spacing-150);
+        }
+      }
+    }
+
+    &.small {
+      height: 32px;
+
+      .main-button {
+        @include tag-medium-1;
+
+        > span {
+          padding: var(--spacing-0) var(--spacing-100);
+        }
+      }
+    }
+  }
+}

package/dist/basic/Icon/Icon.d.ts

@@ -0,0 +1,15 @@
+import './styles.scss';
+export declare const IconWeights: readonly ["regular", "heavy"];
+type IconWeights = (typeof IconWeights)[number];
+export declare const IconSizes: readonly ["x-large", "large", "medium", "small", "x-small"];
+export type IconSizes = (typeof IconSizes)[number];
+export type Props = JSX.IntrinsicElements['span'] & {
+    name: string;
+    className?: string;
+    size?: IconSizes;
+    weight?: IconWeights;
+    filled?: boolean;
+    disabled?: boolean;
+};
+export default function Icon({ name, className, size, weight, filled, disabled, title, onClick, onMouseDown, onMouseUp, }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/Icon/Icon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import './styles.scss';
+export const IconWeights = ['regular', 'heavy'];
+export const IconSizes = [
+    'x-large',
+    'large',
+    'medium',
+    'small',
+    'x-small',
+];
+export default function Icon({ name, className = '', size, weight = 'regular', filled = false, disabled = false, title, onClick, onMouseDown, onMouseUp, }) {
+    const getClassNames = cx('ds-icon material-symbols-outlined', className, size, weight, {
+        disabled: disabled,
+    });
+    const style = {
+        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' 24`,
+    };
+    return (_jsx("span", { className: getClassNames, style: style, onClick: (e) => onClick && !disabled && onClick(e), onMouseDown: (e) => onMouseDown && onMouseDown(e), onMouseUp: (e) => onMouseUp && onMouseUp(e), title: title, translate: "no", children: name }));
+}

package/dist/basic/Icon/IconSizes.d.ts

@@ -0,0 +1,10 @@
+import type { IconSizes } from './Icon';
+/** Pixel box matching `Icon` font-size per size class (`Icon/styles.scss`). */
+export declare const ICON_SIZE_PX: {
+    readonly 'x-large': 48;
+    readonly large: 40;
+    readonly medium: 32;
+    readonly small: 20;
+    readonly 'x-small': 16;
+};
+export declare function iconSizeToPx(size: IconSizes): number;

package/dist/basic/Icon/IconSizes.js

@@ -0,0 +1,11 @@
+/** Pixel box matching `Icon` font-size per size class (`Icon/styles.scss`). */
+export const ICON_SIZE_PX = {
+    'x-large': 48,
+    large: 40,
+    medium: 32,
+    small: 20,
+    'x-small': 16,
+};
+export function iconSizeToPx(size) {
+    return ICON_SIZE_PX[size];
+}

package/dist/basic/Icon/index.d.ts

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;

package/dist/basic/Icon/index.js

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;

package/dist/basic/Icon/styles.scss

@@ -0,0 +1,249 @@
+.ds-icon {
+  color: var(--icon-primary);
+
+  &.regular {
+    font-weight: 400;
+  }
+
+  &.heavy {
+    font-weight: 700;
+  }
+
+  &.disabled path {
+    color: var(--text-on-disabled);
+  }
+
+  &.x-large {
+    font-size: 48px;
+  }
+
+  &.large {
+    font-size: 40px;
+  }
+
+  &.medium {
+    font-size: 32px;
+  }
+
+  &.small {
+    font-size: 20px;
+  }
+
+  &.x-small {
+    font-size: 16px;
+  }
+
+  &.disabled {
+    color: var(--icon-on-disabled) !important;
+  }
+}
+
+.ds-icon-button,
+.ds-button {
+  >.ds-icon {
+    color: var(--icon-on-color-light);
+  }
+
+  &:disabled {
+    >.ds-icon {
+      color: var(--icon-on-disabled) !important;
+    }
+  }
+
+  &:disabled.outlined,
+  &:disabled.ghost {
+    >.ds-icon {
+      color: var(--icon-disabled) !important;
+    }
+  }
+
+  &:disabled.white {
+    >.ds-icon {
+      color: var(--icon-disabled) !important;
+    }
+  }
+
+  &.accent {
+    &.filled {
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-light);
+        }
+      }
+    }
+
+    &.tonal {
+      >.ds-icon {
+        color: var(--icon-on-color-dark);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-on-color-dark);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-dark);
+        }
+      }
+    }
+
+    &.outlined {
+      >.ds-icon {
+        color: var(--icon-accent);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-accent);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-accent);
+        }
+      }
+    }
+
+    &.ghost {
+      >.ds-icon {
+        color: var(--icon-on-color-dark);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-secondary);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-dark);
+        }
+      }
+    }
+  }
+
+  &.danger {
+    &.filled {
+      &:hover {
+        >svg {
+          color: var(--icon-on-color-light);
+        }
+      }
+    }
+
+    &.tonal {
+      >.ds-icon {
+        color: var(--icon-on-color-dark);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-on-color-dark);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-dark);
+        }
+      }
+    }
+
+    &.outlined {
+      >.ds-icon {
+        color: var(--icon-error);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-error);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-error);
+        }
+      }
+    }
+
+    &.ghost {
+      >.ds-icon {
+        color: var(--icon-on-color-dark);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-secondary);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-dark);
+        }
+      }
+    }
+  }
+
+  &.white {
+    &.filled {
+      >.ds-icon {
+        color: var(--icon-on-color-accent);
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-accent);
+        }
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-on-color-accent);
+        }
+      }
+    }
+
+    &.outlined {
+      >.ds-icon {
+        color: var(--icon-light-fixed);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-light-fixed);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-light-fixed);
+        }
+      }
+    }
+
+    &.ghost {
+      >svg {
+        color: var(--icon-light-fixed);
+      }
+
+      &.active {
+        >.ds-icon {
+          color: var(--icon-dark-fixed);
+        }
+      }
+
+      &:hover {
+        >.ds-icon {
+          color: var(--icon-on-color-accent);
+        }
+      }
+    }
+  }
+}

package/dist/basic/IconButton/IconButton.d.ts

@@ -0,0 +1,24 @@
+import { ButtonDSModes } from '../Button/Button';
+import { IconSizes } from '../Icon/Icon';
+import { TooltipPlacements } from '../Tooltip/Tooltip';
+import './styles.scss';
+export declare const IconButtonSizes: readonly ["large", "medium", "small", "x-small"];
+type ButtonDSSizes = (typeof IconButtonSizes)[number];
+export declare const IconButtonColors: readonly ["accent", "danger", "white"];
+type ButtonDSColors = (typeof IconButtonColors)[number];
+export type Props = JSX.IntrinsicElements['button'] & {
+    name?: string;
+    /** When set, shown instead of the Material `name` icon. Same dimensions as the icon for the current size. */
+    iconImage?: string;
+    color?: ButtonDSColors;
+    size?: ButtonDSSizes;
+    mode?: ButtonDSModes;
+    active?: boolean;
+    filledIcon?: boolean;
+    spin?: boolean;
+    tooltipPlacement?: TooltipPlacements;
+    iconSize?: IconSizes;
+    iconClassName?: string;
+};
+export default function IconButton({ name, iconImage, className, disabled, active, color, size, mode, filledIcon, title, spin, iconSize, iconClassName, tooltipPlacement, onClick, type, ...buttonProps }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/IconButton/IconButton.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+import cx from 'classnames';
+import Icon from '../Icon/Icon';
+import { iconSizeToPx } from '../Icon/IconSizes';
+import './styles.scss';
+export const IconButtonSizes = ['large', 'medium', 'small', 'x-small'];
+export const IconButtonColors = ['accent', 'danger', 'white'];
+export default function IconButton({ name, iconImage, className, disabled = false, active = false, color = 'accent', size = 'large', mode = 'filled', filledIcon, title, spin = false, iconSize, iconClassName, tooltipPlacement = 'top', onClick = () => { }, type = 'button', ...buttonProps }) {
+    const getClassNames = cx('ds-icon-button', className, size, mode, color, {
+        active: !disabled && active,
+    });
+    const getIconSize = () => {
+        if (iconSize)
+            return iconSize;
+        if (size === 'large')
+            return 'small';
+        if (size === 'medium' || size === 'small')
+            return 'x-small';
+        return 'x-small';
+    };
+    const resolvedIconSize = getIconSize();
+    const iconBoxPx = iconSizeToPx(resolvedIconSize);
+    const renderContent = () => {
+        if (spin) {
+            return (_jsx(Icon, { name: "progress_activity", size: resolvedIconSize, filled: filledIcon, className: "spin" }));
+        }
+        if (iconImage) {
+            return (_jsx("img", { src: iconImage, alt: "", className: "ds-button-icon-image", width: iconBoxPx, height: iconBoxPx }));
+        }
+        if (name) {
+            return (_jsx(Icon, { name: name, size: resolvedIconSize, filled: filledIcon, className: iconClassName }));
+        }
+        return null;
+    };
+    const renderButton = () => (_jsx("button", { type: type, disabled: disabled, className: getClassNames, onClick: onClick, ...buttonProps, children: renderContent() }));
+    return (_jsx(Tooltip, { title: title, placement: tooltipPlacement, arrow: true, slotProps: {
+            tooltip: {
+                className: 'ds-icon-button-tooltip',
+            },
+        }, children: renderButton() }));
+}

package/dist/basic/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+import IconButton from './IconButton';
+export default IconButton;

package/dist/basic/IconButton/index.js

@@ -0,0 +1,2 @@
+import IconButton from './IconButton';
+export default IconButton;