@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

package/dist/esm/components/tabs/Tabs.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Tabs as f } from "react-aria-components";
+import { TabsProvider as p } from "./Tabs.context.js";
+import { tabsVariant as d } from "./Tabs.variant.js";
+const b = e(
+  ({ children: s, variant: r, scrollable: a = !1, ...m }, t) => {
+    const { base: i } = d({ variant: r, scrollable: a });
+    return /* @__PURE__ */ o(p, { variant: r, scrollable: a, children: /* @__PURE__ */ o(
+      f,
+      {
+        "data-dd-privacy": "allow",
+        ref: t,
+        className: i(),
+        ...m,
+        children: s
+      }
+    ) });
+  }
+);
+b.displayName = "Tabs";
+export {
+  b as Tabs
+};

package/dist/esm/components/tabs/Tabs.variant.d.ts

@@ -0,0 +1,76 @@
+export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+            scroller: string;
+        };
+        false: {
+            base: string;
+            scroller: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    scroller: string;
+    tab: string[];
+}, undefined, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+            scroller: string;
+        };
+        false: {
+            base: string;
+            scroller: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    scroller: string;
+    tab: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+            scroller: string;
+        };
+        false: {
+            base: string;
+            scroller: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    scroller: string;
+    tab: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/tabs/Tabs.variant.js

@@ -0,0 +1,38 @@
+import { tv as e } from "tailwind-variants";
+const a = e({
+  slots: {
+    base: "uy:w-full",
+    tabList: "uy:flex",
+    scroller: "uy:overflow-x-auto uy:overflow-y-hidden [scrollbar-width:thin]",
+    tab: [
+      "uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:typography-action uy:text-content-neutral-lowest-enabled uy:pt-150 uy:pb-150 uy:pl-200 uy:pr-200 uy:rounded-25 uy:cursor-pointer",
+      'uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:content:" " uy:data-[selected]:after:w-full uy:data-[selected]:after:h-[4px] uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-[-1px] uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:text-content-form-active',
+      "uy:hover:cursor-pointer uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[4px]"
+    ]
+  },
+  variants: {
+    variant: {
+      primary: {
+        tab: "uy:data-[selected]:after:bg-border-neutral-active"
+      },
+      neutral: {
+        tab: "uy:data-[selected]:after:bg-content-neutral"
+      }
+    },
+    scrollable: {
+      true: {
+        tabList: "",
+        scroller: "uy:border-b-[1.25px] uy:border-solid uy:border-border-neutral-enabled"
+      },
+      false: {
+        base: "",
+        scroller: "",
+        tabList: "uy:border-b-[1.25px] uy:border-solid uy:border-border-neutral-enabled"
+      }
+    }
+  },
+  defaultVariants: { variant: "primary", scrollable: !1 }
+});
+export {
+  a as tabsVariant
+};

package/dist/esm/components/tabs/parts/NavigationButton.js

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as a } from "react-aria-components";
+import { tv as s } from "tailwind-variants";
+import { Icon as i } from "../../icon/Icon.js";
+const n = s({
+  slots: {
+    base: "uy:absolute uy:pt-150 uy:pb-150",
+    button: "uy:rounded-circle uy:hover:text-content-neutral-hover uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+    icon: "uy:text-content-neutral-enabled"
+  },
+  variants: {
+    direction: {
+      left: {
+        base: "uy:top-0 uy:left-0 uy:z-10 uy:bg-gradient-to-r uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-50 uy:pr-200"
+      },
+      right: {
+        base: "uy:right-0 uy:top-0 uy:z-10 uy:bg-gradient-to-l uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-200 uy:pr-50"
+      }
+    }
+  }
+}), g = ({ direction: t, onPress: o }) => {
+  const { base: u, button: l, icon: r } = n({ direction: t });
+  return /* @__PURE__ */ e("div", { className: u(), children: /* @__PURE__ */ e(
+    a,
+    {
+      id: `scroll-${t}`,
+      className: l(),
+      "aria-label": `Scroll ${t}`,
+      onPress: o,
+      children: /* @__PURE__ */ e(
+        i,
+        {
+          className: r(),
+          "aria-labelledby": `scroll-${t}`,
+          src: t === "left" ? "CaretLeftOutlined" : "CaretRightOutlined"
+        }
+      )
+    }
+  ) });
+};
+export {
+  g as NavigationButton
+};

