@clubmed/trident-ui 1.3.1-beta.1 → 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 +23 -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/hooks/useValue.js +6 -6
- package/hooks/useValue.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/Checkboxes/Checkbox.js +1 -1
- package/molecules/Forms/Checkboxes/Checkbox.js.map +1 -1
- package/molecules/Forms/Filter.js +1 -1
- package/molecules/Forms/Filter.js.map +1 -1
- package/molecules/Forms/NumberField.d.ts +4 -4
- package/molecules/Forms/Radios/Radio.js +5 -5
- package/molecules/Forms/Radios/Radio.js.map +1 -1
- package/molecules/Forms/Range.js.map +1 -1
- package/molecules/Forms/Switch.js +5 -5
- package/molecules/Forms/Switch.js.map +1 -1
- 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 +20 -19
- 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/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
|
/**
|
package/molecules/Tabs/Tab.js
CHANGED
|
@@ -1,102 +1,114 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { c as
|
|
4
|
-
import { useRef as
|
|
5
|
-
import { animated as B } from "@react-spring/web";
|
|
2
|
+
import { jsx as l, jsxs as $ } from "react/jsx-runtime";
|
|
3
|
+
import { c as p } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as d, useEffect as j, useCallback as s } from "react";
|
|
6
5
|
import { useActiveTab as I, useTabsUid as P, useRegisterTabControl as U } from "./hooks/tabControl.js";
|
|
7
6
|
import { getTheme as z } from "./theme.js";
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
const f = "-z-1 rounded-pill absolute inset-0 duration-300", X = ({
|
|
11
|
-
className: y,
|
|
7
|
+
import { useKeyboardControls as B } from "../../hooks/useKeyboardControls.js";
|
|
8
|
+
const y = "-z-1 rounded-pill absolute inset-0 duration-300", J = ({
|
|
12
9
|
label: c,
|
|
13
|
-
children:
|
|
14
|
-
value:
|
|
15
|
-
onSelect:
|
|
16
|
-
as:
|
|
17
|
-
theme:
|
|
10
|
+
children: h,
|
|
11
|
+
value: n,
|
|
12
|
+
onSelect: u,
|
|
13
|
+
as: x = "h2",
|
|
14
|
+
theme: T = "yellow",
|
|
15
|
+
...m
|
|
18
16
|
}) => {
|
|
19
|
-
const i =
|
|
20
|
-
|
|
21
|
-
const
|
|
17
|
+
const i = d(null), r = I(), b = P(), t = U({ value: n, ref: i }), a = d(r), o = d(r === n);
|
|
18
|
+
o.current = r === n;
|
|
19
|
+
const g = { "--tab-index": n }, { textColor: C, textColorActive: k, bgColor: w } = z(T);
|
|
22
20
|
j(() => {
|
|
23
|
-
a.current !==
|
|
24
|
-
}, [c,
|
|
25
|
-
const
|
|
26
|
-
n.current && s();
|
|
27
|
-
}, [s]), k = r(() => {
|
|
21
|
+
a.current !== r && n === r && (i.current?.focus(), u?.({ value: n, label: c })), a.current !== r && (a.current = r);
|
|
22
|
+
}, [c, n, u, r]);
|
|
23
|
+
const A = s(() => {
|
|
28
24
|
t({ type: "start" });
|
|
29
|
-
}, [t]),
|
|
25
|
+
}, [t]), E = s(() => {
|
|
30
26
|
t({ type: "end" });
|
|
31
|
-
}, [t]),
|
|
27
|
+
}, [t]), v = s(() => {
|
|
32
28
|
t({ type: "previous" });
|
|
33
|
-
}, [t]),
|
|
29
|
+
}, [t]), N = s(() => {
|
|
34
30
|
t({ type: "next" });
|
|
35
|
-
}, [t]),
|
|
36
|
-
const
|
|
37
|
-
t({ type:
|
|
38
|
-
}, [t]),
|
|
39
|
-
const
|
|
40
|
-
t({ type:
|
|
41
|
-
}, [t]),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
31
|
+
}, [t]), _ = s(() => {
|
|
32
|
+
const e = document.documentElement.dir === "rtl";
|
|
33
|
+
t({ type: e ? "next" : "previous" });
|
|
34
|
+
}, [t]), L = s(() => {
|
|
35
|
+
const e = document.documentElement.dir === "rtl";
|
|
36
|
+
t({ type: e ? "previous" : "next" });
|
|
37
|
+
}, [t]), f = B({
|
|
38
|
+
start: A,
|
|
39
|
+
end: E,
|
|
40
|
+
up: v,
|
|
41
|
+
down: N,
|
|
42
|
+
left: _,
|
|
43
|
+
right: L
|
|
44
|
+
}), R = s(
|
|
45
|
+
(e) => {
|
|
46
|
+
const D = e.key === " " || e.key === "Spacebar" || e.code === "Space", K = e.key === "Enter" || e.code === "Enter";
|
|
47
|
+
if (o.current && (D || K)) {
|
|
48
|
+
e.preventDefault();
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
f(e);
|
|
52
|
+
},
|
|
53
|
+
[f]
|
|
54
|
+
), S = () => {
|
|
55
|
+
o.current || t({ type: "update", payload: n });
|
|
56
|
+
};
|
|
57
|
+
return /* @__PURE__ */ l(
|
|
58
|
+
"div",
|
|
54
59
|
{
|
|
55
|
-
|
|
60
|
+
...m,
|
|
61
|
+
id: m.id || `Tab_${n}_${b}`,
|
|
56
62
|
"data-name": "Tab",
|
|
57
63
|
ref: i,
|
|
58
64
|
role: "tab",
|
|
59
|
-
"aria-selected":
|
|
60
|
-
"aria-controls": `TabPanel_${
|
|
61
|
-
tabIndex:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
|
|
65
|
-
y,
|
|
65
|
+
"aria-selected": o.current,
|
|
66
|
+
"aria-controls": `TabPanel_${n}_${b}`,
|
|
67
|
+
tabIndex: o.current ? 0 : -1,
|
|
68
|
+
className: p(
|
|
69
|
+
"group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle text-b3 font-semibold outline-none",
|
|
66
70
|
{
|
|
67
|
-
[C]: !
|
|
68
|
-
[
|
|
71
|
+
[C]: !o,
|
|
72
|
+
[k]: o,
|
|
73
|
+
"transition-transform active:scale-[1.03]": o
|
|
69
74
|
}
|
|
70
75
|
),
|
|
71
|
-
onKeyDown:
|
|
72
|
-
onClick:
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
76
|
+
onKeyDown: R,
|
|
77
|
+
onClick: S,
|
|
78
|
+
children: /* @__PURE__ */ $(
|
|
79
|
+
x,
|
|
80
|
+
{
|
|
81
|
+
className: "relative inline-block px-20 py-12",
|
|
82
|
+
...o ? {} : { role: "presentation" },
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ l(
|
|
85
|
+
"span",
|
|
86
|
+
{
|
|
87
|
+
className: p(
|
|
88
|
+
"transition-colors group-focus-within:bg-pearl group-hover:bg-pearl",
|
|
89
|
+
y
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
/* @__PURE__ */ l(
|
|
94
|
+
"span",
|
|
95
|
+
{
|
|
96
|
+
className: p(
|
|
97
|
+
"tab-focus-pill ease transition-transform/colors",
|
|
98
|
+
y,
|
|
99
|
+
w
|
|
100
|
+
),
|
|
101
|
+
style: g
|
|
102
|
+
}
|
|
90
103
|
),
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
] })
|
|
104
|
+
h ?? c
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
)
|
|
96
108
|
}
|
|
97
109
|
);
|
|
98
110
|
};
|
|
99
111
|
export {
|
|
100
|
-
|
|
112
|
+
J as Tab
|
|
101
113
|
};
|
|
102
114
|
//# sourceMappingURL=Tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type CSSProperties,\n type FunctionComponent,\n useCallback,\n useEffect,\n useRef,\n type
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FunctionComponent,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n type KeyboardEvent,\n} from 'react';\n\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from './hooks/tabControl';\nimport { getTheme, type Theme } from './theme';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n /**\n * Tab Heading text\n */\n label?: string;\n /**\n * Tab heading index<br/>\n * _Can be **0** or **1** indexed_\n */\n value: number;\n /**\n * on tab select handler\n */\n onSelect?: (context: { value: Props['value']; label: Props['label'] }) => void;\n /**\n * Tab theme\n */\n theme?: Theme;\n /**\n * Heading type\n * _default: **h2**_\n */\n as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<Props>> = ({\n label,\n children,\n value,\n onSelect,\n as: TagName = 'h2',\n theme = 'yellow',\n ...attr\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const activeTab = useActiveTab();\n const uid = useTabsUid();\n const dispatch = useRegisterTabControl({ value, ref });\n const previousActiveTab = useRef(activeTab);\n\n const isActive = useRef(activeTab === value);\n isActive.current = activeTab === value;\n\n const pillStyle = { '--tab-index': value } as CSSProperties;\n const { textColor, textColorActive, bgColor } = getTheme(theme);\n\n useEffect(() => {\n if (previousActiveTab.current !== activeTab && value === activeTab) {\n ref.current?.focus();\n onSelect?.({ value, label });\n }\n if (previousActiveTab.current !== activeTab) {\n previousActiveTab.current = activeTab;\n }\n }, [label, value, onSelect, activeTab]);\n\n const start = useCallback(() => {\n dispatch({ type: 'start' });\n }, [dispatch]);\n\n const end = useCallback(() => {\n dispatch({ type: 'end' });\n }, [dispatch]);\n\n const up = useCallback(() => {\n dispatch({ type: 'previous' });\n }, [dispatch]);\n\n const down = useCallback(() => {\n dispatch({ type: 'next' });\n }, [dispatch]);\n\n const left = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'next' : 'previous' });\n }, [dispatch]);\n\n const right = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'previous' : 'next' });\n }, [dispatch]);\n\n const keyboardHandler = useKeyboardControls({\n start,\n end,\n up,\n down,\n left,\n right,\n });\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';\n const isEnter = e.key === 'Enter' || e.code === 'Enter';\n\n if (isActive.current && (isSpace || isEnter)) {\n e.preventDefault();\n return;\n }\n\n keyboardHandler(e);\n },\n [keyboardHandler],\n );\n\n const handleClick = () => {\n if (isActive.current) {\n return;\n }\n\n dispatch({ type: 'update', payload: value });\n };\n\n return (\n <div\n {...attr}\n id={attr.id || `Tab_${value}_${uid}`}\n data-name=\"Tab\"\n ref={ref}\n role=\"tab\"\n aria-selected={isActive.current}\n aria-controls={`TabPanel_${value}_${uid}`}\n tabIndex={isActive.current ? 0 : -1}\n className={classnames(\n 'group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle text-b3 font-semibold outline-none',\n {\n [textColor]: !isActive,\n [textColorActive]: isActive,\n 'transition-transform active:scale-[1.03]': isActive,\n },\n )}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n >\n <TagName\n className=\"relative inline-block px-20 py-12\"\n {...(!isActive ? { role: 'presentation' } : {})}\n >\n <span\n className={classnames(\n 'transition-colors group-focus-within:bg-pearl group-hover:bg-pearl',\n BACKGROUND_PILL_CLASSNAME,\n )}\n />\n <span\n className={classnames(\n 'tab-focus-pill ease transition-transform/colors',\n BACKGROUND_PILL_CLASSNAME,\n bgColor,\n )}\n style={pillStyle}\n />\n {children ?? label}\n </TagName>\n </div>\n );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","label","children","value","onSelect","TagName","theme","attr","ref","useRef","activeTab","useActiveTab","uid","useTabsUid","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","useEffect","start","useCallback","end","up","down","left","isRTL","right","keyboardHandler","useKeyboardControls","handleKeyDown","isSpace","isEnter","handleClick","jsx","classnames","jsxs"],"mappings":"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"}
|