@pedidopago/ui 1.1.2 → 1.1.3

package/dist/components/Tabs/styles.js

@@ -17,21 +17,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var TabsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n"])));
+var TabsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  > div[role='tablist'] {\n    width: ", ";\n    border-bottom: 2px solid\n      ", ";\n  }\n"])), function (_ref) {
+  var fullWidth = _ref.fullWidth;
+  return fullWidth ? '100%' : 'fit-content';
+}, function (props) {
+  return {
+    light: props.theme.colors.neutral.neutral1,
+    dark: props.theme.colors.neutral.neutral6
+  }[props.theme.colorMode];
+});
 
 exports.TabsContainer = TabsContainer;
 
-var TabButton = _styled.default.button(function (_ref) {
-  var fullWidth = _ref.fullWidth,
-      theme = _ref.theme,
-      active = _ref.active,
-      textColor = _ref.textColor,
-      disabled = _ref.disabled,
-      indicatorColor = _ref.indicatorColor;
+var TabButton = _styled.default.button(function (_ref2) {
+  var squeeze = _ref2.squeeze,
+      theme = _ref2.theme,
+      active = _ref2.active,
+      textColor = _ref2.textColor,
+      disabled = _ref2.disabled,
+      indicatorColor = _ref2.indicatorColor;
   var colorProps = (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme));
   var grayColor = colorProps.neutral2;
   var whiteColor = colorProps.neutral1;
-  return "\n  display: flex;\n  ".concat(fullWidth && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 3rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)") : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  border-bottom: 2px solid ").concat(active && !disabled ? (0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme) : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, ").concat(grayColor[2], "%)"), ";\n\n  border-bottom: 2px solid ").concat(disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, ").concat(grayColor[2], "%)"), ";\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, 88%)"), ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n    \n    border-bottom: 2px solid ").concat(disabled ? theme.colors.neutral.neutral1 : (0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme), ";\n    border-bottom: 2px solid ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral2, ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
+  return "\n  display: flex;\n  ".concat(squeeze && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 2rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)") : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, 88%)"), ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
 });
 
 exports.TabButton = TabButton;
@@ -44,29 +52,29 @@ var TabPanelWrapper = _styled.default.div(_templateObject3 || (_templateObject3
 
 exports.TabPanelWrapper = TabPanelWrapper;
 
-var TabLoadingSkeleton = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 58px;\n  height: 14px;\n  border-radius: 4px;\n  overflow: hidden;\n  background: ", ";\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.neutral.neutral1;
-}, function (_ref3) {
+var TabLoadingSkeleton = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 58px;\n  height: 14px;\n  border-radius: 4px;\n  overflow: hidden;\n  background: ", ";\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
+  return theme.colors.neutral.neutral1;
+}, function (_ref4) {
+  var theme = _ref4.theme;
   return theme.colors.neutral.neutral2;
 });
 
 exports.TabLoadingSkeleton = TabLoadingSkeleton;
 
-var TabPanelContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (_ref4) {
-  var hidden = _ref4.hidden;
+var TabPanelContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (_ref5) {
+  var hidden = _ref5.hidden;
   return hidden ? 'none' : 'block';
 });
 
 exports.TabPanelContainer = TabPanelContainer;
 