package/dist/esm/components/tabs/parts/Tab.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Tab as b } from "react-aria-components";
+import { useTabsContext as p } from "../Tabs.context.js";
+import { tabsVariant as c } from "../Tabs.variant.js";
+const f = l(
+  ({ children: a, suffix: r, ...o }, t) => {
+    const { variant: s, scrollable: m } = p(), { tab: n } = c({ variant: s, scrollable: m });
+    return /* @__PURE__ */ e(b, { ref: t, ...o, className: n(), children: [
+      a,
+      r ? /* @__PURE__ */ i("span", { children: r }) : null
+    ] });
+  }
+);
+f.displayName = "Tab";
+export {
+  f as Tab
+};

package/dist/esm/components/tabs/parts/TabList.js

@@ -0,0 +1,87 @@
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { forwardRef as B, useRef as j, useState as L, useCallback as q } from "react";
+import { TabList as g } from "react-aria-components";
+import { useResizeObserver as w } from "usehooks-ts";
+import { useTabsContext as z } from "../Tabs.context.js";
+import { tabsVariant as P } from "../Tabs.variant.js";
+import { NavigationButton as p } from "./NavigationButton.js";
+const k = B(
+  ({ children: f }, u) => {
+    const r = j(null), [S, R] = L(!1), [v, y] = L(!1), { variant: W, scrollable: b } = z(), { tabList: m, scroller: N } = P({ variant: W, scrollable: b }), h = q(() => {
+      if (!r.current) return;
+      const { scrollLeft: t, scrollWidth: s, clientWidth: e } = r.current;
+      R(t > 0), y(t + e < s);
+    }, []);
+    w({
+      ref: r,
+      onResize: h
+    });
+    const T = (t) => {
+      h();
+    }, x = () => {
+      var l;
+      const t = (l = r.current) == null ? void 0 : l.querySelectorAll("[role=tab]");
+      if (!r.current || !t) return 0;
+      const { scrollLeft: s } = r.current, e = Array.from(t);
+      for (let o = e.length - 1; o >= 0; o--) {
+        const c = e[o];
+        if (c.offsetLeft < s)
+          return -c.offsetWidth;
+      }
+      return 0;
+    }, A = () => {
+      var c;
+      const t = (c = r.current) == null ? void 0 : c.querySelectorAll("[role=tab]");
+      if (!r.current || !t) return 0;
+      const { scrollLeft: s, clientWidth: e } = r.current, l = Array.from(t), o = s + e;
+      for (let a = 0; a < l.length - 1; a++) {
+        const i = l[a], d = i.offsetLeft + i.offsetWidth;
+        if (d > o || d < o)
+          return i.offsetWidth;
+      }
+      return 0;
+    };
+    return b ? /* @__PURE__ */ C("div", { className: "uy:relative", children: [
+      S && /* @__PURE__ */ n(
+        p,
+        {
+          direction: "left",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: x()
+            });
+          }
+        }
+      ),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          ref: r,
+          "data-testid": "scrollable-tab-list",
+          className: N(),
+          onScroll: T,
+          children: /* @__PURE__ */ n(g, { ref: u, className: m(), children: f })
+        }
+      ),
+      v && /* @__PURE__ */ n(
+        p,
+        {
+          direction: "right",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: A()
+            });
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ n(g, { ref: u, className: m(), children: f });
+  }
+);
+k.displayName = "TabList";
+export {
+  k as TabList
+};

package/dist/esm/components/tabs/parts/TabPanel.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { TabPanel as t } from "react-aria-components";
+const n = m(
+  ({ children: a, ...r }, o) => /* @__PURE__ */ e(t, { "data-dd-privacy": "mask", ref: o, ...r, children: a })
+);
+n.displayName = "TabPanel";
+export {
+  n as TabPanel
+};

