norma-library 0.4.6 → 0.4.7

package/dist/esm/components/Avatar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AvatarBaseProps } from "../interfaces";
+export declare const Avatar: React.FC<AvatarBaseProps>;

package/dist/esm/components/Avatar.js

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery, Avatar as MuiVatar, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+var AvatarStyled = styled(MuiVatar)({
+    textTransform: "none",
+    color: "currentcolor",
+});
+export var Avatar = function (_a) {
+    var src = _a.src, props = __rest(_a, ["src"]);
+    var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    var theme = useMemo(function () { return (prefersDarkMode ? themes.light : themes.dark); }, [prefersDarkMode]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(AvatarStyled, __assign({ src: src }, props))));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,aAAa,EACb,aAAa,EACb,MAAM,IAAI,QAAQ,GACnB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,IAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpC,aAAa,EAAE,MAAM;IACrB,KAAK,EAAE,cAAc;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,MAAM,GAA8B,UAAC,EAAiB;IAAf,IAAA,GAAG,SAAA,EAAK,KAAK,cAAf,OAAiB,CAAF;IAC/D,IAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,IAAM,KAAK,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAA9C,CAA8C,EACpD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,oBAAC,YAAY,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CACvB,CACjB,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/Badge.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { BadgeBaseProps } from "../interfaces";
+export declare const Badge: React.FC<BadgeBaseProps>;

package/dist/esm/components/Badge.js

@@ -0,0 +1,14 @@
+import { __assign, __rest } from "tslib";
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery, Badge as MuiBadge } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+var BadgeStyled = styled(MuiBadge)({});
+export var Badge = function (_a) {
+    var props = __rest(_a, []);
+    var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    var theme = useMemo(function () { return (prefersDarkMode ? themes.dark : themes.light); }, [prefersDarkMode]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(BadgeStyled, __assign({}, props))));
+};
+//# sourceMappingURL=Badge.js.map

package/dist/esm/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGhF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,IAAM,KAAK,GAA6B,UAAC,EAAY;QAAP,KAAK,cAAV,EAAY,CAAF;IACxD,IAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,IAAM,KAAK,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA9C,CAA8C,EACpD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,oBAAC,WAAW,eAAK,KAAK,EAAI,CACZ,CACjB,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/DatePicker.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DatePickerBaseProps } from "../interfaces";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+export declare const DatePicker: ({ label, format, language, variant, }: DatePickerBaseProps) => React.JSX.Element;

package/dist/esm/components/DatePicker.js

@@ -0,0 +1,58 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery } from "@mui/material";
+import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
+import { MobileDatePicker as MuiMobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
+import { DesktopDatePicker as MuiDesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+var MuiDatePickerStyled = styled(MuiDatePicker)({
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+        borderRadius: 0,
+        borderBottom: "1px solid #666666",
+    },
+    "& .MuiFormLabel-root": {
+        backgroundColor: "#fff",
+        padding: "0 5px",
+    },
+});
+var MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+        borderRadius: 0,
+        borderBottom: "1px solid #666666",
+    },
+    "& .MuiFormLabel-root": {
+        backgroundColor: "#fff",
+        padding: "0 5px",
+    },
+});
+var MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+        borderRadius: 0,
+        borderBottom: "1px solid #666666",
+    },
+    "& .MuiFormLabel-root": {
+        backgroundColor: "#fff",
+        padding: "0 5px",
+    },
+});
+export var DatePicker = function (_a) {
+    var label = _a.label, _b = _a.format, format = _b === void 0 ? "DD/MM/YYYY" : _b, _c = _a.language, language = _c === void 0 ? "pt-br" : _c, _d = _a.variant, variant = _d === void 0 ? "desktop" : _d;
+    var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    var theme = useMemo(function () { return (prefersDarkMode ? themes.light : themes.dark); }, [prefersDarkMode]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: language },
+            React.createElement(DemoContainer, { components: ["TimePicker", "MobileTimePicker", "DesktopTimePicker"] },
+                variant === "responsive" && (React.createElement(MuiDatePickerStyled, { label: label, format: format })),
+                variant === "mobile" && (React.createElement(MuiMobileDatePickerStyled, { label: label, format: format })),
+                variant === "desktop" && (React.createElement(MuiDesktopDatePickerStyled, { label: label, format: format }))))));
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TimePicker.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import { TimePickerBaseProps } from "@/interfaces/TimePicker";
+export declare const TimePicker: ({ label, timezone, language, variant, }: TimePickerBaseProps) => React.JSX.Element;

