@clubmed/trident-ui 1.0.0-alpha.44 → 1.0.0-alpha.45

package/fonts/Transports/tui-transports.scss

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

package/fonts/Transports/tui-transports.styl

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

package/fonts/Utilities/tui-utilities.css

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

package/hooks/__mocks__/useSafeBoop.d.ts

@@ -0,0 +1,4 @@
+export declare const useSafeBoop: () => (import("@vitest/spy").Mock<any, any> | {
+    '--mocked-transform': string;
+    transform: string;
+})[];

package/hooks/__mocks__/useSafeBoop.js

@@ -0,0 +1,10 @@
+const r = () => [
+  {
+    "--mocked-transform": "scale3D(1, 1, 1)",
+    transform: "var(--mocked-transform)"
+  },
+  vi.fn()
+];
+export {
+  r as useSafeBoop
+};

package/hooks/keyboard.constants.d.ts

@@ -0,0 +1,38 @@
+export declare const enum CODE {
+    ENTER = "Enter",
+    ESCAPE = "Escape",
+    ARROW_LEFT = "ArrowLeft",
+    ARROW_UP = "ArrowUp",
+    ARROW_RIGHT = "ArrowRight",
+    ARROW_DOWN = "ArrowDown",
+    SPACE = "Space",
+    END = "End",
+    HOME = "Home"
+}
+export declare const enum KEY {
+    ENTER = "Enter",
+    ESCAPE = "Escape",
+    ARROW_LEFT = "ArrowLeft",
+    ARROW_UP = "ArrowUp",
+    ARROW_RIGHT = "ArrowRight",
+    ARROW_DOWN = "ArrowDown",
+    END = "End",
+    HOME = "Home",
+    SPACE = " ",
+    /**
+     * @deprecated
+     * Used by old browers, see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
+     */
+    SPACEBAR = "Spacebar"
+}
+export declare const enum KEY_CODE {
+    ENTER = 13,
+    ESCAPE = 27,
+    ARROW_LEFT = 37,
+    ARROW_UP = 38,
+    ARROW_RIGHT = 39,
+    ARROW_DOWN = 40,
+    SPACE = 32,
+    END = 35,
+    HOME = 36
+}

package/hooks/keyboard.constants.js

@@ -0,0 +1,6 @@
+var A = /* @__PURE__ */ ((R) => (R.ENTER = "Enter", R.ESCAPE = "Escape", R.ARROW_LEFT = "ArrowLeft", R.ARROW_UP = "ArrowUp", R.ARROW_RIGHT = "ArrowRight", R.ARROW_DOWN = "ArrowDown", R.SPACE = "Space", R.END = "End", R.HOME = "Home", R))(A || {}), r = /* @__PURE__ */ ((R) => (R.ENTER = "Enter", R.ESCAPE = "Escape", R.ARROW_LEFT = "ArrowLeft", R.ARROW_UP = "ArrowUp", R.ARROW_RIGHT = "ArrowRight", R.ARROW_DOWN = "ArrowDown", R.END = "End", R.HOME = "Home", R.SPACE = " ", R.SPACEBAR = "Spacebar", R))(r || {}), W = /* @__PURE__ */ ((R) => (R[R.ENTER = 13] = "ENTER", R[R.ESCAPE = 27] = "ESCAPE", R[R.ARROW_LEFT = 37] = "ARROW_LEFT", R[R.ARROW_UP = 38] = "ARROW_UP", R[R.ARROW_RIGHT = 39] = "ARROW_RIGHT", R[R.ARROW_DOWN = 40] = "ARROW_DOWN", R[R.SPACE = 32] = "SPACE", R[R.END = 35] = "END", R[R.HOME = 36] = "HOME", R))(W || {});
+export {
+  A as CODE,
+  r as KEY,
+  W as KEY_CODE
+};

package/hooks/useKeyboardControls.d.ts

@@ -0,0 +1,12 @@
+import type { KeyboardEvent } from 'react';
+interface Options {
+    up?: VoidFunction;
+    down?: VoidFunction;
+    left?: VoidFunction;
+    right?: VoidFunction;
+    start?: VoidFunction;
+    end?: VoidFunction;
+    activate?: VoidFunction;
+}
+export declare const useKeyboardControls: ({ up, down, left, right, start, end, activate, }: Options) => (event: KeyboardEvent<HTMLDivElement>) => void;
+export {};

package/hooks/useKeyboardControls.js