package/dist/esm/components/task-menu/TaskMenu.context.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { OverlayTriggerAria } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+export interface CurrentTask {
+    uniqueId: string;
+    label: string;
+}
+type TaskMenuContextValue = {
+    currentTask: CurrentTask | null | undefined;
+    setCurrentTask: ((currentTask: CurrentTask) => void) | undefined;
+    toggleTaskGroup: ((open: string) => void) | undefined;
+    expandedTaskGroup: string | null | undefined;
+    taskMenuId: string;
+    taskMenuContentId: string;
+    state: OverlayTriggerState | null;
+    triggerRef: RefObject<Element | null>;
+    overlayRef: RefObject<Element | null>;
+    triggerProps: OverlayTriggerAria['triggerProps'];
+    overlayProps: OverlayTriggerAria['overlayProps'];
+};
+export declare const TaskMenuContext: import('react').Context<TaskMenuContextValue>;
+export declare function TaskMenuProvider({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+export declare function useTaskMenuContext(): TaskMenuContextValue;
+export {};

package/dist/esm/components/task-menu/TaskMenu.context.js

@@ -0,0 +1,60 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as r, useRef as i, createContext as C, useContext as M } from "react";
+import { useId as G, useOverlayTrigger as P } from "react-aria";
+import { useOverlayTriggerState as I } from "react-stately";
+const c = C({
+  currentTask: void 0,
+  setCurrentTask: void 0,
+  toggleTaskGroup: void 0,
+  expandedTaskGroup: void 0,
+  taskMenuId: "",
+  taskMenuContentId: "",
+  state: null,
+  triggerRef: { current: null },
+  overlayRef: { current: null },
+  triggerProps: {},
+  overlayProps: {}
+});
+function E({ children: e }) {
+  const n = G(), [k, d] = r(null), [o, s] = r(
+    null
+  ), [T, u] = r(null), a = I({}), l = i(null), p = i(null), { triggerProps: v, overlayProps: g } = P(
+    { type: "dialog" },
+    a,
+    l
+  ), f = `task-menu-${n}`, x = (t) => {
+    t === T ? (u(null), s(null)) : (u(t), s(o === t ? null : t));
+  };
+  return /* @__PURE__ */ m(
+    c.Provider,
+    {
+      value: {
+        currentTask: k,
+        setCurrentTask: d,
+        toggleTaskGroup: x,
+        expandedTaskGroup: o,
+        taskMenuId: n,
+        taskMenuContentId: f,
+        state: a,
+        triggerRef: l,
+        overlayRef: p,
+        triggerProps: v,
+        overlayProps: g
+      },
+      children: e
+    }
+  );
+}
+function O() {
+  const e = M(c);
+  if (!e)
+    throw new Error(
+      "useTaskMenuContext must be used within an TaskMenuProvider"
+    );
+  return e;
+}
+export {
+  c as TaskMenuContext,
+  E as TaskMenuProvider,
+  O as useTaskMenuContext
+};

package/dist/esm/components/task-menu/TaskMenu.d.ts

@@ -0,0 +1,80 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const taskMenu: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof taskMenu>> {
+    /**
+     * The label for the task menu. This is used for accessibility purposes.
+     */
+    label: string;
+}
+/**
+ * The `TaskMenu` component provides a navigation menu for tasks and task groups with expandable functionality.
+ * @example
+ * ```tsx
+ * import { TaskMenu, Task, TaskGroup, SubTask } from '@payfit/unity-components'
+ *
+ * <TaskMenu>
+ *  <Task
+ *    uniqueId="task1"
+ *    label="Complete Profile"
+ *    taskNumber={1}
+ *    taskStatus="completed"
+ *    href="/profile"
+ *   />
+ *  <Task
+ *    uniqueId="task2"
+ *    label="Upload Documents"
+ *    taskNumber={2}
+ *    taskStatus="uncompleted"
+ *    href="/documents"
+ *  />
+ *  <TaskGroup
+ *    uniqueId="onboarding"
+ *    label="Onboarding Steps"
+ *    taskNumber={3}
+ *    taskStatus="uncompleted"
+ *  >
+ *    <SubTask
+ *      uniqueId="step1"
+ *      label="Welcome Video"
+ *      href="/onboarding/welcome"
+ *      taskStatus="completed"
+ *    />
+ *    <SubTask
+ *      uniqueId="step2"
+ *      label="Company Policies"
+ *      href="/onboarding/policies"
+ *      taskStatus="uncompleted"
+ *    />
+ *  </TaskGroup>
+ *     </TaskMenu>
+ * ```
+ * @see {@link TaskMenuProps} for all available props
+ * @remarks [API Docs]{https://unity-components.payfit.io/?path=/story/navigation-taskmenu--docs}
+ */
+declare const TaskMenu: import('react').ForwardRefExoticComponent<TaskMenuProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TaskMenu };

package/dist/esm/components/task-menu/TaskMenu.js

