@payfit/unity-components 2.46.13 → 2.46.14

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

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

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

@@ -0,0 +1,156 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { AriaButtonProps } from 'react-aria/useButton';
+export declare const rawTask: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            number?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            lock?: import('tailwind-merge').ClassNameValue;
+            element?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    taskStatus: {
+        uncompleted: import('tailwind-merge').ClassNameValue | {
+            number?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            lock?: import('tailwind-merge').ClassNameValue;
+            element?: import('tailwind-merge').ClassNameValue;
+        };
+        completed: import('tailwind-merge').ClassNameValue | {
+            number?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            lock?: import('tailwind-merge').ClassNameValue;
+            element?: import('tailwind-merge').ClassNameValue;
+        };
+        locked: import('tailwind-merge').ClassNameValue | {
+            number?: import('tailwind-merge').ClassNameValue;
+            text?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            lock?: import('tailwind-merge').ClassNameValue;
+            element?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+}, {
+    base: never[];
+    element: string[];
+    text: string;
+    lock: string;
+    number: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: string;
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string[];
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: string;
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string[];
+}, undefined, {
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: string;
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string[];
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: 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<VariantProps<typeof rawTask>> {
+    /**
+     * 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
+ * <RawTask
+ *   uniqueId="setup-profile"
+ *   label="Complete Profile Setup"
+ *   taskNumber={1}
+ *   taskStatus="uncompleted"
+ *   href="/profile/setup"
+ * />
+ *
+ * // Button-based task for custom interactions
+ * <RawTask
+ *   uniqueId="validate-data"
+ *   label="Validate Information"
+ *   taskNumber={2}
+ *   taskStatus="completed"
+ *   onPress={() => handleValidation()}
+ * />
+ *
+ * // Locked task that cannot be interacted with
+ * <RawTask
+ *   uniqueId="final-review"
+ *   label="Final Review"
+ *   taskNumber={3}
+ *   taskStatus="locked"
+ * />
+ * ```
+ * @see {@link TaskProps} for all available props
+ */
+declare const RawTask: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { RawTask };

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

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

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

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+import { SubTaskProps } from './RawSubTask.js';
+import { TaskProps } from './RawTask.js';
+export interface TaskGroupProps extends Omit<TaskProps, 'href' | 'isExact' | 'isCurrent' | 'onPress' | 'isSelected'>, DataAttributes {
+    /**
+     * The subtasks that belong to this task group. Can be a single SubTask or an array of SubTask components.
+     */
+    children?: ReactElement<SubTaskProps> | Array<ReactElement<SubTaskProps>>;
+}
+/**
+ * The `TaskGroup` component represents a collapsible group of subtasks in the task menu.
+ * It provides an organized way to group related subtasks together, with automatic expansion/collapse behavior and intelligent selection of the first incomplete subtask when opened.
+ *
+ * ```tsx
+ * <TaskGroup
+ *   uniqueId="onboarding-group"
+ *   label="Employee Onboarding"
+ *   taskNumber={1}
+ *   taskStatus="uncompleted"
+ * >
+ *   <RawSubTask uniqueId="profile" label="Complete Profile" href="/profile" />
+ *   <RawSubTask uniqueId="documents" label="Upload Documents" href="/documents" />
+ *   <RawSubTask uniqueId="training" label="Complete Training" href="/training" />
+ * </TaskGroup>
+ * ```
+ * @see {@link TaskGroupProps} for all available props
+ */
+declare const TaskGroup: import('react').ForwardRefExoticComponent<TaskGroupProps & import('react').RefAttributes<HTMLLIElement>>;
+export { TaskGroup };

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

@@ -0,0 +1,140 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { forwardRef as A, Children as l, isValidElement as u, cloneElement as $ } from "react";
+import { uyTv as B } from "@payfit/unity-themes";
+import { Button as D } from "react-aria-components/Button";
+import { useId as F } from "react-aria/useId";
+import { useIntl as H } from "react-intl";
+import { Icon as O } from "../../icon/Icon.js";
+import { Text as g } from "../../text/Text.js";
+import { useTaskMenuContext as P } from "../TaskMenu.context.js";
+import { commonTask as R } from "./task.variants.js";
+const U = B({
+  extend: R,
+  slots: {
+    base: ["uy:relative uy:flex-col uy:px-200", "uy:md:px-0"],
+    element: ["uy:z-[1] uy:py-200", "uy:md:py-0", "uy:cursor-pointer"],
+    bar: [
+      "uy:absolute uy:top-0 uy:bottom-0 uy:bg-surface-neutral-low uy:w-300 uy:z-[0] uy:rounded-200 uy:mt-250 uy:mb-75",
+      "uy:md:my-75"
+    ],
+    containerSubTasks: [
+      "uy:list-none uy:ml-100 uy:flex uy:flex-col uy:gap-100 uy:z-[1] uy:relative uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear uy:mt-100",
+      "uy:group-data-[expanded=true]/base:opacity-100 uy:group-data-[expanded=true]/base:visible",
+      "uy:group-data-[expanded=false]/base:opacity-0 uy:group-data-[expanded=false]/base:invisible uy:group-data-[expanded=false]/base:pointer-events-none"
+    ],
+    containerSubTasksWrapper: [
+      "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none"
+    ],
+    number: [
+      "uy:bg-surface-neutral-lowest",
+      "uy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-inverted",
+      "uy:theme-legacy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:bg-surface-primary-active",
+      "uy:theme-rebrand:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:bg-surface-neutral-highest-active"
+    ],
+    text: [
+      "uy:theme-legacy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-primary-active",
+      "uy:theme-rebrand:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-neutral-active"
+    ]
+  }
+}), V = (e, t) => e ? l.toArray(t).some(
+  (r) => u(r) && r.props.uniqueId === e
+) : !1, W = (e) => e ? l.toArray(e).find(
+  (t) => u(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
+) : null, J = A(
+  ({
+    children: e,
+    label: t,
+    taskNumber: r,
+    taskStatus: n = "uncompleted",
+    uniqueId: p,
+    ...f
+  }, x) => {
+    const { currentTask: k, setCurrentTask: v, toggleTaskGroup: T, expandedTaskGroup: h } = P(), c = F(), S = H(), a = h === p, I = (s) => {
+      if (T?.(p), !s) {
+        const b = W(e);
+        if (u(b)) {
+          const { uniqueId: M, label: j } = b.props;
+          v?.({ uniqueId: M, label: j });
+        }
+      }
+    }, N = l.map(e, (s) => u(s) ? $(s, { isDisabled: !a }) : s), m = `${c}-toggle`, y = `${c}-content`, d = V(
+      k?.uniqueId,
+      e
+    ), { base: C, number: E, text: G, bar: w, element: z, containerSubTasks: q } = U({
+      taskStatus: n
+    });
+    return /* @__PURE__ */ i(
+      "li",
+      {
+        ref: x,
+        "data-group": "true",
+        "data-task-status": n,
+        "data-expanded": a,
+        "data-active-group": d,
+        className: C(),
+        children: [
+          /* @__PURE__ */ i(
+            D,
+            {
+              id: m,
+              className: z(),
+              onPress: () => {
+                I(a);
+              },
+              "aria-expanded": a,
+              "aria-controls": y,
+              ...f,
+              children: [
+                /* @__PURE__ */ o("div", { className: E(), children: n === "completed" ? /* @__PURE__ */ o(
+                  O,
+                  {
+                    size: 24,
+                    src: "CheckOutlined",
+                    alt: S.formatMessage({
+                      id: "unity:component:task-menu:task:completed:label",
+                      defaultMessage: "Completed"
+                    })
+                  }
+                ) : /* @__PURE__ */ o(
+                  g,
+                  {
+                    asElement: "span",
+                    variant: d ? "bodyStrong" : "body",
+                    className: "uy:leading-[1]",
+                    children: r
+                  }
+                ) }),
+                /* @__PURE__ */ o(
+                  g,
+                  {
+                    asElement: "span",
+                    className: G(),
+                    variant: d ? "bodyStrong" : "body",
+                    children: t
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ i("div", { style: { maxHeight: a ? 1e3 : 0 }, children: [
+            /* @__PURE__ */ o(
+              "ol",
+              {
+                id: y,
+                "aria-labelledby": m,
+                "aria-hidden": !a,
+                className: q(),
+                children: N
+              }
+            ),
+            a && /* @__PURE__ */ o("div", { role: "presentation", className: w() })
+          ] })
+        ]
+      }
+    );
+  }
+);
+J.displayName = "TaskGroup";
+export {
+  J as TaskGroup
+};

package/dist/esm/components/task-menu/parts/dot.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const i = (t) => /* @__PURE__ */ e.createElement("svg", { width: 8, height: 8, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("circle", { cx: 4, cy: 4, r: 4, fill: "inherit" }));
+export {
+  i as default
+};

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

@@ -0,0 +1,37 @@
+export declare const commonTask: import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: string;
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string[];
+}, undefined, {
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: string;
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string[];
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: string;
+        completed: string;
+        locked: string;
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string[];
+}, undefined, unknown, unknown, undefined>>;