@consumidor-positivo/aurora 0.0.183 → 0.0.185

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,6 +7,8 @@ export type CardRootProps = {
7
7
  height?: number;
8
8
  maxWidth?: number;
9
9
  maxHeight?: number;
10
+ paddingLess?: boolean;
11
+ hoverShadow?: boolean;
10
12
  children: ReactNode;
11
13
  };
12
- export declare const CardRoot: ({ border, color, width, height, maxWidth, maxHeight, children, }: CardRootProps) => import("react/jsx-runtime").JSX.Element;
14
+ export declare const CardRoot: ({ border, color, width, height, maxWidth, maxHeight, hoverShadow, paddingLess, children, }: CardRootProps) => import("react/jsx-runtime").JSX.Element;
@@ -16,11 +16,15 @@ const CardRoot = ({
16
16
  height,
17
17
  maxWidth,
18
18
  maxHeight,
19
+ hoverShadow,
20
+ paddingLess,
19
21
  children
20
22
  }) => {
21
23
  const rootClasses = classNames("au-card__root", {
22
24
  "au-card__root--border-none": !border,
23
- "au-card__root--color-secondary": color === "secondary"
25
+ "au-card__root--color-secondary": color === "secondary",
26
+ "au-card__root--with-hover-shadow": !!hoverShadow,
27
+ "au-card__root--paddingless": !!paddingLess
24
28
  });
25
29
  const rootSize = {
26
30
  width: `${width}px`,
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Image/index.tsx","../../../lib/components/Card/Root/index.tsx","../../../lib/components/Card/Tag/index.tsx","../../../lib/components/Card/index.tsx"],"sourcesContent":["import { CSSProperties } from 'react'\n\nexport type CardImageProps = {\n src: string\n alt?: string\n width?: number\n height?: number\n}\nexport const CardImage = ({ src, alt, width, height }: CardImageProps) => {\n const imageSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n }\n\n return (\n <div>\n <img style={imageSize} src={src} alt={alt} />\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardRootProps = {\n border?: boolean\n color?: 'primary' | 'secondary'\n width?: number\n height?: number\n maxWidth?: number\n maxHeight?: number\n children: ReactNode\n}\nexport const CardRoot = ({\n border = true,\n color = 'primary',\n width,\n height,\n maxWidth,\n maxHeight,\n children,\n}: CardRootProps) => {\n const rootClasses = classNames('au-card__root', {\n 'au-card__root--border-none': !border,\n 'au-card__root--color-secondary': color === 'secondary',\n })\n const rootSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n maxWidth: `${maxWidth}px`,\n maxHeight: `${maxHeight}px`\n }\n\n return (\n <div\n style={rootSize}\n className={rootClasses}>\n {children}\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { ReactNode } from 'react'\n\nexport type CardTagProps = {\n color?: 'primary' | 'secondary'\n icon?: ReactNode\n children: ReactNode\n}\nexport const CardTag = ({\n color = 'primary',\n icon,\n children,\n}: CardTagProps) => {\n const tagClasses = classNames('au-card__tag', {\n 'au-card__tag--primary': color === 'primary',\n 'au-card__tag--secondary': color === 'secondary',\n })\n return (\n <div className={tagClasses}>\n <span>{icon}</span>\n <span>{children}</span>\n </div>\n )\n}\n","import { CardContainer, CardContainerProps } from './Container'\nimport { CardEmphasis, CardEmphasisProps } from './Emphasis'\nimport { CardImage, CardImageProps } from './Image'\nimport { CardRoot, CardRootProps } from './Root'\nimport { CardTag, CardTagProps } from './Tag'\nimport './styles.scss'\n\ntype Components = {\n Root: React.FC<CardRootProps>\n Container: React.FC<CardContainerProps>\n Emphasis: React.FC<CardEmphasisProps>\n Image: React.FC<CardImageProps>\n Tag: React.FC<CardTagProps>\n}\n\nconst components: Components = {\n Root: CardRoot,\n Container: CardContainer,\n Emphasis: CardEmphasis,\n Image: CardImage,\n Tag: CardTag,\n}\n\nObject.keys(components).forEach((key) => {\n const component = components[key as keyof Components]\n component.displayName = `Card.${key}`\n})\n\nexport { components as Card }\n"],"names":[],"mappings":";;;;AAQO,MAAM,YAAY,CAAC,EAAE,KAAK,KAAK,OAAO,aAA6B;AACxE,QAAM,YAA2B;AAAA,IAC/B,OAAO,GAAG,KAAK;AAAA,IACf,QAAQ,GAAG,MAAM;AAAA,EAAA;AAIjB,SAAA,oBAAC,SACC,UAAC,oBAAA,OAAA,EAAI,OAAO,WAAW,KAAU,IAAU,CAAA,EAC7C,CAAA;AAEJ;ACPO,MAAM,WAAW,CAAC;AAAA,EACvB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACb,QAAA,cAAc,WAAW,iBAAiB;AAAA,IAC9C,8BAA8B,CAAC;AAAA,IAC/B,kCAAkC,UAAU;AAAA,EAAA,CAC7C;AACD,QAAM,WAA0B;AAAA,IAC9B,OAAO,GAAG,KAAK;AAAA,IACf,QAAQ,GAAG,MAAM;AAAA,IACjB,UAAU,GAAG,QAAQ;AAAA,IACrB,WAAW,GAAG,SAAS;AAAA,EAAA;AAIvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACV;AAAA,IAAA;AAAA,EAAA;AAGP;AC/BO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR;AAAA,EACA;AACF,MAAoB;AACZ,QAAA,aAAa,WAAW,gBAAgB;AAAA,IAC5C,yBAAyB,UAAU;AAAA,IACnC,2BAA2B,UAAU;AAAA,EAAA,CACtC;AAEC,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAA,oBAAC,UAAM,UAAK,KAAA,CAAA;AAAA,IACZ,oBAAC,UAAM,UAAS;AAAA,EAClB,EAAA,CAAA;AAEJ;ACRA,MAAM,aAAyB;AAAA,EAC7B,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK;AACP;AAEA,OAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,QAAQ;AACjC,QAAA,YAAY,WAAW,GAAuB;AAC1C,YAAA,cAAc,QAAQ,GAAG;AACrC,CAAC;"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Image/index.tsx","../../../lib/components/Card/Root/index.tsx","../../../lib/components/Card/Tag/index.tsx","../../../lib/components/Card/index.tsx"],"sourcesContent":["import { CSSProperties } from 'react'\n\nexport type CardImageProps = {\n src: string\n alt?: string\n width?: number\n height?: number\n}\nexport const CardImage = ({ src, alt, width, height }: CardImageProps) => {\n const imageSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n }\n\n return (\n <div>\n <img style={imageSize} src={src} alt={alt} />\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardRootProps = {\n border?: boolean\n color?: 'primary' | 'secondary'\n width?: number\n height?: number\n maxWidth?: number\n maxHeight?: number\n paddingLess?: boolean;\n hoverShadow?: boolean\n children: ReactNode\n}\nexport const CardRoot = ({\n border = true,\n color = 'primary',\n width,\n height,\n maxWidth,\n maxHeight,\n hoverShadow,\n paddingLess,\n children,\n}: CardRootProps) => {\n const rootClasses = classNames('au-card__root', {\n 'au-card__root--border-none': !border,\n 'au-card__root--color-secondary': color === 'secondary',\n 'au-card__root--with-hover-shadow': !!hoverShadow,\n 'au-card__root--paddingless': !!paddingLess\n })\n const rootSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n maxWidth: `${maxWidth}px`,\n maxHeight: `${maxHeight}px`\n }\n\n return (\n <div\n style={rootSize}\n className={rootClasses}>\n {children}\n </div>\n )\n}\n","import classNames from 'classnames'\nimport { ReactNode } from 'react'\n\nexport type CardTagProps = {\n color?: 'primary' | 'secondary'\n icon?: ReactNode\n children: ReactNode\n}\nexport const CardTag = ({\n color = 'primary',\n icon,\n children,\n}: CardTagProps) => {\n const tagClasses = classNames('au-card__tag', {\n 'au-card__tag--primary': color === 'primary',\n 'au-card__tag--secondary': color === 'secondary',\n })\n return (\n <div className={tagClasses}>\n <span>{icon}</span>\n <span>{children}</span>\n </div>\n )\n}\n","import { CardContainer, CardContainerProps } from './Container'\nimport { CardEmphasis, CardEmphasisProps } from './Emphasis'\nimport { CardImage, CardImageProps } from './Image'\nimport { CardRoot, CardRootProps } from './Root'\nimport { CardTag, CardTagProps } from './Tag'\nimport './styles.scss'\n\ntype Components = {\n Root: React.FC<CardRootProps>\n Container: React.FC<CardContainerProps>\n Emphasis: React.FC<CardEmphasisProps>\n Image: React.FC<CardImageProps>\n Tag: React.FC<CardTagProps>\n}\n\nconst components: Components = {\n Root: CardRoot,\n Container: CardContainer,\n Emphasis: CardEmphasis,\n Image: CardImage,\n Tag: CardTag,\n}\n\nObject.keys(components).forEach((key) => {\n const component = components[key as keyof Components]\n component.displayName = `Card.${key}`\n})\n\nexport { components as Card }\n"],"names":[],"mappings":";;;;AAQO,MAAM,YAAY,CAAC,EAAE,KAAK,KAAK,OAAO,aAA6B;AACxE,QAAM,YAA2B;AAAA,IAC/B,OAAO,GAAG,KAAK;AAAA,IACf,QAAQ,GAAG,MAAM;AAAA,EAAA;AAIjB,SAAA,oBAAC,SACC,UAAC,oBAAA,OAAA,EAAI,OAAO,WAAW,KAAU,IAAU,CAAA,EAC7C,CAAA;AAEJ;ACLO,MAAM,WAAW,CAAC;AAAA,EACvB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACb,QAAA,cAAc,WAAW,iBAAiB;AAAA,IAC9C,8BAA8B,CAAC;AAAA,IAC/B,kCAAkC,UAAU;AAAA,IAC5C,oCAAoC,CAAC,CAAC;AAAA,IACtC,8BAA8B,CAAC,CAAC;AAAA,EAAA,CACjC;AACD,QAAM,WAA0B;AAAA,IAC9B,OAAO,GAAG,KAAK;AAAA,IACf,QAAQ,GAAG,MAAM;AAAA,IACjB,UAAU,GAAG,QAAQ;AAAA,IACrB,WAAW,GAAG,SAAS;AAAA,EAAA;AAIvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACV;AAAA,IAAA;AAAA,EAAA;AAGP;ACrCO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR;AAAA,EACA;AACF,MAAoB;AACZ,QAAA,aAAa,WAAW,gBAAgB;AAAA,IAC5C,yBAAyB,UAAU;AAAA,IACnC,2BAA2B,UAAU;AAAA,EAAA,CACtC;AAEC,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAA,oBAAC,UAAM,UAAK,KAAA,CAAA;AAAA,IACZ,oBAAC,UAAM,UAAS;AAAA,EAClB,EAAA,CAAA;AAEJ;ACRA,MAAM,aAAyB;AAAA,EAC7B,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK;AACP;AAEA,OAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,QAAQ;AACjC,QAAA,YAAY,WAAW,GAAuB;AAC1C,YAAA,cAAc,QAAQ,GAAG;AACrC,CAAC;"}
@@ -1 +1 @@
1
- .au-card{font-family:"Source Sans 3",sans-serif}.au-card__root{background-color:#fff;border-radius:16px;border:1px solid #e2e4e9;padding:16px}.au-card__root--border-none{border:none}.au-card__root--color-secondary{background-color:#f6f7fa}.au-card__container{display:flex;flex-direction:column;align-items:start;width:100%;height:100%}.au-card__container--direction-row{flex-direction:row}.au-card__container--align-items-center{align-items:center}.au-card__container--justify-content-center{justify-content:center}.au-card__container--justify-content-space-between{justify-content:space-between}.au-card__emphasis{background-color:#f2f5fc;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:16px;margin:0 -16px;width:calc(100% + 32px)}.au-card__emphasis-container{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:end}.au-card__tag{border-radius:8px;display:flex;justify-content:center;align-items:center;gap:4px;padding:4px 16px;width:100%;color:#16181d;font-size:14px;font-weight:600;line-height:21px}.au-card__tag--primary{background-color:#95f0cf}.au-card__tag--secondary{background-color:#eee6ff}
1
+ .au-card{font-family:"Source Sans 3",sans-serif}.au-card__root{background-color:#fff;border-radius:16px;border:1px solid #e2e4e9;padding:16px}.au-card__root--border-none{border:none}.au-card__root--color-secondary{background-color:#f6f7fa}.au-card__root--paddingless{padding:0}.au-card__root--with-hover-shadow{transition:box-shadow .4s ease}.au-card__root--with-hover-shadow:hover{box-shadow:1px 0 8px 1px #0000001a}.au-card__container{display:flex;flex-direction:column;align-items:start;width:100%;height:100%}.au-card__container--direction-row{flex-direction:row}.au-card__container--align-items-center{align-items:center}.au-card__container--justify-content-center{justify-content:center}.au-card__container--justify-content-space-between{justify-content:space-between}.au-card__emphasis{background-color:#f2f5fc;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:16px;margin:0 -16px;width:calc(100% + 32px)}.au-card__emphasis-container{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:end}.au-card__tag{border-radius:8px;display:flex;justify-content:center;align-items:center;gap:4px;padding:4px 16px;width:100%;color:#16181d;font-size:14px;font-weight:600;line-height:21px}.au-card__tag--primary{background-color:#95f0cf}.au-card__tag--secondary{background-color:#eee6ff}
@@ -8,5 +8,6 @@ export type TagProps = {
8
8
  text: string;
9
9
  children?: React.ReactNode;
10
10
  customIcon?: string | JSX.Element;
11
+ fullWidth?: boolean;
11
12
  };
12
- export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, }: TagProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, }: TagProps) => import("react/jsx-runtime").JSX.Element;
@@ -16,7 +16,8 @@ import './styles.css';const Tag = ({
16
16
  color = "primary",
17
17
  customIcon,
18
18
  text,
19
- children
19
+ children,
20
+ fullWidth
20
21
  }) => {
21
22
  const statusMap = {
22
23
  success: {
@@ -50,7 +51,8 @@ import './styles.css';const Tag = ({
50
51
  [`au-tag--size-${size}`]: !!size,
51
52
  [`au-tag--type-${type}`]: !!type,
52
53
  [`au-tag--border-${border}`]: !!border,
53
- [`au-tag--color-${color}`]: !!color
54
+ [`au-tag--color-${color}`]: !!color,
55
+ [`au-tag--full-width`]: !!fullWidth
54
56
  });
55
57
  const isBadgeTag = type === "badge";
56
58
  const supportText = isBadgeTag ? text.toUpperCase() : text;
@@ -60,7 +62,14 @@ import './styles.css';const Tag = ({
60
62
  Conditional,
61
63
  {
62
64
  condition: !isBadgeTag,
63
- renderIf: /* @__PURE__ */ jsx("div", { className: "au-tag__content-icon", children: /* @__PURE__ */ jsx(Conditional, { condition: !!customIcon, renderIf: customIcon, renderElse: statusMap[status].icon }) })
65
+ renderIf: /* @__PURE__ */ jsx("div", { className: "au-tag__content-icon", children: /* @__PURE__ */ jsx(
66
+ Conditional,
67
+ {
68
+ condition: !!customIcon,
69
+ renderIf: customIcon,
70
+ renderElse: statusMap[status].icon
71
+ }
72
+ ) })
64
73
  }
65
74
  ),
66
75
  /* @__PURE__ */ jsx("p", { className: `au-tag__content-support-text`, children: supportText })
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n border?: 'rounded' | 'square'\n type?: 'read-only' | 'badge'\n color?: 'primary' | 'secondary'\n size?: 'small' | 'medium' | 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string | JSX.Element\n}\n\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n}: TagProps) => {\n\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n })\n\n const isBadgeTag = type === 'badge';\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\">\n <Conditional condition={!!customIcon} renderIf={customIcon} renderElse={statusMap[status].icon}/>\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AA8BO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AAEd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAkB,EAAA,UAAU,iBAAkB,CAAA;AAAA,IACvD;AAAA,IACA,MAAM,EAAE,QAAQ,QAAQ,MAAO,oBAAA,UAAA,EAAS,UAAU,cAAA,CAAe,EAAG;AAAA,IACpE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAS,EAAA,UAAU,oBAAqB,CAAA;AAAA,IACjD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EAAA;AAGI,QAAA,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CAC/B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAGpD,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACG,oBAAA,OAAA,EAAI,WAAU,wBACb,UAAA,oBAAC,eAAY,WAAW,CAAC,CAAC,YAAY,UAAU,YAAY,YAAY,UAAU,MAAM,EAAE,KAAK,CAAA,GACjG;AAAA,QAAA;AAAA,MAEJ;AAAA,MACC,oBAAA,KAAA,EAAE,WAAW,gCAAiC,UAAY,aAAA;AAAA,IAAA,GAC7D;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n border?: 'rounded' | 'square'\n type?: 'read-only' | 'badge'\n color?: 'primary' | 'secondary'\n size?: 'small' | 'medium' | 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string | JSX.Element\n fullWidth?: boolean\n}\n\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAkB,EAAA,UAAU,iBAAkB,CAAA;AAAA,IACvD;AAAA,IACA,MAAM,EAAE,QAAQ,QAAQ,MAAO,oBAAA,UAAA,EAAS,UAAU,cAAA,CAAe,EAAG;AAAA,IACpE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAS,EAAA,UAAU,oBAAqB,CAAA;AAAA,IACjD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EAAA;AAGI,QAAA,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,IAC9B,CAAC,oBAAoB,GAAG,CAAC,CAAC;AAAA,EAAA,CAC3B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAGpD,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAI,EAAA,WAAU,wBACb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,GAElC;AAAA,QAAA;AAAA,MAEJ;AAAA,MACC,oBAAA,KAAA,EAAE,WAAW,gCAAiC,UAAY,aAAA;AAAA,IAAA,GAC7D;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
@@ -1 +1 @@
1
- .au-tag{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;padding:8px;width:fit-content}.au-tag__content{display:flex;gap:8px;justify-content:center;align-items:center}.au-tag__content-icon .au-icon,.au-tag__content-icon .au-icon>svg{width:16px;height:16px}.au-tag__content-support-text{color:#16181d;font-size:12px;font-weight:600;line-height:18px}.au-tag--size-small{height:26px;padding:4px 8px}.au-tag--size-medium{height:36px}.au-tag--size-large{height:38px}.au-tag--size-large-support-text{font-size:14px;line-height:22px}.au-tag--border-rounded{border-radius:500px}.au-tag--color-primary.au-tag--info{background-color:#eee6ff}.au-tag--color-primary.au-tag--success{background-color:#e5fff0}.au-tag--color-primary.au-tag--error{background-color:#ffe5e5}.au-tag--color-primary.au-tag--warning{background-color:#fff0e6}.au-tag--color-primary.au-tag--support{background-color:#f1fcff}.au-tag--color-primary.au-tag--neutral{background-color:#e2e4e9}.au-tag--color-secondary.au-tag--info{background-color:#d4bfff}.au-tag--color-secondary.au-tag--success{background-color:#a1e5bd}.au-tag--color-secondary.au-tag--error{background-color:#ffbfbf}.au-tag--color-secondary.au-tag--warning{background-color:#ffdabf}.au-tag--color-secondary.au-tag--support{background-color:#ccf3ff}.au-tag--color-secondary.au-tag--neutral{background-color:#c4c9d4}.au-tag--type-badge.au-tag--info p{color:#46008c}.au-tag--type-badge.au-tag--error p{color:#731111}.au-tag--type-badge.au-tag--success p{color:#08331a}.au-tag--type-badge.au-tag--warning p{color:#803500}.au-tag--type-badge.au-tag--support p{color:#004155}.au-tag--type-badge.au-tag--size-large{height:36px;font-size:12px;line-height:18px}
1
+ .au-tag{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;padding:8px;width:fit-content}.au-tag__content{display:flex;gap:8px;justify-content:center;align-items:center}.au-tag__content-icon .au-icon,.au-tag__content-icon .au-icon>svg{width:16px;height:16px}.au-tag__content-support-text{color:#16181d;font-size:12px;font-weight:600;line-height:18px}.au-tag--size-small{height:26px;padding:4px 8px}.au-tag--size-medium{height:36px}.au-tag--size-large{height:38px}.au-tag--size-large-support-text{font-size:14px;line-height:22px}.au-tag--border-rounded{border-radius:500px}.au-tag--color-primary.au-tag--info{background-color:#eee6ff}.au-tag--color-primary.au-tag--success{background-color:#e5fff0}.au-tag--color-primary.au-tag--error{background-color:#ffe5e5}.au-tag--color-primary.au-tag--warning{background-color:#fff0e6}.au-tag--color-primary.au-tag--support{background-color:#f1fcff}.au-tag--color-primary.au-tag--neutral{background-color:#e2e4e9}.au-tag--color-secondary.au-tag--info{background-color:#d4bfff}.au-tag--color-secondary.au-tag--success{background-color:#a1e5bd}.au-tag--color-secondary.au-tag--error{background-color:#ffbfbf}.au-tag--color-secondary.au-tag--warning{background-color:#ffdabf}.au-tag--color-secondary.au-tag--support{background-color:#ccf3ff}.au-tag--color-secondary.au-tag--neutral{background-color:#c4c9d4}.au-tag--type-badge.au-tag--info p{color:#46008c}.au-tag--type-badge.au-tag--error p{color:#731111}.au-tag--type-badge.au-tag--success p{color:#08331a}.au-tag--type-badge.au-tag--warning p{color:#803500}.au-tag--type-badge.au-tag--support p{color:#004155}.au-tag--type-badge.au-tag--size-large{height:36px;font-size:12px;line-height:18px}.au-tag--full-width{width:100%}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@consumidor-positivo/aurora",
3
3
  "private": false,
4
- "version": "0.0.183",
4
+ "version": "0.0.185",
5
5
  "type": "module",
6
6
  "main": "./dist/main.es.js",
7
7
  "modules": "./dist/main.es.js",