@@ -0,0 +1,29 @@
+import { CODE as o, KEY as f } from "./keyboard.constants.js";
+const D = (u) => u.key === f.ENTER || u.key === f.SPACE || u.key === f.SPACEBAR || u.code === o.ENTER || u.code === o.SPACE, e = () => {
+}, n = ({
+  up: u = e,
+  down: t = e,
+  left: c = e,
+  right: d = e,
+  start: E = e,
+  end: R = e,
+  activate: i = e
+}) => (r) => {
+  if (D(r))
+    return i();
+  if (r.code === o.HOME)
+    return r.preventDefault(), E();
+  if (r.code === o.END)
+    return r.preventDefault(), R();
+  if (r.code === o.ARROW_UP)
+    return r.preventDefault(), u();
+  if (r.code === o.ARROW_DOWN)
+    return r.preventDefault(), t();
+  if (r.code === o.ARROW_RIGHT)
+    return r.preventDefault(), d();
+  if (r.code === o.ARROW_LEFT)
+    return r.preventDefault(), c();
+};
+export {
+  n as useKeyboardControls
+};

package/hooks/useSafeBoop.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import useBoop from 'use-boop';
+type Args = Parameters<typeof useBoop>[0];
+export declare const useSafeBoop: (boopArgs: Args) => [CSSProperties, () => void];
+export {};

package/hooks/useSafeBoop.js

@@ -0,0 +1,67 @@
+import { useState as f, useCallback as H, useEffect as c } from "react";
+import { a as J } from "../react-spring_web.modern-BPtZcx1z.js";
+var K = "(prefers-reduced-motion: no-preference)", N = function() {
+  return typeof window > "u" ? !0 : !window.matchMedia(K).matches;
+}, O = function() {
+  var r = f(N), e = r[0], t = r[1];
+  return c(function() {
+    var n = window.matchMedia("(prefers-reduced-motion: no-preference)"), o = function(a) {
+      t(!a.matches);
+    };
+    return n.addEventListener("change", o), function() {
+      return n.removeEventListener("change", o);
+    };
+  }, []), e;
+}, V = function(r) {
+  var e = r === void 0 ? {} : r, t = e.x, n = t === void 0 ? 0 : t, o = e.y, a = o === void 0 ? 0 : o, v = e.z, S = v === void 0 ? 0 : v, g = e.rotation, b = g === void 0 ? 0 : g, m = e.rx, C = m === void 0 ? 0 : m, p = e.ry, L = p === void 0 ? 0 : p, l = e.rz, Z = l === void 0 ? b : l, w = e.scale, d = w === void 0 ? 1 : w, _ = e.sx, Q = _ === void 0 ? d || 1 : _, x = e.sy, j = x === void 0 ? d || 1 : x, y = e.sz, q = y === void 0 ? d || 1 : y, k = e.skewX, P = k === void 0 ? 0 : k, h = e.skewY, U = h === void 0 ? 0 : h, T = e.timing, z = T === void 0 ? 150 : T, D = e.springConfig, A = D === void 0 ? {
+    tension: 300,
+    friction: 10
+  } : D, M = e.delay, Y = M === void 0 ? 0 : M, i = O(), I = f(!1), s = I[0], X = I[1], B = f(!1), E = B[0], R = B[1], F = J(i ? {} : {
+    transform: s ? "translate3D(" + n + "px, " + a + "px, " + S + `px)
+         rotateX(` + C + "deg) rotateY(" + L + "deg) rotateZ(" + Z + `deg)
+         scale3D(` + Q + "," + j + "," + q + `)
+         skew(` + P + "deg, " + U + "deg)" : `translate3D(0px, 0px, 0px)
+         rotateX(0deg) rotateY(0deg) rotateZ(0deg)
+         scale3D(1, 1, 1)
+         skew(0deg, 0deg)`,
+    config: A,
+    immediate: i
+  }), G = H(function() {
+    i || R(!0);
+  }, [i]);
+  return c(function() {
+    if (E) {
+      var u = window.setTimeout(function() {
+        X(!0), R(!1);
+      }, Y);
+      return function() {
+        return window.clearTimeout(u);
+      };
+    }
+  }, [E, Y]), c(function() {
+    if (s) {
+      var u = window.setTimeout(function() {
+        return X(!1);
+      }, z);
+      return function() {
+        return window.clearTimeout(u);
+      };
+    }
+  }, [s, z]), [F, G];
+};
+const ee = (r) => {
+  const [{ transform: e }, t] = V(r);
+  return [
+    {
+      "--transform": e || `translate3D(0px, 0px, 0px)
+         rotateX(0deg) rotateY(0deg) rotateZ(0deg)
+         scale3D(1, 1, 1)
+         skew(0deg, 0deg)`,
+      transform: "var(--transform)"
+    },
+    t
+  ];
+};
+export {
+  ee as useSafeBoop
+};

package/molecules/Tabs/Body.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface Props {
+    className?: string;
+}
+export declare const TabsBody: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/molecules/Tabs/Body.js

@@ -0,0 +1,6 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as a } from "../../index-Cu0xwYjD.js";
+const m = ({ className: o, children: r }) => /* @__PURE__ */ s("div", { "data-name": "TabsBody", className: a("grid grid-rows-1 overflow-hidden", o), children: r });
+export {
+  m as TabsBody
+};

