@loja-integrada/admin-components 0.10.0 → 0.12.2

package/dist/Components/Button/Button.d.ts

@@ -15,7 +15,7 @@ export interface ButtonProps extends ButtonAnchorProps {
     /** Button variant
      * @default primary
      * */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'danger' | 'outline' | 'onlyText';
+    variant?: 'primary' | 'secondary' | 'outlineSecondary' | 'tertiary' | 'info' | 'warning' | 'danger' | 'outline' | 'onlyText';
     /**
      * Button is loading
      * */

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

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

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

@@ -26,6 +26,7 @@ export declare const icons: {
     edit: () => JSX.Element;
     exchange: () => JSX.Element;
     eye: () => JSX.Element;
+    exclamationCircle: () => JSX.Element;
     exclamationTriangle: () => JSX.Element;
     externalLink: () => JSX.Element;
     home: () => JSX.Element;

package/dist/Indicators/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TippyProps } from '@tippyjs/react';
-export declare const Tooltip: React.MemoExoticComponent<import("styled-components").StyledComponent<(props: TooltipProps) => JSX.Element, any, {}, never>>;
+export declare const Tooltip: React.MemoExoticComponent<(props: TooltipProps) => JSX.Element>;
 export interface TooltipProps extends TippyProps {
     /** Tooltip append
      * @default 'parent'
@@ -30,4 +30,8 @@ export interface TooltipProps extends TippyProps {
      * @default false
      * */
     interactive?: TippyProps['interactive'];
+    /** Tooltip theme
+     * @default dark
+     * */
+    theme?: 'light' | 'dark';
 }

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

@@ -258,6 +258,14 @@ var Eye = function Eye() {
   });
 };
 
