@loja-integrada/admin-components 0.15.5 → 0.16.2

package/dist/Components/SidebarFixed/SidebarFixed.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const SidebarFixedComponent: React.FC<SidebarFixedProps>;
+export declare const SidebarFixed: React.NamedExoticComponent<SidebarFixedProps>;
+export interface SidebarFixedProps {
+    /**
+     * React children
+     * Also support render prop
+     */
+    children?: React.ReactNode | ((props: SidebarFixedProps) => React.ReactNode);
+    /**
+     * Bottom actions
+     */
+    footerActions?: React.ReactNode;
+    /** Sidebar is open
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Call when sidebar is closed
+     * */
+    onClose?: Function;
+    /**
+     * Help external link
+     */
+    helpLink?: string;
+}

package/dist/Components/SidebarFixed/SidebarFixed.spec.d.ts

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

package/dist/Components/SidebarFixed/SidebarFixed.stories.d.ts

@@ -0,0 +1,4 @@
+import { SidebarFixedProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SidebarFixedProps>;

package/dist/Components/SidebarFixed/index.d.ts

@@ -0,0 +1 @@
+export * from './SidebarFixed';

package/dist/Components/index.d.ts

@@ -5,3 +5,4 @@ export * from './TableList';
 export * from './Tabs';
 export * from './Timeline';
 export * from './Modal';
+export * from './SidebarFixed';

package/dist/Forms/InputMask/InputMask.stories.d.ts

@@ -5,6 +5,13 @@ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("
 export declare const Date: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
 export declare const OnlyNumbers: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
 export declare const OnlyText: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const ZipCode: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const Nfe: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const Phone: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const Cellphone: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const PhoneOrCellphone: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const CPF: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
+export declare const CNPJ: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
 export declare const DateWithStartAdornment: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
 export declare const DateWithEndAdornment: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;
 export declare const DateWithEndAdornmentError: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputMaskProps>;

package/dist/Forms/InputMask/utils.d.ts

@@ -21,5 +21,45 @@ export declare const formatValuePatterns: {
         };
         keepCharPositions: boolean;
         inputMode: string;
+        placeholder: string;
+    };
+    zipCode: {
+        mask: (string | RegExp)[];
+        keepCharPositions: boolean;
+        inputMode: string;
+        placeholder: string;
+    };
+    nfe: {
+        mask: () => (string | RegExp)[];
+        keepCharPositions: boolean;
+        inputMode: string;
+        placeholder: string;
+    };
+    phone: {
+        mask: (string | RegExp)[];
+        inputMode: string;
+        placeholder: string;
+    };
+    cellphone: {
+        mask: (string | RegExp)[];
+        inputMode: string;
+        placeholder: string;
+    };
+    phoneOrCellphone: {
+        mask: (rawValue: any) => (string | RegExp)[];
+        inputMode: string;
+        placeholder: string;
+    };
+    cpf: {
+        mask: (string | RegExp)[];
+        keepCharPositions: boolean;
+        inputMode: string;
+        placeholder: string;
+    };
+    cnpj: {
+        mask: (string | RegExp)[];
+        keepCharPositions: boolean;
+        inputMode: string;
+        placeholder: string;
     };
 };

package/dist/Icons/icons-path/Adjust.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Adjust: () => JSX.Element;

