venice-ui 1.0.37 → 1.0.38

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -56,15 +56,15 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme_1
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [open]);
-    return (react_1.default.createElement(DropdownMenu_styles_1.SubMenuElement, null,
+    return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
         react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: (0, common_1.setIconSize)(size), active: open }),
         open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },
             react_1.default.createElement(Aligment_1.Aligment, { hPadding: Theme_1.Theme.padding.m, direction: "column" },
-                header && (react_1.default.createElement(DropdownMenu_styles_1.UserMenuHeader, null,
-                    headerTitle && react_1.default.createElement(Typography_1.TextAccent, null, headerTitle),
-                    headerSubtitle && react_1.default.createElement(Typography_1.TextLabel, null, headerSubtitle))),
-                react_1.default.createElement(DropdownMenu_styles_1.UserMenuContent, null, options &&
-                    options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.PanelOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
-                footer && (react_1.default.createElement(DropdownMenu_styles_1.UserMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
+                header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
+                    headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
+                    headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
+                react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
+                    options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
+                footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
 };
 exports.DropdownMenu = DropdownMenu;

package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js

@@ -3,30 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanelOption = exports.UserMenuContent = exports.UserMenuFooter = exports.UserMenuHeader = exports.SubMenuElement = void 0;
+exports.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
 const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
-exports.SubMenuElement = styled_components_1.default.div `
+exports.DropdownMenuElement = styled_components_1.default.div `
   position:relative;
   width:auto;
   display: flex;
   box-sizing: border-box;
 `;
-exports.UserMenuHeader = styled_components_1.default.div `
+exports.DropdownMenuHeader = styled_components_1.default.div `
   border-bottom: 1px solid  ${Theme_1.Theme.colors.gray_2};
   padding-bottom: ${Theme_1.Theme.padding.m};
   width:100%;
 `;
-exports.UserMenuFooter = styled_components_1.default.div `
+exports.DropdownMenuFooter = styled_components_1.default.div `
   border-top: 1px solid  ${Theme_1.Theme.colors.gray_2};
   padding-top: ${Theme_1.Theme.padding.m};
   width:100%;
 `;
-exports.UserMenuContent = styled_components_1.default.div `
+exports.DropdownMenuContent = styled_components_1.default.div `
   width:100%;
 `;
-exports.PanelOption = styled_components_1.default.div `
+exports.DropdownMenuOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} 0;
   cursor: pointer;
   white-space: nowrap;

package/dist/cjs/components/Icons/IconsPath.js

@@ -22,5 +22,8 @@ exports.iconsPath = {
     download: "M6 20q-.825 0-1.412-.587Q4 18.825 4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413Q18.825 20 18 20Zm6-4-5-5 1.4-1.45 2.6 2.6V4h2v8.15l2.6-2.6L17 11Z",
     delete: "M7 21q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM9 17h2V8H9Zm4 0h2V8h-2ZM7 6v13Z",
     close: "M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z",
-    person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z"
+    person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z",
+    check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
+    check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
+    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"
 };

package/dist/cjs/components/Icons/IconsShows.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconsShows = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("./Icon");
+const IconsPath_1 = require("./IconsPath");
+const example_1 = require("../../example");
+const IconsShows = () => {
+    return (react_1.default.createElement(Aligment_1.Aligment, { gap: 5 },
+        react_1.default.createElement(react_1.default.Fragment, null, Object.keys(IconsPath_1.iconsPath).map((iconPath) => (react_1.default.createElement(example_1.IconsShowroom, null,
+            react_1.default.createElement(Icon_1.Icon, { name: iconPath, size: 48 }),
+            iconPath))))));
+};
+exports.IconsShows = IconsShows;

package/dist/cjs/components/Icons/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
+exports.iconsPath = exports.Icon = void 0;
 var Icon_1 = require("./Icon");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var IconsPath_1 = require("./IconsPath");
+Object.defineProperty(exports, "iconsPath", { enumerable: true, get: function () { return IconsPath_1.iconsPath; } });

package/dist/cjs/example/ExampleComponent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleItem = exports.ExampleArea = exports.ExampleAreaTitle = exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
+exports.IconsShowroom = exports.ExampleItem = exports.ExampleArea = exports.ExampleAreaTitle = exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../Theme/Theme");
 exports.StoryWrapper = styled_components_1.default.div `
@@ -53,3 +53,11 @@ exports.ExampleItem = styled_components_1.default.div `
   display:flex;
   max-width:300px;
 `;
+exports.IconsShowroom = styled_components_1.default.div `
+  display: flex;
+  flex-direction:column;
+  padding:10px;
+  border:1px solid #f3f3f3;
+  font-size: 12px;
+  text-align:center;
+`;

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -2,7 +2,7 @@ import { Panel, setIconSize } from '../common';
 import React, { useState, useRef, useEffect } from 'react';
 import { Theme } from '../../Theme';
 import { Icon } from '../Icons';
-import { PanelOption, SubMenuElement, UserMenuContent, UserMenuFooter, UserMenuHeader, } from './DropdownMenu.styles';
+import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
 import { Aligment } from '../Aligment';
 import { TextAccent, TextLabel, Text } from '../Typography';
 export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color = Theme.colors.primary, iconBackgroundColor = false, header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, }) => {
@@ -30,14 +30,14 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', color =
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [open]);
-    return (React.createElement(SubMenuElement, null,
+    return (React.createElement(DropdownMenuElement, null,
         React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: color, bgColor: iconBackgroundColor, size: setIconSize(size), active: open }),
         open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },
             React.createElement(Aligment, { hPadding: Theme.padding.m, direction: "column" },
-                header && (React.createElement(UserMenuHeader, null,
-                    headerTitle && React.createElement(TextAccent, null, headerTitle),
-                    headerSubtitle && React.createElement(TextLabel, null, headerSubtitle))),
-                React.createElement(UserMenuContent, null, options &&
-                    options.map((option) => (React.createElement(PanelOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
-                footer && (React.createElement(UserMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
+                header && (React.createElement(DropdownMenuHeader, null,
+                    headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
+                    headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
+                React.createElement(DropdownMenuContent, null, options &&
+                    options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
+                footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
 };

package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js

@@ -1,26 +1,26 @@
 import { lighten } from "polished";
 import styled from "styled-components";
 import { Theme } from "../../Theme";
-export const SubMenuElement = styled.div `
+export const DropdownMenuElement = styled.div `
   position:relative;
   width:auto;
   display: flex;
   box-sizing: border-box;
 `;
-export const UserMenuHeader = styled.div `
+export const DropdownMenuHeader = styled.div `
   border-bottom: 1px solid  ${Theme.colors.gray_2};
   padding-bottom: ${Theme.padding.m};
   width:100%;
 `;
-export const UserMenuFooter = styled.div `
+export const DropdownMenuFooter = styled.div `
   border-top: 1px solid  ${Theme.colors.gray_2};
   padding-top: ${Theme.padding.m};
   width:100%;
 `;
-export const UserMenuContent = styled.div `
+export const DropdownMenuContent = styled.div `
   width:100%;
 `;
-export const PanelOption = styled.div `
+export const DropdownMenuOption = styled.div `
   padding: ${Theme.padding.s} 0;
   cursor: pointer;
   white-space: nowrap;

package/dist/esm/components/Icons/IconsPath.js

@@ -19,5 +19,8 @@ export const iconsPath = {
     download: "M6 20q-.825 0-1.412-.587Q4 18.825 4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413Q18.825 20 18 20Zm6-4-5-5 1.4-1.45 2.6 2.6V4h2v8.15l2.6-2.6L17 11Z",
     delete: "M7 21q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM9 17h2V8H9Zm4 0h2V8h-2ZM7 6v13Z",
     close: "M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z",
-    person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z"
+    person: "M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z",
+    check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
+    check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
+    check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"
 };

package/dist/esm/components/Icons/IconsShows.js

@@ -0,0 +1,11 @@
+import { Aligment } from '../Aligment';
+import React from 'react';
+import { Icon } from './Icon';
+import { iconsPath } from './IconsPath';
+import { IconsShowroom } from '../../example';
+export const IconsShows = () => {
+    return (React.createElement(Aligment, { gap: 5 },
+        React.createElement(React.Fragment, null, Object.keys(iconsPath).map((iconPath) => (React.createElement(IconsShowroom, null,
+            React.createElement(Icon, { name: iconPath, size: 48 }),
+            iconPath))))));
+};

package/dist/esm/components/Icons/index.js

@@ -1 +1,2 @@
 export { Icon } from './Icon';
+export { iconsPath } from './IconsPath';

package/dist/esm/example/ExampleComponent.js

@@ -47,3 +47,11 @@ export const ExampleItem = styled.div `
   display:flex;
   max-width:300px;
 `;
+export const IconsShowroom = styled.div `
+  display: flex;
+  flex-direction:column;
+  padding:10px;
+  border:1px solid #f3f3f3;
+  font-size: 12px;
+  text-align:center;
+`;

package/dist/types/components/DropdownMenu/DropdownMenu.styles.d.ts

@@ -1,9 +1,9 @@
-export declare const SubMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UserMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UserMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UserMenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IPanelOptionStyle {
     onClick?: any;
 }
-export declare const PanelOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
+export declare const DropdownMenuOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
 export {};

package/dist/types/components/Icons/IconsPath.d.ts

@@ -20,4 +20,7 @@ export declare const iconsPath: {
     delete: string;
     close: string;
     person: string;
+    check_circle: string;
+    check_box: string;
+    check: string;
 };

package/dist/types/components/Icons/IconsShows.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const IconsShows: FC;

package/dist/types/components/Icons/index.d.ts

@@ -1 +1,2 @@
 export { Icon } from './Icon';
+export { iconsPath } from './IconsPath';

package/dist/types/example/ExampleComponent.d.ts

@@ -16,4 +16,5 @@ export declare const ExampleTableHeader: import("styled-components").StyledCompo
 export declare const ExampleAreaTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExampleArea: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExampleItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconsShowroom: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",