@loja-integrada/admin-components 0.9.3 → 0.9.7

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';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'danger' | 'outline' | 'onlyText';
     /**
      * Button is loading
      * */

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

@@ -3,3 +3,4 @@ import { TabsProps } from './Tabs';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: Story<TabsProps>;
+export declare const WithTabDisabled: Story<TabsProps>;

package/dist/Components/Tabs/TabsItem.d.ts

@@ -10,5 +10,5 @@ interface TabsItemProps extends TabsItemInterface {
      */
     onChange: (arg0: string) => void;
 }
-export declare const TabsItem: ({ id, title, active, onChange, }: TabsItemProps) => JSX.Element;
+export declare const TabsItem: ({ id, title, active, disabled, onChange, }: TabsItemProps) => JSX.Element;
 export {};

package/dist/Components/Tabs/TabsItem.interface.d.ts

@@ -7,6 +7,10 @@ export interface TabsItemInterface {
      * Item visible title
      */
     title: string;
+    /**
+     * Disabled a specific tab
+     */
+    disabled?: boolean;
     /**
      * Item content
      * @deprecated Not implemented

package/dist/Forms/Checkbox/Checkbox.d.ts

@@ -3,4 +3,5 @@ export declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticC
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string | React.ReactNode;
     indeterminate?: boolean;
+    boxAlign?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 }

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

@@ -581,7 +581,8 @@ var listOfStylesHover = {
   info: "hover:bg-secondary-bold",
   warning: "hover:bg-warning-dark",
   danger: "hover:bg-danger-dark",
-  outline: "hover:bg-primary-light"
+  outline: "hover:bg-primary-light",
+  onlyText: "hover:bg-base-2"
 };
 var listOfStylesActive = {
   primary: "active:bg-primary-bold",
@@ -589,13 +590,15 @@ var listOfStylesActive = {
   tertiary: "active:bg-tertiary-bold",
   warning: "active:bg-warning-bold",
   danger: "hover:bg-danger-bold",
-  outline: "active:shadow-inner active:bg-base-1"
+  outline: "active:shadow-inner active:bg-base-1",
+  onlyText: "active:bg-base-1"
 };
 var listOfStylesFocus = {
   primary: "focus:ring-1 focus:ring-primary-dark focus:ring-opacity-50",
   secondary: "focus:ring focus:ring-focus",
   danger: "focus:ring-1 focus:ring-danger-dark",
-  outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1"
+  outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1",
+  onlyText: "focus:bg-base-1"
 };
 var listOfStyles = {
   primary: "bg-primary text-base-1 " + listOfStylesHover['primary'] + " " + listOfStylesActive['primary'] + " " + listOfStylesFocus['primary'],
@@ -604,7 +607,8 @@ var listOfStyles = {
   info: "bg-secondary-dark text-base-1 " + listOfStylesHover['info'],
   warning: "bg-warning text-on-base " + listOfStylesHover['warning'] + " " + listOfStylesActive['warning'],
   danger: "bg-danger text-base-1 " + listOfStylesHover['danger'] + " " + listOfStylesActive['danger'] + " " + listOfStylesFocus['danger'],
-  outline: "bg-transparent text-inverted-2 border border-inverted-2 " + listOfStylesHover['outline'] + " " + listOfStylesActive['outline'] + " " + listOfStylesFocus['outline']
+  outline: "bg-transparent text-inverted-2 border border-inverted-2 " + listOfStylesHover['outline'] + " " + listOfStylesActive['outline'] + " " + listOfStylesFocus['outline'],
+  onlyText: "bg-transparent border-transparent text-inverted-2 px-0 " + listOfStylesHover['onlyText'] + " " + listOfStylesActive['onlyText'] + " " + listOfStylesFocus['onlyText']
 };
 var defaultDisabledStyle = "bg-base-3 cursor-default text-on-base-2 shadow-none ring-0 border-0 hover:bg-base-3 hover:text-on-base-2 ";
 var listOfStylesDisabled = {
@@ -614,7 +618,8 @@ var listOfStylesDisabled = {
   info: defaultDisabledStyle,
   warning: defaultDisabledStyle,
   danger: defaultDisabledStyle,
-  outline: defaultDisabledStyle
+  outline: defaultDisabledStyle,
+  onlyText: "bg-transparent text-on-base-3 shadow-none ring-0 border-0"
 };
 var listOfSizes = {
   small: "text-f7 h-8",
@@ -687,7 +692,7 @@ var LoadingPlaceholderComponent = function LoadingPlaceholderComponent(_ref) {
   return React__default.createElement("div", {
     className: "animate-pulse flex " + className
   }, React__default.createElement("div", {
-    className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-80 max-w-full"
+    className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-full max-w-full"
   }));
 };
 
@@ -1596,7 +1601,9 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       checked = _ref.checked,
       disabled = _ref.disabled,
       indeterminate = _ref.indeterminate,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate"]);
+      _ref$boxAlign = _ref.boxAlign,
+      boxAlign = _ref$boxAlign === void 0 ? 'center' : _ref$boxAlign,
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign"]);
 
   var inputRef = React__default.useRef(null);
   var inputId = id || name;
@@ -1609,6 +1616,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       isIndeterminate = _React$useState2[0],
       setIsIndeterminate = _React$useState2[1];
 
+  var isCenterBoxAlign = boxAlign === 'center';
   React__default.useEffect(function () {
     setIsChecked(!!checked);
     if (checked) setIsIndeterminate(false);
@@ -1627,11 +1635,18 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
   };
 
   var checkboxIconClasses = "transition duration-200 ease-in-out " + (isChecked || isIndeterminate ? 'scale-100' : 'scale-0');
-  var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "  rounded w-4 h-4 flex justify-center items-center m-px";
+  var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out\n    " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "\n    " + (isCenterBoxAlign ? 'items-center' : '') + "\n    rounded w-4 h-4 flex justify-center m-px\n  ";
   var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (disabled ? 'text-inverted-2' : '');
+  var alignOptions = {
+    start: 'items-start',
+    end: 'items-end',
+    center: 'items-center',
+    baseline: 'items-baseline',
+    stretch: 'items-stretch'
+  };
   return React__default.createElement("label", {
     htmlFor: inputId,
-    className: "inline-flex items-center cursor-pointer"
+    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"
   }, React__default.createElement("input", Object.assign({
@@ -1846,10 +1861,12 @@ var TableComponent = function TableComponent(_ref2) {
     }));
   })), React__default.createElement("tbody", Object.assign({}, getTableBodyProps(), {
     className: "text-sm text-on-base"
-  }), isLoading ? React__default.createElement("tr", null, React__default.createElement("td", {
-    colSpan: columnsLength || 1,
-    className: "" + TdClasses
-  }, React__default.createElement(TdWrapper, null, React__default.createElement(LoadingPlaceholder, null)))) : !rows || !rows.length ? React__default.createElement("tr", null, React__default.createElement("td", {
+  }), isLoading ? React__default.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
+    return React__default.createElement("td", {
+      key: key,
+      className: "" + TdClasses
+    }, React__default.createElement(TdWrapper, null, React__default.createElement(LoadingPlaceholder, null)));
+  })) : !rows || !rows.length ? React__default.createElement("tr", null, React__default.createElement("td", {
     colSpan: columnsLength || 1,
     className: "" + TdClasses
   }, React__default.createElement(TdWrapper, null, React__default.createElement("div", {
@@ -1901,19 +1918,24 @@ var activeStyles = function activeStyles(active) {
 
 
 var boldFixStyle = "before:content-[attr(data-title)] before:block before:font-semibold before:h-0 before:overflow-hidden before:visibility-hidden";
+var disabledStyle = 'text-inverted-2 cursor-not-allowed';
 var TabsItem = function TabsItem(_ref) {
   var id = _ref.id,
       title = _ref.title,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onChange = _ref.onChange;
   return React__default.createElement("button", {
-    className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2",
+    id: "btnTab" + id,
+    className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2 " + (disabled ? disabledStyle : ''),
     onClick: function onClick() {
       return onChange(id);
-    }
+    },
+    disabled: disabled
   }, React__default.createElement("span", {
-    className: "block text-f6 text-sm py-4 border-b-4 break-words group-hover:font-semibold " + activeStyles(active) + " " + boldFixStyle,
+    className: "block tracking-4 text-f6 text-sm py-4 border-b-4 break-words " + (disabled ? '' : 'group-hover:font-semibold') + " " + activeStyles(active) + " " + boldFixStyle,
     "data-title": title
   }, title));
 };
@@ -2822,6 +2844,7 @@ var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
   }, React__default.createElement("div", {
     className: "flex items-center mr-5 text-inverted-2 tracking-4 text-f6"
   }, itemsLengthOptions ? React__default.createElement(Select, {
+    id: "selectItemsPerPage",
     options: itemsLengthOptions,
     withoutStyle: true,
     "aria-label": "Itens por p\xE1gina",
@@ -2891,6 +2914,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, React__default.createElement("div", {
     className: "text-inverted-2 text-f6 tracking-4"
   }, React__default.createElement("span", {
+    id: "btnPaginationActualPage",
     className: "pagination-nav-current text-primary font-semibold",
     ref: inputEl,
     contentEditable: true,
@@ -2900,6 +2924,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     onCut: onPreventDefault,
     onPaste: onPreventDefault
   }, currentPage), ' ', "/", ' ', React__default.createElement("button", {
+    id: "btnPaginationLastPage",
     className: "pagination-nav-total focus:outline-none",
     onClick: function onClick() {
       if (currentPage !== maxTotalPages) handleChange(maxTotalPages);
@@ -2907,7 +2932,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, maxTotalPages)), React__default.createElement("div", {
     className: "text-inverted-2 ml-5 flex items-center"
   }, React__default.createElement("button", {
-    className: "pagination-nav-previous mr-3 duration-200 focus:outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
+    id: "btnPaginationPrev",
+    className: "pagination-nav-previous mr-3 duration-200 outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para p\xE1gina anterior",
     onClick: function onClick() {
       if (hasPrev) handleChange(currentPage - 1);
@@ -2917,7 +2943,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     block: true,
     size: 4
   })), React__default.createElement("button", {
-    className: "pagination-nav-next duration-200 focus:outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
+    id: "btnPaginationNext",
+    className: "pagination-nav-next duration-200 outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para pr\xF3xima p\xE1gina",
     onClick: function onClick() {
       if (hasNext) handleChange(currentPage + 1);