package/dist/Icons/icons-path/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const icons: {
+    adjust: () => JSX.Element;
     angleLeft: () => JSX.Element;
     angleRight: () => JSX.Element;
     angleDiagonal: () => JSX.Element;

package/dist/Indicators/Tag/Tag.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+declare const TagTypes: {
+    neutral: string;
+    primary: string;
+    danger: string;
+    success: string;
+    warning: string;
+};
+export declare const Tag: React.MemoExoticComponent<({ type, content, fullWidth, className, action, }: TagProps) => JSX.Element>;
+export interface TagProps {
+    /** Tag color
+     * @default neutral
+     * */
+    type?: keyof typeof TagTypes;
+    /**
+     * Tag content
+     * */
+    content: string | React.ReactNode;
+    /**
+     * Enlarge width of the Tag
+     * */
+    fullWidth?: boolean;
+    /** Adittional classes for Tag
+     * @default ''
+     * */
+    className?: string;
+    /**
+     * Action for the tag, like an button or icon
+     * */
+    action: React.ReactNode;
+}
+export {};

package/dist/Indicators/Tag/Tag.spec.d.ts

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

package/dist/Indicators/Tag/Tag.stories.d.ts

@@ -0,0 +1,5 @@
+import { TagProps } from './Tag';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TagProps>;
+export declare const WithAction: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TagProps>;

package/dist/Indicators/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/dist/Indicators/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Alert';
 export * from './Status';
+export * from './Tag';
 export * from './Toast';
 export * from './Badge';
 export * from './Tooltip';

package/dist/admin-components.cjs.development.js

@@ -74,6 +74,18 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+var Adjust = function Adjust() {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.25 5c0-.9665.7835-1.75 1.75-1.75h2c.9665 0 1.75.7835 1.75 1.75v2c0 .9665-.7835 1.75-1.75 1.75H4c-.9665 0-1.75-.7835-1.75-1.75V5ZM4 4.75c-.13807 0-.25.11193-.25.25v2c0 .13807.11193.25.25.25h2c.13807 0 .25-.11193.25-.25V5c0-.13807-.11193-.25-.25-.25H4ZM10.25 11c0-.9665.7835-1.75 1.75-1.75h2c.9665 0 1.75.7835 1.75 1.75v2c0 .9665-.7835 1.75-1.75 1.75h-2c-.9665 0-1.75-.7835-1.75-1.75v-2Zm1.75-.25c-.1381 0-.25.1119-.25.25v2c0 .1381.1119.25.25.25h2c.1381 0 .25-.1119.25-.25v-2c0-.1381-.1119-.25-.25-.25h-2Z"
+  }), React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.74951 4V.5h-1.5V4h1.5Zm0 4h-1.5v9.5h1.5V8ZM13.7495 10V.5h-1.5V10h1.5Zm0 4h-1.5v3.5h1.5V14Z"
+  }));
+};
+
 var AngleLeft = function AngleLeft() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -554,6 +566,7 @@ var User = function User() {
 };
 
 var icons = {
+  adjust: Adjust,
   angleLeft: AngleLeft,
   angleRight: AngleRight,
   angleDiagonal: AngleDiagonal,
@@ -699,7 +712,7 @@ var listOfStylesDisabled = {
   onlyText: "bg-transparent text-on-base-3 shadow-none ring-0 border-0"
 };
 var listOfSizes = {
-  small: "text-f7 h-8",
+  small: "text-f6 h-10",
   "default": "text-f6 h-12",
   large: "text-f5 h-14"
 };
@@ -831,7 +844,7 @@ var prefixClasses = adornmentClasses + " rounded-l left-0";
 var sufixClasses = adornmentClasses + " rounded-r right-0";
 var variantClasses = {
   "default": 'h-12',
-  small: 'h-8',
+  small: 'h-10',
   large: 'h-14',
   xlarge: 'h-24'
 };
@@ -1024,6 +1037,8 @@ function createAutoCorrectedDatePipe(dateFormat, _temp) {
   };
 }
 
