@clubmed/trident-ui 1.2.0 → 1.3.0-beta.10

package/molecules/Pagination.helper.d.ts

@@ -0,0 +1,48 @@
+export type Page = {
+    type: 'pageNumber';
+    value: number;
+} | {
+    type: 'ellipsis';
+} | {
+    type: 'previousButton';
+    disabled: boolean;
+} | {
+    type: 'nextButton';
+    disabled: boolean;
+};
+/**
+ * Checks for mobile devices only whether a page number should be followed by an ellipsis in a pagination component,
+ * based on the active page number.
+ *
+ * @param page {number} - The number of the current page.
+ * @param activePage {number} - The number of the active page.
+ * @param lastPage {number} - The last page.
+ * @returns {boolean} - Returns `true` if the page number should be followed by an ellipsis, otherwise returns `false`.
+ */
+export declare const showMobileEllipsis: (page: number, activePage: number, lastPage: number) => boolean;
+/**
+ * Get the active page number index from an array of pagination items.
+ *
+ * @param activePage - The active page number.
+ * @param paginationItems - An array of pagination objects containing items of "page" type or sometimes "ellipsis" type.
+ * @returns {number} - The index of the active page number in the paginationItems array, or -1 if not found.
+ */
+export declare const getActivePageIndex: (activePage: number, pagination: Page[]) => number;
+/**
+ * Generates a pagination object based on the current page and total page number.
+ *
+ * @param {number} activePage - The active page number.
+ * @param {number} totalPage - The total number of pages.
+ * @returns {PageArray} - An array of pagination items.
+ */
+export declare const generatePagination: (activePage: number, totalPage: number) => Page[];
+/**
+ * Determines whether a page button should be hidden on mobile devices in a pagination component
+ * based on the active page number.
+ *
+ * @param page - The page number currently being evaluated.
+ * @param activePage - The number of the currently active page.
+ * @param lastPage - The largest page number.
+ * @returns {boolean} - Returns `true` if the page button should be hidden, otherwise returns `false`.
+ */
+export declare const hidePageButtonForMobile: (page: number, activePage: number, lastPage: number) => boolean;

package/molecules/Pagination.helper.js

@@ -0,0 +1,30 @@
+const _ = (n, s, r) => r <= 3 ? !1 : n === 1 ? s > 3 : n === r ? s < r - 2 : !1, M = (n, s) => s.findIndex((r) => r.type === "pageNumber" && r.value === n), N = (n, s) => {
+  const r = [];
+  r.push({
+    type: "previousButton",
+    disabled: s <= 1 || n <= 1
+  });
+  for (let e = 1; e <= s; e++)
+    s <= 7 || e <= 2 || e < 3 && n < 5 || e >= s - 1 || Math.abs(e - n) <= 1 ? r.push({
+      type: "pageNumber",
+      value: e
+    }) : r[r.length - 1].type !== "ellipsis" && r.push({
+      type: "ellipsis"
+    });
+  return r.push({
+    type: "nextButton",
+    disabled: s <= 1 || n >= s
+  }), r;
+}, f = (n, s, r) => {
+  if (r <= 3 || n === 1 || n === s || n === r)
+    return !1;
+  const e = n === 2, E = n === r - 1, t = n === s - 1, u = n === s + 1;
+  return e && s === 1 || E && s === r || e && t ? !1 : !(u && E);
+};
+export {
+  N as generatePagination,
+  M as getActivePageIndex,
+  f as hidePageButtonForMobile,
+  _ as showMobileEllipsis
+};
+//# sourceMappingURL=Pagination.helper.js.map