package/dist/esm/components/TimePicker.js

@@ -0,0 +1,66 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery } from "@mui/material";
+import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers/TimePicker";
+import { MobileTimePicker as MuiMobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import { DesktopTimePicker as MuiDesktopTimePicker } from "@mui/x-date-pickers/DesktopTimePicker";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+var MuiTimePickerStyled = styled(MuiTimePicker)({
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+        borderRadius: 0,
+        borderBottom: "1px solid #666666",
+    },
+    "& .MuiFormLabel-root": {
+        backgroundColor: "#fff",
+        padding: "0 5px",
+    },
+});
+var MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+        borderRadius: 0,
+        borderBottom: "1px solid #666666",
+    },
+    "& .MuiFormLabel-root": {
+        backgroundColor: "#fff",
+        padding: "0 5px",
+    },
+});
+var MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
+    "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+        borderRadius: 0,
+        borderBottom: "1px solid #666666",
+    },
+    "& .MuiFormLabel-root": {
+        backgroundColor: "#fff",
+        padding: "0 5px",
+    },
+});
+export var TimePicker = function (_a) {
+    var label = _a.label, _b = _a.timezone, timezone = _b === void 0 ? "America/Sao_Paulo" : _b, _c = _a.language, language = _c === void 0 ? "pt-br" : _c, _d = _a.variant, variant = _d === void 0 ? "desktop" : _d;
+    var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    var theme = useMemo(function () { return (prefersDarkMode ? themes.light : themes.dark); }, [prefersDarkMode]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: language },
+            React.createElement(DemoContainer, { components: ["TimePicker", "MobileTimePicker", "DesktopTimePicker"] },
+                variant === "responsive" && (React.createElement(MuiTimePickerStyled, { label: label, timezone: timezone })),
+                variant === "mobile" && (React.createElement(MuiMobileTimePickerStyled, { label: label, timezone: timezone })),
+                variant === "desktop" && (React.createElement(MuiDesktopTimePickerStyled, { label: label, timezone: timezone }))))));
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/esm/components/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/components/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAE,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AAGzB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAClB,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEvB,IAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAChD,oCAAoC,EAAE;QACpC,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,mBAAmB;KAClC;IACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,MAAM;QACvB,OAAO,EAAE,OAAO;KACjB;CACF,CAAC,CAAC;AAEH,IAAM,yBAAyB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAC5D,oCAAoC,EAAE;QACpC,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,mBAAmB;KAClC;IACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,MAAM;QACvB,OAAO,EAAE,OAAO;KACjB;CACF,CAAC,CAAC;AAEH,IAAM,0BAA0B,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;IAC9D,oCAAoC,EAAE;QACpC,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,mBAAmB;KAClC;IACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,MAAM;QACvB,OAAO,EAAE,OAAO;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAKL;QAJpB,KAAK,WAAA,EACL,gBAA8B,EAA9B,QAAQ,mBAAG,mBAAmB,KAAA,EAC9B,gBAAkB,EAAlB,QAAQ,mBAAG,OAAO,KAAA,EAClB,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA;IAEnB,IAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,IAAM,KAAK,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAA9C,CAA8C,EACpD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,oBAAC,oBAAoB,IAAC,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ;YACtE,oBAAC,aAAa,IACZ,UAAU,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,CAAC;gBAElE,OAAO,KAAK,YAAY,IAAI,CAC3B,oBAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1D;gBACA,OAAO,KAAK,QAAQ,IAAI,CACvB,oBAAC,yBAAyB,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAChE;gBACA,OAAO,KAAK,SAAS,IAAI,CACxB,oBAAC,0BAA0B,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjE,CACa,CACK,CACT,CACjB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";
@@ -14,3 +17,4 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimePicker";

