@clubmed/trident-ui 1.0.0-beta.10 → 1.0.0-beta.12

package/fonts/Utilities/tui-utilities.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717672588143'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717672588143#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717672588143") format("woff2"),
-  url("tui-utilities.woff?t=1717672588143") format("woff"),
-  url('tui-utilities.ttf?t=1717672588143') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717672588143#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1718805796822'); /* IE9*/
+  src: url('tui-utilities.eot?t=1718805796822#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1718805796822") format("woff2"),
+  url("tui-utilities.woff?t=1718805796822") format("woff"),
+  url('tui-utilities.ttf?t=1718805796822') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1718805796822#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717672588143'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717672588143#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717672588143") format("woff2"),
-  url("tui-utilities.woff?t=1717672588143") format("woff"),
-  url('tui-utilities.ttf?t=1717672588143') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717672588143#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1718805796822'); /* IE9*/
+  src: url('tui-utilities.eot?t=1718805796822#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1718805796822") format("woff2"),
+  url("tui-utilities.woff?t=1718805796822") format("woff"),
+  url('tui-utilities.ttf?t=1718805796822') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1718805796822#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717672588143'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717672588143#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717672588143") format("woff2"),
-  url("tui-utilities.woff?t=1717672588143") format("woff"),
-  url('tui-utilities.ttf?t=1717672588143') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717672588143#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1718805796822'); /* IE9*/
+  src: url('tui-utilities.eot?t=1718805796822#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1718805796822") format("woff2"),
+  url("tui-utilities.woff?t=1718805796822") format("woff"),
+  url('tui-utilities.ttf?t=1718805796822') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1718805796822#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717672588143'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717672588143#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717672588143") format("woff2"),
-  url("tui-utilities.woff?t=1717672588143") format("woff"),
-  url('tui-utilities.ttf?t=1717672588143') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717672588143#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1718805796822'); /* IE9*/
+  src: url('tui-utilities.eot?t=1718805796822#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1718805796822") format("woff2"),
+  url("tui-utilities.woff?t=1718805796822") format("woff"),
+  url('tui-utilities.ttf?t=1718805796822') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1718805796822#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717672588143'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717672588143#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717672588143") format("woff2"),
-  url("tui-utilities.woff?t=1717672588143") format("woff"),
-  url('tui-utilities.ttf?t=1717672588143') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717672588143#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1718805796822'); /* IE9*/
+  src: url('tui-utilities.eot?t=1718805796822#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1718805796822") format("woff2"),
+  url("tui-utilities.woff?t=1718805796822") format("woff"),
+  url('tui-utilities.ttf?t=1718805796822') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1718805796822#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/molecules/Forms/Checkboxes/Checkboxes.js

@@ -1,11 +1,11 @@
 import { jsx as I } from "react/jsx-runtime";
-import { useId as v, Children as N, isValidElement as g, cloneElement as h } from "react";
+import { useId as N, Children as v, isValidElement as g, cloneElement as h } from "react";
 import { useValue as k } from "../../../hooks/useValue.js";
 import { c as E } from "../../../index-Cu0xwYjD.js";
 function q(m) {
-  const i = v(), {
+  const i = N(), {
     id: r = i,
-    name: t = r,
+    name: s = r,
     children: u,
     value: c,
     defaultValue: p,
@@ -13,9 +13,9 @@ function q(m) {
     disabled: f,
     readOnly: b,
     tabIndex: V = 0,
-    ...s
-  } = m, { value: a, setValue: o } = k({
-    name: t,
+    ...t
+  } = m, { value: a, setValue: l } = k({
+    name: s,
     initialValue: c,
     formatter(e) {
       return e !== void 0 ? [].concat(e) : e;
@@ -23,20 +23,20 @@ function q(m) {
     defaultValue: p || [],
     onChange: d
   });
-  return /* @__PURE__ */ I("div", { ...s, className: s.className, role: "listbox", children: N.map(u, (e, l) => {
+  return /* @__PURE__ */ I("div", { ...t, className: t.className, role: "listbox", children: v.map(u, (e, o) => {
     if (g(e)) {
       const n = e.props.value;
       return h(e, {
         ...e.props,
-        name: t,
-        id: `${r}-${l}`,
+        name: s,
+        id: `${r}-${o}`,
         disabled: f,
         readOnly: b,
-        tabIndex: V + l + 1,
-        className: E("mb-12 last:mb-0", e.props),
+        tabIndex: V + o + 1,
+        className: E("mb-12 last:mb-0", e.props.className),
         checked: a.includes(n),
         onChange($, x) {
-          o(x === null ? a.filter((C) => C !== n) : a.concat(n));
+          l(x === null ? a.filter((C) => C !== n) : a.concat(n));
         }
       });
     }

package/molecules/Popin.d.ts

@@ -1,9 +1,17 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
-interface PopinProps {
-    title: string;
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+export type ClosePopinCallback = () => void;
+interface PopinFooterProps {
     closeLabel: string;
-    onClose: () => void;
+    onClose: ClosePopinCallback;
+}
+export interface PopinProps {
+    title: ReactNode;
+    closeLabel: string;
+    onClose: ClosePopinCallback;
     isVisible: boolean;
+    className?: string;
+    showCloseButton?: boolean;
+    Footer?: FunctionComponent<PopinFooterProps>;
 }
 export declare const Popin: FunctionComponent<PropsWithChildren<PopinProps>>;
 export {};

package/molecules/Popin.js

@@ -1,47 +1,51 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { c as m, b as d, d as p } from "../react-spring_web.modern-BPtZcx1z.js";
-import { Backdrop as f } from "./Backdrop.js";
-import { Button as h } from "./Buttons/Button.js";
-const g = ({
-  title: o,
-  children: c,
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { c as f, b as p, d as x } from "../react-spring_web.modern-BPtZcx1z.js";
+import { Backdrop as h } from "./Backdrop.js";
+import { Button as u } from "./Buttons/Button.js";
+import { c as v } from "../index-Cu0xwYjD.js";
+const b = ({ closeLabel: e, onClose: o }) => /* @__PURE__ */ t(
+  u,
+  {
+    theme: "black",
+    variant: "icon",
+    icon: "CrossDefault",
+    className: "mx-auto",
+    label: e,
+    onClick: o
+  }
+), j = ({
+  title: e,
+  children: o,
   closeLabel: n,
   onClose: a,
-  isVisible: t
+  isVisible: r,
+  className: s = "sm:w-360",
+  Footer: c = b
 }) => {
-  const i = m(t, {
+  const i = f(r, {
     from: { scale: 0.3, opacity: 0.3 },
     enter: { scale: 1, opacity: 1 },
     leave: { scale: 0, opacity: 0 },
-    config: t ? { tension: 120, friction: 20 } : p.gentle
+    config: r ? { tension: 120, friction: 20 } : x.gentle
   });
-  return /* @__PURE__ */ e(f, { isVisible: t, onClose: a, children: i(
-    (s, l) => l && /* @__PURE__ */ e(
-      d.div,
+  return /* @__PURE__ */ t(h, { isVisible: r, onClose: a, children: i(
+    (m, l) => l && /* @__PURE__ */ t(
+      p.div,
       {
-        className: "border-lightGrey rounded-16 sm:w-360 pointer-events-auto mx-20 w-full border bg-white",
-        style: s,
-        children: /* @__PURE__ */ r("div", { className: "space-y-40 p-40 text-center", children: [
-          /* @__PURE__ */ r("div", { className: "space-y-12 text-start", children: [
-            /* @__PURE__ */ e("div", { className: "text-h5 font-serif", children: o }),
-            c
-          ] }),
-          /* @__PURE__ */ e(
-            h,
-            {
-              theme: "black",
-              variant: "icon",
-              icon: "CrossDefault",
-              className: "mx-auto",
-              label: n,
-              onClick: a
-            }
-          )
+        className: v(
+          "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white",
+          s
+        ),
+        style: m,
+        children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
+          e && /* @__PURE__ */ t("div", { className: "mt-12 text-h5 text-start font-serif", children: e }),
+          /* @__PURE__ */ t("div", { className: "mt-12 mb-40 text-start overflow-auto", children: o }),
+          /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(c, { closeLabel: n, onClose: a }) })
         ] })
       }
     )
   ) });
 };
 export {
-  g as Popin
+  j as Popin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [