@loopr-ai/craft 0.8.3 → 0.10.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.
Files changed (55) hide show
  1. package/dist/Box-96e795c4.js +58 -0
  2. package/dist/{ButtonBase-08b16b61.js → ButtonBase-46c20f20.js} +3 -3
  3. package/dist/{TextField-f61d210a.js → TextField-df89b641.js} +373 -387
  4. package/dist/{TransitionGroupContext-0e899f4c.js → TransitionGroupContext-21923db7.js} +1 -1
  5. package/dist/ZoomControllers-657c8b74.js +3383 -0
  6. package/dist/components/cell/AvatarGroup/index.js +3 -3
  7. package/dist/components/cell/Button/index.js +3 -3
  8. package/dist/components/cell/Chip/index.js +5 -5
  9. package/dist/components/cell/ProgressBar/index.js +3 -3
  10. package/dist/components/cell/Search/index.js +2 -2
  11. package/dist/components/cell/Typography/index.js +1 -1
  12. package/dist/components/organ/Form/ErrorMessage/ErrorMessage.styles.d.ts +14 -0
  13. package/dist/components/organ/Form/ErrorMessage/ErrorMessage.styles.js +16 -0
  14. package/dist/components/organ/Form/ErrorMessage/index.d.ts +6 -0
  15. package/dist/components/organ/Form/ErrorMessage/index.js +14 -0
  16. package/dist/components/organ/Form/Form.interfaces.d.ts +4 -2
  17. package/dist/components/organ/Form/Form.styles.d.ts +6 -99
  18. package/dist/components/organ/Form/Form.styles.js +8 -102
  19. package/dist/components/organ/Form/FormInput.d.ts +1 -0
  20. package/dist/components/organ/Form/FormInput.js +57 -1525
  21. package/dist/components/organ/Form/Label/Label.styles.d.ts +14 -0
  22. package/dist/components/organ/Form/Label/Label.styles.js +16 -0
  23. package/dist/components/organ/Form/Label/index.d.ts +10 -0
  24. package/dist/components/organ/Form/Label/index.js +17 -0
  25. package/dist/components/organ/Form/RadioInput/RadioInput.styles.d.ts +17 -0
  26. package/dist/components/organ/Form/RadioInput/RadioInput.styles.js +20 -0
  27. package/dist/components/organ/Form/RadioInput/index.d.ts +16 -0
  28. package/dist/components/organ/Form/RadioInput/index.js +1053 -0
  29. package/dist/components/organ/Form/TextfieldInput/TextfieldInput.styles.d.ts +75 -0
  30. package/dist/components/organ/Form/TextfieldInput/TextfieldInput.styles.js +66 -0
  31. package/dist/components/organ/Form/TextfieldInput/index.d.ts +24 -0
  32. package/dist/components/organ/Form/TextfieldInput/index.js +536 -0
  33. package/dist/components/organ/Form/index.d.ts +3 -1
  34. package/dist/components/organ/Form/index.js +139 -149
  35. package/dist/components/organ/ZoomControlWithDrag/ZoomControllers.js +2 -2
  36. package/dist/components/organ/ZoomControlWithDrag/index.js +2 -2
  37. package/dist/{createSvgIcon-45340b5e.js → createSvgIcon-59e7bc15.js} +3195 -3245
  38. package/dist/{createSvgIcon-5aac746d.js → createSvgIcon-b444ce70.js} +5 -5
  39. package/dist/{createTheme-759a022d.js → createTheme-d2329909.js} +4 -4
  40. package/dist/dividerClasses-9354a5c9.js +10 -0
  41. package/dist/{exactProp-23d6a154.js → exactProp-3ee21234.js} +1 -1
  42. package/dist/{extendSxProp-cf8fd923.js → extendSxProp-f6cb682b.js} +1 -1
  43. package/dist/global/colors.d.ts +1 -0
  44. package/dist/global/colors.js +5 -4
  45. package/dist/global/theme.js +1 -1
  46. package/dist/{index-c9c32237.js → index-ae3eb123.js} +8 -8
  47. package/dist/main.js +1 -1
  48. package/dist/providers/CraftThemeProvider.js +2 -2
  49. package/dist/{styled-78608e1f.js → styled-8f7db30d.js} +39 -39
  50. package/dist/useControlled-4e337b2f.js +54 -0
  51. package/dist/useFormControl-b25c5813.js +19 -0
  52. package/dist/{useTheme-8906bd79.js → useTheme-21caf71b.js} +1 -1
  53. package/package.json +1 -1
  54. package/dist/Tooltip-e797a425.js +0 -2022
  55. package/dist/ZoomControllers-d04c25f8.js +0 -1432
