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

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

@@ -0,0 +1,166 @@
+import { TaskProps } from './Task.js';
+export declare const subTask: import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            dot: string[];
+        };
+        completed: {
+            dot: string[];
+        };
+        locked: {
+            dot: string[];
+        };
+    };
+    isSelected: {
+        true: {
+            dot: string[];
+        };
+        false: {
+            number: string[];
+        };
+    };
+}, {
+    base: string[];
+    dot: string[];
+    text: string[];
+    element: string[];
+    number: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, undefined, unknown, unknown, undefined>>>;
+export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
+    /** internal prop to disable the button, do not use this prop */
+    isDisabled?: boolean;
+}
+/**
+ * The `SubTask` component represents an individual subtask item within a TaskGroup that can be either a link or button.
+ * It supports various visual states including completed, uncompleted, locked.
+ * The component adapts its behavior based on whether an href is provided and displays
+ * a dot indicator instead of a numbered badge to distinguish it from main Task components.
+ *
+ * ```tsx
+ * // Link-based subtask for navigation within a task group
+ * <SubTask
+ *   uniqueId="profile-setup"
+ *   label="Complete Profile Information"
+ *   taskStatus="uncompleted"
+ *   href="/onboarding/profile"
+ * />
+ *
+ * // Button-based subtask for custom interactions
+ * <SubTask
+ *   uniqueId="validate-email"
+ *   label="Validate Email Address"
+ *   taskStatus="completed"
+ *   onPress={() => handleEmailValidation()}
+ * />
+ *
+ * // Locked subtask that cannot be interacted with
+ * <SubTask
+ *   uniqueId="final-approval"
+ *   label="Manager Approval"
+ *   taskStatus="locked"
+ * />
+ * ```
+ * @see {@link SubTaskProps} for all available props
+ */
+declare const SubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { SubTask };

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

