@factorearth/component-library 3.2.5 → 3.2.7-bs.0

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.
@@ -3,82 +3,82 @@ import * as Dialog from "@radix-ui/react-dialog";
3
3
  import styled from "@emotion/styled";
4
4
  import { Button } from "../../Atoms/Buttons/Button";
5
5
  import { FiX } from "react-icons/fi";
6
- export const StyledDialog = styled(Dialog.Overlay) `
7
- background-color: ${({ colorPalette }) => colorPalette.background.secondary};
8
- opacity: 0.8;
9
- position: absolute;
10
- inset: 0;
11
- animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
12
- z-index: 1000;
6
+ export const StyledDialog = styled(Dialog.Overlay) `
7
+ background-color: ${({ colorPalette }) => colorPalette.background.secondary};
8
+ opacity: 0.8;
9
+ position: absolute;
10
+ inset: 0;
11
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
12
+ z-index: 1000;
13
13
  `;
14
- export const StyledContent = styled(Dialog.Content) `
15
- background-color: ${({ colorPalette }) => colorPalette.background.primary};
16
- box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
17
- color: ${({ colorPalette }) => colorPalette.text.primary};
18
- border-radius: 4px;
19
- position: fixed;
20
- top: 50%;
21
- left: 50%;
22
- transform: translate(-50%, -50%);
23
- max-height: 85vh;
24
- animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
25
- z-index: 1000;
26
- display: flex;
27
- flex-direction: column;
28
- min-width: 300px;
29
- gap: 16px;
30
- :focus {
31
- outline: none;
32
- }
14
+ export const StyledContent = styled(Dialog.Content) `
15
+ background-color: ${({ colorPalette }) => colorPalette.background.primary};
16
+ box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
17
+ color: ${({ colorPalette }) => colorPalette.text.primary};
18
+ border-radius: 4px;
19
+ position: fixed;
20
+ top: 50%;
21
+ left: 50%;
22
+ transform: translate(-50%, -50%);
23
+ max-height: 85vh;
24
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
25
+ z-index: 1000;
26
+ display: flex;
27
+ flex-direction: column;
28
+ min-width: 300px;
29
+ gap: 16px;
30
+ :focus {
31
+ outline: none;
32
+ }
33
33
  `;
34
- export const DialogContainer = styled.div `
35
- display: flex;
36
- padding: 24px 24px 0px 24px;
37
- flex-direction: column;
38
- align-items: center;
39
- gap: 16px;
40
- align-self: stretch;
34
+ export const DialogContainer = styled.div `
35
+ display: flex;
36
+ padding: 24px 24px 0px 24px;
37
+ flex-direction: column;
38
+ align-items: center;
39
+ gap: 16px;
40
+ align-self: stretch;
41
41
  `;
42
- export const ModalTitleContainer = styled.div `
43
- display: flex;
44
- justify-content: space-between;
45
- width: 100%;
42
+ export const ModalTitleContainer = styled.div `
43
+ display: flex;
44
+ justify-content: space-between;
45
+ width: 100%;
46
46
  `;
47
- export const ModalTitle = styled.div `
48
- font-size: 24px;
49
- font-style: normal;
50
- font-weight: 600;
51
- line-height: 150%;
47
+ export const ModalTitle = styled.div `
48
+ font-size: 24px;
49
+ font-style: normal;
50
+ font-weight: 600;
51
+ line-height: 150%;
52
52
  `;
53
- export const ModalHeading = styled.div `
54
- font-size: 16px;
55
- font-style: normal;
56
- font-weight: 700;
57
- line-height: 150%;
53
+ export const ModalHeading = styled.div `
54
+ font-size: 16px;
55
+ font-style: normal;
56
+ font-weight: 700;
57
+ line-height: 150%;
58
58
  `;
59
- export const ModelSubHeading = styled.div `
60
- font-size: 16px;
61
- font-style: normal;
62
- font-weight: 400;
63
- line-height: 24px; /* 150% */
64
- letter-spacing: 0.16px;
65
- width: 100%;
59
+ export const ModelSubHeading = styled.div `
60
+ font-size: 16px;
61
+ font-style: normal;
62
+ font-weight: 400;
63
+ line-height: 24px; /* 150% */
64
+ letter-spacing: 0.16px;
65
+ width: 100%;
66
66
  `;
67
- export const ModalFooter = styled.div `
68
- display: flex;
69
- padding: 24px 16px;
70
- justify-content: center;
71
- align-items: center;
72
- gap: 16px;
73
- align-self: stretch;
67
+ export const ModalFooter = styled.div `
68
+ display: flex;
69
+ padding: 24px 16px;
70
+ justify-content: center;
71
+ align-items: center;
72
+ gap: 16px;
73
+ align-self: stretch;
74
74
  `;
