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

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 {};

package/molecules/Tabs/Tabs.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as t } from "../../index-Cu0xwYjD.js";
+import { TabsProvider as c } from "./context/TabControl.js";
+const p = ({
+  className: s,
+  compacted: r = !1,
+  selected: e,
+  min: m,
+  max: o,
+  children: l
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: t("flex flex-col", s, { "sm:gap-y-20": !r }),
+    "data-name": "Tabs",
+    children: /* @__PURE__ */ a(c, { selected: e, min: m, max: o, children: l })
+  }
+);
+export {
+  p as Tabs
+};

package/molecules/Tabs/context/TabControl.d.ts

@@ -0,0 +1,50 @@
+import { Dispatch, type FunctionComponent, type PropsWithChildren, type RefObject } from 'react';
+type TabsAction = {
+    type: 'update';
+    payload: number;
+} | {
+    type: 'next';
+} | {
+    type: 'previous';
+} | {
+    type: 'start';
+} | {
+    type: 'end';
+};
+type ControlAction<T extends HTMLElement = HTMLElement> = {
+    type: 'register';
+    payload: {
+        value: number;
+        ref: RefObject<T>;
+    };
+} | {
+    type: 'unregister';
+    payload: {
+        value: number;
+    };
+};
+interface ActiveTab {
+    value: number;
+}
+export declare const ActiveTabContext: import("react").Context<ActiveTab>;
+interface TabRefs<T extends HTMLElement = HTMLElement> {
+    refs: Map<number, RefObject<T>>;
+}
+export declare const TabRefsContext: import("react").Context<TabRefs<HTMLElement>>;
+interface TabControl<T extends HTMLElement = HTMLElement> {
+    dispatch: Dispatch<TabsAction>;
+    register: (value: Extract<ControlAction<T>, {
+        type: 'register';
+    }>['payload']['value'], ref: Extract<ControlAction<T>, {
+        type: 'register';
+    }>['payload']['ref']) => void;
+    unregister: (value: number) => void;
+}
+export declare const TabControlContext: import("react").Context<TabControl<HTMLElement>>;
+interface ProviderProps {
+    selected?: number;
+    min?: number;
+    max: number;
+}
+export declare const TabsProvider: FunctionComponent<PropsWithChildren<ProviderProps>>;
+export {};

package/molecules/Tabs/context/TabControl.js

@@ -0,0 +1,82 @@
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as c, useReducer as v, useMemo as u, useCallback as x } from "react";
+const C = (e) => {
+  const r = Math.max(Math.min(e.min, e.max), 0), t = Math.max(Math.min(e.max, 1 / 0), r);
+  return {
+    min: r,
+    max: t,
+    clamp: (n) => Math.max(Math.min(n, t), r)
+  };
+}, g = (e) => {
+  const { clamp: r } = C(e);
+  return r(e.value);
+}, P = (e) => {
+  const { min: r, max: t, clamp: n } = C(e);
+  return (a, o) => {
+    switch (o.type) {
+      case "update":
+        return n(o.payload);
+      case "next":
+        return a + 1 <= t ? a + 1 : r;
+      case "previous":
+        return a - 1 >= r ? a - 1 : t;
+      case "start":
+        return r;
+      case "end":
+        return t;
+    }
+  };
+}, R = (e, r) => {
+  switch (r.type) {
+    case "register":
+      return new Map(e.set(r.payload.value, r.payload.ref));
+    case "unregister":
+      return e.delete(r.payload.value) ? new Map(e) : e;
+  }
+}, h = c({ value: 0 });
+h.displayName = "ActiveTabContext";
+const y = c({
+  refs: /* @__PURE__ */ new Map()
+});
+y.displayName = "TabRefsContext";
+const b = c({
+  dispatch: () => {
+    console.warn("Tab Controller Context dispatch used outside of Provider");
+  },
+  register: () => {
+    console.warn("Tab Controller Context register used outside of Provider");
+  },
+  unregister: () => {
+    console.warn("Tab Controller Context unregister used outside of Provider");
+  }
+});
+b.displayName = "TabControlContext";
+const A = ({
+  min: e = 0,
+  max: r,
+  selected: t = e,
+  children: n
+}) => {
+  const [a, o] = v(
+    P({ min: e, max: r }),
+    { value: t, min: e, max: r },
+    g
+  ), [i, d] = v(R, /* @__PURE__ */ new Map()), M = u(() => ({ value: a }), [a]), f = u(() => ({ refs: i }), [i]), p = x(
+    (s, w) => {
+      d({ type: "register", payload: { value: s, ref: w } });
+    },
+    []
+  ), m = x(
+    (s) => {
+      d({ type: "unregister", payload: { value: s } });
+    },
+    []
+  ), T = u(() => ({ dispatch: o, register: p, unregister: m }), [p, m]);
+  return /* @__PURE__ */ l(h.Provider, { value: M, children: /* @__PURE__ */ l(y.Provider, { value: f, children: /* @__PURE__ */ l(b.Provider, { value: T, children: n }) }) });
+};
+export {
+  h as ActiveTabContext,
+  b as TabControlContext,
+  y as TabRefsContext,
+  A as TabsProvider
+};