@@ -1,8 +1,8 @@
1
1
  import { jsx as h, jsxs as G } from "react/jsx-runtime";
2
- import { g as I, a as l, _ as k, P as a } from "../../../createTheme-759a022d.js";
2
+ import { g as I, a as l, _ as k, P as a } from "../../../createTheme-d2329909.js";
3
3
  import * as g from "react";
4
- import { g as D, s as M, a as E, c as R, b as U, f as F } from "../../../styled-78608e1f.js";
5
- import { c as q } from "../../../createSvgIcon-5aac746d.js";
4
+ import { g as D, s as M, b as E, c as R, e as U, h as F } from "../../../styled-8f7db30d.js";
5
+ import { c as q } from "../../../createSvgIcon-b444ce70.js";
6
6
  import { c as V } from "../../../chainPropTypes-004bf492.js";
7
7
  const B = q(/* @__PURE__ */ h("path", {
8
8
  d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
@@ -2,9 +2,9 @@ import { jsx as C, jsxs as F } from "react/jsx-runtime";
2
2
  import * as u from "react";
3
3
  import { forwardRef as U } from "react";
4
4
  import { getColorToHex as b } from "../../../global/colors.js";
5
- import { g as D, c as s, a as t, e as g, _ as H, P as a } from "../../../createTheme-759a022d.js";
6
- import { g as A, s as y, r as q, e as J, a as K, c as R, b as Q } from "../../../styled-78608e1f.js";
7
- import { B as X } from "../../../ButtonBase-08b16b61.js";
5
+ import { g as D, b as s, a as t, f as g, _ as H, P as a } from "../../../createTheme-d2329909.js";
6
+ import { g as A, s as y, r as q, f as J, b as K, c as R, e as Q } from "../../../styled-8f7db30d.js";
7
+ import { B as X } from "../../../ButtonBase-46c20f20.js";
8
8
  function Y(o) {
9
9
  return D("MuiButton", o);
10
10
  }
@@ -1,11 +1,11 @@
1
1
  import { jsx as m, jsxs as Q } from "react/jsx-runtime";
2
2
  import * as v from "react";
3
3
  import { useMemo as L } from "react";
4
- import { g as X, c as r, a as f, e as b, _ as Y, P as l } from "../../../createTheme-759a022d.js";
5
- import { g as Z, s as U, a as w, c as k, b as oo } from "../../../styled-78608e1f.js";
6
- import { c as ao } from "../../../createSvgIcon-5aac746d.js";
7
- import { u as lo } from "../../../TransitionGroupContext-0e899f4c.js";
8
- import { B as M } from "../../../ButtonBase-08b16b61.js";
4
+ import { g as X, b as r, a as f, f as b, _ as Y, P as l } from "../../../createTheme-d2329909.js";
5
+ import { g as Z, s as U, b as w, c as k, e as oo } from "../../../styled-8f7db30d.js";
6
+ import { c as ao } from "../../../createSvgIcon-b444ce70.js";
7
+ import { u as lo } from "../../../TransitionGroupContext-21923db7.js";
8
+ import { B as M } from "../../../ButtonBase-46c20f20.js";
9
9
  import { u as eo } from "../../../unsupportedProp-3dbf01f6.js";
10
10
  const ro = ao(/* @__PURE__ */ m("path", {
11
11
  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
@@ -1,9 +1,9 @@
1
1
  import { jsxs as j, jsx as v } from "react/jsx-runtime";
2
2
  import { getColorToHex as $ } from "../../../global/colors.js";
3
- import { g as D, c as n, a as l, _ as q, P as o, l as E, b as U } from "../../../createTheme-759a022d.js";
3
+ import { g as D, b as n, a as l, _ as q, P as o, l as E, e as U } from "../../../createTheme-d2329909.js";
4
4
  import * as z from "react";
5
- import { g as w, s as h, a as A, c as F, b as K } from "../../../styled-78608e1f.js";
6
- import { u as V } from "../../../useTheme-8906bd79.js";
5
+ import { g as w, s as h, b as A, c as F, e as K } from "../../../styled-8f7db30d.js";
6
+ import { u as V } from "../../../useTheme-21caf71b.js";
7
7
  import { k as P, c as x } from "../../../emotion-react.browser.esm-ff33c213.js";
8
8
  function S(r) {
9
9
  return D("MuiLinearProgress", r);
@@ -1,6 +1,6 @@
1
1
  import f, { jsx as r } from "react/jsx-runtime";
2
- import { r as c, i as p } from "../../../createSvgIcon-45340b5e.js";
3
- import { T as m } from "../../../TextField-f61d210a.js";
2
+ import { r as c, i as p } from "../../../createSvgIcon-59e7bc15.js";
3
+ import { T as m } from "../../../TextField-df89b641.js";
4
4
  var e = {}, v = p;
5
5
  Object.defineProperty(e, "__esModule", {
6
6
  value: !0
@@ -1,7 +1,7 @@
1
1
  import "react/jsx-runtime";
2
2
  import "../../../global/colors.js";
3
3
  import "../../../global/theme.js";
4
- import { T as i } from "../../../index-c9c32237.js";
4
+ import { T as i } from "../../../index-ae3eb123.js";
5
5
  export {
6
6
  i as default
7
7
  };
@@ -0,0 +1,14 @@
1
+ declare const errorStyles: {
2
+ errorContainer: {
3
+ display: string;
4
+ alignItems: string;
5
+ gap: string;
6
+ marginTop: string;
7
+ };
8
+ errorIcon: {
9
+ color: string;
10
+ width: string;
11
+ height: string;
12
+ };
13
+ };
14
+ export default errorStyles;
@@ -0,0 +1,16 @@
1
+ const r = {
2
+ errorContainer: {
3
+ display: "flex",
4
+ alignItems: "center",
5
+ gap: "0.5rem",
6
+ marginTop: "0.25rem"
7
+ },
8
+ errorIcon: {
9
+ color: "red",
10
+ width: "1rem",
11
+ height: "1rem"
12
+ }
13
+ };
14
+ export {
15
+ r as default
16
+ };
@@ -0,0 +1,6 @@
1
+ import { CraftFC } from "../../../../global/interfaces";
2
+ interface ErrorMessageProps {
3
+ message: string;
4
+ }
5
+ declare const ErrorMessage: CraftFC<ErrorMessageProps>;
6
+ export default ErrorMessage;
@@ -0,0 +1,14 @@
1
+ import { jsx as r, jsxs as e } from "react/jsx-runtime";
2
+ import { T as s } from "../../../../index-ae3eb123.js";
3
+ import o from "./ErrorMessage.styles.js";
4
+ import { B as n } from "../../../../Box-96e795c4.js";
5
+ import { c as m } from "../../../../createSvgIcon-b444ce70.js";
6
+ const a = m(/* @__PURE__ */ r("path", {
7
+ d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
8
+ }), "InfoOutlined"), h = ({ message: t }) => /* @__PURE__ */ e(n, { sx: o.errorContainer, children: [
9
+ /* @__PURE__ */ r(a, { sx: o.errorIcon }),
10
+ /* @__PURE__ */ r(s, { component: "span", type: "subtitleNormal", textColor: "error", children: t })
11
+ ] });
12
+ export {
13
+ h as default
14
+ };
@@ -8,10 +8,11 @@ export interface InputAdornments {
8
8
  export interface FormInputAdornments {
9
9
  [key: string]: InputAdornments;
10
10
  }
11
+ export type InputFieldTypes = "text" | "number" | "select" | "email" | "password" | "custom" | "radio";
11
12
  export interface InputField {
12
13
  label: string;
13
14
  name: string;
14
- type: "text" | "number" | "select" | "email" | "password" | "custom" | "radio";
15
+ type: InputFieldTypes;
15
16
  placeholder?: string;
16
17
  required?: boolean;
17
18
  defaultValue?: string;
@@ -23,9 +24,10 @@ export interface InputField {
23
24
  export interface Option {
24
25
  name: string;
25
26
  value: string;
27
+ description?: string;
26
28
  }
27
29
  export type OptionsType = Array<Option> | Array<string>;
28
- interface OptionsResponseHandler {
30
+ export interface OptionsResponseHandler {
29
31
  key: string;
30
32
  name: string;
31
33
  value: string | number;
@@ -1,110 +1,17 @@
1
- declare const styles: {
1
+ declare const formStyles: {
2
2
  alignVertical: {
3
3
  display: string;
4
4
  flexDirection: string;
5
5
  };
6
- formInputWrapper: {
7
- display: string;
8
- alignItems: string;
9
- outline: string;
10
- outlineOffset: string;
11
- border: string;
12
- borderBottom: string;
13
- "&:first-of-type": {
14
- border: string;
15
- borderRadius: string;
16
- borderBottom: string;
17
- };
18
- "&:last-of-type": {
19
- borderRadius: string;
20
- borderBottom: string;
21
- };
22
- "&:only-of-type": {
23
- borderRadius: string;
24
- };
25
- "& > label": {
26
- flex: number;
27
- };
28
- "& > div": {
29
- flex: number;
30
- overflow: string;
31
- };
32
- "&:has(.Mui-focused)": {
33
- outlineColor: string;
34
- };
6
+ inputWrapper: {
7
+ marginBottom: string;
35
8
  };
36
9
  heading: {
37
10
  textAlign: string;
38
- fontWeight: number;
11
+ fontWeight: string;
12
+ fontFamily: string;
39
13
  marginTop: string;
40
14
  marginBottom: string;
41
15
  };
42
- label: {
43
- color: string;
44
- textAlign: string;
45
- padding: string;
46
- };
47
- textfieldWrapper: {
48
- padding: string;
49
- "& > div": {
50
- width: string;
51
- borderRadius: string;
52
- };
53
- };
54
- textfield: {
55
- "& .MuiInputBase-root": {
56
- paddingLeft: string;
57
- paddingRight: string;
58
- "& input": {
59
- textAlign: string;
60
- padding: string;
61
- };
62
- "& fieldset": {
63
- border: string;
64
- };
65
- "&.Mui-focused": {
66
- background: string;
67
- "& .MuiSelect-select > span::before": {
68
- color: string;
69
- };
70
- "& input::placeholder": {
71
- color: string;
72
- };
73
- };
74
- };
75
- "& .MuiSelect-select": {
76
- padding: string;
77
- position: string;
78
- textAlign: string;
79
- "& > span::before": {
80
- position: string;
81
- right: string;
82
- };
83
- };
84
- };
85
- selectDropdown: {
86
- boxShadow: string;
87
- border: string;
88
- borderRadius: string;
89
- };
90
- tooltipPopper: {
91
- zIndex: number;
92
- };
93
- tooltip: {
94
- "& .MuiTypography-root": {
95
- display: string;
96
- gap: string;
97
- alignItems: string;
98
- };
99
- };
100
- errorIcon: {
101
- fontSize: string;
102
- color: string;
103
- };
104
- labelAdornmentBox: {
105
- display: string;
106
- alignItems: string;
107
- padding: string;
108
- };
109
16
  };
110
- export default styles;
17
+ export default formStyles;
@@ -1,113 +1,19 @@
1
- import { customColors as e } from "../../../global/colors.js";
2
- const o = {
1
+ const t = {
3
2
  alignVertical: {
4
3
  display: "flex",
5
4
  flexDirection: "column"
6
5
  },
7
- formInputWrapper: {
8
- display: "flex",
9
- alignItems: "center",
10
- outline: "1px solid transparent",
11
- outlineOffset: "-1px",
12
- border: `1px solid ${e.borderGrey}`,
13
- borderBottom: "none",
14
- "&:first-of-type": {
15
- border: `1px solid ${e.borderGrey}`,
16
- borderRadius: "4px 4px 0 0",
17
- borderBottom: "none"
18
- },
19
- "&:last-of-type": {
20
- borderRadius: "0 0 4px 4px",
21
- borderBottom: `1px solid ${e.borderGrey}`
22
- },
23
- "&:only-of-type": {
24
- borderRadius: "4px"
25
- },
26
- "& > label": {
27
- flex: 1
28
- },
29
- "& > div": {
30
- flex: 2,
31
- overflow: "hidden"
32
- },
33
- "&:has(.Mui-focused)": {
34
- outlineColor: "black"
35
- }
6
+ inputWrapper: {
7
+ marginBottom: "1rem"
36
8
  },
37
9
  heading: {
38
10
  textAlign: "left",
39
- fontWeight: 500,
40
- marginTop: "2rem",
41
- marginBottom: "0.75rem"
42
- },
43
- label: {
44
- color: e.darkGrey,
45
- textAlign: "left",
46
- padding: " 0 0.75rem"
47
- },
48
- textfieldWrapper: {
49
- padding: "0.5rem",
50
- "& > div": {
51
- width: "100%",
52
- borderRadius: "4px"
53
- }
54
- },
55
- textfield: {
56
- "& .MuiInputBase-root": {
57
- paddingLeft: "0.5rem",
58
- paddingRight: "0.5rem",
59
- "& input": {
60
- textAlign: "right",
61
- padding: "0.75rem"
62
- },
63
- "& fieldset": {
64
- border: "none"
65
- },
66
- "&.Mui-focused": {
67
- background: e.lightGrey,
68
- "& .MuiSelect-select > span::before": {
69
- color: "rgba(153, 153, 153, 0.6)"
70
- },
71
- "& input::placeholder": {
72
- color: e.grey
73
- }
74
- }
75
- },
76
- "& .MuiSelect-select": {
77
- padding: "0.75rem",
78
- position: "relative",
79
- textAlign: "right",
80
- "& > span::before": {
81
- position: "absolute",
82
- right: "2rem"
83
- }
84
- }
85
- },
86
- selectDropdown: {
87
- boxShadow: "0px 2px 8px 0px rgba(0,0,0,0.8)",
88
- border: "2px solid #E9F0F0",
89
- borderRadius: "4px"
90
- },
91
- tooltipPopper: {
92
- zIndex: 1
93
- },
94
- tooltip: {
95
- "& .MuiTypography-root": {
96
- display: "flex",
97
- gap: "0.25rem",
98
- alignItems: "center"
99
- }
100
- },
101
- errorIcon: {
102
- fontSize: "0.75rem",
103
- color: e.redLight
104
- },
105
- labelAdornmentBox: {
106
- display: "flex",
107
- alignItems: "center",
108
- padding: "0 0.5rem"
11
+ fontWeight: "bold",
12
+ fontFamily: "DM Sans, sans-serif",
13
+ marginTop: "1rem",
14
+ marginBottom: "0.5rem"
109
15
  }
110
16
  };
111
17
  export {
112
- o as default
18
+ t as default
113
19
  };
@@ -4,6 +4,7 @@ export interface FormInputProps extends SelectField {
4
4
  value: string;
5
5
  handleChange: (name: string, value: string) => void;
6
6
  error?: boolean;
7
+ authHeader?: string;
7
8
  }
8
9
  /**
9
10
  * Form input field