package/molecules/Tabs/Header.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent, type PropsWithChildren } from 'react';
+interface Props {
+    className?: string;
+    /**
+     * Remove filler placeholders
+     */
+    constrained?: boolean;
+}
+export declare const TabsHeader: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/molecules/Tabs/Header.js

@@ -0,0 +1,60 @@
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+import { c as r } from "../../index-Cu0xwYjD.js";
+import { useRef as f, useEffect as v } from "react";
+import { a as b, b as h } from "../../react-spring_web.modern-BPtZcx1z.js";
+import { useActiveTabControl as L } from "./hooks/tabControl.js";
+const k = ({
+  className: n,
+  constrained: s = !1,
+  children: i
+}) => {
+  const t = f(null), a = f(null), [m, e] = L(), [{ scrollLeft: c }, o] = b(() => ({
+    from: { scrollLeft: 0 }
+  }));
+  v(() => {
+    if (!(e != null && e.current))
+      return;
+    const p = e.current.getBoundingClientRect().left, u = t.current.scrollLeft, d = a.current.offsetWidth;
+    o.start({
+      to: {
+        scrollLeft: u + p - d
+      }
+    });
+  }, [c, e, o]);
+  const x = { "--active-tab": m };
+  return /* @__PURE__ */ l(
+    h.div,
+    {
+      ref: t,
+      "data-name": "TabsHeader",
+      className: r(
+        "scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
+        n
+      ),
+      scrollLeft: c,
+      children: /* @__PURE__ */ w("div", { role: "tablist", className: r("flex flex-row"), style: x, children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            ref: a,
+            className: r("shrink-0", {
+              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !s
+            })
+          }
+        ),
+        i,
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: r("shrink-0", {
+              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !s
+            })
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  k as TabsHeader
+};

package/molecules/Tabs/Heading.d.ts

@@ -0,0 +1,33 @@
+import { FunctionComponent, type PropsWithChildren } from 'react';
+import { Theme } from './theme';
+import './Heading.css';
+interface Props {
+    className?: string;
+    /**
+     * Tab Heading text
+     */
+    label: string;
+    /**
+     * Tab heading index<br/>
+     * _Can be **0** or **1** indexed_
+     */
+    value: number;
+    /**
+     * on tab select handler
+     */
+    onSelect?: (context: {
+        value: Props['value'];
+        label: Props['label'];
+    }) => void;
+    /**
+     * Tab Heading theme
+     */
+    theme?: Theme;
+    /**
+     * Heading type
+     * _default: **h2**_
+     */
+    as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+}
+export declare const TabsHeading: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/molecules/Tabs/Heading.js

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

package/molecules/Tabs/Panel.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface Props {
+    className?: string;
+    /**
+     * Tab panel index<br/>
+     * _Can be **0** or **1** indexed_
+     */
+    value: number;
+    /**
+     * on panel select handler
+     */
+    onSelect?: (context: {
+        value: Props['value'];
+    }) => void;
+}
+export declare const TabsPanel: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/molecules/Tabs/Panel.js

@@ -0,0 +1,58 @@
+import { jsx as p } from "react/jsx-runtime";
+import { c as d } from "../../index-Cu0xwYjD.js";
+import { useRef as f, useEffect as l } from "react";
+import { a as b, b as u } from "../../react-spring_web.modern-BPtZcx1z.js";
+import { useActiveTab as y } from "./hooks/tabControl.js";
+const r = {
+  opacity: 0,
+  pointerEvents: "none",
+  display: "none"
+}, n = {
+  opacity: 1,
+  pointerEvents: "auto",
+  display: "block"
+}, R = ({
+  value: a,
+  className: i,
+  onSelect: s,
+  children: c
+}) => {
+  const o = f(!1), t = y() === a, [m, e] = b(() => ({
+    from: t ? n : r
+  }));
+  return l(() => {
+    if (!o.current) {
+      o.current = !0;
+      return;
+    }
+    e.start({
+      to: {
+        ...t ? n : r,
+        display: "block"
+      },
+      onRest: () => {
+        e.start({
+          to: { display: t ? "block" : "none" },
+          immediate: !0
+        });
+      }
+    }), t && (s == null || s({ value: a }));
+  }, [t, e, a, s]), /* @__PURE__ */ p(
+    u.div,
+    {
+      "data-name": "Tab",
+      style: m,
+      role: "tabpanel",
+      "aria-hidden": !t,
+      tabIndex: t ? 0 : -1,
+      className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
+        "z-0": !t,
+        "z-1": t
+      }),
+      children: c
+    }
+  );
+};
+export {
+  R as TabsPanel
+};

package/molecules/Tabs/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';
+import { TabsProvider } from './context/TabControl';
+type ProviderProps = ComponentProps<typeof TabsProvider>;
+interface Props extends ProviderProps {
+    className?: string;
+    /**
+     * Shrink the spacing between tabs and panels
+     */
+    compacted?: boolean;
+}
+export declare const Tabs: FunctionComponent<PropsWithChildren<Props>>;
+export {};