package/molecules/Tabs/hooks/tabControl.d.ts

@@ -0,0 +1,33 @@
+import { type RefObject } from 'react';
+export declare const useActiveTab: () => number;
+export declare const useTabDispatch: () => import("react").Dispatch<{
+    type: "update";
+    payload: number;
+} | {
+    type: "next";
+} | {
+    type: "previous";
+} | {
+    type: "start";
+} | {
+    type: "end";
+}>;
+interface Props<T extends HTMLElement> {
+    value: number;
+    ref: RefObject<T>;
+}
+export declare const useRegisterTabControl: <T extends HTMLElement>({ value, ref }: Props<T>) => import("react").Dispatch<{
+    type: "update";
+    payload: number;
+} | {
+    type: "next";
+} | {
+    type: "previous";
+} | {
+    type: "start";
+} | {
+    type: "end";
+}>;
+export declare const useTabControl: () => Map<number, RefObject<HTMLElement>>;
+export declare const useActiveTabControl: () => readonly [number, RefObject<HTMLElement> | undefined];
+export {};

package/molecules/Tabs/hooks/tabControl.js

@@ -0,0 +1,30 @@
+import { useContext as e, useEffect as a } from "react";
+import { ActiveTabContext as s, TabControlContext as c, TabRefsContext as u } from "../context/TabControl.js";
+const T = () => {
+  const { value: t } = e(s);
+  return t;
+}, f = () => {
+  const { dispatch: t } = e(c);
+  return t;
+}, l = ({ value: t, ref: r }) => {
+  const { dispatch: i, register: n, unregister: o } = e(c);
+  return a(() => {
+    if (r.current != null)
+      return n(t, r), () => {
+        o(t);
+      };
+  }, [t, r, n, o]), i;
+}, p = () => {
+  const { refs: t } = e(u);
+  return t;
+}, x = () => {
+  const { value: t } = e(s), { refs: r } = e(u);
+  return [t, r.get(t)];
+};
+export {
+  T as useActiveTab,
+  x as useActiveTabControl,
+  l as useRegisterTabControl,
+  p as useTabControl,
+  f as useTabDispatch
+};

package/molecules/Tabs/theme.d.ts

@@ -0,0 +1,10 @@
+export type Theme = 'yellow' | 'black';
+export declare const getTheme: (theme: Theme) => {
+    readonly bgColor: "bg-saffron";
+    readonly textColor: "text-black";
+    readonly textColorActive: "text-black";
+} | {
+    readonly bgColor: "bg-black";
+    readonly textColor: "text-black";
+    readonly textColorActive: "text-white";
+};

package/molecules/Tabs/theme.js

@@ -0,0 +1,23 @@
+const t = {
+  YELLOW: {
+    bgColor: "bg-saffron",
+    textColor: "text-black",
+    textColorActive: "text-black"
+  },
+  BLACK: {
+    bgColor: "bg-black",
+    textColor: "text-black",
+    textColorActive: "text-white"
+  }
+}, o = (e) => {
+  switch (e) {
+    case "black":
+      return t.BLACK;
+    case "yellow":
+    default:
+      return t.YELLOW;
+  }
+};
+export {
+  o as getTheme
+};

package/package.json

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