package/dist/esm/components/index.js

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";
@@ -14,4 +17,5 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimePicker";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/esm/index.d.ts

@@ -13,5 +13,6 @@ import { Select } from "./components/Select";
 import { Tabs } from "./components/Tabs";
 import { Tag } from "./components/Tag";
 import { TextField } from "./components/TextField";
+import { DatePicker } from "./components/DatePicker";
 import { themes, getPalette } from "./helpers";
-export { Accordion, Button, Card, CheckBox, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, themes, };
+export { Accordion, Button, Card, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, themes, };

package/dist/esm/index.js

@@ -13,6 +13,7 @@ import { Select } from "./components/Select";
 import { Tabs } from "./components/Tabs";
 import { Tag } from "./components/Tag";
 import { TextField } from "./components/TextField";
+import { DatePicker } from "./components/DatePicker";
 import { themes, getPalette } from "./helpers";
-export { Accordion, Button, Card, CheckBox, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, themes, };
+export { Accordion, Button, Card, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, themes, };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,MAAM,GACP,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,MAAM,GACP,CAAC"}

package/dist/esm/interfaces/Avatar.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+import { AvatarPropsVariantOverrides, SxProps } from "@mui/material";
+import { MuiAvatarBaseProps } from "../types";
+import { OverridableStringUnion } from "@mui/types";
+export interface AvatarBaseProps extends MuiAvatarBaseProps {
+    sx?: SxProps<Theme>;
+    src?: string;
+    children?: ReactNode;
+    variant?: OverridableStringUnion<"circular" | "rounded" | "square", AvatarPropsVariantOverrides>;
+    sizes?: string;
+}

package/dist/esm/interfaces/Avatar.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/interfaces/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/interfaces/Avatar.tsx"],"names":[],"mappings":""}

package/dist/esm/interfaces/Badge.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+import { BadgePropsColorOverrides, BadgePropsVariantOverrides, SxProps } from "@mui/material";
+import { MuiBadgeBaseProps } from "@/types";
+import { OverridableStringUnion } from "@mui/types";
+export interface BadgeBaseProps extends MuiBadgeBaseProps {
+    sx?: SxProps<Theme>;
+    className?: string;
+    children?: ReactNode;
+    badgeContent?: ReactNode;
+    invisible?: boolean;
+    color?: OverridableStringUnion<"primary" | "secondary" | "default" | "error" | "info" | "success" | "warning", BadgePropsColorOverrides>;
+    variant?: OverridableStringUnion<"standard" | "dot", BadgePropsVariantOverrides>;
+}

package/dist/esm/interfaces/Badge.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.js.map

package/dist/esm/interfaces/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/interfaces/Badge.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/DatePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { DatePickVariant } from "../types";
+export interface DatePickerBaseProps {
+    sx?: SxProps<Theme>;
+    label?: string;
+    format?: string;
+    language?: string;
+    onChange?: React.ChangeEvent<HTMLInputElement>;
+    variant?: DatePickVariant;
+}

package/dist/esm/interfaces/DatePicker.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/interfaces/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/interfaces/DatePicker.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/TimePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { DatePickVariant } from "../types";
+export interface TimePickerBaseProps {
+    sx?: SxProps<Theme>;
+    label?: string;
+    timezone?: string;
+    language?: string;
+    onChange?: React.ChangeEvent<HTMLInputElement>;
+    variant?: DatePickVariant;
+}

package/dist/esm/interfaces/TimePicker.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TimePicker.js.map

package/dist/esm/interfaces/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/interfaces/TimePicker.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/index.d.ts

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";

package/dist/esm/interfaces/index.js

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";

package/dist/esm/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}

