nurseitaly-components 0.0.1 → 0.0.3

package/dist/basic/ProfileDropdown/ProfileDropdown.d.ts

@@ -0,0 +1,13 @@
+import './styles.scss';
+export declare const ProfileColors: readonly ["white", "blue"];
+type ProfileColors = (typeof ProfileColors)[number];
+export type Props = {
+    src?: string;
+    className?: string;
+    color?: ProfileColors;
+    disabled?: boolean;
+    title?: string;
+    onClick?: (b: boolean) => void;
+};
+export default function ProfileDropdown({ src, className, color, disabled, title, onClick, }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/ProfileDropdown/ProfileDropdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useState } from 'react';
+import Avatar from '../Avatar';
+import Icon from '../Icon';
+import './styles.scss';
+export const ProfileColors = ['white', 'blue'];
+export default function ProfileDropdown({ src, className, color = 'white', disabled = false, title, onClick, }) {
+    const [active, setActive] = useState(false);
+    const getClassNames = cx('ds-profile-dropdown', className, color, {
+        disabled: disabled,
+    });
+    return (_jsxs("div", { className: getClassNames, onClick: () => {
+            setActive(!active);
+            onClick && onClick(!active);
+        }, children: [_jsx(Avatar, { size: "small", src: src, title: title }), _jsx(Icon, { name: "arrow_drop_down", className: "arrow" })] }));
+}

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

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

package/dist/basic/ProfileDropdown/index.js

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

package/dist/basic/ProfileDropdown/styles.scss

@@ -0,0 +1,28 @@
+.ds-profile-dropdown {
+  display: flex;
+  align-items: center;
+
+  &.disabled {
+    > .arrow {
+      color: var(--icon-disabled) !important;
+    }
+  }
+
+  &.white {
+    > .arrow {
+      color: var(--icon-light-fixed);
+    }
+  }
+
+  &.blue {
+    > .arrow {
+      color: var(--icon-accent);
+    }
+  }
+
+  &:hover.blue {
+    > .arrow {
+      color: var(--icon-accent-hover);
+    }
+  }
+}

package/dist/basic/index.d.ts

@@ -15,13 +15,14 @@ export { IconSizes } from './Icon/Icon';
 export { ICON_SIZE_PX, iconSizeToPx } from './Icon/IconSizes';
 export { default as IconButton } from './IconButton';
 export { default as Pill } from './Pill';
+export { default as ProfileDropdown } from './ProfileDropdown';
+export { ProfileColors } from './ProfileDropdown/ProfileDropdown';
 export { default as SelectField } from './SelectField';
 export { default as AsyncSelectField } from './SelectField/AsyncSelectField';
 export type { SelectItem } from './SelectField/SelectField';
 export { default as SelectMultipleField } from './SelectField/SelectMultipleField';
 export { default as Spinner } from './Spinner';
 export { default as SwitchField } from './SwitchField';
-export { default as Tabs } from './Tabs';
 export { default as Tag } from './Tag';
 export type { TagColors } from './Tag/Tag';
 export { default as TextField } from './TextField';

package/dist/basic/index.js

@@ -14,12 +14,13 @@ export { IconSizes } from './Icon/Icon';
 export { ICON_SIZE_PX, iconSizeToPx } from './Icon/IconSizes';
 export { default as IconButton } from './IconButton';
 export { default as Pill } from './Pill';
+export { default as ProfileDropdown } from './ProfileDropdown';
+export { ProfileColors } from './ProfileDropdown/ProfileDropdown';
 export { default as SelectField } from './SelectField';
 export { default as AsyncSelectField } from './SelectField/AsyncSelectField';
 export { default as SelectMultipleField } from './SelectField/SelectMultipleField';
 export { default as Spinner } from './Spinner';
 export { default as SwitchField } from './SwitchField';
-export { default as Tabs } from './Tabs';
 export { default as Tag } from './Tag';
 export { default as TextField } from './TextField';
 export { default as Tooltip } from './Tooltip';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nurseitaly-components",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/dist/basic/Tabs/Tabs.d.ts

@@ -1,17 +0,0 @@
-import './styles.scss';
-export type TabItem = {
-    label: string | React.ReactElement;
-    value: string;
-    active?: boolean;
-    disabled?: boolean;
-};
-export declare const TabsColors: readonly ["white", "blue"];
-type TabsColors = (typeof TabsColors)[number];
-export type Props = {
-    items: TabItem[];
-    onSelect: (value: TabItem) => void;
-    className?: string;
-    color?: TabsColors;
-};
-export default function Tabs({ className, items, onSelect, color, }: Props): import("react").JSX.Element;
-export {};

package/dist/basic/Tabs/Tabs.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import cx from 'classnames';
-import './styles.scss';
-export const TabsColors = ['white', 'blue'];
-export default function Tabs({ className, items, onSelect, color = 'white', }) {
-    const getClassNames = cx('ds-tabs', className, color);
-    const getClassNamesTab = (item) => cx('ds-tab', { disabled: item.disabled, active: item.active });
-    return (_jsx("div", { className: getClassNames, children: items.map((item, idx) => (_jsx("div", { className: getClassNamesTab(item), onClick: () => onSelect(item), children: item.label }, idx.valueOf()))) }));
-}

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

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

package/dist/basic/Tabs/index.js

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

package/dist/basic/Tabs/styles.scss

@@ -1,51 +0,0 @@
-.ds-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-200);
-
-  .ds-tab {
-    @include label-large-1;
-    display: flex;
-    align-items: center;
-    height: 48px;
-    cursor: pointer;
-
-    &.disabled {
-      font-weight: 400 !important;
-      color: var(--text-disabled) !important;
-    }
-
-    &.active {
-      @include label-large-2;
-      border-bottom: 2.5px solid var(--border-hover);
-    }
-
-    &:hover {
-      @include label-large-2;
-      color: var(--text-accent-hover);
-    }
-  }
-
-  &.white {
-    .ds-tab {
-      color: var(--icon-light-fixed);
-      &.active {
-        border-bottom: 2.5px solid var(--border-subtle-4);
-      }
-    }
-  }
-
-  &.blue {
-    .ds-tab {
-      color: var(--text-primary);
-      &.active {
-        border-bottom: 2.5px solid var(--border-hover);
-      }
-
-      &:hover,
-      &.active {
-        color: var(--icon-accent-hover);
-      }
-    }
-  }
-}