75
- export const ModalInputBox = styled.div `
76
- display: flex;
77
- width: 322px;
78
- flex-direction: column;
79
- justify-content: center;
80
- align-items: flex-start;
81
- gap: 8px;
75
+ export const ModalInputBox = styled.div `
76
+ display: flex;
77
+ width: 322px;
78
+ flex-direction: column;
79
+ justify-content: center;
80
+ align-items: flex-start;
81
+ gap: 8px;
82
82
  `;
83
83
  export const Modal = (props) => {
84
84
  const { open, children, colorPalette, setOpen, ...remainderProps } = props;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorearth/component-library",
3
- "version": "3.2.5",
3
+ "version": "3.2.7-bs.0",
4
4
  "description": " A storybook component library for FactorEarth",
5
5
  "author": "madtrx <marlin.makori@gmail.com>",
6
6
  "homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
@@ -46,10 +46,11 @@
46
46
  "access": "public",
47
47
  "registry": "https://registry.npmjs.org/"
48
48
  },
49
- "gitHead": "39e4d074d327182e049257c0c5c9225984f38375",
49
+ "gitHead": "8fa455ff08dc32d9f166b3c57eed33cd68355436",
50
50
  "dependencies": {
51
51
  "@emotion/react": "^11.13.0",
52
52
  "@emotion/styled": "^11.13.0",
53
+ "@factorearth/recordmiddleware": "file:../..",
53
54
  "react-datepicker": "^7.3.0",
54
55
  "react-icons": "^5.3.0",
55
56
  "react-select": "^5.8.0"
@@ -1,14 +0,0 @@
1
- import React from "react";
2
- import { Colors } from "../../Theme/types";
3
- interface ModalProps {
4
- title: string;
5
- buttonText: string;
6
- triggerComponent?: (onOpen: () => void) => JSX.Element;
7
- modalComponent?: (onClose: () => void) => JSX.Element;
8
- children: React.ReactNode;
9
- colorPalette: Colors & string;
10
- onOpen: () => void;
11
- onClose: () => void;
12
- }
13
- export declare const Modal: (props: ModalProps) => React.JSX.Element;
14
- export {};
@@ -1,25 +0,0 @@
1
- import React from "react";
2
- import * as Dialog from "@radix-ui/react-dialog";
3
- const DefaultTrigger = ({ buttonText, colorPalette }) => {
4
- return (React.createElement(Dialog.Trigger, { asChild: true },
5
- React.createElement("button", { style: { color: colorPalette.text.primary } }, buttonText)));
6
- };
7
- const DefaultModalContent = ({ title, colorPalette, children }) => {
8
- return (React.createElement(React.Fragment, null,
9
- React.createElement(Dialog.Title, { style: { color: colorPalette.text.primary } }, title),
10
- children));
11
- };
12
- export const Modal = (props) => {
13
- const { title, buttonText, triggerComponent, children, colorPalette, onOpen, onClose, modalComponent } = props;
14
- return (React.createElement(Dialog.Root, null,
15
- triggerComponent ? (triggerComponent(onOpen)) : (React.createElement(DefaultTrigger, { buttonText: buttonText, colorPalette: colorPalette })),
16
- React.createElement(Dialog.Portal, null,
17
- React.createElement(Dialog.Overlay, null),
18
- React.createElement(Dialog.Content, { style: { backgroundColor: colorPalette.background.primary } },
19
- modalComponent ? (modalComponent(onClose)) : (React.createElement(DefaultModalContent, { colorPalette: colorPalette, title: title }, children)),
20
- React.createElement(Dialog.Close, { asChild: true },
21
- React.createElement("button", { "aria-label": "Close", style: { backgroundColor: colorPalette.background.primary, color: colorPalette.text.primary } },
22
- React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
23
- React.createElement("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))))))));
24
- };
25
- //# sourceMappingURL=Modal.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../lib/Atoms/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAcjD,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAuB,EAAE,EAAE;IAC5E,OAAO,CACN,oBAAC,MAAM,CAAC,OAAO,IAAC,OAAO;QACtB,gCAAQ,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IACjD,UAAU,CACH,CACO,CACjB,CAAC;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAA4B,EAAE,EAAE;IAC3F,OAAO,CACN;QACC,oBAAC,MAAM,CAAC,KAAK,IACZ,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IAE1C,KAAK,CACQ;QACd,QAAQ,CACP,CACH,CAAC;AACH,CAAC,CAAA;AAaD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC1C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE/G,OAAO,CACN,oBAAC,MAAM,CAAC,IAAI;QACV,gBAAgB,CAAC,CAAC,CAAC,CACnB,gBAAgB,CAAC,MAAM,CAAC,CACxB,CAAC,CAAC,CAAC,CACH,oBAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,GAAI,CACtE;QAED,oBAAC,MAAM,CAAC,MAAM;YACb,oBAAC,MAAM,CAAC,OAAO,OAAI;YACnB,oBAAC,MAAM,CAAC,OAAO,IACd,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE;gBAE1D,cAAc,CAAC,CAAC,CAAC,CACjB,cAAc,CAAC,OAAO,CAAC,CACvB,CAAC,CAAC,CAAC,CACH,oBAAC,mBAAmB,IAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAuB,CAC/F;gBAED,oBAAC,MAAM,CAAC,KAAK,IAAC,OAAO;oBACpB,8CACY,OAAO,EAClB,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE;wBAE7F,6BACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;4BAElC,8BACC,CAAC,EAAC,ygBAAygB,EAC3gB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACX,CACH,CACE,CACK,CACC,CACF,CACH,CACd,CAAC;AACH,CAAC,CAAA"}