+/* docs: https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md */
+
 var formatValuePatterns = {
   "default": {},
   onlyNumber: {
@@ -1063,7 +1078,60 @@ var formatValuePatterns = {
     mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
     pipe: /*#__PURE__*/createAutoCorrectedDatePipe('dd/mm/yyyy'),
     keepCharPositions: true,
-    inputMode: 'numeric'
+    inputMode: 'decimal',
+    placeholder: '__/__/____'
+  },
+  zipCode: {
+    mask: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
+    keepCharPositions: true,
+    inputMode: 'decimal',
+    placeholder: '_____-___'
+  },
+  nfe: {
+    mask: function mask() {
+      var maxLength = 44;
+      var mask = [];
+
+      for (var i = 1; i <= maxLength; i++) {
+        mask.push(/\d/);
+        if (i % 4 === 0 && i !== maxLength) mask.push(' ');
+      }
+
+      return mask;
+    },
+    keepCharPositions: true,
+    inputMode: 'decimal',
+    placeholder: '____ ____ ____ ____ ____ ____ ____ ____ ____ ____ ____'
+  },
+  phone: {
+    mask: ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    inputMode: 'decimal',
+    placeholder: '(__) ____-____'
+  },
+  cellphone: {
+    mask: ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    inputMode: 'decimal',
+    placeholder: '(__) _____-____'
+  },
+  phoneOrCellphone: {
+    mask: function mask(rawValue) {
+      var cleanedText = rawValue.replace(/[^\d]/g, '');
+      if (cleanedText.length > 10) return formatValuePatterns.cellphone.mask;else return formatValuePatterns.phone.mask;
+    },
+    inputMode: 'decimal',
+    placeholder: '(__) _____-____'
+  },
+  cpf: {
+    mask: [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/],
+    keepCharPositions: true,
+    inputMode: 'decimal',
+    placeholder: '___.___.___-__'
+  },
+  cnpj: {
+    mask: [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/],
+    keepCharPositions: true,
+    inputMode: 'decimal',
+    placeholder: '___.___.___-__'
   }
 };
 
@@ -1081,7 +1149,7 @@ function InputMaskComponent(_ref, inputRef) {
 
   var formatValueProps = formatValuePatterns[formatValue] || {};
 
-  var mergedProps = _extends({}, props, formatValueProps);
+  var mergedProps = _extends({}, formatValueProps, props);
 
   if (!mergedProps.mask) {
     mergedProps.mask = false;
@@ -1776,11 +1844,12 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
     htmlFor: inputId,
     className: "inline-flex " + alignOptions[boxAlign] + " cursor-pointer"
   }, React__default.createElement("span", {
-    className: "rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
+    className: "relative rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
   }, React__default.createElement("input", Object.assign({
     ref: ref || inputRef,
     type: "checkbox",
     id: inputId,
+    name: name,
     className: "opacity-0 absolute h-4 w-4 z-50 cursor-pointer",
     checked: isChecked,
     onChange: handleChange,
@@ -2477,6 +2546,61 @@ var ModalComponent = function ModalComponent(_ref) {
 
 var Modal = /*#__PURE__*/React__default.memo(ModalComponent);
 
+var backgroundShadowEffect = ['[background:linear-gradient(#FFFFFF_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),#FFFFFF_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]', '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]', '[background-attachment:local,local,scroll,scroll]', '[background-repeat:no-repeat]', '[background-color:#FFFFFF]', '[&_.form-group_.bg-base-1]:bg-transparent'];
+var SidebarFixedComponent = function SidebarFixedComponent(_ref) {
+  var children = _ref.children,
+      footerActions = _ref.footerActions,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      onClose = _ref.onClose,
+      helpLink = _ref.helpLink;
+
+  var _useState = React.useState(false),
+      sidebarIsOpen = _useState[0],
+      setSidebarIsOpen = _useState[1];
+
+  React.useEffect(function () {
+    setSidebarIsOpen(isOpen);
+  }, [isOpen]);
+
+  var handleRequestCloseFunc = function handleRequestCloseFunc() {
+    setSidebarIsOpen(false);
+    onClose == null ? void 0 : onClose();
+  };
+
+  return React__default.createElement("div", {
+    className: "sidebar-fixed fixed z-40 lg:z-20 right-0 bottom-0 w-full h-full transition-all overflow-x-hidden " + (sidebarIsOpen ? 'pointer-events-auto opacity-100' : 'opacity-0 pointer-events-none')
+  }, React__default.createElement("div", {
+    className: "sidebar-fixed-backdrop fixed inset-0 h-full w-full bg-black-alpha -z-1",
+    onClick: handleRequestCloseFunc
+  }), React__default.createElement("div", {
+    className: "sidebar-fixed-inner mt-10 sm:mt-0 top-0 bottom-0 right-0 absolute flex flex-col justify-between bg-base-1 transform transition-transform shadow h-auto w-full sm:max-w-[410px] sm:ml-16 rounded-t-lg sm:rounded-none " + (sidebarIsOpen ? 'translate-x-0' : 'translate-x-10')
+  }, React__default.createElement("div", {
+    className: "sidebar-fixed-header flex justify-between items-center p-3 lg:px-5 text-inverted-2"
+  }, React__default.createElement("button", {
+    className: "sidebar-fixed-close p-2 hover:text-primary transition-colors",
+    onClick: handleRequestCloseFunc
+  }, React__default.createElement(Icon, {
+    icon: "close",
+    block: true,
+    size: 4
+  })), helpLink && React__default.createElement("a", {
+    className: "sidebar-fixed-help p-2 hover:text-primary transition-colors",
+    href: helpLink,
+    target: "_blank",
+    rel: "noreferrer"
+  }, React__default.createElement(Icon, {
+    icon: "questionCircle",
+    block: true,
+    size: 4
+  }))), React__default.createElement("div", {
+    className: "sidebar-fixed-content flex-1 flex-grow w-full overflow-auto overscroll-none px-5 lg:px-7 break-words " + backgroundShadowEffect.join(' ')
+  }, children), footerActions && React__default.createElement("div", {
+    className: "sidebar-fixed-footer flex justify-between items-center p-5 lg:p-7 lg:pt-6"
+  }, footerActions)));
+};
+var SidebarFixed = /*#__PURE__*/React__default.memo(SidebarFixedComponent);
+
 var alertTypes = {
   success: {
     "class": 'bg-success-light border-success',
@@ -2606,6 +2730,34 @@ var StatusComponent = function StatusComponent(_ref2) {
 
 var Status = /*#__PURE__*/React__default.memo(StatusComponent);
 
+var TagTypes = {
+  neutral: 'bg-base-1 border-inverted-2',
+  primary: 'bg-primary-light border-primary',
+  danger: 'bg-danger-light border-danger',
+  success: 'bg-success-light border-success',
+  warning: 'bg-warning-light border-warning'
+};
+
+var TagComponent = function TagComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'neutral' : _ref$type,
+      content = _ref.content,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      action = _ref.action;
+  return React__default.createElement("div", {
+    className: "tag " + (fullWidth ? 'flex' : 'inline-flex') + " items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold " + TagTypes[type] + " " + className
+  }, React__default.createElement("div", {
+    className: "min-w-0 break-words -my-px"
+  }, content), action && React__default.createElement("div", {
+    className: "-my-px ml-3"
+  }, action));
+};
+
+var Tag = /*#__PURE__*/React__default.memo(TagComponent);
+
 var contextClass = {
   success: 'bg-primary-light border-primary-dark',
   error: 'bg-danger-light border-danger-dark',
@@ -3390,6 +3542,8 @@ exports.Pagination = Pagination;
 exports.Select = Select;
 exports.SelectComponent = SelectComponent;
 exports.Sidebar = Sidebar;
+exports.SidebarFixed = SidebarFixed;
+exports.SidebarFixedComponent = SidebarFixedComponent;
 exports.SidebarItem = SidebarItem;
 exports.SidebarSubItem = SidebarSubItem;
 exports.Status = Status;
@@ -3398,6 +3552,7 @@ exports.TableList = TableList;
 exports.TableListItem = TableListItem;
 exports.TableListItemLoading = TableListItemLoading;
 exports.Tabs = Tabs;
+exports.Tag = Tag;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.Toggle = Toggle;