@clubmed/trident-ui 2.0.0-beta.23 → 2.0.0-beta.24

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.
Files changed (5) hide show
  1. package/examples/scrollbar-demo.js +22 -5
  2. package/examples/scrollbar-demo.js.map +1 -1
  3. package/package.json +1 -1
  4. package/ui/Scrollbar.js +47 -18
  5. package/ui/Scrollbar.js.map +1 -1
package/examples/scrollbar-demo.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { Scrollbar as e } from "../ui/Scrollbar.js";
2
- import { jsx as t } from "react/jsx-runtime";
2
+ import { jsx as t, jsxs as n } from "react/jsx-runtime";
3
3
  //#region lib/examples/scrollbar-demo.tsx
4
- function n() {
5
- return /* @__PURE__ */ t(e, {
4
+ function r() {
5
+ return /* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t(e, {
6
6
  timelineName: "--scroller-outer",
7
7
  scrollbarWidth: "60%",
8
8
  children: /* @__PURE__ */ t("div", {
@@ -15,9 +15,26 @@ function n() {
15
15
  }, n))
16
16
  })
17
17
  })
18
- });
18
+ }), /* @__PURE__ */ t("div", {
19
+ className: "bg-ultramarine p-8 -m-8 mt-8",
20
+ children: /* @__PURE__ */ t(e, {
21
+ variant: "dark",
22
+ timelineName: "--scrollerDark-outer",
23
+ scrollbarWidth: "60%",
24
+ children: /* @__PURE__ */ t("div", {
25
+ className: "w-600 p-16",
26
+ children: /* @__PURE__ */ t("div", {
27
+ className: "flex gap-8",
28
+ children: Array.from({ length: 20 }).map((e, n) => /* @__PURE__ */ t("div", {
29
+ className: "flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-white text-black",
30
+ children: n + 1
31
+ }, n))
32
+ })
33
+ })
34
+ })
35
+ })] });
19
36
  }
20
37
  //#endregion
21
- export { n as default };
38
+ export { r as default };
22
39
 
23
40
  //# sourceMappingURL=scrollbar-demo.js.map
package/examples/scrollbar-demo.js.map CHANGED
@@ -1 +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"}
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 <div>\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 <div className=\"bg-ultramarine p-8 -m-8 mt-8\">\n <Scrollbar variant=\"dark\" timelineName=\"--scrollerDark-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-white text-black\"\n >\n {i + 1}\n </div>\n ))}\n </div>\n </div>\n </Scrollbar>\n </div>\n </div>\n );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,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,EACZ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAW,SAAQ;GAAO,cAAa;GAAuB,gBAAe;aAC3E,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;MAEE,WAAU;gBAET,IAAI;MACD,EAJC,EAID,CACN;KACE,CAAA;IACF,CAAA;GACI,CAAA;EACR,CAAA,CACF,EAAA,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clubmed/trident-ui",
3
- "version": "2.0.0-beta.23",
3
+ "version": "2.0.0-beta.24",
4
4
  "type": "module",
5
5
  "description": "Shared ClubMed React UI components",
