@consumidor-positivo/aurora 0.0.84 → 0.0.86

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

@@ -0,0 +1,14 @@
+
+export type AlertProps = {
+    status?: 'success' | 'error' | 'warning' | 'info';
+    type?: 1 | 2;
+    orientation?: 'horizontal' | 'vertical';
+    title?: {
+        content?: string;
+        weight?: 'bold' | 'normal';
+    };
+    text?: string;
+    action?: string;
+    children?: React.ReactNode;
+};
+export declare const Alert: ({ status, type, orientation, title, text, action, children, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/index.es.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import "../Icon/index.es.js";
+import { IconAlertOctagon } from "../icons/IconAlertOctagon/index.es.js";
+import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
+import { IconCheck } from "../icons/IconCheck/index.es.js";
+import { IconInfo } from "../icons/IconInfo/index.es.js";
+import { Conditional } from "../Conditional/index.es.js";
+import { C as COLOR_SUCCESS_50, a as COLOR_ERROR_50, V as COLOR_WARNING_50, a0 as COLOR_INFO_50 } from "../../tokens-DGTtjw-_.js";
+import './styles.css';const Alert = ({
+  status = "info",
+  type = 1,
+  orientation = "horizontal",
+  title,
+  text,
+  action,
+  children
+}) => {
+  const statusMap = {
+    success: {
+      option: "success",
+      icon: /* @__PURE__ */ jsx(IconCheck, { rawColor: COLOR_SUCCESS_50 })
+    },
+    error: {
+      option: "error",
+      icon: /* @__PURE__ */ jsx(IconAlertOctagon, { rawColor: COLOR_ERROR_50 })
+    },
+    warning: {
+      option: "warning",
+      icon: /* @__PURE__ */ jsx(IconAlertTriangle, { rawColor: COLOR_WARNING_50 })
+    },
+    info: { option: "info", icon: /* @__PURE__ */ jsx(IconInfo, { rawColor: COLOR_INFO_50 }) }
+  };
+  const alertClasses = classNames("au-alert", {
+    [`au-alert--${statusMap[status].option}--type-${type}`]: statusMap[status].option
+  });
+  return /* @__PURE__ */ jsxs("div", { className: alertClasses, children: [
+    statusMap[status].icon,
+    /* @__PURE__ */ jsxs("div", { className: `au-alert__container--${orientation}`, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: `au-alert__title au-alert__title--${title == null ? void 0 : title.weight}`, children: title == null ? void 0 : title.content }),
+        /* @__PURE__ */ jsx("p", { className: `au-alert__support-text`, children: text })
+      ] }),
+      children,
+      /* @__PURE__ */ jsx(
+        Conditional,
+        {
+          condition: !!action,
+          renderIf: /* @__PURE__ */ jsx("button", { className: "au-alert__action-btn", children: action })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Alert
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/Alert/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\nimport {\n  IconAlertOctagon,\n  IconAlertTriangle,\n  IconCheck,\n  IconInfo,\n} from '@components/icons'\nimport {\n  COLOR_ERROR_50,\n  COLOR_INFO_50,\n  COLOR_SUCCESS_50,\n  COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\n\nexport type AlertProps = {\n  status?: 'success' | 'error' | 'warning' | 'info'\n  type?: 1 | 2\n  orientation?: 'horizontal' | 'vertical'\n  title?: { content?: string; weight?: 'bold' | 'normal' }\n  text?: string\n  action?: string\n  children?: React.ReactNode\n}\n\nexport const Alert = ({\n  status = 'info',\n  type = 1,\n  orientation = 'horizontal',\n  title,\n  text,\n  action,\n  children,\n}: AlertProps) => {\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  }\n\n  const alertClasses = classNames('au-alert', {\n    [`au-alert--${statusMap[status].option}--type-${type}`]:\n      statusMap[status].option,\n  })\n\n  return (\n    <div className={alertClasses}>\n      {statusMap[status].icon}\n      <div className={`au-alert__container--${orientation}`}>\n        <div>\n          <h4 className={`au-alert__title au-alert__title--${title?.weight}`}>\n            {title?.content}\n          </h4>\n          <p className={`au-alert__support-text`}>{text}</p>\n        </div>\n        {children}\n        <Conditional\n          condition={!!action}\n          renderIf={<button className=\"au-alert__action-btn\">{action}</button>}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AA0BO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,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,EAAA;AAGhE,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,CAAC,aAAa,UAAU,MAAM,EAAE,MAAM,UAAU,IAAI,EAAE,GACpD,UAAU,MAAM,EAAE;AAAA,EAAA,CACrB;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAW,cACb,UAAA;AAAA,IAAA,UAAU,MAAM,EAAE;AAAA,IAClB,qBAAA,OAAA,EAAI,WAAW,wBAAwB,WAAW,IACjD,UAAA;AAAA,MAAA,qBAAC,OACC,EAAA,UAAA;AAAA,QAAA,oBAAC,QAAG,WAAW,oCAAoC,+BAAO,MAAM,IAC7D,yCAAO,QACV,CAAA;AAAA,QACC,oBAAA,KAAA,EAAE,WAAW,0BAA2B,UAAK,MAAA;AAAA,MAAA,GAChD;AAAA,MACC;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UAAU,oBAAC,UAAO,EAAA,WAAU,wBAAwB,UAAO,QAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/Alert/styles.css

@@ -0,0 +1 @@
+.au-alert{border-radius:16px;display:flex;gap:16px;padding:16px}.au-alert__container--horizontal .au-alert__action-btn{margin-top:8px}.au-alert__container--vertical{display:flex;gap:16px;flex-direction:row;justify-content:space-between;width:100%}.au-alert__title{color:#16181d;font-size:16px;font-weight:400;line-height:24px}.au-alert__title--bold{font-weight:600}.au-alert__support-text{color:#454a54;font-size:14px;line-height:21px}.au-alert__action-btn{background-color:transparent;border:none;color:#0048db;cursor:pointer;font-size:16px;font-weight:600;line-height:24px}.au-alert--info--type-1{background-color:#f3f0fc;border:1px solid #510cb2}.au-alert--info--type-2{background-color:#eee6ff;border:none}.au-alert--success--type-1{background-color:#f0fcf5;border:1px solid #10593b}.au-alert--success--type-2{background-color:#e5fff0;border:none}.au-alert--warning--type-1{background-color:#fcf4f0;border:1px solid #a64a08}.au-alert--warning--type-2{background-color:#fff0e6;border:none}.au-alert--error--type-1{background-color:#f5eff0;border:1px solid #991717}.au-alert--error--type-2{background-color:#ffe5e5;border:none}

package/dist/main.d.ts

@@ -17,6 +17,7 @@ export { DatepickerField } from './components/form/Datepicker';
 export { TextAreaField } from './components/form/TextareaField';
 export { Checkbox } from './components/form/Checkbox';
 export { Radio } from './components/form/Radio';
+export { Alert } from './components/Alert';
 export { useDrawer } from './components/Drawer/hooks';
 export * from './components/Logo';
 export * from './components/icons';

package/dist/main.es.js

@@ -16,6 +16,7 @@ import { DatepickerField } from "./components/Datepicker/index.es.js";
 import { TextAreaField } from "./components/TextareaField/index.es.js";
 import { Checkbox } from "./components/Checkbox/index.es.js";
 import { Radio } from "./components/Radio/index.es.js";
+import { Alert } from "./components/Alert/index.es.js";
 import { useState } from "react";
 import { L, a, b, c, d, e, f, g, h, i, j, k, l, m } from "./Tertiary-DMp-1eWT.js";
 import { IconActivity } from "./components/icons/IconActivity/index.es.js";
@@ -349,6 +350,7 @@ import './components/main/styles.css';function useDrawer(props) {
   };
 }
 export {
+  Alert,
   e2 as BORDER_RADIUS_BIG,
   d2 as BORDER_RADIUS_MEDIUM,
   f2 as BORDER_RADIUS_PILL,

package/dist/main.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.es.js","sources":["../lib/components/Drawer/hooks.ts"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAElE,WAAS,iBAAiB,MAAc;AACtC,kBAAc,CAAC,SAAS;AACf,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GAAG,CAAC,KAAK,IAAI;AAAA,MAAA;AAAA,IACpB,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"main.es.js","sources":["../lib/components/Drawer/hooks.ts"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAElE,WAAS,iBAAiB,MAAc;AACtC,kBAAc,CAAC,SAAS;AACf,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GAAG,CAAC,KAAK,IAAI;AAAA,MAAA;AAAA,IACpB,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consumidor-positivo/aurora",
   "private": false,
-  "version": "0.0.84",
+  "version": "0.0.86",
   "type": "module",
   "main": "./dist/main.es.js",
   "modules": "./dist/main.es.js",