package/molecules/Pagination.helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.helper.js","sources":["../../lib/molecules/Pagination.helper.ts"],"sourcesContent":["export type Page =\n  | {\n      type: 'pageNumber';\n      value: number;\n    }\n  | {\n      type: 'ellipsis';\n    }\n  | {\n      type: 'previousButton';\n      disabled: boolean;\n    }\n  | {\n      type: 'nextButton';\n      disabled: boolean;\n    };\n\n// The largest page number before splitting pagination items with ellipsis in desktop devices.\nconst DESKTOP_MAX_PAGE_BUTTON_ELEMENTS = 7;\nconst MOBILE_MAX_NUMBER = 3;\nconst MIN_PAGE_NUMBER = 1;\nconst MOBILE_CURRENT_OFFSET = 2;\n\n/**\n * Checks for mobile devices only whether a page number should be followed by an ellipsis in a pagination component,\n * based on the active page number.\n *\n * @param page {number} - The number of the current page.\n * @param activePage {number} - The number of the active page.\n * @param lastPage {number} - The last page.\n * @returns {boolean} - Returns `true` if the page number should be followed by an ellipsis, otherwise returns `false`.\n */\nexport const showMobileEllipsis = (page: number, activePage: number, lastPage: number) => {\n  if (lastPage <= MOBILE_MAX_NUMBER) {\n    return false;\n  }\n\n  if (page === MIN_PAGE_NUMBER) {\n    return activePage > MIN_PAGE_NUMBER + MOBILE_CURRENT_OFFSET;\n  }\n\n  if (page === lastPage) {\n    return activePage < lastPage - MOBILE_CURRENT_OFFSET;\n  }\n\n  return false;\n};\n\n/**\n * Get the active page number index from an array of pagination items.\n *\n * @param activePage - The active page number.\n * @param paginationItems - An array of pagination objects containing items of \"page\" type or sometimes \"ellipsis\" type.\n * @returns {number} - The index of the active page number in the paginationItems array, or -1 if not found.\n */\nexport const getActivePageIndex = (activePage: number, pagination: Page[]): number => {\n  return pagination.findIndex((page) => page.type === 'pageNumber' && page.value === activePage);\n};\n\n/**\n * Generates a pagination object based on the current page and total page number.\n *\n * @param {number} activePage - The active page number.\n * @param {number} totalPage - The total number of pages.\n * @returns {PageArray} - An array of pagination items.\n */\nexport const generatePagination = (activePage: number, totalPage: number): Page[] => {\n  const paginationItems: Page[] = [];\n\n  paginationItems.push({\n    type: 'previousButton',\n    disabled: totalPage <= 1 || activePage <= 1,\n  });\n\n  for (let page = 1; page <= totalPage; page++) {\n    if (\n      totalPage <= DESKTOP_MAX_PAGE_BUTTON_ELEMENTS ||\n      page <= 2 ||\n      (page < 3 && activePage < 5) ||\n      page >= totalPage - 1 ||\n      Math.abs(page - activePage) <= 1\n    ) {\n      paginationItems.push({\n        type: 'pageNumber',\n        value: page,\n      });\n    } else if (paginationItems[paginationItems.length - 1].type !== 'ellipsis') {\n      paginationItems.push({\n        type: 'ellipsis',\n      });\n    }\n  }\n\n  paginationItems.push({\n    type: 'nextButton',\n    disabled: totalPage <= 1 || activePage >= totalPage,\n  });\n\n  return paginationItems;\n};\n\n/**\n * Determines whether a page button should be hidden on mobile devices in a pagination component\n * based on the active page number.\n *\n * @param page - The page number currently being evaluated.\n * @param activePage - The number of the currently active page.\n * @param lastPage - The largest page number.\n * @returns {boolean} - Returns `true` if the page button should be hidden, otherwise returns `false`.\n */\nexport const hidePageButtonForMobile = (page: number, activePage: number, lastPage: number) => {\n  if (lastPage <= MOBILE_MAX_NUMBER) {\n    return false;\n  }\n\n  if (page === MIN_PAGE_NUMBER) {\n    return false;\n  }\n\n  if (page === activePage) {\n    return false;\n  }\n\n  if (page === lastPage) {\n    return false;\n  }\n\n  const justAfterFirstNumber = page === MIN_PAGE_NUMBER + 1;\n  const justBeforeLastNumber = page === lastPage - 1;\n\n  const justBeforeCurrentNumber = page === activePage - 1;\n  const justAfterCurrentNumber = page === activePage + 1;\n\n  if (justAfterFirstNumber && activePage === MIN_PAGE_NUMBER) {\n    return false;\n  }\n\n  if (justBeforeLastNumber && activePage === lastPage) {\n    return false;\n  }\n\n  if (justAfterFirstNumber && justBeforeCurrentNumber) {\n    return false;\n  }\n\n  return !(justAfterCurrentNumber && justBeforeLastNumber);\n};\n"],"names":["showMobileEllipsis","page","activePage","lastPage","getActivePageIndex","pagination","generatePagination","totalPage","paginationItems","hidePageButtonForMobile","justAfterFirstNumber","justBeforeLastNumber","justBeforeCurrentNumber","justAfterCurrentNumber"],"mappings":"AAgCO,MAAMA,IAAqB,CAACC,GAAcC,GAAoBC,MAC/DA,KAAY,IACP,KAGLF,MAAS,IACJC,IAAa,IAGlBD,MAASE,IACJD,IAAaC,IAAW,IAG1B,IAUIC,IAAqB,CAACF,GAAoBG,MAC9CA,EAAW,UAAU,CAACJ,MAASA,EAAK,SAAS,gBAAgBA,EAAK,UAAUC,CAAU,GAUlFI,IAAqB,CAACJ,GAAoBK,MAA8B;AACnF,QAAMC,IAA0B,CAAA;AAEhC,EAAAA,EAAgB,KAAK;AAAA,IACnB,MAAM;AAAA,IACN,UAAUD,KAAa,KAAKL,KAAc;AAAA,EAAA,CAC3C;AAED,WAASD,IAAO,GAAGA,KAAQM,GAAWN;AACpC,IACEM,KAAa,KACbN,KAAQ,KACPA,IAAO,KAAKC,IAAa,KAC1BD,KAAQM,IAAY,KACpB,KAAK,IAAIN,IAAOC,CAAU,KAAK,IAE/BM,EAAgB,KAAK;AAAA,MACnB,MAAM;AAAA,MACN,OAAOP;AAAA,IAAA,CACR,IACQO,EAAgBA,EAAgB,SAAS,CAAC,EAAE,SAAS,cAC9DA,EAAgB,KAAK;AAAA,MACnB,MAAM;AAAA,IAAA,CACP;AAIL,SAAAA,EAAgB,KAAK;AAAA,IACnB,MAAM;AAAA,IACN,UAAUD,KAAa,KAAKL,KAAcK;AAAA,EAAA,CAC3C,GAEMC;AACT,GAWaC,IAA0B,CAACR,GAAcC,GAAoBC,MAAqB;AAa7F,MAZIA,KAAY,KAIZF,MAAS,KAITA,MAASC,KAITD,MAASE;AACX,WAAO;AAGT,QAAMO,IAAuBT,MAAS,GAChCU,IAAuBV,MAASE,IAAW,GAE3CS,IAA0BX,MAASC,IAAa,GAChDW,IAAyBZ,MAASC,IAAa;AAUrD,SARIQ,KAAwBR,MAAe,KAIvCS,KAAwBT,MAAeC,KAIvCO,KAAwBE,IACnB,KAGF,EAAEC,KAA0BF;AACrC;"}

