jcicl 0.0.56 → 0.0.58
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.
- package/.chunks/ButtonBase.js +202 -209
- package/.chunks/Input.js +6722 -0
- package/.chunks/Portal.js +824 -0
- package/.chunks/TransitionGroupContext.js +60 -78
- package/.chunks/elementTypeAcceptingRef.js +23 -0
- package/.chunks/isFocusVisible.js +12 -0
- package/animation/Spin/Spin.d.ts +5 -0
- package/animation/Spin/Spin.js +22 -0
- package/animation/Spin/index.d.ts +1 -0
- package/animation/Spin/index.js +4 -0
- package/animation/index.d.ts +1 -0
- package/animation/index.js +4 -2
- package/base/Button/Button.d.ts +1 -1
- package/base/Button/Button.js +66 -64
- package/base/Input/Input.d.ts +4 -1
- package/base/Input/Input.js +6 -7486
- package/base/Input/index.d.ts +1 -1
- package/base/Input/index.js +2 -2
- package/base/LabeledValue/LabeledValue.js +23 -12
- package/base/index.js +6 -6
- package/composite/Accordion/Accordion.d.ts +15 -0
- package/composite/Accordion/Accordion.js +65 -0
- package/composite/Accordion/index.d.ts +1 -0
- package/composite/Accordion/index.js +4 -0
- package/composite/InfoCard/InfoCard.d.ts +3 -0
- package/composite/InfoCard/InfoCard.js +13 -11
- package/composite/LabeledInput/LabeledInput.d.ts +9 -0
- package/composite/LabeledInput/LabeledInput.js +35 -0
- package/composite/LabeledInput/index.d.ts +1 -0
- package/composite/LabeledInput/index.js +4 -0
- package/composite/Tooltip/Tooltip.d.ts +7 -0
- package/composite/Tooltip/Tooltip.js +2092 -0
- package/composite/Tooltip/index.d.ts +1 -0
- package/composite/Tooltip/index.js +4 -0
- package/composite/index.d.ts +3 -0
- package/composite/index.js +16 -10
- package/index.d.ts +3 -3
- package/index.js +50 -40
- package/package.json +1 -1
- package/supercomposite/AppHeader/AppHeader.js +1 -1
- package/supercomposite/EditableInfoCard/EditableInfoCard.d.ts +29 -0
- package/supercomposite/EditableInfoCard/EditableInfoCard.js +223 -0
- package/supercomposite/EditableInfoCard/index.d.ts +1 -0
- package/supercomposite/EditableInfoCard/index.js +4 -0
- package/supercomposite/index.d.ts +1 -0
- package/supercomposite/index.js +6 -4
- package/theme.d.ts +8 -0
- package/theme.js +7 -0
package/base/Input/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from './Input';
|
|
1
|
+
export { default, type InputProps } from './Input';
|
package/base/Input/index.js
CHANGED
|
@@ -1,23 +1,34 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { n
|
|
3
|
-
import { c as
|
|
4
|
-
const
|
|
5
|
-
...
|
|
1
|
+
import { jsxs as e, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { n } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
+
import { c as r } from "../../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
const o = n("span")({
|
|
5
|
+
...r`
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: nowrap;
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
gap: 0.5rem;
|
|
6
10
|
font-family: 'Roboto', sans-serif;
|
|
11
|
+
|
|
7
12
|
span {
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
flex-basis: 50%;
|
|
8
15
|
font-weight: bold;
|
|
9
16
|
text-transform: capitalize;
|
|
10
17
|
}
|
|
18
|
+
|
|
19
|
+
p {
|
|
20
|
+
margin: 0;
|
|
21
|
+
flex-basis: 50%;
|
|
22
|
+
}
|
|
11
23
|
`
|
|
12
|
-
}),
|
|
13
|
-
/* @__PURE__ */
|
|
14
|
-
|
|
24
|
+
}), f = ({ label: a, value: s }) => /* @__PURE__ */ e(o, { children: [
|
|
25
|
+
/* @__PURE__ */ e("span", { children: [
|
|
26
|
+
a,
|
|
15
27
|
":"
|
|
16
28
|
] }),
|
|
17
|
-
|
|
18
|
-
o
|
|
29
|
+
/* @__PURE__ */ t("p", { children: s })
|
|
19
30
|
] });
|
|
20
31
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
f as LabeledValue,
|
|
33
|
+
f as default
|
|
23
34
|
};
|
package/base/index.js
CHANGED
|
@@ -3,9 +3,9 @@ import { AvatarWithImage as a } from "./AvatarWithImage/AvatarWithImage.js";
|
|
|
3
3
|
import { Button as m } from "./Button/Button.js";
|
|
4
4
|
import { Divider as x } from "./Divider/Divider.js";
|
|
5
5
|
import { default as d } from "./Flex/Flex.js";
|
|
6
|
-
import { Grid as
|
|
7
|
-
import { default as
|
|
8
|
-
import {
|
|
6
|
+
import { Grid as s } from "./Grid/Grid.js";
|
|
7
|
+
import { default as n } from "./Icon/Icon.js";
|
|
8
|
+
import { I as v } from "../.chunks/Input.js";
|
|
9
9
|
import { LabeledValue as c } from "./LabeledValue/LabeledValue.js";
|
|
10
10
|
import { default as A } from "./ListButton/ListButton.js";
|
|
11
11
|
import { default as b } from "./Loading/Loading.js";
|
|
@@ -16,9 +16,9 @@ export {
|
|
|
16
16
|
m as Button,
|
|
17
17
|
x as Divider,
|
|
18
18
|
d as Flex,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
s as Grid,
|
|
20
|
+
n as Icon,
|
|
21
|
+
v as Input,
|
|
22
22
|
c as LabeledValue,
|
|
23
23
|
A as ListButton,
|
|
24
24
|
b as Loading,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface AccordionProps {
|
|
2
|
+
/** The title of the accordion. H3 element */
|
|
3
|
+
title: React.ReactNode;
|
|
4
|
+
/** The content of the accordion. */
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
width?: string;
|
|
7
|
+
padding?: string;
|
|
8
|
+
/** Box shadow around the accordion. */
|
|
9
|
+
shadow?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface AccordionBodyProps {
|
|
12
|
+
expanded: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const Accordion: React.FC<AccordionProps>;
|
|
15
|
+
export default Accordion;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { useState as w } from "react";
|
|
3
|
+
import { n } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
4
|
+
import { c as s } from "../../.chunks/emotion-react.browser.esm.js";
|
|
5
|
+
import a from "../../theme.js";
|
|
6
|
+
import x from "../../base/Flex/Flex.js";
|
|
7
|
+
import { c as u } from "../../.chunks/createSvgIcon.js";
|
|
8
|
+
import { B as g } from "../../.chunks/ButtonBase.js";
|
|
9
|
+
const b = u(/* @__PURE__ */ r("path", {
|
|
10
|
+
d: "M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z"
|
|
11
|
+
}), "ArrowForwardIos"), y = n("div")(({ padding: o, shadow: t, width: e }) => ({
|
|
12
|
+
...s`
|
|
13
|
+
h3 {
|
|
14
|
+
margin: 0;
|
|
15
|
+
width: 100%;
|
|
16
|
+
font-size: 28px;
|
|
17
|
+
}
|
|
18
|
+
font-family: 'Roboto', sans-serif;
|
|
19
|
+
padding: ${o};
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
box-shadow: ${t};
|
|
23
|
+
border-radius: 5px;
|
|
24
|
+
background-color: ${a.colors.white};
|
|
25
|
+
width: ${e};
|
|
26
|
+
`
|
|
27
|
+
})), $ = n("div")(({ expanded: o }) => ({
|
|
28
|
+
...s`
|
|
29
|
+
margin-top: ${o ? "1rem" : 0};
|
|
30
|
+
transition: 313ms all ease-in-out;
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-rows: ${o ? "1fr" : "0fr"};
|
|
33
|
+
div {
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
}
|
|
36
|
+
`
|
|
37
|
+
})), v = n(g)(({ expanded: o }) => ({
|
|
38
|
+
...s`
|
|
39
|
+
transition: 201ms all linear;
|
|
40
|
+
transform: ${o ? "rotate(90deg)" : "rotate(0deg)"};
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
width: 24px;
|
|
43
|
+
height: 24px;
|
|
44
|
+
aspect-ratio: 1;
|
|
45
|
+
`
|
|
46
|
+
})), z = ({
|
|
47
|
+
title: o,
|
|
48
|
+
children: t,
|
|
49
|
+
padding: e = "1rem 2rem",
|
|
50
|
+
shadow: c = a.boxShadow.darkGreen,
|
|
51
|
+
width: l = "360px"
|
|
52
|
+
}) => {
|
|
53
|
+
const [i, m] = w(!1), p = { padding: e, shadow: c, width: l }, f = { expanded: i }, h = { expanded: i };
|
|
54
|
+
return /* @__PURE__ */ d(y, { ...p, children: [
|
|
55
|
+
/* @__PURE__ */ d(x, { alignItems: "center", justifyContent: "space-between", children: [
|
|
56
|
+
/* @__PURE__ */ r("h3", { children: o }),
|
|
57
|
+
/* @__PURE__ */ r(v, { ...f, onClick: () => m(!i), children: /* @__PURE__ */ r(b, {}) })
|
|
58
|
+
] }),
|
|
59
|
+
/* @__PURE__ */ r($, { ...h, children: /* @__PURE__ */ r("div", { children: t }) })
|
|
60
|
+
] });
|
|
61
|
+
};
|
|
62
|
+
export {
|
|
63
|
+
z as Accordion,
|
|
64
|
+
z as default
|
|
65
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, type AccordionProps } from './Accordion';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { CSSObject } from '@emotion/react';
|
|
1
2
|
import { LabeledValueProps } from '../../../../../../../../../src/components/base/LabeledValue';
|
|
2
3
|
interface InfoCardStyleProps {
|
|
3
4
|
/** The element placed before the header text. This can be any valid React Node */
|
|
@@ -9,6 +10,8 @@ interface InfoCardStyleProps {
|
|
|
9
10
|
/** Spacing between the items */
|
|
10
11
|
spacing?: string;
|
|
11
12
|
columns?: number;
|
|
13
|
+
/** Custom styles for the card */
|
|
14
|
+
styles?: CSSObject;
|
|
12
15
|
}
|
|
13
16
|
export interface InfoCardProps extends InfoCardStyleProps {
|
|
14
17
|
title?: string;
|
|
@@ -2,9 +2,9 @@ import { jsxs as t, jsx as a } from "react/jsx-runtime";
|
|
|
2
2
|
import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
3
3
|
import { c as i } from "../../.chunks/emotion-react.browser.esm.js";
|
|
4
4
|
import l from "../../theme.js";
|
|
5
|
-
import { LabeledValue as
|
|
6
|
-
import
|
|
7
|
-
const
|
|
5
|
+
import { LabeledValue as h } from "../../base/LabeledValue/LabeledValue.js";
|
|
6
|
+
import g from "../../base/Flex/Flex.js";
|
|
7
|
+
const x = d("div")(({ padding: r, shadow: o, styles: e }) => ({
|
|
8
8
|
...i`
|
|
9
9
|
h3 {
|
|
10
10
|
margin: 0;
|
|
@@ -18,8 +18,9 @@ const g = d("div")(({ padding: r, shadow: o }) => ({
|
|
|
18
18
|
box-shadow: ${o};
|
|
19
19
|
border-radius: 5px;
|
|
20
20
|
background-color: ${l.colors.white};
|
|
21
|
+
${e};
|
|
21
22
|
`
|
|
22
|
-
})),
|
|
23
|
+
})), u = d("div")(({ spacing: r, columns: o }) => ({
|
|
23
24
|
...i`
|
|
24
25
|
margin-top: calc(${r} * 0.75);
|
|
25
26
|
grid-row-gap: ${r};
|
|
@@ -27,22 +28,23 @@ const g = d("div")(({ padding: r, shadow: o }) => ({
|
|
|
27
28
|
display: grid;
|
|
28
29
|
grid-template-columns: repeat(${o}, 1fr);
|
|
29
30
|
`
|
|
30
|
-
})),
|
|
31
|
+
})), j = ({
|
|
31
32
|
decorativeElement: r,
|
|
32
33
|
title: o,
|
|
33
34
|
items: e,
|
|
34
35
|
padding: m = "1rem 2rem",
|
|
35
36
|
shadow: c = l.boxShadow.darkGreen,
|
|
36
37
|
spacing: s = "2rem",
|
|
37
|
-
columns: p = 3
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
columns: p = 3,
|
|
39
|
+
styles: f
|
|
40
|
+
}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: c, styles: f }, children: [
|
|
41
|
+
/* @__PURE__ */ t(g, { width: "100%", gap: "1rem", alignItems: "center", children: [
|
|
40
42
|
r && r,
|
|
41
43
|
/* @__PURE__ */ a("h3", { children: o })
|
|
42
44
|
] }),
|
|
43
|
-
/* @__PURE__ */ a(
|
|
45
|
+
/* @__PURE__ */ a(u, { ...{ spacing: s, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(h, { ...n }, n.label)) })
|
|
44
46
|
] });
|
|
45
47
|
export {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
j as InfoCard,
|
|
49
|
+
j as default
|
|
48
50
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { InputProps } from '../../../../../../../../../src/components/base/Input';
|
|
2
|
+
export type StyleProps = {
|
|
3
|
+
grid?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export type LabeledInputProps = InputProps & StyleProps & {
|
|
6
|
+
label: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const LabeledInput: React.FC<LabeledInputProps>;
|
|
9
|
+
export default LabeledInput;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsxs as t, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { n as r } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
+
import { c as n } from "../../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
import { I as p } from "../../.chunks/Input.js";
|
|
5
|
+
const i = r("div")(({ grid: e }) => ({
|
|
6
|
+
...n`
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-wrap: nowrap;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
gap: 0.5rem;
|
|
11
|
+
font-family: 'Roboto', sans-serif;
|
|
12
|
+
|
|
13
|
+
span {
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
flex-basis: ${e && "50%"};
|
|
16
|
+
font-weight: bold;
|
|
17
|
+
text-transform: capitalize;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.MuiTextField-root {
|
|
21
|
+
flex-basis: ${e && "50%"};
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
}
|
|
24
|
+
`
|
|
25
|
+
})), x = ({ label: e, grid: a = !0, ...s }) => /* @__PURE__ */ t(i, { grid: a, children: [
|
|
26
|
+
/* @__PURE__ */ t("span", { children: [
|
|
27
|
+
e,
|
|
28
|
+
":"
|
|
29
|
+
] }),
|
|
30
|
+
/* @__PURE__ */ o(p, { variant: "simple", ...s })
|
|
31
|
+
] });
|
|
32
|
+
export {
|
|
33
|
+
x as LabeledInput,
|
|
34
|
+
x as default
|
|
35
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, type LabeledInputProps } from './LabeledInput';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
|
|
2
|
+
export interface TooltipProps extends MuiTooltipProps {
|
|
3
|
+
/** The content of the tooltip */
|
|
4
|
+
title: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const Tooltip: React.FC<TooltipProps>;
|
|
7
|
+
export default Tooltip;
|