6
6
  "keywords": [
package/ui/Scrollbar.js CHANGED
@@ -1,39 +1,68 @@
1
1
  "use client";
2
2
  import { t as e } from "../chunks/clsx.js";
3
- import "react";
4
- import { jsx as t, jsxs as n } from "react/jsx-runtime";
3
+ import { useCallback as t, useRef as n } from "react";
4
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
5
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` },
6
+ function a({ children: a, timelineName: o = "--scroller", scrollbarWidth: s = "60%", variant: c = "light", className: l, scrollerClassName: u, scrollbarClassName: d, "aria-label": f = "Scrollable content" }) {
7
+ let p = n(null), m = n(null), h = n(null), g = t((e) => {
8
+ e.preventDefault();
9
+ let t = p.current, n = m.current, r = h.current;
10
+ if (!t || !n || !r) return;
11
+ n.setPointerCapture(e.pointerId);
12
+ let i = n.getBoundingClientRect(), a = n.clientWidth - r.offsetWidth - 2, o = t.scrollWidth - t.clientWidth;
13
+ if (e.target !== r) {
14
+ let n = e.clientX - i.left - 1;
15
+ t.scrollLeft = Math.max(0, Math.min(a, n - r.offsetWidth / 2)) / a * o;
16
+ }
17
+ let s = e.clientX, c = t.scrollLeft, l = (e) => {
18
+ let n = (e.clientX - s) / a * o;
19
+ t.scrollLeft = Math.max(0, Math.min(o, c + n));
20
+ }, u = () => {
21
+ n.removeEventListener("pointermove", l), n.removeEventListener("pointerup", u);
22
+ };
23
+ n.addEventListener("pointermove", l), n.addEventListener("pointerup", u);
24
+ }, []);
25
+ return /* @__PURE__ */ i("div", {
26
+ className: e(l),
27
+ style: { timelineScope: o },
28
+ children: [/* @__PURE__ */ r("div", {
29
+ ref: p,
30
+ "data-scroller": c,
31
+ className: u,
32
+ style: { scrollTimeline: `${o} x` },
14
33
  role: "region",
15
- "aria-label": u,
34
+ "aria-label": f,
16
35
  tabIndex: 0,
17
- children: r
18
- }), /* @__PURE__ */ t("div", {
36
+ children: a
37
+ }), /* @__PURE__ */ r("div", {
38
+ ref: m,
19
39
  "data-scrollbar": !0,
20
- className: l,
21
- style: { "--scrollbar-width": a },
40
+ className: d,
41
+ style: {
42
+ "--scrollbar-width": s,
43
+ pointerEvents: "auto",
44
+ cursor: "pointer"
45
+ },
22
46
  role: "scrollbar",
23
47
  "aria-controls": "scrollable-content",
24
48
  "aria-orientation": "horizontal",
25
49
  "aria-valuemin": 0,
26
50
  "aria-valuemax": 100,
27
51
  "aria-valuenow": 0,
28
- children: /* @__PURE__ */ t("div", {
52
+ onPointerDown: g,
53
+ children: /* @__PURE__ */ r("div", {
54
+ ref: h,
29
55
  "data-scrollprogress": !0,
30
- style: { animationTimeline: i },
56
+ style: {
57
+ animationTimeline: o,
58
+ pointerEvents: "auto"
59
+ },
31
60
  role: "presentation"
32
61
  })
33
62
  })]
34
63
  });
35
64
  }
36
65
  //#endregion
37
- export { r as Scrollbar };
66
+ export { a as Scrollbar };
38
67
 
39
68
  //# sourceMappingURL=Scrollbar.js.map
package/ui/Scrollbar.js.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"Scrollbar.js","names":[],"sources":["../../lib/ui/Scrollbar.tsx"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport React, { useCallback, useRef } 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 const scrollerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n const nubRef = useRef<HTMLDivElement>(null);\n\n const handleTrackPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {\n e.preventDefault();\n const scroller = scrollerRef.current;\n const track = trackRef.current;\n const nub = nubRef.current;\n if (!scroller || !track || !nub) return;\n\n track.setPointerCapture(e.pointerId);\n\n const rect = track.getBoundingClientRect();\n const maxNubOffset = track.clientWidth - nub.offsetWidth - 2;\n const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;\n\n if (e.target !== nub) {\n const clickX = e.clientX - rect.left - 1;\n const targetNubLeft = Math.max(0, Math.min(maxNubOffset, clickX - nub.offsetWidth / 2));\n scroller.scrollLeft = (targetNubLeft / maxNubOffset) * maxScrollLeft;\n }\n\n const startX = e.clientX;\n const startScrollLeft = scroller.scrollLeft;\n\n const onPointerMove = (moveEvent: PointerEvent) => {\n const scrollDelta = ((moveEvent.clientX - startX) / maxNubOffset) * maxScrollLeft;\n scroller.scrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + scrollDelta));\n };\n\n const onPointerUp = () => {\n track.removeEventListener('pointermove', onPointerMove);\n track.removeEventListener('pointerup', onPointerUp);\n };\n\n track.addEventListener('pointermove', onPointerMove);\n track.addEventListener('pointerup', onPointerUp);\n }, []);\n\n return (\n <div className={clsx(className)} style={{ timelineScope: timelineName } as React.CSSProperties}>\n <div\n ref={scrollerRef}\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 ref={trackRef}\n data-scrollbar\n className={scrollbarClassName}\n style={\n {\n '--scrollbar-width': scrollbarWidth,\n pointerEvents: 'auto',\n cursor: 'pointer',\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 onPointerDown={handleTrackPointerDown}\n >\n <div\n ref={nubRef}\n data-scrollprogress\n style={{ animationTimeline: timelineName, pointerEvents: 'auto' } 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;CACjB,IAAM,IAAc,EAAuB,KAAK,EAC1C,IAAW,EAAuB,KAAK,EACvC,IAAS,EAAuB,KAAK,EAErC,IAAyB,GAAa,MAA0C;AACpF,IAAE,gBAAgB;EAClB,IAAM,IAAW,EAAY,SACvB,IAAQ,EAAS,SACjB,IAAM,EAAO;AACnB,MAAI,CAAC,KAAY,CAAC,KAAS,CAAC,EAAK;AAEjC,IAAM,kBAAkB,EAAE,UAAU;EAEpC,IAAM,IAAO,EAAM,uBAAuB,EACpC,IAAe,EAAM,cAAc,EAAI,cAAc,GACrD,IAAgB,EAAS,cAAc,EAAS;AAEtD,MAAI,EAAE,WAAW,GAAK;GACpB,IAAM,IAAS,EAAE,UAAU,EAAK,OAAO;AAEvC,KAAS,aADa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAc,IAAS,EAAI,cAAc,EAAE,CAAC,GAChD,IAAgB;;EAGzD,IAAM,IAAS,EAAE,SACX,IAAkB,EAAS,YAE3B,KAAiB,MAA4B;GACjD,IAAM,KAAgB,EAAU,UAAU,KAAU,IAAgB;AACpE,KAAS,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAe,IAAkB,EAAY,CAAC;KAGrF,UAAoB;AAExB,GADA,EAAM,oBAAoB,eAAe,EAAc,EACvD,EAAM,oBAAoB,aAAa,EAAY;;AAIrD,EADA,EAAM,iBAAiB,eAAe,EAAc,EACpD,EAAM,iBAAiB,aAAa,EAAY;IAC/C,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAU;EAAE,OAAO,EAAE,eAAe,GAAc;YAAvE,CACE,kBAAC,OAAD;GACE,KAAK;GACL,iBAAe;GACf,WAAW;GACX,OAAO,EAAE,gBAAgB,GAAG,EAAa,KAAK;GAC9C,MAAK;GACL,cAAY;GACZ,UAAU;GAET;GACG,CAAA,EACN,kBAAC,OAAD;GACE,KAAK;GACL,kBAAA;GACA,WAAW;GACX,OACE;IACE,qBAAqB;IACrB,eAAe;IACf,QAAQ;IACT;GAEH,MAAK;GACL,iBAAc;GACd,oBAAiB;GACjB,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,eAAe;aAEf,kBAAC,OAAD;IACE,KAAK;IACL,uBAAA;IACA,OAAO;KAAE,mBAAmB;KAAc,eAAe;KAAQ;IACjE,MAAK;IACL,CAAA;GACE,CAAA,CAAA"}