package/molecules/Pagination.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { c as l } from "../chunks/index.js";
+import { Fragment as k } from "react";
+import { generatePagination as y, showMobileEllipsis as b, hidePageButtonForMobile as N } from "./Pagination.helper.js";
+import { Button as x } from "./Buttons/Button.js";
+import { Icon as h } from "@clubmed/trident-icons";
+const j = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-controls": "page-content",
+    className: "text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex",
+    children: "…"
+  }
+) }, "desktop-ellipsis"), u = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-controls": "page-content",
+    className: "text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden",
+    children: "…"
+  }
+) }, "mobile-ellipsis"), E = ({
+  defaultPage: i,
+  buttonClassName: c = "md:mr-32",
+  buttonLabelClassName: o = "md:flex",
+  className: p,
+  labels: d = {},
+  onChange: n,
+  paginationFactory: v = y,
+  count: r,
+  ...f
+}) => {
+  const m = v(i, r);
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      ...f,
+      "data-name": "Pagination",
+      role: "navigation",
+      "aria-label": "pagination navigation",
+      className: l("flex justify-center border-t-sand", p),
+      children: /* @__PURE__ */ e("ul", { className: "mt-12 flex", children: m.map((t, a) => {
+        switch (t.type) {
+          case "pageNumber":
+            return /* @__PURE__ */ s(k, { children: [
+              t.value === r && b(t.value, i, r) && /* @__PURE__ */ e(u, {}),
+              /* @__PURE__ */ e(
+                "li",
+                {
+                  className: l("mr-2", {
+                    "hidden md:flex": N(t.value, i, r)
+                  }),
+                  children: t.value === i ? /* @__PURE__ */ e(
+                    x,
+                    {
+                      "aria-current": "page",
+                      className: "text-white",
+                      color: "black",
+                      variant: "circle",
+                      children: t.value.toString()
+                    }
+                  ) : /* @__PURE__ */ e(
+                    x,
+                    {
+                      className: l("size-48 items-center", {
+                        "mx-8 flex shrink-0 cursor-pointer justify-center self-start": a === m.length - 1
+                      }),
+                      onClick: () => n(t.value),
+                      color: "white",
+                      variant: "circle",
+                      children: t.value.toString()
+                    }
+                  )
+                }
+              ),
+              t.value === 1 && b(t.value, i, r) && /* @__PURE__ */ e(u, {})
+            ] }, `pagination-pageNumber-${a}`);
+          case "ellipsis":
+            return /* @__PURE__ */ e(j, {}, `pagination-ellipsis-${a}`);
+          case "previousButton":
+            return /* @__PURE__ */ e("li", { className: l(c), children: /* @__PURE__ */ s(
+              "button",
+              {
+                "data-action": "previous",
+                "aria-controls": "page-content",
+                "aria-label": `page ${i - 1}`,
+                className: l(
+                  "text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active",
+                  {
+                    "pointer-events-none disabled:text-grey": t.disabled
+                  }
+                ),
+                disabled: t.disabled,
+                onClick: () => n(i - 1),
+                type: "button",
+                children: [
+                  /* @__PURE__ */ e(h, { name: "ArrowDefaultLeft", width: "30px" }),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: l(
+                        "ml-4 hidden border-b",
+                        { "border-black": !t.disabled },
+                        o
+                      ),
+                      children: d.previous
+                    }
+                  )
+                ]
+              }
+            ) }, "pagination-labels.previous");
+          case "nextButton":
+            return /* @__PURE__ */ e("li", { className: l(c), children: /* @__PURE__ */ s(
+              "button",
+              {
+                "aria-controls": "page-content",
+                "aria-label": `page ${i + 1}`,
+                className: l(
+                  "text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active",
+                  {
+                    "pointer-events-none disabled:text-grey": t.disabled
+                  }
+                ),
+                "data-action": "next",
+                disabled: t.disabled,
+                onClick: () => n(i + 1),
+                type: "button",
+                children: [
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: l(
+                        "ml-4 hidden border-b",
+                        { "border-black": !t.disabled },
+                        o
+                      ),
+                      children: d.next
+                    }
+                  ),
+                  /* @__PURE__ */ e(h, { name: "ArrowDefaultRight", width: "30px" })
+                ]
+              }
+            ) }, "pagination-labels.next");
+          default:
+            return null;
+        }
+      }) })
+    }
+  );
+};
+export {
+  E as Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/molecules/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../lib/molecules/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from '@/molecules/Buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from '@/types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={classnames('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={classnames('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={classnames('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={classnames(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={classnames(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={classnames(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={classnames(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={classnames(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={classnames(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["EllipsisDesktop","jsx","EllipsisMobile","Pagination","defaultPage","buttonClassName","buttonLabelClassName","className","labels","onChange","paginationFactory","generatePagination","count","props","pagination","classnames","page","index","Fragment","showMobileEllipsis","hidePageButtonForMobile","Button","jsxs","Icon"],"mappings":"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"}

package/molecules/Popin.js

@@ -3,44 +3,44 @@ import { useTransition as f, config as p, animated as x } from "@react-spring/we
 import { Backdrop as h } from "./Backdrop.js";
 import { Button as u } from "./Buttons/Button.js";
 import { c as v } from "../chunks/index.js";
-const b = ({ closeLabel: e, onClose: o }) => /* @__PURE__ */ t(
+const b = ({ closeLabel: e, onClose: r }) => /* @__PURE__ */ t(
   u,
   {
-    theme: "black",
-    variant: "icon",
+    color: "black",
+    variant: "circle",
     icon: "CrossDefault",
     className: "mx-auto",
-    label: e,
-    onClick: o
+    "aria-label": e,
+    onClick: r
   }
 ), j = ({
   title: e,
-  children: o,
-  closeLabel: c,
+  children: r,
+  closeLabel: n,
   onClose: a,
-  isVisible: r,
+  isVisible: o,
   className: i = "sm:w-360",
-  Footer: n = b
+  Footer: c = b
 }) => {
-  const s = f(r, {
+  const s = f(o, {
     from: { scale: 0.3, opacity: 0.3 },
     enter: { scale: 1, opacity: 1 },
     leave: { scale: 0, opacity: 0 },
-    config: r ? { tension: 120, friction: 20 } : p.gentle
+    config: o ? { tension: 120, friction: 20 } : p.gentle
   });
-  return /* @__PURE__ */ t(h, { isVisible: r, onClose: a, children: s(
-    (m, l) => l && /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(h, { isVisible: o, onClose: a, children: s(
+    (l, m) => m && /* @__PURE__ */ t(
       x.div,
       {
         className: v(
           "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white",
           i
         ),
-        style: m,
+        style: l,
         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 last:mb-0 text-start overflow-auto", children: o }),
-          n && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { closeLabel: c, onClose: a }) })
+          /* @__PURE__ */ t("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: r }),
+          c && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(c, { closeLabel: n, onClose: a }) })
         ] })
       }
     )

package/molecules/Popin.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { animated, config, useTransition } from '@react-spring/web';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\ninterface PopinFooterProps {\n  closeLabel: string;\n  onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n  return (\n    <Button\n      theme=\"black\"\n      variant=\"icon\"\n      icon=\"CrossDefault\"\n      className=\"mx-auto\"\n      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  const transitions = useTransition(isVisible, {\n    from: { scale: 0.3, opacity: 0.3 },\n    enter: { scale: 1, opacity: 1 },\n    leave: { scale: 0, opacity: 0 },\n    config: isVisible ? { tension: 120, friction: 20 } : config.gentle,\n  });\n\n  return (\n    <Backdrop isVisible={isVisible} onClose={onClose}>\n      {transitions(\n        (style, item) =>\n          item && (\n            <animated.div\n              className={classnames(\n                'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white',\n                className,\n              )}\n              style={style}\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            </animated.div>\n          ),\n      )}\n    </Backdrop>\n  );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","transitions","useTransition","config","Backdrop","style","item","animated","classnames","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,OAAOH;AAAA,IACP,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;AACE,QAAAW,IAAcC,EAAcJ,GAAW;AAAA,IAC3C,MAAM,EAAE,OAAO,KAAK,SAAS,IAAI;AAAA,IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,IAC9B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,IAC9B,QAAQA,IAAY,EAAE,SAAS,KAAK,UAAU,GAAA,IAAOK,EAAO;AAAA,EAAA,CAC7D;AAGC,SAAA,gBAAAV,EAACW,GAAS,EAAA,WAAAN,GAAsB,SAAAN,GAC7B,UAAAS;AAAA,IACC,CAACI,GAAOC,MACNA,KACE,gBAAAb;AAAA,MAACc,EAAS;AAAA,MAAT;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAT;AAAA,QACF;AAAA,QACA,OAAAM;AAAA,QAEA,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,+CACZ,UAAA;AAAA,UAAAb,KAAU,gBAAAH,EAAA,OAAA,EAAI,WAAU,uCAAuC,UAAMG,GAAA;AAAA,UACrE,gBAAAH,EAAA,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAS,CAAA;AAAA,UACzEG,KACE,gBAAAP,EAAA,OAAA,EACC,4BAACO,GAAO,EAAA,YAAAT,GAAwB,SAAAC,EAAkB,CAAA,GACpD;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IACF;AAAA,EAGR,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { animated, config, useTransition } from '@react-spring/web';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\ninterface 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  const transitions = useTransition(isVisible, {\n    from: { scale: 0.3, opacity: 0.3 },\n    enter: { scale: 1, opacity: 1 },\n    leave: { scale: 0, opacity: 0 },\n    config: isVisible ? { tension: 120, friction: 20 } : config.gentle,\n  });\n\n  return (\n    <Backdrop isVisible={isVisible} onClose={onClose}>\n      {transitions(\n        (style, item) =>\n          item && (\n            <animated.div\n              className={classnames(\n                'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white',\n                className,\n              )}\n              style={style}\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            </animated.div>\n          ),\n      )}\n    </Backdrop>\n  );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","transitions","useTransition","config","Backdrop","style","item","animated","classnames","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;AACJ,QAAMW,IAAcC,EAAcJ,GAAW;AAAA,IAC3C,MAAM,EAAE,OAAO,KAAK,SAAS,IAAA;AAAA,IAC7B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAA;AAAA,IAC5B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAA;AAAA,IAC5B,QAAQA,IAAY,EAAE,SAAS,KAAK,UAAU,GAAA,IAAOK,EAAO;AAAA,EAAA,CAC7D;AAED,SACE,gBAAAV,EAACW,GAAA,EAAS,WAAAN,GAAsB,SAAAN,GAC7B,UAAAS;AAAA,IACC,CAACI,GAAOC,MACNA,KACE,gBAAAb;AAAA,MAACc,EAAS;AAAA,MAAT;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAT;AAAA,QAAA;AAAA,QAEF,OAAAM;AAAA,QAEA,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+CACZ,UAAA;AAAA,UAAAb,KAAS,gBAAAH,EAAC,OAAA,EAAI,WAAU,uCAAuC,UAAAG,GAAM;AAAA,UACtE,gBAAAH,EAAC,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAA,CAAS;AAAA,UACzEG,KACC,gBAAAP,EAAC,OAAA,EACC,4BAACO,GAAA,EAAO,YAAAT,GAAwB,SAAAC,GAAkB,EAAA,CACpD;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAGR;AAEJ;"}

package/molecules/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../lib/molecules/Spinner.tsx"],"sourcesContent":["import type { FunctionComponent } from 'react';\n\ninterface SpinnerProps {\n  /**\n   * className\n   */\n  className?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({ className }) => {\n  return (\n    <div className={className} aria-busy=\"true\" role=\"alert\" aria-live=\"polite\">\n      <svg className=\"w-full animate-spin\" viewBox=\"0 0 26 26\" fill=\"none\">\n        <circle cx=\"13\" cy=\"13\" r=\"12\" stroke=\"#CCCCCC\" strokeWidth=\"2\" />\n        <circle\n          className=\"animate-loaderDash origin-center\"\n          cx=\"13\"\n          cy=\"13\"\n          r=\"12\"\n          stroke=\"black\"\n          strokeWidth=\"2\"\n          strokeDasharray=\"38\"\n          strokeDashoffset=\"38\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"names":["Spinner","className","jsxs","jsx"],"mappings":";AASO,MAAMA,IAA2C,CAAC,EAAE,WAAAC,0BAEtD,OAAI,EAAA,WAAAA,GAAsB,aAAU,QAAO,MAAK,SAAQ,aAAU,UACjE,UAAA,gBAAAC,EAAC,SAAI,WAAU,uBAAsB,SAAQ,aAAY,MAAK,QAC5D,UAAA;AAAA,EAAC,gBAAAC,EAAA,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,WAAU,aAAY,IAAI,CAAA;AAAA,EAChE,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAG;AAAA,MACH,IAAG;AAAA,MACH,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,kBAAiB;AAAA,MACjB,eAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EACF,CAAA,EACF,CAAA;"}
+{"version":3,"file":"Spinner.js","sources":["../../lib/molecules/Spinner.tsx"],"sourcesContent":["import type { FunctionComponent } from 'react';\n\ninterface SpinnerProps {\n  /**\n   * className\n   */\n  className?: string;\n}\n\nexport const Spinner: FunctionComponent<SpinnerProps> = ({ className }) => {\n  return (\n    <div className={className} aria-busy=\"true\" role=\"alert\" aria-live=\"polite\">\n      <svg className=\"w-full animate-spin\" viewBox=\"0 0 26 26\" fill=\"none\">\n        <circle cx=\"13\" cy=\"13\" r=\"12\" stroke=\"#CCCCCC\" strokeWidth=\"2\" />\n        <circle\n          className=\"animate-loaderDash origin-center\"\n          cx=\"13\"\n          cy=\"13\"\n          r=\"12\"\n          stroke=\"black\"\n          strokeWidth=\"2\"\n          strokeDasharray=\"38\"\n          strokeDashoffset=\"38\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"names":["Spinner","className","jsxs","jsx"],"mappings":";AASO,MAAMA,IAA2C,CAAC,EAAE,WAAAC,0BAEtD,OAAA,EAAI,WAAAA,GAAsB,aAAU,QAAO,MAAK,SAAQ,aAAU,UACjE,UAAA,gBAAAC,EAAC,SAAI,WAAU,uBAAsB,SAAQ,aAAY,MAAK,QAC5D,UAAA;AAAA,EAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,WAAU,aAAY,IAAA,CAAI;AAAA,EAChE,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAG;AAAA,MACH,IAAG;AAAA,MACH,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,kBAAiB;AAAA,MACjB,eAAc;AAAA,IAAA;AAAA,EAAA;AAChB,EAAA,CACF,EAAA,CACF;"}

package/molecules/Tabs/Tab.d.ts

@@ -6,7 +6,7 @@ interface Props {
     /**
      * Tab Heading text
      */
-    label: string;
+    label?: string;
     /**
      * Tab heading index<br/>
      * _Can be **0** or **1** indexed_

package/molecules/Tabs/Tab.js

@@ -1,37 +1,37 @@
 "use client";
-import { jsx as u, jsxs as B } from "react/jsx-runtime";
-import { c as m } from "../../chunks/index.js";
-import { useRef as d, useEffect as I, useCallback as r } from "react";
-import { animated as _ } from "@react-spring/web";
-import { useActiveTab as z, useRegisterTabControl as G } from "./hooks/tabControl.js";
-import { getTheme as M } from "./theme.js";
-import { useSafeBoop as O } from "../../hooks/useSafeBoop.js";
-import { useKeyboardControls as P } from "../../hooks/useKeyboardControls.js";
-const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
-  className: b,
+import { jsx as d, jsxs as j } from "react/jsx-runtime";
+import { c as u } from "../../chunks/index.js";
+import { useRef as m, useEffect as B, useCallback as r } from "react";
+import { animated as I } from "@react-spring/web";
+import { useActiveTab as P, useTabsUid as U, useRegisterTabControl as z } from "./hooks/tabControl.js";
+import { getTheme as G } from "./theme.js";
+import { useSafeBoop as M } from "../../hooks/useSafeBoop.js";
+import { useKeyboardControls as O } from "../../hooks/useKeyboardControls.js";
+const f = "-z-1 rounded-pill absolute inset-0 duration-300", X = ({
+  className: y,
   label: a,
-  children: y,
-  value: e,
+  children: g,
+  value: o,
   onSelect: i,
-  as: g = "h2",
+  as: T = "h2",
   theme: h = "yellow"
 }) => {
-  const p = d(null), o = z(), t = G({ value: e, ref: p }), l = d(o), n = d(o === e);
-  n.current = o === e;
-  const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = M(h), [A, c] = O({ scale: 1.02 });
-  I(() => {
+  const p = m(null), e = P(), b = U(), t = z({ value: o, ref: p }), l = m(e), n = m(e === o);
+  n.current = e === o;
+  const x = { "--tab-index": o }, { textColor: C, textColorActive: w, bgColor: A } = G(h), [N, c] = M({ scale: 1.02 });
+  B(() => {
     var s;
-    l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
-  }, [a, e, i, o]);
-  const v = r(() => {
+    l.current !== e && o === e && ((s = p.current) == null || s.focus(), i == null || i({ value: o, label: a })), l.current !== e && (l.current = e);
+  }, [a, o, i, e]);
+  const _ = r(() => {
     n.current && c();
-  }, [c]), N = r(() => {
+  }, [c]), k = r(() => {
     t({ type: "start" });
-  }, [t]), k = r(() => {
-    t({ type: "end" });
   }, [t]), L = r(() => {
-    t({ type: "previous" });
+    t({ type: "end" });
   }, [t]), R = r(() => {
+    t({ type: "previous" });
+  }, [t]), v = r(() => {
     t({ type: "next" });
   }, [t]), E = r(() => {
     const s = document.documentElement.dir === "rtl";
@@ -39,63 +39,65 @@ const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
   }, [t]), K = r(() => {
     const s = document.documentElement.dir === "rtl";
     t({ type: s ? "previous" : "next" });
-  }, [t]), D = P({
-    activate: v,
-    start: N,
-    end: k,
-    up: L,
-    down: R,
+  }, [t]), $ = O({
+    activate: _,
+    start: k,
+    end: L,
+    up: R,
+    down: v,
     left: E,
     right: K
-  }), j = r(() => {
-    t({ type: "update", payload: e }), n.current && c();
-  }, [c, t, e]);
-  return /* @__PURE__ */ u(
-    _.div,
+  }), D = r(() => {
+    t({ type: "update", payload: o }), n.current && c();
+  }, [c, t, o]);
+  return /* @__PURE__ */ d(
+    I.div,
     {
+      id: `Tab_${o}_${b}`,
       "data-name": "Tab",
       ref: p,
       role: "tab",
       "aria-selected": n.current,
+      "aria-controls": `TabPanel_${o}_${b}`,
       tabIndex: n.current ? 0 : -1,
-      style: A,
-      className: m(
+      style: N,
+      className: u(
         "text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
-        b,
+        y,
         {
           [C]: !n.current,
-          [T]: n.current
+          [w]: n.current
         }
       ),
-      onKeyDown: D,
-      onClick: j,
-      children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
-        /* @__PURE__ */ u(
+      onKeyDown: $,
+      onClick: D,
+      children: /* @__PURE__ */ j(T, { className: "relative inline-block px-20 py-12", children: [
+        /* @__PURE__ */ d(
           "span",
           {
-            className: m(
+            className: u(
               "group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
               f
             )
           }
         ),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ d(
           "span",
           {
-            className: m(
+            className: u(
               "tab-focus-pill ease transition-transform/colors",
               f,
-              w
+              A
             ),
             style: x
           }
         ),
-        y ?? a
+        g ?? a
       ] })
     }
   );
 };
 export {
-  W as Tab
+  X as Tab
 };
 //# sourceMappingURL=Tab.js.map

package/molecules/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  type FunctionComponent,\n  useCallback,\n  useEffect,\n  useRef,\n  type PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab Heading text\n   */\n  label: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: Props['value']; label: Props['label'] }) => void;\n  /**\n   * Tab Heading theme\n   */\n  theme?: Theme;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  label,\n  children,\n  value,\n  onSelect,\n  as: TagName = 'h2',\n  theme = 'yellow',\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const activeTab = useActiveTab();\n  const dispatch = useRegisterTabControl({ value, ref });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  const pillStyle = { '--tab-index': value } as CSSProperties;\n  const { textColor, textColorActive, bgColor } = getTheme(theme);\n  const [boopStyle, boopTrigger] = useSafeBoop({ scale: 1.02 });\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const activate = useCallback(() => {\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger]);\n\n  const start = useCallback(() => {\n    dispatch({ type: 'start' });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: 'end' });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: 'previous' });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: 'next' });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'next' : 'previous' });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'previous' : 'next' });\n  }, [dispatch]);\n\n  const handleKeyDown = useKeyboardControls({\n    activate,\n    start,\n    end,\n    up,\n    down,\n    left,\n    right,\n  });\n\n  const handleClick = useCallback(() => {\n    dispatch({ type: 'update', payload: value });\n\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger, dispatch, value]);\n\n  return (\n    <animated.div\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      tabIndex={isActive.current ? 0 : -1}\n      style={boopStyle}\n      className={classnames(\n        'text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none',\n        className,\n        {\n          [textColor]: !isActive.current,\n          [textColorActive]: isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName className=\"relative inline-block px-20 py-12\">\n        <span\n          className={classnames(\n            'group-hover:bg-pearl group-focus-within:bg-pearl transition-colors',\n            BACKGROUND_PILL_CLASSNAME,\n          )}\n        />\n        <span\n          className={classnames(\n            'tab-focus-pill ease transition-transform/colors',\n            BACKGROUND_PILL_CLASSNAME,\n            bgColor,\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </animated.div>\n  );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","className","label","children","value","onSelect","TagName","theme","ref","useRef","activeTab","useActiveTab","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","boopStyle","boopTrigger","useSafeBoop","useEffect","_a","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  type FunctionComponent,\n  useCallback,\n  useEffect,\n  useRef,\n  type PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab Heading text\n   */\n  label?: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: Props['value']; label: Props['label'] }) => void;\n  /**\n   * Tab Heading theme\n   */\n  theme?: Theme;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  label,\n  children,\n  value,\n  onSelect,\n  as: TagName = 'h2',\n  theme = 'yellow',\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const activeTab = useActiveTab();\n  const uid = useTabsUid();\n  const dispatch = useRegisterTabControl({ value, ref });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  const pillStyle = { '--tab-index': value } as CSSProperties;\n  const { textColor, textColorActive, bgColor } = getTheme(theme);\n  const [boopStyle, boopTrigger] = useSafeBoop({ scale: 1.02 });\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const activate = useCallback(() => {\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger]);\n\n  const start = useCallback(() => {\n    dispatch({ type: 'start' });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: 'end' });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: 'previous' });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: 'next' });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'next' : 'previous' });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'previous' : 'next' });\n  }, [dispatch]);\n\n  const handleKeyDown = useKeyboardControls({\n    activate,\n    start,\n    end,\n    up,\n    down,\n    left,\n    right,\n  });\n\n  const handleClick = useCallback(() => {\n    dispatch({ type: 'update', payload: value });\n\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger, dispatch, value]);\n\n  return (\n    <animated.div\n      id={`Tab_${value}_${uid}`}\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      aria-controls={`TabPanel_${value}_${uid}`}\n      tabIndex={isActive.current ? 0 : -1}\n      style={boopStyle}\n      className={classnames(\n        'text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none',\n        className,\n        {\n          [textColor]: !isActive.current,\n          [textColorActive]: isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName className=\"relative inline-block px-20 py-12\">\n        <span\n          className={classnames(\n            'group-hover:bg-pearl group-focus-within:bg-pearl transition-colors',\n            BACKGROUND_PILL_CLASSNAME,\n          )}\n        />\n        <span\n          className={classnames(\n            'tab-focus-pill ease transition-transform/colors',\n            BACKGROUND_PILL_CLASSNAME,\n            bgColor,\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </animated.div>\n  );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","className","label","children","value","onSelect","TagName","theme","ref","useRef","activeTab","useActiveTab","uid","useTabsUid","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","boopStyle","boopTrigger","useSafeBoop","useEffect","_a","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":"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"}

package/molecules/Tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  type FunctionComponent,\n  type PropsWithChildren,\n} from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n    from: { scrollLeft: 0 },\n  }));\n\n  useEffect(() => {\n    if (!currentControl?.current) {\n      return;\n    }\n\n    const tabLeft = currentControl.current.getBoundingClientRect().left;\n    const scrollLeft = containerRef.current!.scrollLeft;\n    const spacerWidth = spacerRef.current!.offsetWidth;\n\n    scrollApi.start({\n      to: {\n        scrollLeft: scrollLeft + tabLeft - spacerWidth,\n      },\n    });\n  }, [scrollLeft, currentControl, scrollApi]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <animated.div\n      ref={containerRef}\n      data-name=\"TabsHeader\"\n      className={classnames(\n        'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n        className,\n      )}\n      scrollLeft={scrollLeft}\n    >\n      <div role=\"tablist\" className={classnames('flex flex-row')} style={style}>\n        <div\n          ref={spacerRef}\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </animated.div>\n  );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAoB,GAEnD,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAE;AAAA,EACtB,EAAA;AAEF,EAAAC,EAAU,MAAM;AACV,QAAA,EAACL,KAAA,QAAAA,EAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MACrC;AAAA,IAAA,CACD;AAAA,EACA,GAAA,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAEpC,QAAAK,IAAQ,EAAE,gBAAgBT;AAG9B,SAAA,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MACF;AAAA,MACA,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QACH;AAAA,QACCC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  type FunctionComponent,\n  type PropsWithChildren,\n} from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n    from: { scrollLeft: 0 },\n  }));\n\n  useEffect(() => {\n    if (!currentControl?.current) {\n      return;\n    }\n\n    const tabLeft = currentControl.current.getBoundingClientRect().left;\n    const scrollLeft = containerRef.current!.scrollLeft;\n    const spacerWidth = spacerRef.current!.offsetWidth;\n\n    scrollApi.start({\n      to: {\n        scrollLeft: scrollLeft + tabLeft - spacerWidth,\n      },\n    });\n  }, [scrollLeft, currentControl, scrollApi]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <animated.div\n      ref={containerRef}\n      data-name=\"TabsHeader\"\n      className={classnames(\n        'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n        className,\n      )}\n      scrollLeft={scrollLeft}\n    >\n      <div role=\"tablist\" className={classnames('flex flex-row')} style={style}>\n        <div\n          ref={spacerRef}\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </animated.div>\n  );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAA,GAE/B,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAA;AAAA,EAAE,EACtB;AAEF,EAAAC,EAAU,MAAM;AACd,QAAI,EAACL,KAAA,QAAAA,EAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MAAA;AAAA,IACrC,CACD;AAAA,EACH,GAAG,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAE1C,QAAMK,IAAQ,EAAE,gBAAgBT,EAAA;AAEhC,SACE,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MAAA;AAAA,MAEF,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}