-var TabIndicator = _styled.default.div(function (_ref5) {
-  var indicatorWidth = _ref5.indicatorWidth,
-      indicatorLeft = _ref5.indicatorLeft,
-      theme = _ref5.theme,
-      indicatorColor = _ref5.indicatorColor,
-      isLoading = _ref5.isLoading;
+var TabIndicator = _styled.default.div(function (_ref6) {
+  var indicatorWidth = _ref6.indicatorWidth,
+      indicatorLeft = _ref6.indicatorLeft,
+      theme = _ref6.theme,
+      indicatorColor = _ref6.indicatorColor,
+      isLoading = _ref6.isLoading;
   return "\n    display: block;\n    position: absolute;\n    margin-top: -2px;\n    height: 2px;\n    width: ".concat(indicatorWidth, "px;\n    left: ").concat(indicatorLeft, "px;\n    background: ").concat(isLoading ? theme.colors.neutral.neutral1 : (0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme), ";\n    animation-name: indicator;\n    animation-duration: .5s;\n    transition: 0.3s all;\n  ");
 });
 

package/dist/components/Tabs/tabs.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=tabs.test.d.ts.map

package/dist/components/Tabs/types.d.ts

@@ -1,49 +1,50 @@
-import { HTMLAttributes, ReactNode, MouseEvent, RefObject } from 'react';
-import { GlobalColorsProps, ExtendThemeProps } from '../../shared/theme/theme.types';
-export declare type ITabsProps = HTMLAttributes<HTMLDivElement> & {
-    value: string | number;
-    onChangeTab: (value: number) => void;
-    direction?: 'row' | 'column';
-    centered?: boolean;
-    fullWidth?: boolean;
-    indicatorColor?: GlobalColorsProps | (string & {});
-    textColor?: GlobalColorsProps | (string & {});
-    isLoading?: boolean;
-};
-export declare type ITabsContextProps = {
-    activeTab: number;
-    indicatorWidth: number;
-    indicatorLeft: number;
-    changeTab: (event: MouseEvent<HTMLButtonElement>, value: number) => void;
-    activeTabRef?: RefObject<HTMLButtonElement>;
-    fullWidth?: boolean;
-    indicatorColor?: GlobalColorsProps | (string & {});
-    textColor?: GlobalColorsProps | (string & {});
-    isLoading?: boolean;
-};
-export declare type ITabProps = HTMLAttributes<HTMLButtonElement> & {
-    label: string;
-    value: string | number;
-    icon?: ReactNode;
-    iconPosition?: 'left' | 'right';
-    disabled?: boolean;
-};
-export declare type ITabPanelProps = HTMLAttributes<HTMLDivElement> & {
-    value: string | number;
-    index: string | number;
-};
-export declare type GenericThemeProps = {
-    theme?: ExtendThemeProps;
-    indicatorColor?: GlobalColorsProps | (string & {});
-};
-export declare type ITabButtonProps = GenericThemeProps & HTMLAttributes<HTMLButtonElement> & {
-    active: boolean;
-    fullWidth?: boolean;
-    indicatorColor?: GlobalColorsProps | (string & {});
-    textColor?: GlobalColorsProps | (string & {});
-};
-export declare type TabIndicatorProps = {
-    indicatorWidth?: number;
-    indicatorLeft?: number;
-};
+import { HTMLAttributes, ReactNode, MouseEvent, RefObject } from 'react';
+import { GlobalColorsProps, ExtendThemeProps } from '../../shared/theme/theme.types';
+export declare type ITabsProps = HTMLAttributes<HTMLDivElement> & {
+    value: string | number;
+    onChangeTab: (value: number) => void;
+    direction?: 'row' | 'column';
+    centered?: boolean;
+    squeeze?: boolean;
+    fullWidth?: boolean;
+    indicatorColor?: GlobalColorsProps | (string & {});
+    textColor?: GlobalColorsProps | (string & {});
+    isLoading?: boolean;
+};
+export declare type ITabsContextProps = {
+    activeTab: number;
+    indicatorWidth: number;
+    indicatorLeft: number;
+    changeTab: (event: MouseEvent<HTMLButtonElement>, value: number) => void;
+    activeTabRef?: RefObject<HTMLButtonElement>;
+    squeeze?: boolean;
+    indicatorColor?: GlobalColorsProps | (string & {});
+    textColor?: GlobalColorsProps | (string & {});
+    isLoading?: boolean;
+};
+export declare type ITabProps = HTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    value: string | number;
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    disabled?: boolean;
+};
+export declare type ITabPanelProps = HTMLAttributes<HTMLDivElement> & {
+    value: string | number;
+    index: string | number;
+};
+export declare type GenericThemeProps = {
+    theme?: ExtendThemeProps;
+    indicatorColor?: GlobalColorsProps | (string & {});
+};
+export declare type ITabButtonProps = GenericThemeProps & HTMLAttributes<HTMLButtonElement> & {
+    active: boolean;
+    squeeze?: boolean;
+    indicatorColor?: GlobalColorsProps | (string & {});
+    textColor?: GlobalColorsProps | (string & {});
+};
+export declare type TabIndicatorProps = {
+    indicatorWidth?: number;
+    indicatorLeft?: number;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAErF,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,SAAS,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACpD,CAAC;AAEF,oBAAY,eAAe,GAAG,iBAAiB,GAC7C,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC/C,CAAC;AAEJ,oBAAY,iBAAiB,GAAG;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAErF,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,SAAS,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACpD,CAAC;AAEF,oBAAY,eAAe,GAAG,iBAAiB,GAC7C,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC/C,CAAC;AAEJ,oBAAY,iBAAiB,GAAG;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { ITagProps } from './types';
-declare const Tag: FC<ITagProps>;
-export default Tag;
+import { FC } from 'react';
+import { ITagProps } from './types';
+declare const Tag: FC<ITagProps>;
+export default Tag;
 //# sourceMappingURL=index.d.ts.map