@clubmed/trident-ui 1.2.0-beta.5 → 1.2.0-rc.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +16 -0
- package/molecules/Tabs/Tab.d.ts +33 -0
- package/molecules/Tabs/Tab.js +101 -0
- package/molecules/Tabs/Tab.js.map +1 -0
- package/molecules/Tabs/TabList.d.ts +10 -0
- package/molecules/Tabs/TabList.js +62 -0
- package/molecules/Tabs/TabList.js.map +1 -0
- package/molecules/Tabs/TabPanel.d.ts +17 -0
- package/molecules/Tabs/TabPanel.js +60 -0
- package/molecules/Tabs/TabPanel.js.map +1 -0
- package/molecules/Tabs/TabsHeader.d.ts +6 -10
- package/molecules/Tabs/TabsHeader.js +3 -59
- package/molecules/Tabs/TabsHeader.js.map +1 -1
- package/molecules/Tabs/TabsHeading.d.ts +6 -33
- package/molecules/Tabs/TabsHeading.js +3 -98
- package/molecules/Tabs/TabsHeading.js.map +1 -1
- package/molecules/Tabs/TabsPanel.d.ts +6 -17
- package/molecules/Tabs/TabsPanel.js +3 -57
- package/molecules/Tabs/TabsPanel.js.map +1 -1
- package/molecules/Tabs/index.d.ts +3 -1
- package/molecules/Tabs/index.js +12 -8
- package/molecules/Tabs/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
# [1.2.0-rc.1](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0...v1.2.0-rc.1) (2024-11-25)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **ci:** fix external option for @clubmed/trident-icons ([2b656c6](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/2b656c652395bb1076896675c16eea8abf7a4770))
|
|
9
|
+
* **ci:** fix external option for @clubmed/trident-icons and update version ([bd69323](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/bd69323a5a4f96b61a82a948c39762c6181ca134))
|
|
10
|
+
* **icons:** clean PeopleDouble svg ([cb2e723](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/cb2e723ffd5cede6da2bc5096e1dbc0094a01dac))
|
|
11
|
+
* **icons:** fix re-exported names in barrels files ([575c2c0](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/575c2c08c26fac157cd4000bc2d216157a52c875))
|
|
12
|
+
* update vite configuration to exclude correctly trident-icons from the final build ([ba80ead](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/ba80eadbd81b4f29add98dbebdf9a70dedebe71a))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **icons:** use @clubmed/trident-icons ([8beaf95](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/8beaf950fd2a5ceb744914d42f890aced3536a9f))
|
|
18
|
+
|
|
3
19
|
# [1.2.0-beta.5](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.2.0-beta.4...v1.2.0-beta.5) (2024-11-23)
|
|
4
20
|
|
|
5
21
|
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
import { type Theme } from './theme';
|
|
3
|
+
import './Tab.css';
|
|
4
|
+
interface Props {
|
|
5
|
+
className?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Tab Heading text
|
|
8
|
+
*/
|
|
9
|
+
label: string;
|
|
10
|
+
/**
|
|
11
|
+
* Tab heading index<br/>
|
|
12
|
+
* _Can be **0** or **1** indexed_
|
|
13
|
+
*/
|
|
14
|
+
value: number;
|
|
15
|
+
/**
|
|
16
|
+
* on tab select handler
|
|
17
|
+
*/
|
|
18
|
+
onSelect?: (context: {
|
|
19
|
+
value: Props['value'];
|
|
20
|
+
label: Props['label'];
|
|
21
|
+
}) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Tab Heading theme
|
|
24
|
+
*/
|
|
25
|
+
theme?: Theme;
|
|
26
|
+
/**
|
|
27
|
+
* Heading type
|
|
28
|
+
* _default: **h2**_
|
|
29
|
+
*/
|
|
30
|
+
as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
|
|
31
|
+
}
|
|
32
|
+
export declare const Tab: FunctionComponent<PropsWithChildren<Props>>;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as u, jsxs as B } from "react/jsx-runtime";
|
|
3
|
+
import { c as m } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as d, useEffect as I, useCallback as r } from "react";
|
|
5
|
+
import { animated as _ } from "@react-spring/web";
|
|
6
|
+
import { useActiveTab as z, useRegisterTabControl as G } from "./hooks/tabControl.js";
|
|
7
|
+
import { getTheme as M } from "./theme.js";
|
|
8
|
+
import { useSafeBoop as O } from "../../hooks/useSafeBoop.js";
|
|
9
|
+
import { useKeyboardControls as P } from "../../hooks/useKeyboardControls.js";
|
|
10
|
+
const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
|
|
11
|
+
className: b,
|
|
12
|
+
label: a,
|
|
13
|
+
children: y,
|
|
14
|
+
value: e,
|
|
15
|
+
onSelect: i,
|
|
16
|
+
as: g = "h2",
|
|
17
|
+
theme: h = "yellow"
|
|
18
|
+
}) => {
|
|
19
|
+
const p = d(null), o = z(), t = G({ value: e, ref: p }), l = d(o), n = d(o === e);
|
|
20
|
+
n.current = o === e;
|
|
21
|
+
const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = M(h), [A, c] = O({ scale: 1.02 });
|
|
22
|
+
I(() => {
|
|
23
|
+
var s;
|
|
24
|
+
l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
|
|
25
|
+
}, [a, e, i, o]);
|
|
26
|
+
const v = r(() => {
|
|
27
|
+
n.current && c();
|
|
28
|
+
}, [c]), N = r(() => {
|
|
29
|
+
t({ type: "start" });
|
|
30
|
+
}, [t]), k = r(() => {
|
|
31
|
+
t({ type: "end" });
|
|
32
|
+
}, [t]), L = r(() => {
|
|
33
|
+
t({ type: "previous" });
|
|
34
|
+
}, [t]), R = r(() => {
|
|
35
|
+
t({ type: "next" });
|
|
36
|
+
}, [t]), E = r(() => {
|
|
37
|
+
const s = document.documentElement.dir === "rtl";
|
|
38
|
+
t({ type: s ? "next" : "previous" });
|
|
39
|
+
}, [t]), K = r(() => {
|
|
40
|
+
const s = document.documentElement.dir === "rtl";
|
|
41
|
+
t({ type: s ? "previous" : "next" });
|
|
42
|
+
}, [t]), D = P({
|
|
43
|
+
activate: v,
|
|
44
|
+
start: N,
|
|
45
|
+
end: k,
|
|
46
|
+
up: L,
|
|
47
|
+
down: R,
|
|
48
|
+
left: E,
|
|
49
|
+
right: K
|
|
50
|
+
}), j = r(() => {
|
|
51
|
+
t({ type: "update", payload: e }), n.current && c();
|
|
52
|
+
}, [c, t, e]);
|
|
53
|
+
return /* @__PURE__ */ u(
|
|
54
|
+
_.div,
|
|
55
|
+
{
|
|
56
|
+
"data-name": "Tab",
|
|
57
|
+
ref: p,
|
|
58
|
+
role: "tab",
|
|
59
|
+
"aria-selected": n.current,
|
|
60
|
+
tabIndex: n.current ? 0 : -1,
|
|
61
|
+
style: A,
|
|
62
|
+
className: m(
|
|
63
|
+
"text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
|
|
64
|
+
b,
|
|
65
|
+
{
|
|
66
|
+
[C]: !n.current,
|
|
67
|
+
[T]: n.current
|
|
68
|
+
}
|
|
69
|
+
),
|
|
70
|
+
onKeyDown: D,
|
|
71
|
+
onClick: j,
|
|
72
|
+
children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
|
|
73
|
+
/* @__PURE__ */ u(
|
|
74
|
+
"span",
|
|
75
|
+
{
|
|
76
|
+
className: m(
|
|
77
|
+
"group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
|
|
78
|
+
f
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
/* @__PURE__ */ u(
|
|
83
|
+
"span",
|
|
84
|
+
{
|
|
85
|
+
className: m(
|
|
86
|
+
"tab-focus-pill ease transition-transform/colors",
|
|
87
|
+
f,
|
|
88
|
+
w
|
|
89
|
+
),
|
|
90
|
+
style: x
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
y ?? a
|
|
94
|
+
] })
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
export {
|
|
99
|
+
W as Tab
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=Tab.js.map
|
|
@@ -0,0 +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 PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\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 {\n className?: string;\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 Heading 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 className,\n label,\n children,\n value,\n onSelect,\n as: TagName = 'h2',\n theme = 'yellow',\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const activeTab = useActiveTab();\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 const [boopStyle, boopTrigger] = useSafeBoop({ scale: 1.02 });\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 activate = useCallback(() => {\n if (isActive.current) {\n boopTrigger();\n }\n }, [boopTrigger]);\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 handleKeyDown = useKeyboardControls({\n activate,\n start,\n end,\n up,\n down,\n left,\n right,\n });\n\n const handleClick = useCallback(() => {\n dispatch({ type: 'update', payload: value });\n\n if (isActive.current) {\n boopTrigger();\n }\n }, [boopTrigger, dispatch, value]);\n\n return (\n <animated.div\n data-name=\"Tab\"\n ref={ref}\n role=\"tab\"\n aria-selected={isActive.current}\n tabIndex={isActive.current ? 0 : -1}\n style={boopStyle}\n className={classnames(\n 'text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none',\n className,\n {\n [textColor]: !isActive.current,\n [textColorActive]: isActive.current,\n },\n )}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n >\n <TagName className=\"relative inline-block px-20 py-12\">\n <span\n className={classnames(\n 'group-hover:bg-pearl group-focus-within:bg-pearl transition-colors',\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 </animated.div>\n );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","className","label","children","value","onSelect","TagName","theme","ref","useRef","activeTab","useActiveTab","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","boopStyle","boopTrigger","useSafeBoop","useEffect","_a","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
className?: string;
|
|
4
|
+
/**
|
|
5
|
+
* Remove filler placeholders
|
|
6
|
+
*/
|
|
7
|
+
constrained?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const TabList: FunctionComponent<PropsWithChildren<Props>>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as l, jsxs as d } from "react/jsx-runtime";
|
|
3
|
+
import { c as t } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as f, useEffect as v } from "react";
|
|
5
|
+
import { useSpring as b, animated as h } from "@react-spring/web";
|
|
6
|
+
import { useActiveTabControl as L } from "./hooks/tabControl.js";
|
|
7
|
+
const k = ({
|
|
8
|
+
className: n,
|
|
9
|
+
constrained: r = !1,
|
|
10
|
+
children: i
|
|
11
|
+
}) => {
|
|
12
|
+
const s = f(null), c = f(null), [m, e] = L(), [{ scrollLeft: a }, o] = b(() => ({
|
|
13
|
+
from: { scrollLeft: 0 }
|
|
14
|
+
}));
|
|
15
|
+
v(() => {
|
|
16
|
+
if (!(e != null && e.current))
|
|
17
|
+
return;
|
|
18
|
+
const p = e.current.getBoundingClientRect().left, u = s.current.scrollLeft, w = c.current.offsetWidth;
|
|
19
|
+
o.start({
|
|
20
|
+
to: {
|
|
21
|
+
scrollLeft: u + p - w
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}, [a, e, o]);
|
|
25
|
+
const x = { "--active-tab": m };
|
|
26
|
+
return /* @__PURE__ */ l(
|
|
27
|
+
h.div,
|
|
28
|
+
{
|
|
29
|
+
ref: s,
|
|
30
|
+
"data-name": "TabsHeader",
|
|
31
|
+
className: t(
|
|
32
|
+
"scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
|
|
33
|
+
n
|
|
34
|
+
),
|
|
35
|
+
scrollLeft: a,
|
|
36
|
+
children: /* @__PURE__ */ d("div", { role: "tablist", className: t("flex flex-row"), style: x, children: [
|
|
37
|
+
/* @__PURE__ */ l(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
ref: c,
|
|
41
|
+
className: t("shrink-0", {
|
|
42
|
+
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
|
|
43
|
+
})
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
i,
|
|
47
|
+
/* @__PURE__ */ l(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
className: t("shrink-0", {
|
|
51
|
+
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
|
|
52
|
+
})
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
] })
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
k as TabList
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=TabList.js.map
|
|
@@ -0,0 +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';\nimport { animated, useSpring } from '@react-spring/web';\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 containerRef = useRef<HTMLDivElement>(null);\n const spacerRef = useRef<HTMLDivElement>(null);\n const [currentTab, currentControl] = useActiveTabControl();\n\n const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n from: { scrollLeft: 0 },\n }));\n\n useEffect(() => {\n if (!currentControl?.current) {\n return;\n }\n\n const tabLeft = currentControl.current.getBoundingClientRect().left;\n const scrollLeft = containerRef.current!.scrollLeft;\n const spacerWidth = spacerRef.current!.offsetWidth;\n\n scrollApi.start({\n to: {\n scrollLeft: scrollLeft + tabLeft - spacerWidth,\n },\n });\n }, [scrollLeft, currentControl, scrollApi]);\n\n const style = { '--active-tab': currentTab } as CSSProperties;\n\n return (\n <animated.div\n ref={containerRef}\n data-name=\"TabsHeader\"\n className={classnames(\n 'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n className,\n )}\n scrollLeft={scrollLeft}\n >\n <div role=\"tablist\" className={classnames('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 </animated.div>\n );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAoB,GAEnD,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAE;AAAA,EACtB,EAAA;AAEF,EAAAC,EAAU,MAAM;AACV,QAAA,EAACL,KAAA,QAAAA,EAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MACrC;AAAA,IAAA,CACD;AAAA,EACA,GAAA,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAEpC,QAAAK,IAAQ,EAAE,gBAAgBT;AAG9B,SAAA,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MACF;AAAA,MACA,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QACH;AAAA,QACCC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
className?: string;
|
|
4
|
+
/**
|
|
5
|
+
* Tab panel index<br/>
|
|
6
|
+
* _Can be **0** or **1** indexed_
|
|
7
|
+
*/
|
|
8
|
+
value: number;
|
|
9
|
+
/**
|
|
10
|
+
* on panel select handler
|
|
11
|
+
*/
|
|
12
|
+
onSelect?: (context: {
|
|
13
|
+
value: Props['value'];
|
|
14
|
+
}) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const TabPanel: FunctionComponent<PropsWithChildren<Props>>;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as p } from "react/jsx-runtime";
|
|
3
|
+
import { c as d } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as l, useEffect as f } from "react";
|
|
5
|
+
import { useSpring as u, animated as b } from "@react-spring/web";
|
|
6
|
+
import { useActiveTab as y } from "./hooks/tabControl.js";
|
|
7
|
+
const a = {
|
|
8
|
+
opacity: 0,
|
|
9
|
+
pointerEvents: "none",
|
|
10
|
+
display: "none"
|
|
11
|
+
}, n = {
|
|
12
|
+
opacity: 1,
|
|
13
|
+
pointerEvents: "auto",
|
|
14
|
+
display: "block"
|
|
15
|
+
}, R = ({
|
|
16
|
+
value: o,
|
|
17
|
+
className: i,
|
|
18
|
+
onSelect: e,
|
|
19
|
+
children: c
|
|
20
|
+
}) => {
|
|
21
|
+
const r = l(!1), t = y() === o, [m, s] = u(() => ({
|
|
22
|
+
from: t ? n : a
|
|
23
|
+
}));
|
|
24
|
+
return f(() => {
|
|
25
|
+
if (!r.current) {
|
|
26
|
+
r.current = !0;
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
s.start({
|
|
30
|
+
to: {
|
|
31
|
+
...t ? n : a,
|
|
32
|
+
display: "block"
|
|
33
|
+
},
|
|
34
|
+
onRest: () => {
|
|
35
|
+
s.start({
|
|
36
|
+
to: { display: t ? "block" : "none" },
|
|
37
|
+
immediate: !0
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}), t && (e == null || e({ value: o }));
|
|
41
|
+
}, [t, s, o, e]), /* @__PURE__ */ p(
|
|
42
|
+
b.div,
|
|
43
|
+
{
|
|
44
|
+
"data-name": "Tab",
|
|
45
|
+
style: m,
|
|
46
|
+
role: "tabpanel",
|
|
47
|
+
"aria-hidden": !t,
|
|
48
|
+
tabIndex: t ? 0 : -1,
|
|
49
|
+
className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
|
|
50
|
+
"z-0": !t,
|
|
51
|
+
"z-1": t
|
|
52
|
+
}),
|
|
53
|
+
children: c
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
export {
|
|
58
|
+
R as TabPanel
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=TabPanel.js.map
|
|
@@ -0,0 +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';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTab } 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\ninterface TabStyle {\n pointerEvents: 'none' | 'auto';\n opacity: number;\n display: 'block' | 'none';\n}\n\nconst FROM: TabStyle = {\n opacity: 0,\n pointerEvents: 'none',\n display: 'none',\n};\n\nconst TO: TabStyle = {\n opacity: 1,\n pointerEvents: 'auto',\n display: 'block',\n};\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n value,\n className,\n onSelect,\n children,\n}) => {\n const mounted = useRef(false);\n const tabSelected = useActiveTab();\n const isActive = tabSelected === value;\n\n const [style, styleApi] = useSpring<TabStyle>(() => ({\n from: isActive ? TO : FROM,\n }));\n\n useEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n return;\n }\n\n styleApi.start({\n to: {\n ...(isActive ? TO : FROM),\n display: 'block',\n },\n onRest: () => {\n styleApi.start({\n to: { display: isActive ? 'block' : 'none' },\n immediate: true,\n });\n },\n });\n\n if (isActive) {\n onSelect?.({ value });\n }\n }, [isActive, styleApi, value, onSelect]);\n\n return (\n <animated.div\n data-name=\"Tab\"\n style={style}\n role=\"tabpanel\"\n aria-hidden={!isActive}\n tabIndex={isActive ? 0 : -1}\n className={classnames('col-start-1 col-end-1 row-start-1 row-end-1', className, {\n 'z-0': !isActive,\n 'z-1': isActive,\n })}\n >\n {children}\n </animated.div>\n );\n};\n"],"names":["FROM","TO","TabPanel","value","className","onSelect","children","mounted","useRef","isActive","useActiveTab","style","styleApi","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;;;AA2BA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX,GAEaC,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,QACaP,GAE3B,CAACQ,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWR,IAAKD;AAAA,EACtB,EAAA;AAEF,SAAAc,EAAU,MAAM;AACV,QAAA,CAACP,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAAK,EAAS,MAAM;AAAA,MACb,IAAI;AAAA,QACF,GAAIH,IAAWR,IAAKD;AAAA,QACpB,SAAS;AAAA,MACX;AAAA,MACA,QAAQ,MAAM;AACZ,QAAAY,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,SAASH,IAAW,UAAU,OAAO;AAAA,UAC3C,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,MACSJ,KAAA,QAAAA,EAAA,EAAE,OAAAF;KAEd,CAACM,GAAUG,GAAUT,GAAOE,CAAQ,CAAC,GAGtC,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,OAAAL;AAAA,MACA,MAAK;AAAA,MACL,eAAa,CAACF;AAAA,MACd,UAAUA,IAAW,IAAI;AAAA,MACzB,WAAWQ,EAAW,+CAA+Cb,GAAW;AAAA,QAC9E,OAAO,CAACK;AAAA,QACR,OAAOA;AAAA,MAAA,CACR;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
constrained?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare const TabsHeader: FunctionComponent<PropsWithChildren<Props>>;
|
|
10
|
-
export {};
|
|
1
|
+
import { TabList } from './TabList';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use TabList component instead. This component will be removed in the next major version.
|
|
4
|
+
* @since 2024-11-21
|
|
5
|
+
*/
|
|
6
|
+
export declare const TabsHeader: typeof TabList;
|
|
@@ -1,62 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { c as l } from "../../chunks/index.js";
|
|
4
|
-
import { useRef as f, useEffect as v } from "react";
|
|
5
|
-
import { useSpring as b, animated as h } from "@react-spring/web";
|
|
6
|
-
import { useActiveTabControl as L } from "./hooks/tabControl.js";
|
|
7
|
-
const k = ({
|
|
8
|
-
className: n,
|
|
9
|
-
constrained: t = !1,
|
|
10
|
-
children: i
|
|
11
|
-
}) => {
|
|
12
|
-
const s = f(null), c = f(null), [m, e] = L(), [{ scrollLeft: a }, o] = b(() => ({
|
|
13
|
-
from: { scrollLeft: 0 }
|
|
14
|
-
}));
|
|
15
|
-
v(() => {
|
|
16
|
-
if (!(e != null && e.current))
|
|
17
|
-
return;
|
|
18
|
-
const p = e.current.getBoundingClientRect().left, u = s.current.scrollLeft, d = c.current.offsetWidth;
|
|
19
|
-
o.start({
|
|
20
|
-
to: {
|
|
21
|
-
scrollLeft: u + p - d
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}, [a, e, o]);
|
|
25
|
-
const x = { "--active-tab": m };
|
|
26
|
-
return /* @__PURE__ */ r(
|
|
27
|
-
h.div,
|
|
28
|
-
{
|
|
29
|
-
ref: s,
|
|
30
|
-
"data-name": "TabsHeader",
|
|
31
|
-
className: l(
|
|
32
|
-
"scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
|
|
33
|
-
n
|
|
34
|
-
),
|
|
35
|
-
scrollLeft: a,
|
|
36
|
-
children: /* @__PURE__ */ w("div", { role: "tablist", className: l("flex flex-row"), style: x, children: [
|
|
37
|
-
/* @__PURE__ */ r(
|
|
38
|
-
"div",
|
|
39
|
-
{
|
|
40
|
-
ref: c,
|
|
41
|
-
className: l("shrink-0", {
|
|
42
|
-
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !t
|
|
43
|
-
})
|
|
44
|
-
}
|
|
45
|
-
),
|
|
46
|
-
i,
|
|
47
|
-
/* @__PURE__ */ r(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
className: l("shrink-0", {
|
|
51
|
-
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !t
|
|
52
|
-
})
|
|
53
|
-
}
|
|
54
|
-
)
|
|
55
|
-
] })
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
};
|
|
1
|
+
import { TabList as o } from "./TabList.js";
|
|
2
|
+
const t = o;
|
|
59
3
|
export {
|
|
60
|
-
|
|
4
|
+
t as TabsHeader
|
|
61
5
|
};
|
|
62
6
|
//# sourceMappingURL=TabsHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsHeader.js","sources":["../../../lib/molecules/Tabs/TabsHeader.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"TabsHeader.js","sources":["../../../lib/molecules/Tabs/TabsHeader.tsx"],"sourcesContent":["import { TabList } from './TabList';\n\n/**\n * @deprecated Use TabList component instead. This component will be removed in the next major version.\n * @since 2024-11-21\n */\nexport const TabsHeader: typeof TabList = TabList;\n"],"names":["TabsHeader","TabList"],"mappings":";AAMO,MAAMA,IAA6BC;"}
|
|
@@ -1,33 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* Tab Heading text
|
|
8
|
-
*/
|
|
9
|
-
label: string;
|
|
10
|
-
/**
|
|
11
|
-
* Tab heading index<br/>
|
|
12
|
-
* _Can be **0** or **1** indexed_
|
|
13
|
-
*/
|
|
14
|
-
value: number;
|
|
15
|
-
/**
|
|
16
|
-
* on tab select handler
|
|
17
|
-
*/
|
|
18
|
-
onSelect?: (context: {
|
|
19
|
-
value: Props['value'];
|
|
20
|
-
label: Props['label'];
|
|
21
|
-
}) => void;
|
|
22
|
-
/**
|
|
23
|
-
* Tab Heading theme
|
|
24
|
-
*/
|
|
25
|
-
theme?: Theme;
|
|
26
|
-
/**
|
|
27
|
-
* Heading type
|
|
28
|
-
* _default: **h2**_
|
|
29
|
-
*/
|
|
30
|
-
as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
|
|
31
|
-
}
|
|
32
|
-
export declare const TabsHeading: FunctionComponent<PropsWithChildren<Props>>;
|
|
33
|
-
export {};
|
|
1
|
+
import { Tab } from './Tab';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use Tab component instead. This component will be removed in the next major version.
|
|
4
|
+
* @since 2024-11-21
|
|
5
|
+
*/
|
|
6
|
+
export declare const TabsHeading: typeof Tab;
|
|
@@ -1,101 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { c as d } from "../../chunks/index.js";
|
|
4
|
-
import { useRef as m, useEffect as H, useCallback as r } from "react";
|
|
5
|
-
import { animated as I } from "@react-spring/web";
|
|
6
|
-
import { useActiveTab as _, useRegisterTabControl as z } from "./hooks/tabControl.js";
|
|
7
|
-
import { getTheme as G } from "./theme.js";
|
|
8
|
-
import { useSafeBoop as M } from "../../hooks/useSafeBoop.js";
|
|
9
|
-
import { useKeyboardControls as O } from "../../hooks/useKeyboardControls.js";
|
|
10
|
-
const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
|
|
11
|
-
className: b,
|
|
12
|
-
label: a,
|
|
13
|
-
children: y,
|
|
14
|
-
value: e,
|
|
15
|
-
onSelect: i,
|
|
16
|
-
as: g = "h2",
|
|
17
|
-
theme: h = "yellow"
|
|
18
|
-
}) => {
|
|
19
|
-
const p = m(null), o = _(), t = z({ value: e, ref: p }), l = m(o), n = m(o === e);
|
|
20
|
-
n.current = o === e;
|
|
21
|
-
const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = G(h), [A, c] = M({ scale: 1.02 });
|
|
22
|
-
H(() => {
|
|
23
|
-
var s;
|
|
24
|
-
l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
|
|
25
|
-
}, [a, e, i, o]);
|
|
26
|
-
const v = r(() => {
|
|
27
|
-
n.current && c();
|
|
28
|
-
}, [c]), N = r(() => {
|
|
29
|
-
t({ type: "start" });
|
|
30
|
-
}, [t]), k = r(() => {
|
|
31
|
-
t({ type: "end" });
|
|
32
|
-
}, [t]), L = r(() => {
|
|
33
|
-
t({ type: "previous" });
|
|
34
|
-
}, [t]), R = r(() => {
|
|
35
|
-
t({ type: "next" });
|
|
36
|
-
}, [t]), E = r(() => {
|
|
37
|
-
const s = document.documentElement.dir === "rtl";
|
|
38
|
-
t({ type: s ? "next" : "previous" });
|
|
39
|
-
}, [t]), K = r(() => {
|
|
40
|
-
const s = document.documentElement.dir === "rtl";
|
|
41
|
-
t({ type: s ? "previous" : "next" });
|
|
42
|
-
}, [t]), D = O({
|
|
43
|
-
activate: v,
|
|
44
|
-
start: N,
|
|
45
|
-
end: k,
|
|
46
|
-
up: L,
|
|
47
|
-
down: R,
|
|
48
|
-
left: E,
|
|
49
|
-
right: K
|
|
50
|
-
}), j = r(() => {
|
|
51
|
-
t({ type: "update", payload: e }), n.current && c();
|
|
52
|
-
}, [c, t, e]);
|
|
53
|
-
return /* @__PURE__ */ u(
|
|
54
|
-
I.div,
|
|
55
|
-
{
|
|
56
|
-
"data-name": "TabsHeading",
|
|
57
|
-
ref: p,
|
|
58
|
-
role: "tab",
|
|
59
|
-
"aria-selected": n.current,
|
|
60
|
-
tabIndex: n.current ? 0 : -1,
|
|
61
|
-
style: A,
|
|
62
|
-
className: d(
|
|
63
|
-
"text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
|
|
64
|
-
b,
|
|
65
|
-
{
|
|
66
|
-
[C]: !n.current,
|
|
67
|
-
[T]: n.current
|
|
68
|
-
}
|
|
69
|
-
),
|
|
70
|
-
onKeyDown: D,
|
|
71
|
-
onClick: j,
|
|
72
|
-
children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
|
|
73
|
-
/* @__PURE__ */ u(
|
|
74
|
-
"span",
|
|
75
|
-
{
|
|
76
|
-
className: d(
|
|
77
|
-
"group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
|
|
78
|
-
f
|
|
79
|
-
)
|
|
80
|
-
}
|
|
81
|
-
),
|
|
82
|
-
/* @__PURE__ */ u(
|
|
83
|
-
"span",
|
|
84
|
-
{
|
|
85
|
-
className: d(
|
|
86
|
-
"tab-focus-pill ease transition-transform/colors",
|
|
87
|
-
f,
|
|
88
|
-
w
|
|
89
|
-
),
|
|
90
|
-
style: x
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
y ?? a
|
|
94
|
-
] })
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
};
|
|
1
|
+
import { Tab as o } from "./Tab.js";
|
|
2
|
+
const r = o;
|
|
98
3
|
export {
|
|
99
|
-
|
|
4
|
+
r as TabsHeading
|
|
100
5
|
};
|
|
101
6
|
//# sourceMappingURL=TabsHeading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsHeading.js","sources":["../../../lib/molecules/Tabs/TabsHeading.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"TabsHeading.js","sources":["../../../lib/molecules/Tabs/TabsHeading.tsx"],"sourcesContent":["import { Tab } from './Tab';\n\n/**\n * @deprecated Use Tab component instead. This component will be removed in the next major version.\n * @since 2024-11-21\n */\nexport const TabsHeading: typeof Tab = Tab;\n"],"names":["TabsHeading","Tab"],"mappings":";AAMO,MAAMA,IAA0BC;"}
|
|
@@ -1,17 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
value: number;
|
|
9
|
-
/**
|
|
10
|
-
* on panel select handler
|
|
11
|
-
*/
|
|
12
|
-
onSelect?: (context: {
|
|
13
|
-
value: Props['value'];
|
|
14
|
-
}) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const TabsPanel: FunctionComponent<PropsWithChildren<Props>>;
|
|
17
|
-
export {};
|
|
1
|
+
import { TabPanel } from './TabPanel';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use TabPanel component instead. This component will be removed in the next major version.
|
|
4
|
+
* @since 2024-11-21
|
|
5
|
+
*/
|
|
6
|
+
export declare const TabsPanel: typeof TabPanel;
|
|
@@ -1,60 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { c as d } from "../../chunks/index.js";
|
|
4
|
-
import { useRef as l, useEffect as f } from "react";
|
|
5
|
-
import { useSpring as u, animated as b } from "@react-spring/web";
|
|
6
|
-
import { useActiveTab as y } from "./hooks/tabControl.js";
|
|
7
|
-
const a = {
|
|
8
|
-
opacity: 0,
|
|
9
|
-
pointerEvents: "none",
|
|
10
|
-
display: "none"
|
|
11
|
-
}, n = {
|
|
12
|
-
opacity: 1,
|
|
13
|
-
pointerEvents: "auto",
|
|
14
|
-
display: "block"
|
|
15
|
-
}, R = ({
|
|
16
|
-
value: s,
|
|
17
|
-
className: i,
|
|
18
|
-
onSelect: e,
|
|
19
|
-
children: c
|
|
20
|
-
}) => {
|
|
21
|
-
const r = l(!1), t = y() === s, [m, o] = u(() => ({
|
|
22
|
-
from: t ? n : a
|
|
23
|
-
}));
|
|
24
|
-
return f(() => {
|
|
25
|
-
if (!r.current) {
|
|
26
|
-
r.current = !0;
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
o.start({
|
|
30
|
-
to: {
|
|
31
|
-
...t ? n : a,
|
|
32
|
-
display: "block"
|
|
33
|
-
},
|
|
34
|
-
onRest: () => {
|
|
35
|
-
o.start({
|
|
36
|
-
to: { display: t ? "block" : "none" },
|
|
37
|
-
immediate: !0
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
}), t && (e == null || e({ value: s }));
|
|
41
|
-
}, [t, o, s, e]), /* @__PURE__ */ p(
|
|
42
|
-
b.div,
|
|
43
|
-
{
|
|
44
|
-
"data-name": "Tab",
|
|
45
|
-
style: m,
|
|
46
|
-
role: "tabpanel",
|
|
47
|
-
"aria-hidden": !t,
|
|
48
|
-
tabIndex: t ? 0 : -1,
|
|
49
|
-
className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
|
|
50
|
-
"z-0": !t,
|
|
51
|
-
"z-1": t
|
|
52
|
-
}),
|
|
53
|
-
children: c
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
};
|
|
1
|
+
import { TabPanel as a } from "./TabPanel.js";
|
|
2
|
+
const e = a;
|
|
57
3
|
export {
|
|
58
|
-
|
|
4
|
+
e as TabsPanel
|
|
59
5
|
};
|
|
60
6
|
//# sourceMappingURL=TabsPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanel.js","sources":["../../../lib/molecules/Tabs/TabsPanel.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"TabsPanel.js","sources":["../../../lib/molecules/Tabs/TabsPanel.tsx"],"sourcesContent":["import { TabPanel } from './TabPanel';\n\n/**\n * @deprecated Use TabPanel component instead. This component will be removed in the next major version.\n * @since 2024-11-21\n */\nexport const TabsPanel: typeof TabPanel = TabPanel;\n"],"names":["TabsPanel","TabPanel"],"mappings":";AAMO,MAAMA,IAA6BC;"}
|
package/molecules/Tabs/index.js
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { Tabs as e } from "./Tabs.js";
|
|
2
|
-
import { TabsBody as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { TabsBody as t } from "./TabsBody.js";
|
|
3
|
+
import { TabList as f } from "./TabList.js";
|
|
4
|
+
import { TabsHeader as p } from "./TabsHeader.js";
|
|
5
|
+
import { Tab as T } from "./Tab.js";
|
|
6
|
+
import { TabsHeading as d } from "./TabsHeading.js";
|
|
7
|
+
import { TabPanel as n } from "./TabPanel.js";
|
|
6
8
|
export {
|
|
9
|
+
T as Tab,
|
|
10
|
+
f as TabList,
|
|
11
|
+
n as TabPanel,
|
|
7
12
|
e as Tabs,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
x as TabsPanel
|
|
13
|
+
t as TabsBody,
|
|
14
|
+
p as TabsHeader,
|
|
15
|
+
d as TabsHeading
|
|
12
16
|
};
|
|
13
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|