@clubmed/trident-ui 1.5.1-beta.1 → 1.6.0-beta.2

package/molecules/Popin.js

@@ -1,49 +1,63 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { useRef as f } from "react";
-import { Backdrop as p } from "./Backdrop.js";
-import { Button as u } from "./Buttons/v2/Button.js";
-import { c as x } from "../chunks/clsx.js";
-const h = ({ closeLabel: o, onClose: e }) => /* @__PURE__ */ r(
-  u,
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { useRef as v } from "react";
+import { t as l } from "../chunks/bundle-mjs.js";
+import { Backdrop as g } from "./Backdrop.js";
+import { Button as w } from "./Buttons/v2/Button.js";
+import { c as s } from "../chunks/clsx.js";
+import { useSlots as N } from "../hooks/useSlots.js";
+const y = ({ closeLabel: t, onClose: e }) => /* @__PURE__ */ r(
+  w,
   {
     color: "black",
     variant: "circle",
     icon: "CrossDefault",
     className: "mx-auto",
-    "aria-label": o,
+    "aria-label": t,
     onClick: e
   }
-), k = ({
-  title: o,
+), R = ({
+  title: t,
   children: e,
-  closeLabel: l,
+  closeLabel: p,
   onClose: a,
-  isVisible: t,
-  className: s = "sm:w-360",
-  Footer: c = h
+  isVisible: o,
+  className: d = "sm:w-360",
+  bodyClassName: f,
+  Footer: n = y
 }) => {
-  const n = f(t), i = n.current, m = !t && i;
-  return n.current = t, /* @__PURE__ */ r(p, { isVisible: t, onClose: a, children: /* @__PURE__ */ r(
+  const { children: h, popinFooter: c } = N(e, ["popinFooter"]), m = v(o), u = m.current, i = !o && u;
+  return m.current = o, /* @__PURE__ */ r(g, { isVisible: o, onClose: a, children: /* @__PURE__ */ r(
     "div",
     {
-      className: x(
-        "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]",
-        {
-          "animate-zoomIn": t,
-          "animate-zoomOut": !t && m,
-          "opacity-0 scale-90": !t && !m
-        },
-        s
+      className: l(
+        s(
+          "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]",
+          {
+            "animate-zoomIn": o,
+            "animate-zoomOut": !o && i,
+            "opacity-0 scale-90": !o && !i
+          },
+          d
+        )
       ),
-      children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
-        o && /* @__PURE__ */ r("div", { className: "mt-12 text-h5 text-start font-serif", children: o }),
-        /* @__PURE__ */ r("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: e }),
-        c && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(c, { closeLabel: l, onClose: a }) })
-      ] })
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          className: l(
+            s("text-center max-h-[90vh] flex flex-col p-40 gap-40", f)
+          ),
+          children: [
+            t && /* @__PURE__ */ r("div", { className: "text-h5 mt-0 -mb-20 text-start font-serif", children: t }),
+            /* @__PURE__ */ r("div", { className: "text-start overflow-auto", children: h }),
+            !c?.length && n && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { closeLabel: p, onClose: a }) }),
+            c
+          ]
+        }
+      )
     }
   ) });
 };
 export {
-  k as Popin
+  R as Popin
 };
 //# sourceMappingURL=Popin.js.map