@@ -0,0 +1,28 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { tv as d } from "tailwind-variants";
+import { useBreakpointListener as l } from "../../hooks/use-breakpoint-listener.js";
+import { Content as f } from "./parts/Content.js";
+import { Header as p } from "./parts/Header.js";
+import { TaskMenuProvider as y } from "./TaskMenu.context.js";
+const c = d({
+  slots: {
+    base: [
+      "uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral",
+      "uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-200 uy:md:p-400"
+    ]
+  }
+}), b = u(
+  ({ children: o, label: s, ...t }, a) => {
+    const { base: n } = c(), e = l(), i = e === "xs" || e === "sm";
+    return /* @__PURE__ */ r("nav", { ...t, className: n(), ref: a, "aria-label": s, children: /* @__PURE__ */ m(y, { children: [
+      i && /* @__PURE__ */ r(p, {}),
+      /* @__PURE__ */ r(f, { children: o })
+    ] }) });
+  }
+);
+b.displayName = "TaskMenu";
+export {
+  b as TaskMenu,
+  c as taskMenu
+};

package/dist/esm/components/task-menu/parts/Content.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface ContentProps {
+    children: ReactNode;
+}
+declare const Content: {
+    ({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Content };

package/dist/esm/components/task-menu/parts/Content.js

@@ -0,0 +1,47 @@
+import { jsx as n } from "react/jsx-runtime";
+import { FocusScope as a, useOverlay as p, mergeProps as f } from "react-aria";
+import { tv as b } from "tailwind-variants";
+import { useBreakpointListener as i } from "../../../hooks/use-breakpoint-listener.js";
+import { useTaskMenuContext as r } from "../TaskMenu.context.js";
+const v = b({
+  base: [
+    "uy:flex uy:flex-col uy:mt-100",
+    "uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+  ]
+}), l = ({ children: s }) => {
+  const {
+    taskMenuContentId: e,
+    state: o,
+    overlayProps: c,
+    overlayRef: t
+  } = r(), u = i(), y = u === "xs" || u === "sm", { overlayProps: m } = p(
+    {
+      onClose: () => o == null ? void 0 : o.close(),
+      isOpen: o == null ? void 0 : o.isOpen,
+      isDismissable: !1
+    },
+    t
+  );
+  return /* @__PURE__ */ n(
+    "ol",
+    {
+      ...f(m, c),
+      ref: t,
+      className: v(),
+      id: e,
+      ...y && { "data-mobile-open": o == null ? void 0 : o.isOpen },
+      children: s
+    }
+  );
+}, d = ({ children: s }) => {
+  const { state: e } = r();
+  return !!(e != null && e.isOpen) && /* @__PURE__ */ n("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ n(a, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ n(l, { children: s }) }) });
+}, x = ({ children: s }) => {
+  const e = i();
+  return e === "xs" || e === "sm" ? /* @__PURE__ */ n(d, { children: s }) : /* @__PURE__ */ n(l, { children: s });
+};
+x.displayName = "TaskMenuContent";
+export {
+  x as Content
+};

package/dist/esm/components/task-menu/parts/Header.d.ts

@@ -0,0 +1,5 @@
+declare const Header: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Header };

package/dist/esm/components/task-menu/parts/Header.js

@@ -0,0 +1,55 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useIntl as m } from "react-intl";
+import { tv as p } from "tailwind-variants";
+import { IconButton as c } from "../../icon-button/IconButton.js";
+import { Text as f } from "../../text/Text.js";
+import { useTaskMenuContext as y } from "../TaskMenu.context.js";
+const h = p({
+  slots: {
+    header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
+    headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
+  }
+}), g = () => {
+  const {
+    currentTask: n,
+    taskMenuId: r,
+    taskMenuContentId: s,
+    state: e,
+    triggerProps: a,
+    triggerRef: i
+  } = y(), l = m(), { header: t, headerSelectedTask: d } = h();
+  return /* @__PURE__ */ u("div", { className: t(), children: [
+    /* @__PURE__ */ o(
+      f,
+      {
+        asElement: "span",
+        className: d(),
+        "aria-describedby": r,
+        children: n == null ? void 0 : n.label
+      }
+    ),
+    /* @__PURE__ */ o(
+      c,
+      {
+        ...a,
+        ref: i,
+        variant: "ghost",
+        color: "neutral",
+        icon: e != null && e.isOpen ? "CloseOutlined" : "ListOutlined",
+        label: l.formatMessage({
+          id: e != null && e.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
+          defaultMessage: e != null && e.isOpen ? "Close task menu" : "Open task menu"
+        }),
+        onClick: () => {
+          e == null || e.toggle();
+        },
+        "aria-expanded": !!(e != null && e.isOpen),
+        "aria-controls": s
+      }
+    )
+  ] });
+};
+g.displayName = "Header";
+export {
+  g as Header
+};