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

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 './SubTask.js';
+import { TaskProps } from './Task.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"
+ * >
+ *   <SubTask uniqueId="profile" label="Complete Profile" href="/profile" />
+ *   <SubTask uniqueId="documents" label="Upload Documents" href="/documents" />
+ *   <SubTask 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,175 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { forwardRef as j, Children as d, isValidElement as u, cloneElement as A } from "react";
+import { useId as V } from "react-aria";
+import { Button as $ } from "react-aria-components";
+import { useIntl as B } from "react-intl";
+import { tv as D } from "tailwind-variants";
+import { Icon as F } from "../../icon/Icon.js";
+import { Text as g } from "../../text/Text.js";
+import { useTaskMenuContext as H } from "../TaskMenu.context.js";
+import { commonTask as O } from "./task.variants.js";
+const P = D({
+  extend: O,
+  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"],
+    bar: [
+      "uy:absolute uy:top-0 uy:bottom-0 uy:bg-surface-neutral-lowest uy:w-300 uy:z-[0] uy:rounded-200 uy:my-250",
+      "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"
+    ],
+    containerSubTasksWrapper: [
+      "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none"
+    ],
+    number: ""
+  },
+  variants: {
+    expanded: {
+      true: {
+        containerSubTasksWrapper: "uy:max-h-[1000px] uy:overflow-visible",
+        containerSubTasks: "uy:opacity-100 uy:visible"
+      },
+      false: {
+        containerSubTasksWrapper: "uy:max-h-0 uy:overflow-hidden",
+        containerSubTasks: "uy:opacity-0 uy:invisible uy:pointer-events-none"
+      }
+    },
+    hasSelectedSubTask: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      hasSelectedSubTask: !0,
+      taskStatus: "uncompleted",
+      className: {
+        number: ["uy:bg-surface-primary-active uy:text-content-inverted"],
+        text: ["uy:text-content-primary-active"]
+      }
+    },
+    {
+      hasSelectedSubTask: !1,
+      taskStatus: "uncompleted",
+      className: {
+        number: [
+          "uy:group-hover/element:bg-surface-neutral-hover 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"]
+      }
+    },
+    {
+      hasSelectedSubTask: !1,
+      taskStatus: "locked",
+      className: {
+        number: [
+          "uy:group-hover/element:bg-surface-neutral-hover 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"]
+      }
+    }
+  ]
+}), R = (e, t) => e ? d.toArray(t).some(
+  (r) => u(r) && r.props.uniqueId === e
+) : !1, U = (e) => e ? d.toArray(e).find(
+  (t) => u(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
+) : null, J = j(
+  ({
+    children: e,
+    label: t,
+    taskNumber: r,
+    taskStatus: p = "uncompleted",
+    uniqueId: y,
+    ...S
+  }, h) => {
+    const { currentTask: l, setCurrentTask: i, toggleTaskGroup: m, expandedTaskGroup: k } = H(), b = V(), T = B(), a = k === y, N = (o) => {
+      if (m == null || m(y), !o) {
+        const x = U(e);
+        if (u(x)) {
+          const { uniqueId: M, label: W } = x.props;
+          i == null || i({ uniqueId: M, label: W });
+        }
+      }
+    }, I = d.map(e, (o) => u(o) ? A(o, { isDisabled: !a }) : o), f = `${b}-toggle`, v = `${b}-content`, s = R(
+      l == null ? void 0 : l.uniqueId,
+      e
+    ), { base: w, number: E, text: z, bar: q, element: C, containerSubTasks: G } = P({
+      taskStatus: p,
+      hasSelectedSubTask: s,
+      expanded: a
+    });
+    return /* @__PURE__ */ c(
+      "li",
+      {
+        ref: h,
+        "data-group": "true",
+        "data-active-group": s,
+        className: w(),
+        children: [
+          /* @__PURE__ */ c(
+            $,
+            {
+              id: f,
+              className: C(),
+              onPress: () => {
+                N(a);
+              },
+              "aria-expanded": a,
+              "aria-controls": v,
+              ...S,
+              children: [
+                /* @__PURE__ */ n("div", { className: E(), children: p === "completed" ? /* @__PURE__ */ n(
+                  F,
+                  {
+                    size: 24,
+                    src: "CheckOutlined",
+                    alt: T.formatMessage({
+                      id: "unity:component:task-menu:task:completed:label",
+                      defaultMessage: "Completed"
+                    })
+                  }
+                ) : /* @__PURE__ */ n(
+                  g,
+                  {
+                    asElement: "span",
+                    variant: s ? "bodyStrong" : "body",
+                    className: "uy:leading-[1]",
+                    children: r
+                  }
+                ) }),
+                /* @__PURE__ */ n(
+                  g,
+                  {
+                    asElement: "span",
+                    className: z(),
+                    variant: s ? "bodyStrong" : "body",
+                    children: t
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ c("div", { style: { maxHeight: a ? 1e3 : 0 }, children: [
+            /* @__PURE__ */ n(
+              "ol",
+              {
+                id: v,
+                "aria-labelledby": f,
+                "aria-hidden": !a,
+                className: G(),
+                children: I
+              }
+            ),
+            /* @__PURE__ */ n("div", { role: "presentation", className: q() })
+          ] })
+        ]
+      }
+    );
+  }
+);
+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,76 @@
+export declare const commonTask: 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>>;

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

@@ -0,0 +1,54 @@
+import { tv as e } from "tailwind-variants";
+const u = e({
+  slots: {
+    base: ["uy:group/base", "uy:list-none uy:width-full uy:flex"],
+    number: [
+      "uy:rounded-200 uy:w-300 uy:h-300 uy:place-content-center uy:text-center uy:self-center"
+    ],
+    element: [
+      "uy:group/element",
+      "uy:gap-75 uy:flex uy:flex-1 uy:flex-row uy:items-stretch uy:outline-none uy:rounded-50",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    text: [
+      "uy:px-150 uy:py-25 uy:rounded-75 uy:grow uy:text-left uy:min-h-400 uy:leading-[1] uy:content-center",
+      "uy:md:min-h-[28px]",
+      "uy:md:py-50"
+    ],
+    lock: ""
+  },
+  variants: {
+    taskStatus: {
+      uncompleted: {
+        base: ["uy:text-content-neutral-enabled"],
+        element: ["uy:data-[pressed]:text-content-neutral-pressed"],
+        number: [
+          "uy:bg-surface-neutral-lowest",
+          'uy:group-data-[current="true"]/element:bg-surface-primary-active uy:group-data-[current="true"]/element:text-content-inverted-active'
+        ],
+        text: [
+          'uy:group-data-[current="true"]/element:text-content-primary-active'
+        ]
+      },
+      completed: {
+        base: ["uy:text-content-neutral-enabled"],
+        number: ["uy:bg-surface-success uy:text-content-inverted"],
+        text: ["uy:text-content-neutral-active"]
+      },
+      locked: {
+        text: ["uy:text-content-neutral-enabled uy:bg-[transparent]"],
+        number: [
+          "uy:bg-surface-neutral-disabled uy:text-content-neutral-lowest",
+          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+        ],
+        lock: [
+          "uy:text-content-neutral-lowest uy:bg-surface-neutral-lowest uy:p-25 uy:rounded-75 uy:my-50",
+          "uy:md:my-0"
+        ]
+      }
+    }
+  }
+});
+export {
+  u as commonTask
+};

package/dist/esm/components/text/Text.d.ts

@@ -0,0 +1,84 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { text } from './Text.variants.js';
+export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement['lang'];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>['variant'];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>['color'];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+}>;
+/**
+ * The `Text` component is used to render text with different variants and colors.
+ */
+declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement["lang"];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>["variant"];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>["color"];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { Text };

package/dist/esm/components/text/Text.js

@@ -0,0 +1,58 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { text as h } from "./Text.variants.js";
+const y = {
+  inherit: "span",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  overline: "h6",
+  subtitle: "h5",
+  displayTitle: "h1",
+  displayBody: "p",
+  body: "p",
+  bodyStrong: "strong",
+  bodySmall: "small",
+  bodySmallStrong: "strong",
+  bodyLarge: "p",
+  bodyLargeStrong: "strong",
+  action: "span",
+  actionLarge: "span",
+  actionSmall: "span",
+  actionInfo: "span"
+}, g = c(
+  ({
+    children: e,
+    variant: o,
+    color: n,
+    isTruncated: a,
+    lineClamp: t,
+    asElement: s,
+    className: r,
+    ...l
+  }, i) => {
+    const m = h({
+      variant: o,
+      color: n,
+      isTruncated: a,
+      isLineClamped: t !== void 0,
+      className: r
+    }), p = y[o ?? "inherit"];
+    return /* @__PURE__ */ d(
+      s ?? p,
+      {
+        "data-dd-privacy": "mask",
+        ...l,
+        ref: i,
+        className: m,
+        style: { "--uy-text-line-clamp": t },
+        children: e
+      }
+    );
+  }
+);
+g.displayName = "Text";
+export {
+  g as Text
+};