@consumidor-positivo/aurora 0.8.0 → 0.9.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-badgeInfo{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;width:fit-content;height:26px;padding:4px 8px}.au-badgeInfo__content{display:flex;gap:
|
|
1
|
+
.au-badgeInfo{font-family:"Source Sans 3",sans-serif;display:flex;justify-content:center;border-radius:8px;width:fit-content;height:26px;padding:4px 8px}.au-badgeInfo__content{display:flex;gap:4px;justify-content:center;align-items:center}.au-badgeInfo__content-icon .au-icon,.au-badgeInfo__content-icon .au-icon>svg{width:16px;height:16px}.au-badgeInfo__content-support-text{color:#313131;font-size:12px;font-weight:600}.au-badgeInfo--color-primary.au-badgeInfo--info{background-color:#eee6ff}.au-badgeInfo--color-primary.au-badgeInfo--success{background-color:#e5fff0}.au-badgeInfo--color-primary.au-badgeInfo--error{background-color:#ffe5e5}.au-badgeInfo--color-primary.au-badgeInfo--warning{background-color:#fff0e6}.au-badgeInfo--color-primary.au-badgeInfo--progress{background-color:#f1fcff}.au-badgeInfo--color-primary.au-badgeInfo--neutral{background-color:#e2e4e9}.au-badgeInfo--color-secondary.au-badgeInfo--info{background-color:#d4bfff}.au-badgeInfo--color-secondary.au-badgeInfo--success{background-color:#a1e5bd}.au-badgeInfo--color-secondary.au-badgeInfo--error{background-color:#ffbfbf}.au-badgeInfo--color-secondary.au-badgeInfo--warning{background-color:#ffdabf}.au-badgeInfo--color-secondary.au-badgeInfo--progress{background-color:#ccf3ff}.au-badgeInfo--color-secondary.au-badgeInfo--neutral{background-color:#c4c9d4}
|
|
@@ -13,4 +13,9 @@ export type TagProps = {
|
|
|
13
13
|
onClick?: () => void;
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.
|
|
18
|
+
* - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.
|
|
19
|
+
* - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.
|
|
20
|
+
*/
|
|
16
21
|
export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, actionButton, }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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 fullWidth?: boolean\n actionButton?: { content?: string; onClick?: () => void }\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 actionButton,\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\" aria-hidden=\"true\">\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\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;
|
|
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 actionButton?: { content?: string; onClick?: () => void }\n}\n\n/**\n * @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.\n * - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.\n * - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.\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 actionButton,\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\" aria-hidden=\"true\">\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\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqCO,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;AAAA,EACA;AACF,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM,EAAE,QAAQ,QAAQ,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe,EAAA;AAAA,IACjE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,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;AAEtD,SACE,qBAAC,OAAA,EAAI,WAAW,YACd,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAA,EAAI,WAAU,wBAAuB,eAAY,QAChD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,EAChC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,oBAAC,KAAA,EAAE,WAAW,gCAAiC,UAAA,aAAY;AAAA,MAE3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,6CAAc;AAAA,cACtB,UAAA,6CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAEJ,GACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
|
package/dist/main.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export { Tooltip } from './components/Tooltip';
|
|
|
34
34
|
export { Container } from './components/Container';
|
|
35
35
|
export { SubHeader } from './components/SubHeader';
|
|
36
36
|
export { BadgeInfo } from './components/BadgeInfo';
|
|
37
|
+
export { BadgeState } from './components/BadgeState';
|
|
37
38
|
export { useDrawer } from './components/Drawer/hooks';
|
|
38
39
|
export * from './components/Logo';
|
|
39
40
|
export * from './components/icons';
|
package/dist/main.es.js
CHANGED
|
@@ -35,6 +35,7 @@ import { Tooltip } from "./components/Tooltip/index.es.js";
|
|
|
35
35
|
import { Container } from "./components/Container/index.es.js";
|
|
36
36
|
import { SubHeader } from "./components/SubHeader/index.es.js";
|
|
37
37
|
import { BadgeInfo } from "./components/BadgeInfo/index.es.js";
|
|
38
|
+
import { BadgeState } from "./components/BadgeState/index.es.js";
|
|
38
39
|
import { useState } from "react";
|
|
39
40
|
import { L, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s } from "./BadgeWhite-DwzVEF3U.js";
|
|
40
41
|
import { IconActivity } from "./components/icons/IconActivity/index.es.js";
|
|
@@ -479,6 +480,7 @@ export {
|
|
|
479
480
|
n2 as BREAKPOINT_XLG,
|
|
480
481
|
o2 as BREAKPOINT_XSM,
|
|
481
482
|
BadgeInfo,
|
|
483
|
+
BadgeState,
|
|
482
484
|
Button,
|
|
483
485
|
p2 as COLOR_BRAND_BLUE_00,
|
|
484
486
|
q2 as COLOR_BRAND_BLUE_10,
|
package/dist/main.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.es.js","sources":["../lib/components/Card/Container/index.tsx","../lib/components/Card/Image/index.tsx","../lib/components/Card/Root/index.tsx","../lib/components/Card/Tag/index.tsx","../lib/components/Card/index.tsx","../lib/components/Drawer/hooks.ts"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardContainerProps = {\n direction?: 'column' | 'row'\n alignItems?: 'center' | 'start'\n justifyContent?: 'center' | 'space-between'\n gap?: number\n width?: number\n children: ReactNode\n}\nexport const CardContainer = ({\n direction,\n alignItems,\n justifyContent,\n gap,\n width,\n children,\n}: CardContainerProps) => {\n const containerClasses = classNames('au-card__container', {\n [`au-card__container--direction-${direction}`]: direction,\n [`au-card__container--align-items-${alignItems}`]: alignItems,\n [`au-card__container--justify-content-${justifyContent}`]: justifyContent,\n })\n\n const containerStyle: CSSProperties = {\n gap: `${gap}px`,\n width: `${width}px`\n }\n return (\n <div style={containerStyle} className={containerClasses}>\n {children}\n </div>\n )\n}\n","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, Ref } 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 className?: string;\n children: ReactNode\n ref?: Ref<HTMLDivElement>\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 className,\n ref\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 [String(className)]: !!className\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 ref={ref}\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 aria-hidden=\"true\">{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","import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n function handleOpenDrawer(name: string) {\n setDrawerOpen((prev) => {\n return {\n ...prev,\n [name]: !prev[name],\n }\n })\n }\n\n return {\n handleOpenDrawer,\n drawerOpen,\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.es.js","sources":["../lib/components/Card/Container/index.tsx","../lib/components/Card/Image/index.tsx","../lib/components/Card/Root/index.tsx","../lib/components/Card/Tag/index.tsx","../lib/components/Card/index.tsx","../lib/components/Drawer/hooks.ts"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardContainerProps = {\n direction?: 'column' | 'row'\n alignItems?: 'center' | 'start'\n justifyContent?: 'center' | 'space-between'\n gap?: number\n width?: number\n children: ReactNode\n}\nexport const CardContainer = ({\n direction,\n alignItems,\n justifyContent,\n gap,\n width,\n children,\n}: CardContainerProps) => {\n const containerClasses = classNames('au-card__container', {\n [`au-card__container--direction-${direction}`]: direction,\n [`au-card__container--align-items-${alignItems}`]: alignItems,\n [`au-card__container--justify-content-${justifyContent}`]: justifyContent,\n })\n\n const containerStyle: CSSProperties = {\n gap: `${gap}px`,\n width: `${width}px`\n }\n return (\n <div style={containerStyle} className={containerClasses}>\n {children}\n </div>\n )\n}\n","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, Ref } 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 className?: string;\n children: ReactNode\n ref?: Ref<HTMLDivElement>\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 className,\n ref\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 [String(className)]: !!className\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 ref={ref}\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 aria-hidden=\"true\">{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","import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n function handleOpenDrawer(name: string) {\n setDrawerOpen((prev) => {\n return {\n ...prev,\n [name]: !prev[name],\n }\n })\n }\n\n return {\n handleOpenDrawer,\n drawerOpen,\n }\n}\n"],"names":[],"mappings":"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"}
|
package/dist/mixins.scss
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
@use "
|
|
1
|
+
@use "./variables.scss" as v;
|
|
2
2
|
|
|
3
3
|
// MIXIN BREAKPOINTS
|
|
4
4
|
@mixin aboveXSmall {
|
|
5
|
-
@media (min-width:
|
|
5
|
+
@media (min-width: v.$breakpoint-xsm) {
|
|
6
6
|
@content;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
@mixin aboveSmall {
|
|
11
|
-
@media (min-width:
|
|
11
|
+
@media (min-width: v.$breakpoint-sm) {
|
|
12
12
|
@content;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@mixin aboveMedium {
|
|
17
|
-
@media (min-width:
|
|
17
|
+
@media (min-width: v.$breakpoint-md) {
|
|
18
18
|
@content;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
@mixin aboveLarge {
|
|
23
|
-
@media (min-width:
|
|
23
|
+
@media (min-width: v.$breakpoint-lg) {
|
|
24
24
|
@content;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@mixin aboveXLarge {
|
|
29
|
-
@media (min-width:
|
|
29
|
+
@media (min-width: v.$breakpoint-xlg) {
|
|
30
30
|
@content;
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
@mixin belowSmall {
|
|
35
|
-
@media (max-width: #{
|
|
35
|
+
@media (max-width: #{v.$breakpoint-sm - 1}) {
|
|
36
36
|
@content;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
@mixin belowMedium {
|
|
41
|
-
@media (max-width: #{
|
|
41
|
+
@media (max-width: #{v.$breakpoint-md - 1}) {
|
|
42
42
|
@content;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
@mixin belowLarge {
|
|
47
|
-
@media (max-width: #{
|
|
47
|
+
@media (max-width: #{v.$breakpoint-lg - 1}) {
|
|
48
48
|
@content;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
@mixin belowXLarge {
|
|
53
|
-
@media (max-width: #{
|
|
53
|
+
@media (max-width: #{v.$breakpoint-xlg - 1}) {
|
|
54
54
|
@content;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
@mixin container {
|
|
59
59
|
& {
|
|
60
60
|
width: 100%;
|
|
61
|
-
max-width:
|
|
61
|
+
max-width: v.$container-size;
|
|
62
62
|
margin: 0 auto;
|
|
63
63
|
padding: 0 24px;
|
|
64
64
|
}
|