@clubmed/trident-ui 1.6.0-beta.2 → 1.6.0-beta.3
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 +7 -0
- package/molecules/Link.js +12 -14
- package/molecules/Link.js.map +1 -1
- package/molecules/Popin.js +19 -21
- package/molecules/Popin.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
# [1.6.0-beta.3](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.6.0-beta.2...v1.6.0-beta.3) (2026-01-07)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **molecules:** add `TextSizing` story to `Link` and refactor class merging in `Link` and `Popin` components ([fe37305](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/fe37305c572680af9be87eefb2a00639e0ec81c9))
|
|
9
|
+
|
|
3
10
|
# [1.6.0-beta.2](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.6.0-beta.1...v1.6.0-beta.2) (2026-01-07)
|
|
4
11
|
|
|
5
12
|
|
package/molecules/Link.js
CHANGED
|
@@ -1,40 +1,38 @@
|
|
|
1
|
-
import { jsxs as t, jsx as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsxs as t, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { c as o } 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
|
|
5
|
+
const L = ({
|
|
6
6
|
label: n,
|
|
7
7
|
icon: s,
|
|
8
8
|
component: c = "a",
|
|
9
9
|
iconType: m,
|
|
10
|
-
underlined:
|
|
10
|
+
underlined: e = !0,
|
|
11
11
|
className: l,
|
|
12
12
|
inert: p,
|
|
13
13
|
...d
|
|
14
14
|
}) => {
|
|
15
|
-
const
|
|
15
|
+
const r = n.lastIndexOf(" "), a = r === -1 ? n.length : r, h = n.substring(0, 1), x = n.substring(1, a + 1), g = n.substring(a);
|
|
16
16
|
return /* @__PURE__ */ t(
|
|
17
17
|
p ? "span" : c,
|
|
18
18
|
{
|
|
19
|
-
className: f(
|
|
20
|
-
e("text-b3 decoration-none link-container cursor-pointer text-inherit", l)
|
|
21
|
-
),
|
|
19
|
+
className: f("decoration-none link-container cursor-pointer text-inherit", l),
|
|
22
20
|
"data-name": "Link",
|
|
23
21
|
...d,
|
|
24
22
|
children: [
|
|
25
|
-
/* @__PURE__ */
|
|
23
|
+
/* @__PURE__ */ i("span", { className: o({ "link-underline": e }), children: h }),
|
|
26
24
|
/* @__PURE__ */ t(
|
|
27
25
|
"span",
|
|
28
26
|
{
|
|
29
|
-
className:
|
|
27
|
+
className: o("hoverable", {
|
|
30
28
|
"has-icon": s,
|
|
31
|
-
"link-underline":
|
|
29
|
+
"link-underline": e
|
|
32
30
|
}),
|
|
33
31
|
children: [
|
|
34
|
-
|
|
32
|
+
x,
|
|
35
33
|
/* @__PURE__ */ t("span", { className: "inline-block", children: [
|
|
36
34
|
g,
|
|
37
|
-
s && /* @__PURE__ */
|
|
35
|
+
s && /* @__PURE__ */ i(
|
|
38
36
|
u,
|
|
39
37
|
{
|
|
40
38
|
name: s,
|
|
@@ -52,6 +50,6 @@ const C = ({
|
|
|
52
50
|
);
|
|
53
51
|
};
|
|
54
52
|
export {
|
|
55
|
-
|
|
53
|
+
L as Link
|
|
56
54
|
};
|
|
57
55
|
//# 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';\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(
|
|
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('decoration-none link-container cursor-pointer text-inherit', className)}\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","jsx","clsx","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,EAAQ,8DAA8DT,CAAS;AAAA,MAC1F,aAAU;AAAA,MACT,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,kBAAkBZ,GAAY,GAAI,UAAAM,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,EAAK,aAAa;AAAA,cAC3B,YAAYf;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,gBAAAc;AAAA,kBAACE;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.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as r, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as x } from "react";
|
|
3
3
|
import { t as l } from "../chunks/bundle-mjs.js";
|
|
4
|
-
import { Backdrop as
|
|
5
|
-
import { Button as
|
|
6
|
-
import { c as
|
|
4
|
+
import { Backdrop as v } from "./Backdrop.js";
|
|
5
|
+
import { Button as g } from "./Buttons/v2/Button.js";
|
|
6
|
+
import { c as w } from "../chunks/clsx.js";
|
|
7
7
|
import { useSlots as N } from "../hooks/useSlots.js";
|
|
8
8
|
const y = ({ closeLabel: t, onClose: e }) => /* @__PURE__ */ r(
|
|
9
|
-
|
|
9
|
+
g,
|
|
10
10
|
{
|
|
11
11
|
color: "black",
|
|
12
12
|
variant: "circle",
|
|
@@ -18,38 +18,36 @@ const y = ({ closeLabel: t, onClose: e }) => /* @__PURE__ */ r(
|
|
|
18
18
|
), R = ({
|
|
19
19
|
title: t,
|
|
20
20
|
children: e,
|
|
21
|
-
closeLabel:
|
|
21
|
+
closeLabel: s,
|
|
22
22
|
onClose: a,
|
|
23
23
|
isVisible: o,
|
|
24
|
-
className:
|
|
25
|
-
bodyClassName:
|
|
24
|
+
className: p = "sm:w-360",
|
|
25
|
+
bodyClassName: d,
|
|
26
26
|
Footer: n = y
|
|
27
27
|
}) => {
|
|
28
|
-
const { children:
|
|
29
|
-
return m.current = o, /* @__PURE__ */ r(
|
|
28
|
+
const { children: f, popinFooter: c } = N(e, ["popinFooter"]), m = x(o), h = m.current, i = !o && h;
|
|
29
|
+
return m.current = o, /* @__PURE__ */ r(v, { isVisible: o, onClose: a, children: /* @__PURE__ */ r(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
32
32
|
className: l(
|
|
33
|
-
|
|
33
|
+
w(
|
|
34
34
|
"border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]",
|
|
35
35
|
{
|
|
36
36
|
"animate-zoomIn": o,
|
|
37
37
|
"animate-zoomOut": !o && i,
|
|
38
38
|
"opacity-0 scale-90": !o && !i
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
p
|
|
42
42
|
),
|
|
43
|
-
children: /* @__PURE__ */
|
|
43
|
+
children: /* @__PURE__ */ u(
|
|
44
44
|
"div",
|
|
45
45
|
{
|
|
46
|
-
className: l(
|
|
47
|
-
s("text-center max-h-[90vh] flex flex-col p-40 gap-40", f)
|
|
48
|
-
),
|
|
46
|
+
className: l("text-center max-h-[90vh] flex flex-col p-40 gap-40", d),
|
|
49
47
|
children: [
|
|
50
48
|
t && /* @__PURE__ */ r("div", { className: "text-h5 mt-0 -mb-20 text-start font-serif", children: t }),
|
|
51
|
-
/* @__PURE__ */ r("div", { className: "text-start overflow-auto", children:
|
|
52
|
-
!c?.length && n && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { closeLabel:
|
|
49
|
+
/* @__PURE__ */ r("div", { className: "text-start overflow-auto", children: f }),
|
|
50
|
+
!c?.length && n && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { closeLabel: s, onClose: a }) }),
|
|
53
51
|
c
|
|
54
52
|
]
|
|
55
53
|
}
|
package/molecules/Popin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport { useRef } from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { Backdrop, type BackdropProps } from './Backdrop';\nimport { Button } from './Buttons/v2/Button';\nimport clsx from 'clsx';\nimport { useSlots } from '@/hooks/useSlots';\n\nexport type ClosePopinCallback = () => void;\n\nexport interface PopinFooterProps {\n closeLabel?: string;\n onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n return (\n <Button\n color=\"black\"\n variant=\"circle\"\n icon=\"CrossDefault\"\n className=\"mx-auto\"\n aria-label={closeLabel}\n onClick={onClose}\n />\n );\n};\n\nexport interface PopinProps {\n title?: ReactNode;\n closeLabel?: string;\n onClose: ClosePopinCallback;\n isVisible: boolean;\n className?: string;\n bodyClassName?: string;\n showCloseButton?: boolean;\n target?: BackdropProps['target'];\n /**\n * @deprecated use popinFooter slot instead\n */\n Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n title,\n children,\n closeLabel,\n onClose,\n isVisible,\n className = 'sm:w-360',\n bodyClassName,\n Footer = PopinFooter,\n}) => {\n const { children: popinBody, popinFooter } = useSlots(children, ['popinFooter']);\n\n // Prevent initial mount flash when closed: only animate leave if it was visible before\n const wasVisibleRef = useRef(isVisible);\n const wasVisible = wasVisibleRef.current;\n const isLeaving = !isVisible && wasVisible;\n\n // update ref for next render\n wasVisibleRef.current = isVisible;\n return (\n <Backdrop isVisible={isVisible} onClose={onClose}>\n <div\n className={twMerge(\n clsx(\n 'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]',\n {\n 'animate-zoomIn': isVisible,\n 'animate-zoomOut': !isVisible && isLeaving,\n 'opacity-0 scale-90': !isVisible && !isLeaving,\n },\n ),\n className,\n )}\n >\n <div\n className={twMerge('text-center max-h-[90vh] flex flex-col p-40 gap-40', bodyClassName)}\n >\n {title && <div className=\"text-h5 mt-0 -mb-20 text-start font-serif\">{title}</div>}\n <div className=\"text-start overflow-auto\">{popinBody}</div>\n {!popinFooter?.length && Footer && (\n <div>\n <Footer closeLabel={closeLabel} onClose={onClose} />\n </div>\n )}\n\n {popinFooter}\n </div>\n </div>\n </Backdrop>\n );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","bodyClassName","Footer","popinBody","popinFooter","useSlots","wasVisibleRef","useRef","wasVisible","isLeaving","Backdrop","twMerge","clsx","jsxs"],"mappings":";;;;;;;AAeA,MAAMA,IAAc,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAE/B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,cAAYH;AAAA,IACZ,SAASC;AAAA,EAAA;AAAA,GAoBFG,IAA0D,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAN;AAAA,EACA,SAAAC;AAAA,EACA,WAAAM;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,QAAAC,IAASX;AACX,MAAM;AACJ,QAAM,EAAE,UAAUY,GAAW,aAAAC,EAAA,IAAgBC,EAASP,GAAU,CAAC,aAAa,CAAC,GAGzEQ,IAAgBC,EAAOR,CAAS,GAChCS,IAAaF,EAAc,SAC3BG,IAAY,CAACV,KAAaS;AAGhC,SAAAF,EAAc,UAAUP,GAEtB,gBAAAL,EAACgB,GAAA,EAAS,WAAAX,GAAsB,SAAAN,GAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWiB;AAAA,QACTC;AAAA,UACE;AAAA,UACA;AAAA,YACE,kBAAkBb;AAAA,YAClB,mBAAmB,CAACA,KAAaU;AAAA,YACjC,sBAAsB,CAACV,KAAa,CAACU;AAAA,UAAA;AAAA,QACvC;AAAA,QAEFT;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAQ,sDAAsDV,CAAa;AAAA,UAErF,UAAA;AAAA,YAAAJ,KAAS,gBAAAH,EAAC,OAAA,EAAI,WAAU,6CAA6C,UAAAG,GAAM;AAAA,YAC5E,gBAAAH,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAS,GAAU;AAAA,YACpD,CAACC,GAAa,UAAUF,KACvB,gBAAAR,EAAC,SACC,UAAA,gBAAAA,EAACQ,GAAA,EAAO,YAAAV,GAAwB,SAAAC,EAAA,CAAkB,EAAA,CACpD;AAAA,YAGDW;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "1.6.0-beta.
|
|
3
|
+
"version": "1.6.0-beta.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
"import": "./atoms/Icons/index.js",
|
|
32
32
|
"default": "./atoms/Icons/index.js"
|
|
33
33
|
},
|
|
34
|
-
"./atoms/Icons/svg-use": {
|
|
35
|
-
"types": "./atoms/Icons/svg-use/index.d.ts",
|
|
36
|
-
"import": "./atoms/Icons/svg-use/index.js",
|
|
37
|
-
"default": "./atoms/Icons/svg-use/index.js"
|
|
38
|
-
},
|
|
39
34
|
"./atoms/Icons/svg": {
|
|
40
35
|
"types": "./atoms/Icons/svg/index.d.ts",
|
|
41
36
|
"import": "./atoms/Icons/svg/index.js",
|
|
42
37
|
"default": "./atoms/Icons/svg/index.js"
|
|
43
38
|
},
|
|
39
|
+
"./atoms/Icons/svg-use": {
|
|
40
|
+
"types": "./atoms/Icons/svg-use/index.d.ts",
|
|
41
|
+
"import": "./atoms/Icons/svg-use/index.js",
|
|
42
|
+
"default": "./atoms/Icons/svg-use/index.js"
|
|
43
|
+
},
|
|
44
44
|
"./molecules/Tabs": {
|
|
45
45
|
"types": "./molecules/Tabs/index.d.ts",
|
|
46
46
|
"import": "./molecules/Tabs/index.js",
|