@@ -0,0 +1,197 @@
+import { jsxs as s, jsx as t, Fragment as f } from "react/jsx-runtime";
+import { forwardRef as O, useEffect as z } from "react";
+import { Link as E, Button as F } from "react-aria-components";
+import { useIntl as R, FormattedMessage as g } from "react-intl";
+import { tv as A } from "tailwind-variants";
+import { useRouter as D } from "../../../providers/router/RouterProvider.js";
+import { Icon as y } from "../../icon/Icon.js";
+import { Text as I } from "../../text/Text.js";
+import { useTaskMenuContext as V } from "../TaskMenu.context.js";
+import G from "./dot.svg.js";
+import { commonTask as H } from "./task.variants.js";
+const J = A({
+  extend: H,
+  slots: {
+    base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
+    dot: ["uy:self-center"],
+    text: [
+      "uy:bg-surface-neutral-enabled",
+      "uy:md:bg-[transparent]",
+      "uy:leading-[1]"
+    ],
+    element: ["uy:rounded-50"],
+    number: ""
+  },
+  variants: {
+    taskStatus: {
+      uncompleted: {
+        dot: [
+          "uy:fill-content-neutral-lowest",
+          'uy:group-data-[current="true"]:fill-content-primary'
+        ]
+      },
+      completed: {
+        dot: ["uy:fill-content-neutral-lowest"]
+      },
+      locked: {
+        dot: ["uy:fill-content-neutral-lowest"]
+      }
+    },
+    isSelected: {
+      true: { dot: ["uy:fill-content-primary"] },
+      false: {
+        number: ["uy:group-data-[pressed]/element:bg-surface-neutral-pressed"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isSelected: !0,
+      taskStatus: "uncompleted",
+      className: {
+        text: ["uy:bg-surface-neutral-selected", "uy:md:bg-[transparent]"]
+      }
+    },
+    {
+      isSelected: !1,
+      taskStatus: "uncompleted",
+      className: {
+        text: [
+          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+        ]
+      }
+    },
+    {
+      isSelected: !1,
+      taskStatus: "locked",
+      className: {
+        text: [
+          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+        ]
+      }
+    }
+  ]
+}), K = (o, n, e) => {
+  switch (o) {
+    case "completed":
+      return /* @__PURE__ */ s(f, { children: [
+        /* @__PURE__ */ t(
+          y,
+          {
+            className: e == null ? void 0 : e.completed,
+            src: "CheckCircleOutlined",
+            size: 20,
+            color: "content.success",
+            alt: n.formatMessage({
+              id: "unity:component:task-menu:task:completed:label",
+              defaultMessage: "Completed"
+            })
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "uy:sr-only", children: /* @__PURE__ */ t(
+          g,
+          {
+            id: "unity:component:task-menu:task:completed:label",
+            defaultMessage: "Completed"
+          }
+        ) })
+      ] });
+    case "locked":
+      return /* @__PURE__ */ s(f, { children: [
+        /* @__PURE__ */ t(
+          y,
+          {
+            "aria-hidden": "true",
+            className: e == null ? void 0 : e.locked,
+            src: "LockOutlined",
+            size: 20,
+            color: "content.neutral.lowest",
+            alt: n.formatMessage({
+              id: "unity:component:task-menu:task:lock:label",
+              defaultMessage: "Locked"
+            })
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "uy:sr-only", children: /* @__PURE__ */ t(
+          g,
+          {
+            id: "unity:component:task-menu:task:lock:label",
+            defaultMessage: "Locked"
+          }
+        ) })
+      ] });
+    default:
+      return null;
+  }
+}, Q = O(
+  ({
+    href: o,
+    label: n,
+    taskStatus: e = "uncompleted",
+    isExact: i,
+    isDisabled: b,
+    onPress: d,
+    uniqueId: r,
+    ...p
+  }, h) => {
+    const k = R(), u = D(), { currentTask: a, setCurrentTask: l, state: m } = V();
+    z(() => {
+      o && (u != null && u.isActive(o.toString(), i)) && (l == null || l({ uniqueId: r, label: n }));
+    }, [o, i, u, r, n]);
+    const c = (a == null ? void 0 : a.uniqueId) === r, { base: v, element: M, text: w, dot: L, lock: S } = J({
+      isSelected: c,
+      taskStatus: e
+    }), j = Object.assign(
+      {},
+      c !== void 0 && {
+        "data-current": c,
+        "aria-current": c ? "page" : void 0
+      }
+    ), x = o ? E : F;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        ref: h,
+        className: v(),
+        ...c ? { "data-current": !0 } : {},
+        ...p,
+        children: [
+          /* @__PURE__ */ t(G, { width: 8, height: 8, className: L(), role: "presentation" }),
+          /* @__PURE__ */ s(
+            x,
+            {
+              className: M(),
+              href: o,
+              onPress: (N) => {
+                l == null || l({ uniqueId: r, label: n }), m == null || m.toggle(), d == null || d(N);
+              },
+              isDisabled: b,
+              ...j,
+              ...p,
+              children: [
+                /* @__PURE__ */ t(
+                  I,
+                  {
+                    asElement: "span",
+                    className: w(),
+                    variant: c ? "bodyStrong" : "body",
+                    children: n
+                  }
+                ),
+                K(e, k, {
+                  locked: S(),
+                  completed: "uy:self-center"
+                })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Q.displayName = "SubTask";
+export {
+  Q as SubTask,
+  J as subTask
+};

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

@@ -0,0 +1,179 @@
+import { PropsWithChildren } from 'react';
+import { AriaButtonProps } from 'react-aria';
+import { VariantProps } from 'tailwind-variants';
+export declare const task: import('tailwind-variants').TVReturnType<{
+    isSelected: {
+        false: string;
+        true: string;
+    };
+}, {
+    base: never[];
+    element: string[];
+    text: string;
+    lock: string;
+    number: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, undefined, unknown, unknown, undefined>>>;
+/**
+ * Props for the Task component, defining the configuration options for individual task items.
+ * Supports both link-based navigation and button-based interactions with various visual states.
+ */
+export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof task>, 'isSelected'>> {
+    /**
+     * Unique identifier for the task, used for state management and accessibility.
+     * This ID is used to track the current selected task and manage focus states.
+     */
+    uniqueId: string;
+    /**
+     * The label of the task which will be displayed under the task number
+     */
+    label: string;
+    /**
+     * The task number used to identify the task among the task list
+     */
+    taskNumber: number;
+    /**
+     * Optional URL for link-based navigation. When provided, the task renders as a link.
+     * When omitted, the task renders as a button for custom interaction handling.
+     */
+    href?: string;
+    /** Whether the nav item should exactly match the route's path. */
+    isExact?: boolean;
+    /** The click event handler for the nav item. Use it when the item executes an action that  does not redirect to another page */
+    onPress?: AriaButtonProps['onPress'];
+}
+/**
+ * The `Task` component represents an individual task item in the task menu that can be either a link or button with different states.
+ * It supports various visual states including completed, uncompleted, locked, and selected states, with automatic state management
+ * based on routing context or manual selection. The component adapts its behavior based on whether an href is provided.
+ *
+ * ```tsx
+ * // Link-based task for navigation
+ * <Task
+ *   uniqueId="setup-profile"
+ *   label="Complete Profile Setup"
+ *   taskNumber={1}
+ *   taskStatus="uncompleted"
+ *   href="/profile/setup"
+ * />
+ *
+ * // Button-based task for custom interactions
+ * <Task
+ *   uniqueId="validate-data"
+ *   label="Validate Information"
+ *   taskNumber={2}
+ *   taskStatus="completed"
+ *   onPress={() => handleValidation()}
+ * />
+ *
+ * // Locked task that cannot be interacted with
+ * <Task
+ *   uniqueId="final-review"
+ *   label="Final Review"
+ *   taskNumber={3}
+ *   taskStatus="locked"
+ * />
+ * ```
+ * @see {@link TaskProps} for all available props
+ */
+declare const Task: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { Task };

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

@@ -0,0 +1,172 @@
+import { jsxs as l, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { forwardRef as z, useEffect as A } from "react";
+import { Link as B, Button as C } from "react-aria-components";
+import { useIntl as T, FormattedMessage as b } from "react-intl";
+import { tv as V } from "tailwind-variants";
+import { useRouter as D } from "../../../providers/router/RouterProvider.js";
+import { Icon as h } from "../../icon/Icon.js";
+import { Text as v } from "../../text/Text.js";
+import { useTaskMenuContext as G } from "../TaskMenu.context.js";
+import { commonTask as H } from "./task.variants.js";
+const I = V({
+  extend: H,
+  slots: {
+    base: [],
+    element: ["uy:p-200", "uy:md:p-0"],
+    text: "uy:leading-[1]",
+    lock: "uy:self-center",
+    number: ""
+  },
+  variants: {
+    isSelected: {
+      false: "",
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      isSelected: !0,
+      taskStatus: "uncompleted",
+      className: {
+        element: ["uy:bg-surface-neutral-selected", "uy:md:bg-[transparent]"],
+        text: ["uy:md:bg-surface-neutral-selected uy:md:bg-[transparent]"]
+      }
+    },
+    {
+      isSelected: !1,
+      taskStatus: "uncompleted",
+      className: {
+        number: [
+          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed",
+          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+        ],
+        text: ["uy:group-hover/element:text-content-neutral-hover"]
+      }
+    },
+    {
+      isSelected: !1,
+      taskStatus: "locked",
+      className: {
+        number: [
+          "uy:group-hover/element:text-content-neutral-hover",
+          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+        ],
+        text: ["uy:group-hover/element:text-content-neutral-hover"]
+      }
+    }
+  ]
+}), J = z(
+  ({
+    href: n,
+    isExact: p = !1,
+    label: s,
+    onPress: m,
+    taskNumber: x,
+    taskStatus: c = "uncompleted",
+    children: N,
+    uniqueId: o,
+    ...y
+  }, S) => {
+    const r = D(), g = T(), {
+      currentTask: d,
+      setCurrentTask: t,
+      state: u,
+      expandedTaskGroup: f,
+      toggleTaskGroup: i
+    } = G(), M = n ? B : C;
+    A(() => {
+      n && (r != null && r.isActive(n.toString(), p)) && (t == null || t({ uniqueId: o, label: s }));
+    }, [n, p, r, s, o]);
+    const a = (d == null ? void 0 : d.uniqueId) === o, L = Object.assign(
+      {},
+      a !== void 0 && {
+        "data-current": a,
+        "aria-current": a ? "page" : void 0
+      }
+    ), { base: j, number: E, element: O, text: F, lock: R } = I({
+      isSelected: a,
+      taskStatus: c
+    });
+    return /* @__PURE__ */ l("li", { ref: S, className: j(), ...y, children: [
+      /* @__PURE__ */ l(
+        M,
+        {
+          className: O(),
+          href: n,
+          onPress: (w) => {
+            t == null || t({ uniqueId: o, label: s }), u == null || u.toggle(), f && (i == null || i(f)), m == null || m(w);
+          },
+          ...L,
+          ...y,
+          children: [
+            /* @__PURE__ */ e("div", { className: E(), children: c === "completed" ? /* @__PURE__ */ l(k, { children: [
+              /* @__PURE__ */ e(
+                h,
+                {
+                  size: 24,
+                  "aria-hidden": "true",
+                  src: "CheckOutlined",
+                  alt: g.formatMessage({
+                    id: "unity:component:task-menu:task:completed:label",
+                    defaultMessage: "Completed"
+                  })
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
+                b,
+                {
+                  id: "unity:component:task-menu:task:completed:label",
+                  defaultMessage: "Completed"
+                }
+              ) })
+            ] }) : /* @__PURE__ */ e(
+              v,
+              {
+                asElement: "span",
+                variant: a ? "bodyStrong" : "body",
+                className: "uy:leading-[1]",
+                children: x
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              v,
+              {
+                asElement: "span",
+                className: F(),
+                variant: a ? "bodyStrong" : "body",
+                children: s
+              }
+            ),
+            c === "locked" && /* @__PURE__ */ l(k, { children: [
+              /* @__PURE__ */ e(
+                h,
+                {
+                  "aria-hidden": "true",
+                  className: R(),
+                  src: "LockOutlined",
+                  alt: g.formatMessage({
+                    id: "unity:component:task-menu:task:lock:label",
+                    defaultMessage: "Locked"
+                  })
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
+                b,
+                {
+                  id: "unity:component:task-menu:task:lock:label",
+                  defaultMessage: "Locked"
+                }
+              ) })
+            ] })
+          ]
+        }
+      ),
+      N
+    ] });
+  }
+);
+J.displayName = "Task";
+export {
+  J as Task,
+  I as task
+};