@zidsa/zidmui 2.5.8 → 2.5.9

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.
Files changed (7) hide show
  1. package/dist/react/cjs/theme/components/app-icon-box.js +72 -0
  2. package/dist/react/cjs/theme/components/app-icon-box.js.map +1 -0
  3. package/dist/react/es/theme/components/app-icon-box.js +72 -0
  4. package/dist/react/es/theme/components/app-icon-box.js.map +1 -0
  5. package/dist/react/types/theme/components/app-icon-box.d.ts +7 -0
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/package.json +1 -1
package/dist/react/cjs/theme/components/app-icon-box.js ADDED
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const material = require("@mui/material");
5
+ const AppIconBox = ({
6
+ children,
7
+ background = "default",
8
+ ...props
9
+ }) => {
10
+ return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { "data-background-color": background, ...props, children });
11
+ };
12
+ const IconWrapper = material.styled(material.Box)(({ theme }) => ({
13
+ display: "flex",
14
+ alignItems: "center",
15
+ justifyContent: "center",
16
+ padding: theme.spacing(1.5),
17
+ borderRadius: theme.spacing(1.5),
18
+ backgroundColor: theme.palette.action.selected,
19
+ flexShrink: 0,
20
+ "&[data-background-color='default']": {
21
+ backgroundColor: theme.palette.action.hover
22
+ },
23
+ "&[data-background-color='primary']": {
24
+ backgroundColor: theme.palette.colors.primary[100]
25
+ },
26
+ "&[data-background-color='blue']": {
27
+ backgroundColor: theme.palette.colors.blue[100]
28
+ },
29
+ "&[data-background-color='red']": {
30
+ backgroundColor: theme.palette.colors.red[100]
31
+ },
32
+ "&[data-background-color='green']": {
33
+ backgroundColor: theme.palette.colors.green[100]
34
+ },
35
+ "&[data-background-color='yellow']": {
36
+ backgroundColor: theme.palette.colors.yellow[100]
37
+ },
38
+ "&[data-background-color='orange']": {
39
+ backgroundColor: theme.palette.colors.orange[100]
40
+ },
41
+ "&[data-background-color='secondary']": {
42
+ backgroundColor: material.alpha(theme.palette.secondary.main, 0.08)
43
+ },
44
+ ...theme.applyStyles("dark", {
45
+ "&[data-background-color='default']": {
46
+ backgroundColor: theme.palette.action.hover
47
+ },
48
+ "&[data-background-color='primary']": {
49
+ backgroundColor: material.alpha(theme.palette.colors.primary[900], 0.3)
50
+ },
51
+ "&[data-background-color='blue']": {
52
+ backgroundColor: material.alpha(theme.palette.colors.blue[900], 0.3)
53
+ },
54
+ "&[data-background-color='red']": {
55
+ backgroundColor: material.alpha(theme.palette.colors.red[900], 0.3)
56
+ },
57
+ "&[data-background-color='green']": {
58
+ backgroundColor: material.alpha(theme.palette.colors.green[900], 0.3)
59
+ },
60
+ "&[data-background-color='yellow']": {
61
+ backgroundColor: material.alpha(theme.palette.colors.yellow[900], 0.3)
62
+ },
63
+ "&[data-background-color='orange']": {
64
+ backgroundColor: material.alpha(theme.palette.colors.orange[900], 0.3)
65
+ },
66
+ "&[data-background-color='secondary']": {
67
+ backgroundColor: material.alpha(theme.palette.secondary.main, 0.15)
68
+ }
69
+ })
70
+ }));
71
+ exports.AppIconBox = AppIconBox;
72
+ //# sourceMappingURL=app-icon-box.js.map
package/dist/react/cjs/theme/components/app-icon-box.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-icon-box.js","sources":["../../../../../src/theme/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n | 'default'\n | 'primary'\n | 'blue'\n | 'red'\n | 'green'\n | 'yellow'\n | 'orange'\n | 'secondary';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n children: React.ReactNode;\n background?: AppIconBoxbackgroundColor;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n children,\n background = 'default',\n ...props\n}) => {\n return (\n <IconWrapper data-background-color={background} {...props}>\n {children}\n </IconWrapper>\n );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(1.5),\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.action.selected,\n flexShrink: 0,\n\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: theme.palette.colors.primary[100],\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: theme.palette.colors.blue[100],\n },\n \"&[data-background-color='red']\": {\n backgroundColor: theme.palette.colors.red[100],\n },\n \"&[data-background-color='green']\": {\n backgroundColor: theme.palette.colors.green[100],\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: theme.palette.colors.yellow[100],\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: theme.palette.colors.orange[100],\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n },\n\n ...theme.applyStyles('dark', {\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n },\n \"&[data-background-color='red']\": {\n backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n },\n \"&[data-background-color='green']\": {\n backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n },\n }),\n}));\n"],"names":["styled","Box","alpha"],"mappings":";;;;AAoBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,wCACG,aAAA,EAAY,yBAAuB,YAAa,GAAG,OACjD,UACH;AAEJ;AAIA,MAAM,cAAcA,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS,MAAM,QAAQ,GAAG;AAAA,EAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiBC,SAAAA,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiBA,SAAAA,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;;"}
package/dist/react/es/theme/components/app-icon-box.js ADDED
@@ -0,0 +1,72 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { styled, Box, alpha } from "@mui/material";
3
+ const AppIconBox = ({
4
+ children,
5
+ background = "default",
6
+ ...props
7
+ }) => {
8
+ return /* @__PURE__ */ jsx(IconWrapper, { "data-background-color": background, ...props, children });
9
+ };
10
+ const IconWrapper = styled(Box)(({ theme }) => ({
11
+ display: "flex",
12
+ alignItems: "center",
13
+ justifyContent: "center",
14
+ padding: theme.spacing(1.5),
15
+ borderRadius: theme.spacing(1.5),
16
+ backgroundColor: theme.palette.action.selected,
17
+ flexShrink: 0,
18
+ "&[data-background-color='default']": {
19
+ backgroundColor: theme.palette.action.hover
20
+ },
21
+ "&[data-background-color='primary']": {
22
+ backgroundColor: theme.palette.colors.primary[100]
23
+ },
24
+ "&[data-background-color='blue']": {
25
+ backgroundColor: theme.palette.colors.blue[100]
26
+ },
27
+ "&[data-background-color='red']": {
28
+ backgroundColor: theme.palette.colors.red[100]
29
+ },
30
+ "&[data-background-color='green']": {
31
+ backgroundColor: theme.palette.colors.green[100]
32
+ },
33
+ "&[data-background-color='yellow']": {
34
+ backgroundColor: theme.palette.colors.yellow[100]
35
+ },
36
+ "&[data-background-color='orange']": {
37
+ backgroundColor: theme.palette.colors.orange[100]
38
+ },
39
+ "&[data-background-color='secondary']": {
40
+ backgroundColor: alpha(theme.palette.secondary.main, 0.08)
41
+ },
42
+ ...theme.applyStyles("dark", {
43
+ "&[data-background-color='default']": {
44
+ backgroundColor: theme.palette.action.hover
45
+ },
46
+ "&[data-background-color='primary']": {
47
+ backgroundColor: alpha(theme.palette.colors.primary[900], 0.3)
48
+ },
49
+ "&[data-background-color='blue']": {
50
+ backgroundColor: alpha(theme.palette.colors.blue[900], 0.3)
51
+ },
52
+ "&[data-background-color='red']": {
53
+ backgroundColor: alpha(theme.palette.colors.red[900], 0.3)
54
+ },
55
+ "&[data-background-color='green']": {
56
+ backgroundColor: alpha(theme.palette.colors.green[900], 0.3)
57
+ },
58
+ "&[data-background-color='yellow']": {
59
+ backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3)
60
+ },
61
+ "&[data-background-color='orange']": {
62
+ backgroundColor: alpha(theme.palette.colors.orange[900], 0.3)
63
+ },
64
+ "&[data-background-color='secondary']": {
65
+ backgroundColor: alpha(theme.palette.secondary.main, 0.15)
66
+ }
67
+ })
68
+ }));
69
+ export {
70
+ AppIconBox
71
+ };
72
+ //# sourceMappingURL=app-icon-box.js.map
package/dist/react/es/theme/components/app-icon-box.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-icon-box.js","sources":["../../../../../src/theme/components/app-icon-box.tsx"],"sourcesContent":["import { Box, BoxProps, alpha, styled } from '@mui/material';\n\n//\n//\n\nexport type AppIconBoxbackgroundColor =\n | 'default'\n | 'primary'\n | 'blue'\n | 'red'\n | 'green'\n | 'yellow'\n | 'orange'\n | 'secondary';\n\nexport type AppIconBoxProps = Omit<BoxProps, 'color'> & {\n children: React.ReactNode;\n background?: AppIconBoxbackgroundColor;\n};\n\nexport const AppIconBox: React.FC<AppIconBoxProps> = ({\n children,\n background = 'default',\n ...props\n}) => {\n return (\n <IconWrapper data-background-color={background} {...props}>\n {children}\n </IconWrapper>\n );\n};\n\n//\n\nconst IconWrapper = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(1.5),\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.action.selected,\n flexShrink: 0,\n\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: theme.palette.colors.primary[100],\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: theme.palette.colors.blue[100],\n },\n \"&[data-background-color='red']\": {\n backgroundColor: theme.palette.colors.red[100],\n },\n \"&[data-background-color='green']\": {\n backgroundColor: theme.palette.colors.green[100],\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: theme.palette.colors.yellow[100],\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: theme.palette.colors.orange[100],\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.08),\n },\n\n ...theme.applyStyles('dark', {\n \"&[data-background-color='default']\": {\n backgroundColor: theme.palette.action.hover,\n },\n \"&[data-background-color='primary']\": {\n backgroundColor: alpha(theme.palette.colors.primary[900], 0.3),\n },\n \"&[data-background-color='blue']\": {\n backgroundColor: alpha(theme.palette.colors.blue[900], 0.3),\n },\n \"&[data-background-color='red']\": {\n backgroundColor: alpha(theme.palette.colors.red[900], 0.3),\n },\n \"&[data-background-color='green']\": {\n backgroundColor: alpha(theme.palette.colors.green[900], 0.3),\n },\n \"&[data-background-color='yellow']\": {\n backgroundColor: alpha(theme.palette.colors.yellow[900], 0.3),\n },\n \"&[data-background-color='orange']\": {\n backgroundColor: alpha(theme.palette.colors.orange[900], 0.3),\n },\n \"&[data-background-color='secondary']\": {\n backgroundColor: alpha(theme.palette.secondary.main, 0.15),\n },\n }),\n}));\n"],"names":[],"mappings":";;AAoBO,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,6BACG,aAAA,EAAY,yBAAuB,YAAa,GAAG,OACjD,UACH;AAEJ;AAIA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC9C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS,MAAM,QAAQ,GAAG;AAAA,EAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EACtC,YAAY;AAAA,EAEZ,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,EAAA;AAAA,EAExC,sCAAsC;AAAA,IACpC,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA;AAAA,EAEnD,mCAAmC;AAAA,IACjC,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhD,kCAAkC;AAAA,IAChC,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/C,oCAAoC;AAAA,IAClC,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAEjD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,qCAAqC;AAAA,IACnC,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElD,wCAAwC;AAAA,IACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,EAAA;AAAA,EAG3D,GAAG,MAAM,YAAY,QAAQ;AAAA,IAC3B,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAExC,sCAAsC;AAAA,MACpC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE/D,mCAAmC;AAAA,MACjC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,KAAK,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE5D,kCAAkC;AAAA,MAChC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,IAAI,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE3D,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE7D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,qCAAqC;AAAA,MACnC,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,GAAG;AAAA,IAAA;AAAA,IAE9D,wCAAwC;AAAA,MACtC,iBAAiB,MAAM,MAAM,QAAQ,UAAU,MAAM,IAAI;AAAA,IAAA;AAAA,EAC3D,CACD;AACH,EAAE;"}
package/dist/react/types/theme/components/app-icon-box.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BoxProps } from '@mui/material';
2
+ export type AppIconBoxbackgroundColor = 'default' | 'primary' | 'blue' | 'red' | 'green' | 'yellow' | 'orange' | 'secondary';
3
+ export type AppIconBoxProps = Omit<BoxProps, 'color'> & {
4
+ children: React.ReactNode;
5
+ background?: AppIconBoxbackgroundColor;
6
+ };
7
+ export declare const AppIconBox: React.FC<AppIconBoxProps>;