@clubmed/trident-ui 2.0.0-beta.21 → 2.0.0-beta.23
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/chunks/Tooltip.js +4461 -0
- package/chunks/Tooltip.js.map +1 -0
- package/examples/scrollbar-demo.d.ts +1 -0
- package/examples/scrollbar-demo.js +23 -0
- package/examples/scrollbar-demo.js.map +1 -0
- package/examples/tooltip-demo.d.ts +1 -0
- package/examples/tooltip-demo.js +103 -0
- package/examples/tooltip-demo.js.map +1 -0
- package/package.json +2 -1
- package/styles/components.css +72 -0
- package/ui/Scrollbar.d.ts +14 -0
- package/ui/Scrollbar.js +39 -0
- package/ui/Scrollbar.js.map +1 -0
- package/ui/Tooltip.d.ts +8 -0
- package/ui/Tooltip.js +2 -0
- package/ui/forms/TextField.js +1 -1
- package/ui/forms/TextField.js.map +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function ScrollbarDemo(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Scrollbar as e } from "../ui/Scrollbar.js";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
//#region lib/examples/scrollbar-demo.tsx
|
|
4
|
+
function n() {
|
|
5
|
+
return /* @__PURE__ */ t(e, {
|
|
6
|
+
timelineName: "--scroller-outer",
|
|
7
|
+
scrollbarWidth: "60%",
|
|
8
|
+
children: /* @__PURE__ */ t("div", {
|
|
9
|
+
className: "w-600 p-16",
|
|
10
|
+
children: /* @__PURE__ */ t("div", {
|
|
11
|
+
className: "flex gap-8",
|
|
12
|
+
children: Array.from({ length: 20 }).map((e, n) => /* @__PURE__ */ t("div", {
|
|
13
|
+
className: "flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-ultramarine text-white",
|
|
14
|
+
children: n + 1
|
|
15
|
+
}, n))
|
|
16
|
+
})
|
|
17
|
+
})
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
//#endregion
|
|
21
|
+
export { n as default };
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=scrollbar-demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollbar-demo.js","names":[],"sources":["../../lib/examples/scrollbar-demo.tsx"],"sourcesContent":["import { Scrollbar } from '../ui/Scrollbar';\n\nexport default function ScrollbarDemo() {\n return (\n <Scrollbar timelineName=\"--scroller-outer\" scrollbarWidth=\"60%\">\n <div className=\"w-600 p-16\">\n <div className=\"flex gap-8\">\n {Array.from({ length: 20 }).map((_, i) => (\n <div\n key={i}\n className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-ultramarine text-white\"\n >\n {i + 1}\n </div>\n ))}\n </div>\n </div>\n </Scrollbar>\n );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAgB;AACtC,QACE,kBAAC,GAAD;EAAW,cAAa;EAAmB,gBAAe;YACxD,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;KAEE,WAAU;eAET,IAAI;KACD,EAJC,EAID,CACN;IACE,CAAA;GACF,CAAA;EACI,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function TooltipDemo(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Clickable as e } from "../ui/Clickable.js";
|
|
3
|
+
import { i as t, n, r, t as i } from "../chunks/Tooltip.js";
|
|
4
|
+
import { useState as a } from "react";
|
|
5
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
6
|
+
//#region lib/examples/tooltip-demo.tsx
|
|
7
|
+
function c() {
|
|
8
|
+
let [c, l] = a(!1);
|
|
9
|
+
return /* @__PURE__ */ o("div", {
|
|
10
|
+
className: "flex flex-col gap-24 h-300",
|
|
11
|
+
children: /* @__PURE__ */ s(r, { children: [
|
|
12
|
+
"DARK MODE",
|
|
13
|
+
/* @__PURE__ */ s("div", {
|
|
14
|
+
className: "flex gap-48 items-center",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
|
|
17
|
+
className: "underline decoration-dashed cursor-help",
|
|
18
|
+
children: "Hover me"
|
|
19
|
+
}), /* @__PURE__ */ o(n, { children: "This is a helpful tooltip" })] }),
|
|
20
|
+
/* @__PURE__ */ s(i, {
|
|
21
|
+
open: c,
|
|
22
|
+
children: [/* @__PURE__ */ o(t, { render: /* @__PURE__ */ o(e, {
|
|
23
|
+
className: "rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50",
|
|
24
|
+
onClick: () => l(!c),
|
|
25
|
+
children: "Click me"
|
|
26
|
+
}) }), /* @__PURE__ */ o(n, { children: "This tooltip opens on click" })]
|
|
27
|
+
}),
|
|
28
|
+
/* @__PURE__ */ s(i, {
|
|
29
|
+
open: !0,
|
|
30
|
+
children: [/* @__PURE__ */ o(t, {
|
|
31
|
+
className: "underline decoration-dashed cursor-help",
|
|
32
|
+
children: "Always open"
|
|
33
|
+
}), /* @__PURE__ */ o(n, { children: "This tooltip is always open" })]
|
|
34
|
+
})
|
|
35
|
+
]
|
|
36
|
+
}),
|
|
37
|
+
"LIGHT MODE",
|
|
38
|
+
/* @__PURE__ */ s("div", {
|
|
39
|
+
className: "flex gap-48 items-center",
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
|
|
42
|
+
className: "underline decoration-dashed cursor-help",
|
|
43
|
+
children: "Hover me"
|
|
44
|
+
}), /* @__PURE__ */ o(n, {
|
|
45
|
+
theme: "light",
|
|
46
|
+
children: "This is a helpful tooltip"
|
|
47
|
+
})] }),
|
|
48
|
+
/* @__PURE__ */ s(i, {
|
|
49
|
+
open: c,
|
|
50
|
+
children: [/* @__PURE__ */ o(t, { render: /* @__PURE__ */ o(e, {
|
|
51
|
+
className: "rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50",
|
|
52
|
+
onClick: () => l(!c),
|
|
53
|
+
children: "Click me"
|
|
54
|
+
}) }), /* @__PURE__ */ o(n, {
|
|
55
|
+
theme: "light",
|
|
56
|
+
children: "This tooltip opens on click"
|
|
57
|
+
})]
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ s(i, {
|
|
60
|
+
open: !0,
|
|
61
|
+
children: [/* @__PURE__ */ o(t, {
|
|
62
|
+
className: "underline decoration-dashed cursor-help",
|
|
63
|
+
children: "Always open"
|
|
64
|
+
}), /* @__PURE__ */ o(n, {
|
|
65
|
+
theme: "light",
|
|
66
|
+
children: "This tooltip is always open"
|
|
67
|
+
})]
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
}),
|
|
71
|
+
"POSITIONS",
|
|
72
|
+
/* @__PURE__ */ o("div", {
|
|
73
|
+
className: "flex gap-48 items-center",
|
|
74
|
+
children: /* @__PURE__ */ s(i, { children: [
|
|
75
|
+
/* @__PURE__ */ o(t, {
|
|
76
|
+
className: "underline decoration-dashed cursor-help",
|
|
77
|
+
children: "Hover me"
|
|
78
|
+
}),
|
|
79
|
+
/* @__PURE__ */ o(n, {
|
|
80
|
+
side: "top",
|
|
81
|
+
children: "This tooltip is on the top"
|
|
82
|
+
}),
|
|
83
|
+
/* @__PURE__ */ o(n, {
|
|
84
|
+
side: "bottom",
|
|
85
|
+
children: "This tooltip is on the bottom"
|
|
86
|
+
}),
|
|
87
|
+
/* @__PURE__ */ o(n, {
|
|
88
|
+
side: "right",
|
|
89
|
+
children: "This tooltip is on the right"
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ o(n, {
|
|
92
|
+
side: "left",
|
|
93
|
+
children: "This tooltip is on the left"
|
|
94
|
+
})
|
|
95
|
+
] })
|
|
96
|
+
})
|
|
97
|
+
] })
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
//#endregion
|
|
101
|
+
export { c as default };
|
|
102
|
+
|
|
103
|
+
//# sourceMappingURL=tooltip-demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-demo.js","names":[],"sources":["../../lib/examples/tooltip-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/ui/Tooltip';\nimport { Clickable } from '@/ui/Clickable';\n\nexport default function TooltipDemo() {\n const [clickTooltipOpen, setClickTooltipOpen] = useState(false);\n\n return (\n <div className=\"flex flex-col gap-24 h-300\">\n <TooltipProvider>\n DARK MODE\n <div className=\"flex gap-48 items-center\">\n <Tooltip>\n <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n Hover me\n </TooltipTrigger>\n <TooltipContent>This is a helpful tooltip</TooltipContent>\n </Tooltip>\n\n <Tooltip open={clickTooltipOpen}>\n <TooltipTrigger\n render={\n <Clickable\n className=\"rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50\"\n onClick={() => setClickTooltipOpen(!clickTooltipOpen)}\n >\n Click me\n </Clickable>\n }\n ></TooltipTrigger>\n <TooltipContent>This tooltip opens on click</TooltipContent>\n </Tooltip>\n\n {/* Always open */}\n <Tooltip open>\n <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n Always open\n </TooltipTrigger>\n <TooltipContent>This tooltip is always open</TooltipContent>\n </Tooltip>\n </div>\n LIGHT MODE\n <div className=\"flex gap-48 items-center\">\n <Tooltip>\n <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n Hover me\n </TooltipTrigger>\n <TooltipContent theme=\"light\">This is a helpful tooltip</TooltipContent>\n </Tooltip>\n\n <Tooltip open={clickTooltipOpen}>\n <TooltipTrigger\n render={\n <Clickable\n className=\"rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50\"\n onClick={() => setClickTooltipOpen(!clickTooltipOpen)}\n >\n Click me\n </Clickable>\n }\n ></TooltipTrigger>\n <TooltipContent theme=\"light\">This tooltip opens on click</TooltipContent>\n </Tooltip>\n\n {/* Always open */}\n <Tooltip open>\n <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n Always open\n </TooltipTrigger>\n <TooltipContent theme=\"light\">This tooltip is always open</TooltipContent>\n </Tooltip>\n </div>\n POSITIONS\n <div className=\"flex gap-48 items-center\">\n <Tooltip>\n <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n Hover me\n </TooltipTrigger>\n <TooltipContent side=\"top\">This tooltip is on the top</TooltipContent>\n <TooltipContent side=\"bottom\">This tooltip is on the bottom</TooltipContent>\n <TooltipContent side=\"right\">This tooltip is on the right</TooltipContent>\n <TooltipContent side=\"left\">This tooltip is on the left</TooltipContent>\n </Tooltip>\n </div>\n </TooltipProvider>\n </div>\n );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAc;CACpC,IAAM,CAAC,GAAkB,KAAuB,EAAS,GAAM;AAE/D,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAA,UAAA;GAAiB;GAEf,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAgB,WAAU;gBAA0C;MAEnD,CAAA,EACjB,kBAAC,GAAD,EAAA,UAAgB,6BAA0C,CAAA,CAClD,EAAA,CAAA;KAEV,kBAAC,GAAD;MAAS,MAAM;gBAAf,CACE,kBAAC,GAAD,EACE,QACE,kBAAC,GAAD;OACE,WAAU;OACV,eAAe,EAAoB,CAAC,EAAiB;iBACtD;OAEW,CAAA,EAEE,CAAA,EAClB,kBAAC,GAAD,EAAA,UAAgB,+BAA4C,CAAA,CAAA;;KAI9D,kBAAC,GAAD;MAAS,MAAA;gBAAT,CACE,kBAAC,GAAD;OAAgB,WAAU;iBAA0C;OAEnD,CAAA,EACjB,kBAAC,GAAD,EAAA,UAAgB,+BAA4C,CAAA,CAAA;;;;;GAIhE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAgB,WAAU;gBAA0C;MAEnD,CAAA,EACjB,kBAAC,GAAD;MAAgB,OAAM;gBAAQ;MAA0C,CAAA,CAChE,EAAA,CAAA;KAEV,kBAAC,GAAD;MAAS,MAAM;gBAAf,CACE,kBAAC,GAAD,EACE,QACE,kBAAC,GAAD;OACE,WAAU;OACV,eAAe,EAAoB,CAAC,EAAiB;iBACtD;OAEW,CAAA,EAEE,CAAA,EAClB,kBAAC,GAAD;OAAgB,OAAM;iBAAQ;OAA4C,CAAA,CAAA;;KAI5E,kBAAC,GAAD;MAAS,MAAA;gBAAT,CACE,kBAAC,GAAD;OAAgB,WAAU;iBAA0C;OAEnD,CAAA,EACjB,kBAAC,GAAD;OAAgB,OAAM;iBAAQ;OAA4C,CAAA,CAAA;;;;;GAI9E,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAA,UAAA;KACE,kBAAC,GAAD;MAAgB,WAAU;gBAA0C;MAEnD,CAAA;KACjB,kBAAC,GAAD;MAAgB,MAAK;gBAAM;MAA2C,CAAA;KACtE,kBAAC,GAAD;MAAgB,MAAK;gBAAS;MAA8C,CAAA;KAC5E,kBAAC,GAAD;MAAgB,MAAK;gBAAQ;MAA6C,CAAA;KAC1E,kBAAC,GAAD;MAAgB,MAAK;gBAAO;MAA4C,CAAA;KAChE,EAAA,CAAA;IACN,CAAA;GACU,EAAA,CAAA;EACd,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.23",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
"build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm ../../tools/exports-builder/index.ts"
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
|
+
"@base-ui/react": ">=1.3.0",
|
|
81
82
|
"@juggle/resize-observer": ">=3.4.0",
|
|
82
83
|
"@use-gesture/react": ">=10.2.26",
|
|
83
84
|
"clsx": ">=2.1.1",
|
package/styles/components.css
CHANGED
|
@@ -90,4 +90,76 @@
|
|
|
90
90
|
transition-duration: 0ms !important;
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
|
+
|
|
94
|
+
[data-scroller] {
|
|
95
|
+
overflow-x: auto;
|
|
96
|
+
scrollbar-width: none;
|
|
97
|
+
-ms-overflow-style: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
[data-scroller]::-webkit-scrollbar {
|
|
101
|
+
display: none;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Custom scroll track */
|
|
105
|
+
[data-scrollbar] {
|
|
106
|
+
position: relative;
|
|
107
|
+
width: 100%;
|
|
108
|
+
height: 6px;
|
|
109
|
+
padding: 1px;
|
|
110
|
+
background: var(--color-ultramarine);
|
|
111
|
+
border-radius: 4px;
|
|
112
|
+
pointer-events: none;
|
|
113
|
+
user-select: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Custom scroll bar */
|
|
117
|
+
[data-scrollbar] [data-scrollprogress] {
|
|
118
|
+
content: '';
|
|
119
|
+
position: absolute;
|
|
120
|
+
bottom: 1px;
|
|
121
|
+
inset-inline-start: 1px;
|
|
122
|
+
width: var(--scrollbar-width, 60%);
|
|
123
|
+
height: 4px;
|
|
124
|
+
background: var(--color-saffron);
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
animation: scroll-position linear both;
|
|
127
|
+
display: block;
|
|
128
|
+
cursor: grab;
|
|
129
|
+
transition: background-color 150ms ease;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
[data-scrollbar] [data-scrollprogress]:hover {
|
|
133
|
+
background: color-mix(in srgb, var(--color-saffron) 85%, black);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
[data-scrollbar] [data-scrollprogress]:active {
|
|
137
|
+
cursor: grabbing;
|
|
138
|
+
background: color-mix(in srgb, var(--color-saffron) 70%, black);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-scroller='dark'] + [data-scrollbar] {
|
|
142
|
+
background: var(--color-white);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[data-scroller='dark'] + [data-scrollbar] [data-scrollprogress] {
|
|
146
|
+
background: var(--color-ultramarine);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
[data-scroller='dark'] + [data-scrollbar] [data-scrollprogress]:hover {
|
|
150
|
+
background: color-mix(in srgb, var(--color-ultramarine) 85%, white);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
[data-scroller='dark'] + [data-scrollbar] [data-scrollprogress]:active {
|
|
154
|
+
background: color-mix(in srgb, var(--color-ultramarine) 70%, white);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@keyframes scroll-position {
|
|
158
|
+
from {
|
|
159
|
+
inset-inline-start: 1px;
|
|
160
|
+
}
|
|
161
|
+
to {
|
|
162
|
+
inset-inline-start: calc(100% - var(--scrollbar-width, 60%) - 1px);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
93
165
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
interface ScrollbarProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
timelineName?: string;
|
|
5
|
+
scrollbarWidth?: string;
|
|
6
|
+
variant?: 'light' | 'dark';
|
|
7
|
+
className?: string;
|
|
8
|
+
scrollerClassName?: string;
|
|
9
|
+
scrollbarClassName?: string;
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
}
|
|
12
|
+
declare function Scrollbar({ children, timelineName, scrollbarWidth, variant, className, scrollerClassName, scrollbarClassName, 'aria-label': ariaLabel, }: ScrollbarProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { Scrollbar };
|
|
14
|
+
export type { ScrollbarProps };
|
package/ui/Scrollbar.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as e } from "../chunks/clsx.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
5
|
+
//#region lib/ui/Scrollbar.tsx
|
|
6
|
+
function r({ children: r, timelineName: i = "--scroller", scrollbarWidth: a = "60%", variant: o = "light", className: s, scrollerClassName: c, scrollbarClassName: l, "aria-label": u = "Scrollable content" }) {
|
|
7
|
+
return /* @__PURE__ */ n("div", {
|
|
8
|
+
className: e(s),
|
|
9
|
+
style: { timelineScope: i },
|
|
10
|
+
children: [/* @__PURE__ */ t("div", {
|
|
11
|
+
"data-scroller": o,
|
|
12
|
+
className: c,
|
|
13
|
+
style: { scrollTimeline: `${i} x` },
|
|
14
|
+
role: "region",
|
|
15
|
+
"aria-label": u,
|
|
16
|
+
tabIndex: 0,
|
|
17
|
+
children: r
|
|
18
|
+
}), /* @__PURE__ */ t("div", {
|
|
19
|
+
"data-scrollbar": !0,
|
|
20
|
+
className: l,
|
|
21
|
+
style: { "--scrollbar-width": a },
|
|
22
|
+
role: "scrollbar",
|
|
23
|
+
"aria-controls": "scrollable-content",
|
|
24
|
+
"aria-orientation": "horizontal",
|
|
25
|
+
"aria-valuemin": 0,
|
|
26
|
+
"aria-valuemax": 100,
|
|
27
|
+
"aria-valuenow": 0,
|
|
28
|
+
children: /* @__PURE__ */ t("div", {
|
|
29
|
+
"data-scrollprogress": !0,
|
|
30
|
+
style: { animationTimeline: i },
|
|
31
|
+
role: "presentation"
|
|
32
|
+
})
|
|
33
|
+
})]
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
//#endregion
|
|
37
|
+
export { r as Scrollbar };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=Scrollbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scrollbar.js","names":[],"sources":["../../lib/ui/Scrollbar.tsx"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport React from 'react';\n\ninterface ScrollbarProps {\n children: React.ReactNode;\n timelineName?: string;\n scrollbarWidth?: string;\n variant?: 'light' | 'dark';\n className?: string;\n scrollerClassName?: string;\n scrollbarClassName?: string;\n 'aria-label'?: string;\n}\n\nfunction Scrollbar({\n children,\n timelineName = '--scroller',\n scrollbarWidth = '60%',\n variant = 'light',\n className,\n scrollerClassName,\n scrollbarClassName,\n 'aria-label': ariaLabel = 'Scrollable content',\n}: ScrollbarProps) {\n return (\n <div className={clsx(className)} style={{ timelineScope: timelineName } as React.CSSProperties}>\n <div\n data-scroller={variant}\n className={scrollerClassName}\n style={{ scrollTimeline: `${timelineName} x` } as React.CSSProperties}\n role=\"region\"\n aria-label={ariaLabel}\n tabIndex={0}\n >\n {children}\n </div>\n <div\n data-scrollbar\n className={scrollbarClassName}\n style={\n {\n '--scrollbar-width': scrollbarWidth,\n } as React.CSSProperties\n }\n role=\"scrollbar\"\n aria-controls=\"scrollable-content\"\n aria-orientation=\"horizontal\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={0}\n >\n <div\n data-scrollprogress\n style={{ animationTimeline: timelineName } as React.CSSProperties}\n role=\"presentation\"\n />\n </div>\n </div>\n );\n}\n\nexport { Scrollbar };\nexport type { ScrollbarProps };\n"],"mappings":";;;;;AAgBA,SAAS,EAAU,EACjB,aACA,kBAAe,cACf,oBAAiB,OACjB,aAAU,SACV,cACA,sBACA,uBACA,cAAc,IAAY,wBACT;AACjB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAU;EAAE,OAAO,EAAE,eAAe,GAAc;YAAvE,CACE,kBAAC,OAAD;GACE,iBAAe;GACf,WAAW;GACX,OAAO,EAAE,gBAAgB,GAAG,EAAa,KAAK;GAC9C,MAAK;GACL,cAAY;GACZ,UAAU;GAET;GACG,CAAA,EACN,kBAAC,OAAD;GACE,kBAAA;GACA,WAAW;GACX,OACE,EACE,qBAAqB,GACtB;GAEH,MAAK;GACL,iBAAc;GACd,oBAAiB;GACjB,iBAAe;GACf,iBAAe;GACf,iBAAe;aAEf,kBAAC,OAAD;IACE,uBAAA;IACA,OAAO,EAAE,mBAAmB,GAAc;IAC1C,MAAK;IACL,CAAA;GACE,CAAA,CAAA"}
|
package/ui/Tooltip.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
|
|
2
|
+
declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, theme, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
|
|
6
|
+
theme?: 'dark' | 'light';
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/ui/Tooltip.js
ADDED
package/ui/forms/TextField.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Icon as a } from "@clubmed/trident-icons";
|
|
|
7
7
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
8
|
//#region lib/ui/forms/TextField.tsx
|
|
9
9
|
var c = (c) => {
|
|
10
|
-
let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !
|
|
10
|
+
let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !1, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = n({
|
|
11
11
|
name: d,
|
|
12
12
|
initialValue: p,
|
|
13
13
|
onChange: D,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n description?: string;\n icon?: IconicNames;\n iconType?: IconicTypes;\n errorMessage?: string;\n dataTestId?: string;\n formatter?: UseValueProps<Value>['formatter'];\n hasDropdown?: boolean;\n clear?: string;\n iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n label,\n value: initialValue,\n description,\n validationStatus = 'default',\n icon,\n iconType,\n errorMessage,\n disabled = false,\n required = false,\n hideRequiredStar,\n className,\n dataTestId = 'TextField',\n hasDropdown =
|
|
1
|
+
{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n description?: string;\n icon?: IconicNames;\n iconType?: IconicTypes;\n errorMessage?: string;\n dataTestId?: string;\n formatter?: UseValueProps<Value>['formatter'];\n hasDropdown?: boolean;\n clear?: string;\n iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n label,\n value: initialValue,\n description,\n validationStatus = 'default',\n icon,\n iconType,\n errorMessage,\n disabled = false,\n required = false,\n hideRequiredStar,\n className,\n dataTestId = 'TextField',\n hasDropdown = false,\n clear = '',\n iconFirst = true,\n onChange,\n formatter,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({ name, initialValue, onChange, formatter });\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const shouldDisplayClearButton =\n !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n return (\n <FormControl\n id={id}\n label={label}\n className={className}\n description={description}\n dataName=\"TextField\"\n dataTestId={dataTestId}\n disabled={disabled}\n required={required}\n hideRequiredStar={hideRequiredStar}\n validationStatus={validationStatus}\n errorMessage={errorMessage}\n >\n <div className=\"relative\">\n <input\n {...rest}\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n value={value as any}\n onChange={(e) => setValue(e.target.value as Value)}\n style={\n {\n '--nbIconsStart': Number(!!icon && iconFirst),\n '--nbIconsEnd':\n Number(!!icon && !iconFirst) +\n Number(shouldDisplayClearButton || hasDropdown) +\n Number(internalStatus === 'error' || internalStatus === 'success'),\n } as React.CSSProperties\n }\n className={clsx(\n 'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n {\n 'border-middleGrey focus:border-black active:border-black':\n internalStatus === 'default',\n 'bg-white text-black': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n 'border-red': internalStatus === 'error',\n 'border-green': internalStatus === 'success',\n },\n )}\n aria-label={name}\n />\n\n <div\n className={clsx(\n 'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n {\n 'text-grey': internalStatus === 'disabled',\n 'text-red': internalStatus === 'error',\n 'text-green': internalStatus === 'success',\n },\n )}\n >\n {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n <span className=\"ms-auto flex gap-x-8\">\n {internalStatus === 'error' && (\n <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n )}\n\n {internalStatus === 'success' && (\n <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n )}\n {(hasDropdown || shouldDisplayClearButton) &&\n (shouldDisplayClearButton ? (\n <button\n className=\"pointer-events-auto\"\n onClick={() => setValue('' as Value)}\n aria-label={clear}\n type=\"reset\"\n >\n <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n </button>\n ) : (\n <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n ))}\n {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n </span>\n </div>\n </div>\n </FormControl>\n );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAM;EAAc;EAAU;EAAW,CAAC,EAClF,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAe;IAClD,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OAAO,KAA4B,EAAY,GAC/C,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,2KACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAe,OACd,IACC,kBAAC,UAAD;OACE,WAAU;OACV,eAAe,EAAS,GAAY;OACpC,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}
|