@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/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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"}
|
|
@@ -1,53 +1,45 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { c
|
|
4
|
-
import { useRef as n, useEffect as
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
className: f,
|
|
2
|
+
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
3
|
+
import { c } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as n, useEffect as w } from "react";
|
|
5
|
+
import { useActiveTabControl as v } from "./hooks/tabControl.js";
|
|
6
|
+
const C = ({
|
|
7
|
+
className: o,
|
|
9
8
|
constrained: l = !1,
|
|
10
|
-
children:
|
|
9
|
+
children: a
|
|
11
10
|
}) => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
v(() => {
|
|
16
|
-
if (!r?.current)
|
|
11
|
+
const e = n(null), s = n(null), [i, t] = v();
|
|
12
|
+
w(() => {
|
|
13
|
+
if (!t?.current || !e.current)
|
|
17
14
|
return;
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, [a, r, o]);
|
|
25
|
-
const x = { "--active-tab": m };
|
|
26
|
-
return /* @__PURE__ */ t(
|
|
27
|
-
h.div,
|
|
15
|
+
const x = s.current.offsetWidth ?? 0, u = t.current.getBoundingClientRect(), m = e.current.getBoundingClientRect(), p = e.current.scrollLeft;
|
|
16
|
+
e.current.scrollLeft = p + (u.left - m.left) - x;
|
|
17
|
+
}, [t]);
|
|
18
|
+
const f = { "--active-tab": i };
|
|
19
|
+
return /* @__PURE__ */ r(
|
|
20
|
+
"div",
|
|
28
21
|
{
|
|
29
|
-
ref: s,
|
|
30
22
|
"data-name": "TabsHeader",
|
|
31
|
-
className:
|
|
32
|
-
"scrollbar-
|
|
33
|
-
|
|
23
|
+
className: c(
|
|
24
|
+
"scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20",
|
|
25
|
+
o
|
|
34
26
|
),
|
|
35
|
-
|
|
36
|
-
children: /* @__PURE__ */ d("div", { role: "tablist", className:
|
|
37
|
-
/* @__PURE__ */
|
|
27
|
+
ref: e,
|
|
28
|
+
children: /* @__PURE__ */ d("div", { role: "tablist", className: "flex flex-row", style: f, children: [
|
|
29
|
+
/* @__PURE__ */ r(
|
|
38
30
|
"div",
|
|
39
31
|
{
|
|
40
|
-
ref:
|
|
41
|
-
className:
|
|
32
|
+
ref: s,
|
|
33
|
+
className: c("shrink-0", {
|
|
42
34
|
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !l
|
|
43
35
|
})
|
|
44
36
|
}
|
|
45
37
|
),
|
|
46
|
-
|
|
47
|
-
/* @__PURE__ */
|
|
38
|
+
a,
|
|
39
|
+
/* @__PURE__ */ r(
|
|
48
40
|
"div",
|
|
49
41
|
{
|
|
50
|
-
className:
|
|
42
|
+
className: c("shrink-0", {
|
|
51
43
|
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !l
|
|
52
44
|
})
|
|
53
45
|
}
|
|
@@ -57,6 +49,6 @@ const j = ({
|
|
|
57
49
|
);
|
|
58
50
|
};
|
|
59
51
|
export {
|
|
60
|
-
|
|
52
|
+
C as TabList
|
|
61
53
|
};
|
|
62
54
|
//# sourceMappingURL=TabList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type CSSProperties,\n useEffect,\n useRef,\n type FunctionComponent,\n type PropsWithChildren,\n} from 'react';\
|
|
1
|
+
{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type CSSProperties,\n useEffect,\n useRef,\n type FunctionComponent,\n type PropsWithChildren,\n} from 'react';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n className?: string;\n /**\n * Remove filler placeholders\n */\n constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n constrained = false,\n children,\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n const spacerRef = useRef<HTMLDivElement>(null);\n const [currentTab, currentControl] = useActiveTabControl();\n\n useEffect(() => {\n if (!currentControl?.current || !ref.current) {\n return;\n }\n\n const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n const currentRect = currentControl.current.getBoundingClientRect();\n const containerRect = ref.current!.getBoundingClientRect();\n const scroll = ref.current!.scrollLeft;\n\n ref.current.scrollLeft = scroll + (currentRect.left - containerRect.left) - spacerWidth;\n }, [currentControl]);\n\n const style = { '--active-tab': currentTab } as CSSProperties;\n\n return (\n <div\n data-name=\"TabsHeader\"\n className={classnames(\n 'scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20',\n className,\n )}\n ref={ref}\n >\n <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n <div\n ref={spacerRef}\n className={classnames('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n {children}\n <div\n className={classnames('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n </div>\n </div>\n );\n};\n"],"names":["TabList","className","constrained","children","ref","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","useEffect","spacerWidth","currentRect","containerRect","scroll","style","jsx","classnames"],"mappings":";;;;;AAqBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAuB,IAAI,GACjCC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAA;AAErC,EAAAC,EAAU,MAAM;AACd,QAAI,CAACF,GAAgB,WAAW,CAACJ,EAAI;AACnC;AAGF,UAAMO,IAAcL,EAAU,QAAS,eAAe,GAChDM,IAAcJ,EAAe,QAAQ,sBAAA,GACrCK,IAAgBT,EAAI,QAAS,sBAAA,GAC7BU,IAASV,EAAI,QAAS;AAE5B,IAAAA,EAAI,QAAQ,aAAaU,KAAUF,EAAY,OAAOC,EAAc,QAAQF;AAAA,EAC9E,GAAG,CAACH,CAAc,CAAC;AAEnB,QAAMO,IAAQ,EAAE,gBAAgBR,EAAA;AAEhC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAhB;AAAA,MAAA;AAAA,MAEF,KAAAG;AAAA,MAEA,4BAAC,OAAA,EAAI,MAAK,WAAU,WAAU,iBAAgB,OAAAW,GAC5C,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKV;AAAA,YACL,WAAWW,EAAW,YAAY;AAAA,cAChC,0FACE,CAACf;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,QACD,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,YAAY;AAAA,cAChC,0FACE,CAACf;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,62 +1,43 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { c
|
|
4
|
-
import { useRef as
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
pointerEvents: "none",
|
|
10
|
-
height: 0
|
|
11
|
-
}, i = {
|
|
12
|
-
opacity: 1,
|
|
13
|
-
pointerEvents: "auto",
|
|
14
|
-
height: "auto"
|
|
15
|
-
}, P = ({
|
|
16
|
-
value: e,
|
|
17
|
-
className: c,
|
|
2
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
3
|
+
import { c } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as d, useEffect as b } from "react";
|
|
5
|
+
import { useTabsUid as m, useActiveTab as p } from "./hooks/tabControl.js";
|
|
6
|
+
const $ = ({
|
|
7
|
+
value: t,
|
|
8
|
+
className: o,
|
|
18
9
|
onSelect: a,
|
|
19
|
-
children:
|
|
10
|
+
children: i
|
|
20
11
|
}) => {
|
|
21
|
-
const r =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (!s.current) {
|
|
26
|
-
s.current = !0;
|
|
12
|
+
const r = m(), n = d(!1), e = p() === t;
|
|
13
|
+
return b(() => {
|
|
14
|
+
if (!n.current) {
|
|
15
|
+
n.current = !0;
|
|
27
16
|
return;
|
|
28
17
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
height: "auto"
|
|
33
|
-
},
|
|
34
|
-
onRest: () => {
|
|
35
|
-
o.start({
|
|
36
|
-
to: { height: t ? "auto" : 0 },
|
|
37
|
-
immediate: !0
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
}), t && a?.({ value: e });
|
|
41
|
-
}, [t, o, e, a]), /* @__PURE__ */ p(
|
|
42
|
-
h.div,
|
|
18
|
+
e && a?.({ value: t });
|
|
19
|
+
}, [e, t, a]), /* @__PURE__ */ s(
|
|
20
|
+
"div",
|
|
43
21
|
{
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"data-name": `TabPanel_${e}`,
|
|
22
|
+
id: `TabPanel_${t}_${r}`,
|
|
23
|
+
"data-name": `TabPanel_${t}`,
|
|
47
24
|
role: "tabpanel",
|
|
48
|
-
"aria-hidden": !
|
|
49
|
-
"aria-labelledby": `Tab_${
|
|
50
|
-
tabIndex:
|
|
51
|
-
className:
|
|
52
|
-
|
|
53
|
-
"
|
|
54
|
-
|
|
55
|
-
|
|
25
|
+
"aria-hidden": !e,
|
|
26
|
+
"aria-labelledby": `Tab_${t}_${r}`,
|
|
27
|
+
tabIndex: e ? 0 : -1,
|
|
28
|
+
className: c(
|
|
29
|
+
o,
|
|
30
|
+
"relative col-start-1 row-start-1 transition-opacity duration-500",
|
|
31
|
+
{
|
|
32
|
+
"pointer-events-none z-0 h-0 opacity-0": !e,
|
|
33
|
+
"pointer-events-auto z-1 h-auto opacity-100": e
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
children: i
|
|
56
37
|
}
|
|
57
38
|
);
|
|
58
39
|
};
|
|
59
40
|
export {
|
|
60
|
-
|
|
41
|
+
$ as TabPanel
|
|
61
42
|
};
|
|
62
43
|
//# sourceMappingURL=TabPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\
|
|
1
|
+
{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\n\nimport { useActiveTab, useTabsUid } from './hooks/tabControl';\n\ninterface Props {\n className?: string;\n /**\n * Tab panel index<br/>\n * _Can be **0** or **1** indexed_\n */\n value: number;\n /**\n * on panel select handler\n */\n onSelect?: (context: { value: Props['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n value,\n className,\n onSelect,\n children,\n}) => {\n const uid = useTabsUid();\n const mounted = useRef(false);\n const tabSelected = useActiveTab();\n const isActive = tabSelected === value;\n\n useEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n return;\n }\n\n if (isActive) {\n onSelect?.({ value });\n }\n }, [isActive, value, onSelect]);\n\n return (\n <div\n id={`TabPanel_${value}_${uid}`}\n data-name={`TabPanel_${value}`}\n role=\"tabpanel\"\n aria-hidden={!isActive}\n aria-labelledby={`Tab_${value}_${uid}`}\n tabIndex={isActive ? 0 : -1}\n className={classnames(\n className,\n 'relative col-start-1 row-start-1 transition-opacity duration-500',\n {\n 'pointer-events-none z-0 h-0 opacity-0': !isActive,\n 'pointer-events-auto z-1 h-auto opacity-100': isActive,\n },\n )}\n >\n {children}\n </div>\n );\n};\n"],"names":["TabPanel","value","className","onSelect","children","uid","useTabsUid","mounted","useRef","isActive","useActiveTab","useEffect","jsx","classnames"],"mappings":";;;;;AAoBO,MAAMA,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAA,GACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,EAAA,MACaT;AAEjC,SAAAU,EAAU,MAAM;AACd,QAAI,CAACJ,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAIE,KACFN,IAAW,EAAE,OAAAF,GAAO;AAAA,EAExB,GAAG,CAACQ,GAAUR,GAAOE,CAAQ,CAAC,GAG5B,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,YAAYX,CAAK,IAAII,CAAG;AAAA,MAC5B,aAAW,YAAYJ,CAAK;AAAA,MAC5B,MAAK;AAAA,MACL,eAAa,CAACQ;AAAA,MACd,mBAAiB,OAAOR,CAAK,IAAII,CAAG;AAAA,MACpC,UAAUI,IAAW,IAAI;AAAA,MACzB,WAAWI;AAAA,QACTX;AAAA,QACA;AAAA,QACA;AAAA,UACE,yCAAyC,CAACO;AAAA,UAC1C,8CAA8CA;AAAA,QAAA;AAAA,MAChD;AAAA,MAGD,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as f } from "react/jsx-runtime";
|
|
3
|
-
import { createContext as p, useId as
|
|
4
|
-
function
|
|
3
|
+
import { createContext as p, useId as v, useReducer as y, useCallback as u } from "react";
|
|
4
|
+
function x(e) {
|
|
5
5
|
const n = [...e.refs.keys()], o = (n.findIndex((t) => t === e.value) + 1) % n.length;
|
|
6
6
|
return { ...e, value: n[o] };
|
|
7
7
|
}
|
|
@@ -33,6 +33,7 @@ function b(e, n) {
|
|
|
33
33
|
function h(e, n) {
|
|
34
34
|
return {
|
|
35
35
|
...e,
|
|
36
|
+
...e.value === -1 && { value: n.payload.value },
|
|
36
37
|
refs: new Map(e.refs).set(n.payload.value, n.payload.ref)
|
|
37
38
|
};
|
|
38
39
|
}
|
|
@@ -40,7 +41,7 @@ function w(e, n) {
|
|
|
40
41
|
return { ...e, value: n.payload };
|
|
41
42
|
}
|
|
42
43
|
const i = {
|
|
43
|
-
next:
|
|
44
|
+
next: x,
|
|
44
45
|
previous: g,
|
|
45
46
|
start: C,
|
|
46
47
|
end: k,
|
|
@@ -70,13 +71,17 @@ const d = p({
|
|
|
70
71
|
}
|
|
71
72
|
});
|
|
72
73
|
d.displayName = "TabControlContext";
|
|
73
|
-
function P({ selected: e
|
|
74
|
-
const r =
|
|
74
|
+
function P({ selected: e, children: n }) {
|
|
75
|
+
const r = v(), [o, t] = y(I, {
|
|
76
|
+
uid: r,
|
|
77
|
+
value: e || -1,
|
|
78
|
+
refs: /* @__PURE__ */ new Map()
|
|
79
|
+
}), l = u((s, c) => {
|
|
75
80
|
t({ type: "register", payload: { value: s, ref: c } });
|
|
76
|
-
}, []),
|
|
81
|
+
}, []), a = u((s) => {
|
|
77
82
|
t({ type: "unregister", payload: { value: s } });
|
|
78
83
|
}, []);
|
|
79
|
-
return /* @__PURE__ */ f(d.Provider, { value: { ...o, dispatch: t, register:
|
|
84
|
+
return /* @__PURE__ */ f(d.Provider, { value: { ...o, dispatch: t, register: l, unregister: a }, children: n });
|
|
80
85
|
}
|
|
81
86
|
export {
|
|
82
87
|
d as TabControlContext,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabControl.js","sources":["../../../../lib/molecules/Tabs/context/TabControl.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type PropsWithChildren,\n type RefObject,\n useCallback,\n useId,\n useReducer,\n} from 'react';\n\ntype RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;\ntype RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;\n\ntype TabsUpdateAction = {\n type: 'update';\n payload: number;\n};\n\ntype TabsRegisterAction<T extends HTMLElement = HTMLElement> = {\n type: 'register';\n payload: { value: number; ref: RefObject<T> };\n};\n\ntype TabsUnregisterAction = {\n type: 'unregister';\n payload: { value: number };\n};\n\ntype TabsAction<T extends HTMLElement = HTMLElement> =\n | { type: 'start' | 'end' | 'previous' | 'next' }\n | TabsUpdateAction\n | TabsRegisterAction<T>\n | TabsUnregisterAction;\n\ninterface TabsState<T extends HTMLElement = HTMLElement> {\n uid: string;\n value: number;\n refs: RefTabs<T>;\n}\n\ninterface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {\n uid: string;\n value: number;\n refs: RefTabs<T>;\n dispatch: Dispatch<TabsAction>;\n register: (value: number, ref: RefTab<T>) => void;\n unregister: (value: number) => void;\n}\n\nfunction next(state: TabsState) {\n const keys = [...state.refs.keys()];\n const index = keys.findIndex((value) => value === state.value);\n const nextIndex = (index + 1) % keys.length;\n\n return { ...state, value: keys[nextIndex] };\n}\n\nfunction previous(state: TabsState) {\n const keys = [...state.refs.keys()];\n const index = keys.findIndex((value) => value === state.value);\n const previousIndex = (index - 1 + keys.length) % keys.length;\n\n return { ...state, value: keys[previousIndex] };\n}\n\nfunction start(state: TabsState) {\n const keys = [...state.refs.keys()];\n const firstIndex = keys[0];\n\n return {\n ...state,\n value: firstIndex,\n };\n}\n\nfunction end(state: TabsState) {\n const keys = [...state.refs.keys()];\n const lastIndex = keys[keys.length - 1];\n\n return {\n ...state,\n value: lastIndex,\n };\n}\n\nfunction unregister(state: TabsState, action: TabsUnregisterAction) {\n const deletedRefs = new Map(state.refs);\n deletedRefs.delete(action.payload.value);\n\n return {\n ...state,\n refs: deletedRefs,\n };\n}\n\nfunction register(state: TabsState, action: TabsRegisterAction) {\n return {\n ...state,\n refs: new Map(state.refs).set(action.payload.value, action.payload.ref),\n };\n}\n\nfunction update(state: TabsState, action: TabsUpdateAction) {\n return { ...state, value: action.payload };\n}\n\nconst actions = {\n next,\n previous,\n start,\n end,\n register,\n unregister,\n update,\n} as const;\n\nfunction tabsReducer(state: TabsState, action: TabsAction): TabsState {\n if (action.type in actions) {\n const actionFunction = actions[action.type] as (\n state: TabsState,\n action: TabsAction,\n ) => TabsState;\n\n return actionFunction(state, action);\n }\n\n return state;\n}\n\nexport const TabControlContext = createContext<TabControl>({\n uid: '',\n value: 0,\n refs: new Map(),\n dispatch: () => {\n console.warn('Tab Controller Context dispatch used outside of Provider');\n },\n register: () => {\n console.warn('Tab Controller Context register used outside of Provider');\n },\n unregister: () => {\n console.warn('Tab Controller Context unregister used outside of Provider');\n },\n});\n\nTabControlContext.displayName = 'TabControlContext';\n\nexport interface TabsProviderProps {\n selected?: number;\n /**\n * The selected tab value\n * @deprecated Min props as no effect on the Tabs component and will be removed in future versions\n */\n min?: number;\n\n /**\n * The selected tab value\n * @deprecated Max props as no effect on the Tabs component and will be removed in future versions\n */\n max?: number;\n}\n\nexport function TabsProvider({ selected
|
|
1
|
+
{"version":3,"file":"TabControl.js","sources":["../../../../lib/molecules/Tabs/context/TabControl.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type PropsWithChildren,\n type RefObject,\n useCallback,\n useId,\n useReducer,\n} from 'react';\n\ntype RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;\ntype RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;\n\ntype TabsUpdateAction = {\n type: 'update';\n payload: number;\n};\n\ntype TabsRegisterAction<T extends HTMLElement = HTMLElement> = {\n type: 'register';\n payload: { value: number; ref: RefObject<T> };\n};\n\ntype TabsUnregisterAction = {\n type: 'unregister';\n payload: { value: number };\n};\n\ntype TabsAction<T extends HTMLElement = HTMLElement> =\n | { type: 'start' | 'end' | 'previous' | 'next' }\n | TabsUpdateAction\n | TabsRegisterAction<T>\n | TabsUnregisterAction;\n\ninterface TabsState<T extends HTMLElement = HTMLElement> {\n uid: string;\n value: number;\n refs: RefTabs<T>;\n}\n\ninterface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {\n uid: string;\n value: number;\n refs: RefTabs<T>;\n dispatch: Dispatch<TabsAction>;\n register: (value: number, ref: RefTab<T>) => void;\n unregister: (value: number) => void;\n}\n\nfunction next(state: TabsState) {\n const keys = [...state.refs.keys()];\n const index = keys.findIndex((value) => value === state.value);\n const nextIndex = (index + 1) % keys.length;\n\n return { ...state, value: keys[nextIndex] };\n}\n\nfunction previous(state: TabsState) {\n const keys = [...state.refs.keys()];\n const index = keys.findIndex((value) => value === state.value);\n const previousIndex = (index - 1 + keys.length) % keys.length;\n\n return { ...state, value: keys[previousIndex] };\n}\n\nfunction start(state: TabsState) {\n const keys = [...state.refs.keys()];\n const firstIndex = keys[0];\n\n return {\n ...state,\n value: firstIndex,\n };\n}\n\nfunction end(state: TabsState) {\n const keys = [...state.refs.keys()];\n const lastIndex = keys[keys.length - 1];\n\n return {\n ...state,\n value: lastIndex,\n };\n}\n\nfunction unregister(state: TabsState, action: TabsUnregisterAction) {\n const deletedRefs = new Map(state.refs);\n deletedRefs.delete(action.payload.value);\n\n return {\n ...state,\n refs: deletedRefs,\n };\n}\n\nfunction register(state: TabsState, action: TabsRegisterAction) {\n return {\n ...state,\n ...(state.value === -1 && { value: action.payload.value }),\n refs: new Map(state.refs).set(action.payload.value, action.payload.ref),\n };\n}\n\nfunction update(state: TabsState, action: TabsUpdateAction) {\n return { ...state, value: action.payload };\n}\n\nconst actions = {\n next,\n previous,\n start,\n end,\n register,\n unregister,\n update,\n} as const;\n\nfunction tabsReducer(state: TabsState, action: TabsAction): TabsState {\n if (action.type in actions) {\n const actionFunction = actions[action.type] as (\n state: TabsState,\n action: TabsAction,\n ) => TabsState;\n\n return actionFunction(state, action);\n }\n\n return state;\n}\n\nexport const TabControlContext = createContext<TabControl>({\n uid: '',\n value: 0,\n refs: new Map(),\n dispatch: () => {\n console.warn('Tab Controller Context dispatch used outside of Provider');\n },\n register: () => {\n console.warn('Tab Controller Context register used outside of Provider');\n },\n unregister: () => {\n console.warn('Tab Controller Context unregister used outside of Provider');\n },\n});\n\nTabControlContext.displayName = 'TabControlContext';\n\nexport interface TabsProviderProps {\n selected?: number;\n /**\n * The selected tab value\n * @deprecated Min props as no effect on the Tabs component and will be removed in future versions\n */\n min?: number;\n\n /**\n * The selected tab value\n * @deprecated Max props as no effect on the Tabs component and will be removed in future versions\n */\n max?: number;\n}\n\nexport function TabsProvider({ selected, children }: PropsWithChildren<TabsProviderProps>) {\n const uid = useId();\n const [state, dispatch] = useReducer(tabsReducer, {\n uid,\n value: selected || -1,\n refs: new Map(),\n });\n\n const register = useCallback(<T extends HTMLElement>(value: number, ref: RefTab<T>) => {\n dispatch({ type: 'register', payload: { value, ref } });\n }, []);\n\n const unregister = useCallback((value: number) => {\n dispatch({ type: 'unregister', payload: { value } });\n }, []);\n\n return (\n <TabControlContext.Provider value={{ ...state, dispatch, register, unregister }}>\n {children}\n </TabControlContext.Provider>\n );\n}\n"],"names":["next","state","keys","nextIndex","value","previous","previousIndex","start","firstIndex","end","lastIndex","unregister","action","deletedRefs","register","update","actions","tabsReducer","actionFunction","TabControlContext","createContext","TabsProvider","selected","children","uid","useId","dispatch","useReducer","useCallback","ref","jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0-beta.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -103,12 +103,14 @@
|
|
|
103
103
|
"build": "vite build && npm run build:exports",
|
|
104
104
|
"build:storybook": "storybook build",
|
|
105
105
|
"build-storybook": "storybook build",
|
|
106
|
+
"build:check": "tsc -b",
|
|
106
107
|
"lint": "eslint . --report-unused-disable-directives",
|
|
107
108
|
"lint:fix": "eslint . --fix",
|
|
108
109
|
"prettier:write": "prettier . --write --ignore-unknown",
|
|
109
110
|
"test": "vitest run",
|
|
110
111
|
"test:dev": "vitest watch",
|
|
111
112
|
"test:update": "vitest -u",
|
|
113
|
+
"update": "npx update-browserslist-db@latest",
|
|
112
114
|
"prepare": "husky",
|
|
113
115
|
"build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm tools/exports-builder/index.ts",
|
|
114
116
|
"chromatic": "chromatic"
|
|
@@ -130,7 +132,6 @@
|
|
|
130
132
|
"@commitlint/cli": "18.6.1",
|
|
131
133
|
"@commitlint/config-conventional": "18.6.2",
|
|
132
134
|
"@netsells/storybook-mockdate": "0.3.3",
|
|
133
|
-
"@react-spring/web": "^9.7.3",
|
|
134
135
|
"@storybook/addon-a11y": "9.1.7",
|
|
135
136
|
"@storybook/addon-docs": "9.1.7",
|
|
136
137
|
"@storybook/addon-links": "9.1.7",
|
|
@@ -143,8 +144,8 @@
|
|
|
143
144
|
"@testing-library/react": "^14.1.2",
|
|
144
145
|
"@testing-library/user-event": "^14.5.2",
|
|
145
146
|
"@types/fs-extra": "^11.0.4",
|
|
146
|
-
"@types/picomatch": "^2.3.3",
|
|
147
147
|
"@types/lodash": "^4.17.20",
|
|
148
|
+
"@types/picomatch": "^2.3.3",
|
|
148
149
|
"@types/react": "^18.2.48",
|
|
149
150
|
"@types/react-dom": "^18.2.18",
|
|
150
151
|
"@typescript-eslint/eslint-plugin": "8.45.0",
|
|
@@ -192,7 +193,6 @@
|
|
|
192
193
|
},
|
|
193
194
|
"peerDependencies": {
|
|
194
195
|
"@clubmed/trident-icons": ">=1.3.3",
|
|
195
|
-
"@react-spring/web": ">=9",
|
|
196
196
|
"react": ">=17.0.2",
|
|
197
197
|
"react-dom": ">=17.0.2",
|
|
198
198
|
"tailwindcss": ">=3.3.5"
|
|
@@ -209,9 +209,6 @@
|
|
|
209
209
|
},
|
|
210
210
|
"tailwindcss": {
|
|
211
211
|
"optional": false
|
|
212
|
-
},
|
|
213
|
-
"@react-spring/web": {
|
|
214
|
-
"optional": false
|
|
215
212
|
}
|
|
216
213
|
},
|
|
217
214
|
"sideEffects": [
|