+var ExclamationCircle = function ExclamationCircle() {
+  return React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M9 10.5A1.25 1.25 0 1 0 9 13a1.25 1.25 0 0 0 0-2.5Zm-.303-1h.605a.5.5 0 0 0 .497-.445l.328-2.945A1 1 0 0 0 9.132 5h-.266a1 1 0 0 0-.993 1.11L8.2 9.055a.5.5 0 0 0 .497.445Zm.303 7c-4.136 0-7.5-3.364-7.5-7.5S4.864 1.5 9 1.5s7.5 3.364 7.5 7.5-3.364 7.5-7.5 7.5ZM9 0a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Z",
+    clipRule: "evenodd"
+  });
+};
+
 var ExclamationTriangle = function ExclamationTriangle() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -532,6 +540,7 @@ var icons = {
   edit: Edit,
   exchange: Exchange,
   eye: Eye,
+  exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
   home: Home,
@@ -595,6 +604,7 @@ var Icon = /*#__PURE__*/React__default.memo(function (_ref) {
 var listOfStylesHover = {
   primary: "hover:bg-primary-dark",
   secondary: "hover:bg-secondary-dark",
+  outlineSecondary: "hover:bg-primary-light",
   tertiary: "hover:bg-tertiary-dark",
   info: "hover:bg-secondary-bold",
   warning: "hover:bg-warning-dark",
@@ -605,6 +615,7 @@ var listOfStylesHover = {
 var listOfStylesActive = {
   primary: "active:bg-primary-bold",
   secondary: "active:shadow-inner",
+  outlineSecondary: "active:shadow-inner active:bg-base-1",
   tertiary: "active:bg-tertiary-bold",
   warning: "active:bg-warning-bold",
   danger: "hover:bg-danger-bold",
@@ -614,6 +625,7 @@ var listOfStylesActive = {
 var listOfStylesFocus = {
   primary: "focus:ring-1 focus:ring-primary-dark focus:ring-opacity-50",
   secondary: "focus:ring focus:ring-focus",
+  outlineSecondary: "focus:ring-2 focus:ring-focus focus:ring-offset-1",
   danger: "focus:ring-1 focus:ring-danger-dark",
   outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1",
   onlyText: "focus:bg-base-1"
@@ -621,6 +633,7 @@ var listOfStylesFocus = {
 var listOfStyles = {
   primary: "bg-primary text-base-1 " + listOfStylesHover['primary'] + " " + listOfStylesActive['primary'] + " " + listOfStylesFocus['primary'],
   secondary: "bg-secondary text-primary  " + listOfStylesHover['secondary'] + " " + listOfStylesActive['secondary'],
+  outlineSecondary: "bg-transparent text-primary border border-primary " + listOfStylesHover['outlineSecondary'] + " " + listOfStylesActive['outlineSecondary'] + " " + listOfStylesFocus['outlineSecondary'],
   tertiary: "bg-inverted-2 text-on-primary " + listOfStylesHover['tertiary'] + " " + listOfStylesActive['tertiary'],
   info: "bg-secondary-dark text-base-1 " + listOfStylesHover['info'],
   warning: "bg-warning text-on-base " + listOfStylesHover['warning'] + " " + listOfStylesActive['warning'],
@@ -632,6 +645,7 @@ var defaultDisabledStyle = "bg-base-3 cursor-default text-on-base-2 shadow-none
 var listOfStylesDisabled = {
   primary: defaultDisabledStyle,
   secondary: "bg-base-2 cursor-default text-card-stroke shadow-none ring-0 border-0 ",
+  outlineSecondary: "bg-base-2 cursor-default text-card-stroke shadow-none ring-0 border-0 ",
   tertiary: defaultDisabledStyle,
   info: defaultDisabledStyle,
   warning: defaultDisabledStyle,
@@ -652,6 +666,12 @@ var ButtonType = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   if (as === 'a' || props.href) return React__default.createElement("a", Object.assign({}, props, {
     ref: ref
   }), children);
+
+  if (!props.type) {
+    // Default to button when missing type
+    props.type = 'button';
+  }
+
   return React__default.createElement("button", Object.assign({}, props, {
     ref: ref
   }), children);
@@ -982,9 +1002,9 @@ var formatValuePatterns = {
   },
   onlyText: {
     mask: function mask(rawValue) {
-      var onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'~0-9\s]/g, '').split('');
+      var onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'˜0-9\sü]/g, '').split('');
       return onlyText.map(function () {
-        return /[a-zA-ZÀ-ú'~´`^0-9\s]/g;
+        return /[a-zA-ZÀ-ú'˜`´^0-9\sü]/g;
       });
     }
   },
@@ -1340,6 +1360,8 @@ var ToggleComponent = function ToggleComponent(_ref, ref) {
       isChecked = _React$useState[0],
       setIsChecked = _React$useState[1];
 
+  var toggleStatusText = disabled ? 'disabled' : 'enabled';
+  var toggleCheckText = isChecked ? 'checked' : 'unchecked';
   React__default.useEffect(function () {
     setIsChecked(!!checked);
   }, [checked]);
@@ -1350,9 +1372,31 @@ var ToggleComponent = function ToggleComponent(_ref, ref) {
     onChange && onChange(event);
   };
 
+  var toggleClasses = {
+    background: {
+      checked: {
+        enabled: 'bg-primary border-primary',
+        disabled: 'bg-base-3 border-card-stroke'
+      },
+      unchecked: {
+        enabled: 'bg-base-1 border-card-stroke',
+        disabled: 'bg-base-3 border-card-stroke'
+      }
+    },
+    circle: {
+      checked: {
+        enabled: 'translate-x-full ml-px bg-base-1',
+        disabled: 'translate-x-full ml-px bg-base-1'
+      },
+      unchecked: {
+        enabled: 'translate-x-0 bg-inverted-2',
+        disabled: 'translate-x-0 bg-base-1'
+      }
+    }
+  };
   var toggleContainerDisabledClasses = (disabled ? 'pointer-events-none' : '') + " relative";
-  var toggleBackgroundClasses = "block border border-card-stroke w-[53px] h-8 rounded-full\n  " + (disabled ? ' bg-base-3' : ' bg-base-1') + " ";
-  var toggleCircleClasses = "transform  " + (!isChecked ? 'translate-x-0 bg-inverted-2' : 'translate-x-full ml-px ' + (disabled ? 'bg-base-1' : 'bg-primary')) + " absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition";
+  var toggleBackgroundClasses = "block border w-[53px] h-8 rounded-full " + toggleClasses.background[toggleCheckText][toggleStatusText] + " transition";
+  var toggleCircleClasses = "transform  " + toggleClasses.circle[toggleCheckText][toggleStatusText] + " absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition";
   var toggleLabelClasses = "ml-2 text-inverted-1 text-f6 tracking-4 label";
   return React__default.createElement("label", {
     htmlFor: inputId,
@@ -1375,8 +1419,8 @@ var ToggleComponent = function ToggleComponent(_ref, ref) {
   }, label));
 };
 
-var ToggleWithFowardRef = /*#__PURE__*/React__default.forwardRef(ToggleComponent);
-var Toggle = /*#__PURE__*/React__default.memo(ToggleWithFowardRef);
+var ToggleWithForwardRef = /*#__PURE__*/React__default.forwardRef(ToggleComponent);
+var Toggle = /*#__PURE__*/React__default.memo(ToggleWithForwardRef);
 
 var sizeClasses = {
   "default": 'h-12',
@@ -1465,7 +1509,7 @@ var CustomPlaceholder = function CustomPlaceholder(props) {
 
 var CustomSingleValue = function CustomSingleValue(props, variant) {
   return React__default.createElement(SingleValue, Object.assign({}, props, {
-    className: "text-f6 tracking-4 text-inverted-2 text-sm truncate " + variantValueClasses[variant]
+    className: "text-f6 tracking-4 text-on-base text-sm truncate " + variantValueClasses[variant]
   }));
 };
 
@@ -2436,19 +2480,34 @@ var TooltipComponent = function TooltipComponent(props) {
     computedProps.content = mounted ? props.content : '';
   }
 
-  return React__default.createElement(Tippy, Object.assign({}, computedProps, {
+  return React__default.createElement(StyledTooltipComponent, Object.assign({}, computedProps, {
     appendTo: (props == null ? void 0 : props.appendTo) || 'parent',
     hideOnClick: (props == null ? void 0 : props.hideOnClick) || false,
     trigger: (props == null ? void 0 : props.trigger) || 'mouseenter',
     touch: (props == null ? void 0 : props.touch) || ['hold', 400],
     duration: (props == null ? void 0 : props.duration) || 150,
     placement: ((_window = window) == null ? void 0 : _window.innerWidth) < 1024 ? 'top' : (props == null ? void 0 : props.placement) || 'top',
-    interactive: (props == null ? void 0 : props.interactive) || false
+    interactive: (props == null ? void 0 : props.interactive) || false,
+    theme: (props == null ? void 0 : props.theme) || 'dark'
   }));
 };
 
-var styledTooltipComponent = /*#__PURE__*/styled(TooltipComponent)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --bg-color: #20221b;\n  position: relative;\n  background-color: var(--bg-color);\n  color: #fff;\n  border-radius: 3px;\n  font-size: 12px;\n  letter-spacing: -0.4px;\n  line-height: 1.4;\n  outline: 0;\n  transition-property: transform, visibility, opacity;\n\n  &[data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  &[data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  &[data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    left: 0;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    left: 0;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow:before {\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n    right: -7px;\n    transform-origin: center left;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  &[data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 15px;\n    height: 15px;\n    color: var(--bg-color);\n  }\n\n  .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 12px 8px;\n    z-index: 1;\n  }\n"])));
-var Tooltip = /*#__PURE__*/React__default.memo(styledTooltipComponent);
+var theme = {
+  light: {
+    background: '#fff',
+    color: '#371E56'
+  },
+  dark: {
+    background: '#371E56',
+    color: '#fff'
+  }
+};
+var StyledTooltipComponent = /*#__PURE__*/styled(Tippy)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --bg-color: ", ";\n  position: relative;\n  background-color: var(--bg-color);\n  color: ", ";\n  border-radius: 3px;\n  font-size: 12px;\n  letter-spacing: -0.4px;\n  line-height: 1.4;\n  outline: 0;\n  transition-property: transform, visibility, opacity;\n\n  &[data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  &[data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  &[data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    left: 0;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    left: 0;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow:before {\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n    right: -7px;\n    transform-origin: center left;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  &[data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 15px;\n    height: 15px;\n    color: var(--bg-color);\n  }\n\n  .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 12px 8px;\n    z-index: 1;\n  }\n"])), function (props) {
+  return theme[props.theme].background;
+}, function (props) {
+  return theme[props.theme].color;
+});
+var Tooltip = /*#__PURE__*/React__default.memo(TooltipComponent);
 
 var SharedContext = /*#__PURE__*/React__default.createContext({
   variant: 'default',
@@ -2770,7 +2829,8 @@ var ActionBarComponent = function ActionBarComponent(_ref) {
     if (!props.children) return;
     return React__default.createElement("button", {
       className: 'px-4 py-1 text-base-1' + (props != null && props.loading ? ' pointer-events-none' : ''),
-      onClick: props == null ? void 0 : props.onClick
+      onClick: props == null ? void 0 : props.onClick,
+      type: (props == null ? void 0 : props.type) || 'button'
     }, props != null && props.loading ? React__default.createElement(Icon, {
       icon: "loading",
       className: "p-px"