@clubmed/trident-ui 1.3.1-beta.2 → 1.4.0-beta.1
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/CHANGELOG.md +16 -0
- package/README.md +3 -3
- package/hooks/useSafeBoop.d.ts +3 -0
- package/hooks/useSafeBoop.js +2207 -42
- package/hooks/useSafeBoop.js.map +1 -1
- package/molecules/Backdrop.js +36 -40
- package/molecules/Backdrop.js.map +1 -1
- package/molecules/Cards/Card.js +9 -9
- package/molecules/Cards/Card.js.map +1 -1
- package/molecules/Forms/NumberField.d.ts +4 -4
- package/molecules/HamburgerIcon.d.ts +3 -10
- package/molecules/HamburgerIcon.js +34 -30
- package/molecules/HamburgerIcon.js.map +1 -1
- package/molecules/Loader.js +32 -43
- package/molecules/Loader.js.map +1 -1
- package/molecules/Popin.d.ts +1 -2
- package/molecules/Popin.js +37 -43
- package/molecules/Popin.js.map +1 -1
- package/molecules/Tabs/Tab.d.ts +3 -4
- package/molecules/Tabs/Tab.js +90 -78
- package/molecules/Tabs/Tab.js.map +1 -1
- package/molecules/Tabs/TabList.js +28 -36
- package/molecules/Tabs/TabList.js.map +1 -1
- package/molecules/Tabs/TabPanel.js +30 -49
- package/molecules/Tabs/TabPanel.js.map +1 -1
- package/molecules/Tabs/context/TabControl.js +12 -7
- package/molecules/Tabs/context/TabControl.js.map +1 -1
- package/package.json +4 -7
- package/tailwind/tailwind.preset.d.ts +70 -0
- package/tailwind/tailwind.preset.js +75 -5
- package/tailwind/tailwind.preset.js.map +1 -1
- package/types/Theme.d.ts +1 -1
package/molecules/Backdrop.js
CHANGED
|
@@ -1,55 +1,51 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import { c as
|
|
4
|
-
const
|
|
1
|
+
import { jsxs as p, jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as f, useState as k, useEffect as x } from "react";
|
|
3
|
+
import { c as l } from "../chunks/index.js";
|
|
4
|
+
const s = ({
|
|
5
5
|
children: r,
|
|
6
|
-
onClose:
|
|
7
|
-
isVisible:
|
|
8
|
-
sweep:
|
|
9
|
-
}) =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
x: t ? "-100%" : "0%"
|
|
15
|
-
},
|
|
16
|
-
enter: {
|
|
17
|
-
WebkitBackdropFilter: "blur(10px)",
|
|
18
|
-
backdropFilter: "blur(10px)",
|
|
19
|
-
"--tw-bg-opacity": 0.8,
|
|
20
|
-
x: "0%"
|
|
21
|
-
},
|
|
22
|
-
leave: {
|
|
23
|
-
WebkitBackdropFilter: "blur(0px)",
|
|
24
|
-
backdropFilter: "blur(0px)",
|
|
25
|
-
"--tw-bg-opacity": 0,
|
|
26
|
-
x: t ? "100%" : "0%"
|
|
27
|
-
},
|
|
28
|
-
config: t ? { tension: 200, friction: 40 } : p.gentle
|
|
29
|
-
})(
|
|
30
|
-
(i, n) => n && /* @__PURE__ */ a(
|
|
6
|
+
onClose: c,
|
|
7
|
+
isVisible: t,
|
|
8
|
+
sweep: n
|
|
9
|
+
}) => {
|
|
10
|
+
const e = f(!!t), u = e.current, a = !t && u, [d, o] = k(!!t);
|
|
11
|
+
return x(() => {
|
|
12
|
+
t && o(!0);
|
|
13
|
+
}, [t]), e.current = !!t, d ? /* @__PURE__ */ p(
|
|
31
14
|
"div",
|
|
32
15
|
{
|
|
33
16
|
role: "presentation",
|
|
34
|
-
className: "z-1 pointer-events-none fixed inset-0
|
|
17
|
+
className: "z-1 pointer-events-none fixed inset-0 items-center justify-center flex",
|
|
35
18
|
children: [
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
|
|
19
|
+
/* @__PURE__ */ m(
|
|
20
|
+
"button",
|
|
38
21
|
{
|
|
39
22
|
type: "button",
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
23
|
+
"aria-hidden": "true",
|
|
24
|
+
className: l(
|
|
25
|
+
"-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]",
|
|
26
|
+
{
|
|
27
|
+
"pointer-events-auto": t || a,
|
|
28
|
+
"pointer-events-none": !t && !a,
|
|
29
|
+
"animate-backdropFadeIn": !n && t,
|
|
30
|
+
"animate-backdropFadeOut": !n && !t && a,
|
|
31
|
+
"backdrop-blur-0 opacity-0": !n && t && !a,
|
|
32
|
+
"animate-backdropSweepIn": n && t,
|
|
33
|
+
"animate-backdropSweepOut": n && !t && a,
|
|
34
|
+
"backdrop-blur-0 opacity-0 translate-x-[-100%]": n && t && !a
|
|
35
|
+
}
|
|
36
|
+
),
|
|
37
|
+
onClick: c,
|
|
38
|
+
onAnimationEnd: () => {
|
|
39
|
+
t || o(!1);
|
|
40
|
+
}
|
|
45
41
|
}
|
|
46
42
|
),
|
|
47
43
|
r
|
|
48
44
|
]
|
|
49
45
|
}
|
|
50
|
-
)
|
|
51
|
-
|
|
46
|
+
) : null;
|
|
47
|
+
};
|
|
52
48
|
export {
|
|
53
|
-
|
|
49
|
+
s as Backdrop
|
|
54
50
|
};
|
|
55
51
|
//# sourceMappingURL=Backdrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.js","sources":["../../lib/molecules/Backdrop.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Backdrop.js","sources":["../../lib/molecules/Backdrop.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type MouseEvent,\n type PropsWithChildren,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport classnames from 'classnames';\n\ninterface BackdropProps {\n /**\n * On close\n * @param event\n */\n onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * Is visible\n */\n isVisible?: boolean;\n /**\n * Sweep Mode™\n * (makes it appear from the sides instead of from everywhere)\n */\n sweep?: boolean;\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n children,\n onClose,\n isVisible,\n sweep,\n}) => {\n // Prevent initial mount animation flash when closed\n const wasVisibleRef = useRef(!!isVisible);\n const wasVisible = wasVisibleRef.current;\n const isLeaving = !isVisible && wasVisible;\n\n // Mount only when visible or when we need to play leave animation\n const [mounted, setMounted] = useState<boolean>(!!isVisible);\n\n // When becoming visible, ensure we are mounted\n useEffect(() => {\n if (isVisible) setMounted(true);\n }, [isVisible]);\n\n // update ref for next render\n wasVisibleRef.current = !!isVisible;\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div\n role=\"presentation\"\n className=\"z-1 pointer-events-none fixed inset-0 items-center justify-center flex\"\n >\n <button\n type=\"button\"\n aria-hidden=\"true\"\n className={classnames(\n '-z-1 absolute inset-0 bg-white backdrop will-change-[opacity,transform,backdrop-filter]',\n {\n 'pointer-events-auto': isVisible || isLeaving,\n 'pointer-events-none': !isVisible && !isLeaving,\n 'animate-backdropFadeIn': !sweep && isVisible,\n 'animate-backdropFadeOut': !sweep && !isVisible && isLeaving,\n 'backdrop-blur-0 opacity-0': !sweep && isVisible && !isLeaving,\n 'animate-backdropSweepIn': sweep && isVisible,\n 'animate-backdropSweepOut': sweep && !isVisible && isLeaving,\n 'backdrop-blur-0 opacity-0 translate-x-[-100%]': sweep && isVisible && !isLeaving,\n },\n )}\n onClick={onClose}\n onAnimationEnd={() => {\n // When leave animation finishes and still not visible, unmount\n if (!isVisible) {\n setMounted(false);\n }\n }}\n />\n {children}\n </div>\n );\n};\n"],"names":["Backdrop","children","onClose","isVisible","sweep","wasVisibleRef","useRef","wasVisible","isLeaving","mounted","setMounted","useState","useEffect","jsxs","jsx","classnames"],"mappings":";;;AA2BO,MAAMA,IAAgE,CAAC;AAAA,EAC5E,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AAEJ,QAAMC,IAAgBC,EAAO,CAAC,CAACH,CAAS,GAClCI,IAAaF,EAAc,SAC3BG,IAAY,CAACL,KAAaI,GAG1B,CAACE,GAASC,CAAU,IAAIC,EAAkB,CAAC,CAACR,CAAS;AAU3D,SAPAS,EAAU,MAAM;AACd,IAAIT,OAAsB,EAAI;AAAA,EAChC,GAAG,CAACA,CAAS,CAAC,GAGdE,EAAc,UAAU,CAAC,CAACF,GAErBM,IAKH,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,uBAAuBZ,KAAaK;AAAA,gBACpC,uBAAuB,CAACL,KAAa,CAACK;AAAA,gBACtC,0BAA0B,CAACJ,KAASD;AAAA,gBACpC,2BAA2B,CAACC,KAAS,CAACD,KAAaK;AAAA,gBACnD,6BAA6B,CAACJ,KAASD,KAAa,CAACK;AAAA,gBACrD,2BAA2BJ,KAASD;AAAA,gBACpC,4BAA4BC,KAAS,CAACD,KAAaK;AAAA,gBACnD,iDAAiDJ,KAASD,KAAa,CAACK;AAAA,cAAA;AAAA,YAC1E;AAAA,YAEF,SAASN;AAAA,YACT,gBAAgB,MAAM;AAEpB,cAAKC,KACHO,EAAW,EAAK;AAAA,YAEpB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAhCI;AAmCX;"}
|
package/molecules/Cards/Card.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { Card as n } from "./v2/Card.js";
|
|
3
3
|
import { Icon as d } from "@clubmed/trident-icons";
|
|
4
4
|
import { Chip as l } from "../Chip.js";
|
|
5
|
-
const
|
|
6
|
-
title:
|
|
5
|
+
const h = ({
|
|
6
|
+
title: a,
|
|
7
7
|
children: s,
|
|
8
8
|
icon: i,
|
|
9
9
|
iconType: t,
|
|
10
10
|
theme: o = "light",
|
|
11
11
|
dataName: m = "Card"
|
|
12
|
-
}) => /* @__PURE__ */
|
|
13
|
-
/* @__PURE__ */
|
|
14
|
-
/* @__PURE__ */
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */
|
|
12
|
+
}) => /* @__PURE__ */ r(n, { "data-name": m, className: "p-20 flex shrink-0 flex-row gap-20", children: [
|
|
13
|
+
/* @__PURE__ */ e(l, { theme: o, size: "size-48", children: /* @__PURE__ */ e(d, { name: i, type: t, width: "24px" }) }),
|
|
14
|
+
/* @__PURE__ */ r("div", { className: "space-y-8 font-sans flex-1", children: [
|
|
15
|
+
/* @__PURE__ */ e("div", { className: "text-b3 font-semibold", children: a }),
|
|
16
|
+
/* @__PURE__ */ e("div", { className: "text-b4 font-normal", children: s })
|
|
17
17
|
] })
|
|
18
18
|
] });
|
|
19
19
|
export {
|
|
20
|
-
|
|
20
|
+
h as Card
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../lib/molecules/Cards/Card.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport { Card as CardV2, type CardProps as CardPropsV2 } from '@/molecules/Cards/v2/Card';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { Chip, type ChipProps } from '@/molecules/Chip';\n\ninterface CardProps extends Omit<CardPropsV2, 'theme'> {\n title: string;\n icon: IconicNames;\n iconType?: IconicTypes;\n theme?: ChipProps['theme'];\n dataName?: string;\n}\n\nexport const Card: FunctionComponent<PropsWithChildren<CardProps>> = ({\n title,\n children,\n icon,\n iconType,\n theme = 'light',\n dataName = 'Card',\n}) => {\n return (\n <CardV2 data-name={dataName} className=\"p-20
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../lib/molecules/Cards/Card.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport { Card as CardV2, type CardProps as CardPropsV2 } from '@/molecules/Cards/v2/Card';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { Chip, type ChipProps } from '@/molecules/Chip';\n\ninterface CardProps extends Omit<CardPropsV2, 'theme'> {\n title: string;\n icon: IconicNames;\n iconType?: IconicTypes;\n theme?: ChipProps['theme'];\n dataName?: string;\n}\n\nexport const Card: FunctionComponent<PropsWithChildren<CardProps>> = ({\n title,\n children,\n icon,\n iconType,\n theme = 'light',\n dataName = 'Card',\n}) => {\n return (\n <CardV2 data-name={dataName} className=\"p-20 flex shrink-0 flex-row gap-20\">\n <Chip theme={theme} size={'size-48'}>\n <Icon name={icon} type={iconType} width=\"24px\" />\n </Chip>\n <div className=\"space-y-8 font-sans flex-1\">\n <div className=\"text-b3 font-semibold\">{title}</div>\n <div className=\"text-b4 font-normal\">{children}</div>\n </div>\n </CardV2>\n );\n};\n"],"names":["Card","title","children","icon","iconType","theme","dataName","jsxs","CardV2","jsx","Chip","Icon"],"mappings":";;;;AAaO,MAAMA,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AACb,MAEI,gBAAAC,EAACC,GAAA,EAAO,aAAWF,GAAU,WAAU,sCACrC,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAK,OAAAL,GAAc,MAAM,WACxB,UAAA,gBAAAI,EAACE,GAAA,EAAK,MAAMR,GAAM,MAAMC,GAAU,OAAM,OAAA,CAAO,GACjD;AAAA,EACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAR,GAAM;AAAA,IAC9C,gBAAAQ,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAP,EAAA,CAAS;AAAA,EAAA,EAAA,CACjD;AAAA,GACF;"}
|
|
@@ -306,14 +306,14 @@ export declare function useNumberField(props: NumberFieldProps): {
|
|
|
306
306
|
capture?: boolean | "user" | "environment" | undefined | undefined;
|
|
307
307
|
checked?: boolean | undefined | undefined;
|
|
308
308
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
309
|
+
htmlFor?: string | undefined | undefined;
|
|
309
310
|
maxLength?: number | undefined | undefined;
|
|
310
311
|
minLength?: number | undefined | undefined;
|
|
311
|
-
placeholder?: string | undefined | undefined;
|
|
312
|
-
readOnly?: boolean | undefined | undefined;
|
|
313
|
-
required?: boolean | undefined | undefined;
|
|
314
|
-
htmlFor?: string | undefined | undefined;
|
|
315
312
|
description?: string | undefined;
|
|
313
|
+
required?: boolean | undefined | undefined;
|
|
316
314
|
hideRequiredStar?: boolean | undefined;
|
|
315
|
+
placeholder?: string | undefined | undefined;
|
|
316
|
+
readOnly?: boolean | undefined | undefined;
|
|
317
317
|
};
|
|
318
318
|
export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
319
319
|
export {};
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
interface
|
|
3
|
-
/**
|
|
4
|
-
* Width of the HamburgerIcon
|
|
5
|
-
*/
|
|
6
|
-
width?: string;
|
|
7
|
-
/**
|
|
8
|
-
* Whether the HamburgerIcon is active or not
|
|
9
|
-
*/
|
|
1
|
+
import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
|
|
2
|
+
interface Props extends ComponentPropsWithoutRef<'span'> {
|
|
10
3
|
isActive?: boolean;
|
|
11
4
|
}
|
|
12
|
-
export declare const HamburgerIcon: FunctionComponent<
|
|
5
|
+
export declare const HamburgerIcon: FunctionComponent<Props>;
|
|
13
6
|
export {};
|
|
@@ -1,39 +1,43 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
isActive:
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { c as e } from "../chunks/index.js";
|
|
3
|
+
const c = ({
|
|
4
|
+
className: a,
|
|
5
|
+
isActive: r = !1,
|
|
6
|
+
...o
|
|
6
7
|
}) => {
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
const n = e(
|
|
9
|
+
'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[""] before:cursor-pointer',
|
|
10
|
+
{ "before:translate-y-[-6px]": !r, "before:translate-y-0 before:rotate-45": r }
|
|
11
|
+
), f = e(
|
|
12
|
+
'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[""] after:cursor-pointer',
|
|
13
|
+
{ "after:translate-y-[6px]": !r, "after:translate-y-0 after:-rotate-45": r }
|
|
14
|
+
);
|
|
15
|
+
return /* @__PURE__ */ t(
|
|
16
|
+
"span",
|
|
15
17
|
{
|
|
16
|
-
className: "shrink-0",
|
|
17
|
-
"data-testid": a ? "HamburgerIcon-active" : "HamburgerIcon",
|
|
18
18
|
"data-name": "HamburgerIcon",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
...o,
|
|
20
|
+
className: e(
|
|
21
|
+
"menu-icon cursor-pointer",
|
|
22
|
+
"color-current relative isolate shrink-0 h-24 w-24 block",
|
|
23
|
+
a
|
|
24
|
+
),
|
|
25
|
+
"data-testid": r ? "HamburgerIcon-active" : "HamburgerIcon",
|
|
26
|
+
children: /* @__PURE__ */ t(
|
|
27
|
+
"span",
|
|
28
|
+
{
|
|
29
|
+
className: e(
|
|
30
|
+
"absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer",
|
|
31
|
+
{ "bg-current": !r, "bg-transparent": r },
|
|
32
|
+
n,
|
|
33
|
+
f
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
)
|
|
33
37
|
}
|
|
34
38
|
);
|
|
35
39
|
};
|
|
36
40
|
export {
|
|
37
|
-
|
|
41
|
+
c as HamburgerIcon
|
|
38
42
|
};
|
|
39
43
|
//# sourceMappingURL=HamburgerIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HamburgerIcon.js","sources":["../../lib/molecules/HamburgerIcon.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"HamburgerIcon.js","sources":["../../lib/molecules/HamburgerIcon.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n className,\n isActive = false,\n ...attrs\n}) => {\n const before = classnames(\n 'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n );\n\n const after = classnames(\n 'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n );\n\n return (\n <span\n data-name=\"HamburgerIcon\"\n {...attrs}\n className={classnames(\n 'menu-icon cursor-pointer',\n 'color-current relative isolate shrink-0 h-24 w-24 block',\n className,\n )}\n data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n >\n <span\n className={classnames(\n 'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n { 'bg-current': !isActive, 'bg-transparent': isActive },\n before,\n after,\n )}\n />\n </span>\n );\n};\n"],"names":["HamburgerIcon","className","isActive","attrs","before","classnames","after","jsx"],"mappings":";;AAOO,MAAMA,IAA0C,CAAC;AAAA,EACtD,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,MAAM;AACJ,QAAMC,IAASC;AAAA,IACb;AAAA,IACA,EAAE,6BAA6B,CAACH,GAAU,yCAAyCA,EAAA;AAAA,EAAS,GAGxFI,IAAQD;AAAA,IACZ;AAAA,IACA,EAAE,2BAA2B,CAACH,GAAU,wCAAwCA,EAAA;AAAA,EAAS;AAG3F,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAGJ;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAEF,eAAaC,IAAW,yBAAyB;AAAA,MAEjD,UAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF;AAAA,YACT;AAAA,YACA,EAAE,cAAc,CAACH,GAAU,kBAAkBA,EAAA;AAAA,YAC7CE;AAAA,YACAE;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
package/molecules/Loader.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as l, jsxs as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
const
|
|
2
|
+
import { jsx as l, jsxs as c } from "react/jsx-runtime";
|
|
3
|
+
import { Backdrop as t } from "./Backdrop.js";
|
|
4
|
+
import { c as m } from "../chunks/index.js";
|
|
5
|
+
const r = /* @__PURE__ */ c("svg", { viewBox: "0 0 140 140", width: 140, children: [
|
|
6
6
|
/* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l(
|
|
7
7
|
"path",
|
|
8
8
|
{
|
|
@@ -10,15 +10,15 @@ const h = /* @__PURE__ */ a("svg", { viewBox: "0 0 140 140", width: 140, childre
|
|
|
10
10
|
d: "m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4"
|
|
11
11
|
}
|
|
12
12
|
) }),
|
|
13
|
-
/* @__PURE__ */
|
|
13
|
+
/* @__PURE__ */ c("g", { fill: "none", fillRule: "evenodd", transform: "translate(27 14)", children: [
|
|
14
14
|
/* @__PURE__ */ l("mask", { id: "b", fill: "#fff", children: /* @__PURE__ */ l("use", { xlinkHref: "#a" }) }),
|
|
15
|
-
/* @__PURE__ */
|
|
15
|
+
/* @__PURE__ */ c("g", { mask: "url(#b)", children: [
|
|
16
16
|
/* @__PURE__ */ l(
|
|
17
17
|
"path",
|
|
18
18
|
{
|
|
19
19
|
fill: "#1E2643",
|
|
20
20
|
fillRule: "nonzero",
|
|
21
|
-
d: "M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2
|
|
21
|
+
d: "M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z",
|
|
22
22
|
className: "animate-wave"
|
|
23
23
|
}
|
|
24
24
|
),
|
|
@@ -33,45 +33,34 @@ const h = /* @__PURE__ */ a("svg", { viewBox: "0 0 140 140", width: 140, childre
|
|
|
33
33
|
)
|
|
34
34
|
] })
|
|
35
35
|
] })
|
|
36
|
-
] }),
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
tension: e ? 280 : 380,
|
|
43
|
-
// we make it fling off faster when closing
|
|
44
|
-
friction: 50
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
return /* @__PURE__ */ l(o, { isVisible: e, sweep: !0, children: s(
|
|
48
|
-
({ x: c, opacity: m }, i) => i && /* @__PURE__ */ a("div", { className: "flex flex-col items-center", role: "alert", children: [
|
|
49
|
-
/* @__PURE__ */ l(
|
|
50
|
-
r.div,
|
|
36
|
+
] }), o = ({ isVisible: a, label: e }) => /* @__PURE__ */ l(t, { isVisible: a, sweep: !0, children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center", role: "alert", children: [
|
|
37
|
+
/* @__PURE__ */ l(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
className: m(
|
|
41
|
+
"relative will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out",
|
|
51
42
|
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
opacity: m,
|
|
55
|
-
// the masks prevent subpixel flickering on transitions (and covid), please don't remove them
|
|
56
|
-
maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E")`,
|
|
57
|
-
WebkitMaskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E")`
|
|
58
|
-
},
|
|
59
|
-
className: "relative",
|
|
60
|
-
children: h
|
|
43
|
+
"translate-x-0 opacity-100 ": a,
|
|
44
|
+
"opacity-0 translate-x-[600px] ": !a
|
|
61
45
|
}
|
|
62
46
|
),
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
47
|
+
style: {
|
|
48
|
+
// the masks prevent subpixel flickering on transitions (and covid), please don't remove them
|
|
49
|
+
maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E")`,
|
|
50
|
+
WebkitMaskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E")`
|
|
51
|
+
},
|
|
52
|
+
children: r
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
/* @__PURE__ */ l(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
className: "text-b3 mx-auto max-w-[320px] px-20 text-center will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out " + (a ? "translate-x-0 opacity-100 " : "opacity-0 translate-x-[300px] "),
|
|
59
|
+
children: e
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
] }) });
|
|
74
63
|
export {
|
|
75
|
-
|
|
64
|
+
o as Loader
|
|
76
65
|
};
|
|
77
66
|
//# sourceMappingURL=Loader.js.map
|
package/molecules/Loader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sources":["../../lib/molecules/Loader.tsx"],"sourcesContent":["'use client';\nimport
|
|
1
|
+
{"version":3,"file":"Loader.js","sources":["../../lib/molecules/Loader.tsx"],"sourcesContent":["'use client';\nimport type { FunctionComponent } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport classnames from 'classnames';\n\ninterface LoaderProps {\n isVisible?: boolean;\n label?: string;\n}\n\nconst loaderSVG = (\n <svg viewBox=\"0 0 140 140\" width={140}>\n <defs>\n <path\n id=\"a\"\n d=\"m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4\"\n />\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(27 14)\">\n <mask id=\"b\" fill=\"#fff\">\n <use xlinkHref=\"#a\" />\n </mask>\n <g mask=\"url(#b)\">\n <path\n fill=\"#1E2643\"\n fillRule=\"nonzero\"\n d=\"M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z\"\n className=\"animate-wave\"\n />\n <path\n fill=\"#1E2643\"\n fillRule=\"nonzero\"\n d=\"m70 74.1.7-.7-.7-.7-.7.7.7.7Zm-9.6 9.6-.7-.7-.7.7.7.7.7-.7Zm9.6 9.5-.7.7.7.7.7-.7-.7-.7Zm9.5-9.5.7.7.7-.7-.7-.7-.7.7Zm-23-67.3-.7-.7-.7.6.7.8.7-.7Zm12.1 1 1-.5-.5-.8-.8.3.3 1Zm-17.3 44h-1V63l1.4-.6-.4-1ZM52.2 1h1-1Zm-1.3-1v1h.2L51 0ZM25.6 20.6l-.7-.7-.5.5.4.7.8-.5Zm15-1.1h1V18l-1.4.5.4 1ZM40 64.2l.1 1h1v-1h-1ZM22.2 13.6l1 .2-1-.2ZM0 26.4l-.7-.8-.6.6.4.7.9-.5Zm10 1.8h1v-1.5l-1.4.6.3.9Zm30 39.3h1v-1h-1v1Zm9 43.7.3-1-.2 1Zm2-46.1-.2-1-.7.2v.8h1Zm18.2 8.3L59.7 83l1.4 1.4 9.6-9.6-1.4-1.4Zm-9.6 11 9.6 9.5 1.4-1.4L61 83l-1.4 1.4Zm11 9.5 9.5-9.5-1.4-1.4-9.5 9.5 1.4 1.4Zm9.5-11-9.5-9.5-1.4 1.4 9.5 9.6 1.4-1.4ZM77.6 3.2a2 2 0 0 0-1-1.3c-.6-.3-1.2-.3-1.8-.2-1 .2-2.4 1-4.1 2-3.4 2.1-8.2 6.1-14.9 12l1.4 1.6c6.6-6 11.4-9.9 14.6-12a11 11 0 0 1 3.4-1.6h.4l2-.5Zm-21.8 14c1.3 1.5 2.6 2.5 3.8 3a6 6 0 0 0 3.5.5c1-.1 2-.6 3-1 1-.5 1.9-1 2.9-1.3l-.7-1.9c-1.1.4-2.2 1-3 1.4l-2.5.9a4 4 0 0 1-2.4-.4 12 12 0 0 1-3.2-2.6l-1.4 1.4Zm12 .7c.7 1.5 1.4 4.3 1.7 8 .2 3.7 0 8-1 12.6-2 8.9-7 18-17.6 22.2l.8 1.8a31.3 31.3 0 0 0 18.8-23.6 51 51 0 0 0 1-13.1c-.3-3.8-1-7-2-8.8l-1.7 1ZM52.3 61.5a5227.3 5227.3 0 0 0 .9-60.1V1h-2v1.3a4268.6 4268.6 0 0 1-1 59l2 .1ZM53.2 1c0-.3 0-.6-.2-.9l-1.8 1h2ZM53 .1a2 2 0 0 0-.6-.7L51.2 1 53 .1Zm-.6-.7a2 2 0 0 0-.9-.4l-.3 2 1.2-1.6Zm-.9-.4a2 2 0 0 0-1 0l.7 2 .3-2Zm-.8 0C49-.6 47 .3 45 1.6s-4.3 3-6.6 5c-4.5 4-9.3 8.9-13.5 13.4l1.5 1.4c4.1-4.5 8.9-9.4 13.3-13.3C42 6 44.1 4.4 46 3.2c2-1.3 3.7-2 5-2.2l-.3-2Zm-26 22c1.3 2.1 2.7 3.3 4.3 3.8a7 7 0 0 0 4.5-.3c1.4-.5 2.8-1.4 4-2.1 1.3-.8 2.4-1.6 3.5-2l-.8-1.9-3.7 2.2c-1.3.7-2.5 1.5-3.7 2-1.2.4-2.3.5-3.2.2-1-.3-2-1.1-3.1-2.8l-1.7 1Zm15-1.5c0 1.1-1.2 22.8-.7 44.7h2c-.5-22 .6-43.4.6-44.7h-2Zm.2 43.7c-5.2.4-9-2-11.6-6-2.7-4-4.3-9.6-5.2-15.6-1.8-12-.5-25 .1-27.8l-2-.4c-.6 3-1.9 16.3-.1 28.5.9 6.1 2.6 12.1 5.5 16.5a14 14 0 0 0 13.5 6.8l-.2-2ZM23.2 13.7l-.1-1.2a2 2 0 0 0-1-1c-.7-.2-1.6 0-2.3.1a28 28 0 0 0-6.2 3.1 106 106 0 0 0-14.3 11L.7 27c3.7-3.5 9.4-7.8 14-10.7a26.4 26.4 0 0 1 6.4-3h.3l-.2-.1v.2l2 .2ZM-.8 27c.6 1.1 1.3 2 2.2 2.6a5 5 0 0 0 2.8 1c2 .1 4-.6 6-1.4l-.6-1.8c-2.1.8-3.8 1.3-5.2 1.2-.7 0-1.3-.2-1.9-.6-.5-.4-1-1-1.6-2l-1.8 1Zm9.6 1a41.8 41.8 0 0 0 8.4 28.3c5.7 7.5 14 12.3 22.9 12v-2a26 26 0 0 1-21.3-11.2 40 40 0 0 1-8-27H9ZM39 67.4c.3 10.7 1 21.3 2.5 29.5.7 4 1.6 7.5 2.7 10.1 1.1 2.6 2.6 4.6 4.7 5l.4-2c-1-.2-2.2-1.3-3.2-3.8-1-2.3-2-5.7-2.7-9.7-1.4-8-2-18.5-2.4-29.1h-2Zm9.8 44.6c.7.2 1.1-.3 1.2-.4l.2-.4.2-.9.3-2.8.5-10.2.9-32.3h-2a1859.2 1859.2 0 0 1-1.4 42.3 38 38 0 0 1-.4 3.2c0-.1.4-.6 1-.4l-.5 2Zm2.6-46a39.2 39.2 0 0 0 21.8-15.4 46 46 0 0 0 7-21.1 73 73 0 0 0-2.6-25.9l-.1-.4v-.1l-1 .2-1 .3a14.2 14.2 0 0 1 .2.6 51 51 0 0 1 1.6 7.1 71 71 0 0 1 .9 18A37.2 37.2 0 0 1 50.8 64l.6 2Z\"\n mask=\"url(#a)\"\n />\n </g>\n </g>\n </svg>\n);\n\nexport const Loader: FunctionComponent<LoaderProps> = ({ isVisible, label }) => {\n return (\n <Backdrop isVisible={isVisible} sweep>\n <div className=\"flex flex-col items-center\" role=\"alert\">\n <div\n className={classnames(\n `relative will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out`,\n {\n 'translate-x-0 opacity-100 ': isVisible,\n 'opacity-0 translate-x-[600px] ': !isVisible,\n },\n )}\n style={{\n // the masks prevent subpixel flickering on transitions (and covid), please don't remove them\n maskImage:\n \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\\\")\",\n WebkitMaskImage:\n \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\\\")\",\n }}\n >\n {loaderSVG}\n </div>\n <div\n className={\n 'text-b3 mx-auto max-w-[320px] px-20 text-center will-change-[transform,opacity] transition-[transform,opacity] duration-500 ease-out ' +\n (isVisible ? 'translate-x-0 opacity-100 ' : 'opacity-0 translate-x-[300px] ')\n }\n >\n {label}\n </div>\n </div>\n </Backdrop>\n );\n};\n"],"names":["loaderSVG","jsxs","jsx","Loader","isVisible","label","Backdrop","classnames"],"mappings":";;;;AAWA,MAAMA,IACJ,gBAAAC,EAAC,OAAA,EAAI,SAAQ,eAAc,OAAO,KAChC,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EACC,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,GAAE;AAAA,IAAA;AAAA,EAAA,GAEN;AAAA,oBACC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,WAAU,oBAC1C,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAA,EAAK,IAAG,KAAI,MAAK,QAChB,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,KAAA,CAAK,EAAA,CACtB;AAAA,IACA,gBAAAD,EAAC,KAAA,EAAE,MAAK,WACN,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,GAAE;AAAA,UACF,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAAA,GACF,GAGWC,IAAyC,CAAC,EAAE,WAAAC,GAAW,OAAAC,QAEhE,gBAAAH,EAACI,GAAA,EAAS,WAAAF,GAAsB,OAAK,IACnC,4BAAC,OAAA,EAAI,WAAU,8BAA6B,MAAK,SAC/C,UAAA;AAAA,EAAA,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,UACE,8BAA8BH;AAAA,UAC9B,kCAAkC,CAACA;AAAA,QAAA;AAAA,MACrC;AAAA,MAEF,OAAO;AAAA;AAAA,QAEL,WACE;AAAA,QACF,iBACE;AAAA,MAAA;AAAA,MAGH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAAA,EAEH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,2IACCE,IAAY,+BAA+B;AAAA,MAG7C,UAAAC;AAAA,IAAA;AAAA,EAAA;AACH,EAAA,CACF,EAAA,CACF;"}
|
package/molecules/Popin.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
|
|
2
2
|
export type ClosePopinCallback = () => void;
|
|
3
|
-
interface PopinFooterProps {
|
|
3
|
+
export interface PopinFooterProps {
|
|
4
4
|
closeLabel: string;
|
|
5
5
|
onClose: ClosePopinCallback;
|
|
6
6
|
}
|
|
@@ -14,4 +14,3 @@ export interface PopinProps {
|
|
|
14
14
|
Footer?: FunctionComponent<PopinFooterProps> | false;
|
|
15
15
|
}
|
|
16
16
|
export declare const Popin: FunctionComponent<PropsWithChildren<PopinProps>>;
|
|
17
|
-
export {};
|
package/molecules/Popin.js
CHANGED
|
@@ -1,55 +1,49 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
import { Backdrop as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { c as
|
|
6
|
-
const
|
|
7
|
-
|
|
1
|
+
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as f } from "react";
|
|
3
|
+
import { Backdrop as p } from "./Backdrop.js";
|
|
4
|
+
import { Button as u } from "./Buttons/v2/Button.js";
|
|
5
|
+
import { c as x } from "../chunks/index.js";
|
|
6
|
+
const h = ({ closeLabel: o, onClose: e }) => /* @__PURE__ */ r(
|
|
7
|
+
u,
|
|
8
8
|
{
|
|
9
|
-
theme: "black",
|
|
10
|
-
variant: "icon",
|
|
11
9
|
color: "black",
|
|
12
10
|
variant: "circle",
|
|
13
11
|
icon: "CrossDefault",
|
|
14
12
|
className: "mx-auto",
|
|
15
|
-
label:
|
|
16
|
-
|
|
17
|
-
onClick: r
|
|
13
|
+
"aria-label": o,
|
|
14
|
+
onClick: e
|
|
18
15
|
}
|
|
19
|
-
),
|
|
20
|
-
title:
|
|
21
|
-
children:
|
|
22
|
-
closeLabel:
|
|
23
|
-
onClose:
|
|
24
|
-
isVisible:
|
|
25
|
-
className:
|
|
26
|
-
Footer:
|
|
16
|
+
), k = ({
|
|
17
|
+
title: o,
|
|
18
|
+
children: e,
|
|
19
|
+
closeLabel: s,
|
|
20
|
+
onClose: a,
|
|
21
|
+
isVisible: t,
|
|
22
|
+
className: l = "sm:w-360",
|
|
23
|
+
Footer: c = h
|
|
27
24
|
}) => {
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
] })
|
|
48
|
-
}
|
|
49
|
-
)
|
|
25
|
+
const n = f(t), i = n.current, m = !t && i;
|
|
26
|
+
return n.current = t, /* @__PURE__ */ r(p, { isVisible: t, onClose: a, children: /* @__PURE__ */ r(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
className: x(
|
|
30
|
+
"border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]",
|
|
31
|
+
{
|
|
32
|
+
"animate-zoomIn": t,
|
|
33
|
+
"animate-zoomOut": !t && m,
|
|
34
|
+
"opacity-0 scale-90": !t && !m
|
|
35
|
+
},
|
|
36
|
+
l
|
|
37
|
+
),
|
|
38
|
+
children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
|
|
39
|
+
o && /* @__PURE__ */ r("div", { className: "mt-12 text-h5 text-start font-serif", children: o }),
|
|
40
|
+
/* @__PURE__ */ r("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: e }),
|
|
41
|
+
c && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(c, { closeLabel: s, onClose: a }) })
|
|
42
|
+
] })
|
|
43
|
+
}
|
|
50
44
|
) });
|
|
51
45
|
};
|
|
52
46
|
export {
|
|
53
|
-
|
|
47
|
+
k as Popin
|
|
54
48
|
};
|
|
55
49
|
//# sourceMappingURL=Popin.js.map
|
package/molecules/Popin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/v2/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\nexport interface PopinFooterProps {\n closeLabel: string;\n onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n return (\n <Button\n color=\"black\"\n variant=\"circle\"\n icon=\"CrossDefault\"\n className=\"mx-auto\"\n aria-label={closeLabel}\n onClick={onClose}\n />\n );\n};\n\nexport interface PopinProps {\n title: ReactNode;\n closeLabel: string;\n onClose: ClosePopinCallback;\n isVisible: boolean;\n className?: string;\n showCloseButton?: boolean;\n Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n title,\n children,\n closeLabel,\n onClose,\n isVisible,\n className = 'sm:w-360',\n Footer = PopinFooter,\n}) => {\n // Prevent initial mount flash when closed: only animate leave if it was visible before\n const wasVisibleRef = useRef(isVisible);\n const wasVisible = wasVisibleRef.current;\n const isLeaving = !isVisible && wasVisible;\n\n // update ref for next render\n wasVisibleRef.current = isVisible;\n return (\n <Backdrop isVisible={isVisible} onClose={onClose}>\n <div\n className={classnames(\n 'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]',\n {\n 'animate-zoomIn': isVisible,\n 'animate-zoomOut': !isVisible && isLeaving,\n 'opacity-0 scale-90': !isVisible && !isLeaving,\n },\n className,\n )}\n >\n <div className=\"p-40 text-center max-h-[90vh] flex flex-col\">\n {title && <div className=\"mt-12 text-h5 text-start font-serif\">{title}</div>}\n <div className=\"mt-12 mb-40 last:mb-0 text-start overflow-auto\">{children}</div>\n {Footer && (\n <div>\n <Footer closeLabel={closeLabel} onClose={onClose} />\n </div>\n )}\n </div>\n </div>\n </Backdrop>\n );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","wasVisibleRef","useRef","wasVisible","isLeaving","Backdrop","classnames","jsxs"],"mappings":";;;;;AAcA,MAAMA,IAAc,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAE/B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,cAAYH;AAAA,IACZ,SAASC;AAAA,EAAA;AAAA,GAeFG,IAA0D,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAN;AAAA,EACA,SAAAC;AAAA,EACA,WAAAM;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAASV;AACX,MAAM;AAEJ,QAAMW,IAAgBC,EAAOJ,CAAS,GAChCK,IAAaF,EAAc,SAC3BG,IAAY,CAACN,KAAaK;AAGhC,SAAAF,EAAc,UAAUH,GAEtB,gBAAAL,EAACY,GAAA,EAAS,WAAAP,GAAsB,SAAAN,GAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWa;AAAA,QACT;AAAA,QACA;AAAA,UACE,kBAAkBR;AAAA,UAClB,mBAAmB,CAACA,KAAaM;AAAA,UACjC,sBAAsB,CAACN,KAAa,CAACM;AAAA,QAAA;AAAA,QAEvCL;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,+CACZ,UAAA;AAAA,QAAAX,KAAS,gBAAAH,EAAC,OAAA,EAAI,WAAU,uCAAuC,UAAAG,GAAM;AAAA,QACtE,gBAAAH,EAAC,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAA,CAAS;AAAA,QACzEG,KACC,gBAAAP,EAAC,OAAA,EACC,4BAACO,GAAA,EAAO,YAAAT,GAAwB,SAAAC,GAAkB,EAAA,CACpD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
|
package/molecules/Tabs/Tab.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FunctionComponent, PropsWithChildren } from 'react';
|
|
1
|
+
import { ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren } from 'react';
|
|
2
2
|
import { Theme } from './theme';
|
|
3
|
-
interface Props {
|
|
4
|
-
className?: string;
|
|
3
|
+
interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
|
|
5
4
|
/**
|
|
6
5
|
* Tab Heading text
|
|
7
6
|
*/
|
|
@@ -19,7 +18,7 @@ interface Props {
|
|
|
19
18
|
label: Props['label'];
|
|
20
19
|
}) => void;
|
|
21
20
|
/**
|
|
22
|
-
* Tab
|
|
21
|
+
* Tab theme
|
|
23
22
|
*/
|
|
24
23
|
theme?: Theme;
|
|
25
24
|
/**
|