package/molecules/Popin.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/v2/Button';\nimport clsx from 'clsx';\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  showCloseButton?: boolean;\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  Footer = 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={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          className,\n        )}\n      >\n        <div className=\"p-40 text-center max-h-[90vh] flex flex-col\">\n          {title && <div className=\"mt-12 text-h5 text-start font-serif\">{title}</div>}\n          <div className=\"mt-12 mb-40 last:mb-0 text-start overflow-auto\">{children}</div>\n          {Footer && (\n            <div>\n              <Footer closeLabel={closeLabel} onClose={onClose} />\n            </div>\n          )}\n        </div>\n      </div>\n    </Backdrop>\n  );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","wasVisibleRef","useRef","wasVisible","isLeaving","Backdrop","clsx","jsxs"],"mappings":";;;;;AAcA,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,GAeFG,IAA0D,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAN;AAAA,EACA,SAAAC;AAAA,EACA,WAAAM;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAASV;AACX,MAAM;AAEJ,QAAMW,IAAgBC,EAAOJ,CAAS,GAChCK,IAAaF,EAAc,SAC3BG,IAAY,CAACN,KAAaK;AAGhC,SAAAF,EAAc,UAAUH,GAEtB,gBAAAL,EAACY,GAAA,EAAS,WAAAP,GAAsB,SAAAN,GAC9B,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWa;AAAA,QACT;AAAA,QACA;AAAA,UACE,kBAAkBR;AAAA,UAClB,mBAAmB,CAACA,KAAaM;AAAA,UACjC,sBAAsB,CAACN,KAAa,CAACM;AAAA,QAAA;AAAA,QAEvCL;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,+CACZ,UAAA;AAAA,QAAAX,KAAS,gBAAAH,EAAC,OAAA,EAAI,WAAU,uCAAuC,UAAAG,GAAM;AAAA,QACtE,gBAAAH,EAAC,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAA,CAAS;AAAA,QACzEG,KACC,gBAAAP,EAAC,OAAA,EACC,4BAACO,GAAA,EAAO,YAAAT,GAAwB,SAAAC,GAAkB,EAAA,CACpD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } 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            className,\n          ),\n        )}\n      >\n        <div\n          className={twMerge(\n            clsx('text-center max-h-[90vh] flex flex-col p-40 gap-40', bodyClassName),\n          )}\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,UAEvCT;AAAA,QAAA;AAAA,MACF;AAAA,MAGF,UAAA,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF;AAAA,YACTC,EAAK,sDAAsDX,CAAa;AAAA,UAAA;AAAA,UAGzE,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/molecules/Portal/Portal.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+export interface PortalProps {
+    key?: string;
+    target?: string;
+    disabled?: boolean;
+}
+export declare function Portal({ children, target, disabled, key, }: PropsWithChildren<PortalProps>): import('react').ReactNode;
+/**
+ * Wrap a component onto a portal
+ */
+export declare function withPortal<Props extends PropsWithChildren>(target: string, Cmp: FunctionComponent<Props>): (props: Props) => import("react/jsx-runtime").JSX.Element;

package/molecules/Portal/Portal.js

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as i, useEffect as f, Children as d } from "react";
+import { createPortal as m } from "react-dom";
+const p = (t) => {
+  if (typeof document > "u")
+    return console.warn("createDivElementWithId() can not be run outside of a browser"), null;
+  const e = document.createElement("div");
+  return e.id = t, e.classList.add("relative", "isolate", "z-1"), document.body.append(e), e;
+};
+function C({
+  children: t,
+  target: e = "portal",
+  disabled: n = !1,
+  key: u
+}) {
+  const [a, s] = i(!1), [o, c] = i(null);
+  return f(() => {
+    if (s(!0), o === null) {
+      const r = document.getElementById(e) || p(e);
+      r && c(r);
+    }
+  }, [e]), a ? n ? t : d.count(t) && o ? m(t, o, u) : null : null;
+}
+function P(t, e) {
+  return (n) => /* @__PURE__ */ l(C, { target: t, children: /* @__PURE__ */ l(e, { ...n }) });
+}
+export {
+  C as Portal,
+  P as withPortal
+};
+//# sourceMappingURL=Portal.js.map

