@clubmed/trident-ui 1.5.1-beta.1 → 1.6.0-beta.2
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 +15 -0
- package/assets/trident-ui.css +1 -1
- package/chunks/bundle-mjs.js +2762 -0
- package/chunks/bundle-mjs.js.map +1 -0
- package/hooks/useSlots.d.ts +39 -0
- package/hooks/useSlots.js +23 -0
- package/hooks/useSlots.js.map +1 -0
- package/molecules/Backdrop.d.ts +7 -3
- package/molecules/Backdrop.js +102 -35
- package/molecules/Backdrop.js.map +1 -1
- package/molecules/Forms/Filter.d.ts +2 -7
- package/molecules/Forms/Filter.js +58 -46
- package/molecules/Forms/Filter.js.map +1 -1
- package/molecules/Forms/FormLabel.d.ts +1 -1
- package/molecules/Forms/FormLabel.js +22 -21
- package/molecules/Forms/FormLabel.js.map +1 -1
- package/molecules/Forms/NumberField.d.ts +1 -1
- package/molecules/Link.js +13 -13
- package/molecules/Link.js.map +1 -1
- package/molecules/Popin.d.ts +9 -3
- package/molecules/Popin.js +44 -30
- package/molecules/Popin.js.map +1 -1
- package/molecules/Portal/Portal.d.ts +11 -0
- package/molecules/Portal/Portal.js +31 -0
- package/molecules/Portal/Portal.js.map +1 -0
- package/package.json +18 -15
package/molecules/Backdrop.js
CHANGED
|
@@ -1,51 +1,118 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { c as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsx as h, jsxs as X } from "react/jsx-runtime";
|
|
2
|
+
import { useState as v, useRef as j, useCallback as w, useEffect as G } from "react";
|
|
3
|
+
import { c as D } from "../chunks/clsx.js";
|
|
4
|
+
import { Portal as z } from "./Portal/Portal.js";
|
|
5
|
+
const R = 0, I = 1, T = 2, m = 3, p = 4, A = 5, P = 6, B = [
|
|
6
|
+
"preEnter",
|
|
7
|
+
"entering",
|
|
8
|
+
"entered",
|
|
9
|
+
"preExit",
|
|
10
|
+
"exiting",
|
|
11
|
+
"exited",
|
|
12
|
+
"unmounted"
|
|
13
|
+
], U = (t) => ({
|
|
14
|
+
_s: t,
|
|
15
|
+
status: B[t],
|
|
16
|
+
isEnter: t < m,
|
|
17
|
+
isMounted: t !== P,
|
|
18
|
+
isResolved: t === T || t > p
|
|
19
|
+
}), y = (t) => t ? P : A, O = (t, e) => {
|
|
20
|
+
switch (t) {
|
|
21
|
+
case I:
|
|
22
|
+
case R:
|
|
23
|
+
return T;
|
|
24
|
+
case p:
|
|
25
|
+
case m:
|
|
26
|
+
return y(e);
|
|
27
|
+
}
|
|
28
|
+
}, q = (t) => typeof t == "object" ? [t.enter, t.exit] : [t, t], _ = setTimeout, F = (t, e) => _(() => {
|
|
29
|
+
isNaN(document.body.offsetTop) || t(e + 1);
|
|
30
|
+
}, 0), M = (t, e, a, s, i) => {
|
|
31
|
+
clearTimeout(s.current);
|
|
32
|
+
const n = U(t);
|
|
33
|
+
e(n), a.current = n, i && i({ current: n });
|
|
34
|
+
}, H = ({ enter: t = !0, exit: e = !0, preEnter: a, preExit: s, timeout: i, initialEntered: n, mountOnEnter: b, unmountOnExit: u, onStateChange: o } = {}) => {
|
|
35
|
+
const [r, f] = v(() => U(n ? T : y(b))), c = j(r), d = j(0), [x, S] = q(i), E = w(() => {
|
|
36
|
+
const l = O(c.current._s, u);
|
|
37
|
+
l && M(l, f, c, d, o);
|
|
38
|
+
}, [o, u]);
|
|
39
|
+
return [
|
|
40
|
+
r,
|
|
41
|
+
w((l) => {
|
|
42
|
+
const N = (k) => {
|
|
43
|
+
switch (M(k, f, c, d, o), k) {
|
|
44
|
+
case I:
|
|
45
|
+
x >= 0 && (d.current = _(E, x));
|
|
46
|
+
break;
|
|
47
|
+
case p:
|
|
48
|
+
S >= 0 && (d.current = _(E, S));
|
|
49
|
+
break;
|
|
50
|
+
case R:
|
|
51
|
+
case m:
|
|
52
|
+
d.current = F(N, k);
|
|
53
|
+
break;
|
|
54
|
+
}
|
|
55
|
+
}, g = c.current.isEnter;
|
|
56
|
+
typeof l != "boolean" && (l = !g), l ? !g && N(t ? a ? R : I : T) : g && N(e ? s ? m : p : y(u));
|
|
57
|
+
}, [
|
|
58
|
+
E,
|
|
59
|
+
o,
|
|
60
|
+
t,
|
|
61
|
+
e,
|
|
62
|
+
a,
|
|
63
|
+
s,
|
|
64
|
+
x,
|
|
65
|
+
S,
|
|
66
|
+
u
|
|
67
|
+
]),
|
|
68
|
+
E
|
|
69
|
+
];
|
|
70
|
+
}, W = ({
|
|
71
|
+
children: t,
|
|
72
|
+
className: e = "flex justify-center",
|
|
73
|
+
onClose: a,
|
|
74
|
+
isVisible: s,
|
|
75
|
+
target: i = "backdrop",
|
|
76
|
+
sweep: n = !1,
|
|
77
|
+
...b
|
|
9
78
|
}) => {
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
79
|
+
const [u, o] = H({
|
|
80
|
+
timeout: { enter: 0, exit: 500 },
|
|
81
|
+
mountOnEnter: !0,
|
|
82
|
+
unmountOnExit: !0,
|
|
83
|
+
preEnter: !0
|
|
84
|
+
}), { status: r, isMounted: f } = u;
|
|
85
|
+
G(() => {
|
|
86
|
+
o(s);
|
|
87
|
+
}, [s, o]);
|
|
88
|
+
const c = r === "preEnter" || r === "exiting";
|
|
89
|
+
return /* @__PURE__ */ h(z, { target: i, children: f && /* @__PURE__ */ X(
|
|
14
90
|
"div",
|
|
15
91
|
{
|
|
92
|
+
...b,
|
|
16
93
|
role: "presentation",
|
|
17
|
-
className: "
|
|
94
|
+
className: D(e, "fixed inset-0 isolate items-center"),
|
|
18
95
|
children: [
|
|
19
|
-
/* @__PURE__ */
|
|
96
|
+
/* @__PURE__ */ h(
|
|
20
97
|
"button",
|
|
21
98
|
{
|
|
22
|
-
type: "button",
|
|
23
99
|
"aria-hidden": "true",
|
|
24
|
-
className:
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"animate-backdropSweepIn": n && t,
|
|
33
|
-
"animate-backdropSweepOut": n && !t && a,
|
|
34
|
-
"backdrop-blur-0 opacity-0 translate-x-[-100%]": n && t && !a
|
|
35
|
-
}
|
|
36
|
-
),
|
|
37
|
-
onClick: c,
|
|
38
|
-
onAnimationEnd: () => {
|
|
39
|
-
t || r(!1);
|
|
40
|
-
}
|
|
100
|
+
className: D("absolute inset-0 -z-1 transition-all duration-500", {
|
|
101
|
+
"bg-white/80 backdrop-blur": !c,
|
|
102
|
+
"bg-white/0 backdrop-blur-none": c,
|
|
103
|
+
"-translate-x-full": n && (r === "preEnter" || r === "entering"),
|
|
104
|
+
"translate-x-full": n && r === "exiting"
|
|
105
|
+
}),
|
|
106
|
+
onClick: a,
|
|
107
|
+
type: "button"
|
|
41
108
|
}
|
|
42
109
|
),
|
|
43
|
-
|
|
110
|
+
t
|
|
44
111
|
]
|
|
45
112
|
}
|
|
46
|
-
)
|
|
113
|
+
) });
|
|
47
114
|
};
|
|
48
115
|
export {
|
|
49
|
-
|
|
116
|
+
W as Backdrop
|
|
50
117
|
};
|
|
51
118
|
//# sourceMappingURL=Backdrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.js","sources":["../../lib/molecules/Backdrop.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type MouseEvent,\n type PropsWithChildren,\n useEffect,\n
|
|
1
|
+
{"version":3,"file":"Backdrop.js","sources":["../../node_modules/react-transition-state/dist/esm/utils.mjs","../../node_modules/react-transition-state/dist/esm/useTransitionState.mjs","../../lib/molecules/Backdrop.tsx"],"sourcesContent":["//#region src/utils.ts\nconst PRE_ENTER = 0;\nconst ENTERING = 1;\nconst ENTERED = 2;\nconst PRE_EXIT = 3;\nconst EXITING = 4;\nconst EXITED = 5;\nconst UNMOUNTED = 6;\nconst STATUS = [\n\t\"preEnter\",\n\t\"entering\",\n\t\"entered\",\n\t\"preExit\",\n\t\"exiting\",\n\t\"exited\",\n\t\"unmounted\"\n];\nconst getState = (status) => ({\n\t_s: status,\n\tstatus: STATUS[status],\n\tisEnter: status < PRE_EXIT,\n\tisMounted: status !== UNMOUNTED,\n\tisResolved: status === ENTERED || status > EXITING\n});\nconst startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;\nconst getEndStatus = (status, unmountOnExit) => {\n\tswitch (status) {\n\t\tcase ENTERING:\n\t\tcase PRE_ENTER: return ENTERED;\n\t\tcase EXITING:\n\t\tcase PRE_EXIT: return startOrEnd(unmountOnExit);\n\t}\n};\nconst getTimeout = (timeout) => typeof timeout === \"object\" ? [timeout.enter, timeout.exit] : [timeout, timeout];\nconst _setTimeout = setTimeout;\nconst nextTick = (transitState, status) => _setTimeout(() => {\n\tisNaN(document.body.offsetTop) || transitState(status + 1);\n}, 0);\n\n//#endregion\nexport { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };","import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from \"./utils.mjs\";\nimport { useCallback, useRef, useState } from \"react\";\n\n//#region src/useTransitionState.ts\nconst updateState = (status, setState, latestState, timeoutId, onChange) => {\n\tclearTimeout(timeoutId.current);\n\tconst state = getState(status);\n\tsetState(state);\n\tlatestState.current = state;\n\tonChange && onChange({ current: state });\n};\nconst useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {\n\tconst [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));\n\tconst latestState = useRef(state);\n\tconst timeoutId = useRef(0);\n\tconst [enterTimeout, exitTimeout] = getTimeout(timeout);\n\tconst endTransition = useCallback(() => {\n\t\tconst status = getEndStatus(latestState.current._s, unmountOnExit);\n\t\tstatus && updateState(status, setState, latestState, timeoutId, onChange);\n\t}, [onChange, unmountOnExit]);\n\treturn [\n\t\tstate,\n\t\tuseCallback((toEnter) => {\n\t\t\tconst transitState = (status) => {\n\t\t\t\tupdateState(status, setState, latestState, timeoutId, onChange);\n\t\t\t\tswitch (status) {\n\t\t\t\t\tcase ENTERING:\n\t\t\t\t\t\tif (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase EXITING:\n\t\t\t\t\t\tif (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase PRE_ENTER:\n\t\t\t\t\tcase PRE_EXIT:\n\t\t\t\t\t\ttimeoutId.current = nextTick(transitState, status);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst enterStage = latestState.current.isEnter;\n\t\t\tif (typeof toEnter !== \"boolean\") toEnter = !enterStage;\n\t\t\tif (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);\n\t\t\telse enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));\n\t\t}, [\n\t\t\tendTransition,\n\t\t\tonChange,\n\t\t\tenter,\n\t\t\texit,\n\t\t\tpreEnter,\n\t\t\tpreExit,\n\t\t\tenterTimeout,\n\t\t\texitTimeout,\n\t\t\tunmountOnExit\n\t\t]),\n\t\tendTransition\n\t];\n};\n\n//#endregion\nexport { useTransitionState };","import {\n type ComponentProps,\n type FunctionComponent,\n type MouseEvent,\n type PropsWithChildren,\n useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { useTransitionState } from 'react-transition-state';\nimport { Portal } from '@/molecules/Portal/Portal';\n\nexport interface BackdropProps extends ComponentProps<'div'> {\n /**\n * On close\n * @param event\n */\n onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * Is visible\n */\n isVisible?: boolean;\n /**\n * Sweep Mode™\n * (makes it appear from the sides instead of from everywhere)\n */\n sweep?: boolean;\n /**\n * Target ID for the Portal component\n */\n target?: ComponentProps<typeof Portal>['target'];\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n children,\n className = 'flex justify-center',\n onClose,\n isVisible,\n target = 'backdrop',\n sweep = false,\n ...attrs\n}) => {\n const [state, toggle] = useTransitionState({\n timeout: { enter: 0, exit: 500 },\n mountOnEnter: true,\n unmountOnExit: true,\n preEnter: true,\n });\n\n const { status, isMounted } = state;\n\n useEffect(() => {\n toggle(isVisible);\n }, [isVisible, toggle]);\n\n const animated = status === 'preEnter' || status === 'exiting';\n\n return (\n <Portal target={target}>\n {isMounted && (\n <div\n {...attrs}\n role=\"presentation\"\n className={clsx(className, 'fixed inset-0 isolate items-center')}\n >\n <button\n aria-hidden=\"true\"\n className={clsx('absolute inset-0 -z-1 transition-all duration-500', {\n 'bg-white/80 backdrop-blur': !animated,\n 'bg-white/0 backdrop-blur-none': animated,\n '-translate-x-full': sweep && (status === 'preEnter' || status === 'entering'),\n 'translate-x-full': sweep && status === 'exiting',\n })}\n onClick={onClose}\n type=\"button\"\n />\n {children}\n </div>\n )}\n </Portal>\n );\n};\n"],"names":["PRE_ENTER","ENTERING","ENTERED","PRE_EXIT","EXITING","EXITED","UNMOUNTED","STATUS","getState","status","startOrEnd","unmounted","getEndStatus","unmountOnExit","getTimeout","timeout","_setTimeout","nextTick","transitState","updateState","setState","latestState","timeoutId","onChange","state","useTransitionState","enter","exit","preEnter","preExit","initialEntered","mountOnEnter","useState","useRef","enterTimeout","exitTimeout","endTransition","useCallback","toEnter","enterStage","Backdrop","children","className","onClose","isVisible","target","sweep","attrs","toggle","isMounted","useEffect","animated","jsx","Portal","jsxs","clsx"],"mappings":"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","x_google_ignoreList":[0,1]}
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface FilterProps<Value = string> extends
|
|
3
|
-
/**
|
|
4
|
-
* The data-testid to apply to the button.
|
|
5
|
-
* This is used for testing purposes.
|
|
6
|
-
* */
|
|
7
|
-
dataTestId?: string;
|
|
1
|
+
import { FormControlProps } from './FormControl';
|
|
2
|
+
export interface FilterProps<Value = string> extends FormControlProps<Value> {
|
|
8
3
|
/**
|
|
9
4
|
* Is it attached to a dropdown?
|
|
10
5
|
*/
|
|
@@ -1,56 +1,68 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useId as
|
|
1
|
+
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { c as d } from "../../chunks/clsx.js";
|
|
3
|
+
import { useId as C } from "react";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import { Icon as
|
|
6
|
-
import { useValue as
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
import { Icon as l } from "@clubmed/trident-icons";
|
|
6
|
+
import { useValue as S } from "../../hooks/useValue.js";
|
|
7
|
+
import { useInternalStatus as V } from "../../hooks/useInternalStatus.js";
|
|
8
|
+
function q(m) {
|
|
9
|
+
const u = C(), {
|
|
10
|
+
id: r = u,
|
|
11
|
+
name: n = r,
|
|
12
|
+
className: p,
|
|
12
13
|
dataTestId: h,
|
|
13
|
-
disabled:
|
|
14
|
-
checked:
|
|
15
|
-
value:
|
|
16
|
-
tabIndex:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
disabled: t = !1,
|
|
15
|
+
checked: f = !1,
|
|
16
|
+
value: s,
|
|
17
|
+
tabIndex: x = 0,
|
|
18
|
+
validationStatus: b = "default",
|
|
19
|
+
errorMessage: i,
|
|
20
|
+
onChange: k,
|
|
21
|
+
hasDropdown: v,
|
|
22
|
+
children: N,
|
|
20
23
|
...w
|
|
21
|
-
} =
|
|
22
|
-
name:
|
|
23
|
-
initialValue:
|
|
24
|
-
onChange(
|
|
25
|
-
|
|
24
|
+
} = m, { value: o, setValue: D } = S({
|
|
25
|
+
name: n,
|
|
26
|
+
initialValue: f,
|
|
27
|
+
onChange(g, c) {
|
|
28
|
+
k?.(g, c ? s !== void 0 ? s : c : null);
|
|
26
29
|
}
|
|
27
|
-
})
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
30
|
+
}), I = V({
|
|
31
|
+
isDisabled: t,
|
|
32
|
+
validationStatus: b
|
|
33
|
+
}) === "error" && i;
|
|
34
|
+
return /* @__PURE__ */ a("div", { className: d(p, "relative"), children: [
|
|
35
|
+
/* @__PURE__ */ a("label", { "data-testid": `filter-container-${r}`, className: "relative", children: [
|
|
36
|
+
/* @__PURE__ */ e(
|
|
37
|
+
"input",
|
|
38
|
+
{
|
|
39
|
+
...w,
|
|
40
|
+
name: n,
|
|
41
|
+
"data-testid": h,
|
|
42
|
+
type: "checkbox",
|
|
43
|
+
tabIndex: x,
|
|
44
|
+
onChange: () => {
|
|
45
|
+
t || D(!o);
|
|
46
|
+
},
|
|
47
|
+
checked: o,
|
|
48
|
+
"data-name": "Filter",
|
|
49
|
+
disabled: t,
|
|
50
|
+
value: s
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ a("span", { children: [
|
|
54
|
+
/* @__PURE__ */ e("span", { className: d("text-b3 font-semibold"), children: N }),
|
|
55
|
+
/* @__PURE__ */ e(l, { className: "check", width: null, name: "CheckDefault", color: "black" }),
|
|
56
|
+
v && /* @__PURE__ */ e(l, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
|
|
57
|
+
] })
|
|
58
|
+
] }),
|
|
59
|
+
I && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
|
|
60
|
+
/* @__PURE__ */ e(l, { name: "Error", width: "20px" }),
|
|
61
|
+
i
|
|
50
62
|
] })
|
|
51
63
|
] });
|
|
52
64
|
}
|
|
53
65
|
export {
|
|
54
|
-
|
|
66
|
+
q as Filter
|
|
55
67
|
};
|
|
56
68
|
//# sourceMappingURL=Filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n /**\n * Is it attached to a dropdown?\n */\n hasDropdown?: boolean;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled = false,\n checked: initialChecked = false,\n value,\n tabIndex = 0,\n validationStatus = 'default',\n errorMessage,\n onChange,\n hasDropdown,\n children,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n },\n });\n\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n return (\n <div className={clsx(className, 'relative')}>\n <label data-testid={`filter-container-${id}`} className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"checkbox\"\n tabIndex={tabIndex}\n onChange={() => {\n if (!disabled) setValue(!checked);\n }}\n checked={checked}\n data-name=\"Filter\"\n disabled={disabled}\n value={value as any}\n />\n <span>\n <span className={clsx('text-b3 font-semibold')}>{children}</span>\n\n <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n {hasDropdown && (\n <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n )}\n </span>\n </label>\n\n {shouldDisplayErrorMessage && (\n <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n <Icon name=\"Error\" width=\"20px\" />\n {errorMessage}\n </span>\n )}\n </div>\n );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","validationStatus","errorMessage","onChange","hasDropdown","children","rest","checked","setValue","useValue","shouldDisplayErrorMessage","useInternalStatus","clsx","jsxs","jsx","Icon"],"mappings":";;;;;;;AAiBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAJ,IAAWT,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GAOKG,IALiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAI;AAAA,EAAA,CACD,MAEoD,WAAWC;AAEhE,2BACG,OAAA,EAAI,WAAWU,EAAKjB,GAAW,UAAU,GACxC,UAAA;AAAA,IAAA,gBAAAkB,EAAC,WAAM,eAAa,oBAAoBpB,CAAE,IAAI,WAAU,YACtD,UAAA;AAAA,MAAA,gBAAAqB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGR;AAAA,UACJ,MAAAZ;AAAA,UACA,eAAaE;AAAA,UACb,MAAK;AAAA,UACL,UAAAI;AAAA,UACA,UAAU,MAAM;AACd,YAAKH,KAAUW,EAAS,CAACD,CAAO;AAAA,UAClC;AAAA,UACA,SAAAA;AAAA,UACA,aAAU;AAAA,UACV,UAAAV;AAAA,UACA,OAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EACC,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAK,uBAAuB,GAAI,UAAAP,GAAS;AAAA,QAE1D,gBAAAS,EAACC,KAAK,WAAU,SAAQ,OAAO,MAAM,MAAK,gBAAe,OAAM,QAAA,CAAQ;AAAA,QAEtEX,KACC,gBAAAU,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,MAAA,EAAA,CAE9E;AAAA,IAAA,GACF;AAAA,IAECL,KACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,MAC/Bb;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LabelHTMLAttributes } from 'react';
|
|
2
2
|
export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
3
3
|
description?: string;
|
|
4
|
-
layout?: 'horizontal' | 'vertical';
|
|
4
|
+
layout?: 'horizontal' | `horizontal-${string}` | 'vertical';
|
|
5
5
|
required?: boolean;
|
|
6
6
|
hideRequiredStar?: boolean;
|
|
7
7
|
}
|
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
3
|
-
const
|
|
4
|
-
id:
|
|
5
|
-
description:
|
|
1
|
+
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { c as m } from "../../chunks/clsx.js";
|
|
3
|
+
const p = ({
|
|
4
|
+
id: s,
|
|
5
|
+
description: l,
|
|
6
6
|
layout: e = "horizontal",
|
|
7
|
-
required:
|
|
8
|
-
className:
|
|
9
|
-
children:
|
|
10
|
-
hideRequiredStar:
|
|
11
|
-
...
|
|
12
|
-
}) => /* @__PURE__ */
|
|
7
|
+
required: t,
|
|
8
|
+
className: a,
|
|
9
|
+
children: r,
|
|
10
|
+
hideRequiredStar: o = !t,
|
|
11
|
+
...c
|
|
12
|
+
}) => /* @__PURE__ */ i(
|
|
13
13
|
"label",
|
|
14
14
|
{
|
|
15
|
-
...
|
|
16
|
-
htmlFor:
|
|
17
|
-
className:
|
|
15
|
+
...c,
|
|
16
|
+
htmlFor: s,
|
|
17
|
+
className: m(
|
|
18
18
|
"text-b3 font-semibold text-black flex",
|
|
19
19
|
{
|
|
20
|
-
"
|
|
21
|
-
"flex-
|
|
20
|
+
"ps-20": e.includes("horizontal") && !e.includes("no-padding"),
|
|
21
|
+
"flex-wrap items-center": e.includes("horizontal"),
|
|
22
|
+
"flex-col items-start": e.includes("vertical")
|
|
22
23
|
},
|
|
23
|
-
|
|
24
|
+
a
|
|
24
25
|
),
|
|
25
26
|
"data-name": "InputLabel",
|
|
26
27
|
children: [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
r,
|
|
29
|
+
t && !o && /* @__PURE__ */ n("span", { children: "*" }),
|
|
30
|
+
l && /* @__PURE__ */ n("span", { className: "ms-12 text-b4 text-grey font-normal", children: l })
|
|
30
31
|
]
|
|
31
32
|
}
|
|
32
33
|
);
|
|
33
34
|
export {
|
|
34
|
-
|
|
35
|
+
p as FormLabel
|
|
35
36
|
};
|
|
36
37
|
//# sourceMappingURL=FormLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../lib/molecules/Forms/FormLabel.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { LabelHTMLAttributes } from 'react';\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n description?: string;\n layout?: 'horizontal' | 'vertical';\n required?: boolean;\n hideRequiredStar?: boolean;\n}\n\nexport const FormLabel = ({\n id,\n description,\n layout = 'horizontal',\n required,\n className,\n children,\n hideRequiredStar = !required,\n ...rest\n}: FormLabelProps) => {\n return (\n <label\n {...rest}\n htmlFor={id}\n className={clsx(\n 'text-b3 font-semibold text-black flex',\n {\n 'flex-wrap items-center
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../lib/molecules/Forms/FormLabel.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { LabelHTMLAttributes } from 'react';\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n description?: string;\n layout?: 'horizontal' | `horizontal-${string}` | 'vertical';\n required?: boolean;\n hideRequiredStar?: boolean;\n}\n\nexport const FormLabel = ({\n id,\n description,\n layout = 'horizontal',\n required,\n className,\n children,\n hideRequiredStar = !required,\n ...rest\n}: FormLabelProps) => {\n return (\n <label\n {...rest}\n htmlFor={id}\n className={clsx(\n 'text-b3 font-semibold text-black flex',\n {\n 'ps-20': layout.includes('horizontal') && !layout.includes('no-padding'),\n 'flex-wrap items-center': layout.includes('horizontal'),\n 'flex-col items-start': layout.includes('vertical'),\n },\n className,\n )}\n data-name=\"InputLabel\"\n >\n {children}\n {required && !hideRequiredStar && <span>*</span>}\n {description && <span className=\"ms-12 text-b4 text-grey font-normal\">{description}</span>}\n </label>\n );\n};\n"],"names":["FormLabel","id","description","layout","required","className","children","hideRequiredStar","rest","jsxs","clsx","jsx"],"mappings":";;AAUO,MAAMA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACH;AAAA,EACpB,GAAGI;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAASP;AAAA,IACT,WAAWS;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAASP,EAAO,SAAS,YAAY,KAAK,CAACA,EAAO,SAAS,YAAY;AAAA,QACvE,0BAA0BA,EAAO,SAAS,YAAY;AAAA,QACtD,wBAAwBA,EAAO,SAAS,UAAU;AAAA,MAAA;AAAA,MAEpDE;AAAA,IAAA;AAAA,IAEF,aAAU;AAAA,IAET,UAAA;AAAA,MAAAC;AAAA,MACAF,KAAY,CAACG,KAAoB,gBAAAI,EAAC,UAAK,UAAA,KAAC;AAAA,MACxCT,KAAe,gBAAAS,EAAC,QAAA,EAAK,WAAU,uCAAuC,UAAAT,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAAA;"}
|
|
@@ -299,7 +299,7 @@ export declare function useNumberField(props: NumberFieldProps): {
|
|
|
299
299
|
formMethod?: string | undefined | undefined;
|
|
300
300
|
formNoValidate?: boolean | undefined | undefined;
|
|
301
301
|
formTarget?: string | undefined | undefined;
|
|
302
|
-
layout?: "horizontal" | "vertical" | undefined;
|
|
302
|
+
layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
|
|
303
303
|
multiple?: boolean | undefined | undefined;
|
|
304
304
|
autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
|
|
305
305
|
accept?: string | undefined | undefined;
|
package/molecules/Link.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { jsxs as t, jsx as
|
|
1
|
+
import { jsxs as t, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { c as e } from "../chunks/clsx.js";
|
|
3
3
|
import { Icon as u } from "@clubmed/trident-icons";
|
|
4
|
-
|
|
4
|
+
import { t as f } from "../chunks/bundle-mjs.js";
|
|
5
|
+
const C = ({
|
|
5
6
|
label: n,
|
|
6
7
|
icon: s,
|
|
7
|
-
component:
|
|
8
|
+
component: c = "a",
|
|
8
9
|
iconType: m,
|
|
9
|
-
underlined:
|
|
10
|
+
underlined: r = !0,
|
|
10
11
|
className: l,
|
|
11
12
|
inert: p,
|
|
12
13
|
...d
|
|
13
14
|
}) => {
|
|
14
|
-
const
|
|
15
|
+
const a = n.lastIndexOf(" "), i = a === -1 ? n.length : a, x = n.substring(0, 1), h = n.substring(1, i + 1), g = n.substring(i);
|
|
15
16
|
return /* @__PURE__ */ t(
|
|
16
|
-
p ? "span" :
|
|
17
|
+
p ? "span" : c,
|
|
17
18
|
{
|
|
18
|
-
className:
|
|
19
|
-
"text-b3 decoration-none link-container cursor-pointer text-inherit",
|
|
20
|
-
l
|
|
19
|
+
className: f(
|
|
20
|
+
e("text-b3 decoration-none link-container cursor-pointer text-inherit", l)
|
|
21
21
|
),
|
|
22
22
|
"data-name": "Link",
|
|
23
23
|
...d,
|
|
24
24
|
children: [
|
|
25
|
-
/* @__PURE__ */
|
|
25
|
+
/* @__PURE__ */ o("span", { className: e({ "link-underline": r }), children: x }),
|
|
26
26
|
/* @__PURE__ */ t(
|
|
27
27
|
"span",
|
|
28
28
|
{
|
|
29
29
|
className: e("hoverable", {
|
|
30
30
|
"has-icon": s,
|
|
31
|
-
"link-underline":
|
|
31
|
+
"link-underline": r
|
|
32
32
|
}),
|
|
33
33
|
children: [
|
|
34
34
|
h,
|
|
35
35
|
/* @__PURE__ */ t("span", { className: "inline-block", children: [
|
|
36
36
|
g,
|
|
37
|
-
s && /* @__PURE__ */
|
|
37
|
+
s && /* @__PURE__ */ o(
|
|
38
38
|
u,
|
|
39
39
|
{
|
|
40
40
|
name: s,
|
|
@@ -52,6 +52,6 @@ const j = ({
|
|
|
52
52
|
);
|
|
53
53
|
};
|
|
54
54
|
export {
|
|
55
|
-
|
|
55
|
+
C as Link
|
|
56
56
|
};
|
|
57
57
|
//# sourceMappingURL=Link.js.map
|
package/molecules/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../lib/molecules/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n extends AnchorHTMLAttributes<T> {\n /**\n * Label text\n */\n label: string;\n /**\n * Icon name\n */\n icon?: IconicNames;\n iconType?: IconicTypes;\n /**\n * Underlined\n */\n underlined?: boolean;\n /**\n * Additional class names\n */\n className?: string;\n /**\n * Is the link inert (not itself clickable but part of a clickable element)\n */\n inert?: boolean;\n /**\n * Allow giving a custom component\n */\n component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n label,\n icon,\n component = 'a',\n iconType,\n underlined = true,\n className,\n inert,\n ...anchorAttrs\n}) => {\n const lastSpace = label.lastIndexOf(' ');\n const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n const first = label.substring(0, 1);\n const middle = label.substring(1, lastIndex + 1);\n const last = label.substring(lastIndex);\n const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n const TagName = inert ? 'span' : Cmp;\n\n return (\n <TagName\n className={
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../lib/molecules/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from 'tailwind-merge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n extends AnchorHTMLAttributes<T> {\n /**\n * Label text\n */\n label: string;\n /**\n * Icon name\n */\n icon?: IconicNames;\n iconType?: IconicTypes;\n /**\n * Underlined\n */\n underlined?: boolean;\n /**\n * Additional class names\n */\n className?: string;\n /**\n * Is the link inert (not itself clickable but part of a clickable element)\n */\n inert?: boolean;\n /**\n * Allow giving a custom component\n */\n component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n label,\n icon,\n component = 'a',\n iconType,\n underlined = true,\n className,\n inert,\n ...anchorAttrs\n}) => {\n const lastSpace = label.lastIndexOf(' ');\n const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n const first = label.substring(0, 1);\n const middle = label.substring(1, lastIndex + 1);\n const last = label.substring(lastIndex);\n const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n const TagName = inert ? 'span' : Cmp;\n\n return (\n <TagName\n className={twMerge(\n clsx('text-b3 decoration-none link-container cursor-pointer text-inherit', className),\n )}\n data-name=\"Link\"\n {...anchorAttrs}\n >\n <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n <span\n className={clsx('hoverable', {\n 'has-icon': icon,\n 'link-underline': underlined,\n })}\n >\n {middle}\n <span className=\"inline-block\">\n {last}\n {icon && (\n <Icon\n name={icon}\n iconType={iconType}\n width=\"24px\"\n style={{ marginInlineStart: '8px' }}\n />\n )}\n </span>\n </span>\n </TagName>\n );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","twMerge","clsx","jsx","Icon"],"mappings":";;;;AAmCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYR,EAAM,YAAY,GAAG,GACjCS,IAAYD,MAAc,KAAKR,EAAM,SAASQ,GAE9CE,IAAQV,EAAM,UAAU,GAAG,CAAC,GAC5BW,IAASX,EAAM,UAAU,GAAGS,IAAY,CAAC,GACzCG,IAAOZ,EAAM,UAAUS,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcP,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWY;AAAA,QACTC,EAAK,sEAAsEV,CAAS;AAAA,MAAA;AAAA,MAEtF,aAAU;AAAA,MACT,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWD,EAAK,EAAE,kBAAkBX,GAAY,GAAI,UAAAM,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAK,aAAa;AAAA,cAC3B,YAAYd;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAO;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAX,KACC,gBAAAe;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,MAAMhB;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAM;AAAA,oBACN,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/molecules/Popin.d.ts
CHANGED
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
import { BackdropProps } from './Backdrop';
|
|
2
3
|
export type ClosePopinCallback = () => void;
|
|
3
4
|
export interface PopinFooterProps {
|
|
4
|
-
closeLabel
|
|
5
|
+
closeLabel?: string;
|
|
5
6
|
onClose: ClosePopinCallback;
|
|
6
7
|
}
|
|
7
8
|
export interface PopinProps {
|
|
8
|
-
title
|
|
9
|
-
closeLabel
|
|
9
|
+
title?: ReactNode;
|
|
10
|
+
closeLabel?: string;
|
|
10
11
|
onClose: ClosePopinCallback;
|
|
11
12
|
isVisible: boolean;
|
|
12
13
|
className?: string;
|
|
14
|
+
bodyClassName?: string;
|
|
13
15
|
showCloseButton?: boolean;
|
|
16
|
+
target?: BackdropProps['target'];
|
|
17
|
+
/**
|
|
18
|
+
* @deprecated use popinFooter slot instead
|
|
19
|
+
*/
|
|
14
20
|
Footer?: FunctionComponent<PopinFooterProps> | false;
|
|
15
21
|
}
|
|
16
22
|
export declare const Popin: FunctionComponent<PropsWithChildren<PopinProps>>;
|