package/dist/esm/types/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonProps as MuiButtonProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps } from "@mui/material";
+import { AvatarProps as MuiAvatarProps, ButtonProps as MuiButtonProps, BadgeProps as MuiBadgeProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps } from "@mui/material";
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 import { iconsSVG } from "../components/Svgs";
 export type ColorVariant = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
@@ -10,6 +10,7 @@ export type ButtonVariant = "text" | "outlined" | "contained";
 export type DropVariant = "menu" | "selectedMenu";
 export type TagVariant = "outlined" | "contained";
 export type TabsVariant = "standard" | "scrollable" | "fullWidth";
+export type DatePickVariant = "responsive" | "desktop" | "mobile";
 export type ProgressVariant = "determinate" | "indeterminate" | "buffer" | "query";
 export type MuiButtonBaseProps = Omit<MuiButtonProps, "sx" | "color" | "size" | "variant">;
 export type MuiIconButtonBaseProps = Omit<MuiIconButtonProps, "sx" | "color" | "size" | "variant">;
@@ -34,6 +35,9 @@ export type MuiTabsBaseProps = Omit<MuiTabsProps, "sx" | "children" | "onChange"
 export type MuiAccordionBaseProps = Omit<MuiAccordionProps, "sx" | "children" | "defaultExpanded" | "onChange">;
 export type MuiSelectBaseProps = Omit<MuiSelectProps, "sx" | "value" | "onClose" | "onOpen" | "input" | "label">;
 export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
+export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, "sx">;
+export type MuiAvatarBaseProps = Omit<MuiAvatarProps, "sx" | "src" | "children" | "variant" | "sizes">;
+export type MuiBadgeBaseProps = Omit<MuiBadgeProps, "sx" | "color" | "children" | "invisible" | "variant" | "className" | "badgeContent">;
 export type IconScale = "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge";
 export type IconColors = "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "white" | "black";
 export declare const scaleSize: Record<IconScale, number>;

package/dist/esm/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AA+JA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAoLA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "private": false,
   "description": "Norma Library. A React UI kit.",
   "scripts": {
@@ -44,6 +44,8 @@
     "@material-tailwind/react": "^2.1.1",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
+    "@mui/x-date-pickers": "^6.14.0",
+    "dayjs": "^1.11.9",
     "react-i18next": "^13.2.2",
     "react-scripts": "^5.0.1",
     "tslib": "^2.6.2"

package/src/components/Avatar.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+
+import {
+  ThemeProvider,
+  useMediaQuery,
+  Avatar as MuiVatar,
+} from "@mui/material";
+
+import { AvatarBaseProps } from "../interfaces";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+
+const AvatarStyled = styled(MuiVatar)({
+  textTransform: "none",
+  color: "currentcolor",
+});
+
+export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <AvatarStyled src={src} {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/Badge.tsx

@@ -0,0 +1,22 @@
+import React, { useMemo } from "react";
+
+import { ThemeProvider, useMediaQuery, Badge as MuiBadge } from "@mui/material";
+
+import { BadgeBaseProps } from "../interfaces";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+
+const BadgeStyled = styled(MuiBadge)({});
+
+export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.dark : themes.light),
+    [prefersDarkMode]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <BadgeStyled {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/DatePicker.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery } from "@mui/material";
+import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
+import { MobileDatePicker as MuiMobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
+import { DesktopDatePicker as MuiDesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
+import { DatePickerBaseProps } from "../interfaces";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+
+const MuiDatePickerStyled = styled(MuiDatePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+export const DatePicker = ({
+  label,
+  format = "DD/MM/YYYY",
+  language = "pt-br",
+  variant = "desktop",
+}: DatePickerBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+        <DemoContainer
+          components={["TimePicker", "MobileTimePicker", "DesktopTimePicker"]}
+        >
+          {variant === "responsive" && (
+            <MuiDatePickerStyled label={label} format={format} />
+          )}
+          {variant === "mobile" && (
+            <MuiMobileDatePickerStyled label={label} format={format} />
+          )}
+          {variant === "desktop" && (
+            <MuiDesktopDatePickerStyled label={label} format={format} />
+          )}
+        </DemoContainer>
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};