package/molecules/Portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":["../../../lib/molecules/Portal/Portal.tsx"],"sourcesContent":["import {\n  Children,\n  type FunctionComponent,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nconst createDivElementWithId = (id: string) => {\n  /* c8 ignore next 4 */\n  if (typeof document === 'undefined') {\n    console.warn('createDivElementWithId() can not be run outside of a browser');\n    return null;\n  }\n\n  const element = document.createElement('div');\n  element.id = id;\n  element.classList.add('relative', 'isolate', 'z-1');\n  document.body.append(element);\n\n  return element;\n};\n\nexport interface PortalProps {\n  key?: string;\n  target?: string;\n  disabled?: boolean;\n}\n\nexport function Portal({\n  children,\n  target = 'portal',\n  disabled = false,\n  key,\n}: PropsWithChildren<PortalProps>) {\n  const [isClient, setIsClient] = useState(false);\n  const [portalContainer, setPortalContainer] = useState<Element | null>(null);\n\n  useEffect(() => {\n    setIsClient(true);\n\n    if (portalContainer === null) {\n      const container = document.getElementById(target) || createDivElementWithId(target);\n\n      if (container) {\n        setPortalContainer(container);\n      }\n    }\n  }, [target]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  if (disabled) {\n    return children;\n  }\n\n  return Children.count(children) && portalContainer\n    ? createPortal(children, portalContainer, key)\n    : null;\n}\n\n/**\n * Wrap a component onto a portal\n */\nexport function withPortal<Props extends PropsWithChildren>(\n  target: string,\n  Cmp: FunctionComponent<Props>,\n) {\n  return (props: Props) => (\n    <Portal target={target}>\n      <Cmp {...props} />\n    </Portal>\n  );\n}\n"],"names":["createDivElementWithId","id","element","Portal","children","target","disabled","key","isClient","setIsClient","useState","portalContainer","setPortalContainer","useEffect","container","Children","createPortal","withPortal","Cmp","props","jsx"],"mappings":";;;AASA,MAAMA,IAAyB,CAACC,MAAe;AAE7C,MAAI,OAAO,WAAa;AACtB,mBAAQ,KAAK,8DAA8D,GACpE;AAGT,QAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,SAAAA,EAAQ,KAAKD,GACbC,EAAQ,UAAU,IAAI,YAAY,WAAW,KAAK,GAClD,SAAS,KAAK,OAAOA,CAAO,GAErBA;AACT;AAQO,SAASC,EAAO;AAAA,EACrB,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,KAAAC;AACF,GAAmC;AACjC,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAiBC,CAAkB,IAAIF,EAAyB,IAAI;AAc3E,SAZAG,EAAU,MAAM;AAGd,QAFAJ,EAAY,EAAI,GAEZE,MAAoB,MAAM;AAC5B,YAAMG,IAAY,SAAS,eAAeT,CAAM,KAAKL,EAAuBK,CAAM;AAElF,MAAIS,KACFF,EAAmBE,CAAS;AAAA,IAEhC;AAAA,EACF,GAAG,CAACT,CAAM,CAAC,GAENG,IAIDF,IACKF,IAGFW,EAAS,MAAMX,CAAQ,KAAKO,IAC/BK,EAAaZ,GAAUO,GAAiBJ,CAAG,IAC3C,OATK;AAUX;AAKO,SAASU,EACdZ,GACAa,GACA;AACA,SAAO,CAACC,MACN,gBAAAC,EAACjB,GAAA,EAAO,QAAAE,GACN,UAAA,gBAAAe,EAACF,GAAA,EAAK,GAAGC,EAAA,CAAO,EAAA,CAClB;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.5.1-beta.1",
+  "version": "1.6.0-beta.2",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -31,16 +31,16 @@
       "import": "./atoms/Icons/index.js",
       "default": "./atoms/Icons/index.js"
     },
-    "./atoms/Icons/svg": {
-      "types": "./atoms/Icons/svg/index.d.ts",
-      "import": "./atoms/Icons/svg/index.js",
-      "default": "./atoms/Icons/svg/index.js"
-    },
     "./atoms/Icons/svg-use": {
       "types": "./atoms/Icons/svg-use/index.d.ts",
       "import": "./atoms/Icons/svg-use/index.js",
       "default": "./atoms/Icons/svg-use/index.js"
     },
+    "./atoms/Icons/svg": {
+      "types": "./atoms/Icons/svg/index.d.ts",
+      "import": "./atoms/Icons/svg/index.js",
+      "default": "./atoms/Icons/svg/index.js"
+    },
     "./molecules/Tabs": {
       "types": "./molecules/Tabs/index.d.ts",
       "import": "./molecules/Tabs/index.js",
@@ -116,15 +116,17 @@
     "chromatic": "chromatic"
   },
   "dependencies": {
-    "@juggle/resize-observer": "^3.4.0",
-    "@use-gesture/react": "^10.2.26",
-    "clsx": "^2.1.1",
-    "date-fns": "^2.30.0",
-    "react-day-picker": "^8.10.0",
-    "react-hot-toast": "^2.4.1",
-    "react-use-measure": "^2.1.1",
-    "use-boop": "^1.1.1",
-    "use-resize-observer": "^9.1.0"
+    "@juggle/resize-observer": ">=3.4.0",
+    "@use-gesture/react": ">=10.2.26",
+    "clsx": ">=2.1.1",
+    "date-fns": ">=2.30.0",
+    "react-day-picker": ">=8.10.0",
+    "react-hot-toast": ">=2.4.1",
+    "react-transition-state": ">=2.3.2",
+    "react-use-measure": ">=2.1.1",
+    "use-boop": ">=1.1.1",
+    "use-resize-observer": ">=9.1.0",
+    "tailwind-merge": ">=3.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
@@ -180,6 +182,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "9.1.7",
     "svgtofont": "^4.2.0",